ooxml-ui 1.24.0 → 1.26.0

package/dist/xlsx.js

@@ -1,26 +1,31 @@
 import { statusLayout, watchStatusWidth } from './chunk-UBBC5FH7.js';
 import { trackPointerGesture } from './chunk-GSXOZCAN.js';
-import './chunk-Y67BTA5W.js';
-import { createHostBackstagePages, syncRibbonAddIns, withHostMenuItems } from './chunk-A277D2OJ.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-A277D2OJ.js';
-import { defineSmartArt } from './chunk-QBXYGKPB.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-4AARUBIF.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-4AARUBIF.js';
+import './chunk-WH3EGA3S.js';
+import { createHostBackstagePages, syncRibbonAddIns, withHostMenuItems } from './chunk-KSOHDEUI.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-KSOHDEUI.js';
+import { SmartArtTextPaneController, defineSmartArt, defineSmartArtPicker, safeColor, svgTile } from './chunk-P4FRKIPE.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-HGLCXNCT.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-HGLCXNCT.js';
 import './chunk-FHO7TEWA.js';
+import './chunk-CDAXY5KC.js';
+import './chunk-NDUD5JJB.js';
+import './chunk-KJMAVPQB.js';
 import { legacyThemeAliases, legacyThemeBridge, installOfficeUiThemeFor } from './chunk-T5ARELU2.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineOptionsDialog, rangeControl, defineDialog, optionsLabels, runKeyTips, assignKeyTips, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineContextMenu, defineColorGrid, defineCommentsPane, defineChartPicker } from './chunk-DQEV4EMA.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, defineChartFormatPane, defineOptionsDialog, defineDialog, optionsLabels, runKeyTips, assignKeyTips, chartSpaceFormatSource, userInterfaceSection, personalizeSection, optionText, unavailableControl, unavailableCategory, defineGallery, defineContextMenu, rangeControl, defineColorGrid, defineCommentsPane, defineChartPicker } from './chunk-WDOWQKKC.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
+import './chunk-VM6ZTKB3.js';
 import { definePresence } from './chunk-YZH2QS7J.js';
+import './chunk-FN7IF6M6.js';
 import { withTokens } from './chunk-QLHCGV4C.js';
 import './chunk-XL77FR4B.js';
-import { SPECIAL_CODES, FRACTION_CODES, translate, INSERT_CHART_TYPES, AUTOSUM_FUNCTIONS, ICON_ACCENTS, ICON_PATHS, normalizeEditorLocale, EXCEL_CAPABILITY_BACKSTAGE_PAGES, EXCEL_CAPABILITY_COMMANDS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, fontCommands, alignmentCommands, numberCommands, editBridge, FONT_SIZES, FONT_NAMES, style, activeRef, numberFormatOptions, selectionFormatting, DirtyState, createCommandRegistry, createDialogRegistry, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, editChart, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, isSingleCell, spanRange, selectionCellCount, addRange, TEMPLATES, createTemplateWorkbook, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, isMenuSeparator, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, cellCommands, editingCommands, pageLayoutCommands, pageBreakCommands, formulaCommands, dataCommands, whatIfCommands, contextualCommands, reviewTab, viewTab, helpTab, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, timelineSourceAt, slicerSourceAt, viewing, activeTable, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, activeSlicer, activeTimeline, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, evaluateRef, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, recentFunctions, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
+import { SPECIAL_CODES, FRACTION_CODES, translate, INSERT_CHART_TYPES, AUTOSUM_FUNCTIONS, ICON_ACCENTS, ICON_PATHS, normalizeEditorLocale, EXCEL_CAPABILITY_BACKSTAGE_PAGES, EXCEL_CAPABILITY_COMMANDS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, fontCommands, alignmentCommands, numberCommands, editBridge, FONT_SIZES, FONT_NAMES, style, activeRef, numberFormatOptions, selectionFormatting, DirtyState, createCommandRegistry, createDialogRegistry, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, target, activeSmartArt, isSingleCell, spanRange, selectionCellCount, addRange, TEMPLATES, createTemplateWorkbook, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, isMenuSeparator, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, cellCommands, editingCommands, pageLayoutCommands, pageBreakCommands, formulaCommands, dataCommands, whatIfCommands, contextualCommands, reviewTab, viewTab, helpTab, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, tableAt, timelineSourceAt, slicerSourceAt, viewing, activeTable, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, activeSlicer, activeTimeline, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, evaluateRef, editChart, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, recentFunctions, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, EXCEL_CAPABILITY_IDS, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
-import { createWorksheet, cellInputText, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, createGridMetrics, mergeAt, visibleCells, getCell, FUNCTION_CATALOG, closeParens, isFormulaText, parseCellInput, formatAddress, referenceTarget, navigate, anchorToPixelBox, renderChartSvg, selectionOfPeriods, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, selectionStats, formatSelectionStat, nameAtCaret, functionMatches, callAtCaret, acceptsReference, formatRange, splice, translateFormula, slicerStyleColors, slicerGeometry, timelineGeometry, TIMELINE_PERIOD_WIDTH, TIMELINE_METRICS, timelineView, slicerItems, selectionAfterClick, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, printRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, columnLabel, coloredReferences, syntaxParams, activeParam, THEME_SLOTS, pageBreakPreview, normalizeRange, currentRegion, autoFitColumnWidth, chartGradientStopTransparency, paginateWorksheet, resolveColor, DEFAULT_THEME, pageHeaderFooter, createPrintMergeIndex, cellView, pixelsToColumnWidth, renderHeaderFooterRuns, planBreakDrag, resizePrintArea, nextSheetName, sheetByName, pivotGroupableFields, pivotGroupableDateFields, pivotSubtotalFields, DEFAULT_COL_WIDTH, pageViewLayout, formatValue, isDateFormat, pictureAnchorAt, selectedSparklineGroups, pivotTableAt, validateDefinedName, usedRange, pivotAxisChoices, parseAddress, PIVOT_DATE_UNITS, PIVOT_SUBTOTAL_ORDER, parseRange, parseInputCell, displayText, styleAt, rangesIntersect, chartColorScheme, SLICER_STYLE_NAMES, slicerStyleLabel, slicerStylePreview, pageViewCellRect, pageOfCell, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, quoteSheetName, pivotRowFields, pivotValuesIndex, pivotSourceData, defaultFieldGroup, defaultDateGroup, dateGroupDays, pivotIsoToSerial, fieldSubtotalFunctions, printTitles, formatPrintTitleSpan, parsePrintTitleSpan, scenariosOf, PAGE_VIEW_GAP, pivotPageItems, pivotPageItemLabel, pivotSerialToIso, previewScenario, serialToDate, BUILTIN_NUMBER_FORMATS, validateTableName, pixelsToEmu, pageViewHit, resizedFrameAnchor, headerFooterKey, splitHeaderFooter, composeHeaderFooter } from 'ooxml-core/xlsx';
+import { createWorksheet, cellInputText, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, createGridMetrics, mergeAt, visibleCells, getCell, FUNCTION_CATALOG, closeParens, isFormulaText, parseCellInput, formatAddress, referenceTarget, navigate, anchorToPixelBox, createRefEvaluator, chartView, renderChartSvg, CHART_FILL_PARTS, selectionOfPeriods, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, selectionStats, formatSelectionStat, chartSpaceOf, pictureAnchorAt, nameAtCaret, functionMatches, callAtCaret, acceptsReference, formatRange, splice, translateFormula, slicerStyleColors, slicerGeometry, timelineGeometry, TIMELINE_PERIOD_WIDTH, TIMELINE_METRICS, timelineView, slicerItems, selectionAfterClick, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, printRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, chartColorScheme, chartBarSpacing, columnLabel, coloredReferences, syntaxParams, activeParam, THEME_SLOTS, pageBreakPreview, normalizeRange, currentRegion, autoFitColumnWidth, chartGradientStopTransparency, paginateWorksheet, resolveColor, DEFAULT_THEME, pageHeaderFooter, createPrintMergeIndex, cellView, pixelsToColumnWidth, renderHeaderFooterRuns, planBreakDrag, resizePrintArea, nextSheetName, sheetByName, pivotGroupableFields, pivotGroupableDateFields, pivotSubtotalFields, DEFAULT_COL_WIDTH, pageViewLayout, formatValue, isDateFormat, selectedSparklineGroups, pivotTableAt, validateDefinedName, usedRange, pivotAxisChoices, parseAddress, PIVOT_DATE_UNITS, PIVOT_SUBTOTAL_ORDER, parseRange, parseInputCell, displayText, styleAt, rangesIntersect, chartStylePresetOf, chartTakesQuickLayout, SLICER_STYLE_NAMES, slicerStyleLabel, slicerStylePreview, pageViewCellRect, pageOfCell, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, quoteSheetName, pivotRowFields, pivotValuesIndex, pivotSourceData, defaultFieldGroup, defaultDateGroup, dateGroupDays, pivotIsoToSerial, fieldSubtotalFunctions, printTitles, formatPrintTitleSpan, parsePrintTitleSpan, scenariosOf, PAGE_VIEW_GAP, pivotPageItems, pivotPageItemLabel, pivotSerialToIso, previewScenario, serialToDate, BUILTIN_NUMBER_FORMATS, validateTableName, pixelsToEmu, pageViewHit, resizedFrameAnchor, headerFooterKey, splitHeaderFooter, composeHeaderFooter } from 'ooxml-core/xlsx';
 import { isCapabilityEnabled, capabilityHiddenActions, saveToStorage, documentSaveMeta, withoutHiddenEntries } from 'ooxml-core/embedding';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
-import { resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
+import { approximateDiagramDrawingFromNodes, DIAGRAM_INSERT_CATEGORIES, DIAGRAM_INSERT_PRESETS, RECT_GRADIENT_DIRECTIONS, OFFICE_GRADIENT_PRESETS, officeGradientPresetId, officeGradientPresetFill, resolveDrawingColor, drawingColorBrightness, drawingColorCss, rectGradientDirection, DIAGRAM_DESIGN_COMMANDS, DIAGRAM_ADD_SHAPE_LABEL, DIAGRAM_DESIGN_GROUPS, DIAGRAM_ADD_SHAPE_COMMANDS } from 'ooxml-core/diagram';
+import { parseChartFormatTargetKey, resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_STYLE_PRESETS, CHART_COLOR_PALETTES, CHART_QUICK_LAYOUTS, 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';
 import { applyResize, applyDragDelta } from 'ooxml-core/geometry';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/shell.css?raw
@@ -39,7 +44,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, var(--office-accent-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, var(--office-accent-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: var(--office-font-size-md, 14px)/var(--office-line-height, 1.4)\n		var(--xve-font, var(--office-font, system-ui, sans-serif));\n}\n/* File > Options > Customize Ribbon, shown in the shared Options dialog. */\n.xve-options-note {\n	margin: 0 0 8px;\n	color: var(--muted);\n	font-size: 11px;\n}\n.xve-options-action {\n	margin: 0 0 8px;\n	padding: 6px 11px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: 12px;\n	cursor: pointer;\n}\n.xve-options h3 {\n	margin: 14px 0 4px;\n	padding-bottom: 2px;\n	border-bottom: 1px solid var(--line);\n	color: var(--muted);\n	font-size: 10px;\n	font-weight: 700;\n	letter-spacing: 0.04em;\n	text-transform: uppercase;\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: 11px;\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: 12px;\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.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";
+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-pane .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-pane .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 .xve-field:first-of-type {\n	margin-top: 0;\n}\n.xve-chart-series-pane .xve-field:has(select),\n.xve-chart-series-pane .xve-field:has(.xve-chart-series-color),\n.xve-chart-series-pane .xve-field:has(office-ui-gallery) {\n	grid-template-columns: 1fr minmax(100px, 1fr);\n}\n.xve-chart-series-pane 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/* The shared SmartArt text pane, beside the grid while a SmartArt graphic is selected. */\n.xve-smartart-text-pane {\n	box-sizing: border-box;\n	flex: none;\n	align-self: flex-start;\n	width: 260px;\n	max-width: 40%;\n	margin: 8px;\n}\n.xve-smartart-text-pane[hidden] {\n	display: none;\n}\n.xve-cmd-dialog .xve-smartart-picker {\n	display: grid;\n	width: min(760px, 86vw);\n}\n";
 
 // src/xlsx/theme/styles.ts
 var themeTokenText = ":host{color-scheme:inherit;}" + legacyThemeAliases(":host", "--xve-", "--xlsx-theme-");
@@ -70,34 +75,34 @@ var DEFAULT_AUTHOR_NAME = "Author";
 function isXlsxEditorAttribute(name) {
   return XLSX_EDITOR_ATTRIBUTES.includes(name);
 }
-function applyAttribute(target36, name, value) {
+function applyAttribute(target37, name, value) {
   switch (name) {
     case "locale":
-      if (normalizeEditorLocale(value ?? "en") !== target36.locale) target36.locale = value ?? "en";
+      if (normalizeEditorLocale(value ?? "en") !== target37.locale) target37.locale = value ?? "en";
       return;
     case "read-only":
-      target36.readOnly = value !== null && value !== "false";
+      target37.readOnly = value !== null && value !== "false";
       return;
     case "file-name": {
       const next = value || DEFAULT_FILE_NAME;
-      if (next !== target36.fileName) target36.fileName = next;
+      if (next !== target37.fileName) target37.fileName = next;
       return;
     }
     case "author-name": {
       const next = value || DEFAULT_AUTHOR_NAME;
-      if (next !== target36.authorName) target36.authorName = next;
+      if (next !== target37.authorName) target37.authorName = next;
       return;
     }
     case "theme": {
       const next = normalizeThemeMode(value);
-      if (next !== target36.theme) target36.theme = next;
+      if (next !== target37.theme) target37.theme = next;
       return;
     }
     case "show-toolbar":
-      if (value !== "false" !== target36.showToolbar) target36.showToolbar = value !== "false";
+      if (value !== "false" !== target37.showToolbar) target37.showToolbar = value !== "false";
       return;
     case "show-formula-bar":
-      if (value !== "false" !== target36.showFormulaBar) target36.showFormulaBar = value !== "false";
+      if (value !== "false" !== target37.showFormulaBar) target37.showFormulaBar = value !== "false";
   }
 }
 function reflectAttribute(element, name, value) {
@@ -227,7 +232,7 @@ var runFile = (page, command, fileName) => () => {
 function customProperties(page, workbook) {
   const { doc, host, t } = page;
   const section = doc.createElement("section");
-  const render3 = () => {
+  const render2 = () => {
     section.replaceChildren(heading(page, t("Custom properties"), "h3"));
     const properties = workbook.properties.custom ?? [];
     for (const [index, property] of properties.entries()) {
@@ -266,7 +271,7 @@ function customProperties(page, workbook) {
           "custom",
           (workbook.properties.custom ?? []).filter((_, i) => i !== index)
         );
-        render3();
+        render2();
       });
       remove.disabled = host.ctx.readOnly();
       section.append(labelled(page, property.name, input), remove);
@@ -280,7 +285,7 @@ function customProperties(page, workbook) {
       const current = workbook.properties.custom ?? [];
       if (!key || current.some((p) => p.name.toLowerCase() === key.toLowerCase())) return;
       host.setProperty("custom", [...current, { name: key, type: "lpwstr", value: value.value }]);
-      render3();
+      render2();
     });
     add.disabled = host.ctx.readOnly();
     section.append(
@@ -289,7 +294,7 @@ function customProperties(page, workbook) {
       add
     );
   };
-  render3();
+  render2();
   return section;
 }
 
@@ -552,9 +557,9 @@ function printHtml(doc, html) {
   frame.setAttribute("sandbox", "allow-same-origin allow-modals");
   frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden";
   doc.body.append(frame);
-  const target36 = frame.contentWindow;
+  const target37 = frame.contentWindow;
   const frameDoc = frame.contentDocument;
-  if (!target36 || !frameDoc) {
+  if (!target37 || !frameDoc) {
     frame.remove();
     return;
   }
@@ -564,18 +569,18 @@ function printHtml(doc, html) {
   let safety;
   const cleanup = () => {
     if (safety !== void 0) clearTimeout(safety);
-    target36.removeEventListener("afterprint", cleanup);
+    target37.removeEventListener("afterprint", cleanup);
     frame.remove();
     if (pendingFrames.get(doc) === cleanup) pendingFrames.delete(doc);
   };
   pendingFrames.set(doc, cleanup);
-  target36.addEventListener("afterprint", cleanup);
+  target37.addEventListener("afterprint", cleanup);
   safety = setTimeout(cleanup, PRINT_FRAME_TIMEOUT_MS);
   setTimeout(() => {
     if (!frame.isConnected) return;
     try {
-      target36.focus();
-      target36.print();
+      target37.focus();
+      target37.print();
     } catch (error) {
       cleanup();
       console.error("xlsx-editor: printing failed", error);
@@ -1978,23 +1983,23 @@ var DISPLAY = {
 function formatKeys(spec, mac) {
   const parsed = parse(spec);
   const key = parsed.code ?? (spec.endsWith("+") ? "+" : spec.split("+").pop() ?? "");
-  const names2 = [
+  const names = [
     parsed.mod ? mac ? "Cmd" : "Ctrl" : "",
     parsed.alt ? mac ? "Option" : "Alt" : "",
     parsed.shift ? "Shift" : "",
     DISPLAY[key.toLowerCase()] ?? (key.length === 1 ? key.toUpperCase() : key)
   ];
-  return names2.filter(Boolean).join("+");
+  return names.filter(Boolean).join("+");
 }
 var displayKeys = (shortcut, mac) => shortcut.keys.filter((spec) => !spec.includes("code:")).map((spec) => formatKeys(spec, mac));
 function findShortcut(event, mac) {
   return SHORTCUTS.find((shortcut) => shortcut.keys.some((spec) => matchesKeys(event, spec, mac)));
 }
 function inTextField(event) {
-  const target36 = event.composedPath()[0];
-  if (!(target36 instanceof Element)) return false;
-  if (target36.closest(".xve-grid-host")) return false;
-  return target36.matches(
+  const target37 = event.composedPath()[0];
+  if (!(target37 instanceof Element)) return false;
+  if (target37.closest(".xve-grid-host")) return false;
+  return target37.matches(
     'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, [contenteditable=""], [contenteditable="true"]'
   );
 }
@@ -2164,11 +2169,11 @@ function alignmentTab(init) {
       const alignment = patch();
       return Object.keys(alignment).length ? { alignment } : {};
     },
-    apply: (target36) => {
+    apply: (target37) => {
       if (!changed.has("merge") || merge.input.checked === merged) return;
-      for (const range2 of target36.ranges)
-        if (merge.input.checked) target36.session.merge(target36.sheet, range2, "merge");
-        else target36.session.unmerge(target36.sheet, range2);
+      for (const range2 of target37.ranges)
+        if (merge.input.checked) target37.session.merge(target37.sheet, range2, "merge");
+        else target37.session.unmerge(target37.sheet, range2);
     },
     focus: () => horizontal.focus()
   };
@@ -3258,10 +3263,10 @@ function openGoTo(ctx) {
     (name) => reference.value = name,
     () => confirm2?.()
   );
-  const names2 = (workbook?.definedNames ?? []).filter(
+  const names = (workbook?.definedNames ?? []).filter(
     (n) => !n.hidden && !n.name.startsWith("_xlnm.")
   );
-  list.setItems(names2.map((n) => [n.name, n.name]));
+  list.setItems(names.map((n) => [n.name, n.name]));
   const special = button(ctx, "Special...");
   return showDialog(
     ctx,
@@ -3276,9 +3281,9 @@ function openGoTo(ctx) {
       buttons: [special],
       opened: () => reference.focus(),
       submit: () => {
-        const target36 = resolveReference(ctx, reference.value);
-        if (!target36) return invalid(ctx, reference, "Reference is not valid.");
-        selectOn(ctx, target36.sheet, target36.range);
+        const target37 = resolveReference(ctx, reference.value);
+        if (!target37) return invalid(ctx, reference, "Reference is not valid.");
+        selectOn(ctx, target37.sheet, target37.range);
         return reference.value.trim();
       }
     },
@@ -3464,15 +3469,15 @@ function openCreateNames(ctx) {
     opened: () => boxes[0]?.input.focus(),
     submit: () => {
       const chosen = boxes.filter((b) => b.input.checked).map((b) => b.edge);
-      const names2 = namesFromSelection(ctx, chosen);
-      if (!names2.length) {
+      const names = namesFromSelection(ctx, chosen);
+      if (!names.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 names2) t.session.setDefinedName(name);
+        for (const name of names) t.session.setDefinedName(name);
       });
-      return names2.length;
+      return names.length;
     }
   });
 }
@@ -4641,7 +4646,7 @@ function nameValue(ctx, name) {
     return { text: "#NAME?", error: true };
   }
 }
-var visibleNames = (names2) => names2.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
+var visibleNames = (names) => names.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
 function openNameManager(ctx) {
   const doc = ctx.host.ownerDocument;
   const filter = select(ctx, FILTERS, "all");
@@ -4658,7 +4663,7 @@ function openNameManager(ctx) {
     deleteButton.disabled = !editable;
     newButton.disabled = ctx.readOnly();
   };
-  const render3 = () => {
+  const render2 = () => {
     const workbook = ctx.workbook();
     table.replaceChildren();
     const head = table.createTHead().insertRow();
@@ -4669,9 +4674,9 @@ function openNameManager(ctx) {
       head.append(th);
     }
     const body = table.createTBody();
-    const names2 = visibleNames(workbook?.definedNames ?? []);
-    if (selected2 && !names2.includes(selected2)) selected2 = void 0;
-    for (const name of names2) {
+    const names = visibleNames(workbook?.definedNames ?? []);
+    if (selected2 && !names.includes(selected2)) selected2 = void 0;
+    for (const name of names) {
       const value = nameValue(ctx, name);
       const kind = filter.value;
       if (kind === "worksheet" && name.localSheet === void 0) continue;
@@ -4704,26 +4709,26 @@ function openNameManager(ctx) {
     }
     sync();
   };
-  filter.addEventListener("change", render3);
+  filter.addEventListener("change", render2);
   newButton.addEventListener("click", async () => {
     await ctx.dialogs.open("define-name");
-    render3();
+    render2();
   });
   editButton.addEventListener("click", async () => {
     if (!selected2) return;
     const props2 = { name: selected2.name };
     if (selected2.localSheet !== void 0) props2.localSheet = selected2.localSheet;
     await ctx.dialogs.open("define-name", props2);
-    render3();
+    render2();
   });
   deleteButton.addEventListener("click", () => {
     const session = ctx.session();
     if (!selected2 || !session || ctx.readOnly()) return;
     session.deleteDefinedName(selected2.name, selected2.localSheet);
     selected2 = void 0;
-    render3();
+    render2();
   });
-  render3();
+  render2();
   return showDialog(ctx, {
     name: "name-manager",
     heading: "Name Manager",
@@ -5555,7 +5560,7 @@ function cfManagerDialog(ctx) {
   const visible = () => entries.flatMap(
     (e, i) => scope.value === "sheet" || e.ranges.some((r) => t.ranges.some((s) => rangesIntersect(r, s))) ? [i] : []
   );
-  const render3 = () => {
+  const render2 = () => {
     appliesInputs.length = 0;
     const head = el(ctx, "tr");
     for (const key of ["Rule (applied in order shown)", "Format", "Applies to", "Stop If True"]) {
@@ -5576,7 +5581,7 @@ function cfManagerDialog(ctx) {
           return;
         }
         selected2 = i;
-        render3();
+        render2();
       });
       const desc = el(ctx, "td");
       desc.textContent = describeRule(ctx, entry.rule);
@@ -5631,7 +5636,7 @@ function cfManagerDialog(ctx) {
     const [entry] = entries.splice(selected2, 1);
     if (entry) entries.splice(to, 0, entry);
     selected2 = to;
-    render3();
+    render2();
   };
   const newRule = button(ctx, "New Rule...");
   const editRule = button(ctx, "Edit Rule...");
@@ -5645,7 +5650,7 @@ function cfManagerDialog(ctx) {
     if (!result) return;
     entries.unshift(result);
     selected2 = 0;
-    render3();
+    render2();
   });
   editRule.addEventListener("click", async () => {
     if (!commitRanges()) return;
@@ -5653,20 +5658,20 @@ function cfManagerDialog(ctx) {
     if (!entry) return;
     const result = await editRuleDialog(ctx, entry);
     if (result) entries[selected2] = result;
-    render3();
+    render2();
   });
   deleteRule.addEventListener("click", () => {
     if (selected2 < 0) return;
     entries.splice(selected2, 1);
     selected2 = Math.min(selected2, entries.length - 1);
-    render3();
+    render2();
   });
   duplicate.addEventListener("click", () => {
     if (!commitRanges()) return;
     const entry = entries[selected2];
     if (!entry) return;
     entries.splice(selected2, 0, structuredClone(entry));
-    render3();
+    render2();
   });
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -5678,9 +5683,9 @@ function cfManagerDialog(ctx) {
     if (next === void 0) return;
     event.preventDefault();
     selected2 = next;
-    render3();
+    render2();
   });
-  scope.addEventListener("change", render3);
+  scope.addEventListener("change", render2);
   const apply = () => {
     if (!commitRanges()) return false;
     const formats = unstageRules(entries);
@@ -5692,12 +5697,12 @@ function cfManagerDialog(ctx) {
         formats.forEach((format2, i) => t.session.replaceConditionalFormat(t.sheet, i, format2));
       });
     entries = stageRules(formats);
-    render3();
+    render2();
     return true;
   };
   const applyButton = button(ctx, "Apply");
   applyButton.addEventListener("click", () => void apply());
-  render3();
+  render2();
   return showDialog(ctx, {
     name: "cf-manager",
     heading: "Conditional Formatting Rules Manager",
@@ -6127,12 +6132,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 names2 = t.workbook.definedNames.filter((n) => !n.hidden && !n.name.startsWith("_xlnm.")).map((n) => [`name:${n.name}`, n.name]);
+  const names = 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 && names2.some(([, n]) => n === loc.ref);
+  const isName = !loc.sheet && names.some(([, n]) => n === loc.ref);
   const place2 = select(
     ctx,
-    [...sheets, ...names2],
+    [...sheets, ...names],
     isName ? `name:${loc.ref}` : loc.sheet ?? t.ws.name,
     true
   );
@@ -6238,7 +6243,7 @@ function sortDialog(ctx) {
     }
     return out;
   };
-  const render3 = () => {
+  const render2 = () => {
     list.replaceChildren(
       ...levels.map((level, i) => {
         level.element.setAttribute("aria-selected", String(i === selected2));
@@ -6267,11 +6272,11 @@ function sortDialog(ctx) {
     const level = { element, column, order };
     element.addEventListener("focusin", () => {
       selected2 = levels.indexOf(level);
-      render3();
+      render2();
     });
     levels.splice(at, 0, level);
     selected2 = at;
-    render3();
+    render2();
   };
   addLevel(
     t.active.col >= region.start.col && t.active.col <= region.end.col ? t.active.col : region.start.col,
@@ -6300,7 +6305,7 @@ function sortDialog(ctx) {
     if (levels.length <= 1) return;
     levels.splice(selected2, 1);
     selected2 = Math.max(0, Math.min(selected2, levels.length - 1));
-    render3();
+    render2();
   });
   copy.addEventListener("click", () => {
     const level = levels[selected2];
@@ -6312,7 +6317,7 @@ function sortDialog(ctx) {
     const [level] = levels.splice(selected2, 1);
     if (level) levels.splice(to, 0, level);
     selected2 = to;
-    render3();
+    render2();
   };
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -6582,14 +6587,14 @@ function registerSimpleDialogs(ctx) {
   d.register("use-in-formula", (c) => {
     const t = target(c);
     if (!t) return Promise.resolve(void 0);
-    const names2 = t.workbook.definedNames.filter(
+    const names = 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: names2.map((n) => [n.name, n.name]),
+      items: names.map((n) => [n.name, n.name]),
       apply: (name) => {
         const grid = c.grid();
         const cell = getCell(t.ws, t.active.row, t.active.col);
@@ -8695,12 +8700,12 @@ function openPivotFieldSettings(ctx) {
   const t = target(ctx);
   const pivot = t ? pivotTableAt(t.ws, t.active) : void 0;
   if (!t || !pivot) return Promise.resolve(void 0);
-  const names2 = pivotSubtotalFields(pivot);
-  if (!names2.length) return Promise.resolve(void 0);
+  const names = pivotSubtotalFields(pivot);
+  if (!names.length) return Promise.resolve(void 0);
   const chosen = select(
     ctx,
-    names2.map((name) => [name, name]),
-    names2[0],
+    names.map((name) => [name, name]),
+    names[0],
     true
   );
   const mode = radios(
@@ -9025,8 +9030,8 @@ function pivotFieldListControls(ctx, axis, initial, changed, initialFields = [])
     host,
     count: () => controls.length,
     /** Offers these source fields to every chooser, keeping the ones still available. */
-    load: (names2) => {
-      fields = names2;
+    load: (names) => {
+      fields = names;
       for (const entry of controls) load(entry.field);
     },
     /** Hides the whole group (and keeps its choices) while the second row field is empty. */
@@ -9119,8 +9124,8 @@ function pivotValueControls(ctx, initial, changed, initialFields = []) {
   return {
     host,
     count: () => controls.length,
-    load: (names2) => {
-      fields = names2;
+    load: (names) => {
+      fields = names;
       for (const row2 of controls) {
         const old = row2.field.value;
         const prefix = `${row2.aggregate.value[0].toUpperCase()}${row2.aggregate.value.slice(1)} of `;
@@ -9204,14 +9209,14 @@ function openPivotTable(ctx, settings = false) {
   const valuesPlacement = select(ctx, [["last", "After row fields"]], "last");
   let placementChoices = "";
   let placementWanted = pivot ? placementValue(pivot) : "last";
-  const placeValues = (names2) => {
-    const signature = names2.join("
");
+  const placeValues = (names) => {
+    const signature = names.join("
");
     if (signature === placementChoices) return;
     placementChoices = signature;
     const options = [
       ["first", ctx.t("Before row fields")],
-      ...names2.slice(0, -1).map(
-        (name, i) => names2.length === 2 ? ["between", ctx.t("Between row fields")] : [String(i + 1), ctx.t("After {field}", { field: name })]
+      ...names.slice(0, -1).map(
+        (name, i) => names.length === 2 ? ["between", ctx.t("Between row fields")] : [String(i + 1), ctx.t("After {field}", { field: name })]
       ),
       ["last", ctx.t("After row fields")]
     ];
@@ -9677,6 +9682,187 @@ function registerDialogs(ctx) {
   registerFormatCellsDialogs(ctx);
   registerRuleDialogs(ctx);
 }
+function chooseSmartArt(ctx) {
+  const doc = ctx.host.ownerDocument;
+  defineSmartArtPicker(doc.defaultView?.customElements);
+  const picker = doc.createElement("office-ui-smartart-picker");
+  picker.className = "xve-smartart-picker";
+  const t = (key) => ctx.t(key);
+  picker.labels = { categories: t("SmartArt categories"), layouts: t("SmartArt layouts") };
+  picker.categories = DIAGRAM_INSERT_CATEGORIES.map((category) => ({
+    id: category.id,
+    label: t(`smartart.category.${category.id}`),
+    description: t(`smartart.description.${category.id}`)
+  }));
+  picker.layouts = DIAGRAM_INSERT_PRESETS.map((preset) => ({
+    id: preset.layout,
+    category: preset.category,
+    label: t(`smartart.layout.${preset.layout}`),
+    family: preset.family
+  }));
+  picker.value = { layout: DIAGRAM_INSERT_PRESETS[0]?.layout ?? "", items: [] };
+  const chosen = () => DIAGRAM_INSERT_PRESETS.find((entry) => entry.layout === picker.value.layout);
+  return showDialog(
+    ctx,
+    {
+      name: "insert-smartart",
+      heading: "Choose a SmartArt Graphic",
+      wide: true,
+      body: picker,
+      opened: () => picker.shadowRoot?.querySelector('[role="option"][tabindex="0"]')?.focus(),
+      submit: chosen
+    },
+    (open) => picker.addEventListener("office-smartart-activate", () => {
+      const preset = chosen();
+      if (preset) open.element.querySelector(".xve-btn-primary")?.click();
+    })
+  );
+}
+
+// src/xlsx/smartart-controller.ts
+var DEFAULT_SIZE = { width: 480, height: 280 };
+var ICONS = {
+  addAfter: "smartArtAddShape",
+  addBefore: "smartArtAddShape",
+  addAbove: "smartArtAddShape",
+  addBelow: "smartArtAddShape",
+  textPane: "smartArtTextPane",
+  promote: "smartArtPromote",
+  demote: "smartArtDemote",
+  moveUp: "smartArtMoveUp",
+  moveDown: "smartArtMoveDown",
+  changeLayout: "smartArtLayout"
+};
+var smartArtCommandId = (key) => `smartart.${key}`;
+var controllers = /* @__PURE__ */ new WeakMap();
+var XlsxSmartArtController = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.text = new SmartArtTextPaneController(
+      ctx.host.ownerDocument,
+      {
+        nodes: () => activeSmartArt(ctx)?.smartArt.nodes,
+        edit: (edit) => {
+          const t = target(ctx);
+          const found = activeSmartArt(ctx);
+          if (!t || !found || ctx.readOnly()) return void 0;
+          const result = t.session.editSmartArt(t.sheet, found.index, edit);
+          return result.changed ? result.nodeId ?? "" : void 0;
+        },
+        setText: (id, text3) => {
+          const t = target(ctx);
+          const found = activeSmartArt(ctx);
+          if (t && found && !ctx.readOnly())
+            t.session.editSmartArt(t.sheet, found.index, { kind: "text", nodeId: id, text: text3 });
+        },
+        toggled: (open) => {
+          ctx.requestRender();
+          if (!open) ctx.grid()?.focus();
+        }
+      },
+      "xve-smartart-text-pane"
+    );
+    this.relocalize();
+  }
+  ctx;
+  text;
+  run(key) {
+    if (key === "textPane") return this.text.setOpen(!this.text.open);
+    if (key === "changeLayout") return void this.relayout();
+    this.text.runCommand(key);
+    this.ctx.grid()?.focus();
+  }
+  async definitions() {
+    return import('ooxml-core/diagram/builtin');
+  }
+  async layoutOf(preset) {
+    const builtin = await this.definitions();
+    const layoutId = builtin.builtinLayoutIdForPreset(preset.layout);
+    if (!layoutId) throw new Error("The SmartArt layouts could not be loaded.");
+    return { builtin, layoutId, layoutXml: builtin.loadBuiltinSmartArtLayoutXml(layoutId) };
+  }
+  async insert() {
+    const ctx = this.ctx;
+    const preset = await chooseSmartArt(ctx);
+    const t = target(ctx);
+    if (!preset || !t || ctx.readOnly()) return;
+    const { builtin, layoutId, layoutXml } = await this.layoutOf(preset);
+    const index = t.session.insertSmartArt(t.sheet, {
+      anchor: pictureAnchorAt(t.active, DEFAULT_SIZE.width, DEFAULT_SIZE.height),
+      layoutId,
+      family: preset.family,
+      layoutXml,
+      colorsId: builtin.BUILTIN_SMARTART_COLORS_ID,
+      colorsXml: builtin.BUILTIN_SMARTART_COLORS_XML,
+      quickStyleId: builtin.BUILTIN_SMARTART_QUICK_STYLE_ID,
+      quickStyleXml: builtin.BUILTIN_SMARTART_QUICK_STYLE_XML,
+      // Excel starts every shape empty, showing its "[Text]" placeholder.
+      items: preset.defaultItems.map(() => "")
+    });
+    ctx.selection.set({ drawing: index });
+    this.text.select(activeSmartArt(ctx)?.smartArt.nodes[0]?.id ?? null);
+    this.text.setOpen(true);
+  }
+  async relayout() {
+    const ctx = this.ctx;
+    const preset = await chooseSmartArt(ctx);
+    const t = target(ctx);
+    const found = activeSmartArt(ctx);
+    if (!preset || !t || !found || ctx.readOnly()) return;
+    const { layoutId, layoutXml } = await this.layoutOf(preset);
+    t.session.changeSmartArtLayout(t.sheet, found.index, {
+      layoutId,
+      family: preset.family,
+      layoutXml
+    });
+  }
+  refresh() {
+    this.text.sync();
+  }
+  relocalize() {
+    this.text.setLabels((key) => this.ctx.t(key));
+  }
+};
+function createSmartArtController(ctx) {
+  const controller = new XlsxSmartArtController(ctx);
+  controllers.set(ctx, controller);
+  return {
+    element: controller.text.pane,
+    refresh: () => controller.refresh(),
+    relocalize: () => controller.relocalize(),
+    /** A new workbook: the pane closes. */
+    reset: () => controller.text.reset()
+  };
+}
+function smartArtCommands() {
+  const design = DIAGRAM_DESIGN_COMMANDS.map(
+    (command) => editing({
+      id: smartArtCommandId(command.key),
+      label: command.label,
+      icon: icon(ICONS[command.key]),
+      lock: "objects",
+      enabled: (ctx) => !!activeSmartArt(ctx),
+      ...command.key === "textPane" ? { checked: (ctx) => controllers.get(ctx)?.text.open ?? false } : {},
+      run: (ctx) => controllers.get(ctx)?.run(command.key)
+    })
+  );
+  return [
+    ...design,
+    editing({
+      id: "insert.smartart",
+      label: "SmartArt",
+      icon: icon("smartArt"),
+      lock: "objects",
+      run: async (ctx) => {
+        try {
+          await controllers.get(ctx)?.insert();
+        } catch (error) {
+          ctx.toast(ctx.t(error instanceof Error ? error.message : String(error)), "error");
+        }
+      }
+    })
+  ];
+}
 var PIXELS_PER_INCH = 96;
 var inches = (px) => (px / PIXELS_PER_INCH).toFixed(2);
 function update(ctx, patch) {
@@ -9971,24 +10157,6 @@ var tableStyleGalleryItems = (ctx) => TABLE_STYLES.map((info) => ({
 }));
 var cellStyleGalleryItems = (ctx) => cellStyleItems(ctx.workbook()).map((item) => ({ ...item, label: ctx.t(item.label) }));
 
-// src/ribbon/svg-preview.ts
-function safeColor(color, fallback = "none") {
-  if (!color) {
-    return fallback;
-  }
-  const c = color.trim();
-  if (/^#[0-9a-f]{3,8}$/iu.test(c) || /^rgba?\([\d\s.,%]+\)$/iu.test(c) || c === "none") {
-    return c;
-  }
-  if (c === "transparent") {
-    return "none";
-  }
-  return fallback;
-}
-function svgTile(width, height, defs, body) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">${""}${body}</svg>`;
-}
-
 // src/ribbon/color-preview.ts
 var num = (value) => String(Math.round(value * 100) / 100);
 function swatchStripSvg(colors, size) {
@@ -9999,29 +10167,207 @@ function swatchStripSvg(colors, size) {
   return svgTile(size.width, size.height, "", body);
 }
 
-// src/xlsx/commands/chart-colors.ts
-function chartColorGallerySections(ctx) {
+// src/chart/gallery-tiles.ts
+function num2(value) {
+  return String(Math.round(value * 100) / 100);
+}
+var HEIGHTS = [0.55, 0.8, 0.4, 0.95, 0.7, 0.5];
+function columnChartTileSvg(colors, size) {
+  const series = colors.slice(0, 4);
+  const pad = 4;
+  const plotW = size.width - pad * 2;
+  const plotH = size.height - pad * 2;
+  const groupW = plotW / 3;
+  const barW = groupW * 0.8 / Math.max(series.length, 1);
+  const bars = [];
+  for (let g = 0; g < 3; g++) {
+    series.forEach((color, s) => {
+      const h2 = plotH * (HEIGHTS[(g + s * 2) % HEIGHTS.length] ?? 0.5);
+      const x = pad + g * groupW + groupW * 0.1 + s * barW;
+      bars.push(
+        `<rect x="${num2(x)}" y="${num2(pad + plotH - h2)}" width="${num2(barW * 0.9)}" height="${num2(h2)}" fill="${safeColor(color, "#808080")}"/>`
+      );
+    });
+  }
+  const axis = `<line x1="${pad}" y1="${num2(pad + plotH)}" x2="${num2(pad + plotW)}" y2="${num2(pad + plotH)}" stroke="#A6A6A6" stroke-width="0.75"/>`;
+  const bg = `<rect x="0" y="0" width="${size.width}" height="${size.height}" fill="#FFFFFF"/>`;
+  return svgTile(size.width, size.height, "", bg + bars.join("") + axis);
+}
+var INK = "#7F7F7F";
+var ACCENT = "#4472C4";
+function chartLayoutTileSvg(sketch, size) {
+  const parts = [
+    `<rect x="0" y="0" width="${size.width}" height="${size.height}" fill="#FFFFFF"/>`
+  ];
+  let top = 3;
+  let bottom = size.height - 3;
+  let left = 3;
+  let right = size.width - 3;
+  const bar = (x, y, w2, h2, color = INK) => parts.push(
+    `<rect x="${num2(x)}" y="${num2(y)}" width="${num2(w2)}" height="${num2(h2)}" fill="${color}"/>`
+  );
+  if (sketch.title) {
+    bar(size.width * 0.3, top, size.width * 0.4, 3);
+    top += 6;
+  }
+  if (sketch.legend === "t") {
+    bar(size.width * 0.35, top, size.width * 0.3, 2, ACCENT);
+    top += 5;
+  } else if (sketch.legend === "b" && !sketch.dataTable) {
+    bar(size.width * 0.35, bottom - 2, size.width * 0.3, 2, ACCENT);
+    bottom -= 5;
+  } else if (sketch.legend === "r") {
+    bar(right - 6, (top + bottom) / 2 - 5, 6, 10, ACCENT);
+    right -= 9;
+  } else if (sketch.legend === "l") {
+    bar(left, (top + bottom) / 2 - 5, 6, 10, ACCENT);
+    left += 9;
+  }
+  if (sketch.dataTable) {
+    const rows = 3;
+    for (let r = 0; r < rows; r++) {
+      parts.push(
+        `<rect x="${num2(left + 4)}" y="${num2(bottom - (rows - r) * 3)}" width="${num2(right - left - 4)}" height="3" fill="none" stroke="${INK}" stroke-width="0.5"/>`
+      );
+    }
+    bottom -= rows * 3 + 2;
+  }
+  if (sketch.catAxisTitle) {
+    bar((left + right) / 2 - 6, bottom - 2, 12, 2);
+    bottom -= 4;
+  }
+  if (sketch.valAxisTitle) {
+    bar(left, (top + bottom) / 2 - 6, 2, 12);
+    left += 4;
+  }
+  if (sketch.valueAxis) {
+    left += 3;
+  }
+  const plotH = bottom - top;
+  if (sketch.majorGridlines || sketch.minorGridlines) {
+    const lines = sketch.minorGridlines ? 6 : 3;
+    for (let i = 0; i < lines; i++) {
+      const y = top + plotH * i / lines;
+      parts.push(
+        `<line x1="${num2(left)}" y1="${num2(y)}" x2="${num2(right)}" y2="${num2(y)}" stroke="#D9D9D9" stroke-width="${sketch.minorGridlines && i % 2 ? "0.4" : "0.7"}"/>`
+      );
+    }
+  }
+  const heights = [0.5, 0.8, 0.65];
+  const w = (right - left) / 7;
+  heights.forEach((h2, i) => {
+    const x = left + w * (1 + i * 2);
+    bar(x, bottom - plotH * h2, w, plotH * h2, ACCENT);
+    if (sketch.dataLabels) {
+      bar(x + w * 0.2, bottom - plotH * h2 - 2.5, w * 0.6, 1.5);
+    }
+  });
+  parts.push(
+    `<line x1="${num2(left)}" y1="${num2(bottom)}" x2="${num2(right)}" y2="${num2(bottom)}" stroke="${INK}" stroke-width="0.6"/>`
+  );
+  return svgTile(size.width, size.height, "", parts.join(""));
+}
+
+// src/chart/design-galleries.ts
+var CHART_STYLE_TILE = { width: 60, height: 44 };
+var CHART_COLOR_TILE = { width: 96, height: 14 };
+var CHART_LAYOUT_TILE = { width: 56, height: 44 };
+function chartStyleGallerySection(appliedId) {
+  return {
+    id: "styles",
+    columns: 6,
+    tileWidth: CHART_STYLE_TILE.width,
+    tileHeight: CHART_STYLE_TILE.height,
+    items: CHART_STYLE_PRESETS.map((preset) => ({
+      id: preset.id,
+      label: preset.label,
+      labelTemplate: preset.label,
+      previewSvg: columnChartTileSvg(preset.colors(), CHART_STYLE_TILE),
+      applied: preset.id === appliedId
+    }))
+  };
+}
+var COLOR_GROUPS = [
+  ["colorful", "Colorful", "Colorful Palette {n}"],
+  ["monochromatic", "Monochromatic", "Monochromatic Palette {n}"]
+];
+function colorItem(palette, scheme, template, appliedId) {
+  const count = palette.group === "colorful" ? Math.max(palette.base.length, 6) : 6;
+  return {
+    id: String(palette.id),
+    label: template.replace("{n}", String(palette.index)),
+    labelTemplate: template,
+    labelParams: { n: palette.index },
+    previewSvg: swatchStripSvg(chartPaletteColors(palette, count, scheme), CHART_COLOR_TILE),
+    applied: palette.id === appliedId
+  };
+}
+function chartColorGallerySections(scheme, appliedId) {
+  return COLOR_GROUPS.map(([group, title, template]) => ({
+    id: group,
+    title,
+    columns: 1,
+    tileWidth: CHART_COLOR_TILE.width,
+    tileHeight: CHART_COLOR_TILE.height,
+    items: CHART_COLOR_PALETTES.filter((palette) => palette.group === group).map(
+      (palette) => colorItem(palette, scheme, template, appliedId)
+    )
+  }));
+}
+function chartQuickLayoutGallerySection(appliedN) {
+  return {
+    id: "layouts",
+    columns: 4,
+    tileWidth: CHART_LAYOUT_TILE.width,
+    tileHeight: CHART_LAYOUT_TILE.height,
+    items: CHART_QUICK_LAYOUTS.map((layout) => ({
+      id: `layout${layout.n}`,
+      label: `Layout ${layout.n}`,
+      labelTemplate: "Layout {n}",
+      labelParams: { n: layout.n },
+      previewSvg: chartLayoutTileSvg(layout, CHART_LAYOUT_TILE),
+      applied: layout.n === appliedN
+    }))
+  };
+}
+
+// src/xlsx/commands/chart-design.ts
+function translated(ctx, section) {
+  return {
+    ...section.title === void 0 ? {} : { title: ctx.t(section.title) },
+    columns: section.columns,
+    tileWidth: section.tileWidth,
+    tileHeight: section.tileHeight,
+    items: section.items.map((item) => ({
+      id: item.id,
+      label: ctx.t(item.labelTemplate, item.labelParams),
+      preview: item.previewSvg,
+      applied: item.applied
+    }))
+  };
+}
+function chartColorGallerySections2(ctx) {
   const workbook = ctx.workbook();
   const selectedChart = activeChart(ctx);
   if (!workbook || !selectedChart) return [];
   const scheme = chartColorScheme(workbook.theme);
-  const selected2 = selectedChart.chart.colorPalette ?? 10;
-  return ["colorful", "monochromatic"].map((group) => ({
-    title: ctx.t(group === "colorful" ? "Colorful" : "Monochromatic"),
-    columns: 1,
-    tileWidth: 96,
-    tileHeight: 14,
-    items: CHART_COLOR_PALETTES.filter((palette) => palette.group === group).map((palette) => ({
-      id: String(palette.id),
-      label: ctx.t(group === "colorful" ? "Colorful Palette {n}" : "Monochromatic Palette {n}", {
-        n: palette.index
-      }),
-      preview: swatchStripSvg(chartPaletteColors(palette, 6, scheme), { width: 96, height: 14 }),
-      applied: selected2 === palette.id
-    }))
-  }));
+  return chartColorGallerySections(scheme, selectedChart.chart.colorPalette ?? 10).map(
+    (section) => translated(ctx, section)
+  );
+}
+var chartColorGalleryItems = (ctx) => chartColorGallerySections2(ctx).flatMap((section) => section.items);
+function chartStyleGallerySections(ctx) {
+  const selectedChart = activeChart(ctx);
+  if (!selectedChart) return [];
+  return [translated(ctx, chartStyleGallerySection(chartStylePresetOf(selectedChart.chart)))];
 }
-var chartColorGalleryItems = (ctx) => chartColorGallerySections(ctx).flatMap((section) => section.items);
+var chartStyleGalleryItems = (ctx) => chartStyleGallerySections(ctx).flatMap((section) => section.items);
+function chartQuickLayoutGallerySections(ctx) {
+  const selectedChart = activeChart(ctx);
+  if (!selectedChart || !chartTakesQuickLayout(selectedChart.chart)) return [];
+  return [translated(ctx, chartQuickLayoutGallerySection(selectedChart.chart.quickLayout))];
+}
+var chartQuickLayoutGalleryItems = (ctx) => chartQuickLayoutGallerySections(ctx).flatMap((section) => section.items);
 
 // src/xlsx/ribbon/tabs/contextual.ts
 function tableDesignTab() {
@@ -10189,6 +10535,43 @@ function timelineTab() {
     ]
   };
 }
+function smartArtDesignTab() {
+  const small = (key) => ({
+    kind: "button",
+    command: smartArtCommandId(key),
+    showLabel: true
+  });
+  return {
+    id: "smartart-design",
+    label: "SmartArt Design",
+    contextual: (ctx) => !!activeSmartArt(ctx),
+    groups: [
+      {
+        id: "create-graphic",
+        label: DIAGRAM_DESIGN_GROUPS.create,
+        controls: [
+          {
+            kind: "menu",
+            label: DIAGRAM_ADD_SHAPE_LABEL,
+            icon: "xl-smartArtAddShape",
+            size: "large",
+            items: DIAGRAM_ADD_SHAPE_COMMANDS.map((command) => ({
+              command: smartArtCommandId(command.key)
+            }))
+          },
+          { kind: "toggle", command: smartArtCommandId("textPane"), size: "large" },
+          { kind: "stack", controls: [small("promote"), small("demote")] },
+          { kind: "stack", controls: [small("moveUp"), small("moveDown")] }
+        ]
+      },
+      {
+        id: "layouts",
+        label: DIAGRAM_DESIGN_GROUPS.layouts,
+        controls: [{ kind: "button", command: smartArtCommandId("changeLayout"), size: "large" }]
+      }
+    ]
+  };
+}
 function chartDesignTab() {
   return {
     id: "chart-design",
@@ -10199,11 +10582,17 @@ function chartDesignTab() {
         id: "chart-styles",
         label: "Chart Styles",
         controls: [
+          {
+            kind: "gallery",
+            command: "chart.styles",
+            items: chartStyleGalleryItems,
+            sections: chartStyleGallerySections
+          },
           {
             kind: "gallery",
             command: "chart.colors",
             items: chartColorGalleryItems,
-            sections: chartColorGallerySections
+            sections: chartColorGallerySections2
           }
         ]
       },
@@ -10211,6 +10600,12 @@ function chartDesignTab() {
         id: "chart-layouts",
         label: "Chart Layouts",
         controls: [
+          {
+            kind: "gallery",
+            command: "chart.quick-layout",
+            items: chartQuickLayoutGalleryItems,
+            sections: chartQuickLayoutGallerySections
+          },
           { kind: "button", command: "chart.title", size: "large" },
           { kind: "toggle", command: "chart.legend", size: "large" }
         ]
@@ -10766,7 +11161,10 @@ function insertTab() {
       {
         id: "illustrations",
         label: "Illustrations",
-        controls: [{ kind: "button", command: "insert.pictures", size: "large" }]
+        controls: [
+          { kind: "button", command: "insert.pictures", size: "large" },
+          { kind: "button", command: "insert.smartart", size: "large" }
+        ]
       },
       {
         id: "charts",
@@ -10948,6 +11346,7 @@ function commandTabs() {
     helpTab(),
     tableDesignTab(),
     chartDesignTab(),
+    smartArtDesignTab(),
     slicerTab(),
     timelineTab()
   ];
@@ -11244,6 +11643,35 @@ function backgroundFillBinding(selected2) {
     preview: (chart, patch) => chartWithElementFills(chart, patch.elementFills ?? {})
   };
 }
+var XLSX_CHART_FILL_SLOT = "fill";
+var formatsSeries = (chart) => chart.series.length > 0;
+function workbookChartTheme(workbook) {
+  const scheme = chartColorScheme(workbook.theme);
+  return { scheme: (name) => scheme[name] };
+}
+var FILL_PARTS = ["chartArea", "plotArea", "title", "legend", "series"];
+var xlsxFillsTarget = (target37) => FILL_PARTS.includes(target37.kind);
+function xlsxChartFormatSource(chart, space, theme, target37) {
+  const source = chartSpaceFormatSource(space, { theme });
+  const spacing = chartBarSpacing(chart);
+  return {
+    ...source,
+    targets: chart.title ? source.targets : source.targets.filter((option) => option.target.kind !== "title"),
+    seriesOptions: (seriesIndex) => {
+      const view = source.seriesOptions?.(seriesIndex);
+      if (!view || view.chartType !== "bar") return view;
+      return {
+        ...view,
+        gapWidth: view.gapWidth ?? spacing.barGapWidth,
+        overlap: view.overlap ?? spacing.barOverlap,
+        sliders: true
+      };
+    },
+    ...target37 && xlsxFillsTarget(target37) ? { slots: { fill: XLSX_CHART_FILL_SLOT } } : {},
+    flat: true,
+    picker: { key: "chartFormat.chartElement", fallback: "Chart element" }
+  };
+}
 function createNumberRange(input, options) {
   const element = input.ownerDocument.createElement("div");
   let original;
@@ -11644,10 +12072,10 @@ function createGradientTypeField(ctx, onPick) {
   };
 }
 function createChartGradientPreview(root, drawing, series, gradient) {
-  const target36 = typeof series === "number" ? `s${series}` : series;
+  const target37 = typeof series === "number" ? `s${series}` : series;
   const nodes = Array.from(
     root.querySelectorAll(
-      `.xg-obj[data-index="${drawing}"] :is(linearGradient,radialGradient,pattern)[id$="-${target36}"]`
+      `.xg-obj[data-index="${drawing}"] :is(linearGradient,radialGradient,pattern)[id$="-${target37}"]`
     )
   );
   const originals = nodes.map((node) => ({
@@ -12073,232 +12501,69 @@ function createSeriesFill(ctx, selected2, binding = seriesFillBinding(selected2)
   return { element, refresh };
 }
 
-// src/xlsx/chart-series-pane.ts
-function chartSeriesCommand() {
+// src/xlsx/chart-format-pane.ts
+function chartAreaCommand() {
   return editing({
-    id: "chart.format-series",
-    label: "Format Data Series",
+    id: "chart.format-area",
+    label: "Format Chart Area",
     icon: icon("chartColumn"),
     lock: "objects",
     enabled: (ctx) => {
-      const type = activeChart(ctx)?.chart.chartType;
-      return type === "column" || type === "bar";
+      const chart = activeChart(ctx)?.chart;
+      return !!chart && !chart.editBlocked;
     },
-    run: (ctx, arg) => void ctx.dialogs.open("format-chart-series", arg)
-  });
-}
-function createChartSeriesPane(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 close = () => {
-    fills.refresh(void 0, void 0);
-    element.hidden = true;
-    ctx.grid()?.focus();
-  };
-  closeButton.addEventListener("click", close);
-  const body = el(ctx, "div", "xve-chart-series-body");
-  let selected2 = 0;
-  let shownWorkbook;
-  let shownSheet = -1;
-  let shownChart = -1;
-  const seriesSelect = select(ctx, []);
-  const seriesField = field(ctx, "Series", seriesSelect);
-  const fills = createSeriesFill(ctx, () => selected2);
-  seriesSelect.addEventListener("change", () => {
-    selected2 = Number(seriesSelect.value);
-    refresh();
-  });
-  const section = el(ctx, "h3");
-  const overlap = numberInput(ctx, 0, -100, 100);
-  const gap = numberInput(ctx, 150, 0, 500);
-  const overlapField = field(ctx, "Series Overlap", overlap);
-  const gapField = field(ctx, "Gap Width", gap);
-  const overlapRange = el(ctx, "div", "xve-chart-series-range");
-  const gapRange = el(ctx, "div", "xve-chart-series-range");
-  const ranges = [
-    [overlapRange, overlap, "Series Overlap"],
-    [gapRange, gap, "Gap Width"]
-  ];
-  const paintRange = (host, input, key) => {
-    const value = input.valueAsNumber;
-    render(
-      rangeControl({
-        label: ctx.t(key),
-        value,
-        valueText: `${value}%`,
-        min: Number(input.min),
-        max: Number(input.max),
-        disabled: input.disabled,
-        onInput: (next) => {
-          if (!ctx.commands.isEnabled("chart.format-series")) return refresh();
-          input.value = String(next);
-          paintRange(host, input, key);
-        },
-        onChange: () => input.dispatchEvent(new Event("change"))
-      }),
-      host
-    );
-  };
-  for (const row2 of [overlapField, gapField]) {
-    const unit = el(ctx, "span");
-    unit.textContent = "%";
-    row2.append(unit);
-  }
-  const empty = el(ctx, "p", "xve-note");
-  header.append(title, closeButton);
-  body.append(seriesField, section, overlapField, overlapRange, gapField, gapRange, fills.element);
-  element.append(header, body, empty);
-  element.addEventListener("keydown", (event) => {
-    if (event.key !== "Escape") return;
-    event.preventDefault();
-    event.stopPropagation();
-    close();
-  });
-  const relocalize = () => {
-    title.textContent = ctx.t("Format Data Series");
-    element.setAttribute("aria-label", title.textContent);
-    closeButton.setAttribute("aria-label", ctx.t("Close"));
-    section.textContent = ctx.t("Series Options");
-    seriesField.querySelector("span").textContent = ctx.t("Series");
-    seriesSelect.setAttribute("aria-label", ctx.t("Series"));
-    empty.textContent = ctx.t("Select a bar or column chart to format its series.");
-    for (const [row2, input, key] of [
-      [overlapField, overlap, "Series Overlap"],
-      [gapField, gap, "Gap Width"]
-    ]) {
-      row2.querySelector("span").textContent = ctx.t(key);
-      input.setAttribute("aria-label", ctx.t(key));
-    }
-    for (const [host, input, key] of ranges) paintRange(host, input, key);
-    refresh();
-  };
-  const refresh = () => {
-    if (element.hidden) return;
-    const found = activeChart(ctx);
-    const chart = found?.chart;
-    const workbook = ctx.workbook();
-    if (workbook !== shownWorkbook || shownSheet !== ctx.activeSheet() || shownChart !== found?.index)
-      selected2 = 0;
-    shownWorkbook = workbook;
-    shownSheet = ctx.activeSheet();
-    shownChart = found?.index ?? -1;
-    if (!chart?.series[selected2]) selected2 = 0;
-    const model = workbook && chart ? chartView(
-      workbook,
-      ctx.activeSheet(),
-      chart,
-      createRefEvaluator(workbook, ctx.session()?.calc, { sheet: ctx.activeSheet() })
-    ) : void 0;
-    seriesSelect.replaceChildren(
-      ...(model?.series ?? []).map((series, index) => {
-        const option = el(ctx, "option");
-        option.value = String(index);
-        option.textContent = series.name;
-        return option;
-      })
-    );
-    seriesSelect.value = String(selected2);
-    seriesSelect.disabled = !chart?.series.length || !ctx.commands.isEnabled("chart.format-series");
-    fills.refresh(chart, model);
-    const supported = chart?.chartType === "bar" || chart?.chartType === "column";
-    body.hidden = !supported;
-    empty.hidden = supported;
-    const spacing = chartBarSpacing(chart ?? {});
-    gap.value = String(spacing.barGapWidth);
-    overlap.value = String(spacing.barOverlap);
-    gap.disabled = overlap.disabled = !ctx.commands.isEnabled("chart.format-series");
-    for (const [host, input, key] of ranges) paintRange(host, input, key);
-  };
-  for (const [input, property] of [
-    [gap, "barGapWidth"],
-    [overlap, "barOverlap"]
-  ]) {
-    input.addEventListener("change", () => {
-      if (!ctx.commands.isEnabled("chart.format-series")) return refresh();
-      const value = input.valueAsNumber;
-      if (!Number.isInteger(value) || !input.checkValidity()) {
-        ctx.toast(
-          ctx.t("Enter a whole number from {min} to {max}.", { min: input.min, max: input.max }),
-          "warning"
-        );
-        refresh();
-        return;
-      }
-      if (activeChart(ctx)?.chart[property] !== value)
-        editChart(ctx, () => ({ [property]: value }));
-      refresh();
-    });
-  }
-  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]) {
-      selected2 = props2;
-      refresh();
-    }
-    overlap.focus();
+    run: (ctx, arg) => void ctx.dialogs.open("format-chart-area", arg)
   });
-  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() {
+function chartSeriesCommand() {
   return editing({
-    id: "chart.format-area",
-    label: "Format Chart Area",
+    id: "chart.format-series",
+    label: "Format Data Series",
     icon: icon("chartColumn"),
     lock: "objects",
-    enabled: (ctx) => !!activeChart(ctx),
-    run: (ctx, arg) => void ctx.dialogs.open("format-chart-area", arg)
+    enabled: (ctx) => {
+      const chart = activeChart(ctx)?.chart;
+      return !!chart && !chart.editBlocked && formatsSeries(chart);
+    },
+    run: (ctx, arg) => void ctx.dialogs.open("format-chart-series", arg)
   });
 }
-function createChartAreaPane(ctx, onOpen) {
-  const element = el(ctx, "aside", "xve-chart-series-pane");
+var BACKGROUNDS = ["chartArea", "plotArea", "title", "legend"];
+var englishKey = (fallback) => fallback.replace(/\{\{(\w+)\}\}/gu, "{$1}");
+var SPACING = {
+  "series.gapWidth": [0, 500],
+  "series.overlap": [-100, 100],
+  "series.firstSliceAngle": [0, 360],
+  "series.holeSize": [10, 90]
+};
+function createChartFormatPane(ctx) {
+  const doc = ctx.host.ownerDocument;
+  defineChartFormatPane(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-chart-format-pane");
+  element.className = "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 selected2 = "chartArea";
-  const target36 = select(ctx, []);
-  const targetField = field(ctx, "Chart element", target36);
-  const fills = createSeriesFill(
+  let target37 = "chartArea";
+  let seriesIndex = 0;
+  let part = "chartArea";
+  const seriesFill = createSeriesFill(ctx, () => seriesIndex);
+  const backgroundFill = createSeriesFill(
     ctx,
     () => 0,
-    backgroundFillBinding(() => selected2)
+    backgroundFillBinding(() => part)
   );
+  for (const fill of [seriesFill, backgroundFill]) {
+    fill.element.slot = XLSX_CHART_FILL_SLOT;
+    fill.element.querySelector("h3")?.setAttribute("hidden", "");
+  }
+  const parsed = () => parseChartFormatTargetKey(target37);
+  const isSeries = () => parsed()?.kind === "series";
+  const commandId = () => isSeries() ? "chart.format-series" : "chart.format-area";
   const close = () => {
-    fills.refresh(void 0, void 0);
+    seriesFill.refresh(void 0, void 0);
+    backgroundFill.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();
@@ -12306,50 +12571,84 @@ function createChartAreaPane(ctx, onOpen) {
       close();
       return;
     }
-    const available = (part) => part === "title" ? !!found.chart.title : part === "legend" ? found.chart.showLegend : true;
-    for (const option of target36.options)
-      option.disabled = !available(option.value);
-    if (!available(selected2)) selected2 = "chartArea";
-    title.textContent = ctx.t(names[selected2][1]);
-    element.setAttribute("aria-label", title.textContent);
-    target36.value = selected2;
-    target36.disabled = !ctx.commands.isEnabled("chart.format-area");
-    fills.refresh(
+    const view = chartView(
+      book,
+      ctx.activeSheet(),
       found.chart,
-      chartView(
-        book,
-        ctx.activeSheet(),
-        found.chart,
-        createRefEvaluator(book, ctx.session()?.calc, { sheet: ctx.activeSheet() })
-      )
+      createRefEvaluator(book, ctx.session()?.calc, { sheet: ctx.activeSheet() })
     );
+    const space = chartSpaceOf(book, found.chart);
+    const theme = workbookChartTheme(book);
+    const listed = xlsxChartFormatSource(found.chart, space, theme, void 0);
+    if (!listed.targets.some((option) => option.key === target37)) target37 = "chartArea";
+    const selected2 = parsed();
+    seriesIndex = selected2?.kind === "series" ? selected2.seriesIndex : 0;
+    part = BACKGROUNDS.includes(target37) ? target37 : "chartArea";
+    const slotted = selected2 !== void 0 && xlsxFillsTarget(selected2);
+    const [active2, idle] = isSeries() ? [seriesFill, backgroundFill] : [backgroundFill, seriesFill];
+    idle.refresh(void 0, void 0);
+    idle.element.remove();
+    if (slotted) {
+      if (active2.element.parentNode !== element) element.append(active2.element);
+      active2.refresh(found.chart, view);
+    } else {
+      active2.refresh(void 0, void 0);
+      active2.element.remove();
+    }
+    element.source = xlsxChartFormatSource(found.chart, space, theme, selected2);
+    element.target = target37;
+    element.disabled = !ctx.commands.isEnabled(commandId());
   };
-  const relocalize = () => {
-    closeButton.setAttribute("aria-label", ctx.t("Close"));
-    targetField.querySelector("span").textContent = ctx.t("Chart element");
-    target36.setAttribute("aria-label", ctx.t("Chart element"));
-    target36.replaceChildren(
-      ...CHART_FILL_PARTS.map((part) => {
-        const option = el(ctx, "option");
-        option.value = part;
-        option.textContent = ctx.t(names[part][0]);
-        return option;
-      })
-    );
+  element.addEventListener("office-chart-format-target", (event) => {
+    target37 = event.detail.target;
     refresh();
-  };
-  target36.addEventListener("change", () => {
-    if (!target36.disabled && CHART_FILL_PARTS.includes(target36.value))
-      selected2 = target36.value;
+  });
+  element.addEventListener("office-chart-format-close", close);
+  element.addEventListener("office-chart-format-edit", (event) => {
+    const { field: field2, intent } = event.detail;
+    if (!ctx.commands.isEnabled(commandId())) return refresh();
+    const range2 = SPACING[field2];
+    const found = activeChart(ctx);
+    if (!intent || !found) {
+      if (range2)
+        ctx.toast(
+          ctx.t("Enter a whole number from {min} to {max}.", { min: range2[0], max: range2[1] }),
+          "warning"
+        );
+      return refresh();
+    }
+    try {
+      ctx.session()?.editChart(ctx.activeSheet(), found.index, intent);
+    } catch (error) {
+      if (!(error instanceof RangeError)) throw error;
+      ctx.toast(ctx.t("This chart element cannot take that setting."), "warning");
+    }
     refresh();
   });
-  ctx.dialogs.register("format-chart-area", async (_ctx, part) => {
-    if (!ctx.commands.isEnabled("chart.format-area")) return;
-    onOpen();
-    selected2 = CHART_FILL_PARTS.includes(part) ? part : "chartArea";
+  const relocalize = () => {
+    element.locale = ctx.locale();
+    element.translateLabel = (key, params, fallback) => {
+      const english = englishKey(fallback ?? key);
+      const own = ctx.t(english, params);
+      return own === english ? key : own;
+    };
+    refresh();
+  };
+  const open = (focus) => {
+    if (!ctx.commands.isEnabled(commandId())) return;
     element.hidden = false;
     refresh();
-    target36.focus();
+    element.shadowRoot?.querySelector(focus)?.focus();
+  };
+  ctx.dialogs.register("format-chart-area", async (_ctx, arg) => {
+    target37 = typeof arg === "string" && BACKGROUNDS.includes(arg) ? arg : "chartArea";
+    open("[data-chart-format-target]");
+  });
+  ctx.dialogs.register("format-chart-series", async (_ctx, arg) => {
+    const found = activeChart(ctx);
+    const index = typeof arg === "number" && Number.isInteger(arg) && found?.chart.series[arg] ? arg : 0;
+    target37 = `series:${index}`;
+    open('[data-chart-format-field="series.overlap"] input');
   });
   relocalize();
   return { element, refresh, relocalize, close };
@@ -12379,7 +12678,8 @@ function allCommands() {
     ...viewCommands(),
     ...contextualCommands(),
     chartSeriesCommand(),
-    chartAreaCommand()
+    chartAreaCommand(),
+    ...smartArtCommands()
   ];
 }
 function installCommands(ctx) {
@@ -13125,11 +13425,11 @@ var CellEditor = class {
     }
     const refs = [];
     for (const ref of this.field.references()) {
-      const target36 = referenceTarget(ref.text);
-      if (!target36) continue;
-      if (target36.sheet !== void 0 && target36.sheet.toLowerCase() !== sheet.name.toLowerCase())
+      const target37 = referenceTarget(ref.text);
+      if (!target37) continue;
+      if (target37.sheet !== void 0 && target37.sheet.toLowerCase() !== sheet.name.toLowerCase())
         continue;
-      refs.push({ range: target36.range, color: ref.color });
+      refs.push({ range: target37.range, color: ref.color });
     }
     view.overlay.references = refs.length ? refs : void 0;
     view.schedule();
@@ -13450,7 +13750,10 @@ function smartArtSchemeColors(theme) {
   }
   return colors;
 }
-function paintSmartArt(ctx, node, obj2, theme) {
+function paintSmartArt(ctx, node, obj2, theme, size = {
+  w: (obj2.anchor.ext?.cx ?? 4572e3) / 9525,
+  h: (obj2.anchor.ext?.cy ?? 2667e3) / 9525
+}) {
   const doc = node.ownerDocument;
   node.classList.add("xg-smartart");
   const label = obj2.name || ctx.t("SmartArt graphic");
@@ -13458,7 +13761,15 @@ function paintSmartArt(ctx, node, obj2, theme) {
   node.setAttribute("aria-label", label);
   const notice = ctx.t(obj2.notice);
   node.title = notice;
-  const diagram = obj2.diagram;
+  const cached = obj2.diagram?.shapes.length ? obj2.diagram : void 0;
+  const diagram = cached ?? approximateDiagramDrawingFromNodes({
+    extentEmu: { width: Math.round(size.w * 9525), height: Math.round(size.h * 9525) },
+    nodes: obj2.nodes,
+    layoutId: obj2.layoutId,
+    family: obj2.layoutFamily,
+    colorsId: obj2.colorsId
+  });
+  node.dataset.rendering = cached ? "cached-drawing" : diagram ? "approximate" : "placeholder";
   if (diagram && diagram.shapes.length) {
     defineSmartArt(doc.defaultView?.customElements);
     const art = doc.createElement("office-ui-smartart");
@@ -13482,8 +13793,9 @@ function paintSmartArt(ctx, node, obj2, theme) {
     }
     node.append(list);
   }
+  if (cached) return;
   const badge = h(doc, "div", "xg-smartart-notice");
-  badge.textContent = ctx.t("SmartArt (display only)");
+  badge.textContent = ctx.t("Drawn with an approximate layout computed here; not Excel-identical.");
   badge.title = notice;
   node.append(badge);
 }
@@ -13551,6 +13863,15 @@ var DrawingLayer = class {
               this.#pressSlicer(event, index, frame, false);
           });
           node.addEventListener("dblclick", (event) => {
+            const frame = view.sheet()?.drawings[index];
+            if (frame?.kind === "smartArt") {
+              event.stopPropagation();
+              view.ctx.selection.set({ drawing: index });
+              const textPane = view.ctx.commands.get("smartart.textPane");
+              if (textPane && !textPane.checked?.(view.ctx))
+                void view.ctx.commands.run("smartart.textPane");
+              return;
+            }
             const series = event.currentTarget.xgSeriesHit;
             const part = event.currentTarget.xgChartPart;
             if (series === void 0 && part === void 0) return;
@@ -13603,7 +13924,7 @@ var DrawingLayer = class {
     } else if (drawing.kind === "timeline") {
       paintTimeline(node, drawing, box.w, box.h, view.ctx, view.workbook());
     } else if (drawing.kind === "smartArt") {
-      paintSmartArt(view.ctx, node, drawing, view.workbook()?.theme);
+      paintSmartArt(view.ctx, node, drawing, view.workbook()?.theme, box);
     } else if (drawing.chartEx) {
       this.#paintChart(node, drawing.chartEx, box);
     } else {
@@ -13721,11 +14042,11 @@ var DrawingLayer = class {
   }
   /** Handles a press on a timeline control; false lets the press move or resize the frame. */
   #pressTimeline(event, index, frame, node) {
-    const target36 = event.target;
+    const target37 = event.target;
     const view = this.#view;
-    const list = target36.closest("[data-timeline-action=level]");
-    const clear = target36.closest("[data-timeline-action=clear]");
-    const cell = target36.closest("[data-period]");
+    const list = target37.closest("[data-timeline-action=level]");
+    const clear = target37.closest("[data-timeline-action=clear]");
+    const cell = target37.closest("[data-period]");
     if (!list && !clear && !cell) return false;
     view.ctx.selection.set({ drawing: index });
     if (list) return true;
@@ -13780,10 +14101,10 @@ var DrawingLayer = class {
   }
   /** Handles a press on a slicer button; false lets the press move or resize the slicer. */
   #pressSlicer(event, index, frame, pointer = true) {
-    const target36 = event.target;
+    const target37 = event.target;
     const view = this.#view;
-    const item = target36.closest("[data-slicer-item]");
-    const tool = target36.closest("[data-slicer-action]");
+    const item = target37.closest("[data-slicer-item]");
+    const tool = target37.closest("[data-slicer-action]");
     if (!item && !tool) return false;
     view.ctx.selection.set({ drawing: index });
     if (pointer) view.ctx.grid()?.focus();
@@ -14379,8 +14700,8 @@ function openMenuAtActive(view, refocus) {
 }
 function wireMenus(view, refocus) {
   const onMenu = (event) => {
-    const target36 = event.target;
-    if (target36.closest(".xg-editor-host.xg-editing, .xg-popup")) return;
+    const target37 = event.target;
+    if (target37.closest(".xg-editor-host.xg-editing, .xg-popup")) return;
     event.preventDefault();
     const hit = view.hitClient(event.clientX, event.clientY);
     const kind = hit.area === "row-header" ? "row" : hit.area === "col-header" ? "col" : "cell";
@@ -14441,8 +14762,8 @@ function startHeaderResize(view, axis, index, event) {
     }
   };
   draw();
-  const target36 = view.view;
-  target36.setPointerCapture?.(event.pointerId);
+  const target37 = view.view;
+  target37.setPointerCapture?.(event.pointerId);
   const move = (e) => {
     const { x, y } = view.clientToView(e.clientX, e.clientY);
     size = Math.max(0, Math.round((axis === "col" ? x : y) - start));
@@ -14450,9 +14771,9 @@ function startHeaderResize(view, axis, index, event) {
     guide.title = String(toFileSize(view, axis, size));
   };
   const up = (e) => {
-    target36.removeEventListener("pointermove", move, true);
-    target36.removeEventListener("pointerup", up, true);
-    target36.releasePointerCapture?.(e.pointerId);
+    target37.removeEventListener("pointermove", move, true);
+    target37.removeEventListener("pointerup", up, true);
+    target37.releasePointerCapture?.(e.pointerId);
     guide.remove();
     const indices = resizeTargets(view, axis, index);
     const sheet = view.sheetIndex();
@@ -14460,8 +14781,8 @@ function startHeaderResize(view, axis, index, event) {
     else if (axis === "col") session.setColumnWidth(sheet, indices, toFileSize(view, "col", size));
     else session.setRowHeight(sheet, indices, toFileSize(view, "row", size));
   };
-  target36.addEventListener("pointermove", move, true);
-  target36.addEventListener("pointerup", up, true);
+  target37.addEventListener("pointermove", move, true);
+  target37.addEventListener("pointerup", up, true);
 }
 function autoFit(view, axis, index) {
   const session = view.ctx.session();
@@ -14551,8 +14872,8 @@ function wirePointer(host) {
     }, 40);
   };
   const onDown = (event) => {
-    const target36 = event.target;
-    if (target36.closest(".xg-editor-host, .xg-obj, .xg-dd, .xg-popup, .xg-assist")) return;
+    const target37 = event.target;
+    if (target37.closest(".xg-editor-host, .xg-obj, .xg-dd, .xg-popup, .xg-assist")) return;
     const { x, y } = view.clientToView(event.clientX, event.clientY);
     const g = view.geometry;
     const hit = g.hit(x, y);
@@ -14569,7 +14890,7 @@ function wirePointer(host) {
     event.preventDefault();
     const sheet = view.sheet();
     const editable = !view.ctx.readOnly();
-    if (target36.closest('[data-handle="fill"]') && editable) {
+    if (target37.closest('[data-handle="fill"]') && editable) {
       drag = { kind: "fill", anchor: selection.get().active, pointer: event.pointerId, x, y };
       el4.setPointerCapture?.(event.pointerId);
       return;
@@ -14655,17 +14976,17 @@ function wirePointer(host) {
     drag = void 0;
     el4.releasePointerCapture?.(event.pointerId);
     if (finished.kind === "fill") {
-      const target36 = view.overlay.fillPreview;
+      const target37 = view.overlay.fillPreview;
       view.overlay.fillPreview = void 0;
       const source = selection.get().ranges[selection.get().ranges.length - 1];
-      if (target36 && source) host.fill(source, target36);
+      if (target37 && source) host.fill(source, target37);
       view.schedule();
     }
     if (finished.kind === "point") editor.focus();
   };
   const onDblClick = (event) => {
-    const target36 = event.target;
-    if (target36.closest(".xg-editor-host, .xg-obj, .xg-popup")) return;
+    const target37 = event.target;
+    if (target37.closest(".xg-editor-host, .xg-obj, .xg-popup")) return;
     const { x, y } = view.clientToView(event.clientX, event.clientY);
     const g = view.geometry;
     const hit = g.hit(x, y);
@@ -15649,8 +15970,8 @@ function wireTooltips(view) {
         tip.append(who, view.doc.createTextNode(reply.text));
       }
     } else if (link) {
-      const target36 = link.target ?? link.location ?? "";
-      tip.textContent = `${link.tooltip ?? target36}
+      const target37 = link.target ?? link.location ?? "";
+      tip.textContent = `${link.tooltip ?? target37}
 ${view.ctx.t("Ctrl+click to follow the link.")}`;
     }
     const g = view.geometry;
@@ -15685,8 +16006,8 @@ ${view.ctx.t("Ctrl+click to follow the link.")}`;
     tip.remove();
   };
 }
-function workbookLocation(target36) {
-  const value = target36.trim();
+function workbookLocation(target37) {
+  const value = target37.trim();
   if (value.startsWith("#")) return value.slice(1);
   return /^[a-z][a-z0-9+.-]+:/i.test(value) || /[\\/]/.test(value) ? void 0 : value;
 }
@@ -15716,13 +16037,13 @@ function goTo(view, selection, location) {
   if (!workbook) return false;
   const text3 = location.replace(/^#/, "");
   const name = workbook.definedNames.find((n) => n.name.toLowerCase() === text3.toLowerCase());
-  const target36 = referenceTarget(name ? name.formula : text3);
-  if (!target36) return false;
-  const sheetIndex = target36.sheet ? workbook.sheets.indexOf(sheetByName(workbook, target36.sheet)) : view.sheetIndex();
+  const target37 = referenceTarget(name ? name.formula : text3);
+  if (!target37) return false;
+  const sheetIndex = target37.sheet ? workbook.sheets.indexOf(sheetByName(workbook, target37.sheet)) : view.sheetIndex();
   if (sheetIndex < 0) return false;
   if (sheetIndex !== view.sheetIndex()) view.ctx.setActiveSheet(sheetIndex);
-  const next = selectCell(sheetIndex, workbook.sheets[sheetIndex], target36.range.start);
-  selection.set({ ...next, ranges: [target36.range] }, target36.range.start);
+  const next = selectCell(sheetIndex, workbook.sheets[sheetIndex], target37.range.start);
+  selection.set({ ...next, ranges: [target37.range] }, target37.range.start);
   return true;
 }
 
@@ -16125,7 +16446,7 @@ function installPageBreakPreview(view) {
     return result;
   };
   const offModel = view.ctx.onModelChange(() => cache = void 0);
-  const target36 = (grab, clientX, clientY) => {
+  const target37 = (grab, clientX, clientY) => {
     const g = view.geometry;
     const { x, y } = view.clientToView(clientX, clientY);
     const horizontal = grab.kind === "line" ? grab.line.axis === "col" : grab.edge === "left" || grab.edge === "right";
@@ -16174,7 +16495,7 @@ function installPageBreakPreview(view) {
       layer.append(ghost);
       let boundary = -1;
       const move = (e) => {
-        boundary = target36(grab, e.clientX, e.clientY);
+        boundary = target37(grab, e.clientX, e.clientY);
         const g = view.geometry;
         if (axis === "row") place(ghost, g.headerW, g.rowY(boundary) - 1, g.cellsW, 3);
         else place(ghost, g.colX(boundary) - 1, g.headerH, 3, g.cellsH);
@@ -16334,9 +16655,9 @@ function mountGrid(ctx, container) {
       selection,
       editor,
       followLink: (row2, col) => followLink(view, selection, row2, col),
-      fill(source, target36) {
-        ctx.session()?.fill(view.sheetIndex(), source, target36);
-        selection.set({ ...selection.get(), ranges: [target36] });
+      fill(source, target37) {
+        ctx.session()?.fill(view.sheetIndex(), source, target37);
+        selection.set({ ...selection.get(), ranges: [target37] });
       }
     }),
     wireTooltips(view),
@@ -16680,10 +17001,10 @@ function createNameBox(ctx, doc) {
     const wb = ctx.workbook();
     list.replaceChildren();
     const sheet = ctx.activeSheet();
-    const names2 = (wb?.definedNames ?? []).filter(
+    const names = (wb?.definedNames ?? []).filter(
       (d) => !d.hidden && (d.localSheet === void 0 || d.localSheet === sheet)
     );
-    for (const named of names2) {
+    for (const named of names) {
       const item = h(doc, "li", "xfb-name-item", { role: "option" });
       item.textContent = named.name;
       item.addEventListener("mousedown", (event) => {
@@ -16694,7 +17015,7 @@ function createNameBox(ctx, doc) {
       });
       list.append(item);
     }
-    if (!names2.length) {
+    if (!names.length) {
       const empty = h(doc, "li", "xfb-name-empty", { "aria-disabled": "true" });
       empty.textContent = t("No defined names");
       list.append(empty);
@@ -17154,7 +17475,7 @@ function mountSheetTabs(ctx, container) {
     else if (right > strip.scrollLeft + strip.clientWidth)
       strip.scrollLeft = right - strip.clientWidth;
   };
-  const render3 = () => {
+  const render2 = () => {
     if (renaming) return;
     const workbook = ctx.workbook();
     const active2 = ctx.activeSheet();
@@ -17172,7 +17493,7 @@ function mountSheetTabs(ctx, container) {
   const activate = (sheet) => {
     focusable = sheet;
     if (ctx.activeSheet() !== sheet) ctx.setActiveSheet(sheet);
-    render3();
+    render2();
   };
   const rename = (sheet) => {
     if (!editable()) return;
@@ -17181,7 +17502,7 @@ function mountSheetTabs(ctx, container) {
     if (!tab) return;
     renaming = startRename(ctx, tab, sheet, () => {
       renaming = void 0;
-      render3();
+      render2();
       tabFor(strip, sheet)?.focus();
     });
   };
@@ -17226,13 +17547,13 @@ function mountSheetTabs(ctx, container) {
     const visible = visibleSheetIndices(workbook);
     const at = visible.indexOf(sheet);
     const focusAt = (i) => {
-      const target37 = visible[Math.max(0, Math.min(visible.length - 1, i))];
-      if (target37 === void 0) return;
-      focusable = target37;
+      const target38 = visible[Math.max(0, Math.min(visible.length - 1, i))];
+      if (target38 === void 0) return;
+      focusable = target38;
       for (const tab of strip.querySelectorAll(".xst-tab"))
-        tab.tabIndex = tab.dataset.sheet === String(target37) ? 0 : -1;
-      scrollIntoView(target37);
-      tabFor(strip, target37)?.focus();
+        tab.tabIndex = tab.dataset.sheet === String(target38) ? 0 : -1;
+      scrollIntoView(target38);
+      tabFor(strip, target38)?.focus();
     };
     const moves = {
       ArrowLeft: at - 1,
@@ -17240,12 +17561,12 @@ function mountSheetTabs(ctx, container) {
       Home: 0,
       End: visible.length - 1
     };
-    const target36 = moves[event.key];
+    const target37 = moves[event.key];
     const menuKey = event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
-    if (target36 === void 0 && !menuKey && !["Enter", " ", "F2"].includes(event.key)) return;
+    if (target37 === void 0 && !menuKey && !["Enter", " ", "F2"].includes(event.key)) return;
     event.preventDefault();
     event.stopPropagation();
-    if (target36 !== void 0) focusAt(target36);
+    if (target37 !== void 0) focusAt(target37);
     else if (event.key === "F2") rename(sheet);
     else if (menuKey) {
       const box = event.target.getBoundingClientRect();
@@ -17305,8 +17626,8 @@ function mountSheetTabs(ctx, container) {
       }
     }
   });
-  const disposeModel = ctx.onModelChange(() => render3());
-  render3();
+  const disposeModel = ctx.onModelChange(() => render2());
+  render2();
   return () => {
     renaming?.cancel();
     disposeModel();
@@ -17718,7 +18039,7 @@ function createPageLayoutView(ctx, host, fileName) {
       node.append(cell);
     });
   };
-  const render3 = () => {
+  const render2 = () => {
     frame = 0;
     if (!active2) return;
     const workbook = ctx.workbook();
@@ -17764,7 +18085,7 @@ function createPageLayoutView(ctx, host, fileName) {
     paintSelection();
   };
   const schedule = () => {
-    if (!frame) frame = (doc.defaultView ?? window).requestAnimationFrame(render3);
+    if (!frame) frame = (doc.defaultView ?? window).requestAnimationFrame(render2);
   };
   const toCanvas = (clientX, clientY) => {
     const rect = scaled.getBoundingClientRect();
@@ -17824,14 +18145,14 @@ function createPageLayoutView(ctx, host, fileName) {
     bandEditing = true;
     editBand(o, page, node, kind, section, () => {
       bandEditing = false;
-      render3();
+      render2();
       root.focus({ preventScroll: true });
     });
   };
   root.addEventListener("pointerdown", (event) => {
     if (event.button !== 0 || !layout || !metrics || editor.editing) return;
-    const target36 = event.target;
-    if (target36.closest(".xpl-ruler-h,.xpl-ruler-v,.xpl-corner") || bandEditing) return;
+    const target37 = event.target;
+    if (target37.closest(".xpl-ruler-h,.xpl-ruler-v,.xpl-corner") || bandEditing) return;
     const { x, y } = toCanvas(event.clientX, event.clientY);
     const hit = pageViewHit(layout, metrics, x, y);
     if (!hit) return;
@@ -17921,7 +18242,7 @@ function createPageLayoutView(ctx, host, fileName) {
       if (active2 === on) return;
       active2 = on;
       root.hidden = !on;
-      if (on) render3();
+      if (on) render2();
       else {
         editor.cancel();
         scaled.replaceChildren();
@@ -18042,7 +18363,7 @@ function collectKeyTips(panel3) {
     };
     targets.push({ key: COMMAND_KEYS[labelOf(control)] ?? "", element: control, activate });
   }
-  assignKeyTips(targets, (target36) => target36.element.getAttribute("aria-label") ?? "");
+  assignKeyTips(targets, (target37) => target37.element.getAttribute("aria-label") ?? "");
   return targets;
 }
 var runTips = (root, targets, onDone) => (
@@ -18060,7 +18381,7 @@ function showTabKeyTips(root, select2) {
     const id = panel3.dataset.tab ?? "";
     const tab = tabButton(root, id);
     if (!tab || isTabHidden(panel3)) continue;
-    const used = targets.map((target36) => target36.key);
+    const used = targets.map((target37) => target37.key);
     let key = TAB_KEYS[id] ?? "";
     if (!key || used.includes(key))
       key = [...(tab.textContent ?? id).toUpperCase().replace(/[^A-Z]/g, "")].find(
@@ -18113,7 +18434,7 @@ function applyRibbonVisibility(root, isHidden) {
 var isSmall = (control) => control.kind === "button" || control.kind === "toggle" || control.kind === "split" || control.kind === "menu" ? control.size !== "large" : control.kind === "color" || control.kind === "select";
 function layoutSmall(scope, run) {
   const { doc } = scope;
-  const render3 = (controls) => {
+  const render2 = (controls) => {
     const box = el2(doc, "div", "ribbon-stack");
     for (const control of controls) {
       const node = renderControl(scope, control, true);
@@ -18134,14 +18455,14 @@ function layoutSmall(scope, run) {
   if (lines) {
     const column = el2(doc, "div", "ribbon-stack");
     for (const line of lines.filter((items2) => items2.length)) {
-      const row2 = render3(line);
+      const row2 = render2(line);
       if (row2.childElementCount) column.append(row2);
     }
     return column.childElementCount ? [column] : [];
   }
   const columns = [];
   for (let at = 0; at < run.length; at += 3) {
-    const box = render3(run.slice(at, at + 3));
+    const box = render2(run.slice(at, at + 3));
     if (box.childElementCount) columns.push(box);
   }
   return columns;
@@ -18552,7 +18873,7 @@ function createStatusBar(ctx, handlers) {
     const command = VIEW_COMMANDS[id];
     if (command) void ctx.commands.run(command);
   });
-  const render3 = () => {
+  const render2 = () => {
     const sheet = ctx.workbook()?.sheets[ctx.activeSheet()];
     const mode = sheet?.view?.mode;
     const hasSheet = !!sheet;
@@ -18589,7 +18910,7 @@ function createStatusBar(ctx, handlers) {
     };
   };
   const refresh = () => {
-    render3();
+    render2();
     stats.textContent = statisticsText(ctx, shown3, layout.stats);
     slider.value = zoom();
   };
@@ -18628,7 +18949,7 @@ function createTitleBar(ctx, handlers) {
   element.append(people);
   let fileName = "";
   let saveState = "saved";
-  const render3 = () => {
+  const render2 = () => {
     const undoLabel = historyOf(ctx)?.undoLabel();
     const entries = [
       { id: "save", icon: "save", label: ctx.t("Save"), title: `${ctx.t("Save")} (Ctrl+S)` },
@@ -18682,25 +19003,25 @@ function createTitleBar(ctx, handlers) {
   });
   const relocalize = () => {
     people.setAttribute("label", ctx.t("People in this session"));
-    render3();
+    render2();
   };
   const refresh = () => {
     const sharing = handlers.collaboration?.();
     people.hidden = !sharing?.active;
     const next = sharing?.active ? participants(sharing) : [];
     if (JSON.stringify(next) !== JSON.stringify(people.participants)) people.participants = next;
-    render3();
+    render2();
   };
   relocalize();
   return {
     element,
     setFileName(value) {
       fileName = value;
-      render3();
+      render2();
     },
     setSaveState(value) {
       saveState = value;
-      render3();
+      render2();
     },
     refresh,
     relocalize,
@@ -18882,8 +19203,8 @@ function buildShell(core) {
   });
   const toaster = createToaster(doc, () => ctx.t("Close"));
   const workspace = el2(doc, "div", "xve-workspace");
-  const chartSeriesPane = createChartSeriesPane(ctx, () => chartAreaPane.close());
-  const chartAreaPane = createChartAreaPane(ctx, () => chartSeriesPane.close());
+  const chartFormatPane = createChartFormatPane(ctx);
+  const smartArt = createSmartArtController(ctx);
   const canvasRow = el2(doc, "div", "xve-canvas-row");
   const formulaRow = el2(doc, "div", "xve-formula-row");
   const gridHost = el2(doc, "div", "xve-grid-host");
@@ -18892,7 +19213,7 @@ function buildShell(core) {
   const emptyText = el2(doc, "p");
   empty.append(emptyText);
   workspace.append(formulaRow, gridHost, tabsRow, empty);
-  canvasRow.append(workspace, chartSeriesPane.element, chartAreaPane.element);
+  canvasRow.append(workspace, chartFormatPane.element, smartArt.element);
   frame.append(
     titleBar.element,
     ribbon.element,
@@ -18921,22 +19242,22 @@ function buildShell(core) {
     formulaRow,
     gridHost,
     tabsRow,
-    chartSeriesPane.element,
-    chartAreaPane.element,
+    chartFormatPane.element,
+    smartArt.element,
     statusBar.element
   ].filter((region) => region.getClientRects().length);
   const focusRegion = (region) => {
     if (region === ribbon.element) return ribbon.focus();
     if (region === gridHost) return ctx.grid()?.focus();
-    region.querySelector('input, button:not(:disabled), [tabindex="0"]')?.focus();
+    (region.shadowRoot ?? region).querySelector('input, button:not(:disabled), [tabindex="0"]')?.focus();
   };
   const actions = (action) => {
     if (action === "help") return help.open();
     if (action === "keytips") return ribbon.showKeyTips();
     if (action === "context-menu") {
-      const target36 = root.activeElement ?? gridHost;
-      const box = target36.getBoundingClientRect();
-      target36.dispatchEvent(
+      const target37 = root.activeElement ?? gridHost;
+      const box = target37.getBoundingClientRect();
+      target37.dispatchEvent(
         new MouseEvent("contextmenu", {
           bubbles: true,
           composed: true,
@@ -18964,8 +19285,8 @@ function buildShell(core) {
       ribbonActions.refresh();
       statusBar.refresh();
       pageViews?.refresh();
-      chartSeriesPane.refresh();
-      chartAreaPane.refresh();
+      chartFormatPane.refresh();
+      smartArt.refresh();
       titleBar.setFileName(core.fileName);
       if (core.dirty.dirty && saveState !== "dirty" && saveState !== "saving")
         chrome.setSaveState("dirty");
@@ -18981,8 +19302,8 @@ function buildShell(core) {
       ribbonActions.relocalize();
       statusBar.relocalize();
       backstage.relocalize();
-      chartSeriesPane.relocalize();
-      chartAreaPane.relocalize();
+      chartFormatPane.relocalize();
+      smartArt.relocalize();
       core.requestRender();
     }
   };