@extend-ai/react-xlsx 0.12.3 → 0.13.0

package/dist/index.cjs

@@ -72,6 +72,170 @@ var SERIES_COLORS = [
   "#636363",
   "#997300"
 ];
+function quoteSeriesFormulaString(value) {
+  return `"${value.replace(/"/g, '""')}"`;
+}
+function unquoteSeriesFormulaString(value) {
+  const trimmed = value.trim();
+  if (trimmed.length < 2 || !trimmed.startsWith('"') || !trimmed.endsWith('"')) {
+    return null;
+  }
+  return trimmed.slice(1, -1).replace(/""/g, '"');
+}
+function splitTopLevelSeriesArguments(value) {
+  const args = [];
+  let current = "";
+  let doubleQuoted = false;
+  let singleQuoted = false;
+  let depth = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index] ?? "";
+    const next = value[index + 1] ?? "";
+    if (doubleQuoted) {
+      current += char;
+      if (char === '"' && next === '"') {
+        current += next;
+        index += 1;
+      } else if (char === '"') {
+        doubleQuoted = false;
+      }
+      continue;
+    }
+    if (singleQuoted) {
+      current += char;
+      if (char === "'" && next === "'") {
+        current += next;
+        index += 1;
+      } else if (char === "'") {
+        singleQuoted = false;
+      }
+      continue;
+    }
+    if (char === '"') {
+      doubleQuoted = true;
+      current += char;
+      continue;
+    }
+    if (char === "'") {
+      singleQuoted = true;
+      current += char;
+      continue;
+    }
+    if (char === "(") {
+      depth += 1;
+      current += char;
+      continue;
+    }
+    if (char === ")") {
+      depth = Math.max(0, depth - 1);
+      current += char;
+      continue;
+    }
+    if (char === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  args.push(current.trim());
+  return args;
+}
+function readSeriesNameFormula(series) {
+  const raw = series.raw && typeof series.raw === "object" ? series.raw : null;
+  return typeof raw?.name === "string" && raw.name.length > 0 ? raw.name : null;
+}
+function buildChartSeriesFormula(chart, seriesIndex) {
+  const series = chart?.series[seriesIndex];
+  if (!chart || !series) {
+    return "";
+  }
+  const nameFormula = readSeriesNameFormula(series);
+  const nameArgument = nameFormula ?? quoteSeriesFormulaString(series.name ?? `Series ${seriesIndex + 1}`);
+  const categoryArgument = series.categoriesRef?.formula ?? "";
+  const valueArgument = series.valuesRef?.formula ?? "";
+  const orderArgument = String(seriesIndex + 1);
+  const bubbleArgument = series.bubbleSizeRef?.formula;
+  return [
+    `=SERIES(${nameArgument}`,
+    categoryArgument,
+    valueArgument,
+    orderArgument,
+    ...chart.chartType === "Bubble" || bubbleArgument ? [bubbleArgument ?? ""] : []
+  ].join(",") + ")";
+}
+function parseChartSeriesFormula(formula, chart) {
+  const trimmed = formula.trim();
+  const withoutEquals = trimmed.startsWith("=") ? trimmed.slice(1).trim() : trimmed;
+  const match = /^SERIES\s*\(([\s\S]*)\)$/i.exec(withoutEquals);
+  if (!match) {
+    return null;
+  }
+  const args = splitTopLevelSeriesArguments(match[1]);
+  const isBubble = chart?.chartType === "Bubble";
+  if (args.length < 4 || args.length > 5 || isBubble && args.length !== 5) {
+    return null;
+  }
+  const [nameArg = "", categoryFormula = "", valueFormula = "", orderArg = "", bubbleSizeFormula] = args;
+  if (!categoryFormula || !valueFormula) {
+    return null;
+  }
+  const parsedOrder = Number(orderArg);
+  if (!Number.isFinite(parsedOrder)) {
+    return null;
+  }
+  const nameLiteral = unquoteSeriesFormulaString(nameArg);
+  return {
+    bubbleSizeFormula: bubbleSizeFormula && bubbleSizeFormula.length > 0 ? bubbleSizeFormula : void 0,
+    categoryFormula,
+    nameFormula: nameLiteral == null && nameArg.length > 0 ? nameArg : void 0,
+    nameLiteral: nameLiteral ?? void 0,
+    order: parsedOrder,
+    valueFormula
+  };
+}
+function applyChartSeriesFormula(chart, seriesIndex, formula, workbook) {
+  const parsed = parseChartSeriesFormula(formula, chart);
+  const currentSeries = chart.series[seriesIndex];
+  if (!parsed || !currentSeries) {
+    return null;
+  }
+  const categoriesRef = {
+    ...currentSeries.categoriesRef ?? {},
+    formula: parsed.categoryFormula
+  };
+  const valuesRef = {
+    ...currentSeries.valuesRef ?? {},
+    formula: parsed.valueFormula
+  };
+  const bubbleSizeRef = chart.chartType === "Bubble" || parsed.bubbleSizeFormula ? {
+    ...currentSeries.bubbleSizeRef ?? {},
+    formula: parsed.bubbleSizeFormula
+  } : currentSeries.bubbleSizeRef ?? null;
+  const raw = {
+    ...currentSeries.raw ?? {}
+  };
+  if (parsed.nameFormula) {
+    raw.name = parsed.nameFormula;
+  } else {
+    delete raw.name;
+  }
+  const nextSeries = {
+    ...currentSeries,
+    bubbleSizeRef,
+    bubbleSizes: workbook && bubbleSizeRef?.formula ? resolveReferenceValues(workbook, chart.workbookSheetIndex, bubbleSizeRef, "value").map((value) => typeof value === "number" && Number.isFinite(value) ? value : null) : currentSeries.bubbleSizes,
+    categories: workbook ? resolveReferenceValues(workbook, chart.workbookSheetIndex, categoriesRef, "category") : currentSeries.categories,
+    categoriesRef,
+    name: parsed.nameLiteral ?? (parsed.nameFormula && workbook ? resolveSeriesName(workbook, chart.workbookSheetIndex, parsed.nameFormula) : parsed.nameFormula ?? currentSeries.name),
+    raw,
+    values: workbook ? resolveReferenceValues(workbook, chart.workbookSheetIndex, valuesRef, "value").map((value) => typeof value === "number" && Number.isFinite(value) ? value : null) : currentSeries.values,
+    valuesRef
+  };
+  return {
+    ...chart,
+    series: chart.series.map((series, index) => index === seriesIndex ? nextSeries : series)
+  };
+}
 function normalizeWorksheetVisibility(value) {
   return value === "hidden" || value === "veryHidden" ? value : "visible";
 }
@@ -1638,6 +1802,9 @@ function getLocalChildren(parent, localName) {
     (node) => node.nodeType === Node.ELEMENT_NODE && node.localName === localName
   );
 }
+function removeLocalChildren(parent, localName) {
+  getLocalChildren(parent, localName).forEach((node) => node.parentNode?.removeChild(node));
+}
 function getLocalDescendants(parent, localName) {
   return Array.from(parent.getElementsByTagName("*")).filter(
     (node) => node.localName === localName
@@ -3096,34 +3263,52 @@ function setChartTitle(chartNode, value) {
 }
 function setRefFormula(parent, refNodeName, formula) {
   if (!formula) {
+    removeLocalChildren(parent, refNodeName);
     return;
   }
   const refNode = ensureChild(parent, refNodeName);
   setLeafValue(refNode, "f", formula);
 }
-function updateSeriesNodes(chartTypeNode, chart) {
+function setSeriesText(seriesNode, series) {
+  const raw = series.raw && typeof series.raw === "object" ? series.raw : null;
+  const nameFormula = typeof raw?.name === "string" && raw.name.length > 0 ? raw.name : void 0;
+  if (!nameFormula && series.name === void 0) {
+    return;
+  }
+  const tx = ensureChild(seriesNode, "tx");
+  removeLocalChildren(tx, "strRef");
+  removeLocalChildren(tx, "v");
+  if (nameFormula) {
+    const strRef = ensureChild(tx, "strRef");
+    setLeafValue(strRef, "f", nameFormula);
+    return;
+  }
+  setLeafValue(tx, "v", series.name ?? "");
+}
+function updateSeriesNodes(plotAreaNode, chart) {
   if (!chart.series) {
     return;
   }
-  const seriesNodes = getLocalDescendants(chartTypeNode, "ser");
+  const seriesNodes = getLocalDescendants(plotAreaNode, "ser");
   chart.series.forEach((series, index) => {
     const seriesNode = seriesNodes[index];
     if (!seriesNode) {
       return;
     }
-    if (series.name !== void 0) {
-      const tx = ensureChild(seriesNode, "tx");
-      const strRef = ensureChild(tx, "strRef");
-      setLeafValue(strRef, "f", series.name);
-    }
+    setSeriesText(seriesNode, series);
     if (series.categoriesRef?.formula) {
-      const target = chart.chartType === "Scatter" || chart.chartType === "ScatterLines" || chart.chartType === "ScatterSmooth" ? ensureChild(seriesNode, "xVal") : ensureChild(seriesNode, "cat");
-      setRefFormula(target, "strRef", series.categoriesRef.formula);
+      const target = getFirstLocalChild(seriesNode, "xVal") ?? getFirstLocalChild(seriesNode, "cat") ?? (chart.chartType === "Scatter" || chart.chartType === "ScatterLines" || chart.chartType === "ScatterSmooth" || chart.chartType === "Bubble" ? ensureChild(seriesNode, "xVal") : ensureChild(seriesNode, "cat"));
+      const categoryRefName = target.localName === "xVal" || getFirstLocalChild(target, "numRef") ? "numRef" : "strRef";
+      setRefFormula(target, categoryRefName, series.categoriesRef.formula);
     }
     if (series.valuesRef?.formula) {
-      const target = chart.chartType === "Scatter" || chart.chartType === "ScatterLines" || chart.chartType === "ScatterSmooth" ? ensureChild(seriesNode, "yVal") : ensureChild(seriesNode, "val");
+      const target = getFirstLocalChild(seriesNode, "yVal") ?? getFirstLocalChild(seriesNode, "val") ?? (chart.chartType === "Scatter" || chart.chartType === "ScatterLines" || chart.chartType === "ScatterSmooth" || chart.chartType === "Bubble" ? ensureChild(seriesNode, "yVal") : ensureChild(seriesNode, "val"));
       setRefFormula(target, "numRef", series.valuesRef.formula);
     }
+    if (series.bubbleSizeRef) {
+      const target = getFirstLocalChild(seriesNode, "bubbleSize") ?? ensureChild(seriesNode, "bubbleSize");
+      setRefFormula(target, "numRef", series.bubbleSizeRef.formula);
+    }
     if (series.invertIfNegative !== void 0) {
       setBooleanValue(seriesNode, "invertIfNegative", series.invertIfNegative);
     }
@@ -3272,7 +3457,7 @@ function updateWorkbookChartDefinition(imageAssets, chartAssets, chartId, patch)
   if (patch.dataLabels) {
     updateDataLabels(chartTypeNode, patch.dataLabels);
   }
-  updateSeriesNodes(chartTypeNode, patch);
+  updateSeriesNodes(plotAreaNode, patch);
   updateAxisNode(
     getLocalChildren(plotAreaNode, "catAx")[0] ?? getLocalChildren(plotAreaNode, "dateAx")[0] ?? getLocalChildren(plotAreaNode, "serAx")[0] ?? null,
     patch.categoryAxis
@@ -7889,6 +8074,7 @@ function useXlsxViewerController(options) {
   const [activeCell, setActiveCell] = React.useState(null);
   const [selection, setSelection] = React.useState(null);
   const [selectedChartId, setSelectedChartId] = React.useState(null);
+  const [selectedChartElement, setSelectedChartElement] = React.useState(null);
   const [selectedImageId, setSelectedImageId] = React.useState(null);
   const [revision, setRevision] = React.useState(0);
   const selectionAnchorRef = React.useRef(null);
@@ -8161,6 +8347,7 @@ function useXlsxViewerController(options) {
       setActiveCell(null);
       setSelection(null);
       setSelectedChartId(null);
+      setSelectedChartElement(null);
       setSelectedImageId(null);
       selectionAnchorRef.current = null;
       undoStackRef.current = [];
@@ -8189,6 +8376,7 @@ function useXlsxViewerController(options) {
     setActiveCell(null);
     setSelection(null);
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(null);
     selectionAnchorRef.current = null;
     undoStackRef.current = [];
@@ -8340,6 +8528,7 @@ function useXlsxViewerController(options) {
     setActiveCell(null);
     setSelection(null);
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(null);
     selectionAnchorRef.current = null;
     setSortState(null);
@@ -8661,12 +8850,49 @@ function useXlsxViewerController(options) {
     () => selectedChartId ? getChartById(selectedChartId) : null,
     [getChartById, selectedChartId]
   );
+  React.useEffect(() => {
+    if (!selectedChartId) {
+      if (selectedChartElement) {
+        setSelectedChartElement(null);
+      }
+      return;
+    }
+    if (!selectedChart) {
+      setSelectedChartId(null);
+      setSelectedChartElement(null);
+      return;
+    }
+    if (!selectedChartElement) {
+      setSelectedChartElement({ chartId: selectedChartId, kind: "chart" });
+      return;
+    }
+    if (selectedChartElement.chartId !== selectedChartId) {
+      setSelectedChartElement({ chartId: selectedChartId, kind: "chart" });
+      return;
+    }
+    if (selectedChartElement.kind !== "chart") {
+      const selectedSeries = selectedChart.series[selectedChartElement.seriesIndex];
+      if (!selectedSeries || selectedSeries.id !== selectedChartElement.seriesId) {
+        setSelectedChartElement({ chartId: selectedChartId, kind: "chart" });
+      }
+    }
+  }, [selectedChart, selectedChartElement, selectedChartId]);
   const selectChart = React.useCallback((id) => {
     setSelectedImageId(null);
     setSelectedChartId(id);
+    setSelectedChartElement(id ? { chartId: id, kind: "chart" } : null);
   }, []);
   const clearSelectedChart = React.useCallback(() => {
     setSelectedChartId(null);
+    setSelectedChartElement(null);
+  }, []);
+  const clearSelectedChartElement = React.useCallback(() => {
+    setSelectedChartElement(selectedChartId ? { chartId: selectedChartId, kind: "chart" } : null);
+  }, [selectedChartId]);
+  const selectChartElement = React.useCallback((selection2) => {
+    setSelectedImageId(null);
+    setSelectedChartId(selection2?.chartId ?? null);
+    setSelectedChartElement(selection2);
   }, []);
   const getSheetImages = React.useCallback((sheetIndex = activeSheetIndex) => {
     const targetSheet = sheets[sheetIndex];
@@ -8713,6 +8939,7 @@ function useXlsxViewerController(options) {
   );
   const selectImage = React.useCallback((id) => {
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(id);
   }, []);
   const clearSelectedImage = React.useCallback(() => {
@@ -8937,10 +9164,32 @@ function useXlsxViewerController(options) {
     () => getCellDisplayValue2(deferredMetadataCell),
     [deferredMetadataCell, getCellDisplayValue2, revision, workerCellSnapshotRevision]
   );
-  const selectedFormula = React.useMemo(
+  const selectedCellFormula = React.useMemo(
     () => getCellFormula(deferredMetadataCell),
     [deferredMetadataCell, getCellFormula, revision, workerCellSnapshotRevision]
   );
+  const getChartSeriesFormula = React.useCallback((chartId, seriesIndex) => buildChartSeriesFormula(getChartById(chartId), seriesIndex), [getChartById]);
+  const selectedChartFormula = React.useMemo(() => {
+    if (!selectedChartElement || selectedChartElement.kind === "chart" || selectedChartElement.seriesIndex < 0) {
+      return null;
+    }
+    return getChartSeriesFormula(selectedChartElement.chartId, selectedChartElement.seriesIndex);
+  }, [getChartSeriesFormula, selectedChartElement]);
+  const selectedFormulaTarget = React.useMemo(() => {
+    if (selectedChartFormula && selectedChartElement && selectedChartElement.kind !== "chart") {
+      return {
+        chartId: selectedChartElement.chartId,
+        kind: "chartSeries",
+        seriesId: selectedChartElement.seriesId,
+        seriesIndex: selectedChartElement.seriesIndex
+      };
+    }
+    return {
+      cell: deferredMetadataCell,
+      kind: "cell"
+    };
+  }, [deferredMetadataCell, selectedChartElement, selectedChartFormula]);
+  const selectedFormula = selectedChartFormula ?? selectedCellFormula;
   const isLoadDeferred = deferredLoadFileSize !== null;
   const canLoadDeferred = !isLoading && isLoadDeferred;
   const canUndo = !readOnly && undoStackRef.current.length > 0;
@@ -9483,8 +9732,32 @@ function useXlsxViewerController(options) {
     setChartsByWorkbookSheetIndex((current) => current.map((sheetCharts) => sheetCharts.map((chart) => chart.id === id ? { ...chart, ...patch } : chart)));
     setRevision((current) => current + 1);
   }, [ensureChartAssetsHydrated, getChartById, readOnly, recordHistoryBeforeMutation, sheets, workbook]);
+  const setChartSeriesFormula = React.useCallback((chartId, seriesIndex, formula) => {
+    if (readOnly) {
+      return false;
+    }
+    const chart = getChartById(chartId);
+    if (!chart || chart.editable === false) {
+      return false;
+    }
+    const nextChart = applyChartSeriesFormula(chart, seriesIndex, formula, workbook);
+    if (!nextChart) {
+      return false;
+    }
+    updateChart(chartId, { series: nextChart.series });
+    const selectedSeries = nextChart.series[seriesIndex];
+    if (selectedSeries) {
+      setSelectedChartElement((current) => current && current.chartId === chartId && current.kind !== "chart" ? {
+        ...current,
+        seriesId: selectedSeries.id,
+        seriesIndex
+      } : current);
+    }
+    return true;
+  }, [getChartById, readOnly, updateChart, workbook]);
   const selectCell = React.useCallback((cell, options2) => {
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(null);
     setActiveCell(cell);
     if (options2?.extend && selectionAnchorRef.current) {
@@ -9497,6 +9770,7 @@ function useXlsxViewerController(options) {
   const selectRange = React.useCallback((range) => {
     const normalized = normalizeRange(range);
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(null);
     selectionAnchorRef.current = normalized.start;
     setActiveCell(normalized.end);
@@ -9507,6 +9781,7 @@ function useXlsxViewerController(options) {
     setActiveCell(null);
     setSelection(null);
     setSelectedChartId(null);
+    setSelectedChartElement(null);
     setSelectedImageId(null);
   }, []);
   const clearSelectedCells = React.useCallback(() => {
@@ -9624,6 +9899,16 @@ function useXlsxViewerController(options) {
     }
     setCellFormula(activeCell, formula);
   }, [activeCell, setCellFormula]);
+  const setSelectedFormula = React.useCallback((formula) => {
+    if (selectedFormulaTarget?.kind === "chartSeries") {
+      return setChartSeriesFormula(selectedFormulaTarget.chartId, selectedFormulaTarget.seriesIndex, formula);
+    }
+    if (!activeCell) {
+      return false;
+    }
+    setCellFormula(activeCell, formula);
+    return true;
+  }, [activeCell, selectedFormulaTarget, setCellFormula, setChartSeriesFormula]);
   const setSelectedCellStyle = React.useCallback((style) => {
     if (!activeCell) {
       return;
@@ -10100,6 +10385,7 @@ function useXlsxViewerController(options) {
       charts,
       chartsheets,
       clearSelectedChart,
+      clearSelectedChartElement,
       clearSelectedCells,
       clearSelectedImage,
       clearSelection,
@@ -10116,6 +10402,7 @@ function useXlsxViewerController(options) {
       fillSelection,
       formControls,
       getChartById,
+      getChartSeriesFormula,
       getChartsheetById,
       getImageById,
       getSheetCharts,
@@ -10156,18 +10443,25 @@ function useXlsxViewerController(options) {
       setCellStyle,
       setCellValue,
       setRangeStyle,
+      setSelectedFormula,
       setZoomScale,
       setChartRect,
+      setChartSeriesFormula,
       setImageRect,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
+      selectedCellFormula,
       selectedFormula,
+      selectedFormulaTarget,
       selectedImage,
       selectedImageId,
       selectedRangeAddress,
       selectedValue,
       selectCell,
       selectChart,
+      selectChartElement,
       selectImage,
       selectRange,
       selection,
@@ -10207,6 +10501,7 @@ function useXlsxViewerController(options) {
       charts,
       chartsheets,
       clearSelectedChart,
+      clearSelectedChartElement,
       clearSelectedCells,
       clearSelectedImage,
       continueDeferredLoad,
@@ -10223,6 +10518,7 @@ function useXlsxViewerController(options) {
       fillSelection,
       formControls,
       getChartById,
+      getChartSeriesFormula,
       getChartsheetById,
       getImageById,
       getSheetCharts,
@@ -10261,18 +10557,25 @@ function useXlsxViewerController(options) {
       setCellStyle,
       setCellValue,
       setRangeStyle,
+      setSelectedFormula,
       setZoomScale,
       setChartRect,
+      setChartSeriesFormula,
       setImageRect,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
+      selectedCellFormula,
       selectedFormula,
+      selectedFormulaTarget,
       selectedImage,
       selectedImageId,
       selectedRangeAddress,
       selectedValue,
       selectCell,
       selectChart,
+      selectChartElement,
       selectImage,
       selectRange,
       selection,
@@ -11060,6 +11363,8 @@ var MemoSurfaceChartComposite = React2.memo(function MemoSurfaceChartComposite2(
   chart,
   fontFamily,
   layout,
+  onDoubleClick,
+  onPointerDown,
   overlay,
   palette,
   fallback
@@ -11255,7 +11560,7 @@ var MemoSurfaceChartComposite = React2.memo(function MemoSurfaceChartComposite2(
         fontFamily,
         height: "100%",
         overflow: "hidden",
-        pointerEvents: "none",
+        pointerEvents: "auto",
         position: "relative",
         width: "100%"
       },
@@ -11276,6 +11581,8 @@ var MemoSurfaceChartComposite = React2.memo(function MemoSurfaceChartComposite2(
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "svg",
           {
+            onDoubleClick,
+            onPointerDown,
             style: { display: "block", height: "100%", inset: 0, position: "absolute", width: "100%" },
             viewBox: `0 0 ${layout.width} ${layout.height}`,
             children: [
@@ -11287,10 +11594,104 @@ var MemoSurfaceChartComposite = React2.memo(function MemoSurfaceChartComposite2(
       ]
     }
   );
-}, (prev, next) => prev.chart === next.chart && prev.palette === next.palette && prev.background === next.background && prev.borderColor === next.borderColor && prev.fontFamily === next.fontFamily && prev.layout.width === next.layout.width && prev.layout.height === next.layout.height && prev.layout.plot.left === next.layout.plot.left && prev.layout.plot.top === next.layout.plot.top && prev.layout.plot.width === next.layout.plot.width && prev.layout.plot.height === next.layout.plot.height && prev.overlay === next.overlay && prev.fallback === next.fallback);
+}, (prev, next) => prev.chart === next.chart && prev.palette === next.palette && prev.background === next.background && prev.borderColor === next.borderColor && prev.fontFamily === next.fontFamily && prev.onDoubleClick === next.onDoubleClick && prev.onPointerDown === next.onPointerDown && prev.layout.width === next.layout.width && prev.layout.height === next.layout.height && prev.layout.plot.left === next.layout.plot.left && prev.layout.plot.top === next.layout.plot.top && prev.layout.plot.width === next.layout.plot.width && prev.layout.plot.height === next.layout.plot.height && prev.overlay === next.overlay && prev.fallback === next.fallback);
 
 // src/chart-renderer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react = require("react");
+function chartElementDataProps(seriesIndex, pointIndex, options) {
+  return {
+    "data-xlsx-chart-point-index": typeof pointIndex === "number" ? String(pointIndex) : void 0,
+    "data-xlsx-chart-selection-mode": options?.selectionMode,
+    "data-xlsx-chart-series-index": String(seriesIndex),
+    style: {
+      cursor: "pointer",
+      pointerEvents: "all"
+    }
+  };
+}
+function barChartElementDataProps(seriesIndex, pointIndex) {
+  return chartElementDataProps(seriesIndex, pointIndex, { selectionMode: "seriesFirst" });
+}
+function resolveChartElementTarget(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  return target.closest("[data-xlsx-chart-series-index]");
+}
+function resolveChartSelectionFromTarget(chart, target, selectedChartElement) {
+  const element = resolveChartElementTarget(target);
+  if (!element) {
+    return selectedChartElement?.chartId === chart.id ? { chartId: chart.id, kind: "chart" } : { chartId: chart.id, kind: "chart" };
+  }
+  const seriesIndex = Number(element.dataset.xlsxChartSeriesIndex);
+  if (!Number.isInteger(seriesIndex) || seriesIndex < 0 || seriesIndex >= chart.series.length) {
+    return null;
+  }
+  const series = chart.series[seriesIndex];
+  if (!series) {
+    return null;
+  }
+  const rawPointIndex = element.dataset.xlsxChartPointIndex;
+  const rawElementKind = element.dataset.xlsxChartElementKind;
+  const selectionMode = element.dataset.xlsxChartSelectionMode;
+  const pointIndex = rawPointIndex == null || rawPointIndex === "" ? null : Number(rawPointIndex);
+  const hasPoint = pointIndex != null && Number.isInteger(pointIndex) && pointIndex >= 0;
+  const sameSelectedSeries = selectedChartElement?.chartId === chart.id && selectedChartElement.kind !== "chart" && selectedChartElement.seriesIndex === seriesIndex;
+  if (hasPoint && (selectionMode !== "seriesFirst" || sameSelectedSeries)) {
+    return {
+      chartId: chart.id,
+      kind: "point",
+      pointIndex,
+      seriesId: series.id,
+      seriesIndex
+    };
+  }
+  return {
+    chartId: chart.id,
+    kind: rawElementKind === "legendEntry" ? "legendEntry" : "series",
+    seriesId: series.id,
+    seriesIndex
+  };
+}
+function isSelectedChartSeries(selectedChartElement, chartId, seriesIndex) {
+  return selectedChartElement?.chartId === chartId && selectedChartElement.kind !== "chart" && selectedChartElement.seriesIndex === seriesIndex;
+}
+function isSelectedChartPoint(selectedChartElement, chartId, seriesIndex, pointIndex) {
+  return selectedChartElement?.chartId === chartId && selectedChartElement.kind === "point" && selectedChartElement.seriesIndex === seriesIndex && selectedChartElement.pointIndex === pointIndex;
+}
+function isSelectedChartPointOrSeries(selectedChartElement, chartId, seriesIndex, pointIndex) {
+  return isSelectedChartPoint(selectedChartElement, chartId, seriesIndex, pointIndex) || isSelectedChartSeries(selectedChartElement, chartId, seriesIndex) && selectedChartElement?.kind !== "point";
+}
+function renderSelectionRectHandles(key, left, top, width, height, color = "#64748b") {
+  return renderSelectionPointHandles(
+    key,
+    [
+      { x: left, y: top },
+      { x: left + width, y: top },
+      { x: left, y: top + height },
+      { x: left + width, y: top + height }
+    ],
+    color
+  );
+}
+function renderSelectionPointHandles(key, points, color = "#64748b") {
+  const radius = 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { pointerEvents: "none", children: points.map((point, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "circle",
+    {
+      cx: point.x,
+      cy: point.y,
+      fill: "#ffffff",
+      r: radius,
+      stroke: color,
+      strokeWidth: 1.1,
+      style: { filter: "drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18))" },
+      vectorEffect: "non-scaling-stroke"
+    },
+    `${key}-handle-${index}`
+  )) }, key);
+}
 var WORLD_COUNTRY_FEATURES = (0, import_topojson_client.feature)(
   countries_50m_default,
   countries_50m_default.objects.countries
@@ -12988,10 +13389,17 @@ function renderLegend(chart, layout, palette) {
     const startY = layout.plot.top + 6;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: items.map((item, index) => {
       const y = startY + index * 18;
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${x}, ${y})`, children: [
+      return /* @__PURE__ */ (0, import_react.createElement)(
+        "g",
+        {
+          ...index < chart.series.length ? chartElementDataProps(index) : {},
+          "data-xlsx-chart-element-kind": index < chart.series.length ? "legendEntry" : void 0,
+          key: `legend-${index}`,
+          transform: `translate(${x}, ${y})`
+        },
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: item.color, height: swatchSize, rx: 1.2, ry: 1.2, width: swatchSize, x: 0, y: -7 }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { fill: textColor, fontSize: 10, x: textOffset, y: 0, children: item.label })
-      ] }, `legend-${index}`);
+      );
     }) });
   }
   const rowY = legendPos === "top" ? layout.titleHeight + 12 : layout.height - 8;
@@ -12999,10 +13407,17 @@ function renderLegend(chart, layout, palette) {
   let cursorX = Math.max(8, (layout.width - totalWidth) / 2);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: items.map((item, index) => {
     const labelWidth = Math.min(96, item.label.length * 5.4);
-    const node = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${cursorX}, ${rowY})`, children: [
+    const node = /* @__PURE__ */ (0, import_react.createElement)(
+      "g",
+      {
+        ...index < chart.series.length ? chartElementDataProps(index) : {},
+        "data-xlsx-chart-element-kind": index < chart.series.length ? "legendEntry" : void 0,
+        key: `legend-${index}`,
+        transform: `translate(${cursorX}, ${rowY})`
+      },
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: item.color, height: swatchSize, rx: 1.2, ry: 1.2, width: swatchSize, x: 0, y: -7 }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { fill: textColor, fontSize: 10, x: textOffset, y: 0, children: item.label })
-    ] }, `legend-${index}`);
+    );
     cursorX += 24 + labelWidth;
     return node;
   }) });
@@ -13329,7 +13744,7 @@ function projectCartesian3dPoint2(x, y, z, rotXRad, rotYRad, usePerspective, per
     y: y1 * perspective
   };
 }
-function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPointsBySeries, minValue, maxValue, isAreaChart, isStackedSeries) {
+function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPointsBySeries, minValue, maxValue, isAreaChart, isStackedSeries, selectedChartElement) {
   const plot = layout.plot;
   const valueDomain = resolveAxisDomainWithChartOverrides(
     chart.valueAxis,
@@ -13396,6 +13811,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
       return {
         bottom,
         bottomBack,
+        categoryIndex,
         defined: point.defined,
         depth: top.depth,
         depthBack: topBack?.depth ?? top.depth,
@@ -13431,6 +13847,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
     points: series.map((point) => ({
       bottom: toScreenPoint(point.bottom),
       bottomBack: point.bottomBack ? toScreenPoint(point.bottomBack) : null,
+      categoryIndex: point.categoryIndex,
       defined: point.defined,
       top: toScreenPoint(point.top),
       topBack: point.topBack ? toScreenPoint(point.topBack) : null
@@ -13535,6 +13952,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "path",
             {
+              ...chartElementDataProps(seriesIndex),
               d: topFace,
               fill: lightenColor2(fillColor, 0.08),
               fillOpacity: 0.8,
@@ -13545,6 +13963,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "path",
             {
+              ...chartElementDataProps(seriesIndex),
               d: bottomFace,
               fill: darkenColor2(fillColor, 0.2),
               fillOpacity: 0.34,
@@ -13572,6 +13991,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
         isAreaChart && isStackedSeries && areaBackPoints.length >= 3 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: buildLinearSvgPath(areaBackPoints, true),
             fill: darkenColor2(fillColor, 0.18),
             fillOpacity: 0.44,
@@ -13583,6 +14003,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
         startCap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: startCap,
             fill: darkenColor2(fillColor, 0.24),
             fillOpacity: 0.54,
@@ -13593,6 +14014,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
         endCap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: endCap,
             fill: darkenColor2(fillColor, 0.14),
             fillOpacity: 0.6,
@@ -13603,6 +14025,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
         isAreaChart && areaPoints.length >= 3 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: buildLinearSvgPath(areaPoints, true),
             fill: fillColor,
             fillOpacity: 0.74,
@@ -13626,6 +14049,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: buildLinearSvgPath(linePoints),
             fill: "none",
             stroke: strokeColor,
@@ -13640,6 +14064,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
+                ...chartElementDataProps(seriesIndex, point.categoryIndex),
                 d: markerPath,
                 fill: chart.series[seriesIndex]?.markerColor ?? fillColor,
                 stroke: chart.series[seriesIndex]?.markerLineColor ?? chart.chartAreaFillColor ?? palette.surface,
@@ -13648,7 +14073,23 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
             )
           },
           `line3d-marker-${seriesIndex}-${pointIndex}`
-        )) : null
+        )) : null,
+        definedPoints.map((point) => /* @__PURE__ */ (0, import_react.createElement)(
+          "circle",
+          {
+            ...chartElementDataProps(seriesIndex, point.categoryIndex),
+            cx: point.top.x,
+            cy: point.top.y,
+            fill: "transparent",
+            key: `line3d-hit-${seriesIndex}-${point.categoryIndex}`,
+            r: 7,
+            stroke: "none"
+          }
+        )),
+        definedPoints.map((point) => isSelectedChartPointOrSeries(selectedChartElement, chart.id, seriesIndex, point.categoryIndex) ? renderSelectionPointHandles(
+          `line3d-selection-${seriesIndex}-${point.categoryIndex}`,
+          [{ x: point.top.x, y: point.top.y }]
+        ) : null)
       ] }, `line3d-series-${seriesIndex}`);
     }),
     yLabelPoints.map(({ point, tick }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -13677,7 +14118,7 @@ function renderLineOrAreaChart3d(chart, palette, layout, categories, stackedPoin
     ))
   ] });
 }
-function renderBarChart(chart, palette, layout, chartType) {
+function renderBarChart(chart, palette, layout, chartType, selectedChartElement) {
   if (chart.series.length === 0) {
     return null;
   }
@@ -14058,9 +14499,11 @@ function renderBarChart(chart, palette, layout, chartType) {
     axisNode,
     frameNode,
     depthAxisNode,
-    chart.is3d ? sortedBars.map((bar) => renderExtrudedRect(bar)) : renderedBars.map((bar) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    chart.is3d ? sortedBars.map((bar) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { ...barChartElementDataProps(bar.seriesIndex, bar.categoryIndex), children: renderExtrudedRect(bar) }, `bar-hit-${bar.key}`)) : renderedBars.map((bar) => /* @__PURE__ */ (0, import_react.createElement)(
       "rect",
       {
+        ...barChartElementDataProps(bar.seriesIndex, bar.categoryIndex),
+        key: bar.key,
         fill: bar.color,
         height: bar.height,
         stroke: isHistogramLike ? "none" : bar.stroke,
@@ -14068,12 +14511,12 @@ function renderBarChart(chart, palette, layout, chartType) {
         width: bar.width,
         x: bar.left,
         y: bar.top
-      },
-      bar.key
-    ))
+      }
+    )),
+    renderedBars.map((bar) => isSelectedChartPoint(selectedChartElement, chart.id, bar.seriesIndex, bar.categoryIndex) || isSelectedChartSeries(selectedChartElement, chart.id, bar.seriesIndex) && selectedChartElement?.kind !== "point" ? renderSelectionRectHandles(`bar-selection-${bar.key}`, bar.left, bar.top, bar.width, bar.height) : null)
   ] });
 }
-function renderLineOrAreaChart(chart, palette, layout, chartType) {
+function renderLineOrAreaChart(chart, palette, layout, chartType, selectedChartElement) {
   if (chart.series.length === 0) {
     return null;
   }
@@ -14184,7 +14627,8 @@ function renderLineOrAreaChart(chart, palette, layout, chartType) {
       minValue,
       maxValue,
       isAreaChart,
-      isStackedSeries
+      isStackedSeries,
+      selectedChartElement
     );
   }
   const rawRecord = chart.raw && typeof chart.raw === "object" ? chart.raw : null;
@@ -14273,6 +14717,7 @@ function renderLineOrAreaChart(chart, palette, layout, chartType) {
         isAreaChart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: areaPath,
             fill: seriesFillColor,
             fillOpacity: 1,
@@ -14282,6 +14727,7 @@ function renderLineOrAreaChart(chart, palette, layout, chartType) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: linePath,
             fill: "none",
             stroke: chartSeriesStrokeColor(chart, seriesIndex),
@@ -14290,23 +14736,31 @@ function renderLineOrAreaChart(chart, palette, layout, chartType) {
             strokeWidth: Math.max(1.5, series.lineWidthPx ?? 2)
           }
         ),
-        points.map((point, pointIndex) => point.y == null ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        points.map((point, pointIndex) => point.y == null ? null : /* @__PURE__ */ (0, import_react.createElement)(
           "circle",
           {
+            ...chartElementDataProps(seriesIndex, pointIndex),
+            key: `line-marker-${seriesIndex}-${pointIndex}`,
             cx: point.x,
             cy: yScale(point.y),
             fill: series.markerColor ?? chartSeriesColor(chart, seriesIndex),
             r: Math.max(2, (series.markerSize ?? 6) * 0.25),
             stroke: series.markerLineColor ?? chart.chartAreaFillColor ?? chartSeriesStrokeColor(chart, seriesIndex),
             strokeWidth: 1
-          },
-          `line-marker-${seriesIndex}-${pointIndex}`
-        ))
+          }
+        )),
+        points.map((point, pointIndex) => point.y != null && (isSelectedChartPoint(selectedChartElement, chart.id, seriesIndex, pointIndex) || isSelectedChartSeries(selectedChartElement, chart.id, seriesIndex) && selectedChartElement?.kind !== "point") ? isAreaChart ? renderSelectionPointHandles(`area-selection-${seriesIndex}-${pointIndex}`, [{ x: point.x, y: yScale(point.y) }]) : renderSelectionRectHandles(
+          `line-selection-${seriesIndex}-${pointIndex}`,
+          point.x - 4,
+          yScale(point.y) - 4,
+          8,
+          8
+        ) : null)
       ] }, `line-series-${seriesIndex}`);
     })
   ] });
 }
-function renderComboChart(chart, palette, layout) {
+function renderComboChart(chart, palette, layout, selectedChartElement) {
   const groups = buildComboGroups(chart);
   const columnGroup = groups.find((group) => group.chartType.startsWith("Column"));
   const lineGroup = groups.find((group) => group.chartType.startsWith("Line"));
@@ -14333,6 +14787,10 @@ function renderComboChart(chart, palette, layout) {
   const categoryScale = (0, import_d3_scale.scaleBand)().domain(categories).range([plot.left, plot.left + plot.width]).paddingInner(categoryBandPadding.inner).paddingOuter(categoryBandPadding.outer);
   const seriesScale = (0, import_d3_scale.scaleBand)().domain(Array.from({ length: columnGroup.series.length }, (_, index) => String(index))).range([0, categoryScale.bandwidth()]).paddingInner(histogramColumns ? 0 : 0.16).paddingOuter(histogramColumns ? 0 : 0.08);
   const categoryPositions = categories.map((category) => (categoryScale(category) ?? plot.left) + categoryScale.bandwidth() / 2);
+  const resolveGlobalSeriesIndex = (series) => {
+    const index = chart.series.findIndex((candidate) => candidate.id === series.id);
+    return index >= 0 ? index : 0;
+  };
   const primaryValues = columnGroup.series.flatMap((series) => series.values.map((value) => safeNumber2(value)).filter((value) => value != null));
   const secondaryValues = lineGroup.series.flatMap((series) => series.values.map((value) => safeNumber2(value)).filter((value) => value != null));
   if (primaryValues.length === 0 || secondaryValues.length === 0) {
@@ -14392,6 +14850,7 @@ function renderComboChart(chart, palette, layout) {
       }
     ),
     columnGroup.series.flatMap((series, seriesIndex) => categories.map((category, categoryIndex) => {
+      const globalSeriesIndex = resolveGlobalSeriesIndex(series);
       const value = safeNumber2(series.values[categoryIndex]) ?? 0;
       const categoryStart = categoryScale(category) ?? plot.left;
       const barWidth = Math.max(1, histogramColumns ? categoryScale.bandwidth() : seriesScale.bandwidth());
@@ -14399,21 +14858,32 @@ function renderComboChart(chart, palette, layout) {
       const y = primaryScale(Math.max(0, value));
       const zeroY = primaryScale(0);
       const height = Math.max(1, Math.abs(zeroY - primaryScale(value)));
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "rect",
-        {
-          fill: series.color ?? series.lineColor ?? chartSeriesColor(primaryChart, seriesIndex),
-          height,
-          stroke: histogramColumns ? "none" : series.lineColor ?? series.color ?? chartSeriesStrokeColor(primaryChart, seriesIndex),
-          strokeWidth: histogramColumns ? 0 : 1,
-          width: barWidth,
+      const selected = isSelectedChartPoint(selectedChartElement, chart.id, globalSeriesIndex, categoryIndex) || isSelectedChartSeries(selectedChartElement, chart.id, globalSeriesIndex) && selectedChartElement?.kind !== "point";
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "rect",
+          {
+            ...barChartElementDataProps(globalSeriesIndex, categoryIndex),
+            fill: series.color ?? series.lineColor ?? chartSeriesColor(primaryChart, seriesIndex),
+            height,
+            stroke: selected ? "#64748b" : histogramColumns ? "none" : series.lineColor ?? series.color ?? chartSeriesStrokeColor(primaryChart, seriesIndex),
+            strokeWidth: selected ? 2 : histogramColumns ? 0 : 1,
+            width: barWidth,
+            x,
+            y: Math.min(y, zeroY)
+          }
+        ),
+        selected ? renderSelectionRectHandles(
+          `combo-bar-selection-${globalSeriesIndex}-${categoryIndex}`,
           x,
-          y: Math.min(y, zeroY)
-        },
-        `combo-bar-${seriesIndex}-${categoryIndex}`
-      );
+          Math.min(y, zeroY),
+          barWidth,
+          height
+        ) : null
+      ] }, `combo-bar-${seriesIndex}-${categoryIndex}`);
     })),
     lineGroup.series.map((series, seriesIndex) => {
+      const globalSeriesIndex = resolveGlobalSeriesIndex(series);
       const points = categories.map((category, categoryIndex) => ({
         x: (categoryScale(category) ?? plot.left) + categoryScale.bandwidth() / 2,
         y: safeNumber2(series.values[categoryIndex])
@@ -14424,6 +14894,7 @@ function renderComboChart(chart, palette, layout) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(globalSeriesIndex),
             d: path,
             fill: "none",
             stroke: series.lineColor ?? series.color ?? chartSeriesStrokeColor(chart, columnGroup.series.length + seriesIndex),
@@ -14432,22 +14903,30 @@ function renderComboChart(chart, palette, layout) {
             strokeWidth: Math.max(1.5, series.lineWidthPx ?? 2)
           }
         ),
-        points.map((point, pointIndex) => point.y == null ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        points.map((point, pointIndex) => point.y == null ? null : /* @__PURE__ */ (0, import_react.createElement)(
           "path",
           {
+            ...chartElementDataProps(globalSeriesIndex, pointIndex),
             d: markerSymbolPath(normalizeChartMarkerSymbol(series.markerSymbol), Math.max(4, series.markerSize ?? 7)) || markerSymbolPath("circle", 7),
             fill: series.markerColor ?? series.color ?? series.lineColor ?? chartSeriesColor(chart, columnGroup.series.length + seriesIndex),
+            key: `combo-line-marker-${seriesIndex}-${pointIndex}`,
             stroke: series.markerLineColor ?? chart.chartAreaFillColor ?? "#ffffff",
             strokeWidth: 1,
             transform: `translate(${point.x}, ${secondaryScale(point.y)})`
-          },
-          `combo-line-marker-${seriesIndex}-${pointIndex}`
-        ))
+          }
+        )),
+        points.map((point, pointIndex) => point.y != null && isSelectedChartPointOrSeries(selectedChartElement, chart.id, globalSeriesIndex, pointIndex) ? renderSelectionRectHandles(
+          `combo-line-selection-${globalSeriesIndex}-${pointIndex}`,
+          point.x - 4,
+          secondaryScale(point.y) - 4,
+          8,
+          8
+        ) : null)
       ] }, `combo-line-${seriesIndex}`);
     })
   ] });
 }
-function renderScatterChart(chart, palette, layout, smooth) {
+function renderScatterChart(chart, palette, layout, smooth, selectedChartElement) {
   const plot = layout.plot;
   const rawRecord = chart.raw && typeof chart.raw === "object" ? chart.raw : null;
   const normalizedTitle = typeof chart.title === "string" ? chart.title.trim().toLowerCase() : "";
@@ -14633,6 +15112,7 @@ function renderScatterChart(chart, palette, layout, smooth) {
         shouldDrawLine && linePath.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: linePath,
             fill: "none",
             stroke: series.lineColor ?? chartSeriesStrokeColor(chart, seriesIndex),
@@ -14652,6 +15132,7 @@ function renderScatterChart(chart, palette, layout, smooth) {
               children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "path",
                 {
+                  ...chartElementDataProps(seriesIndex, pointIndex, { selectionMode: "seriesFirst" }),
                   d: markerPath,
                   fill: markerFill,
                   stroke: "none",
@@ -14661,12 +15142,16 @@ function renderScatterChart(chart, palette, layout, smooth) {
             },
             `scatter-point-${seriesIndex}-${pointIndex}`
           );
-        })
+        }),
+        seriesPoints.points.map((point, pointIndex) => isSelectedChartPoint(selectedChartElement, chart.id, seriesIndex, pointIndex) || isSelectedChartSeries(selectedChartElement, chart.id, seriesIndex) && selectedChartElement?.kind !== "point" ? renderSelectionPointHandles(
+          `scatter-selection-${seriesIndex}-${pointIndex}`,
+          [{ x: xScale(point.x), y: yScale(point.y) }]
+        ) : null)
       ] }, `scatter-series-${seriesIndex}`);
     })
   ] });
 }
-function renderBubbleChart(chart, palette, layout) {
+function renderBubbleChart(chart, palette, layout, selectedChartElement) {
   const plot = layout.plot;
   const pointsBySeries = chart.series.map((series) => series.values.map((value, index) => {
     const x = safeNumber2(series.categories[index]);
@@ -14786,6 +15271,7 @@ function renderBubbleChart(chart, palette, layout) {
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "circle",
             {
+              ...chartElementDataProps(seriesIndex, point.index, { selectionMode: "seriesFirst" }),
               cx: xScale(point.x),
               cy: yScale(point.y),
               fill: isBubble3d ? `url(#bubble3d-grad-${chart.id}-${seriesIndex})` : baseColor,
@@ -14795,6 +15281,13 @@ function renderBubbleChart(chart, palette, layout) {
               strokeWidth: isBubble3d ? 1.2 : 1
             }
           ),
+          isSelectedChartPoint(selectedChartElement, chart.id, seriesIndex, point.index) || isSelectedChartSeries(selectedChartElement, chart.id, seriesIndex) && selectedChartElement?.kind !== "point" ? renderSelectionRectHandles(
+            `bubble-selection-${seriesIndex}-${point.index}`,
+            xScale(point.x) - radius,
+            yScale(point.y) - radius,
+            radius * 2,
+            radius * 2
+          ) : null,
           isBubble3d ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "ellipse",
             {
@@ -14822,7 +15315,7 @@ function renderBubbleChart(chart, palette, layout) {
     ] }, `bubble-series-${seriesIndex}`))
   ] });
 }
-function renderRadarChart(chart, palette, layout) {
+function renderRadarChart(chart, palette, layout, selectedChartElement) {
   if (chart.series.length === 0) {
     return null;
   }
@@ -14901,12 +15394,14 @@ function renderRadarChart(chart, palette, layout) {
         if (rawValue == null) {
           return {
             defined: false,
+            pointIndex: categoryIndex,
             ...radialPoint(categoryIndex, 0)
           };
         }
         const ratio = clamp2((rawValue - minValue) / (safeMax - minValue), 0, 1);
         return {
           defined: true,
+          pointIndex: categoryIndex,
           ...radialPoint(categoryIndex, ratio)
         };
       });
@@ -14925,6 +15420,7 @@ function renderRadarChart(chart, palette, layout) {
         definedPoints.length >= 2 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(seriesIndex),
             d: polygon,
             fill: filled && !hasGap && definedPoints.length >= 3 ? color : "none",
             fillOpacity: filled ? 0.26 : 0,
@@ -14932,13 +15428,14 @@ function renderRadarChart(chart, palette, layout) {
             strokeWidth: 1.8
           }
         ) : null,
-        showMarkers ? definedPoints.map((point, pointIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        showMarkers ? definedPoints.map((point) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "g",
           {
             transform: `translate(${point.x}, ${point.y})`,
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "path",
               {
+                ...chartElementDataProps(seriesIndex, point.pointIndex),
                 d: markerPath,
                 fill: series.markerColor ?? color,
                 stroke: series.markerLineColor ?? chart.chartAreaFillColor ?? palette.surface,
@@ -14946,13 +15443,17 @@ function renderRadarChart(chart, palette, layout) {
               }
             )
           },
-          `radar-point-${seriesIndex}-${pointIndex}`
-        )) : null
+          `radar-point-${seriesIndex}-${point.pointIndex}`
+        )) : null,
+        definedPoints.map((point) => isSelectedChartPoint(selectedChartElement, chart.id, seriesIndex, point.pointIndex) || isSelectedChartSeries(selectedChartElement, chart.id, seriesIndex) && selectedChartElement?.kind !== "point" ? renderSelectionPointHandles(
+          `radar-selection-${seriesIndex}-${point.pointIndex}`,
+          [{ x: point.x, y: point.y }]
+        ) : null)
       ] }, `radar-series-${seriesIndex}`);
     })
   ] });
 }
-function renderPieChart(chart, palette, layout, chartType) {
+function renderPieChart(chart, palette, layout, chartType, selectedChartElement) {
   const pieSeriesIndex = selectPrimaryPieSeriesIndex(chart);
   const pieSeries = chart.series[pieSeriesIndex];
   const pieData = buildPieEntries(chart, pieSeriesIndex);
@@ -15104,6 +15605,16 @@ function renderPieChart(chart, palette, layout, chartType) {
       const midAngle = (arc.startAngle + arc.endAngle) / 2;
       const explodeX = Math.sin(midAngle) * explosion;
       const explodeY = -Math.cos(midAngle) * explosion * (isPie3d ? tilt : 1);
+      const isSliceSelected = isSelectedChartPoint(selectedChartElement, chart.id, pieSeriesIndex, arc.data.index) || isSelectedChartSeries(selectedChartElement, chart.id, pieSeriesIndex) && selectedChartElement?.kind !== "point";
+      const sliceHandlePoints = isSliceSelected ? [
+        pieEllipsePoint(centerX, centerY, outerRadius, isPie3d ? tilt : 1, arc.startAngle),
+        pieEllipsePoint(centerX, centerY, outerRadius, isPie3d ? tilt : 1, midAngle),
+        pieEllipsePoint(centerX, centerY, outerRadius, isPie3d ? tilt : 1, arc.endAngle),
+        innerRadius > 0 ? pieEllipsePoint(centerX, centerY, innerRadius, isPie3d ? tilt : 1, midAngle) : { x: centerX, y: centerY }
+      ].map((point) => ({
+        x: point.x + explodeX,
+        y: point.y + explodeY
+      })) : [];
       const labelRadius = outerRadius + (chartType === "PieExploded" ? 8 : 12);
       const labelX = centerX + Math.sin(midAngle) * labelRadius + explodeX;
       const labelY = centerY - Math.cos(midAngle) * labelRadius * (isPie3d ? tilt : 1) + explodeY;
@@ -15137,14 +15648,16 @@ function renderPieChart(chart, palette, layout, chartType) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${explodeX}, ${explodeY})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(pieSeriesIndex, arc.data.index),
             d: arcPath(arc) ?? "",
             fill: arc.data.color,
-            stroke: sliceSeparatorColor,
-            strokeWidth: sliceSeparatorWidth,
-            transform: `translate(${centerX}, ${centerY})${isPie3d ? ` scale(1, ${tilt})` : ""}`,
-            filter: isPie3d ? `url(#${shadowId})` : void 0
+            filter: isPie3d ? `url(#${shadowId})` : void 0,
+            stroke: isSliceSelected ? "#64748b" : sliceSeparatorColor,
+            strokeWidth: isSliceSelected ? Math.max(2, sliceSeparatorWidth) : sliceSeparatorWidth,
+            transform: `translate(${centerX}, ${centerY})${isPie3d ? ` scale(1, ${tilt})` : ""}`
           }
         ) }),
+        isSliceSelected ? renderSelectionPointHandles(`pie-selection-${arc.data.index}`, sliceHandlePoints) : null,
         dataLabelsEnabled && truncatedLabelText.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "text",
           {
@@ -15172,7 +15685,7 @@ function renderPieChart(chart, palette, layout, chartType) {
     ) : null
   ] });
 }
-function renderBarOfPieChart(chart, palette, layout) {
+function renderBarOfPieChart(chart, palette, layout, selectedChartElement) {
   const pieSeriesIndex = selectPrimaryPieSeriesIndex(chart);
   const pieSeries = chart.series[pieSeriesIndex];
   const categories = getCategoryLabels(chart);
@@ -15189,10 +15702,11 @@ function renderBarOfPieChart(chart, palette, layout) {
   }
   const secondarySet = new Set(secondaryIndices);
   const secondaryTotal = secondaryIndices.reduce((sum, index) => sum + (values[index] ?? 0), 0);
-  const primaryData = values.flatMap((value, index) => secondarySet.has(index) ? [] : [{ color: chartPointColor(chart, index, pieSeriesIndex), label: categories[index], value }]);
+  const primaryData = values.flatMap((value, index) => secondarySet.has(index) ? [] : [{ color: chartPointColor(chart, index, pieSeriesIndex), index, label: categories[index], value }]);
   if (secondaryTotal > 0) {
     primaryData.push({
       color: chartPointColor(chart, secondaryIndices[0] ?? 0, pieSeriesIndex),
+      index: secondaryIndices[0] ?? 0,
       label: "Other",
       value: secondaryTotal
     });
@@ -15207,6 +15721,7 @@ function renderBarOfPieChart(chart, palette, layout) {
   const connectorTargetX = layout.plot.left + layout.plot.width * 0.69;
   const secondaryData = secondaryIndices.map((index) => ({
     color: chartPointColor(chart, index, pieSeriesIndex),
+    index,
     label: categories[index] ?? "",
     value: values[index] ?? 0
   }));
@@ -15222,17 +15737,25 @@ function renderBarOfPieChart(chart, palette, layout) {
   const secondaryTotalSafe = Math.max(1e-6, secondaryTotal);
   let stackCursor = stackedBarTop;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-    pieArcs.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
-      {
-        d: arc(entry) ?? "",
-        fill: entry.data.color,
-        stroke: chart.chartAreaFillColor ?? palette.surface,
-        strokeWidth: 1,
-        transform: `translate(${pieCenterX}, ${pieCenterY})`
-      },
-      `bar-of-pie-main-${index}`
-    )),
+    pieArcs.map((entry, index) => {
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, pieSeriesIndex, entry.data.index);
+      const midAngle = (entry.startAngle + entry.endAngle) / 2;
+      const dot = pieEllipsePoint(pieCenterX, pieCenterY, pieRadius * 0.62, 1, midAngle);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            ...chartElementDataProps(pieSeriesIndex, entry.data.index),
+            d: arc(entry) ?? "",
+            fill: entry.data.color,
+            stroke: selected ? "#64748b" : chart.chartAreaFillColor ?? palette.surface,
+            strokeWidth: selected ? 2 : 1,
+            transform: `translate(${pieCenterX}, ${pieCenterY})`
+          }
+        ),
+        selected ? renderSelectionPointHandles(`bar-of-pie-main-selection-${index}`, [dot]) : null
+      ] }, `bar-of-pie-main-${index}`);
+    }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "line",
       {
@@ -15255,33 +15778,50 @@ function renderBarOfPieChart(chart, palette, layout) {
         y2: layout.plot.top + layout.plot.height - 10
       }
     ),
-    ofPieType === "pie" ? secondaryPieArcs.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
-      {
-        d: secondaryArc(entry) ?? "",
-        fill: entry.data.color,
-        stroke: chart.chartAreaFillColor ?? palette.surface,
-        strokeWidth: 1,
-        transform: `translate(${secondaryCenterX}, ${secondaryCenterY})`
-      },
-      `bar-of-pie-secondary-pie-${index}`
-    )) : secondaryData.map((entry, index) => {
+    ofPieType === "pie" ? secondaryPieArcs.map((entry, index) => {
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, pieSeriesIndex, entry.data.index);
+      const midAngle = (entry.startAngle + entry.endAngle) / 2;
+      const dot = pieEllipsePoint(secondaryCenterX, secondaryCenterY, secondaryRadius * 0.62, 1, midAngle);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            ...chartElementDataProps(pieSeriesIndex, entry.data.index),
+            d: secondaryArc(entry) ?? "",
+            fill: entry.data.color,
+            stroke: selected ? "#64748b" : chart.chartAreaFillColor ?? palette.surface,
+            strokeWidth: selected ? 2 : 1,
+            transform: `translate(${secondaryCenterX}, ${secondaryCenterY})`
+          }
+        ),
+        selected ? renderSelectionPointHandles(`bar-of-pie-secondary-pie-selection-${index}`, [dot]) : null
+      ] }, `bar-of-pie-secondary-pie-${index}`);
+    }) : secondaryData.map((entry, index) => {
       const segmentHeight = index === secondaryData.length - 1 ? Math.max(1, stackedBarTop + stackedBarHeight - stackCursor) : Math.max(1, entry.value / secondaryTotalSafe * stackedBarHeight);
       const y = stackCursor;
       stackCursor += segmentHeight;
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, pieSeriesIndex, entry.index);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "rect",
           {
+            ...chartElementDataProps(pieSeriesIndex, entry.index),
             fill: entry.color,
             height: segmentHeight,
-            stroke: chart.chartAreaFillColor ?? palette.surface,
-            strokeWidth: 1,
+            stroke: selected ? "#64748b" : chart.chartAreaFillColor ?? palette.surface,
+            strokeWidth: selected ? 2 : 1,
             width: stackedBarWidth,
             x: stackedBarLeft,
             y
           }
         ),
+        selected ? renderSelectionRectHandles(
+          `bar-of-pie-secondary-bar-selection-${index}`,
+          stackedBarLeft,
+          y,
+          stackedBarWidth,
+          segmentHeight
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "text",
           {
@@ -15297,7 +15837,7 @@ function renderBarOfPieChart(chart, palette, layout) {
     })
   ] });
 }
-function renderSurfaceChart(chart, palette, layout) {
+function renderSurfaceChart(chart, palette, layout, selectedChartElement) {
   const plot = resolveSurfacePlotRect(chart, layout);
   const categories = getCategoryLabels(chart);
   const rows = chart.series.length;
@@ -15822,11 +16362,51 @@ function renderSurfaceChart(chart, palette, layout) {
     ) : null
   ] });
 }
+function renderSurfaceHitOverlay(chart, layout, selectedChartElement) {
+  const plot = resolveSurfacePlotRect(chart, layout);
+  const categories = getCategoryLabels(chart);
+  const rows = chart.series.length;
+  const cols = Math.max(
+    categories.length,
+    chart.series.reduce((max, series) => Math.max(max, series.values.length), 0)
+  );
+  if (rows === 0 || cols === 0) {
+    return null;
+  }
+  const cellWidth = plot.width / cols;
+  const cellHeight = plot.height / rows;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: chart.series.flatMap((_, seriesIndex) => Array.from({ length: cols }, (_2, pointIndex) => {
+    const left = plot.left + pointIndex * cellWidth;
+    const top = plot.top + seriesIndex * cellHeight;
+    const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, seriesIndex, pointIndex);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "rect",
+        {
+          ...chartElementDataProps(seriesIndex, pointIndex),
+          fill: "transparent",
+          height: cellHeight,
+          stroke: "none",
+          width: cellWidth,
+          x: left,
+          y: top
+        }
+      ),
+      selected ? renderSelectionRectHandles(
+        `surface-selection-${seriesIndex}-${pointIndex}`,
+        left,
+        top,
+        cellWidth,
+        cellHeight
+      ) : null
+    ] }, `surface-hit-${seriesIndex}-${pointIndex}`);
+  })) });
+}
 function indexByName(series, matcher) {
   const index = series.findIndex((entry) => matcher.test((entry.name ?? "").toLowerCase()));
   return index >= 0 ? index : null;
 }
-function renderStockChart(chart, palette, layout) {
+function renderStockChart(chart, palette, layout, selectedChartElement) {
   const categories = getCategoryLabels(chart);
   if (categories.length === 0 || chart.series.length < 2) {
     return null;
@@ -15929,7 +16509,13 @@ function renderStockChart(chart, palette, layout) {
       const closeY = yScale(entry.close);
       const highY = yScale(entry.high);
       const lowY = yScale(entry.low);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, closeIndex, index);
+      return /* @__PURE__ */ (0, import_react.createElement)(
+        "g",
+        {
+          ...chartElementDataProps(closeIndex, index),
+          key: `stock-point-${index}`
+        },
         hasVolume && entry.volume != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "rect",
           {
@@ -15955,12 +16541,13 @@ function renderStockChart(chart, palette, layout) {
             y: Math.min(openY, closeY)
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { stroke, strokeWidth: 1.6, x1: bodyLeft, x2: bodyLeft + candleWidth, y1: closeY, y2: closeY }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { stroke: closeTickColor, strokeWidth: 1.8, x1: x, x2: x + 7, y1: closeY, y2: closeY }),
-        entry.open != null && openY != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { stroke: openTickColor, strokeWidth: 1.8, x1: x - 7, x2: x, y1: openY, y2: openY }) : null
-      ] }, `stock-point-${index}`);
+        entry.open != null && openY != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { stroke: openTickColor, strokeWidth: 1.8, x1: x - 7, x2: x, y1: openY, y2: openY }) : null,
+        selected ? renderSelectionPointHandles(`stock-selection-${index}`, [{ x, y: closeY }]) : null
+      );
     })
   ] });
 }
-function renderWaterfallChart(chart, palette, layout) {
+function renderWaterfallChart(chart, palette, layout, selectedChartElement) {
   const stages = buildChartStages(chart);
   if (stages.length === 0) {
     return null;
@@ -16015,6 +16602,7 @@ function renderWaterfallChart(chart, palette, layout) {
       const fill = bar.isSubtotal ? darkenColor2(bar.color, 0.18) : bar.value >= 0 ? bar.color : lightenColor2(bar.color, 0.22);
       const connectorStart = index > 0 ? bars[index - 1] : null;
       const connectorY = connectorStart ? yScale(connectorStart.end) : 0;
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, 0, index);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
         connectorStart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "line",
@@ -16031,17 +16619,19 @@ function renderWaterfallChart(chart, palette, layout) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "rect",
           {
+            ...chartElementDataProps(0, index),
             fill,
             rx: 2,
             ry: 2,
-            stroke: darkenColor2(fill, 0.22),
-            strokeWidth: 1,
+            stroke: selected ? "#64748b" : darkenColor2(fill, 0.22),
+            strokeWidth: selected ? 2 : 1,
             x: bandLeft,
             y: top,
             width: bandWidth,
             height
           }
         ),
+        selected ? renderSelectionRectHandles(`waterfall-selection-${index}`, bandLeft, top, bandWidth, height) : null,
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "text",
           {
@@ -16068,7 +16658,7 @@ function renderWaterfallChart(chart, palette, layout) {
     })
   ] });
 }
-function renderFunnelChart(chart, palette, layout) {
+function renderFunnelChart(chart, palette, layout, selectedChartElement) {
   const stages = buildChartStages(chart).map((stage) => ({ ...stage, value: Math.max(0, stage.value) })).filter((stage) => stage.value > 0);
   if (stages.length === 0) {
     return null;
@@ -16085,21 +16675,24 @@ function renderFunnelChart(chart, palette, layout) {
     const left = centerX - stageWidth * 0.5;
     const fill = stage.isSubtotal ? darkenColor2(stage.color, 0.14) : stage.color;
     const labelFitsInside = stageWidth > 90;
+    const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, 0, index);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "rect",
         {
+          ...chartElementDataProps(0, index),
           fill,
           height: stageHeight,
           rx: 0,
           ry: 0,
-          stroke: darkenColor2(fill, 0.2),
-          strokeWidth: 1,
+          stroke: selected ? "#64748b" : darkenColor2(fill, 0.2),
+          strokeWidth: selected ? 2 : 1,
           width: stageWidth,
           x: left,
           y: topY
         }
       ),
+      selected ? renderSelectionRectHandles(`funnel-selection-${index}`, left, topY, stageWidth, stageHeight) : null,
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "text",
         {
@@ -16114,7 +16707,7 @@ function renderFunnelChart(chart, palette, layout) {
     ] }, `funnel-stage-${index}`);
   }) });
 }
-function renderSunburstChart(chart, palette, layout) {
+function renderSunburstChart(chart, palette, layout, selectedChartElement) {
   const hierarchyData = buildHierarchyData(chart);
   if (!hierarchyData) {
     return null;
@@ -16141,16 +16734,19 @@ function renderSunburstChart(chart, palette, layout) {
       const arcSpan = node.x1 - node.x0;
       const canShowLabel = arcSpan * labelRadius > 26;
       const fill = resolveHierarchyNodeColor(chart, node);
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, 0, index);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
+            ...chartElementDataProps(0, index),
             d: path,
             fill,
-            stroke: palette.surface,
-            strokeWidth: 1
+            stroke: selected ? "#64748b" : palette.surface,
+            strokeWidth: selected ? 2 : 1
           }
         ),
+        selected ? renderSelectionPointHandles(`sunburst-selection-${index}`, [{ x: labelX, y: labelY }]) : null,
         canShowLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "text",
           {
@@ -16166,7 +16762,7 @@ function renderSunburstChart(chart, palette, layout) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { fill: chart.chartAreaFillColor ?? palette.surface, r: holeRadius - 2 })
   ] });
 }
-function renderTreemapChart(chart, palette, layout) {
+function renderTreemapChart(chart, palette, layout, selectedChartElement) {
   const hierarchyData = buildHierarchyData(chart);
   if (!hierarchyData) {
     return null;
@@ -16178,21 +16774,24 @@ function renderTreemapChart(chart, palette, layout) {
     const width = Math.max(0, leaf.x1 - leaf.x0);
     const height = Math.max(0, leaf.y1 - leaf.y0);
     const canShowLabel = width > 48 && height > 22;
+    const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, 0, index);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "rect",
         {
+          ...chartElementDataProps(0, index),
           fill,
           rx: 3,
           ry: 3,
-          stroke: palette.surface,
-          strokeWidth: 1,
+          stroke: selected ? "#64748b" : palette.surface,
+          strokeWidth: selected ? 2 : 1,
           x: leaf.x0,
           y: leaf.y0,
           width,
           height
         }
       ),
+      selected ? renderSelectionRectHandles(`treemap-selection-${index}`, leaf.x0, leaf.y0, width, height) : null,
       canShowLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "text",
@@ -16219,7 +16818,7 @@ function renderTreemapChart(chart, palette, layout) {
     ] }, `treemap-leaf-${index}`);
   }) });
 }
-function renderBoxWhiskerChart(chart, palette, layout) {
+function renderBoxWhiskerChart(chart, palette, layout, selectedChartElement) {
   const visibleSeries = chart.series.filter((series) => series.hidden !== true);
   if (visibleSeries.length === 0) {
     return null;
@@ -16325,146 +16924,145 @@ function renderBoxWhiskerChart(chart, palette, layout) {
       const meanY = yScale(entry.stats.mean);
       const visiblePoints = entry.visibility.nonoutliers ? entry.stats.visiblePoints : [];
       const outliers = entry.visibility.outliers ? entry.stats.outliers : [];
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "line",
-          {
-            stroke: entry.lineColor,
-            strokeWidth: 1.5,
-            x1: x,
-            x2: x,
-            y1: upperWhiskerY,
-            y2: boxTop
-          }
-        ),
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, index, index);
+      return /* @__PURE__ */ (0, import_react.createElement)("g", { ...chartElementDataProps(index), key: `box-whisker-series-${index}` }, /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          stroke: entry.lineColor,
+          strokeWidth: 1.5,
+          x1: x,
+          x2: x,
+          y1: upperWhiskerY,
+          y2: boxTop
+        }
+      ), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          stroke: entry.lineColor,
+          strokeWidth: 1.5,
+          x1: x,
+          x2: x,
+          y1: boxBottom,
+          y2: lowerWhiskerY
+        }
+      ), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          stroke: entry.lineColor,
+          strokeWidth: 1.5,
+          x1: x - capWidth * 0.5,
+          x2: x + capWidth * 0.5,
+          y1: upperWhiskerY,
+          y2: upperWhiskerY
+        }
+      ), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          stroke: entry.lineColor,
+          strokeWidth: 1.5,
+          x1: x - capWidth * 0.5,
+          x2: x + capWidth * 0.5,
+          y1: lowerWhiskerY,
+          y2: lowerWhiskerY
+        }
+      ), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "rect",
+        {
+          ...chartElementDataProps(index, index),
+          fill: lightenColor2(entry.color, 0.35),
+          fillOpacity: 0.72,
+          height: Math.max(1, boxBottom - boxTop),
+          stroke: selected ? "#64748b" : entry.lineColor,
+          strokeWidth: selected ? 2 : 1.5,
+          width: boxWidth,
+          x: x - boxWidth * 0.5,
+          y: boxTop
+        }
+      ), selected ? renderSelectionRectHandles(
+        `box-whisker-selection-${index}`,
+        x - boxWidth * 0.5,
+        boxTop,
+        boxWidth,
+        Math.max(1, boxBottom - boxTop)
+      ) : null, /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          stroke: darkenColor2(entry.lineColor, 0.15),
+          strokeWidth: 2,
+          x1: x - boxWidth * 0.5,
+          x2: x + boxWidth * 0.5,
+          y1: medianY,
+          y2: medianY
+        }
+      ), entry.visibility.meanMarker ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "line",
           {
-            stroke: entry.lineColor,
-            strokeWidth: 1.5,
-            x1: x,
-            x2: x,
-            y1: boxBottom,
-            y2: lowerWhiskerY
+            stroke: darkenColor2(entry.lineColor, 0.18),
+            strokeWidth: 1.2,
+            x1: x - 4,
+            x2: x + 4,
+            y1: meanY - 4,
+            y2: meanY + 4
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "line",
           {
-            stroke: entry.lineColor,
-            strokeWidth: 1.5,
-            x1: x - capWidth * 0.5,
-            x2: x + capWidth * 0.5,
-            y1: upperWhiskerY,
-            y2: upperWhiskerY
+            stroke: darkenColor2(entry.lineColor, 0.18),
+            strokeWidth: 1.2,
+            x1: x - 4,
+            x2: x + 4,
+            y1: meanY + 4,
+            y2: meanY - 4
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "line",
+        )
+      ] }) : null, visiblePoints.map((value, pointIndex) => {
+        const y = yScale(value);
+        const jitter = (pointIndex % 7 - 3) * (boxWidth / 16);
+        return /* @__PURE__ */ (0, import_react.createElement)(
+          "circle",
           {
-            stroke: entry.lineColor,
-            strokeWidth: 1.5,
-            x1: x - capWidth * 0.5,
-            x2: x + capWidth * 0.5,
-            y1: lowerWhiskerY,
-            y2: lowerWhiskerY
+            ...chartElementDataProps(index, pointIndex),
+            key: `box-whisker-visible-${index}-${pointIndex}`,
+            cx: x + jitter,
+            cy: y,
+            fill: entry.color,
+            fillOpacity: 0.45,
+            r: 2,
+            stroke: "none"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "rect",
+        );
+      }), outliers.map((value, pointIndex) => {
+        const y = yScale(value);
+        return /* @__PURE__ */ (0, import_react.createElement)(
+          "circle",
           {
-            fill: lightenColor2(entry.color, 0.35),
-            fillOpacity: 0.72,
-            height: Math.max(1, boxBottom - boxTop),
+            ...chartElementDataProps(index, pointIndex),
+            key: `box-whisker-outlier-${index}-${pointIndex}`,
+            cx: x,
+            cy: y,
+            fill: "#ffffff",
+            r: 3,
             stroke: entry.lineColor,
-            strokeWidth: 1.5,
-            width: boxWidth,
-            x: x - boxWidth * 0.5,
-            y: boxTop
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "line",
-          {
-            stroke: darkenColor2(entry.lineColor, 0.15),
-            strokeWidth: 2,
-            x1: x - boxWidth * 0.5,
-            x2: x + boxWidth * 0.5,
-            y1: medianY,
-            y2: medianY
+            strokeWidth: 1.2
           }
-        ),
-        entry.visibility.meanMarker ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "line",
-            {
-              stroke: darkenColor2(entry.lineColor, 0.18),
-              strokeWidth: 1.2,
-              x1: x - 4,
-              x2: x + 4,
-              y1: meanY - 4,
-              y2: meanY + 4
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "line",
-            {
-              stroke: darkenColor2(entry.lineColor, 0.18),
-              strokeWidth: 1.2,
-              x1: x - 4,
-              x2: x + 4,
-              y1: meanY + 4,
-              y2: meanY - 4
-            }
-          )
-        ] }) : null,
-        visiblePoints.map((value, pointIndex) => {
-          const y = yScale(value);
-          const jitter = (pointIndex % 7 - 3) * (boxWidth / 16);
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "circle",
-            {
-              cx: x + jitter,
-              cy: y,
-              fill: entry.color,
-              fillOpacity: 0.45,
-              r: 2,
-              stroke: "none"
-            },
-            `box-whisker-visible-${index}-${pointIndex}`
-          );
-        }),
-        outliers.map((value, pointIndex) => {
-          const y = yScale(value);
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "circle",
-            {
-              cx: x,
-              cy: y,
-              fill: "#ffffff",
-              r: 3,
-              stroke: entry.lineColor,
-              strokeWidth: 1.2
-            },
-            `box-whisker-outlier-${index}-${pointIndex}`
-          );
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "text",
-          {
-            fill: labelColor,
-            fontSize: 10,
-            textAnchor: "middle",
-            x,
-            y: layout.plot.top + layout.plot.height + 14,
-            children: entry.label
-          }
-        )
-      ] }, `box-whisker-series-${index}`);
+        );
+      }), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "text",
+        {
+          fill: labelColor,
+          fontSize: 10,
+          textAnchor: "middle",
+          x,
+          y: layout.plot.top + layout.plot.height + 14,
+          children: entry.label
+        }
+      ));
     })
   ] });
 }
-function renderRegionMapChart(chart, palette, layout) {
+function renderRegionMapChart(chart, palette, layout, selectedChartElement) {
   const primarySeriesIndex = Math.max(0, chart.series.findIndex((series) => series.hidden !== true));
   const primarySeries = chart.series[primarySeriesIndex] ?? null;
   if (!primarySeries) {
@@ -16544,17 +17142,23 @@ function renderRegionMapChart(chart, palette, layout) {
         const ratio = maxValue <= minValue ? 1 : (entry.value - minValue) / Math.max(1e-6, maxValue - minValue);
         return resolveRegionMapValueColor(chart, primarySeriesIndex, ratio);
       })() : categoricalColorByLabel?.get(entry.colorLabel ?? "") ?? resolveRegionMapDataColor(chart, primarySeriesIndex);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "path",
-        {
-          d,
-          fill,
-          stroke: darkenColor2(fill, 0.18),
-          strokeLinejoin: "round",
-          strokeWidth: 0.85
-        },
-        `region-map-value-${entry.key || index}`
-      );
+      const selected = isSelectedChartPointOrSeries(selectedChartElement, chart.id, primarySeriesIndex, index);
+      const centroid = path.centroid(entry.feature);
+      const canShowSelectionDot = Number.isFinite(centroid[0]) && Number.isFinite(centroid[1]);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            ...chartElementDataProps(primarySeriesIndex, index),
+            d,
+            fill,
+            stroke: selected ? "#64748b" : darkenColor2(fill, 0.18),
+            strokeLinejoin: "round",
+            strokeWidth: selected ? 1.8 : 0.85
+          }
+        ),
+        selected && canShowSelectionDot ? renderSelectionPointHandles(`region-map-selection-${index}`, [{ x: centroid[0], y: centroid[1] }]) : null
+      ] }, `region-map-value-${entry.key || index}`);
     }),
     showRegionLabels ? entries.map((entry, index) => {
       const bounds = path.bounds(entry.feature);
@@ -16611,64 +17215,71 @@ function renderUnsupported(chart, palette, layout, chartType) {
     )
   ] });
 }
-function renderChartPlot(chart, palette, layout, chartType) {
+function renderChartPlot(chart, palette, layout, chartType, selectedChartElement) {
   if (isComboChart(chart)) {
-    return renderComboChart(chart, palette, layout) ?? renderUnsupported(chart, palette, layout, "Combo");
+    return renderComboChart(chart, palette, layout, selectedChartElement) ?? renderUnsupported(chart, palette, layout, "Combo");
   }
   if (chartType === "ColumnClustered" || chartType === "ColumnStacked" || chartType === "ColumnPercentStacked" || chartType === "BarClustered" || chartType === "BarStacked" || chartType === "BarPercentStacked") {
-    return renderBarChart(chart, palette, layout, chartType);
+    return renderBarChart(chart, palette, layout, chartType, selectedChartElement);
   }
   if (chartType === "Line" || chartType === "LineStacked" || chartType === "LinePercentStacked" || chartType === "Area" || chartType === "AreaStacked" || chartType === "AreaPercentStacked") {
-    return renderLineOrAreaChart(chart, palette, layout, chartType);
+    return renderLineOrAreaChart(chart, palette, layout, chartType, selectedChartElement);
   }
   if (chartType === "Scatter") {
-    return renderScatterChart(chart, palette, layout, false);
+    return renderScatterChart(chart, palette, layout, false, selectedChartElement);
   }
   if (chartType === "ScatterLines") {
-    return renderScatterChart(chart, palette, layout, false);
+    return renderScatterChart(chart, palette, layout, false, selectedChartElement);
   }
   if (chartType === "ScatterSmooth") {
-    return renderScatterChart(chart, palette, layout, true);
+    return renderScatterChart(chart, palette, layout, true, selectedChartElement);
   }
   if (chartType === "Bubble") {
-    return renderBubbleChart(chart, palette, layout);
+    return renderBubbleChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Radar") {
-    return renderRadarChart(chart, palette, layout);
+    return renderRadarChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Pie" || chartType === "Pie3D" || chartType === "PieExploded" || chartType === "Doughnut") {
-    return renderPieChart(chart, palette, layout, chartType);
+    return renderPieChart(chart, palette, layout, chartType, selectedChartElement);
   }
   if (chartType === "BarOfPie") {
-    return renderBarOfPieChart(chart, palette, layout);
+    return renderBarOfPieChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Surface") {
-    return renderSurfaceChart(chart, palette, layout);
+    return renderSurfaceChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Stock") {
-    return renderStockChart(chart, palette, layout);
+    return renderStockChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Waterfall") {
-    return renderWaterfallChart(chart, palette, layout);
+    return renderWaterfallChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Funnel") {
-    return renderFunnelChart(chart, palette, layout);
+    return renderFunnelChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "BoxWhisker") {
-    return renderBoxWhiskerChart(chart, palette, layout);
+    return renderBoxWhiskerChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Sunburst") {
-    return renderSunburstChart(chart, palette, layout);
+    return renderSunburstChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "Treemap") {
-    return renderTreemapChart(chart, palette, layout);
+    return renderTreemapChart(chart, palette, layout, selectedChartElement);
   }
   if (chartType === "RegionMap") {
-    return renderRegionMapChart(chart, palette, layout);
+    return renderRegionMapChart(chart, palette, layout, selectedChartElement);
   }
   return renderUnsupported(chart, palette, layout, chartType);
 }
-var MemoChartSvg = React3.memo(function MemoChartSvg2({ chart, palette, rect }) {
+var MemoChartSvg = React3.memo(function MemoChartSvg2({
+  chart,
+  onChartElementDoubleClick,
+  onChartElementPointerDown,
+  palette,
+  rect,
+  selectedChartElement
+}) {
   const renderChartType = normalizeRenderableChartType(chart);
   const legendItems = getLegendItems(chart, renderChartType, palette);
   const layout = buildLayout(chart, rect, legendItems);
@@ -16680,6 +17291,26 @@ var MemoChartSvg = React3.memo(function MemoChartSvg2({ chart, palette, rect })
   const normalizedBorderColor = borderColor.trim().toLowerCase();
   const hideBackgroundRect = normalizedBackground === "transparent" && normalizedBorderColor === "transparent";
   const fontFamily = buildChartFontFamily(chart.fontFamily);
+  const handlePointerDown = React3.useCallback((event) => {
+    const selection = resolveChartSelectionFromTarget(chart, event.target, selectedChartElement);
+    if (!selection) {
+      return;
+    }
+    if (resolveChartElementTarget(event.target)) {
+      event.stopPropagation();
+    }
+    onChartElementPointerDown?.(selection, event);
+  }, [chart, onChartElementPointerDown, selectedChartElement]);
+  const handleDoubleClick = React3.useCallback((event) => {
+    const selection = resolveChartSelectionFromTarget(chart, event.target, selectedChartElement);
+    if (!selection) {
+      return;
+    }
+    if (resolveChartElementTarget(event.target)) {
+      event.stopPropagation();
+    }
+    onChartElementDoubleClick?.(selection, event);
+  }, [chart, onChartElementDoubleClick, selectedChartElement]);
   if (renderChartType === "Surface") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       MemoSurfaceChartComposite,
@@ -16687,10 +17318,13 @@ var MemoChartSvg = React3.memo(function MemoChartSvg2({ chart, palette, rect })
         background,
         borderColor,
         chart,
-        fallback: renderSurfaceChart(chart, palette, layout),
+        fallback: renderSurfaceChart(chart, palette, layout, selectedChartElement),
         fontFamily,
         layout,
+        onDoubleClick: handleDoubleClick,
+        onPointerDown: handlePointerDown,
         overlay: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          renderSurfaceHitOverlay(chart, layout, selectedChartElement),
           renderSurfaceAxes(chart, layout),
           renderTitle(chart, layout, palette),
           renderLegend(chart, layout, palette)
@@ -16703,18 +17337,20 @@ var MemoChartSvg = React3.memo(function MemoChartSvg2({ chart, palette, rect })
     "svg",
     {
       "aria-label": chart.title ?? chart.name ?? "Chart",
+      onDoubleClick: handleDoubleClick,
+      onPointerDown: handlePointerDown,
       role: "img",
-      style: { display: "block", fontFamily, height: "100%", pointerEvents: "none", width: "100%" },
+      style: { display: "block", fontFamily, height: "100%", pointerEvents: "auto", width: "100%" },
       viewBox: `0 0 ${layout.width} ${layout.height}`,
       children: [
         hideBackgroundRect ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: background, height: layout.height, stroke: borderColor, strokeWidth: 1, width: layout.width, x: 0, y: 0 }),
         renderTitle(chart, layout, palette),
         renderLegend(chart, layout, palette),
-        renderChartPlot(chart, palette, layout, renderChartType)
+        renderChartPlot(chart, palette, layout, renderChartType, selectedChartElement)
       ]
     }
   );
-}, (prev, next) => prev.chart === next.chart && prev.palette === next.palette && prev.rect.height === next.rect.height && prev.rect.width === next.rect.width && prev.rect.left === next.rect.left && prev.rect.top === next.rect.top);
+}, (prev, next) => prev.chart === next.chart && prev.onChartElementDoubleClick === next.onChartElementDoubleClick && prev.onChartElementPointerDown === next.onChartElementPointerDown && prev.palette === next.palette && prev.rect.height === next.rect.height && prev.rect.width === next.rect.width && prev.rect.left === next.rect.left && prev.rect.top === next.rect.top && prev.selectedChartElement === next.selectedChartElement);
 
 // src/XlsxViewer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -16757,6 +17393,13 @@ var LIVE_ZOOM_COMMIT_IDLE_MS = 48;
 var WHEEL_ZOOM_SENSITIVITY = 25e-5;
 var WHEEL_LINE_DELTA_PX = 16;
 var CHART_SOURCE_HIGHLIGHT_COLORS = ["#2563eb", "#dc2626", "#7c3aed", "#059669", "#ea580c", "#db2777"];
+var CHART_SOURCE_HIGHLIGHT_COLOR_BY_ROLE = {
+  bubble: CHART_SOURCE_HIGHLIGHT_COLORS[3] ?? "#059669",
+  category: CHART_SOURCE_HIGHLIGHT_COLORS[2] ?? "#7c3aed",
+  name: CHART_SOURCE_HIGHLIGHT_COLORS[0] ?? "#2563eb",
+  point: CHART_SOURCE_HIGHLIGHT_COLORS[5] ?? "#db2777",
+  value: CHART_SOURCE_HIGHLIGHT_COLORS[4] ?? "#ea580c"
+};
 var SHEET_SURFACE = "#ffffff";
 var DRAWING_SELECTION_STROKE = "#64748b";
 var DRAWING_SELECTION_HANDLE_FILL = "#ffffff";
@@ -19691,23 +20334,57 @@ function resolveChartFormulaRange(formula, fallbackSheetIndex, sheets, workbook)
     workbookSheetIndex
   };
 }
-function collectChartRangeHighlights(chart, sheets, workbook, isDark) {
+function resolveRangePointCell(range, pointIndex) {
+  const normalized = normalizeRange2(range);
+  const rowCount = normalized.end.row - normalized.start.row + 1;
+  const colCount = normalized.end.col - normalized.start.col + 1;
+  const cellCount = rowCount * colCount;
+  if (pointIndex < 0 || pointIndex >= cellCount) {
+    return null;
+  }
+  const rowOffset = Math.floor(pointIndex / colCount);
+  const colOffset = pointIndex % colCount;
+  const cell = {
+    col: normalized.start.col + colOffset,
+    row: normalized.start.row + rowOffset
+  };
+  return { start: cell, end: cell };
+}
+function collectChartRangeHighlights(chart, selectedElement, sheets, workbook, isDark) {
   if (!chart) {
     return [];
   }
   const highlights = [];
   const seenRanges = /* @__PURE__ */ new Set();
-  const references = chart.series.flatMap((series) => [
-    series.categoriesRef?.formula,
-    typeof series.raw?.name === "string" ? series.raw.name : void 0,
-    series.valuesRef?.formula,
-    series.bubbleSizeRef?.formula
+  const selectedSeriesIndex = selectedElement?.chartId === chart.id && selectedElement.kind !== "chart" ? selectedElement.seriesIndex : null;
+  const seriesEntries = chart.series.map((series, seriesIndex) => ({ series, seriesIndex })).filter(({ series, seriesIndex }) => series.hidden !== true && (selectedSeriesIndex == null || seriesIndex === selectedSeriesIndex));
+  const references = seriesEntries.flatMap(({ series, seriesIndex }) => [
+    {
+      formula: typeof series.raw?.name === "string" ? series.raw.name : void 0,
+      role: "name",
+      seriesIndex
+    },
+    {
+      formula: series.categoriesRef?.formula,
+      role: "category",
+      seriesIndex
+    },
+    {
+      formula: series.valuesRef?.formula,
+      role: "value",
+      seriesIndex
+    },
+    {
+      formula: series.bubbleSizeRef?.formula,
+      role: "bubble",
+      seriesIndex
+    }
   ]);
-  references.forEach((formula) => {
-    if (!formula) {
+  references.forEach((reference) => {
+    if (!reference.formula) {
       return;
     }
-    const resolved = resolveChartFormulaRange(formula, chart.workbookSheetIndex, sheets, workbook);
+    const resolved = resolveChartFormulaRange(reference.formula, chart.workbookSheetIndex, sheets, workbook);
     if (!resolved) {
       return;
     }
@@ -19722,7 +20399,7 @@ function collectChartRangeHighlights(chart, sheets, workbook, isDark) {
       return;
     }
     seenRanges.add(key);
-    const strokeColor = CHART_SOURCE_HIGHLIGHT_COLORS[highlights.length % CHART_SOURCE_HIGHLIGHT_COLORS.length] ?? "#2563eb";
+    const strokeColor = CHART_SOURCE_HIGHLIGHT_COLOR_BY_ROLE[reference.role];
     highlights.push({
       fillColor: applyAlphaToColor(strokeColor, isDark ? 0.24 : 0.14),
       range: resolved.range,
@@ -19730,6 +20407,28 @@ function collectChartRangeHighlights(chart, sheets, workbook, isDark) {
       workbookSheetIndex: resolved.workbookSheetIndex
     });
   });
+  if (selectedElement?.chartId === chart.id && selectedElement.kind === "point") {
+    references.forEach((reference) => {
+      if (!reference.formula || reference.role === "name") {
+        return;
+      }
+      const resolved = resolveChartFormulaRange(reference.formula, chart.workbookSheetIndex, sheets, workbook);
+      if (!resolved) {
+        return;
+      }
+      const range = resolveRangePointCell(resolved.range, selectedElement.pointIndex);
+      if (!range) {
+        return;
+      }
+      const strokeColor = CHART_SOURCE_HIGHLIGHT_COLOR_BY_ROLE.point;
+      highlights.push({
+        fillColor: applyAlphaToColor(strokeColor, isDark ? 0.34 : 0.22),
+        range,
+        strokeColor,
+        workbookSheetIndex: resolved.workbookSheetIndex
+      });
+    });
+  }
   return highlights;
 }
 function clampSparklineValue(value, min, max) {
@@ -21787,11 +22486,13 @@ function XlsxGrid({
     redo,
     revision,
     selectedChart,
+    selectedChartElement,
     selectedChartId,
     selectedImage,
     selectedImageId,
     selectCell,
     selectChart,
+    selectChartElement,
     selectImage,
     selectRange,
     selection,
@@ -23700,8 +24401,8 @@ function XlsxGrid({
     return map;
   }, [activeSheet?.sparklines]);
   const chartRangeHighlights = React4.useMemo(
-    () => collectChartRangeHighlights(selectedChart, sheets, workbook, paletteIsDark(palette)),
-    [palette, selectedChart, sheets, workbook]
+    () => collectChartRangeHighlights(selectedChart, selectedChartElement, sheets, workbook, paletteIsDark(palette)),
+    [palette, selectedChart, selectedChartElement, sheets, workbook]
   );
   const activeSheetChartHighlights = React4.useMemo(
     () => activeSheet ? chartRangeHighlights.filter((highlight) => highlight.workbookSheetIndex === activeSheet.workbookSheetIndex) : [],
@@ -23716,6 +24417,7 @@ function XlsxGrid({
       getCellStyle,
       palette,
       revision,
+      selectedChartElement,
       selectedChartId,
       viewportRowBatch,
       worksheet,
@@ -23729,6 +24431,7 @@ function XlsxGrid({
       getCellStyle,
       palette,
       revision,
+      selectedChartElement,
       selectedChartId,
       viewportRowBatch,
       worksheet,
@@ -26924,6 +27627,13 @@ function XlsxGrid({
     }
     selectChart(chart.id);
   }, [selectChart]);
+  const handleChartElementPointerDown = React4.useCallback((selection2) => {
+    skipNextChartClickRef.current = selection2.chartId;
+    selectChartElement(selection2);
+  }, [selectChartElement]);
+  const handleChartElementDoubleClick = React4.useCallback((selection2) => {
+    selectChartElement(selection2);
+  }, [selectChartElement]);
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderLoading(loadingComponent, loadingState, palette) });
   }
@@ -26973,7 +27683,17 @@ function XlsxGrid({
             },
             children: charts.length > 0 ? charts.map((chart) => {
               const chartsheetRect = { height: 320, left: 0, top: 0, width: 640 };
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { minHeight: 320, position: "relative" }, children: isChartsLoading ? renderChartLoadingNode(renderChartLoading, chart, chartsheetRect) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoChartSvg, { chart, palette, rect: chartsheetRect }) }, chart.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { minHeight: 320, position: "relative" }, children: isChartsLoading ? renderChartLoadingNode(renderChartLoading, chart, chartsheetRect) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                MemoChartSvg,
+                {
+                  chart,
+                  onChartElementDoubleClick: handleChartElementDoubleClick,
+                  onChartElementPointerDown: handleChartElementPointerDown,
+                  palette,
+                  rect: chartsheetRect,
+                  selectedChartElement
+                }
+              ) }, chart.id);
             }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
@@ -27647,7 +28367,6 @@ function XlsxGrid({
       }
     ) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style, children: isChartsLoading ? renderChartLoadingNode(renderChartLoading, chart, rect) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoChartSvg, { chart, palette, rect }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
@@ -27655,11 +28374,20 @@ function XlsxGrid({
           onPointerDown: (event) => startChartMove(event, chart, rect),
           style: {
             ...style,
-            background: "transparent",
             cursor: canEditChart && selectedChartId === chart.id ? "move" : "cell",
-            pointerEvents: "auto",
-            zIndex: isFrozenDrawing ? chart.zIndex + 21 : chart.zIndex + 1
-          }
+            pointerEvents: "auto"
+          },
+          children: isChartsLoading ? renderChartLoadingNode(renderChartLoading, chart, rect) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            MemoChartSvg,
+            {
+              chart,
+              onChartElementDoubleClick: handleChartElementDoubleClick,
+              onChartElementPointerDown: handleChartElementPointerDown,
+              palette,
+              rect,
+              selectedChartElement
+            }
+          )
         }
       ),
       selectionNode
@@ -27742,7 +28470,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.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
+  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 paneDrawingNodes = canReusePaneDrawingNodes ? previousPaneDrawingNodes.value : !showImages ? {
     corner: null,
     left: null,
@@ -27786,6 +28514,7 @@ function XlsxGrid({
       renderChartLoading,
       renderImage,
       renderImageSelection,
+      selectedChartElement,
       selectedChartId,
       selectedImageId,
       selectionStroke,
@@ -29202,12 +29931,16 @@ function useXlsxViewerEditing() {
     removeActiveSheet,
     readOnly,
     redo,
+    selectedCellFormula,
+    selectedChartFormula,
     selectedFormula,
+    selectedFormulaTarget,
     selectedValue,
     setCellFormula,
     setCellStyle,
     setCellValue,
     setRangeStyle,
+    setSelectedFormula,
     setSelectedCellFormula,
     setSelectedCellStyle,
     setSelectedCellValue,
@@ -29233,12 +29966,16 @@ function useXlsxViewerEditing() {
       removeActiveSheet,
       readOnly,
       redo,
+      selectedCellFormula,
+      selectedChartFormula,
       selectedFormula,
+      selectedFormulaTarget,
       selectedValue,
       setCellFormula,
       setCellStyle,
       setCellValue,
       setRangeStyle,
+      setSelectedFormula,
       setSelectedCellFormula,
       setSelectedCellStyle,
       setSelectedCellValue,
@@ -29263,12 +30000,16 @@ function useXlsxViewerEditing() {
       removeActiveSheet,
       readOnly,
       redo,
+      selectedCellFormula,
+      selectedChartFormula,
       selectedFormula,
+      selectedFormulaTarget,
       selectedValue,
       setCellFormula,
       setCellStyle,
       setCellValue,
       setRangeStyle,
+      setSelectedFormula,
       setSelectedCellFormula,
       setSelectedCellStyle,
       setSelectedCellValue,
@@ -29292,8 +30033,10 @@ function useXlsxViewerImages() {
   const {
     charts,
     clearSelectedChart,
+    clearSelectedChartElement,
     clearSelectedImage,
     getChartById,
+    getChartSeriesFormula,
     getSheetCharts,
     getImageById,
     getSheetImages,
@@ -29305,11 +30048,15 @@ function useXlsxViewerImages() {
     resizeChartBy,
     resizeImageBy,
     selectedChart,
+    selectedChartElement,
+    selectedChartFormula,
     selectedChartId,
     selectedImage,
     selectedImageId,
     selectChart,
+    selectChartElement,
     selectImage,
+    setChartSeriesFormula,
     setChartRect,
     setImageRect,
     updateChart
@@ -29318,8 +30065,10 @@ function useXlsxViewerImages() {
     () => ({
       charts,
       clearSelectedChart,
+      clearSelectedChartElement,
       clearSelectedImage,
       getChartById,
+      getChartSeriesFormula,
       getSheetCharts,
       getImageById,
       getSheetImages,
@@ -29331,11 +30080,15 @@ function useXlsxViewerImages() {
       resizeChartBy,
       resizeImageBy,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
       selectedImage,
       selectedImageId,
       selectChart,
+      selectChartElement,
       selectImage,
+      setChartSeriesFormula,
       setChartRect,
       setImageRect,
       updateChart
@@ -29343,8 +30096,10 @@ function useXlsxViewerImages() {
     [
       charts,
       clearSelectedChart,
+      clearSelectedChartElement,
       clearSelectedImage,
       getChartById,
+      getChartSeriesFormula,
       getSheetCharts,
       getImageById,
       getSheetImages,
@@ -29356,11 +30111,15 @@ function useXlsxViewerImages() {
       resizeChartBy,
       resizeImageBy,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
       selectedImage,
       selectedImageId,
       selectChart,
+      selectChartElement,
       selectImage,
+      setChartSeriesFormula,
       setChartRect,
       setImageRect,
       updateChart
@@ -29374,7 +30133,9 @@ function useXlsxViewerCharts() {
     charts,
     chartsheets,
     clearSelectedChart,
+    clearSelectedChartElement,
     getChartById,
+    getChartSeriesFormula,
     getChartsheetById,
     getSheetCharts,
     isChartsLoading,
@@ -29383,8 +30144,12 @@ function useXlsxViewerCharts() {
     resizeChartBy,
     selectChart,
     selectedChart,
+    selectedChartElement,
+    selectedChartFormula,
     selectedChartId,
+    selectChartElement,
     setActiveTabIndex,
+    setChartSeriesFormula,
     setChartRect,
     tabs,
     updateChart
@@ -29396,7 +30161,9 @@ function useXlsxViewerCharts() {
       charts,
       chartsheets,
       clearSelectedChart,
+      clearSelectedChartElement,
       getChartById,
+      getChartSeriesFormula,
       getChartsheetById,
       getSheetCharts,
       isChartsLoading,
@@ -29405,8 +30172,12 @@ function useXlsxViewerCharts() {
       resizeChartBy,
       selectChart,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
+      selectChartElement,
       setActiveTabIndex,
+      setChartSeriesFormula,
       setChartRect,
       tabs,
       updateChart
@@ -29417,7 +30188,9 @@ function useXlsxViewerCharts() {
       charts,
       chartsheets,
       clearSelectedChart,
+      clearSelectedChartElement,
       getChartById,
+      getChartSeriesFormula,
       getChartsheetById,
       getSheetCharts,
       isChartsLoading,
@@ -29426,8 +30199,12 @@ function useXlsxViewerCharts() {
       resizeChartBy,
       selectChart,
       selectedChart,
+      selectedChartElement,
+      selectedChartFormula,
       selectedChartId,
+      selectChartElement,
       setActiveTabIndex,
+      setChartSeriesFormula,
       setChartRect,
       tabs,
       updateChart