ooxml-ui 0.30.1 → 1.0.0

package/dist/xlsx.js

@@ -1,16 +1,21 @@
-import './chunk-QHY7U7KK.js';
-import { defineSmartArt } from './chunk-C66U34OA.js';
-import './chunk-NEDNYLXX.js';
-import './chunk-7QLJS57B.js';
-import { createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineContextMenu } from './chunk-4VKD3COE.js';
-import { getIcon, registerIcon } from './chunk-HZ422LTR.js';
-import './chunk-4TSBX6J3.js';
-import './chunk-ZWBP2WTC.js';
-import './chunk-7Q7ZS2CC.js';
-import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, ICON_ACCENTS, ICON_PATHS, lightTheme, darkTheme, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, onRibbonTabsChange, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, formulaCommands, dataCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, viewing, activeTable, activeChart, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, editChart, pasteWith, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
+import './chunk-4QQASR5A.js';
+import { defineSmartArt } from './chunk-XDUYS4KK.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-FLHM5Q4O.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-FLHM5Q4O.js';
+import './chunk-SNV6YKPC.js';
+import './chunk-X7RINDJQ.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, parseSvgPreview } from './chunk-T3HB5LMH.js';
+import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
+import './chunk-OXKWNNNJ.js';
+import { withTokens } from './chunk-ZV2Z4IWH.js';
+import './chunk-JFJXBYRD.js';
+import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, formulaCommands, dataCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
-import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, selectionStats, formatRange, usedRange, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, createRefEvaluator, chartView, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
+import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
+import { resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
+import { render } from 'lit';
+import { RECT_GRADIENT_DIRECTIONS, OFFICE_GRADIENT_PRESETS, officeGradientPresetId, officeGradientPresetFill, resolveDrawingColor, drawingColorBrightness, drawingColorCss, rectGradientDirection } from 'ooxml-core/diagram';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/office-bridge.css?raw
 var office_bridge_default = "/*\n * The shared ooxml-ui elements read only --office-* tokens. This feeds them from the editor's\n * --xve-* theme, declared on the host so a theme, a dark scheme or a host override of --xve-*\n * keeps working (the same approach as pptx-viewer's office-token-bridge and docx-viewer's).\n */\n:host {\n	--office-font: 'Segoe UI', system-ui, -apple-system, sans-serif;\n	--office-foreground: var(--xve-foreground);\n	--office-muted-foreground: var(--xve-muted-foreground);\n	--office-background: var(--xve-background);\n	--office-surface: var(--xve-card);\n	--office-selected: var(--xve-accent);\n	--office-border: var(--xve-border);\n	--office-accent: var(--xve-primary);\n	--office-accent-foreground: var(--xve-primary-foreground);\n	--office-ring: var(--xve-ring);\n	--office-popover: var(--xve-popover);\n	--office-popover-foreground: var(--xve-popover-foreground, var(--xve-foreground));\n	--office-danger: var(--xve-destructive);\n	--office-danger-foreground: var(--xve-destructive-foreground);\n}\n";
@@ -19,7 +24,7 @@ var office_bridge_default = "/*\n * The shared ooxml-ui elements read only --off
 var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's chrome (styles/base.css,\n   chrome-titlebar.css, status-dialogs.css) with --xve-* tokens. */\n:host {\n	--xl: var(--xve-primary);\n	--xl-strong: color-mix(in srgb, var(--xve-primary) 70%, #000);\n	--xl-soft: color-mix(in srgb, var(--xve-primary) 12%, transparent);\n	--accent-soft: var(--xl-soft);\n	--ink: var(--xve-foreground);\n	--muted: var(--xve-muted-foreground);\n	--line: var(--xve-border);\n	--surface: var(--xve-card);\n	--chrome: var(--xve-background);\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	color: var(--ink);\n	font:\n		13px/1.35 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-frame {\n	position: relative;\n	display: flex;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	overflow: hidden;\n	background: var(--surface);\n}\n:focus-visible {\n	outline: 2px solid var(--xve-ring);\n	outline-offset: 1px;\n}\n[hidden],\n[data-xve-hidden] {\n	display: none !important;\n}\n.xve-icon {\n	flex: none;\n}\n.xve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.xve-icon-button:hover:not(:disabled),\n.xve-icon-button[aria-pressed='true'] {\n	background: var(--xl-soft);\n}\n.xve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Workspace: formula bar, grid and sheet tabs between the ribbon and the status bar. */\n.xve-workspace {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--xve-sheet-bg);\n}\n.xve-formula-row {\n	flex: none;\n	min-width: 0;\n	border-bottom: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-grid-host {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	overflow: hidden;\n	background: var(--xve-sheet-bg);\n	color-scheme: light;\n}\n.xve-grid-host > * {\n	flex: 1;\n	min-width: 0;\n}\n.xve-tabs-row {\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n	background: var(--chrome);\n}\n.xve-empty {\n	position: absolute;\n	z-index: 5;\n	inset: 0;\n	display: grid;\n	place-items: center;\n	color: var(--muted);\n	background: var(--chrome);\n}\n:host([show-formula-bar='false']) .xve-formula-row,\n:host([show-toolbar='false']) .xve-ribbon {\n	display: none;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; the mark, background and borders come from its tokens. */\n.xve-titlebar {\n	display: block;\n	flex: none;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-foreground: var(--ink);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--xl);\n	--office-title-bar-mark-foreground: var(--xve-primary-foreground);\n}\n.xve-title-actions {\n	display: flex;\n	align-items: center;\n	gap: 2px;\n}\n.xve-mode-select {\n	height: 28px;\n	margin-left: 4px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n}\n\n/* Status bar: drawn by the shared office-ui-status-bar; this places it and styles the slotted stats. */\n.xve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n.xve-status-stats {\n	margin-inline-end: 10px;\n	overflow: hidden;\n	color: var(--ink);\n	font-size: 11px;\n	white-space: nowrap;\n}\n\n@media (max-width: 760px) {\n	.xve-status-stats {\n		display: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/ribbon.css?raw
-var ribbon_default = "/* Ribbon: tabs, panels, groups and controls. Mirrors docx-viewer's styles/ribbon*.css. */\n.xve-ribbon {\n	position: relative;\n	display: flex;\n	flex: none;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--surface);\n	border-bottom: 1px solid var(--line);\n}\n/* The tab row, File button and collapse button are the shared office-ui-ribbon; these colour it. */\n.xve-ribbon {\n	--office-ribbon-contextual: #0f7b6c;\n}\n.xve-ribbon::part(file) {\n	font-weight: 600;\n}\n.ribbon-panel {\n	display: flex;\n	flex: none;\n	box-sizing: border-box;\n	height: 104px;\n	min-width: 0;\n	align-items: stretch;\n	gap: 4px;\n	padding: 6px 10px 4px;\n	overflow-x: auto;\n	overflow-y: hidden;\n	scrollbar-width: thin;\n}\n.ribbon-group {\n	position: relative;\n	display: flex;\n	flex: 0 0 auto;\n	align-items: flex-start;\n	min-width: 0;\n	gap: 2px;\n	padding: 2px 10px 18px 2px;\n	border-right: 1px solid var(--line);\n}\n.ribbon-group:last-child {\n	border: 0;\n}\n.ribbon-group::after {\n	position: absolute;\n	right: 0;\n	bottom: 2px;\n	left: 0;\n	color: var(--muted);\n	font-size: 10px;\n	line-height: 1.1;\n	text-align: center;\n	white-space: nowrap;\n	content: attr(data-caption);\n}\n.ribbon-caption-sizer {\n	position: absolute;\n	visibility: hidden;\n	font-size: 10px;\n	white-space: nowrap;\n}\n.ribbon-stack {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n}\n.ribbon-stack > .ribbon-stack {\n	flex-direction: row;\n	align-items: center;\n}\n.ribbon-separator {\n	align-self: stretch;\n	width: 1px;\n	margin: 2px 3px;\n	background: var(--line);\n}\n.ribbon-stack > .ribbon-separator {\n	width: auto;\n	height: 1px;\n}\n.ribbon-stack > .ribbon-stack > .ribbon-separator {\n	width: 1px;\n	height: 20px;\n}\n\n/* Buttons */\n.ribbon-group button {\n	flex: none;\n	min-width: 28px;\n	height: 28px;\n	max-width: 100%;\n	padding: 0 4px;\n	overflow: hidden;\n	border: 1px solid transparent;\n	border-radius: 4px;\n	background: transparent;\n	color: var(--ink);\n	font:\n		400 12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-group button:hover:not(:disabled) {\n	border-color: var(--line);\n	background: var(--accent-soft);\n}\n.ribbon-group button[aria-pressed='true'],\n.ribbon-group button[aria-expanded='true'] {\n	border-color: color-mix(in srgb, var(--xl) 45%, transparent);\n	background: color-mix(in srgb, var(--xl) 20%, transparent);\n}\n.ribbon-group button:active:not(:disabled) {\n	background: color-mix(in srgb, var(--xl) 28%, transparent);\n}\n.ribbon-group button:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -2px;\n}\n.ribbon-group button:disabled,\n.ribbon-group input:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.ribbon-group button.ribbon-small {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: 4px;\n	height: 24px;\n	padding: 0 3px;\n}\n.ribbon-group button.ribbon-small.ribbon-labelled {\n	justify-content: flex-start;\n	padding: 0 6px 0 4px;\n}\n.ribbon-group button.ribbon-large {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: 2px;\n	width: auto;\n	min-width: 48px;\n	height: 76px;\n	padding: 3px 3px 2px;\n	font-size: 11px;\n	line-height: 1.15;\n	white-space: normal;\n	text-align: center;\n}\n.ribbon-large > .ribbon-icon:last-child:not(:first-child) {\n	margin-top: auto;\n}\n.ribbon-large > span,\n.ribbon-caption {\n	/* Two balanced lines (see ribbon/caption.ts); the button grows to the widest. */\n	white-space: pre;\n}\n.ribbon-icon {\n	flex: none;\n}\n.ribbon-icon[data-icon$='-caret'],\n.ribbon-icon[data-icon='caret'] {\n	opacity: 0.8;\n}\n\n/* Split buttons: a main half and a caret that opens a menu or the colour grid. */\n.ribbon-split {\n	display: inline-flex;\n	align-items: stretch;\n}\n.ribbon-split.ribbon-split-large {\n	flex-direction: column;\n}\n.ribbon-group .ribbon-split > button:first-child {\n	border-top-right-radius: 0;\n	border-bottom-right-radius: 0;\n}\n.ribbon-group .ribbon-split > .ribbon-caret {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	padding: 0;\n	border-top-left-radius: 0;\n	border-bottom-left-radius: 0;\n}\n.ribbon-group .ribbon-split-large > button:first-child {\n	height: 46px;\n	border-radius: 4px 4px 0 0;\n}\n.ribbon-group .ribbon-split-large > .ribbon-caret {\n	width: auto;\n	height: 26px;\n	border-radius: 0 0 4px 4px;\n	font-size: 11px;\n	flex-direction: column;\n	gap: 0;\n}\n.ribbon-color {\n	position: relative;\n}\n.ribbon-group button.ribbon-color::after {\n	position: absolute;\n	right: 4px;\n	bottom: 2px;\n	left: 4px;\n	height: 3px;\n	background: var(--bar, transparent);\n	outline: 1px solid var(--line);\n	content: '';\n}\n\n/* Editable combo boxes (font name and size) and plain selects. */\n.ribbon-combo {\n	display: inline-flex;\n	align-items: stretch;\n	height: 24px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n}\n.ribbon-combo:focus-within {\n	border-color: var(--xl);\n	outline: 1px solid var(--xl);\n}\n.ribbon-combo input {\n	flex: 1;\n	min-width: 0;\n	padding: 0 6px;\n	border: 0;\n	background: transparent;\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	outline: none;\n}\n.ribbon-group .ribbon-combo .ribbon-caret {\n	width: 18px;\n	min-width: 18px;\n	height: 100%;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n}\n\n/* Plain drop-downs (Number Format) and gallery previews. */\n.ribbon-group select.ribbon-select {\n	height: 24px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n}\n.ribbon-group select.ribbon-select:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -1px;\n}\n.ribbon-gallery-preview {\n	display: block;\n	height: 36px;\n	margin-bottom: 3px;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: #fff;\n	color: #1f1f1f;\n	font-size: 11px;\n	line-height: 36px;\n	text-align: center;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n}\n.ribbon-gallery-preview > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n\n/* Dialog launcher: the corner arrow of a group. */\n.ribbon-group button.ribbon-launcher {\n	position: absolute;\n	right: 2px;\n	bottom: 0;\n	z-index: 1;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	height: 14px;\n	padding: 0;\n	color: var(--muted);\n}\n\n/* Collapsed groups: a narrow ribbon folds its rightmost groups into one dropdown each. */\n.ribbon-group > .ribbon-overflow-button {\n	display: none;\n}\n.ribbon-group[data-collapsed] {\n	padding-right: 4px;\n}\n.ribbon-group[data-collapsed] > :not(.ribbon-overflow-button) {\n	display: none !important;\n}\n.ribbon-group[data-collapsed] > button.ribbon-overflow-button {\n	display: flex;\n}\n.ribbon-group[data-collapsed]::after {\n	display: none;\n}\n.ribbon-overflow-panel .ribbon-group {\n	height: 84px;\n	padding-right: 2px;\n	border: 0;\n}\n\n/* KeyTips */\n.xve-keytip {\n	position: absolute;\n	bottom: -2px;\n	left: 50%;\n	z-index: 70;\n	min-width: 16px;\n	padding: 1px 4px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: #1f1f1f;\n	color: #fff;\n	font:\n		600 11px/14px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-align: center;\n	pointer-events: none;\n	transform: translateX(-50%);\n}\n.xve-keytip-command {\n	position: fixed;\n	bottom: auto;\n}\n\n/* Accent hues on command icons, as in Office. */\n:host {\n	--ribbon-accent-blue: #2b7cd3;\n	--ribbon-accent-green: #2f9e5f;\n	--ribbon-accent-red: #d13438;\n	--ribbon-accent-orange: #d9822b;\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([theme='light'])) {\n		--ribbon-accent-blue: #5ea5f0;\n		--ribbon-accent-green: #5cc98a;\n		--ribbon-accent-red: #f07a7d;\n		--ribbon-accent-orange: #f0a35e;\n	}\n}\n:host([theme='dark']) {\n	--ribbon-accent-blue: #5ea5f0;\n	--ribbon-accent-green: #5cc98a;\n	--ribbon-accent-red: #f07a7d;\n	--ribbon-accent-orange: #f0a35e;\n}\n.ribbon-icon[data-accent='blue'] {\n	color: var(--ribbon-accent-blue);\n}\n.ribbon-icon[data-accent='green'] {\n	color: var(--ribbon-accent-green);\n}\n.ribbon-icon[data-accent='red'] {\n	color: var(--ribbon-accent-red);\n}\n.ribbon-icon[data-accent='orange'] {\n	color: var(--ribbon-accent-orange);\n}\n";
+var ribbon_default = "/* Ribbon: tabs, panels, groups and controls. Mirrors docx-viewer's styles/ribbon*.css. */\n.xve-ribbon-gallery[data-office-gallery] .trigger {\n	flex-direction: column;\n	justify-content: center;\n	min-width: 56px;\n	height: 78px;\n	white-space: normal;\n	text-align: center;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > svg {\n	width: 28px;\n	height: 28px;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > span:not([aria-hidden]) {\n	max-width: 56px;\n}\n.xve-ribbon {\n	position: relative;\n	display: flex;\n	flex: none;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--surface);\n	border-bottom: 1px solid var(--line);\n}\n/* The tab row, File button and collapse button are the shared office-ui-ribbon; these colour it. */\n.xve-ribbon {\n	--office-ribbon-contextual: #0f7b6c;\n}\n.xve-ribbon::part(file) {\n	font-weight: 600;\n}\n.ribbon-panel {\n	display: flex;\n	flex: none;\n	box-sizing: border-box;\n	height: 104px;\n	min-width: 0;\n	align-items: stretch;\n	gap: 4px;\n	padding: 6px 10px 4px;\n	overflow-x: auto;\n	overflow-y: hidden;\n	scrollbar-width: thin;\n}\n.ribbon-group {\n	position: relative;\n	display: flex;\n	flex: 0 0 auto;\n	align-items: flex-start;\n	min-width: 0;\n	gap: 2px;\n	padding: 2px 10px 18px 2px;\n	border-right: 1px solid var(--line);\n}\n.ribbon-group:last-child {\n	border: 0;\n}\n.ribbon-group::after {\n	position: absolute;\n	right: 0;\n	bottom: 2px;\n	left: 0;\n	color: var(--muted);\n	font-size: 10px;\n	line-height: 1.1;\n	text-align: center;\n	white-space: nowrap;\n	content: attr(data-caption);\n}\n.ribbon-caption-sizer {\n	position: absolute;\n	visibility: hidden;\n	font-size: 10px;\n	white-space: nowrap;\n}\n.ribbon-stack {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n}\n.ribbon-stack > .ribbon-stack {\n	flex-direction: row;\n	align-items: center;\n}\n.ribbon-separator {\n	align-self: stretch;\n	width: 1px;\n	margin: 2px 3px;\n	background: var(--line);\n}\n.ribbon-stack > .ribbon-separator {\n	width: auto;\n	height: 1px;\n}\n.ribbon-stack > .ribbon-stack > .ribbon-separator {\n	width: 1px;\n	height: 20px;\n}\n\n/* Buttons */\n.ribbon-group button {\n	flex: none;\n	min-width: 28px;\n	height: 28px;\n	max-width: 100%;\n	padding: 0 4px;\n	overflow: hidden;\n	border: 1px solid transparent;\n	border-radius: 4px;\n	background: transparent;\n	color: var(--ink);\n	font:\n		400 12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-group button:hover:not(:disabled) {\n	border-color: var(--line);\n	background: var(--accent-soft);\n}\n.ribbon-group button[aria-pressed='true'],\n.ribbon-group button[aria-expanded='true'] {\n	border-color: color-mix(in srgb, var(--xl) 45%, transparent);\n	background: color-mix(in srgb, var(--xl) 20%, transparent);\n}\n.ribbon-group button:active:not(:disabled) {\n	background: color-mix(in srgb, var(--xl) 28%, transparent);\n}\n.ribbon-group button:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -2px;\n}\n.ribbon-group button:disabled,\n.ribbon-group input:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.ribbon-group button.ribbon-small {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: 4px;\n	height: 24px;\n	padding: 0 3px;\n}\n.ribbon-group button.ribbon-small.ribbon-labelled {\n	justify-content: flex-start;\n	padding: 0 6px 0 4px;\n}\n.ribbon-group button.ribbon-large {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: 2px;\n	width: auto;\n	min-width: 48px;\n	height: 76px;\n	padding: 3px 3px 2px;\n	font-size: 11px;\n	line-height: 1.15;\n	white-space: normal;\n	text-align: center;\n}\n.ribbon-large > .ribbon-icon:last-child:not(:first-child) {\n	margin-top: auto;\n}\n.ribbon-large > span,\n.ribbon-caption {\n	/* Two balanced lines (see ribbon/caption.ts); the button grows to the widest. */\n	white-space: pre;\n}\n.ribbon-icon {\n	flex: none;\n}\n.ribbon-icon[data-icon$='-caret'],\n.ribbon-icon[data-icon='caret'] {\n	opacity: 0.8;\n}\n\n/* Split buttons: a main half and a caret that opens a menu or the colour grid. */\n.ribbon-split {\n	display: inline-flex;\n	align-items: stretch;\n}\n.ribbon-split.ribbon-split-large {\n	flex-direction: column;\n}\n.ribbon-group .ribbon-split > button:first-child {\n	border-top-right-radius: 0;\n	border-bottom-right-radius: 0;\n}\n.ribbon-group .ribbon-split > .ribbon-caret {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	padding: 0;\n	border-top-left-radius: 0;\n	border-bottom-left-radius: 0;\n}\n.ribbon-group .ribbon-split-large > button:first-child {\n	height: 46px;\n	border-radius: 4px 4px 0 0;\n}\n.ribbon-group .ribbon-split-large > .ribbon-caret {\n	width: auto;\n	height: 26px;\n	border-radius: 0 0 4px 4px;\n	font-size: 11px;\n	flex-direction: column;\n	gap: 0;\n}\n.ribbon-color {\n	position: relative;\n}\n.ribbon-group button.ribbon-color::after {\n	position: absolute;\n	right: 4px;\n	bottom: 2px;\n	left: 4px;\n	height: 3px;\n	background: var(--bar, transparent);\n	outline: 1px solid var(--line);\n	content: '';\n}\n\n/* Editable combo boxes (font name and size) and plain selects. */\n.ribbon-combo {\n	display: inline-flex;\n	align-items: stretch;\n	height: 24px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n}\n.ribbon-combo:focus-within {\n	border-color: var(--xl);\n	outline: 1px solid var(--xl);\n}\n.ribbon-combo input {\n	flex: 1;\n	min-width: 0;\n	padding: 0 6px;\n	border: 0;\n	background: transparent;\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	outline: none;\n}\n.ribbon-group .ribbon-combo .ribbon-caret {\n	width: 18px;\n	min-width: 18px;\n	height: 100%;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n}\n\n/* Plain drop-downs (Number Format) and gallery previews. */\n.ribbon-group select.ribbon-select {\n	height: 24px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n}\n.ribbon-group select.ribbon-select:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -1px;\n}\n.ribbon-gallery-preview {\n	display: block;\n	height: 36px;\n	margin-bottom: 3px;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: #fff;\n	color: #1f1f1f;\n	font-size: 11px;\n	line-height: 36px;\n	text-align: center;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n}\n.ribbon-gallery-preview > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n\n/* Dialog launcher: the corner arrow of a group. */\n.ribbon-group button.ribbon-launcher {\n	position: absolute;\n	right: 2px;\n	bottom: 0;\n	z-index: 1;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	height: 14px;\n	padding: 0;\n	color: var(--muted);\n}\n\n/* Collapsed groups: a narrow ribbon folds its rightmost groups into one dropdown each. */\n.ribbon-group > .ribbon-overflow-button {\n	display: none;\n}\n.ribbon-group[data-collapsed] {\n	padding-right: 4px;\n}\n.ribbon-group[data-collapsed] > :not(.ribbon-overflow-button) {\n	display: none !important;\n}\n.ribbon-group[data-collapsed] > button.ribbon-overflow-button {\n	display: flex;\n}\n.ribbon-group[data-collapsed]::after {\n	display: none;\n}\n.ribbon-overflow-panel .ribbon-group {\n	height: 84px;\n	padding-right: 2px;\n	border: 0;\n}\n\n/* KeyTips */\n.xve-keytip {\n	position: absolute;\n	bottom: -2px;\n	left: 50%;\n	z-index: 70;\n	min-width: 16px;\n	padding: 1px 4px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: #1f1f1f;\n	color: #fff;\n	font:\n		600 11px/14px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-align: center;\n	pointer-events: none;\n	transform: translateX(-50%);\n}\n.xve-keytip-command {\n	position: fixed;\n	bottom: auto;\n}\n\n/* Accent hues on command icons, as in Office. */\n:host {\n	--ribbon-accent-blue: #2b7cd3;\n	--ribbon-accent-green: #2f9e5f;\n	--ribbon-accent-red: #d13438;\n	--ribbon-accent-orange: #d9822b;\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([theme='light'])) {\n		--ribbon-accent-blue: #5ea5f0;\n		--ribbon-accent-green: #5cc98a;\n		--ribbon-accent-red: #f07a7d;\n		--ribbon-accent-orange: #f0a35e;\n	}\n}\n:host([theme='dark']) {\n	--ribbon-accent-blue: #5ea5f0;\n	--ribbon-accent-green: #5cc98a;\n	--ribbon-accent-red: #f07a7d;\n	--ribbon-accent-orange: #f0a35e;\n}\n.ribbon-icon[data-accent='blue'] {\n	color: var(--ribbon-accent-blue);\n}\n.ribbon-icon[data-accent='green'] {\n	color: var(--ribbon-accent-green);\n}\n.ribbon-icon[data-accent='red'] {\n	color: var(--ribbon-accent-red);\n}\n.ribbon-icon[data-accent='orange'] {\n	color: var(--ribbon-accent-orange);\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/popups.css?raw
 var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour grid, Tell me, toasts and the shell dialogs. */\n.ribbon-popover {\n	position: fixed;\n	z-index: 1000;\n	box-sizing: border-box;\n	padding: 4px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);\n	color: var(--xve-popover-foreground);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.ribbon-popover.ribbon-menu-list,\n.ribbon-popover.ribbon-list {\n	display: flex;\n	min-width: 180px;\n	max-height: min(70vh, 420px);\n	flex-direction: column;\n	overflow-y: auto;\n}\n.ribbon-menu-list [role='menuitem'],\n.ribbon-menu-list [role='menuitemcheckbox'],\n.ribbon-list [role='option'] {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n	width: 100%;\n	padding: 5px 12px 5px 8px;\n	border: 0;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-menu-list [role^='menuitem']:hover:not(:disabled),\n.ribbon-menu-list [role^='menuitem']:focus-visible,\n.ribbon-list [role='option']:hover,\n.ribbon-list [role='option']:focus-visible {\n	background: var(--accent-soft);\n	outline: none;\n}\n.ribbon-menu-list [role^='menuitem']:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.ribbon-menu-list [aria-checked='true'] {\n	font-weight: 600;\n}\n.ribbon-menu-list .ribbon-menu-icon {\n	display: inline-flex;\n	width: 16px;\n}\n.ribbon-menu-list .ribbon-menu-shortcut {\n	margin-left: auto;\n	padding-left: 18px;\n	color: var(--muted);\n}\n.ribbon-menu-list [role='separator'] {\n	height: 1px;\n	margin: 4px 2px;\n	background: var(--line);\n}\n.ribbon-list [aria-selected='true'] {\n	color: var(--xl);\n	font-weight: 600;\n}\n.ribbon-popover.ribbon-gallery-menu {\n	display: grid;\n	grid-template-columns: repeat(4, 96px);\n	gap: 4px;\n	max-height: min(70vh, 420px);\n	overflow-y: auto;\n}\n.ribbon-gallery-menu button {\n	padding: 4px;\n	border: 1px solid transparent;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.ribbon-gallery-menu button:hover,\n.ribbon-gallery-menu button:focus-visible {\n	border-color: var(--line);\n	background: var(--accent-soft);\n	outline: none;\n}\n\n/* Colour picker: Automatic, Theme Colors (ten columns over five tints), Standard Colors, More. */\n.ribbon-popover.color-grid {\n	display: block;\n	width: 236px;\n	padding: 8px 10px;\n}\n.color-grid-title {\n	margin: 6px 0 4px;\n	color: var(--muted);\n	font-weight: 600;\n	font-size: 11px;\n}\n.color-grid-cells {\n	display: grid;\n	grid-template-columns: repeat(10, 20px);\n	gap: 2px 3px;\n}\n.color-grid .swatch {\n	width: 20px;\n	height: 20px;\n	padding: 0;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: var(--swatch);\n	cursor: pointer;\n}\n.color-grid .swatch:hover,\n.color-grid .swatch:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: 1px;\n}\n.color-grid-command {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	width: 100%;\n	margin: 2px 0;\n	padding: 5px 6px;\n	border: 0;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	cursor: pointer;\n}\n.color-grid-command:hover,\n.color-grid-command:focus-visible {\n	background: var(--accent-soft);\n}\n.color-grid-input {\n	position: absolute;\n	width: 0;\n	height: 0;\n	padding: 0;\n	border: 0;\n	opacity: 0;\n	pointer-events: none;\n}\n\n/* Toasts */\n.xve-toasts {\n	position: absolute;\n	z-index: 90;\n	right: 16px;\n	bottom: 40px;\n	display: flex;\n	max-width: min(420px, calc(100% - 32px));\n	flex-direction: column;\n	gap: 8px;\n	pointer-events: none;\n}\n.xve-toast {\n	display: flex;\n	align-items: flex-start;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-left: 4px solid var(--xl);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 8px 24px #0003;\n	color: var(--xve-popover-foreground);\n	pointer-events: auto;\n}\n.xve-toast[data-kind='warning'] {\n	border-left-color: #b7791f;\n}\n.xve-toast[data-kind='error'] {\n	border-left-color: var(--xve-destructive);\n}\n.xve-toast-text {\n	flex: 1;\n}\n\n/* Shell dialogs (shortcut help, prompts) */\n.xve-dialog {\n	position: absolute;\n	z-index: 85;\n	top: 120px;\n	left: 50%;\n	display: grid;\n	box-sizing: border-box;\n	width: min(440px, calc(100% - 32px));\n	gap: 10px;\n	padding: 18px 20px;\n	border: 1px solid var(--line);\n	border-radius: 8px;\n	background: var(--xve-popover);\n	box-shadow: 0 12px 32px #0003;\n	color: var(--ink);\n	transform: translateX(-50%);\n}\n.xve-dialog h2 {\n	margin: 0 0 4px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.xve-dialog-actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: 8px;\n	margin-top: 6px;\n}\n.xve-dialog-actions button {\n	min-height: 30px;\n	padding: 0 14px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-dialog-actions .xve-dialog-primary {\n	border-color: var(--xl);\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n}\n.xve-shortcut-help {\n	width: min(620px, calc(100% - 32px));\n	max-height: calc(100% - 160px);\n	overflow: auto;\n}\n.xve-shortcut-help p {\n	margin: 0;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-shortcut-help table {\n	width: 100%;\n	border-collapse: collapse;\n}\n.xve-shortcut-help th,\n.xve-shortcut-help td {\n	padding: 5px 8px;\n	border-bottom: 1px solid var(--line);\n	text-align: left;\n	vertical-align: top;\n}\n.xve-shortcut-help th {\n	color: var(--muted);\n	font-size: 12px;\n	font-weight: 600;\n}\n.xve-shortcut-help kbd {\n	padding: 1px 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	font:\n		12px/1.4 ui-monospace,\n		Consolas,\n		monospace;\n	white-space: nowrap;\n}\n";
@@ -27,6 +32,9 @@ var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour g
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/backstage.css?raw
 var backstage_default = "/* File backstage: the shared office-ui-backstage draws the navigation; these style the page content.\n   The nav colours come from its tokens. */\n.xve-backstage {\n	z-index: 40;\n	--office-background: var(--surface);\n	--office-backstage-nav-background: var(--xl);\n	--office-backstage-nav-foreground: var(--xve-primary-foreground);\n}\n.xve-backstage-content {\n	overflow: auto;\n	padding: 28px 40px;\n	color: var(--ink);\n}\n.xve-backstage-content h2 {\n	margin: 0 0 20px;\n	font-size: 30px;\n	font-weight: 300;\n}\n.xve-backstage-content h3 {\n	margin: 24px 0 10px;\n	font-size: 15px;\n	font-weight: 600;\n}\n.xve-backstage-title {\n	margin: 0 0 4px;\n	font-size: 26px;\n	font-weight: 400;\n	overflow-wrap: anywhere;\n}\n.xve-backstage-muted {\n	color: var(--muted);\n}\n.xve-backstage-facts {\n	display: grid;\n	grid-template-columns: max-content minmax(0, 1fr);\n	gap: 6px 24px;\n	margin: 0;\n}\n.xve-backstage-facts dt {\n	color: var(--muted);\n}\n.xve-backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.xve-compatibility-notes {\n	display: grid;\n	gap: 8px;\n	max-width: 760px;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.xve-compatibility-notes li {\n	display: flex;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	line-height: 1.45;\n}\n.xve-compatibility-notes .xve-icon {\n	margin-top: 2px;\n	color: #b7791f;\n}\n.xve-backstage-columns {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) 300px;\n	gap: 40px;\n	align-items: start;\n}\n.xve-backstage-properties {\n	padding: 4px 0 0 24px;\n	border-left: 1px solid var(--line);\n}\n.xve-backstage-properties h3 {\n	margin-top: 0;\n}\n.xve-backstage-tiles {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.xve-backstage-tile {\n	display: inline-flex;\n	flex-direction: column;\n	gap: 8px;\n	padding: 8px;\n	border: 1px solid transparent;\n	border-radius: 6px;\n	background: none;\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-backstage-tile:hover {\n	border-color: var(--line);\n	background: var(--xl-soft);\n}\n.xve-backstage-tile-preview {\n	display: block;\n	width: 150px;\n	height: 112px;\n	border: 1px solid var(--line);\n	background-color: #fff;\n	background-image:\n		linear-gradient(#e1e1e1 1px, transparent 1px),\n		linear-gradient(90deg, #e1e1e1 1px, transparent 1px);\n	background-size: 30px 14px;\n	box-shadow: 0 1px 3px #0002;\n}\n.xve-backstage-tile-preview[data-template]::before {\n	display: block;\n	height: 14px;\n	background: var(--xl);\n	content: '';\n	opacity: 0.85;\n}\n.xve-backstage-card {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 24px;\n	max-width: 760px;\n	margin-bottom: 12px;\n	padding: 14px 18px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.xve-backstage-card h3 {\n	margin: 0 0 4px;\n}\n.xve-backstage-card p {\n	margin: 0;\n}\n.xve-backstage-primary {\n	padding: 8px 18px;\n	border: 0;\n	border-radius: 4px;\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n	white-space: nowrap;\n}\n.xve-backstage-field {\n	display: grid;\n	gap: 4px;\n	max-width: 420px;\n	margin-bottom: 14px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-backstage-field input,\n.xve-backstage-field select {\n	height: 32px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		14px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-backstage-check {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	margin-bottom: 10px;\n}\n.xve-customize-group {\n	margin: 0 0 8px;\n	padding: 6px 10px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n}\n.xve-customize-group legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-customize-row {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	min-width: 180px;\n	padding: 2px 8px 2px 0;\n	font-size: 13px;\n}\n@media (max-width: 760px) {\n	.xve-backstage-content {\n		padding: 20px;\n	}\n	.xve-backstage-columns {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.xve-backstage-properties {\n		padding-left: 0;\n		border-left: 0;\n	}\n}\n";
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/chart-series.css?raw
+var chart_series_default = ".xve-canvas-row {\n	display: flex;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n}\n.xve-chart-series-pane {\n	box-sizing: border-box;\n	width: 300px;\n	max-width: 45%;\n	flex: none;\n	overflow: auto;\n	border-left: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-chart-series-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 12px 12px 12px 18px;\n	border-bottom: 1px solid var(--line);\n}\n.xve-chart-series-header h2 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 400;\n}\n.xve-chart-series-body,\n.xve-chart-series-pane > .xve-note {\n	margin: 0;\n	padding: 18px;\n}\n.xve-chart-series-body h3 {\n	margin: 0 0 20px;\n	font-size: 13px;\n	font-weight: 600;\n}\n.xve-chart-series-body .xve-field {\n	display: grid;\n	grid-template-columns: 1fr 70px 12px;\n	align-items: center;\n	gap: 6px;\n	margin: 14px 0;\n}\n.xve-chart-series-body .xve-input-number {\n	box-sizing: border-box;\n	width: 70px;\n	min-width: 0;\n}\n.xve-chart-series-range .office-range-control {\n	box-sizing: border-box;\n	width: 100%;\n	margin: 0 0 8px;\n}\n.xve-chart-series-fill {\n	margin-top: 20px;\n	padding-top: 18px;\n	border-top: 1px solid var(--line);\n}\n.xve-chart-series-body .xve-field:has(select),\n.xve-chart-series-body .xve-field:has(.xve-chart-series-color),\n.xve-chart-series-body .xve-field:has(office-ui-gallery) {\n	grid-template-columns: 1fr minmax(100px, 1fr);\n}\n.xve-chart-series-body office-ui-gallery .trigger {\n	box-sizing: border-box;\n	width: 100%;\n	white-space: normal;\n}\n.xve-chart-series-color {\n	height: 28px;\n	background: var(--series-fill);\n	border: 1px solid var(--line);\n	cursor: pointer;\n}\n.xve-chart-series-color:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.xve-chart-series-gradient {\n	margin-top: 18px;\n}\n.xve-chart-gradient-buttons {\n	display: flex;\n	gap: 8px;\n	justify-content: flex-end;\n}\n.xve-chart-gradient-selector {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n}\n.xve-chart-gradient-selector .office-gradient-stop-track {\n	flex: 1;\n	min-width: 0;\n}\n.xve-chart-gradient-buttons .xve-button {\n	width: 26px;\n	height: 28px;\n	padding: 0;\n	font-size: 18px;\n}\n";
+
 // src/xlsx/theme/styles.ts
 var declarations = (theme, scheme) => Object.entries(themeToCssVars(theme)).map(([name, value]) => `${name}:${value};`).join("") + `color-scheme:${scheme};`;
 var themeTokenText = `:host{${declarations(lightTheme, "light")}}
@@ -39,7 +47,9 @@ var editorStyleText = [
   shell_default,
   ribbon_default,
   popups_default,
-  backstage_default
+  backstage_default,
+  chart_series_default,
+  withTokens(range_control_default)
 ].join("\n");
 
 // src/xlsx/editor-attributes.ts
@@ -215,7 +225,7 @@ var runFile = (page, command, fileName) => () => {
 function customProperties(page, workbook) {
   const { doc, host, t } = page;
   const section = doc.createElement("section");
-  const render = () => {
+  const render3 = () => {
     section.replaceChildren(heading(page, t("Custom properties"), "h3"));
     const properties = workbook.properties.custom ?? [];
     for (const [index, property] of properties.entries()) {
@@ -254,7 +264,7 @@ function customProperties(page, workbook) {
           "custom",
           (workbook.properties.custom ?? []).filter((_, i) => i !== index)
         );
-        render();
+        render3();
       });
       remove.disabled = host.ctx.readOnly();
       section.append(labelled(page, property.name, input), remove);
@@ -268,7 +278,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 }]);
-      render();
+      render3();
     });
     add.disabled = host.ctx.readOnly();
     section.append(
@@ -277,7 +287,7 @@ function customProperties(page, workbook) {
       add
     );
   };
-  render();
+  render3();
   return section;
 }
 
@@ -414,92 +424,6 @@ function renderInfo(page) {
   layout.append(left, right);
   content.replaceChildren(heading(page, t("Info")), layout);
 }
-
-// src/xlsx/events.ts
-var XLSX_EDITOR_EVENTS = [
-  "workbook-change",
-  "workbook-error",
-  "workbook-warning",
-  "readonly-change",
-  "ribbon-action",
-  "ribbon-customize",
-  "file-command",
-  "selection-change",
-  "sheet-change",
-  "dirty-change"
-];
-var CANCELABLE = /* @__PURE__ */ new Set(["file-command"]);
-function emitEvent(target24, type, detail) {
-  if (typeof CustomEvent === "undefined") return true;
-  return target24.dispatchEvent(
-    new CustomEvent(type, {
-      detail,
-      bubbles: true,
-      composed: true,
-      cancelable: CANCELABLE.has(type)
-    })
-  );
-}
-function emit(target24, type, detail) {
-  return emitEvent(target24, type, detail);
-}
-
-// src/xlsx/file-commands.ts
-var XLSX_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-var TYPES = {
-  xlsx: XLSX_TYPE,
-  xlsm: "application/vnd.ms-excel.sheet.macroEnabled.12",
-  csv: "text/csv;charset=utf-8",
-  xls: "application/vnd.ms-excel"
-};
-var OPEN_ACCEPT = ".xlsx,.xlsm,.xltx,.xls,.csv,.tsv,.txt";
-function announceFileCommand(host, command, fileName) {
-  return emit(host, "file-command", { command, ...fileName === void 0 ? {} : { fileName } });
-}
-var extensionOf = (fileName) => /\.([^./\\]+)$/.exec(fileName)?.[1]?.toLowerCase() ?? "";
-function withExtension(fileName, extension) {
-  const base = fileName.trim().replace(/\.[^./\\]+$/, "") || "Book1";
-  return `${base}.${extension}`;
-}
-function saveExtension(fileName) {
-  return extensionOf(fileName) === "xlsm" ? "xlsm" : "xlsx";
-}
-function blobFor(bytes, fileName) {
-  return new Blob([new Uint8Array(bytes)], { type: TYPES[extensionOf(fileName)] ?? XLSX_TYPE });
-}
-function downloadBytes(doc, bytes, fileName) {
-  if (typeof URL.createObjectURL !== "function") return;
-  const url = URL.createObjectURL(blobFor(bytes, fileName));
-  const anchor = doc.createElement("a");
-  anchor.href = url;
-  anchor.download = fileName;
-  anchor.style.display = "none";
-  doc.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 1e3);
-}
-function pickFile(root, accept = OPEN_ACCEPT) {
-  const doc = root.ownerDocument ?? document;
-  const input = doc.createElement("input");
-  input.type = "file";
-  input.accept = accept;
-  input.hidden = true;
-  root.append(input);
-  return new Promise((resolve, reject) => {
-    input.addEventListener("change", () => {
-      const file = input.files?.[0];
-      input.remove();
-      if (!file) return resolve(void 0);
-      file.arrayBuffer().then((buffer) => resolve({ bytes: new Uint8Array(buffer), name: file.name }), reject);
-    });
-    input.addEventListener("cancel", () => {
-      input.remove();
-      resolve(void 0);
-    });
-    input.click();
-  });
-}
 var escapeHtml = (text3) => text3.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
 var edge = (view) => view ? `${view.style === "double" ? 3 : view.widthPx}px ${view.style} ${view.color}` : "none";
 function cellCss(view) {
@@ -1613,6 +1537,7 @@ var SHORTCUTS = [
   { keys: ["Mod+G", "F5"], label: "Go To", command: "home.go-to" },
   { keys: ["Mod+Z"], label: "Undo", command: "edit.undo" },
   { keys: ["Mod+Y", "Mod+Shift+Z"], label: "Redo", command: "edit.redo" },
+  { keys: ["Mod+Alt+V"], label: "Paste Special", command: "home.paste-special" },
   { keys: ["Mod+1"], label: "Format Cells", command: "format.cells" },
   { keys: ["Mod+B", "Mod+2"], label: "Bold", command: "home.bold" },
   { keys: ["Mod+I", "Mod+3"], label: "Italic", command: "home.italic" },
@@ -1726,13 +1651,13 @@ var DISPLAY = {
 function formatKeys(spec, mac) {
   const parsed = parse(spec);
   const key = parsed.code ?? (spec.endsWith("+") ? "+" : spec.split("+").pop() ?? "");
-  const names = [
+  const names2 = [
     parsed.mod ? mac ? "Cmd" : "Ctrl" : "",
     parsed.alt ? mac ? "Option" : "Alt" : "",
     parsed.shift ? "Shift" : "",
     DISPLAY[key.toLowerCase()] ?? (key.length === 1 ? key.toUpperCase() : key)
   ];
-  return names.filter(Boolean).join("+");
+  return names2.filter(Boolean).join("+");
 }
 var displayKeys = (shortcut, mac) => shortcut.keys.filter((spec) => !spec.includes("code:")).map((spec) => formatKeys(spec, mac));
 function findShortcut(event, mac) {
@@ -1997,12 +1922,12 @@ function openMenu(anchor, entries, label = "") {
     item.setAttribute("role", entry.checked === void 0 ? "menuitem" : "menuitemcheckbox");
     if (entry.checked !== void 0) item.setAttribute("aria-checked", String(entry.checked));
     item.disabled = entry.disabled ?? false;
-    const icon5 = doc.createElement("span");
-    icon5.className = "ribbon-menu-icon";
-    if (entry.icon) icon5.append(ribbonIcon(doc, entry.icon, 16));
+    const icon7 = doc.createElement("span");
+    icon7.className = "ribbon-menu-icon";
+    if (entry.icon) icon7.append(ribbonIcon(doc, entry.icon, 16));
     const text3 = doc.createElement("span");
     text3.textContent = entry.label;
-    item.append(icon5, text3);
+    item.append(icon7, text3);
     if (entry.shortcut) {
       const keys = doc.createElement("span");
       keys.className = "ribbon-menu-shortcut";
@@ -3078,10 +3003,10 @@ function openGoTo(ctx) {
     (name) => reference.value = name,
     () => confirm2?.()
   );
-  const names = (workbook?.definedNames ?? []).filter(
+  const names2 = (workbook?.definedNames ?? []).filter(
     (n) => !n.hidden && !n.name.startsWith("_xlnm.")
   );
-  list.setItems(names.map((n) => [n.name, n.name]));
+  list.setItems(names2.map((n) => [n.name, n.name]));
   const special = button(ctx, "Special...");
   return showDialog(
     ctx,
@@ -3121,7 +3046,7 @@ var SPECIAL = [
   ["conditional", "Conditional formats"],
   ["validation", "Data validation"]
 ];
-var TYPES2 = [
+var TYPES = [
   ["numbers", "Numbers"],
   ["text", "Text"],
   ["logicals", "Logicals"],
@@ -3129,7 +3054,7 @@ var TYPES2 = [
 ];
 function openGoToSpecial(ctx) {
   const choice = radios(ctx, "Select", SPECIAL, "comments");
-  const types = TYPES2.map(([value, label]) => ({ value, ...checkbox(ctx, label, true) }));
+  const types = TYPES.map(([value, label]) => ({ value, ...checkbox(ctx, label, true) }));
   const typeBox = ctx.host.ownerDocument.createElement("div");
   typeBox.className = "xve-row";
   typeBox.append(...types.map((t) => t.wrapper));
@@ -3269,15 +3194,15 @@ function openCreateNames(ctx) {
     opened: () => boxes[0]?.input.focus(),
     submit: () => {
       const chosen = boxes.filter((b) => b.input.checked).map((b) => b.edge);
-      const names = namesFromSelection(ctx, chosen);
-      if (!names.length) {
+      const names2 = namesFromSelection(ctx, chosen);
+      if (!names2.length) {
         ctx.toast(ctx.t("No names could be created from the selection."), "warning");
         return void 0;
       }
       t.session.batch("Create names", () => {
-        for (const name of names) t.session.setDefinedName(name);
+        for (const name of names2) t.session.setDefinedName(name);
       });
-      return names.length;
+      return names2.length;
     }
   });
 }
@@ -3580,6 +3505,31 @@ function setLargeCaption(caption, label) {
   caption.classList.add("ribbon-caption");
 }
 
+// src/xlsx/ribbon/shared-gallery.ts
+function renderSharedGallery(scope, control, command) {
+  const { ctx, doc } = scope;
+  defineGallery(doc.defaultView?.customElements);
+  const gallery = doc.createElement("office-ui-gallery");
+  gallery.classList.add("xve-ribbon-gallery");
+  if (command.icon) gallery.setAttribute("icon", command.icon);
+  tagCommand(gallery, command);
+  gallery.addEventListener("office-gallery-pick", (event) => {
+    const pick = event;
+    void ctx.commands.run(command.id, pick.detail.itemId);
+  });
+  scope.updates.push(() => {
+    gallery.state = {
+      id: command.id,
+      label: ctx.t(command.label),
+      disabled: !ctx.commands.isEnabled(command.id),
+      sections: control.sections?.(ctx) ?? []
+    };
+    const trigger = gallery.querySelector(".trigger");
+    if (trigger) tagCommand(trigger, command);
+  });
+  return gallery;
+}
+
 // src/xlsx/ribbon/controls-input.ts
 var optionsOf = (ctx, control) => {
   try {
@@ -3726,6 +3676,7 @@ function applyPreview(node, preview, label) {
   }
 }
 function renderGallery(scope, control, command) {
+  if (control.sections) return renderSharedGallery(scope, control, command);
   const { ctx, doc } = scope;
   const label = ctx.t(command.label);
   const button2 = el2(doc, "button", "ribbon-large ribbon-gallery-button");
@@ -4275,7 +4226,7 @@ function nameValue(ctx, name) {
     return { text: "#NAME?", error: true };
   }
 }
-var visibleNames = (names) => names.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
+var visibleNames = (names2) => names2.filter((n) => !n.hidden && !n.name.startsWith("_xlnm."));
 function openNameManager(ctx) {
   const doc = ctx.host.ownerDocument;
   const filter = select(ctx, FILTERS, "all");
@@ -4292,7 +4243,7 @@ function openNameManager(ctx) {
     deleteButton.disabled = !editable;
     newButton.disabled = ctx.readOnly();
   };
-  const render = () => {
+  const render3 = () => {
     const workbook = ctx.workbook();
     table.replaceChildren();
     const head = table.createTHead().insertRow();
@@ -4303,9 +4254,9 @@ function openNameManager(ctx) {
       head.append(th);
     }
     const body = table.createTBody();
-    const names = visibleNames(workbook?.definedNames ?? []);
-    if (selected && !names.includes(selected)) selected = void 0;
-    for (const name of names) {
+    const names2 = visibleNames(workbook?.definedNames ?? []);
+    if (selected && !names2.includes(selected)) selected = void 0;
+    for (const name of names2) {
       const value = nameValue(ctx, name);
       const kind = filter.value;
       if (kind === "worksheet" && name.localSheet === void 0) continue;
@@ -4338,26 +4289,26 @@ function openNameManager(ctx) {
     }
     sync();
   };
-  filter.addEventListener("change", render);
+  filter.addEventListener("change", render3);
   newButton.addEventListener("click", async () => {
     await ctx.dialogs.open("define-name");
-    render();
+    render3();
   });
   editButton.addEventListener("click", async () => {
     if (!selected) return;
     const props2 = { name: selected.name };
     if (selected.localSheet !== void 0) props2.localSheet = selected.localSheet;
     await ctx.dialogs.open("define-name", props2);
-    render();
+    render3();
   });
   deleteButton.addEventListener("click", () => {
     const session = ctx.session();
     if (!selected || !session || ctx.readOnly()) return;
     session.deleteDefinedName(selected.name, selected.localSheet);
     selected = void 0;
-    render();
+    render3();
   });
-  render();
+  render3();
   return showDialog(ctx, {
     name: "name-manager",
     heading: "Name Manager",
@@ -4834,7 +4785,7 @@ function formulaPanel(ctx) {
     focus: () => input.focus()
   };
 }
-var TYPES3 = [
+var TYPES2 = [
   ["min", "Lowest Value"],
   ["max", "Highest Value"],
   ["num", "Number"],
@@ -4847,7 +4798,7 @@ var argb = (css) => ({ rgb: `FF${css.replace("#", "").toUpperCase()}` });
 function point(ctx, label, types, initial, color) {
   const type = select(
     ctx,
-    TYPES3.filter(([t]) => types.includes(t)),
+    TYPES2.filter(([t]) => types.includes(t)),
     initial
   );
   const value = textInput(ctx);
@@ -5189,7 +5140,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 render = () => {
+  const render3 = () => {
     appliesInputs.length = 0;
     const head = el(ctx, "tr");
     for (const key of ["Rule (applied in order shown)", "Format", "Applies to", "Stop If True"]) {
@@ -5210,7 +5161,7 @@ function cfManagerDialog(ctx) {
           return;
         }
         selected = i;
-        render();
+        render3();
       });
       const desc = el(ctx, "td");
       desc.textContent = describeRule(ctx, entry.rule);
@@ -5265,7 +5216,7 @@ function cfManagerDialog(ctx) {
     const [entry] = entries.splice(selected, 1);
     if (entry) entries.splice(to, 0, entry);
     selected = to;
-    render();
+    render3();
   };
   const newRule = button(ctx, "New Rule...");
   const editRule = button(ctx, "Edit Rule...");
@@ -5279,7 +5230,7 @@ function cfManagerDialog(ctx) {
     if (!result) return;
     entries.unshift(result);
     selected = 0;
-    render();
+    render3();
   });
   editRule.addEventListener("click", async () => {
     if (!commitRanges()) return;
@@ -5287,20 +5238,20 @@ function cfManagerDialog(ctx) {
     if (!entry) return;
     const result = await editRuleDialog(ctx, entry);
     if (result) entries[selected] = result;
-    render();
+    render3();
   });
   deleteRule.addEventListener("click", () => {
     if (selected < 0) return;
     entries.splice(selected, 1);
     selected = Math.min(selected, entries.length - 1);
-    render();
+    render3();
   });
   duplicate.addEventListener("click", () => {
     if (!commitRanges()) return;
     const entry = entries[selected];
     if (!entry) return;
     entries.splice(selected, 0, structuredClone(entry));
-    render();
+    render3();
   });
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -5312,9 +5263,9 @@ function cfManagerDialog(ctx) {
     if (next === void 0) return;
     event.preventDefault();
     selected = next;
-    render();
+    render3();
   });
-  scope.addEventListener("change", render);
+  scope.addEventListener("change", render3);
   const apply = () => {
     if (!commitRanges()) return false;
     const formats = unstageRules(entries);
@@ -5326,12 +5277,12 @@ function cfManagerDialog(ctx) {
         formats.forEach((format2, i) => t.session.replaceConditionalFormat(t.sheet, i, format2));
       });
     entries = stageRules(formats);
-    render();
+    render3();
     return true;
   };
   const applyButton = button(ctx, "Apply");
   applyButton.addEventListener("click", () => void apply());
-  render();
+  render3();
   return showDialog(ctx, {
     name: "cf-manager",
     heading: "Conditional Formatting Rules Manager",
@@ -5761,12 +5712,12 @@ function hyperlinkDialog(ctx) {
   const tooltip2 = textInput(ctx, existing?.tooltip ?? "");
   const address = textInput(ctx, !mail ? existing?.target ?? "" : "");
   const sheets = t.workbook.sheets.map((s) => [s.name, s.name]);
-  const names = t.workbook.definedNames.filter((n) => !n.hidden && !n.name.startsWith("_xlnm.")).map((n) => [`name:${n.name}`, n.name]);
+  const names2 = t.workbook.definedNames.filter((n) => !n.hidden && !n.name.startsWith("_xlnm.")).map((n) => [`name:${n.name}`, n.name]);
   const loc = existing?.location ? splitLocation(existing.location) : { sheet: t.ws.name, ref: "A1" };
-  const isName = !loc.sheet && names.some(([, n]) => n === loc.ref);
+  const isName = !loc.sheet && names2.some(([, n]) => n === loc.ref);
   const place2 = select(
     ctx,
-    [...sheets, ...names],
+    [...sheets, ...names2],
     isName ? `name:${loc.ref}` : loc.sheet ?? t.ws.name,
     true
   );
@@ -5872,7 +5823,7 @@ function sortDialog(ctx) {
     }
     return out;
   };
-  const render = () => {
+  const render3 = () => {
     list.replaceChildren(
       ...levels.map((level, i) => {
         level.element.setAttribute("aria-selected", String(i === selected));
@@ -5901,11 +5852,11 @@ function sortDialog(ctx) {
     const level = { element, column, order };
     element.addEventListener("focusin", () => {
       selected = levels.indexOf(level);
-      render();
+      render3();
     });
     levels.splice(at, 0, level);
     selected = at;
-    render();
+    render3();
   };
   addLevel(
     t.active.col >= region.start.col && t.active.col <= region.end.col ? t.active.col : region.start.col,
@@ -5934,7 +5885,7 @@ function sortDialog(ctx) {
     if (levels.length <= 1) return;
     levels.splice(selected, 1);
     selected = Math.max(0, Math.min(selected, levels.length - 1));
-    render();
+    render3();
   });
   copy.addEventListener("click", () => {
     const level = levels[selected];
@@ -5946,7 +5897,7 @@ function sortDialog(ctx) {
     const [level] = levels.splice(selected, 1);
     if (level) levels.splice(to, 0, level);
     selected = to;
-    render();
+    render3();
   };
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -6216,14 +6167,14 @@ function registerSimpleDialogs(ctx) {
   d.register("use-in-formula", (c) => {
     const t = target(c);
     if (!t) return Promise.resolve(void 0);
-    const names = t.workbook.definedNames.filter(
+    const names2 = t.workbook.definedNames.filter(
       (n) => !n.hidden && !n.name.startsWith("_xlnm.") && (n.localSheet === void 0 || n.localSheet === t.sheet)
     );
     return pickDialog(c, {
       name: "use-in-formula",
       heading: "Paste Name",
       label: "Paste name",
-      items: names.map((n) => [n.name, n.name]),
+      items: names2.map((n) => [n.name, n.name]),
       apply: (name) => {
         const grid = c.grid();
         const cell = getCell(t.ws, t.active.row, t.active.col);
@@ -6583,69 +6534,75 @@ var GROUPINGS = [
   ["stacked", "Stacked"],
   ["percentStacked", "100% Stacked"]
 ];
-function svgNode(ctx, markup) {
-  const Parser = ctx.host.ownerDocument.defaultView?.DOMParser;
-  if (!Parser) return void 0;
-  const doc = new Parser().parseFromString(markup, "image/svg+xml");
-  if (doc.querySelector("parsererror")) return void 0;
-  return ctx.host.ownerDocument.importNode(doc.documentElement, true);
-}
 function openInsertChart(ctx, props2 = {}) {
   const t = target(ctx);
   if (!t) return Promise.resolve(void 0);
   const change = props2.change === true ? activeChart(ctx) : void 0;
   let type = props2.type ?? change?.chart.chartType ?? "column";
   const range2 = regionOf(t);
-  const tiles = el(ctx, "div", "xve-tiles");
-  tiles.setAttribute("role", "group");
-  tiles.setAttribute("aria-label", ctx.t("Chart type"));
+  defineGallery(ctx.host.ownerDocument.defaultView?.customElements);
+  const tiles = ctx.host.ownerDocument.createElement("office-ui-gallery");
+  tiles.setAttribute("mode", "panel");
   const grouping = select(ctx, GROUPINGS, change?.chart.grouping ?? "clustered");
   const groupingField = field(ctx, "Grouping", grouping);
   const title = textInput(ctx, change?.chart.title ?? "");
   const preview = el(ctx, "div", "xve-preview");
   preview.setAttribute("aria-label", ctx.t("Preview"));
   preview.setAttribute("role", "img");
-  const buttons = /* @__PURE__ */ new Map();
   const current = () => {
-    if (change) return { ...structuredClone(change.chart), chartType: type };
+    if (change)
+      return {
+        ...structuredClone(change.chart),
+        chartType: type,
+        grouping: grouping.value
+      };
     return buildChart(t.workbook, t.sheet, range2, type, {
       grouping: grouping.value,
       ...title.value.trim() ? { title: title.value.trim() } : {}
     });
   };
   const refresh = () => {
-    for (const [key, button2] of buttons) button2.setAttribute("aria-pressed", String(key === type));
-    groupingField.hidden = !!change || !(type === "column" || type === "bar");
+    tiles.state = {
+      id: "chart-type",
+      label: ctx.t("Chart type"),
+      sections: [
+        {
+          columns: 4,
+          tileWidth: 96,
+          tileHeight: 60,
+          items: CHART_TYPES.map(([key, label]) => ({
+            id: key,
+            label: ctx.t(label),
+            applied: key === type,
+            preview: renderChartSvg(
+              chartView(
+                t.workbook,
+                t.sheet,
+                { ...current(), chartType: key, title: "", showLegend: false },
+                (ref) => evaluateRef(t.workbook, t.sheet, ref)
+              ),
+              360,
+              220
+            )
+          }))
+        }
+      ]
+    };
+    groupingField.hidden = !(type === "column" || type === "bar");
     const model = chartView(
       t.workbook,
       t.sheet,
       current(),
       (ref) => evaluateRef(t.workbook, t.sheet, ref)
     );
-    const node = svgNode(ctx, renderChartSvg(model, 360, 220));
+    const node = parseSvgPreview(ctx.host.ownerDocument, renderChartSvg(model, 360, 220));
     preview.replaceChildren(...node ? [node] : []);
   };
-  for (const [key, label] of CHART_TYPES) {
-    const button2 = el(ctx, "button", "xve-tile");
-    button2.type = "button";
-    button2.textContent = ctx.t(label);
-    button2.dataset.type = key;
-    button2.addEventListener("click", () => {
-      type = key;
-      refresh();
-    });
-    buttons.set(key, button2);
-    tiles.append(button2);
-  }
-  tiles.addEventListener("keydown", (event) => {
-    const list = [...buttons.values()];
-    const i = list.indexOf(event.target);
-    const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
-    if (i < 0 || !delta) return;
-    event.preventDefault();
-    const next = list[(i + delta + list.length) % list.length];
-    next?.focus();
-    next?.click();
+  tiles.addEventListener("office-gallery-pick", (event) => {
+    const key = event.detail.itemId;
+    if (!CHART_TYPES.some(([id]) => id === key)) return;
+    type = key;
+    refresh();
   });
   grouping.addEventListener("change", refresh);
   title.addEventListener("input", refresh);
@@ -6660,10 +6617,14 @@ function openInsertChart(ctx, props2 = {}) {
     heading: change ? "Change Chart Type" : "Insert Chart",
     wide: true,
     body,
-    opened: () => buttons.get(type)?.focus(),
+    opened: () => tiles.querySelector(`[data-gallery-item="${type}"]`)?.focus(),
     submit: () => {
       const chart = current();
-      if (change) editChart(ctx, () => ({ chartType: type }));
+      if (change)
+        editChart(ctx, () => ({
+          chartType: type,
+          ...type === "column" || type === "bar" ? { grouping: grouping.value } : {}
+        }));
       else {
         const { kind: _kind, ...model } = chart;
         ctx.selection.set({ drawing: t.session.addChart(t.sheet, model) });
@@ -6947,13 +6908,18 @@ function openPageSetup(ctx, props2 = {}) {
     }
   });
 }
+
+// src/xlsx/dialogs/paste-special.ts
 var PASTE = [
   ["all", "All"],
   ["formulas", "Formulas"],
   ["values", "Values"],
   ["formats", "Formats"],
   ["noBorders", "All except borders"],
-  ["widths", "Column widths"]
+  ["mergeFormats", "All merging conditional formats"],
+  ["widths", "Column widths"],
+  ["comments", "Comments"],
+  ["validation", "Validation"]
 ];
 var OPERATIONS = [
   ["none", "None"],
@@ -6964,29 +6930,21 @@ var OPERATIONS = [
 ];
 function openPasteSpecial(ctx) {
   const paste = radios(ctx, "Paste", PASTE, "all");
-  for (const input of paste.inputs)
-    if (input.value === "noBorders" || input.value === "widths") input.disabled = true;
   const operation = radios(ctx, "Operation", OPERATIONS, "none");
-  for (const input of operation.inputs) if (input.value !== "none") input.disabled = true;
   const skip = checkbox(ctx, "Skip blanks");
-  skip.input.disabled = true;
   const transpose = checkbox(ctx, "Transpose");
   return showDialog(ctx, {
     name: "paste-special",
     heading: "Paste Special",
-    body: [
-      row(ctx, paste.element, operation.element),
-      row(ctx, skip.wrapper, transpose.wrapper),
-      text(
-        ctx,
-        "Operations, skip blanks and transpose combined with values are not supported yet."
-      )
-    ],
+    body: [row(ctx, paste.element, operation.element), row(ctx, skip.wrapper, transpose.wrapper)],
     opened: () => paste.inputs[0]?.focus(),
     submit: () => {
-      const mode = transpose.input.checked ? "transpose" : paste.get();
-      pasteWith(ctx, mode);
-      return mode;
+      return {
+        mode: paste.get(),
+        transpose: transpose.input.checked,
+        skipBlanks: skip.input.checked,
+        operation: operation.get()
+      };
     }
   });
 }
@@ -7888,6 +7846,58 @@ 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) {
+  const w = size.width / Math.max(colors.length, 1);
+  const body = colors.map(
+    (color, i) => `<rect x="${num(i * w)}" y="0" width="${num(w)}" height="${size.height}" fill="${safeColor(color, "#808080")}"/>`
+  ).join("");
+  return svgTile(size.width, size.height, "", body);
+}
+
+// src/xlsx/commands/chart-colors.ts
+function chartColorGallerySections(ctx) {
+  const workbook = ctx.workbook();
+  const selectedChart = activeChart(ctx);
+  if (!workbook || !selectedChart) return [];
+  const scheme = chartColorScheme(workbook.theme);
+  const selected = 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: selected === palette.id
+    }))
+  }));
+}
+var chartColorGalleryItems = (ctx) => chartColorGallerySections(ctx).flatMap((section) => section.items);
+
 // src/xlsx/ribbon/tabs/contextual.ts
 function tableDesignTab() {
   return {
@@ -7944,6 +7954,18 @@ function chartDesignTab() {
     label: "Chart Design",
     contextual: (ctx) => !!activeChart(ctx),
     groups: [
+      {
+        id: "chart-styles",
+        label: "Chart Styles",
+        controls: [
+          {
+            kind: "gallery",
+            command: "chart.colors",
+            items: chartColorGalleryItems,
+            sections: chartColorGallerySections
+          }
+        ]
+      },
       {
         id: "chart-layouts",
         label: "Chart Layouts",
@@ -7964,6 +7986,14 @@ function chartDesignTab() {
           }
         ]
       },
+      {
+        id: "series-options",
+        label: "Series Options",
+        controls: [
+          { kind: "button", command: "chart.format-series", size: "large" },
+          { kind: "button", command: "chart.format-area", size: "large" }
+        ]
+      },
       {
         id: "chart-delete",
         label: "Delete",
@@ -8705,6 +8735,1146 @@ function reviewCommands() {
     })
   ];
 }
+function seriesFillBinding(selected) {
+  return {
+    commandId: "chart.format-series",
+    key: selected,
+    fill: (chart) => chart.series[selected()]?.fill,
+    gradient: (view) => view.series[selected()]?.gradient,
+    paint: (view) => view.series[selected()]?.color,
+    rectangular: (chart) => chart.chartType === "bar" || chart.chartType === "column",
+    color: (chart, color) => chartSeriesFillPatch(chart, selected(), color),
+    solid: (chart) => chartSeriesSolidFillPatch(chart, selected()),
+    edit: (chart, edit) => chartSeriesGradientPatch(chart, selected(), edit),
+    transparency: (chart) => chartSeriesTransparency(chart, selected()),
+    setTransparency: (chart, value) => chartSeriesTransparencyPatch(chart, selected(), value),
+    preview: (chart, patch) => ({ ...chart, ...patch })
+  };
+}
+function backgroundFillBinding(selected) {
+  return {
+    commandId: "chart.format-area",
+    key: selected,
+    fill: (chart) => chartElementFill(chart, selected()),
+    gradient: (view) => view.appearance?.[selected()]?.gradient,
+    paint: (view) => view.appearance?.[selected()]?.fillColor ?? (selected() === "chartArea" ? "#FFFFFF" : "none"),
+    rectangular: () => true,
+    color: (chart, color) => chartElementFillPatch(chart, selected(), color),
+    solid: (chart) => chartElementSolidFillPatch(chart, selected()),
+    edit: (chart, edit) => chartElementGradientPatch(chart, selected(), edit),
+    transparency: (chart) => chartElementTransparency(chart, selected()),
+    setTransparency: (chart, value) => chartElementTransparencyPatch(chart, selected(), value),
+    preview: (chart, patch) => chartWithElementFills(chart, patch.elementFills ?? {})
+  };
+}
+function createNumberRange(input, options) {
+  const element = input.ownerDocument.createElement("div");
+  let original;
+  const enabled = () => !input.disabled && (options.enabled?.() ?? true);
+  const cancel = () => {
+    if (original === void 0) return;
+    input.value = original;
+    original = void 0;
+    options.onPreview?.(void 0);
+    paint();
+  };
+  const paint = () => render(
+    rangeControl({
+      label: options.label(),
+      value: input.valueAsNumber,
+      valueText: input.value ? `${input.value}%` : "",
+      min: Number(input.min),
+      max: Number(input.max),
+      step: Number(input.step) || 1,
+      disabled: !enabled(),
+      onInput: (value) => {
+        if (!enabled() || !Number.isFinite(value)) return;
+        original ??= input.value;
+        input.value = String(value);
+        options.onPreview?.(value);
+        paint();
+      },
+      onChange: () => {
+        if (original === void 0) return;
+        if (!enabled()) return cancel();
+        const value = input.value;
+        cancel();
+        input.value = value;
+        input.dispatchEvent(new Event("change"));
+        paint();
+      }
+    }),
+    element
+  );
+  element.addEventListener("pointercancel", cancel);
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && original !== void 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  });
+  return {
+    element,
+    cancel,
+    refresh: () => {
+      cancel();
+      paint();
+    }
+  };
+}
+
+// src/xlsx/chart-series-transparency.ts
+function createSeriesTransparency(ctx, selected, binding = seriesFillBinding(selected)) {
+  const element = el(ctx, "div");
+  const input = numberInput(ctx, 0, 0, 100);
+  const row2 = field(ctx, "Transparency", input);
+  const unit = el(ctx, "span");
+  unit.textContent = "%";
+  row2.append(unit);
+  const range2 = createNumberRange(input, {
+    label: () => ctx.t("Transparency"),
+    enabled: () => ctx.commands.isEnabled(binding.commandId)
+  });
+  range2.element.className = "xve-chart-series-range";
+  element.append(row2, range2.element);
+  let current;
+  const refresh = (chart) => {
+    range2.cancel();
+    current = chart;
+    const value = chart ? binding.transparency(chart) : void 0;
+    input.value = String(value ?? 0);
+    input.disabled = value === void 0 || !ctx.commands.isEnabled(binding.commandId);
+    row2.querySelector("span").textContent = ctx.t("Transparency");
+    input.setAttribute("aria-label", ctx.t("Transparency"));
+    range2.refresh();
+  };
+  input.addEventListener("change", () => {
+    if (!current || input.disabled || !ctx.commands.isEnabled(binding.commandId))
+      return refresh(current);
+    if (!input.checkValidity() || !Number.isInteger(input.valueAsNumber)) {
+      ctx.toast(
+        ctx.t("Enter a whole number from {min} to {max}.", { min: 0, max: 100 }),
+        "warning"
+      );
+      return refresh(current);
+    }
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return refresh(current);
+    const patch = binding.setTransparency(current, input.valueAsNumber);
+    if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+    refresh(found.chart);
+  });
+  return { element, refresh };
+}
+function createGradientStopTrack(doc) {
+  const element = doc.createElement("div");
+  element.className = "office-gradient-stop-track";
+  element.setAttribute("role", "group");
+  const style = doc.createElement("style");
+  style.textContent = `.office-gradient-stop-track{position:relative;height:40px;margin:12px 7px}
+.office-gradient-stop-paint{position:absolute;inset:3px 0 15px;border:1px solid var(--line,#aaa)}
+.office-gradient-stop{position:absolute;top:0;width:14px;height:30px;padding:0;border:1px solid var(--line,#888);border-radius:2px;cursor:pointer;touch-action:none}
+.office-gradient-stop[aria-pressed=true]{outline:2px solid var(--accent,#217346);outline-offset:2px}
+.office-gradient-stop:focus-visible{outline:2px solid var(--accent,#217346);outline-offset:3px}
+.office-gradient-stop:disabled{opacity:.5;cursor:default}`;
+  const paint = doc.createElement("div");
+  paint.className = "office-gradient-stop-paint";
+  let current;
+  let drag;
+  const paintStops = (stops) => {
+    paint.style.background = `linear-gradient(90deg,${sortGradientStops(stops).map((stop) => `${stop.color} ${stop.position}%`).join(",")})`;
+  };
+  const cancel = () => {
+    if (!drag) return;
+    const previous = drag;
+    drag = void 0;
+    paintStops(current.stops);
+    element.querySelectorAll("button")[previous.index]?.style.setProperty("left", `calc(${previous.origin}% - 7px)`);
+    current.onPreview?.(previous.index, void 0);
+    if (element.hasPointerCapture?.(previous.pointer))
+      element.releasePointerCapture(previous.pointer);
+  };
+  const update = (options) => {
+    cancel();
+    current = options;
+    element.setAttribute("aria-label", options.label);
+    paintStops(options.stops);
+    element.replaceChildren(
+      style,
+      paint,
+      ...options.stops.map((stop, index) => {
+        const button2 = doc.createElement("button");
+        button2.type = "button";
+        button2.className = "office-gradient-stop";
+        button2.disabled = options.disabled;
+        button2.setAttribute("aria-label", options.stopLabel(index));
+        button2.setAttribute("aria-pressed", String(index === options.selected));
+        button2.style.left = `calc(${stop.position}% - 7px)`;
+        button2.style.background = stop.color;
+        button2.addEventListener("click", () => {
+          if (!current.disabled) current.onSelect(index);
+        });
+        button2.addEventListener("keydown", (event) => {
+          const next = event.key === "ArrowRight" ? index + 1 : event.key === "ArrowLeft" ? index - 1 : void 0;
+          if (next === void 0 || current.disabled) return;
+          event.preventDefault();
+          const selected = Math.max(0, Math.min(current.stops.length - 1, next));
+          current.onSelect(selected);
+          element.querySelectorAll("button")[selected]?.focus();
+        });
+        return button2;
+      })
+    );
+  };
+  element.addEventListener("pointerdown", (event) => {
+    if (drag || !current || event.isPrimary === false || event.button !== 0 || current.disabled || !current.onMove)
+      return;
+    const button2 = event.target.closest("button");
+    const index = Array.from(element.querySelectorAll("button")).indexOf(
+      button2
+    );
+    if (index < 0) return;
+    event.preventDefault();
+    current.onSelect(index);
+    const width = paint.getBoundingClientRect().width;
+    const origin = current.stops[index]?.position;
+    if (!width || origin === void 0) return;
+    drag = { pointer: event.pointerId, index, x: event.clientX, width, origin, value: origin };
+    try {
+      element.setPointerCapture?.(event.pointerId);
+    } catch {
+    }
+    element.querySelectorAll("button")[index]?.focus();
+  });
+  element.addEventListener("pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.pointer || current.disabled) return;
+    const value = Math.max(
+      0,
+      Math.min(100, Math.round(drag.origin + (event.clientX - drag.x) / drag.width * 100))
+    );
+    if (value === drag.value) return;
+    drag.value = value;
+    element.querySelectorAll("button")[drag.index]?.style.setProperty("left", `calc(${value}% - 7px)`);
+    paintStops(
+      current.stops.map(
+        (stop, index) => index === drag.index ? { ...stop, position: value } : stop
+      )
+    );
+    current.onPreview?.(drag.index, value);
+  });
+  element.addEventListener("pointerup", (event) => {
+    if (!drag || event.pointerId !== drag.pointer) return;
+    const previous = drag;
+    cancel();
+    if (!current.disabled && element.isConnected && previous.value !== previous.origin)
+      current.onMove?.(previous.index, previous.value);
+  });
+  for (const name of ["pointercancel", "lostpointercapture"])
+    element.addEventListener(name, (event) => {
+      if (drag?.pointer === event.pointerId) cancel();
+    });
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && drag) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  });
+  return {
+    element,
+    update,
+    cancel,
+    preview: (stops) => {
+      paintStops(stops);
+      const buttons = element.querySelectorAll("button");
+      stops.forEach((stop, index) => {
+        const button2 = buttons[index];
+        if (button2) {
+          button2.style.left = `calc(${stop.position}% - 7px)`;
+          button2.style.background = stop.color;
+        }
+      });
+    }
+  };
+}
+function gradientGalleryPreview(id, fill) {
+  const def = buildChartGradientDef(id, fill, { width: 38, height: 38, shape: "rect" });
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs>${chartGradientMarkup(def)}</defs><rect x="1" y="1" width="38" height="38" fill="url(#${def.id})" stroke="#999"/></svg>`;
+}
+
+// src/form/gradient-direction-gallery.ts
+var DIRECTIONS2 = [
+  [0, "Linear Right"],
+  [45, "Linear Diagonal - Bottom Right"],
+  [90, "Linear Down"],
+  [135, "Linear Diagonal - Bottom Left"],
+  [180, "Linear Left"],
+  [225, "Linear Diagonal - Top Left"],
+  [270, "Linear Up"],
+  [315, "Linear Diagonal - Top Right"]
+];
+var sequence = 0;
+function createGradientDirectionGallery(doc) {
+  const prefix = `office-gradient-direction-${++sequence}`;
+  defineGallery(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-gallery");
+  let current;
+  element.addEventListener("office-gallery-pick", (event) => {
+    const id = event.detail.itemId;
+    if (["rect", "circle", "shape"].includes(current?.gradient.path ?? "")) {
+      const direction2 = RECT_GRADIENT_DIRECTIONS.find((direction3) => direction3.id === id);
+      if (direction2 && current && !current.disabled) {
+        if (current.onPathPick) current.onPathPick(direction2.id);
+        else if (current.gradient.path === "rect") current.onRectPick?.(direction2.id);
+      }
+      return;
+    }
+    const direction = DIRECTIONS2.find(([angle]) => String(angle) === id);
+    if (direction && current && !current.disabled) current.onPick(direction[0]);
+  });
+  const update = (options) => {
+    current = options;
+    if (options.disabled) element.open = false;
+    const rectangular = ["rect", "circle", "shape"].includes(options.gradient.path ?? "");
+    const items2 = rectangular ? RECT_GRADIENT_DIRECTIONS.map(({ id, label }) => ({
+      id,
+      label: options.translate(label),
+      applied: rectGradientDirection(options.gradient.fillToRect) === id,
+      preview: gradientGalleryPreview(
+        `${prefix}-${id}`,
+        withChartGradientDirection(options.gradient, id)
+      )
+    })) : DIRECTIONS2.map(([angle, label]) => ({
+      id: String(angle),
+      label: options.translate(label),
+      applied: options.gradient.angle === angle,
+      preview: gradientGalleryPreview(`${prefix}-${angle}`, {
+        ...options.gradient,
+        type: "linear",
+        angle
+      })
+    }));
+    element.state = {
+      id: "gradient-direction",
+      label: options.label,
+      moreLabel: options.label,
+      disabled: options.disabled,
+      sections: [
+        {
+          columns: 4,
+          tileWidth: 44,
+          tileHeight: 44,
+          items: items2
+        }
+      ]
+    };
+  };
+  return {
+    element,
+    update,
+    close: () => {
+      element.open = false;
+    }
+  };
+}
+var sequence2 = 0;
+function createGradientPresetGallery(doc) {
+  const prefix = `office-gradient-preset-${++sequence2}`;
+  defineGallery(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-gallery");
+  let current;
+  element.addEventListener("office-gallery-pick", (event) => {
+    const id = event.detail.itemId;
+    const preset = OFFICE_GRADIENT_PRESETS.find((preset2) => String(preset2.id) === id);
+    if (preset && current && !current.disabled) current.onPick(preset.id);
+  });
+  return {
+    element,
+    close: () => {
+      element.open = false;
+    },
+    update(options) {
+      current = options;
+      if (options.disabled) element.open = false;
+      const selected = officeGradientPresetId(options.fill);
+      element.state = {
+        id: "gradient-presets",
+        label: options.label,
+        moreLabel: options.label,
+        disabled: options.disabled,
+        sections: [
+          {
+            columns: 6,
+            tileWidth: 40,
+            tileHeight: 40,
+            items: OFFICE_GRADIENT_PRESETS.map((preset) => ({
+              id: String(preset.id),
+              label: options.translate(preset.label),
+              applied: preset.id === selected,
+              preview: gradientGalleryPreview(
+                `${prefix}-${preset.id}`,
+                resolveChartGradient(
+                  officeGradientPresetFill(preset.id),
+                  (color) => resolveDrawingColor(color)
+                )
+              )
+            }))
+          }
+        ]
+      };
+    }
+  };
+}
+
+// src/xlsx/chart-series-gradient-type.ts
+function createGradientTypeField(ctx, onPick) {
+  const input = select(ctx, [
+    ["linear", "Linear"],
+    ["circle", "Radial"],
+    ["rect", "Rectangular"],
+    ["shape", "Path"]
+  ]);
+  input.options[1].disabled = true;
+  input.options[3].disabled = true;
+  const other = el(ctx, "option");
+  other.value = "unsupported";
+  other.disabled = true;
+  input.append(other);
+  const element = field(ctx, "Type", input);
+  input.addEventListener("change", () => {
+    if (!input.disabled && !input.selectedOptions[0]?.disabled && ["linear", "rect", "circle", "shape"].includes(input.value))
+      onPick(input.value);
+  });
+  return {
+    element,
+    refresh(fill, disabled, rectangularMarks = false) {
+      input.options[1].disabled = input.options[3].disabled = !rectangularMarks;
+      element.querySelector("span").textContent = ctx.t("Type");
+      input.setAttribute("aria-label", ctx.t("Type"));
+      const linearLabel = ctx.t("Linear gradient");
+      input.options[0].textContent = linearLabel === "Linear gradient" ? "Linear" : linearLabel;
+      input.options[1].textContent = ctx.t("Radial");
+      input.options[2].textContent = ctx.t("Rectangular");
+      input.options[3].textContent = ctx.t("Path");
+      other.textContent = ctx.t("Imported gradient type");
+      input.value = !fill.path ? "linear" : ["rect", "circle", "shape"].includes(fill.path) ? fill.path : "unsupported";
+      other.hidden = input.value !== "unsupported";
+      input.disabled = disabled;
+    }
+  };
+}
+function createChartGradientPreview(root, drawing, series, gradient) {
+  const target24 = typeof series === "number" ? `s${series}` : series;
+  const nodes = Array.from(
+    root.querySelectorAll(
+      `.xg-obj[data-index="${drawing}"] :is(linearGradient,radialGradient,pattern)[id$="-${target24}"]`
+    )
+  );
+  const originals = nodes.map((node) => ({
+    node,
+    children: Array.from(node.childNodes).map((child) => child.cloneNode(true))
+  }));
+  const paint = (fill) => {
+    const bounds = nodes.some((node) => node.localName === "pattern") ? { width: 1, height: 1, shape: "rect" } : void 0;
+    const def = buildChartGradientDef("preview", fill, bounds);
+    for (const node of nodes) {
+      if (!node.isConnected) continue;
+      if (def.kind === "rectPath") {
+        const image = node.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "image");
+        image.setAttribute("href", def.href);
+        image.setAttribute("width", "1");
+        image.setAttribute("height", "1");
+        image.setAttribute("preserveAspectRatio", "none");
+        node.replaceChildren(image);
+        continue;
+      }
+      node.replaceChildren(
+        ...def.stops.map((stop) => {
+          const element = node.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "stop");
+          element.setAttribute("offset", String(stop.offset));
+          element.setAttribute("stop-color", stop.color);
+          element.setAttribute("stop-opacity", String(stop.opacity ?? 1));
+          return element;
+        })
+      );
+    }
+  };
+  return {
+    paint,
+    position(index, position) {
+      paint({
+        ...gradient,
+        stops: gradient.stops.map((stop, i) => i === index ? { ...stop, position } : stop)
+      });
+    },
+    restore() {
+      for (const { node, children } of originals)
+        if (node.isConnected) node.replaceChildren(...children);
+    }
+  };
+}
+function seriesRangePreview(ctx, chart, view, series, stop, drawing, track, color, valid, binding) {
+  const gradient = binding.gradient(view);
+  const book = ctx.workbook();
+  const sheet = ctx.activeSheet();
+  let preview;
+  const strip = (fill) => {
+    track.preview(
+      fill.stops.map((item) => ({
+        position: item.position,
+        color: drawingColorCss({ hex: item.color, alpha: item.opacity ?? 1, unapplied: [] })
+      }))
+    );
+    color.style.setProperty("--series-fill", fill.stops[stop]?.color ?? "transparent");
+  };
+  return (property, value) => {
+    if (value === void 0) {
+      preview?.restore();
+      preview = void 0;
+      if (valid() && gradient) strip(gradient);
+      return;
+    }
+    if (!valid() || !book || !gradient || ctx.workbook() !== book || ctx.activeSheet() !== sheet || !ctx.commands.isEnabled(binding.commandId))
+      return;
+    const result = binding.edit(chart, {
+      kind: "stop",
+      index: stop,
+      [property]: value
+    });
+    const paint = result ? binding.gradient(
+      chartView(
+        book,
+        sheet,
+        binding.preview(chart, result.patch),
+        createRefEvaluator(book, ctx.session()?.calc, { sheet })
+      )
+    ) : gradient;
+    if (!paint) return;
+    preview ??= createChartGradientPreview(ctx.root, drawing, series, gradient);
+    preview.paint(paint);
+    strip(paint);
+  };
+}
+
+// src/xlsx/chart-series-gradient.ts
+function createSeriesGradient(ctx, selected, binding = seriesFillBinding(selected)) {
+  const element = el(ctx, "div", "xve-chart-series-gradient");
+  const angle = numberInput(ctx, 90, 0, 360);
+  const position = numberInput(ctx, 0, 0, 100);
+  const transparency = numberInput(ctx, 0, 0, 100);
+  const brightness = numberInput(ctx, 0, -100, 100);
+  const color = el(ctx, "button", "xve-input xve-chart-series-color");
+  color.type = "button";
+  const track = createGradientStopTrack(element.ownerDocument);
+  const direction = createGradientDirectionGallery(element.ownerDocument);
+  const preset = createGradientPresetGallery(element.ownerDocument);
+  const presetRow = field(ctx, "Preset gradients", preset.element);
+  const type = createGradientTypeField(ctx, (type2) => {
+    direction.close();
+    apply({ kind: "geometry", type: type2 });
+  });
+  const rows = [
+    [field(ctx, "Angle", angle), angle, "Angle"],
+    [field(ctx, "Color", color), color, "Color"],
+    [field(ctx, "Position", position), position, "Position"],
+    [field(ctx, "Brightness", brightness), brightness, "Brightness"],
+    [field(ctx, "Transparency", transparency), transparency, "Transparency"]
+  ];
+  for (const [row2, , label] of rows.filter(([, input]) => input !== color)) {
+    const unit = el(ctx, "span");
+    unit.textContent = label === "Angle" ? "\xB0" : "%";
+    row2.append(unit);
+  }
+  const buttons = el(ctx, "div", "xve-chart-gradient-buttons");
+  const selector = el(ctx, "div", "xve-chart-gradient-selector");
+  const add = el(ctx, "button", "xve-button");
+  add.type = "button";
+  const remove = el(ctx, "button", "xve-button");
+  remove.type = "button";
+  buttons.append(add, remove);
+  selector.append(track.element, buttons);
+  const directionRow = field(ctx, "Direction", direction.element);
+  let previewRange;
+  const ranges = /* @__PURE__ */ new Map();
+  for (const [property, input] of [
+    ["position", position],
+    ["brightness", brightness],
+    ["transparency", transparency]
+  ]) {
+    const range2 = createNumberRange(input, {
+      label: () => input.getAttribute("aria-label") ?? "",
+      enabled: () => {
+        const fill = current && binding.fill(current);
+        return ctx.commands.isEnabled(binding.commandId) && fill?.kind === "gradient" && fill.stops.length === (model && binding.gradient(model)?.stops.length);
+      },
+      onPreview: (value) => {
+        if (value !== void 0) {
+          for (const other of ranges.values()) if (other !== range2) other.cancel();
+        }
+        previewRange?.(property, value);
+      }
+    });
+    range2.element.className = "xve-chart-series-range";
+    ranges.set(input, range2);
+  }
+  element.append(
+    presetRow,
+    type.element,
+    directionRow,
+    rows[0][0],
+    selector,
+    ...rows.slice(1).flatMap(([row2, input]) => {
+      const range2 = ranges.get(input);
+      return range2 ? [row2, range2.element] : [row2];
+    })
+  );
+  let current;
+  let model;
+  let stopIndex = 0;
+  let seriesIndex = -1;
+  let drawingIndex = -1;
+  let shownBook = ctx.workbook();
+  let shownSheet = -1;
+  let shownPath;
+  const apply = (edit) => {
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return;
+    const result = binding.edit(current, edit);
+    if (!result) return;
+    if (edit.kind !== "angle" && edit.kind !== "geometry") stopIndex = result.stopIndex;
+    ctx.session()?.updateChart(ctx.activeSheet(), found.index, result.patch);
+  };
+  const refresh = (chart, view) => {
+    track.cancel();
+    for (const range2 of ranges.values()) range2.cancel();
+    previewRange = void 0;
+    const nextDrawing = activeChart(ctx)?.index ?? -1;
+    if (seriesIndex !== binding.key() || drawingIndex !== nextDrawing || shownBook !== ctx.workbook() || shownSheet !== ctx.activeSheet()) {
+      stopIndex = 0;
+      direction.close();
+      preset.close();
+    }
+    shownBook = ctx.workbook();
+    shownSheet = ctx.activeSheet();
+    seriesIndex = binding.key();
+    drawingIndex = nextDrawing;
+    current = chart;
+    model = view;
+    const fill = chart && binding.fill(chart);
+    element.hidden = fill?.kind !== "gradient";
+    if (fill?.kind !== "gradient") {
+      direction.close();
+      preset.close();
+      return;
+    }
+    stopIndex = Math.max(0, Math.min(stopIndex, fill.stops.length - 1));
+    const disabled = !ctx.commands.isEnabled(binding.commandId);
+    presetRow.querySelector("span").textContent = ctx.t("Preset gradients");
+    preset.update({
+      fill,
+      disabled,
+      label: ctx.t("Preset gradients"),
+      translate: ctx.t,
+      onPick: (id) => apply({ kind: "preset", id })
+    });
+    const rectangularMarks = !!chart && binding.rectangular(chart);
+    type.refresh(fill, disabled, rectangularMarks);
+    if (shownPath !== fill.path) direction.close();
+    shownPath = fill.path;
+    angle.value = String(fill.angle ?? 90);
+    angle.disabled = disabled || !!fill.path;
+    position.value = String(fill.stops[stopIndex]?.position ?? 0);
+    transparency.value = String(chartGradientStopTransparency(fill, stopIndex));
+    const stopColor = fill.stops[stopIndex]?.color;
+    const stopBrightness = stopColor && drawingColorBrightness(stopColor);
+    brightness.value = stopBrightness === void 0 ? "" : String(stopBrightness);
+    position.disabled = transparency.disabled = color.disabled = brightness.disabled = disabled || !fill.stops.length;
+    const stops = (view && binding.gradient(view)?.stops) ?? [];
+    directionRow.querySelector("span").textContent = ctx.t("Direction");
+    direction.update({
+      gradient: (view && binding.gradient(view)) ?? { type: "linear", stops: [] },
+      disabled: disabled || !!fill.path && fill.path !== "rect" && !(rectangularMarks && ["circle", "shape"].includes(fill.path)),
+      label: ctx.t("Direction"),
+      translate: ctx.t,
+      onPick: (value) => apply({ kind: "angle", value }),
+      onRectPick: (direction2) => apply({ kind: "geometry", type: "rect", direction: direction2 }),
+      onPathPick: (direction2) => {
+        if (fill.path === "rect" || fill.path === "circle" || fill.path === "shape")
+          apply({ kind: "geometry", type: fill.path, direction: direction2 });
+      }
+    });
+    brightness.disabled ||= stopBrightness === void 0;
+    const previewSeries = binding.key();
+    const previewStop = stopIndex;
+    if (chart && view)
+      previewRange = seriesRangePreview(
+        ctx,
+        chart,
+        view,
+        previewSeries,
+        previewStop,
+        drawingIndex,
+        track,
+        color,
+        () => current === chart && binding.key() === previewSeries && stopIndex === previewStop && binding.fill(chart) === fill,
+        binding
+      );
+    color.style.setProperty("--series-fill", stops[stopIndex]?.color ?? "transparent");
+    let preview;
+    const gradient = view && binding.gradient(view);
+    track.update({
+      stops: stops.map((stop) => ({
+        position: stop.position,
+        color: drawingColorCss({ hex: stop.color, alpha: stop.opacity ?? 1, unapplied: [] })
+      })),
+      selected: stopIndex,
+      disabled: disabled || stops.length !== fill.stops.length,
+      label: ctx.t("Gradient stops"),
+      stopLabel: (index) => ctx.t("Gradient stop {index}", { index: index + 1 }),
+      onSelect: (index) => {
+        stopIndex = index;
+        refresh(current, model);
+      },
+      onMove: (index, position2) => apply({ kind: "stop", index, position: position2 }),
+      onPreview: (index, value) => {
+        if (value === void 0) {
+          preview?.restore();
+          preview = void 0;
+        }
+        if (current !== chart || chart && binding.fill(chart) !== fill) return;
+        position.value = String(value ?? fill.stops[index]?.position ?? 0);
+        if (value !== void 0 && gradient) {
+          preview ??= createChartGradientPreview(ctx.root, drawingIndex, binding.key(), gradient);
+          preview.position(index, value);
+        }
+      }
+    });
+    add.disabled = disabled || !fill.stops.length;
+    remove.disabled = disabled || fill.stops.length <= 2;
+    add.textContent = "+";
+    remove.textContent = "\u2212";
+    add.setAttribute("aria-label", ctx.t("Add gradient stop"));
+    remove.setAttribute("aria-label", ctx.t("Remove gradient stop"));
+    for (const [row2, input, label] of rows) {
+      row2.querySelector("span").textContent = ctx.t(label);
+      input.setAttribute("aria-label", ctx.t(label));
+    }
+    for (const range2 of ranges.values()) range2.refresh();
+  };
+  for (const [input, property] of [
+    [angle, "angle"],
+    [position, "position"],
+    [transparency, "transparency"],
+    [brightness, "brightness"]
+  ]) {
+    input.addEventListener("change", () => {
+      if (input.disabled || !ctx.commands.isEnabled(binding.commandId))
+        return refresh(current, model);
+      const value = input.valueAsNumber;
+      if (!Number.isFinite(value) || !input.checkValidity()) {
+        ctx.toast(
+          ctx.t("Enter a whole number from {min} to {max}.", { min: input.min, max: input.max }),
+          "warning"
+        );
+        return refresh(current, model);
+      }
+      apply(
+        property === "angle" ? { kind: "angle", value } : { kind: "stop", index: stopIndex, [property]: value }
+      );
+    });
+  }
+  add.addEventListener("click", () => {
+    if (!add.disabled) apply({ kind: "add", index: stopIndex });
+  });
+  remove.addEventListener("click", () => {
+    if (!remove.disabled) apply({ kind: "remove", index: stopIndex });
+  });
+  color.addEventListener("click", () => {
+    if (color.disabled || !ctx.commands.isEnabled(binding.commandId)) return;
+    const chart = current;
+    const series = binding.key();
+    const index = stopIndex;
+    const book = ctx.workbook();
+    openColorGrid(
+      color,
+      (choice) => {
+        if (choice && current === chart && binding.key() === series && stopIndex === index && ctx.workbook() === book)
+          apply({ kind: "stop", index, color: choice });
+      },
+      { t: ctx.t, ...book ? { theme: book.theme } : {} }
+    );
+  });
+  return { element, refresh, create: () => apply({ kind: "create" }) };
+}
+
+// src/xlsx/chart-series-fill.ts
+function createSeriesFill(ctx, selected, binding = seriesFillBinding(selected)) {
+  const element = el(ctx, "div", "xve-chart-series-fill");
+  const heading2 = el(ctx, "h3");
+  const kind = select(ctx, []);
+  const kindField = field(ctx, "Fill", kind);
+  const color = el(ctx, "button", "xve-input xve-chart-series-color");
+  color.type = "button";
+  const colorField = field(ctx, "Color", color);
+  const transparency = createSeriesTransparency(ctx, selected, binding);
+  const gradient = createSeriesGradient(ctx, selected, binding);
+  element.append(heading2, kindField, colorField, transparency.element, gradient.element);
+  let current;
+  const apply = (value) => {
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return;
+    const patch = binding.color(current, value);
+    if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+  };
+  kind.addEventListener("change", () => {
+    if (kind.value === "none") apply(null);
+    else if (kind.value === "gradient") gradient.create();
+    else if (kind.value === "solid") {
+      if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
+      const found = activeChart(ctx);
+      if (!found || found.chart !== current) return;
+      const patch = binding.solid(current);
+      if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+    }
+  });
+  color.addEventListener("click", () => {
+    if (!current || !ctx.commands.isEnabled(binding.commandId)) return;
+    const chart = current;
+    const index = binding.key();
+    const workbook = ctx.workbook();
+    openColorGrid(
+      color,
+      (choice) => {
+        if (current === chart && ctx.workbook() === workbook && binding.key() === index && choice)
+          apply(choice);
+      },
+      { t: ctx.t, ...workbook ? { theme: workbook.theme } : {} }
+    );
+  });
+  const refresh = (chart, model) => {
+    current = chart;
+    transparency.refresh(chart);
+    gradient.refresh(chart, model);
+    const fill = chart && binding.fill(chart);
+    const value = fill?.kind === "none" ? "none" : fill?.kind === "gradient" ? "gradient" : fill && fill.kind !== "solid" ? "imported" : "solid";
+    const entries = [
+      ["none", "No fill"],
+      ["solid", "Solid fill"],
+      ["gradient", "Gradient fill"]
+    ];
+    if (value === "imported") entries.push(["imported", "Imported fill"]);
+    kind.replaceChildren(
+      ...entries.map(([key, label]) => {
+        const option = el(ctx, "option");
+        option.value = key;
+        option.textContent = ctx.t(label);
+        option.disabled = key === "imported";
+        return option;
+      })
+    );
+    kind.value = value;
+    colorField.hidden = value !== "solid";
+    transparency.element.hidden = value !== "solid";
+    kind.disabled = !chart || !ctx.commands.isEnabled(binding.commandId);
+    color.disabled = kind.disabled || value !== "solid";
+    const paint = model && binding.paint(model);
+    color.style.setProperty("--series-fill", paint && paint !== "none" ? paint : "transparent");
+    heading2.textContent = ctx.t("Fill");
+    for (const [row2, control, label] of [
+      [kindField, kind, "Fill"],
+      [colorField, color, "Color"]
+    ]) {
+      row2.querySelector("span").textContent = ctx.t(label);
+      control.setAttribute("aria-label", ctx.t(label));
+    }
+  };
+  return { element, refresh };
+}
+
+// src/xlsx/chart-series-pane.ts
+function chartSeriesCommand() {
+  return editing({
+    id: "chart.format-series",
+    label: "Format Data Series",
+    icon: icon("chartColumn"),
+    lock: "objects",
+    enabled: (ctx) => {
+      const type = activeChart(ctx)?.chart.chartType;
+      return type === "column" || type === "bar";
+    },
+    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 selected = 0;
+  let shownWorkbook;
+  let shownSheet = -1;
+  let shownChart = -1;
+  const seriesSelect = select(ctx, []);
+  const seriesField = field(ctx, "Series", seriesSelect);
+  const fills = createSeriesFill(ctx, () => selected);
+  seriesSelect.addEventListener("change", () => {
+    selected = 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)
+      selected = 0;
+    shownWorkbook = workbook;
+    shownSheet = ctx.activeSheet();
+    shownChart = found?.index ?? -1;
+    if (!chart?.series[selected]) selected = 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(selected);
+    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]) {
+      selected = props2;
+      refresh();
+    }
+    overlap.focus();
+  });
+  return { element, refresh, relocalize, close };
+}
+var names = {
+  chartArea: ["Chart Area", "Format Chart Area"],
+  plotArea: ["Plot Area", "Format Plot Area"],
+  title: ["Chart Title", "Format Chart Title"],
+  legend: ["Legend", "Format Legend"]
+};
+function chartAreaCommand() {
+  return editing({
+    id: "chart.format-area",
+    label: "Format Chart Area",
+    icon: icon("chartColumn"),
+    lock: "objects",
+    enabled: (ctx) => !!activeChart(ctx),
+    run: (ctx, arg) => void ctx.dialogs.open("format-chart-area", arg)
+  });
+}
+function createChartAreaPane(ctx, onOpen) {
+  const element = el(ctx, "aside", "xve-chart-series-pane");
+  element.hidden = true;
+  element.setAttribute("role", "complementary");
+  const header = el(ctx, "div", "xve-chart-series-header");
+  const title = el(ctx, "h2");
+  const closeButton = el(ctx, "button", "xve-icon-button");
+  closeButton.type = "button";
+  closeButton.textContent = "\xD7";
+  const body = el(ctx, "div", "xve-chart-series-body");
+  let selected = "chartArea";
+  const target24 = select(ctx, []);
+  const targetField = field(ctx, "Chart element", target24);
+  const fills = createSeriesFill(
+    ctx,
+    () => 0,
+    backgroundFillBinding(() => selected)
+  );
+  const close = () => {
+    fills.refresh(void 0, void 0);
+    element.hidden = true;
+    ctx.grid()?.focus();
+  };
+  closeButton.addEventListener("click", close);
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    }
+  });
+  header.append(title, closeButton);
+  body.append(targetField, fills.element);
+  element.append(header, body);
+  const refresh = () => {
+    if (element.hidden) return;
+    const found = activeChart(ctx), book = ctx.workbook();
+    if (!found || !book) {
+      close();
+      return;
+    }
+    const available = (part) => part === "title" ? !!found.chart.title : part === "legend" ? found.chart.showLegend : true;
+    for (const option of target24.options)
+      option.disabled = !available(option.value);
+    if (!available(selected)) selected = "chartArea";
+    title.textContent = ctx.t(names[selected][1]);
+    element.setAttribute("aria-label", title.textContent);
+    target24.value = selected;
+    target24.disabled = !ctx.commands.isEnabled("chart.format-area");
+    fills.refresh(
+      found.chart,
+      chartView(
+        book,
+        ctx.activeSheet(),
+        found.chart,
+        createRefEvaluator(book, ctx.session()?.calc, { sheet: ctx.activeSheet() })
+      )
+    );
+  };
+  const relocalize = () => {
+    closeButton.setAttribute("aria-label", ctx.t("Close"));
+    targetField.querySelector("span").textContent = ctx.t("Chart element");
+    target24.setAttribute("aria-label", ctx.t("Chart element"));
+    target24.replaceChildren(
+      ...CHART_FILL_PARTS.map((part) => {
+        const option = el(ctx, "option");
+        option.value = part;
+        option.textContent = ctx.t(names[part][0]);
+        return option;
+      })
+    );
+    refresh();
+  };
+  target24.addEventListener("change", () => {
+    if (!target24.disabled && CHART_FILL_PARTS.includes(target24.value))
+      selected = target24.value;
+    refresh();
+  });
+  ctx.dialogs.register("format-chart-area", async (_ctx, part) => {
+    if (!ctx.commands.isEnabled("chart.format-area")) return;
+    onOpen();
+    selected = CHART_FILL_PARTS.includes(part) ? part : "chartArea";
+    element.hidden = false;
+    refresh();
+    target24.focus();
+  });
+  relocalize();
+  return { element, refresh, relocalize, close };
+}
 
 // src/xlsx/commands/index.ts
 function allCommands() {
@@ -8723,7 +9893,9 @@ function allCommands() {
     ...dataCommands(),
     ...reviewCommands(),
     ...viewCommands(),
-    ...contextualCommands()
+    ...contextualCommands(),
+    chartSeriesCommand(),
+    chartAreaCommand()
   ];
 }
 function installCommands(ctx) {
@@ -8769,12 +9941,17 @@ function createGridClipboard(host) {
   };
   const apply = (payload, mode) => {
     const session = ctx.session();
-    const at = ctx.selection.get().ranges[ctx.selection.get().ranges.length - 1]?.start;
+    const at = lastRange();
     if (!session || !at || ctx.readOnly()) return false;
+    if (ctx.selection.get().ranges.length > 1) {
+      ctx.toast(ctx.t("This action won't work on multiple selections."), "warning");
+      return false;
+    }
     try {
+      const wasCut = typeof payload !== "string" && payload.cut;
       const range2 = session.paste(ctx.activeSheet(), at, payload, mode);
       host.selectRange(range2);
-      if (typeof payload !== "string" && payload.cut) {
+      if (typeof payload !== "string" && wasCut) {
         internal = { ...payload, cut: false };
         clearMarquee();
       }
@@ -8897,7 +10074,7 @@ function place(node, left, top, width, height) {
   node.style.width = `${Math.max(0, width)}px`;
   node.style.height = `${Math.max(0, height)}px`;
 }
-function svgNode2(doc, markup) {
+function svgNode(doc, markup) {
   const holder = doc.createElement("div");
   holder.innerHTML = markup;
   return holder.firstElementChild ?? doc.createElement("span");
@@ -9540,6 +10717,7 @@ function paintSmartArt(ctx, node, obj2, theme) {
     art.style.width = "100%";
     art.style.height = "100%";
     art.schemeColors = smartArtSchemeColors(theme);
+    art.schemeFonts = theme ? { major: theme.majorFont, minor: theme.minorFont } : {};
     art.drawing = diagram;
     node.append(art);
   } else {
@@ -9608,14 +10786,25 @@ var DrawingLayer = class {
           node = h(view.doc, "div", "xg-obj");
           node.dataset.index = String(index);
           node.addEventListener("pointerdown", (event) => this.#press(event, index));
+          node.addEventListener("dblclick", (event) => {
+            const series = event.currentTarget.xgSeriesHit;
+            const part = event.currentTarget.xgChartPart;
+            if (series === void 0 && part === void 0) return;
+            event.stopPropagation();
+            view.ctx.selection.set({ drawing: index });
+            if (series !== void 0) void view.ctx.commands.run("chart.format-series", series);
+            else void view.ctx.commands.run("chart.format-area", part);
+          });
           this.#nodes.set(key, node);
         }
         if (node.parentNode !== parent) parent.append(node);
         place(node, box.x, box.y, box.w, box.h);
-        const sig = `${drawing.kind}:${Math.round(box.w)}x${Math.round(box.h)}:${this.#generation}:${this.#selected === index}`;
-        if (node.xgSig === sig) continue;
-        node.xgSig = sig;
-        this.#paint(node, drawing, box, index);
+        const sig = `${drawing.kind}:${Math.round(box.w)}x${Math.round(box.h)}:${this.#generation}`;
+        if (node.xgSig !== sig) {
+          node.xgSig = sig;
+          this.#paint(node, drawing, box);
+        }
+        this.#selection(node, index);
       }
     });
     for (const [key, node] of this.#nodes)
@@ -9624,7 +10813,7 @@ var DrawingLayer = class {
         this.#nodes.delete(key);
       }
   }
-  #paint(node, drawing, box, index) {
+  #paint(node, drawing, box) {
     const view = this.#view;
     const doc = view.doc;
     node.replaceChildren();
@@ -9648,13 +10837,12 @@ var DrawingLayer = class {
           });
           const model = chartView(workbook, view.sheetIndex(), drawing, evaluate);
           node.append(
-            svgNode2(
+            svgNode(
               doc,
-              renderChartSvg(
-                model,
-                Math.max(10, Math.round(box.w)),
-                Math.max(10, Math.round(box.h))
-              )
+              renderChartSvg(model, Math.max(10, box.w), Math.max(10, box.h), {
+                measureText: (content, font) => view.measurer.measure(content, font),
+                measureFont: (font) => view.measurer.fontMetrics(font)
+              })
             )
           );
         } catch {
@@ -9669,10 +10857,15 @@ var DrawingLayer = class {
       node.classList.add("xg-obj-unsupported");
       node.textContent = view.ctx.t("{name} (not shown)", { name: drawing.description });
     }
-    if (this.#selected === index) {
-      node.classList.add("xg-obj-sel");
+  }
+  #selection(node, index) {
+    const selected = this.#selected === index;
+    node.classList.toggle("xg-obj-sel", selected);
+    if (!selected) {
+      for (const grip of node.querySelectorAll(".xg-grip")) grip.remove();
+    } else if (!node.querySelector(".xg-grip")) {
       for (const pos of ["nw", "ne", "sw", "se"]) {
-        const grip = h(doc, "div", "xg-grip", { "data-grip": pos });
+        const grip = h(this.#view.doc, "div", "xg-grip", { "data-grip": pos });
         grip.style.left = pos.includes("w") ? "-4px" : "calc(100% - 4px)";
         grip.style.top = pos.includes("n") ? "-4px" : "calc(100% - 4px)";
         grip.style.cursor = pos === "nw" || pos === "se" ? "nwse-resize" : "nesw-resize";
@@ -9692,6 +10885,11 @@ var DrawingLayer = class {
     const sheet = view.sheet();
     const drawing = sheet?.drawings[index];
     if (!sheet || !drawing) return;
+    const node = event.currentTarget;
+    const series = event.target.closest("[data-chart-series]")?.dataset.chartSeries;
+    node.xgSeriesHit = series === void 0 ? void 0 : Number(series);
+    const part = event.target.closest("[data-chart-part]")?.dataset.chartPart;
+    node.xgChartPart = CHART_FILL_PARTS.includes(part) ? part : void 0;
     view.ctx.selection.set({ drawing: index });
     view.ctx.grid()?.focus();
     const session = view.ctx.session();
@@ -9699,7 +10897,6 @@ var DrawingLayer = class {
     const grip = event.target.closest("[data-grip]")?.dataset.grip;
     const start = view.clientToView(event.clientX, event.clientY);
     const origin = anchorToPixelBox(sheet, drawing.anchor, view.metrics);
-    const node = event.currentTarget;
     let box = origin;
     node.setPointerCapture?.(event.pointerId);
     const move = (e) => {
@@ -9720,7 +10917,7 @@ var DrawingLayer = class {
       node.removeEventListener("pointermove", move);
       node.removeEventListener("pointerup", up);
       node.releasePointerCapture?.(e.pointerId);
-      if (box !== origin)
+      if (box.x !== origin.x || box.y !== origin.y || box.w !== origin.w || box.h !== origin.h)
         session.setDrawingAnchor(
           view.sheetIndex(),
           index,
@@ -9783,9 +10980,9 @@ var GridA11y = class {
   }
   input;
   /** Updates the sink label and announces (debounced) after a selection change. */
-  update(selection, editing5) {
+  update(selection, editing7) {
     const text3 = describeSelection(this.#view, selection);
-    if (!editing5) this.input.setAttribute("aria-label", text3);
+    if (!editing7) this.input.setAttribute("aria-label", text3);
     if (this.#timer) clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
       this.live.textContent = text3;
@@ -9796,7 +10993,6 @@ var GridA11y = class {
     this.live.remove();
   }
 };
-var PASTE_MODES = ["all", "values", "formats", "formulas", "transpose"];
 function currentRegionOrAll(sheet, selection) {
   const region = normalizeRange(currentRegion(sheet, selection.active));
   const single = region.start.row === region.end.row && region.start.col === region.end.col;
@@ -9836,7 +11032,7 @@ function gridCommands(host) {
     session.batch(axis === "down" ? "Fill Down" : "Fill Right", () => {
       for (const range2 of ctx.selection.get().ranges) {
         const plan = fillPlan(range2, axis);
-        if (plan) session.fill(sheet, plan.source, plan.target);
+        if (plan) session.fill(sheet, plan.source, plan.target, "copy");
       }
     });
   };
@@ -9866,8 +11062,7 @@ function gridCommands(host) {
       editing: true,
       enabled: hasSession,
       run: async (_ctx, arg) => {
-        const mode = typeof arg === "string" && PASTE_MODES.includes(arg) ? arg : "all";
-        await host.clipboard.pasteSystem(mode);
+        await host.clipboard.pasteSystem(resolvePasteOptions(arg));
       }
     },
     {
@@ -9887,9 +11082,8 @@ function gridCommands(host) {
       enabled: hasSession,
       run: async (ctx) => {
         const result = await ctx.dialogs.open("paste-special");
-        const mode = typeof result === "string" ? result : result && typeof result === "object" && "mode" in result ? String(result.mode) : void 0;
-        if (mode && PASTE_MODES.includes(mode))
-          await host.clipboard.pasteSystem(mode);
+        if (result !== void 0) await host.clipboard.pasteSystem(resolvePasteOptions(result));
+        ctx.grid()?.focus();
       }
     },
     {
@@ -10795,7 +11989,7 @@ function paintBorders(doc, node, item) {
   node.append(box);
   const diagonal = diagonalSvg(b, item.w, item.h);
   if (diagonal) {
-    const svg = svgNode2(doc, diagonal);
+    const svg = svgNode(doc, diagonal);
     svg.setAttribute("class", "xg-diag");
     node.append(svg);
   }
@@ -10816,18 +12010,30 @@ function paintCell(doc, node, item, zoom) {
     const bar = h(doc, "div", "xg-db");
     const width = Math.max(0, Math.min(1, view.dataBar.fraction)) * (item.w - 4);
     bar.style.width = `${width}px`;
-    const color = view.dataBar.negative ? "#ff0000" : view.dataBar.color;
-    bar.style.background = `linear-gradient(90deg, ${color}, color-mix(in srgb, ${color} 15%, #fff))`;
-    bar.style.borderColor = color;
+    const color = view.dataBar.color;
+    const rtl = view.dataBar.direction === "rightToLeft";
+    bar.style.left = view.dataBar.start === void 0 ? rtl ? "auto" : "2px" : `${2 + view.dataBar.start * (item.w - 4)}px`;
+    bar.style.right = view.dataBar.start === void 0 && rtl ? "2px" : "auto";
+    bar.style.background = view.dataBar.gradient === false ? color : `linear-gradient(${rtl ? 270 : 90}deg, ${color}, color-mix(in srgb, ${color} 15%, #fff))`;
+    bar.style.border = view.dataBar.borderColor ? `1px solid ${view.dataBar.borderColor}` : "none";
     node.append(bar);
+    if (view.dataBar.axis) {
+      const axis = h(doc, "div", "xg-db-axis");
+      axis.style.position = "absolute";
+      axis.style.top = "1px";
+      axis.style.bottom = "1px";
+      axis.style.left = `${2 + view.dataBar.axis.fraction * (item.w - 4)}px`;
+      axis.style.borderLeft = `1px dashed ${view.dataBar.axis.color}`;
+      node.append(axis);
+    }
   }
   if (view.icon) {
-    const icon5 = svgNode2(
+    const icon7 = svgNode(
       doc,
       iconSvg(view.icon.set, view.icon.index, Math.round(16 * (zoom / 100)))
     );
-    icon5.setAttribute("class", "xg-ic");
-    node.append(icon5);
+    icon7.setAttribute("class", "xg-ic");
+    node.append(icon7);
   }
   if (item.text) {
     const box = h(doc, "div", "xg-t");
@@ -10988,6 +12194,7 @@ function estimateWidth(text3, font) {
 function createTextMeasurer(doc) {
   let context;
   const cache = /* @__PURE__ */ new Map();
+  const metricsCache = /* @__PURE__ */ new Map();
   const ctx = () => {
     if (context !== void 0) return context;
     try {
@@ -11015,7 +12222,24 @@ function createTextMeasurer(doc) {
   };
   return {
     measure,
-    measureFont: (text3, font) => measure(text3, cssFont(font, 100))
+    measureFont: (text3, font) => measure(text3, cssFont(font, 100)),
+    fontMetrics: (font) => {
+      const hit = metricsCache.get(font);
+      if (hit) return hit;
+      const c = ctx();
+      if (!c) return void 0;
+      if (c.font !== font) c.font = font;
+      const result = c.measureText("Mg");
+      const metrics = {
+        ascent: result.fontBoundingBoxAscent,
+        descent: result.fontBoundingBoxDescent
+      };
+      if (!Number.isFinite(metrics.ascent) || !Number.isFinite(metrics.descent) || metrics.ascent + metrics.descent <= 0)
+        return void 0;
+      if (metricsCache.size > 1e4) metricsCache.clear();
+      metricsCache.set(font, metrics);
+      return metrics;
+    }
   };
 }
 function rectOf(metrics, range2, maxRow, maxCol) {
@@ -11608,8 +12832,9 @@ var GRID_CSS = `
 .xg-drawings{z-index:4}
 .xg-obj{position:absolute;box-sizing:border-box;pointer-events:auto;cursor:default}
 .xg-obj img,.xg-obj svg{display:block;width:100%;height:100%;pointer-events:none}
-.xg-obj.xg-chart{background:#fff;border:1px solid #d9d9d9}
-.xg-obj.xg-obj-sel{outline:1px solid #8a8a8a}
+.xg-chart svg [data-chart-series],.xg-chart svg [data-chart-part]{pointer-events:auto}
+.xg-obj.xg-chart{background:#fff;outline:1px solid #d9d9d9;outline-offset:-1px}
+.xg-obj.xg-obj-sel{outline:1px solid #8a8a8a;outline-offset:0}
 .xg-obj .xg-grip{position:absolute;width:8px;height:8px;background:#fff;border:1px solid #555;box-sizing:border-box;border-radius:50%}
 .xg-obj-unsupported{background:repeating-linear-gradient(45deg,#f6f6f6,#f6f6f6 6px,#ececec 6px,#ececec 12px);border:1px dashed #aaa;
 	font-size:11px;color:#555;display:flex;align-items:center;justify-content:center;text-align:center}
@@ -12003,10 +13228,10 @@ function createFormulaInput(ctx, doc, bar) {
   const onKey = (event) => {
     event.stopPropagation();
     if (assist.handleKey(event, field2)) return;
-    const editing5 = bridge.state().editing;
+    const editing7 = bridge.state().editing;
     if (event.key === "Escape") {
       event.preventDefault();
-      if (editing5) bridge.cancel();
+      if (editing7) bridge.cancel();
       else showCell();
       ctx.grid()?.focus();
       return;
@@ -12019,7 +13244,7 @@ function createFormulaInput(ctx, doc, bar) {
       onInput();
       return;
     }
-    if (!editing5) return;
+    if (!editing7) return;
     if (event.key === "Enter") {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) bridge.commit("none", true);
@@ -12157,10 +13382,10 @@ function createNameBox(ctx, doc) {
     const wb = ctx.workbook();
     list.replaceChildren();
     const sheet = ctx.activeSheet();
-    const names = (wb?.definedNames ?? []).filter(
+    const names2 = (wb?.definedNames ?? []).filter(
       (d) => !d.hidden && (d.localSheet === void 0 || d.localSheet === sheet)
     );
-    for (const named of names) {
+    for (const named of names2) {
       const item = h(doc, "li", "xfb-name-item", { role: "option" });
       item.textContent = named.name;
       item.addEventListener("mousedown", (event) => {
@@ -12171,7 +13396,7 @@ function createNameBox(ctx, doc) {
       });
       list.append(item);
     }
-    if (!names.length) {
+    if (!names2.length) {
       const empty = h(doc, "li", "xfb-name-empty", { "aria-disabled": "true" });
       empty.textContent = t("No defined names");
       list.append(empty);
@@ -12616,7 +13841,7 @@ function mountSheetTabs(ctx, container) {
     else if (right > strip.scrollLeft + strip.clientWidth)
       strip.scrollLeft = right - strip.clientWidth;
   };
-  const render = () => {
+  const render3 = () => {
     if (renaming) return;
     const workbook = ctx.workbook();
     const active2 = ctx.activeSheet();
@@ -12634,7 +13859,7 @@ function mountSheetTabs(ctx, container) {
   const activate = (sheet) => {
     focusable = sheet;
     if (ctx.activeSheet() !== sheet) ctx.setActiveSheet(sheet);
-    render();
+    render3();
   };
   const rename = (sheet) => {
     if (!editable()) return;
@@ -12643,7 +13868,7 @@ function mountSheetTabs(ctx, container) {
     if (!tab) return;
     renaming = startRename(ctx, tab, sheet, () => {
       renaming = void 0;
-      render();
+      render3();
       tabFor(strip, sheet)?.focus();
     });
   };
@@ -12764,8 +13989,8 @@ function mountSheetTabs(ctx, container) {
       }
     }
   });
-  const disposeModel = ctx.onModelChange(() => render());
-  render();
+  const disposeModel = ctx.onModelChange(() => render3());
+  render3();
   return () => {
     renaming?.cancel();
     disposeModel();
@@ -12964,7 +14189,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 render = (controls) => {
+  const render3 = (controls) => {
     const box = el2(doc, "div", "ribbon-stack");
     for (const control of controls) {
       const node = renderControl(scope, control, true);
@@ -12985,14 +14210,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 = render(line);
+      const row2 = render3(line);
       if (row2.childElementCount) column.append(row2);
     }
     return column.childElementCount ? [column] : [];
   }
   const columns = [];
   for (let at = 0; at < run.length; at += 3) {
-    const box = render(run.slice(at, at + 3));
+    const box = render3(run.slice(at, at + 3));
     if (box.childElementCount) columns.push(box);
   }
   return columns;
@@ -13124,10 +14349,10 @@ function adjacentSheet(ctx, step2) {
   return void 0;
 }
 function shellCommands(handlers) {
-  const file = (id, label, command, icon5, shortcut) => ({
+  const file = (id, label, command, icon7, shortcut) => ({
     id,
     label,
-    icon: icon5,
+    icon: icon7,
     ...shortcut ? { shortcut } : {},
     enabled: (ctx) => command === "new" || command === "open" || hasWorkbook(ctx),
     run: () => handlers.fileCommand(command)
@@ -13320,7 +14545,7 @@ function createStatusBar(ctx, handlers) {
   element.addEventListener("office-status-activate", (event) => {
     if (event.detail.id === "notes") handlers.showNotes();
   });
-  const render = () => {
+  const render3 = () => {
     const count = ctx.workbook()?.warnings.length ?? 0;
     const notesText = ctx.t(
       count === 1 ? "{count} compatibility note" : "{count} compatibility notes",
@@ -13352,7 +14577,7 @@ function createStatusBar(ctx, handlers) {
     };
   };
   const refresh = () => {
-    render();
+    render3();
     stats.textContent = statisticsText(ctx, shown2);
     slider.value = zoom();
   };
@@ -13391,7 +14616,7 @@ function createTitleBar(ctx, handlers) {
   element.append(actions);
   let fileName = "";
   let saveState = "saved";
-  const render = () => {
+  const render3 = () => {
     const session = ctx.session();
     const undoLabel = session?.undoLabel();
     const entries = [
@@ -13454,7 +14679,7 @@ function createTitleBar(ctx, handlers) {
     mode.setAttribute("aria-label", ctx.t("Editing mode"));
     mode.options[0].textContent = ctx.t("Editing");
     mode.options[1].textContent = ctx.t("Viewing");
-    render();
+    render3();
   };
   const refresh = () => {
     mode.value = ctx.readOnly() ? "viewing" : "editing";
@@ -13469,18 +14694,18 @@ function createTitleBar(ctx, handlers) {
       }
       comments.setAttribute("aria-pressed", String(pressed));
     }
-    render();
+    render3();
   };
   relocalize();
   return {
     element,
     setFileName(value) {
       fileName = value;
-      render();
+      render3();
     },
     setSaveState(value) {
       saveState = value;
-      render();
+      render3();
     },
     refresh,
     relocalize,
@@ -13641,6 +14866,9 @@ 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 canvasRow = el2(doc, "div", "xve-canvas-row");
   const formulaRow = el2(doc, "div", "xve-formula-row");
   const gridHost = el2(doc, "div", "xve-grid-host");
   const tabsRow = el2(doc, "div", "xve-tabs-row");
@@ -13648,10 +14876,11 @@ function buildShell(core) {
   const emptyText = el2(doc, "p");
   empty.append(emptyText);
   workspace.append(formulaRow, gridHost, tabsRow, empty);
+  canvasRow.append(workspace, chartSeriesPane.element, chartAreaPane.element);
   frame.append(
     titleBar.element,
     ribbon.element,
-    workspace,
+    canvasRow,
     statusBar.element,
     backstage.element,
     help.element,
@@ -13666,9 +14895,15 @@ function buildShell(core) {
   if (!tabsRow.querySelector('[part~="sheet-tabs"]')) tabsRow.setAttribute("part", "sheet-tabs");
   if (!formulaRow.querySelector('[part~="formula-bar"]'))
     formulaRow.setAttribute("part", "formula-bar");
-  const regions = () => [ribbon.element, formulaRow, gridHost, tabsRow, statusBar.element].filter(
-    (region) => region.getClientRects().length
-  );
+  const regions = () => [
+    ribbon.element,
+    formulaRow,
+    gridHost,
+    tabsRow,
+    chartSeriesPane.element,
+    chartAreaPane.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();
@@ -13705,6 +14940,8 @@ function buildShell(core) {
       ribbon.refresh();
       titleBar.refresh();
       statusBar.refresh();
+      chartSeriesPane.refresh();
+      chartAreaPane.refresh();
       titleBar.setFileName(core.fileName);
       if (core.dirty.dirty && saveState !== "dirty" && saveState !== "saving")
         chrome.setSaveState("dirty");
@@ -13719,6 +14956,8 @@ function buildShell(core) {
       titleBar.relocalize();
       statusBar.relocalize();
       backstage.relocalize();
+      chartSeriesPane.relocalize();
+      chartAreaPane.relocalize();
       core.requestRender();
     }
   };
@@ -14035,6 +15274,11 @@ var XlsxEditorApi = class extends HTMLElementBase {
     this.core.dirty.set(false);
     this.chrome?.setSaveState("saved");
   }
+  /** Commits an in-progress cell edit before a host navigates or persists. False means validation blocked it. */
+  commitEdit() {
+    const grid = this.core.ctx.grid();
+    return !grid?.isEditing() || grid.commitEdit();
+  }
   /** Selects `B2`, `B2:C5`, `A:A`, `B2:C5,E1` or `'Sheet 2'!A1` and scrolls it into view. */
   select(ref) {
     const parsed = parseSelectionRef(ref, this.core.workbook);
@@ -14185,4 +15429,4 @@ function defineXlsxEditor() {
   customElements.define("xlsx-editor", XlsxEditorElement);
 }
 
-export { DEFAULT_AUTHOR_NAME, DEFAULT_FILE_NAME, XLSX_EDITOR_ATTRIBUTES, XLSX_EDITOR_EVENTS, XlsxEditorElement, defineXlsxEditor, registerRibbonIcon };
+export { DEFAULT_AUTHOR_NAME, DEFAULT_FILE_NAME, XLSX_EDITOR_ATTRIBUTES, XlsxEditorElement, defineXlsxEditor, registerRibbonIcon };