ooxml-ui 0.31.0 → 1.0.0

package/dist/xlsx.js

@@ -1,20 +1,21 @@
-import './chunk-RAZAJMHK.js';
+import './chunk-4QQASR5A.js';
 import { defineSmartArt } from './chunk-XDUYS4KK.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-3GE2NHNG.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-3GE2NHNG.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-FLHM5Q4O.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-FLHM5Q4O.js';
 import './chunk-SNV6YKPC.js';
 import './chunk-X7RINDJQ.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, parseSvgPreview } from './chunk-2QW4QE56.js';
-import { getIcon, registerIcon } from './chunk-HZ422LTR.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, parseSvgPreview } from './chunk-T3HB5LMH.js';
+import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
 import './chunk-OXKWNNNJ.js';
 import { withTokens } from './chunk-ZV2Z4IWH.js';
 import './chunk-JFJXBYRD.js';
 import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, formulaCommands, dataCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
-import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, selectionStats, formatRange, usedRange, chartSeriesTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, chartSeriesTransparencyPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
+import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
-import { CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
+import { resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
 import { render } from 'lit';
+import { RECT_GRADIENT_DIRECTIONS, OFFICE_GRADIENT_PRESETS, officeGradientPresetId, officeGradientPresetFill, resolveDrawingColor, drawingColorBrightness, drawingColorCss, rectGradientDirection } from 'ooxml-core/diagram';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/office-bridge.css?raw
 var office_bridge_default = "/*\n * The shared ooxml-ui elements read only --office-* tokens. This feeds them from the editor's\n * --xve-* theme, declared on the host so a theme, a dark scheme or a host override of --xve-*\n * keeps working (the same approach as pptx-viewer's office-token-bridge and docx-viewer's).\n */\n:host {\n	--office-font: 'Segoe UI', system-ui, -apple-system, sans-serif;\n	--office-foreground: var(--xve-foreground);\n	--office-muted-foreground: var(--xve-muted-foreground);\n	--office-background: var(--xve-background);\n	--office-surface: var(--xve-card);\n	--office-selected: var(--xve-accent);\n	--office-border: var(--xve-border);\n	--office-accent: var(--xve-primary);\n	--office-accent-foreground: var(--xve-primary-foreground);\n	--office-ring: var(--xve-ring);\n	--office-popover: var(--xve-popover);\n	--office-popover-foreground: var(--xve-popover-foreground, var(--xve-foreground));\n	--office-danger: var(--xve-destructive);\n	--office-danger-foreground: var(--xve-destructive-foreground);\n}\n";
@@ -32,7 +33,7 @@ var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour g
 var backstage_default = "/* File backstage: the shared office-ui-backstage draws the navigation; these style the page content.\n   The nav colours come from its tokens. */\n.xve-backstage {\n	z-index: 40;\n	--office-background: var(--surface);\n	--office-backstage-nav-background: var(--xl);\n	--office-backstage-nav-foreground: var(--xve-primary-foreground);\n}\n.xve-backstage-content {\n	overflow: auto;\n	padding: 28px 40px;\n	color: var(--ink);\n}\n.xve-backstage-content h2 {\n	margin: 0 0 20px;\n	font-size: 30px;\n	font-weight: 300;\n}\n.xve-backstage-content h3 {\n	margin: 24px 0 10px;\n	font-size: 15px;\n	font-weight: 600;\n}\n.xve-backstage-title {\n	margin: 0 0 4px;\n	font-size: 26px;\n	font-weight: 400;\n	overflow-wrap: anywhere;\n}\n.xve-backstage-muted {\n	color: var(--muted);\n}\n.xve-backstage-facts {\n	display: grid;\n	grid-template-columns: max-content minmax(0, 1fr);\n	gap: 6px 24px;\n	margin: 0;\n}\n.xve-backstage-facts dt {\n	color: var(--muted);\n}\n.xve-backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.xve-compatibility-notes {\n	display: grid;\n	gap: 8px;\n	max-width: 760px;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.xve-compatibility-notes li {\n	display: flex;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	line-height: 1.45;\n}\n.xve-compatibility-notes .xve-icon {\n	margin-top: 2px;\n	color: #b7791f;\n}\n.xve-backstage-columns {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) 300px;\n	gap: 40px;\n	align-items: start;\n}\n.xve-backstage-properties {\n	padding: 4px 0 0 24px;\n	border-left: 1px solid var(--line);\n}\n.xve-backstage-properties h3 {\n	margin-top: 0;\n}\n.xve-backstage-tiles {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.xve-backstage-tile {\n	display: inline-flex;\n	flex-direction: column;\n	gap: 8px;\n	padding: 8px;\n	border: 1px solid transparent;\n	border-radius: 6px;\n	background: none;\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-backstage-tile:hover {\n	border-color: var(--line);\n	background: var(--xl-soft);\n}\n.xve-backstage-tile-preview {\n	display: block;\n	width: 150px;\n	height: 112px;\n	border: 1px solid var(--line);\n	background-color: #fff;\n	background-image:\n		linear-gradient(#e1e1e1 1px, transparent 1px),\n		linear-gradient(90deg, #e1e1e1 1px, transparent 1px);\n	background-size: 30px 14px;\n	box-shadow: 0 1px 3px #0002;\n}\n.xve-backstage-tile-preview[data-template]::before {\n	display: block;\n	height: 14px;\n	background: var(--xl);\n	content: '';\n	opacity: 0.85;\n}\n.xve-backstage-card {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 24px;\n	max-width: 760px;\n	margin-bottom: 12px;\n	padding: 14px 18px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.xve-backstage-card h3 {\n	margin: 0 0 4px;\n}\n.xve-backstage-card p {\n	margin: 0;\n}\n.xve-backstage-primary {\n	padding: 8px 18px;\n	border: 0;\n	border-radius: 4px;\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n	white-space: nowrap;\n}\n.xve-backstage-field {\n	display: grid;\n	gap: 4px;\n	max-width: 420px;\n	margin-bottom: 14px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-backstage-field input,\n.xve-backstage-field select {\n	height: 32px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		14px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-backstage-check {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	margin-bottom: 10px;\n}\n.xve-customize-group {\n	margin: 0 0 8px;\n	padding: 6px 10px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n}\n.xve-customize-group legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-customize-row {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	min-width: 180px;\n	padding: 2px 8px 2px 0;\n	font-size: 13px;\n}\n@media (max-width: 760px) {\n	.xve-backstage-content {\n		padding: 20px;\n	}\n	.xve-backstage-columns {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.xve-backstage-properties {\n		padding-left: 0;\n		border-left: 0;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/chart-series.css?raw
-var chart_series_default = ".xve-canvas-row {\n	display: flex;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n}\n.xve-chart-series-pane {\n	box-sizing: border-box;\n	width: 300px;\n	max-width: 45%;\n	flex: none;\n	overflow: auto;\n	border-left: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-chart-series-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 12px 12px 12px 18px;\n	border-bottom: 1px solid var(--line);\n}\n.xve-chart-series-header h2 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 400;\n}\n.xve-chart-series-body,\n.xve-chart-series-pane > .xve-note {\n	margin: 0;\n	padding: 18px;\n}\n.xve-chart-series-body h3 {\n	margin: 0 0 20px;\n	font-size: 13px;\n	font-weight: 600;\n}\n.xve-chart-series-body .xve-field {\n	display: grid;\n	grid-template-columns: 1fr 70px 12px;\n	align-items: center;\n	gap: 6px;\n	margin: 14px 0;\n}\n.xve-chart-series-body .xve-input-number {\n	box-sizing: border-box;\n	width: 70px;\n	min-width: 0;\n}\n.xve-chart-series-range .office-range-control {\n	box-sizing: border-box;\n	width: 100%;\n	margin: 0 0 8px;\n}\n.xve-chart-series-fill {\n	margin-top: 20px;\n	padding-top: 18px;\n	border-top: 1px solid var(--line);\n}\n.xve-chart-series-body .xve-field:has(select),\n.xve-chart-series-body .xve-field:has(.xve-chart-series-color) {\n	grid-template-columns: 1fr minmax(100px, 1fr);\n}\n.xve-chart-series-color {\n	height: 28px;\n	background: var(--series-fill);\n	border: 1px solid var(--line);\n	cursor: pointer;\n}\n.xve-chart-series-color:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n";
+var chart_series_default = ".xve-canvas-row {\n	display: flex;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n}\n.xve-chart-series-pane {\n	box-sizing: border-box;\n	width: 300px;\n	max-width: 45%;\n	flex: none;\n	overflow: auto;\n	border-left: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-chart-series-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 12px 12px 12px 18px;\n	border-bottom: 1px solid var(--line);\n}\n.xve-chart-series-header h2 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 400;\n}\n.xve-chart-series-body,\n.xve-chart-series-pane > .xve-note {\n	margin: 0;\n	padding: 18px;\n}\n.xve-chart-series-body h3 {\n	margin: 0 0 20px;\n	font-size: 13px;\n	font-weight: 600;\n}\n.xve-chart-series-body .xve-field {\n	display: grid;\n	grid-template-columns: 1fr 70px 12px;\n	align-items: center;\n	gap: 6px;\n	margin: 14px 0;\n}\n.xve-chart-series-body .xve-input-number {\n	box-sizing: border-box;\n	width: 70px;\n	min-width: 0;\n}\n.xve-chart-series-range .office-range-control {\n	box-sizing: border-box;\n	width: 100%;\n	margin: 0 0 8px;\n}\n.xve-chart-series-fill {\n	margin-top: 20px;\n	padding-top: 18px;\n	border-top: 1px solid var(--line);\n}\n.xve-chart-series-body .xve-field:has(select),\n.xve-chart-series-body .xve-field:has(.xve-chart-series-color),\n.xve-chart-series-body .xve-field:has(office-ui-gallery) {\n	grid-template-columns: 1fr minmax(100px, 1fr);\n}\n.xve-chart-series-body office-ui-gallery .trigger {\n	box-sizing: border-box;\n	width: 100%;\n	white-space: normal;\n}\n.xve-chart-series-color {\n	height: 28px;\n	background: var(--series-fill);\n	border: 1px solid var(--line);\n	cursor: pointer;\n}\n.xve-chart-series-color:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.xve-chart-series-gradient {\n	margin-top: 18px;\n}\n.xve-chart-gradient-buttons {\n	display: flex;\n	gap: 8px;\n	justify-content: flex-end;\n}\n.xve-chart-gradient-selector {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n}\n.xve-chart-gradient-selector .office-gradient-stop-track {\n	flex: 1;\n	min-width: 0;\n}\n.xve-chart-gradient-buttons .xve-button {\n	width: 26px;\n	height: 28px;\n	padding: 0;\n	font-size: 18px;\n}\n";
 
 // src/xlsx/theme/styles.ts
 var declarations = (theme, scheme) => Object.entries(themeToCssVars(theme)).map(([name, value]) => `${name}:${value};`).join("") + `color-scheme:${scheme};`;
@@ -1650,13 +1651,13 @@ var DISPLAY = {
 function formatKeys(spec, mac) {
   const parsed = parse(spec);
   const key = parsed.code ?? (spec.endsWith("+") ? "+" : spec.split("+").pop() ?? "");
-  const names = [
+  const names2 = [
     parsed.mod ? mac ? "Cmd" : "Ctrl" : "",
     parsed.alt ? mac ? "Option" : "Alt" : "",
     parsed.shift ? "Shift" : "",
     DISPLAY[key.toLowerCase()] ?? (key.length === 1 ? key.toUpperCase() : key)
   ];
-  return names.filter(Boolean).join("+");
+  return names2.filter(Boolean).join("+");
 }
 var displayKeys = (shortcut, mac) => shortcut.keys.filter((spec) => !spec.includes("code:")).map((spec) => formatKeys(spec, mac));
 function findShortcut(event, mac) {
@@ -1921,12 +1922,12 @@ function openMenu(anchor, entries, label = "") {
     item.setAttribute("role", entry.checked === void 0 ? "menuitem" : "menuitemcheckbox");
     if (entry.checked !== void 0) item.setAttribute("aria-checked", String(entry.checked));
     item.disabled = entry.disabled ?? false;
-    const icon6 = doc.createElement("span");
-    icon6.className = "ribbon-menu-icon";
-    if (entry.icon) icon6.append(ribbonIcon(doc, entry.icon, 16));
+    const icon7 = doc.createElement("span");
+    icon7.className = "ribbon-menu-icon";
+    if (entry.icon) icon7.append(ribbonIcon(doc, entry.icon, 16));
     const text3 = doc.createElement("span");
     text3.textContent = entry.label;
-    item.append(icon6, text3);
+    item.append(icon7, text3);
     if (entry.shortcut) {
       const keys = doc.createElement("span");
       keys.className = "ribbon-menu-shortcut";
@@ -3002,10 +3003,10 @@ function openGoTo(ctx) {
     (name) => reference.value = name,
     () => confirm2?.()
   );
-  const names = (workbook?.definedNames ?? []).filter(
+  const names2 = (workbook?.definedNames ?? []).filter(
     (n) => !n.hidden && !n.name.startsWith("_xlnm.")
   );
-  list.setItems(names.map((n) => [n.name, n.name]));
+  list.setItems(names2.map((n) => [n.name, n.name]));
   const special = button(ctx, "Special...");
   return showDialog(
     ctx,
@@ -3193,15 +3194,15 @@ function openCreateNames(ctx) {
     opened: () => boxes[0]?.input.focus(),
     submit: () => {
       const chosen = boxes.filter((b) => b.input.checked).map((b) => b.edge);
-      const names = namesFromSelection(ctx, chosen);
-      if (!names.length) {
+      const names2 = namesFromSelection(ctx, chosen);
+      if (!names2.length) {
         ctx.toast(ctx.t("No names could be created from the selection."), "warning");
         return void 0;
       }
       t.session.batch("Create names", () => {
-        for (const name of names) t.session.setDefinedName(name);
+        for (const name of names2) t.session.setDefinedName(name);
       });
-      return names.length;
+      return names2.length;
     }
   });
 }
@@ -4225,7 +4226,7 @@ function nameValue(ctx, name) {
     return { text: "#NAME?", error: true };
   }
 }
-var visibleNames = (names) => names.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
+var visibleNames = (names2) => names2.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
 function openNameManager(ctx) {
   const doc = ctx.host.ownerDocument;
   const filter = select(ctx, FILTERS, "all");
@@ -4253,9 +4254,9 @@ function openNameManager(ctx) {
       head.append(th);
     }
     const body = table.createTBody();
-    const names = visibleNames(workbook?.definedNames ?? []);
-    if (selected && !names.includes(selected)) selected = void 0;
-    for (const name of names) {
+    const names2 = visibleNames(workbook?.definedNames ?? []);
+    if (selected && !names2.includes(selected)) selected = void 0;
+    for (const name of names2) {
       const value = nameValue(ctx, name);
       const kind = filter.value;
       if (kind === "worksheet" && name.localSheet === void 0) continue;
@@ -5711,12 +5712,12 @@ function hyperlinkDialog(ctx) {
   const tooltip2 = textInput(ctx, existing?.tooltip ?? "");
   const address = textInput(ctx, !mail ? existing?.target ?? "" : "");
   const sheets = t.workbook.sheets.map((s) => [s.name, s.name]);
-  const names = t.workbook.definedNames.filter((n) => !n.hidden && !n.name.startsWith("_xlnm.")).map((n) => [`name:${n.name}`, n.name]);
+  const names2 = t.workbook.definedNames.filter((n) => !n.hidden && !n.name.startsWith("_xlnm.")).map((n) => [`name:${n.name}`, n.name]);
   const loc = existing?.location ? splitLocation(existing.location) : { sheet: t.ws.name, ref: "A1" };
-  const isName = !loc.sheet && names.some(([, n]) => n === loc.ref);
+  const isName = !loc.sheet && names2.some(([, n]) => n === loc.ref);
   const place2 = select(
     ctx,
-    [...sheets, ...names],
+    [...sheets, ...names2],
     isName ? `name:${loc.ref}` : loc.sheet ?? t.ws.name,
     true
   );
@@ -6166,14 +6167,14 @@ function registerSimpleDialogs(ctx) {
   d.register("use-in-formula", (c) => {
     const t = target(c);
     if (!t) return Promise.resolve(void 0);
-    const names = t.workbook.definedNames.filter(
+    const names2 = t.workbook.definedNames.filter(
       (n) => !n.hidden && !n.name.startsWith("_xlnm.") && (n.localSheet === void 0 || n.localSheet === t.sheet)
     );
     return pickDialog(c, {
       name: "use-in-formula",
       heading: "Paste Name",
       label: "Paste name",
-      items: names.map((n) => [n.name, n.name]),
+      items: names2.map((n) => [n.name, n.name]),
       apply: (name) => {
         const grid = c.grid();
         const cell = getCell(t.ws, t.active.row, t.active.col);
@@ -7988,7 +7989,10 @@ function chartDesignTab() {
       {
         id: "series-options",
         label: "Series Options",
-        controls: [{ kind: "button", command: "chart.format-series", size: "large" }]
+        controls: [
+          { kind: "button", command: "chart.format-series", size: "large" },
+          { kind: "button", command: "chart.format-area", size: "large" }
+        ]
       },
       {
         id: "chart-delete",
@@ -8731,44 +8735,122 @@ function reviewCommands() {
     })
   ];
 }
-function createSeriesTransparency(ctx, selected) {
-  const element = el(ctx, "div");
-  const input = numberInput(ctx, 0, 0, 100);
-  const row2 = field(ctx, "Transparency", input);
-  const unit = el(ctx, "span");
-  unit.textContent = "%";
-  row2.append(unit);
-  const host = el(ctx, "div", "xve-chart-series-range");
-  element.append(row2, host);
-  let current;
+function seriesFillBinding(selected) {
+  return {
+    commandId: "chart.format-series",
+    key: selected,
+    fill: (chart) => chart.series[selected()]?.fill,
+    gradient: (view) => view.series[selected()]?.gradient,
+    paint: (view) => view.series[selected()]?.color,
+    rectangular: (chart) => chart.chartType === "bar" || chart.chartType === "column",
+    color: (chart, color) => chartSeriesFillPatch(chart, selected(), color),
+    solid: (chart) => chartSeriesSolidFillPatch(chart, selected()),
+    edit: (chart, edit) => chartSeriesGradientPatch(chart, selected(), edit),
+    transparency: (chart) => chartSeriesTransparency(chart, selected()),
+    setTransparency: (chart, value) => chartSeriesTransparencyPatch(chart, selected(), value),
+    preview: (chart, patch) => ({ ...chart, ...patch })
+  };
+}
+function backgroundFillBinding(selected) {
+  return {
+    commandId: "chart.format-area",
+    key: selected,
+    fill: (chart) => chartElementFill(chart, selected()),
+    gradient: (view) => view.appearance?.[selected()]?.gradient,
+    paint: (view) => view.appearance?.[selected()]?.fillColor ?? (selected() === "chartArea" ? "#FFFFFF" : "none"),
+    rectangular: () => true,
+    color: (chart, color) => chartElementFillPatch(chart, selected(), color),
+    solid: (chart) => chartElementSolidFillPatch(chart, selected()),
+    edit: (chart, edit) => chartElementGradientPatch(chart, selected(), edit),
+    transparency: (chart) => chartElementTransparency(chart, selected()),
+    setTransparency: (chart, value) => chartElementTransparencyPatch(chart, selected(), value),
+    preview: (chart, patch) => chartWithElementFills(chart, patch.elementFills ?? {})
+  };
+}
+function createNumberRange(input, options) {
+  const element = input.ownerDocument.createElement("div");
+  let original;
+  const enabled = () => !input.disabled && (options.enabled?.() ?? true);
+  const cancel = () => {
+    if (original === void 0) return;
+    input.value = original;
+    original = void 0;
+    options.onPreview?.(void 0);
+    paint();
+  };
   const paint = () => render(
     rangeControl({
-      label: ctx.t("Transparency"),
+      label: options.label(),
       value: input.valueAsNumber,
-      valueText: `${input.value}%`,
-      min: 0,
-      max: 100,
-      disabled: input.disabled,
+      valueText: input.value ? `${input.value}%` : "",
+      min: Number(input.min),
+      max: Number(input.max),
+      step: Number(input.step) || 1,
+      disabled: !enabled(),
       onInput: (value) => {
-        if (!ctx.commands.isEnabled("chart.format-series")) return;
+        if (!enabled() || !Number.isFinite(value)) return;
+        original ??= input.value;
         input.value = String(value);
+        options.onPreview?.(value);
         paint();
       },
-      onChange: () => input.dispatchEvent(new Event("change"))
+      onChange: () => {
+        if (original === void 0) return;
+        if (!enabled()) return cancel();
+        const value = input.value;
+        cancel();
+        input.value = value;
+        input.dispatchEvent(new Event("change"));
+        paint();
+      }
     }),
-    host
+    element
   );
+  element.addEventListener("pointercancel", cancel);
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && original !== void 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  });
+  return {
+    element,
+    cancel,
+    refresh: () => {
+      cancel();
+      paint();
+    }
+  };
+}
+
+// src/xlsx/chart-series-transparency.ts
+function createSeriesTransparency(ctx, selected, binding = seriesFillBinding(selected)) {
+  const element = el(ctx, "div");
+  const input = numberInput(ctx, 0, 0, 100);
+  const row2 = field(ctx, "Transparency", input);
+  const unit = el(ctx, "span");
+  unit.textContent = "%";
+  row2.append(unit);
+  const range2 = createNumberRange(input, {
+    label: () => ctx.t("Transparency"),
+    enabled: () => ctx.commands.isEnabled(binding.commandId)
+  });
+  range2.element.className = "xve-chart-series-range";
+  element.append(row2, range2.element);
+  let current;
   const refresh = (chart) => {
+    range2.cancel();
     current = chart;
-    const value = chart ? chartSeriesTransparency(chart, selected()) : void 0;
+    const value = chart ? binding.transparency(chart) : void 0;
     input.value = String(value ?? 0);
-    input.disabled = value === void 0 || !ctx.commands.isEnabled("chart.format-series");
+    input.disabled = value === void 0 || !ctx.commands.isEnabled(binding.commandId);
     row2.querySelector("span").textContent = ctx.t("Transparency");
     input.setAttribute("aria-label", ctx.t("Transparency"));
-    paint();
+    range2.refresh();
   };
   input.addEventListener("change", () => {
-    if (!current || input.disabled || !ctx.commands.isEnabled("chart.format-series"))
+    if (!current || input.disabled || !ctx.commands.isEnabled(binding.commandId))
       return refresh(current);
     if (!input.checkValidity() || !Number.isInteger(input.valueAsNumber)) {
       ctx.toast(
@@ -8779,15 +8861,656 @@ function createSeriesTransparency(ctx, selected) {
     }
     const found = activeChart(ctx);
     if (!found || found.chart !== current) return refresh(current);
-    const patch = chartSeriesTransparencyPatch(current, selected(), input.valueAsNumber);
+    const patch = binding.setTransparency(current, input.valueAsNumber);
     if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
     refresh(found.chart);
   });
   return { element, refresh };
 }
+function createGradientStopTrack(doc) {
+  const element = doc.createElement("div");
+  element.className = "office-gradient-stop-track";
+  element.setAttribute("role", "group");
+  const style = doc.createElement("style");
+  style.textContent = `.office-gradient-stop-track{position:relative;height:40px;margin:12px 7px}
+.office-gradient-stop-paint{position:absolute;inset:3px 0 15px;border:1px solid var(--line,#aaa)}
+.office-gradient-stop{position:absolute;top:0;width:14px;height:30px;padding:0;border:1px solid var(--line,#888);border-radius:2px;cursor:pointer;touch-action:none}
+.office-gradient-stop[aria-pressed=true]{outline:2px solid var(--accent,#217346);outline-offset:2px}
+.office-gradient-stop:focus-visible{outline:2px solid var(--accent,#217346);outline-offset:3px}
+.office-gradient-stop:disabled{opacity:.5;cursor:default}`;
+  const paint = doc.createElement("div");
+  paint.className = "office-gradient-stop-paint";
+  let current;
+  let drag;
+  const paintStops = (stops) => {
+    paint.style.background = `linear-gradient(90deg,${sortGradientStops(stops).map((stop) => `${stop.color} ${stop.position}%`).join(",")})`;
+  };
+  const cancel = () => {
+    if (!drag) return;
+    const previous = drag;
+    drag = void 0;
+    paintStops(current.stops);
+    element.querySelectorAll("button")[previous.index]?.style.setProperty("left", `calc(${previous.origin}% - 7px)`);
+    current.onPreview?.(previous.index, void 0);
+    if (element.hasPointerCapture?.(previous.pointer))
+      element.releasePointerCapture(previous.pointer);
+  };
+  const update = (options) => {
+    cancel();
+    current = options;
+    element.setAttribute("aria-label", options.label);
+    paintStops(options.stops);
+    element.replaceChildren(
+      style,
+      paint,
+      ...options.stops.map((stop, index) => {
+        const button2 = doc.createElement("button");
+        button2.type = "button";
+        button2.className = "office-gradient-stop";
+        button2.disabled = options.disabled;
+        button2.setAttribute("aria-label", options.stopLabel(index));
+        button2.setAttribute("aria-pressed", String(index === options.selected));
+        button2.style.left = `calc(${stop.position}% - 7px)`;
+        button2.style.background = stop.color;
+        button2.addEventListener("click", () => {
+          if (!current.disabled) current.onSelect(index);
+        });
+        button2.addEventListener("keydown", (event) => {
+          const next = event.key === "ArrowRight" ? index + 1 : event.key === "ArrowLeft" ? index - 1 : void 0;
+          if (next === void 0 || current.disabled) return;
+          event.preventDefault();
+          const selected = Math.max(0, Math.min(current.stops.length - 1, next));
+          current.onSelect(selected);
+          element.querySelectorAll("button")[selected]?.focus();
+        });
+        return button2;
+      })
+    );
+  };
+  element.addEventListener("pointerdown", (event) => {
+    if (drag || !current || event.isPrimary === false || event.button !== 0 || current.disabled || !current.onMove)
+      return;
+    const button2 = event.target.closest("button");
+    const index = Array.from(element.querySelectorAll("button")).indexOf(
+      button2
+    );
+    if (index < 0) return;
+    event.preventDefault();
+    current.onSelect(index);
+    const width = paint.getBoundingClientRect().width;
+    const origin = current.stops[index]?.position;
+    if (!width || origin === void 0) return;
+    drag = { pointer: event.pointerId, index, x: event.clientX, width, origin, value: origin };
+    try {
+      element.setPointerCapture?.(event.pointerId);
+    } catch {
+    }
+    element.querySelectorAll("button")[index]?.focus();
+  });
+  element.addEventListener("pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.pointer || current.disabled) return;
+    const value = Math.max(
+      0,
+      Math.min(100, Math.round(drag.origin + (event.clientX - drag.x) / drag.width * 100))
+    );
+    if (value === drag.value) return;
+    drag.value = value;
+    element.querySelectorAll("button")[drag.index]?.style.setProperty("left", `calc(${value}% - 7px)`);
+    paintStops(
+      current.stops.map(
+        (stop, index) => index === drag.index ? { ...stop, position: value } : stop
+      )
+    );
+    current.onPreview?.(drag.index, value);
+  });
+  element.addEventListener("pointerup", (event) => {
+    if (!drag || event.pointerId !== drag.pointer) return;
+    const previous = drag;
+    cancel();
+    if (!current.disabled && element.isConnected && previous.value !== previous.origin)
+      current.onMove?.(previous.index, previous.value);
+  });
+  for (const name of ["pointercancel", "lostpointercapture"])
+    element.addEventListener(name, (event) => {
+      if (drag?.pointer === event.pointerId) cancel();
+    });
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && drag) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  });
+  return {
+    element,
+    update,
+    cancel,
+    preview: (stops) => {
+      paintStops(stops);
+      const buttons = element.querySelectorAll("button");
+      stops.forEach((stop, index) => {
+        const button2 = buttons[index];
+        if (button2) {
+          button2.style.left = `calc(${stop.position}% - 7px)`;
+          button2.style.background = stop.color;
+        }
+      });
+    }
+  };
+}
+function gradientGalleryPreview(id, fill) {
+  const def = buildChartGradientDef(id, fill, { width: 38, height: 38, shape: "rect" });
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs>${chartGradientMarkup(def)}</defs><rect x="1" y="1" width="38" height="38" fill="url(#${def.id})" stroke="#999"/></svg>`;
+}
+
+// src/form/gradient-direction-gallery.ts
+var DIRECTIONS2 = [
+  [0, "Linear Right"],
+  [45, "Linear Diagonal - Bottom Right"],
+  [90, "Linear Down"],
+  [135, "Linear Diagonal - Bottom Left"],
+  [180, "Linear Left"],
+  [225, "Linear Diagonal - Top Left"],
+  [270, "Linear Up"],
+  [315, "Linear Diagonal - Top Right"]
+];
+var sequence = 0;
+function createGradientDirectionGallery(doc) {
+  const prefix = `office-gradient-direction-${++sequence}`;
+  defineGallery(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-gallery");
+  let current;
+  element.addEventListener("office-gallery-pick", (event) => {
+    const id = event.detail.itemId;
+    if (["rect", "circle", "shape"].includes(current?.gradient.path ?? "")) {
+      const direction2 = RECT_GRADIENT_DIRECTIONS.find((direction3) => direction3.id === id);
+      if (direction2 && current && !current.disabled) {
+        if (current.onPathPick) current.onPathPick(direction2.id);
+        else if (current.gradient.path === "rect") current.onRectPick?.(direction2.id);
+      }
+      return;
+    }
+    const direction = DIRECTIONS2.find(([angle]) => String(angle) === id);
+    if (direction && current && !current.disabled) current.onPick(direction[0]);
+  });
+  const update = (options) => {
+    current = options;
+    if (options.disabled) element.open = false;
+    const rectangular = ["rect", "circle", "shape"].includes(options.gradient.path ?? "");
+    const items2 = rectangular ? RECT_GRADIENT_DIRECTIONS.map(({ id, label }) => ({
+      id,
+      label: options.translate(label),
+      applied: rectGradientDirection(options.gradient.fillToRect) === id,
+      preview: gradientGalleryPreview(
+        `${prefix}-${id}`,
+        withChartGradientDirection(options.gradient, id)
+      )
+    })) : DIRECTIONS2.map(([angle, label]) => ({
+      id: String(angle),
+      label: options.translate(label),
+      applied: options.gradient.angle === angle,
+      preview: gradientGalleryPreview(`${prefix}-${angle}`, {
+        ...options.gradient,
+        type: "linear",
+        angle
+      })
+    }));
+    element.state = {
+      id: "gradient-direction",
+      label: options.label,
+      moreLabel: options.label,
+      disabled: options.disabled,
+      sections: [
+        {
+          columns: 4,
+          tileWidth: 44,
+          tileHeight: 44,
+          items: items2
+        }
+      ]
+    };
+  };
+  return {
+    element,
+    update,
+    close: () => {
+      element.open = false;
+    }
+  };
+}
+var sequence2 = 0;
+function createGradientPresetGallery(doc) {
+  const prefix = `office-gradient-preset-${++sequence2}`;
+  defineGallery(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-gallery");
+  let current;
+  element.addEventListener("office-gallery-pick", (event) => {
+    const id = event.detail.itemId;
+    const preset = OFFICE_GRADIENT_PRESETS.find((preset2) => String(preset2.id) === id);
+    if (preset && current && !current.disabled) current.onPick(preset.id);
+  });
+  return {
+    element,
+    close: () => {
+      element.open = false;
+    },
+    update(options) {
+      current = options;
+      if (options.disabled) element.open = false;
+      const selected = officeGradientPresetId(options.fill);
+      element.state = {
+        id: "gradient-presets",
+        label: options.label,
+        moreLabel: options.label,
+        disabled: options.disabled,
+        sections: [
+          {
+            columns: 6,
+            tileWidth: 40,
+            tileHeight: 40,
+            items: OFFICE_GRADIENT_PRESETS.map((preset) => ({
+              id: String(preset.id),
+              label: options.translate(preset.label),
+              applied: preset.id === selected,
+              preview: gradientGalleryPreview(
+                `${prefix}-${preset.id}`,
+                resolveChartGradient(
+                  officeGradientPresetFill(preset.id),
+                  (color) => resolveDrawingColor(color)
+                )
+              )
+            }))
+          }
+        ]
+      };
+    }
+  };
+}
+
+// src/xlsx/chart-series-gradient-type.ts
+function createGradientTypeField(ctx, onPick) {
+  const input = select(ctx, [
+    ["linear", "Linear"],
+    ["circle", "Radial"],
+    ["rect", "Rectangular"],
+    ["shape", "Path"]
+  ]);
+  input.options[1].disabled = true;
+  input.options[3].disabled = true;
+  const other = el(ctx, "option");
+  other.value = "unsupported";
+  other.disabled = true;
+  input.append(other);
+  const element = field(ctx, "Type", input);
+  input.addEventListener("change", () => {
+    if (!input.disabled && !input.selectedOptions[0]?.disabled && ["linear", "rect", "circle", "shape"].includes(input.value))
+      onPick(input.value);
+  });
+  return {
+    element,
+    refresh(fill, disabled, rectangularMarks = false) {
+      input.options[1].disabled = input.options[3].disabled = !rectangularMarks;
+      element.querySelector("span").textContent = ctx.t("Type");
+      input.setAttribute("aria-label", ctx.t("Type"));
+      const linearLabel = ctx.t("Linear gradient");
+      input.options[0].textContent = linearLabel === "Linear gradient" ? "Linear" : linearLabel;
+      input.options[1].textContent = ctx.t("Radial");
+      input.options[2].textContent = ctx.t("Rectangular");
+      input.options[3].textContent = ctx.t("Path");
+      other.textContent = ctx.t("Imported gradient type");
+      input.value = !fill.path ? "linear" : ["rect", "circle", "shape"].includes(fill.path) ? fill.path : "unsupported";
+      other.hidden = input.value !== "unsupported";
+      input.disabled = disabled;
+    }
+  };
+}
+function createChartGradientPreview(root, drawing, series, gradient) {
+  const target24 = typeof series === "number" ? `s${series}` : series;
+  const nodes = Array.from(
+    root.querySelectorAll(
+      `.xg-obj[data-index="${drawing}"] :is(linearGradient,radialGradient,pattern)[id$="-${target24}"]`
+    )
+  );
+  const originals = nodes.map((node) => ({
+    node,
+    children: Array.from(node.childNodes).map((child) => child.cloneNode(true))
+  }));
+  const paint = (fill) => {
+    const bounds = nodes.some((node) => node.localName === "pattern") ? { width: 1, height: 1, shape: "rect" } : void 0;
+    const def = buildChartGradientDef("preview", fill, bounds);
+    for (const node of nodes) {
+      if (!node.isConnected) continue;
+      if (def.kind === "rectPath") {
+        const image = node.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "image");
+        image.setAttribute("href", def.href);
+        image.setAttribute("width", "1");
+        image.setAttribute("height", "1");
+        image.setAttribute("preserveAspectRatio", "none");
+        node.replaceChildren(image);
+        continue;
+      }
+      node.replaceChildren(
+        ...def.stops.map((stop) => {
+          const element = node.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "stop");
+          element.setAttribute("offset", String(stop.offset));
+          element.setAttribute("stop-color", stop.color);
+          element.setAttribute("stop-opacity", String(stop.opacity ?? 1));
+          return element;
+        })
+      );
+    }
+  };
+  return {
+    paint,
+    position(index, position) {
+      paint({
+        ...gradient,
+        stops: gradient.stops.map((stop, i) => i === index ? { ...stop, position } : stop)
+      });
+    },
+    restore() {
+      for (const { node, children } of originals)
+        if (node.isConnected) node.replaceChildren(...children);
+    }
+  };
+}
+function seriesRangePreview(ctx, chart, view, series, stop, drawing, track, color, valid, binding) {
+  const gradient = binding.gradient(view);
+  const book = ctx.workbook();
+  const sheet = ctx.activeSheet();
+  let preview;
+  const strip = (fill) => {
+    track.preview(
+      fill.stops.map((item) => ({
+        position: item.position,
+        color: drawingColorCss({ hex: item.color, alpha: item.opacity ?? 1, unapplied: [] })
+      }))
+    );
+    color.style.setProperty("--series-fill", fill.stops[stop]?.color ?? "transparent");
+  };
+  return (property, value) => {
+    if (value === void 0) {
+      preview?.restore();
+      preview = void 0;
+      if (valid() && gradient) strip(gradient);
+      return;
+    }
+    if (!valid() || !book || !gradient || ctx.workbook() !== book || ctx.activeSheet() !== sheet || !ctx.commands.isEnabled(binding.commandId))
+      return;
+    const result = binding.edit(chart, {
+      kind: "stop",
+      index: stop,
+      [property]: value
+    });
+    const paint = result ? binding.gradient(
+      chartView(
+        book,
+        sheet,
+        binding.preview(chart, result.patch),
+        createRefEvaluator(book, ctx.session()?.calc, { sheet })
+      )
+    ) : gradient;
+    if (!paint) return;
+    preview ??= createChartGradientPreview(ctx.root, drawing, series, gradient);
+    preview.paint(paint);
+    strip(paint);
+  };
+}
+
+// src/xlsx/chart-series-gradient.ts
+function createSeriesGradient(ctx, selected, binding = seriesFillBinding(selected)) {
+  const element = el(ctx, "div", "xve-chart-series-gradient");
+  const angle = numberInput(ctx, 90, 0, 360);
+  const position = numberInput(ctx, 0, 0, 100);
+  const transparency = numberInput(ctx, 0, 0, 100);
+  const brightness = numberInput(ctx, 0, -100, 100);
+  const color = el(ctx, "button", "xve-input xve-chart-series-color");
+  color.type = "button";
+  const track = createGradientStopTrack(element.ownerDocument);
+  const direction = createGradientDirectionGallery(element.ownerDocument);
+  const preset = createGradientPresetGallery(element.ownerDocument);
+  const presetRow = field(ctx, "Preset gradients", preset.element);
+  const type = createGradientTypeField(ctx, (type2) => {
+    direction.close();
+    apply({ kind: "geometry", type: type2 });
+  });
+  const rows = [
+    [field(ctx, "Angle", angle), angle, "Angle"],
+    [field(ctx, "Color", color), color, "Color"],
+    [field(ctx, "Position", position), position, "Position"],
+    [field(ctx, "Brightness", brightness), brightness, "Brightness"],
+    [field(ctx, "Transparency", transparency), transparency, "Transparency"]
+  ];
+  for (const [row2, , label] of rows.filter(([, input]) => input !== color)) {
+    const unit = el(ctx, "span");
+    unit.textContent = label === "Angle" ? "\xB0" : "%";
+    row2.append(unit);
+  }
+  const buttons = el(ctx, "div", "xve-chart-gradient-buttons");
+  const selector = el(ctx, "div", "xve-chart-gradient-selector");
+  const add = el(ctx, "button", "xve-button");
+  add.type = "button";
+  const remove = el(ctx, "button", "xve-button");
+  remove.type = "button";
+  buttons.append(add, remove);
+  selector.append(track.element, buttons);
+  const directionRow = field(ctx, "Direction", direction.element);
+  let previewRange;
+  const ranges = /* @__PURE__ */ new Map();
+  for (const [property, input] of [
+    ["position", position],
+    ["brightness", brightness],
+    ["transparency", transparency]
+  ]) {
+    const range2 = createNumberRange(input, {
+      label: () => input.getAttribute("aria-label") ?? "",
+      enabled: () => {
+        const fill = current && binding.fill(current);
+        return ctx.commands.isEnabled(binding.commandId) && fill?.kind === "gradient" && fill.stops.length === (model && binding.gradient(model)?.stops.length);
+      },
+      onPreview: (value) => {
+        if (value !== void 0) {
+          for (const other of ranges.values()) if (other !== range2) other.cancel();
+        }
+        previewRange?.(property, value);
+      }
+    });
+    range2.element.className = "xve-chart-series-range";
+    ranges.set(input, range2);
+  }
+  element.append(
+    presetRow,
+    type.element,
+    directionRow,
+    rows[0][0],
+    selector,
+    ...rows.slice(1).flatMap(([row2, input]) => {
+      const range2 = ranges.get(input);
+      return range2 ? [row2, range2.element] : [row2];
+    })
+  );
+  let current;
+  let model;
+  let stopIndex = 0;
+  let seriesIndex = -1;
+  let drawingIndex = -1;
+  let shownBook = ctx.workbook();
+  let shownSheet = -1;
+  let shownPath;
+  const apply = (edit) => {
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return;
+    const result = binding.edit(current, edit);
+    if (!result) return;
+    if (edit.kind !== "angle" && edit.kind !== "geometry") stopIndex = result.stopIndex;
+    ctx.session()?.updateChart(ctx.activeSheet(), found.index, result.patch);
+  };
+  const refresh = (chart, view) => {
+    track.cancel();
+    for (const range2 of ranges.values()) range2.cancel();
+    previewRange = void 0;
+    const nextDrawing = activeChart(ctx)?.index ?? -1;
+    if (seriesIndex !== binding.key() || drawingIndex !== nextDrawing || shownBook !== ctx.workbook() || shownSheet !== ctx.activeSheet()) {
+      stopIndex = 0;
+      direction.close();
+      preset.close();
+    }
+    shownBook = ctx.workbook();
+    shownSheet = ctx.activeSheet();
+    seriesIndex = binding.key();
+    drawingIndex = nextDrawing;
+    current = chart;
+    model = view;
+    const fill = chart && binding.fill(chart);
+    element.hidden = fill?.kind !== "gradient";
+    if (fill?.kind !== "gradient") {
+      direction.close();
+      preset.close();
+      return;
+    }
+    stopIndex = Math.max(0, Math.min(stopIndex, fill.stops.length - 1));
+    const disabled = !ctx.commands.isEnabled(binding.commandId);
+    presetRow.querySelector("span").textContent = ctx.t("Preset gradients");
+    preset.update({
+      fill,
+      disabled,
+      label: ctx.t("Preset gradients"),
+      translate: ctx.t,
+      onPick: (id) => apply({ kind: "preset", id })
+    });
+    const rectangularMarks = !!chart && binding.rectangular(chart);
+    type.refresh(fill, disabled, rectangularMarks);
+    if (shownPath !== fill.path) direction.close();
+    shownPath = fill.path;
+    angle.value = String(fill.angle ?? 90);
+    angle.disabled = disabled || !!fill.path;
+    position.value = String(fill.stops[stopIndex]?.position ?? 0);
+    transparency.value = String(chartGradientStopTransparency(fill, stopIndex));
+    const stopColor = fill.stops[stopIndex]?.color;
+    const stopBrightness = stopColor && drawingColorBrightness(stopColor);
+    brightness.value = stopBrightness === void 0 ? "" : String(stopBrightness);
+    position.disabled = transparency.disabled = color.disabled = brightness.disabled = disabled || !fill.stops.length;
+    const stops = (view && binding.gradient(view)?.stops) ?? [];
+    directionRow.querySelector("span").textContent = ctx.t("Direction");
+    direction.update({
+      gradient: (view && binding.gradient(view)) ?? { type: "linear", stops: [] },
+      disabled: disabled || !!fill.path && fill.path !== "rect" && !(rectangularMarks && ["circle", "shape"].includes(fill.path)),
+      label: ctx.t("Direction"),
+      translate: ctx.t,
+      onPick: (value) => apply({ kind: "angle", value }),
+      onRectPick: (direction2) => apply({ kind: "geometry", type: "rect", direction: direction2 }),
+      onPathPick: (direction2) => {
+        if (fill.path === "rect" || fill.path === "circle" || fill.path === "shape")
+          apply({ kind: "geometry", type: fill.path, direction: direction2 });
+      }
+    });
+    brightness.disabled ||= stopBrightness === void 0;
+    const previewSeries = binding.key();
+    const previewStop = stopIndex;
+    if (chart && view)
+      previewRange = seriesRangePreview(
+        ctx,
+        chart,
+        view,
+        previewSeries,
+        previewStop,
+        drawingIndex,
+        track,
+        color,
+        () => current === chart && binding.key() === previewSeries && stopIndex === previewStop && binding.fill(chart) === fill,
+        binding
+      );
+    color.style.setProperty("--series-fill", stops[stopIndex]?.color ?? "transparent");
+    let preview;
+    const gradient = view && binding.gradient(view);
+    track.update({
+      stops: stops.map((stop) => ({
+        position: stop.position,
+        color: drawingColorCss({ hex: stop.color, alpha: stop.opacity ?? 1, unapplied: [] })
+      })),
+      selected: stopIndex,
+      disabled: disabled || stops.length !== fill.stops.length,
+      label: ctx.t("Gradient stops"),
+      stopLabel: (index) => ctx.t("Gradient stop {index}", { index: index + 1 }),
+      onSelect: (index) => {
+        stopIndex = index;
+        refresh(current, model);
+      },
+      onMove: (index, position2) => apply({ kind: "stop", index, position: position2 }),
+      onPreview: (index, value) => {
+        if (value === void 0) {
+          preview?.restore();
+          preview = void 0;
+        }
+        if (current !== chart || chart && binding.fill(chart) !== fill) return;
+        position.value = String(value ?? fill.stops[index]?.position ?? 0);
+        if (value !== void 0 && gradient) {
+          preview ??= createChartGradientPreview(ctx.root, drawingIndex, binding.key(), gradient);
+          preview.position(index, value);
+        }
+      }
+    });
+    add.disabled = disabled || !fill.stops.length;
+    remove.disabled = disabled || fill.stops.length <= 2;
+    add.textContent = "+";
+    remove.textContent = "\u2212";
+    add.setAttribute("aria-label", ctx.t("Add gradient stop"));
+    remove.setAttribute("aria-label", ctx.t("Remove gradient stop"));
+    for (const [row2, input, label] of rows) {
+      row2.querySelector("span").textContent = ctx.t(label);
+      input.setAttribute("aria-label", ctx.t(label));
+    }
+    for (const range2 of ranges.values()) range2.refresh();
+  };
+  for (const [input, property] of [
+    [angle, "angle"],
+    [position, "position"],
+    [transparency, "transparency"],
+    [brightness, "brightness"]
+  ]) {
+    input.addEventListener("change", () => {
+      if (input.disabled || !ctx.commands.isEnabled(binding.commandId))
+        return refresh(current, model);
+      const value = input.valueAsNumber;
+      if (!Number.isFinite(value) || !input.checkValidity()) {
+        ctx.toast(
+          ctx.t("Enter a whole number from {min} to {max}.", { min: input.min, max: input.max }),
+          "warning"
+        );
+        return refresh(current, model);
+      }
+      apply(
+        property === "angle" ? { kind: "angle", value } : { kind: "stop", index: stopIndex, [property]: value }
+      );
+    });
+  }
+  add.addEventListener("click", () => {
+    if (!add.disabled) apply({ kind: "add", index: stopIndex });
+  });
+  remove.addEventListener("click", () => {
+    if (!remove.disabled) apply({ kind: "remove", index: stopIndex });
+  });
+  color.addEventListener("click", () => {
+    if (color.disabled || !ctx.commands.isEnabled(binding.commandId)) return;
+    const chart = current;
+    const series = binding.key();
+    const index = stopIndex;
+    const book = ctx.workbook();
+    openColorGrid(
+      color,
+      (choice) => {
+        if (choice && current === chart && binding.key() === series && stopIndex === index && ctx.workbook() === book)
+          apply({ kind: "stop", index, color: choice });
+      },
+      { t: ctx.t, ...book ? { theme: book.theme } : {} }
+    );
+  });
+  return { element, refresh, create: () => apply({ kind: "create" }) };
+}
 
 // src/xlsx/chart-series-fill.ts
-function createSeriesFill(ctx, selected) {
+function createSeriesFill(ctx, selected, binding = seriesFillBinding(selected)) {
   const element = el(ctx, "div", "xve-chart-series-fill");
   const heading2 = el(ctx, "h3");
   const kind = select(ctx, []);
@@ -8795,35 +9518,37 @@ function createSeriesFill(ctx, selected) {
   const color = el(ctx, "button", "xve-input xve-chart-series-color");
   color.type = "button";
   const colorField = field(ctx, "Color", color);
-  const transparency = createSeriesTransparency(ctx, selected);
-  element.append(heading2, kindField, colorField, transparency.element);
+  const transparency = createSeriesTransparency(ctx, selected, binding);
+  const gradient = createSeriesGradient(ctx, selected, binding);
+  element.append(heading2, kindField, colorField, transparency.element, gradient.element);
   let current;
   const apply = (value) => {
-    if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
     const found = activeChart(ctx);
     if (!found || found.chart !== current) return;
-    const patch = chartSeriesFillPatch(current, selected(), value);
+    const patch = binding.color(current, value);
     if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
   };
   kind.addEventListener("change", () => {
     if (kind.value === "none") apply(null);
+    else if (kind.value === "gradient") gradient.create();
     else if (kind.value === "solid") {
-      if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+      if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
       const found = activeChart(ctx);
       if (!found || found.chart !== current) return;
-      const patch = chartSeriesSolidFillPatch(current, selected());
+      const patch = binding.solid(current);
       if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
     }
   });
   color.addEventListener("click", () => {
-    if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
     const chart = current;
-    const index = selected();
+    const index = binding.key();
     const workbook = ctx.workbook();
     openColorGrid(
       color,
       (choice) => {
-        if (current === chart && ctx.workbook() === workbook && selected() === index && choice)
+        if (current === chart && ctx.workbook() === workbook && binding.key() === index && choice)
           apply(choice);
       },
       { t: ctx.t, ...workbook ? { theme: workbook.theme } : {} }
@@ -8832,28 +9557,30 @@ function createSeriesFill(ctx, selected) {
   const refresh = (chart, model) => {
     current = chart;
     transparency.refresh(chart);
-    const series = chart?.series[selected()];
-    const fill = series?.fill;
+    gradient.refresh(chart, model);
+    const fill = chart && binding.fill(chart);
     const value = fill?.kind === "none" ? "none" : fill?.kind === "gradient" ? "gradient" : fill && fill.kind !== "solid" ? "imported" : "solid";
     const entries = [
       ["none", "No fill"],
-      ["solid", "Solid fill"]
+      ["solid", "Solid fill"],
+      ["gradient", "Gradient fill"]
     ];
-    if (value === "gradient") entries.push(["gradient", "Gradient fill"]);
-    else if (value === "imported") entries.push(["imported", "Imported fill"]);
+    if (value === "imported") entries.push(["imported", "Imported fill"]);
     kind.replaceChildren(
       ...entries.map(([key, label]) => {
         const option = el(ctx, "option");
         option.value = key;
         option.textContent = ctx.t(label);
-        option.disabled = key === "gradient" || key === "imported";
+        option.disabled = key === "imported";
         return option;
       })
     );
     kind.value = value;
-    kind.disabled = !series || !ctx.commands.isEnabled("chart.format-series");
+    colorField.hidden = value !== "solid";
+    transparency.element.hidden = value !== "solid";
+    kind.disabled = !chart || !ctx.commands.isEnabled(binding.commandId);
     color.disabled = kind.disabled || value !== "solid";
-    const paint = model?.series[selected()]?.color;
+    const paint = model && binding.paint(model);
     color.style.setProperty("--series-fill", paint && paint !== "none" ? paint : "transparent");
     heading2.textContent = ctx.t("Fill");
     for (const [row2, control, label] of [
@@ -8881,7 +9608,7 @@ function chartSeriesCommand() {
     run: (ctx, arg) => void ctx.dialogs.open("format-chart-series", arg)
   });
 }
-function createChartSeriesPane(ctx) {
+function createChartSeriesPane(ctx, onOpen) {
   const element = el(ctx, "aside", "xve-chart-series-pane");
   element.hidden = true;
   element.setAttribute("role", "complementary");
@@ -8891,6 +9618,7 @@ function createChartSeriesPane(ctx) {
   closeButton.type = "button";
   closeButton.textContent = "\xD7";
   const close = () => {
+    fills.refresh(void 0, void 0);
     element.hidden = true;
     ctx.grid()?.focus();
   };
@@ -9031,6 +9759,7 @@ function createChartSeriesPane(ctx) {
   relocalize();
   ctx.dialogs.register("format-chart-series", async (_ctx, props2) => {
     if (!ctx.commands.isEnabled("chart.format-series")) return;
+    onOpen?.();
     element.hidden = false;
     refresh();
     if (typeof props2 === "number" && Number.isInteger(props2) && activeChart(ctx)?.chart.series[props2]) {
@@ -9039,7 +9768,112 @@ function createChartSeriesPane(ctx) {
     }
     overlap.focus();
   });
-  return { element, refresh, relocalize };
+  return { element, refresh, relocalize, close };
+}
+var names = {
+  chartArea: ["Chart Area", "Format Chart Area"],
+  plotArea: ["Plot Area", "Format Plot Area"],
+  title: ["Chart Title", "Format Chart Title"],
+  legend: ["Legend", "Format Legend"]
+};
+function chartAreaCommand() {
+  return editing({
+    id: "chart.format-area",
+    label: "Format Chart Area",
+    icon: icon("chartColumn"),
+    lock: "objects",
+    enabled: (ctx) => !!activeChart(ctx),
+    run: (ctx, arg) => void ctx.dialogs.open("format-chart-area", arg)
+  });
+}
+function createChartAreaPane(ctx, onOpen) {
+  const element = el(ctx, "aside", "xve-chart-series-pane");
+  element.hidden = true;
+  element.setAttribute("role", "complementary");
+  const header = el(ctx, "div", "xve-chart-series-header");
+  const title = el(ctx, "h2");
+  const closeButton = el(ctx, "button", "xve-icon-button");
+  closeButton.type = "button";
+  closeButton.textContent = "\xD7";
+  const body = el(ctx, "div", "xve-chart-series-body");
+  let selected = "chartArea";
+  const target24 = select(ctx, []);
+  const targetField = field(ctx, "Chart element", target24);
+  const fills = createSeriesFill(
+    ctx,
+    () => 0,
+    backgroundFillBinding(() => selected)
+  );
+  const close = () => {
+    fills.refresh(void 0, void 0);
+    element.hidden = true;
+    ctx.grid()?.focus();
+  };
+  closeButton.addEventListener("click", close);
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    }
+  });
+  header.append(title, closeButton);
+  body.append(targetField, fills.element);
+  element.append(header, body);
+  const refresh = () => {
+    if (element.hidden) return;
+    const found = activeChart(ctx), book = ctx.workbook();
+    if (!found || !book) {
+      close();
+      return;
+    }
+    const available = (part) => part === "title" ? !!found.chart.title : part === "legend" ? found.chart.showLegend : true;
+    for (const option of target24.options)
+      option.disabled = !available(option.value);
+    if (!available(selected)) selected = "chartArea";
+    title.textContent = ctx.t(names[selected][1]);
+    element.setAttribute("aria-label", title.textContent);
+    target24.value = selected;
+    target24.disabled = !ctx.commands.isEnabled("chart.format-area");
+    fills.refresh(
+      found.chart,
+      chartView(
+        book,
+        ctx.activeSheet(),
+        found.chart,
+        createRefEvaluator(book, ctx.session()?.calc, { sheet: ctx.activeSheet() })
+      )
+    );
+  };
+  const relocalize = () => {
+    closeButton.setAttribute("aria-label", ctx.t("Close"));
+    targetField.querySelector("span").textContent = ctx.t("Chart element");
+    target24.setAttribute("aria-label", ctx.t("Chart element"));
+    target24.replaceChildren(
+      ...CHART_FILL_PARTS.map((part) => {
+        const option = el(ctx, "option");
+        option.value = part;
+        option.textContent = ctx.t(names[part][0]);
+        return option;
+      })
+    );
+    refresh();
+  };
+  target24.addEventListener("change", () => {
+    if (!target24.disabled && CHART_FILL_PARTS.includes(target24.value))
+      selected = target24.value;
+    refresh();
+  });
+  ctx.dialogs.register("format-chart-area", async (_ctx, part) => {
+    if (!ctx.commands.isEnabled("chart.format-area")) return;
+    onOpen();
+    selected = CHART_FILL_PARTS.includes(part) ? part : "chartArea";
+    element.hidden = false;
+    refresh();
+    target24.focus();
+  });
+  relocalize();
+  return { element, refresh, relocalize, close };
 }
 
 // src/xlsx/commands/index.ts
@@ -9060,7 +9894,8 @@ function allCommands() {
     ...reviewCommands(),
     ...viewCommands(),
     ...contextualCommands(),
-    chartSeriesCommand()
+    chartSeriesCommand(),
+    chartAreaCommand()
   ];
 }
 function installCommands(ctx) {
@@ -9953,10 +10788,12 @@ var DrawingLayer = class {
           node.addEventListener("pointerdown", (event) => this.#press(event, index));
           node.addEventListener("dblclick", (event) => {
             const series = event.currentTarget.xgSeriesHit;
-            if (series === void 0) return;
+            const part = event.currentTarget.xgChartPart;
+            if (series === void 0 && part === void 0) return;
             event.stopPropagation();
             view.ctx.selection.set({ drawing: index });
-            void view.ctx.commands.run("chart.format-series", series);
+            if (series !== void 0) void view.ctx.commands.run("chart.format-series", series);
+            else void view.ctx.commands.run("chart.format-area", part);
           });
           this.#nodes.set(key, node);
         }
@@ -9965,7 +10802,7 @@ var DrawingLayer = class {
         const sig = `${drawing.kind}:${Math.round(box.w)}x${Math.round(box.h)}:${this.#generation}`;
         if (node.xgSig !== sig) {
           node.xgSig = sig;
-          this.#paint(node, drawing, box, index);
+          this.#paint(node, drawing, box);
         }
         this.#selection(node, index);
       }
@@ -9976,7 +10813,7 @@ var DrawingLayer = class {
         this.#nodes.delete(key);
       }
   }
-  #paint(node, drawing, box, index) {
+  #paint(node, drawing, box) {
     const view = this.#view;
     const doc = view.doc;
     node.replaceChildren();
@@ -10002,11 +10839,10 @@ var DrawingLayer = class {
           node.append(
             svgNode(
               doc,
-              renderChartSvg(
-                model,
-                Math.max(10, Math.round(box.w)),
-                Math.max(10, Math.round(box.h))
-              )
+              renderChartSvg(model, Math.max(10, box.w), Math.max(10, box.h), {
+                measureText: (content, font) => view.measurer.measure(content, font),
+                measureFont: (font) => view.measurer.fontMetrics(font)
+              })
             )
           );
         } catch {
@@ -10052,6 +10888,8 @@ var DrawingLayer = class {
     const node = event.currentTarget;
     const series = event.target.closest("[data-chart-series]")?.dataset.chartSeries;
     node.xgSeriesHit = series === void 0 ? void 0 : Number(series);
+    const part = event.target.closest("[data-chart-part]")?.dataset.chartPart;
+    node.xgChartPart = CHART_FILL_PARTS.includes(part) ? part : void 0;
     view.ctx.selection.set({ drawing: index });
     view.ctx.grid()?.focus();
     const session = view.ctx.session();
@@ -10142,9 +10980,9 @@ var GridA11y = class {
   }
   input;
   /** Updates the sink label and announces (debounced) after a selection change. */
-  update(selection, editing6) {
+  update(selection, editing7) {
     const text3 = describeSelection(this.#view, selection);
-    if (!editing6) this.input.setAttribute("aria-label", text3);
+    if (!editing7) this.input.setAttribute("aria-label", text3);
     if (this.#timer) clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
       this.live.textContent = text3;
@@ -11190,12 +12028,12 @@ function paintCell(doc, node, item, zoom) {
     }
   }
   if (view.icon) {
-    const icon6 = svgNode(
+    const icon7 = svgNode(
       doc,
       iconSvg(view.icon.set, view.icon.index, Math.round(16 * (zoom / 100)))
     );
-    icon6.setAttribute("class", "xg-ic");
-    node.append(icon6);
+    icon7.setAttribute("class", "xg-ic");
+    node.append(icon7);
   }
   if (item.text) {
     const box = h(doc, "div", "xg-t");
@@ -11356,6 +12194,7 @@ function estimateWidth(text3, font) {
 function createTextMeasurer(doc) {
   let context;
   const cache = /* @__PURE__ */ new Map();
+  const metricsCache = /* @__PURE__ */ new Map();
   const ctx = () => {
     if (context !== void 0) return context;
     try {
@@ -11383,7 +12222,24 @@ function createTextMeasurer(doc) {
   };
   return {
     measure,
-    measureFont: (text3, font) => measure(text3, cssFont(font, 100))
+    measureFont: (text3, font) => measure(text3, cssFont(font, 100)),
+    fontMetrics: (font) => {
+      const hit = metricsCache.get(font);
+      if (hit) return hit;
+      const c = ctx();
+      if (!c) return void 0;
+      if (c.font !== font) c.font = font;
+      const result = c.measureText("Mg");
+      const metrics = {
+        ascent: result.fontBoundingBoxAscent,
+        descent: result.fontBoundingBoxDescent
+      };
+      if (!Number.isFinite(metrics.ascent) || !Number.isFinite(metrics.descent) || metrics.ascent + metrics.descent <= 0)
+        return void 0;
+      if (metricsCache.size > 1e4) metricsCache.clear();
+      metricsCache.set(font, metrics);
+      return metrics;
+    }
   };
 }
 function rectOf(metrics, range2, maxRow, maxCol) {
@@ -11976,9 +12832,9 @@ var GRID_CSS = `
 .xg-drawings{z-index:4}
 .xg-obj{position:absolute;box-sizing:border-box;pointer-events:auto;cursor:default}
 .xg-obj img,.xg-obj svg{display:block;width:100%;height:100%;pointer-events:none}
-.xg-chart svg [data-chart-series]{pointer-events:auto}
-.xg-obj.xg-chart{background:#fff;border:1px solid #d9d9d9}
-.xg-obj.xg-obj-sel{outline:1px solid #8a8a8a}
+.xg-chart svg [data-chart-series],.xg-chart svg [data-chart-part]{pointer-events:auto}
+.xg-obj.xg-chart{background:#fff;outline:1px solid #d9d9d9;outline-offset:-1px}
+.xg-obj.xg-obj-sel{outline:1px solid #8a8a8a;outline-offset:0}
 .xg-obj .xg-grip{position:absolute;width:8px;height:8px;background:#fff;border:1px solid #555;box-sizing:border-box;border-radius:50%}
 .xg-obj-unsupported{background:repeating-linear-gradient(45deg,#f6f6f6,#f6f6f6 6px,#ececec 6px,#ececec 12px);border:1px dashed #aaa;
 	font-size:11px;color:#555;display:flex;align-items:center;justify-content:center;text-align:center}
@@ -12372,10 +13228,10 @@ function createFormulaInput(ctx, doc, bar) {
   const onKey = (event) => {
     event.stopPropagation();
     if (assist.handleKey(event, field2)) return;
-    const editing6 = bridge.state().editing;
+    const editing7 = bridge.state().editing;
     if (event.key === "Escape") {
       event.preventDefault();
-      if (editing6) bridge.cancel();
+      if (editing7) bridge.cancel();
       else showCell();
       ctx.grid()?.focus();
       return;
@@ -12388,7 +13244,7 @@ function createFormulaInput(ctx, doc, bar) {
       onInput();
       return;
     }
-    if (!editing6) return;
+    if (!editing7) return;
     if (event.key === "Enter") {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) bridge.commit("none", true);
@@ -12526,10 +13382,10 @@ function createNameBox(ctx, doc) {
     const wb = ctx.workbook();
     list.replaceChildren();
     const sheet = ctx.activeSheet();
-    const names = (wb?.definedNames ?? []).filter(
+    const names2 = (wb?.definedNames ?? []).filter(
       (d) => !d.hidden && (d.localSheet === void 0 || d.localSheet === sheet)
     );
-    for (const named of names) {
+    for (const named of names2) {
       const item = h(doc, "li", "xfb-name-item", { role: "option" });
       item.textContent = named.name;
       item.addEventListener("mousedown", (event) => {
@@ -12540,7 +13396,7 @@ function createNameBox(ctx, doc) {
       });
       list.append(item);
     }
-    if (!names.length) {
+    if (!names2.length) {
       const empty = h(doc, "li", "xfb-name-empty", { "aria-disabled": "true" });
       empty.textContent = t("No defined names");
       list.append(empty);
@@ -13493,10 +14349,10 @@ function adjacentSheet(ctx, step2) {
   return void 0;
 }
 function shellCommands(handlers) {
-  const file = (id, label, command, icon6, shortcut) => ({
+  const file = (id, label, command, icon7, shortcut) => ({
     id,
     label,
-    icon: icon6,
+    icon: icon7,
     ...shortcut ? { shortcut } : {},
     enabled: (ctx) => command === "new" || command === "open" || hasWorkbook(ctx),
     run: () => handlers.fileCommand(command)
@@ -14010,7 +14866,8 @@ function buildShell(core) {
   });
   const toaster = createToaster(doc, () => ctx.t("Close"));
   const workspace = el2(doc, "div", "xve-workspace");
-  const chartSeriesPane = createChartSeriesPane(ctx);
+  const chartSeriesPane = createChartSeriesPane(ctx, () => chartAreaPane.close());
+  const chartAreaPane = createChartAreaPane(ctx, () => chartSeriesPane.close());
   const canvasRow = el2(doc, "div", "xve-canvas-row");
   const formulaRow = el2(doc, "div", "xve-formula-row");
   const gridHost = el2(doc, "div", "xve-grid-host");
@@ -14019,7 +14876,7 @@ function buildShell(core) {
   const emptyText = el2(doc, "p");
   empty.append(emptyText);
   workspace.append(formulaRow, gridHost, tabsRow, empty);
-  canvasRow.append(workspace, chartSeriesPane.element);
+  canvasRow.append(workspace, chartSeriesPane.element, chartAreaPane.element);
   frame.append(
     titleBar.element,
     ribbon.element,
@@ -14044,6 +14901,7 @@ function buildShell(core) {
     gridHost,
     tabsRow,
     chartSeriesPane.element,
+    chartAreaPane.element,
     statusBar.element
   ].filter((region) => region.getClientRects().length);
   const focusRegion = (region) => {
@@ -14083,6 +14941,7 @@ function buildShell(core) {
       titleBar.refresh();
       statusBar.refresh();
       chartSeriesPane.refresh();
+      chartAreaPane.refresh();
       titleBar.setFileName(core.fileName);
       if (core.dirty.dirty && saveState !== "dirty" && saveState !== "saving")
         chrome.setSaveState("dirty");
@@ -14098,6 +14957,7 @@ function buildShell(core) {
       statusBar.relocalize();
       backstage.relocalize();
       chartSeriesPane.relocalize();
+      chartAreaPane.relocalize();
       core.requestRender();
     }
   };