@odoo/o-spreadsheet 19.5.0-alpha.12 → 19.5.0-alpha.14

package/dist/o_spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.5.0-alpha.12
- * @date 2026-08-19T09:47:03.774Z
- * @hash 68ca68e
+ * @version 19.5.0-alpha.14
+ * @date 2026-08-29T09:17:09.184Z
+ * @hash e8ad6ad
  */
 
 import * as owl from "@odoo/owl";
@@ -401,7 +401,13 @@ function createAction(item) {
 			if (isEnabled(env)) return item.execute(env, isMiddleClick);
 		} : void 0,
 		children: children ? (env) => {
-			return children.map((child) => typeof child === "function" ? child(env) : child).flat().map(createAction).sort((a, b) => a.sequence - b.sequence);
+			const uniqueChildren = {};
+			children.flatMap((child) => typeof child === "function" ? child(env) : child).forEach((childSpec) => {
+				const childAction = createAction(childSpec);
+				if (uniqueChildren[childAction.id]) throw new Error(`Duplicate child action id "${childAction.id}" in action "${itemId}".`);
+				uniqueChildren[childAction.id] = childAction;
+			});
+			return Object.values(uniqueChildren).sort((a, b) => a.sequence - b.sequence);
 		} : () => [],
 		isReadonlyAllowed: item.isReadonlyAllowed || false,
 		isEnabledOnLockedSheet: item.isEnabledOnLockedSheet || false,
@@ -2631,7 +2637,6 @@ function unregisterChartJsExtensions() {
 *
 * 1. Update template directives:
 *    - replace `t-portal` → `t-custom-portal`
-*    - replace `t-model`  → `t-custom-model`
 *
 * 2. Load this file immediately after Owl 3.
 *
@@ -2646,35 +2651,23 @@ function unregisterChartJsExtensions() {
 * Gradually remove the compatibility layer by migrating to native Owl 3:
 *
 * - replace `t-custom-portal` with proper Owl 3 portal usage
-* - replace `t-custom-model` with `t-model` + signals
 * - convert `useLayoutEffect` back to `useEffect` where appropriate
 *
 * The end goal is to eliminate all compatibility shims.
 */
-const { __ODOO_COMPATIBILITY_LAYER_ADDED__, blockDom: blockDom$1, config, onMounted: onMounted$1, onPatched: onPatched$1, onWillUnmount: onWillUnmount$1, App: OwlApp, Component: OwlComponent, EnvPlugin: OwlEnvPlugin, useChildEnv: OwlUseChildEnv, useChildSubEnv: OwlUseChildSubEnv, useComponent: OwlUseComponent, useEnv: OwlUseEnv, useExternalListener: OwlUseExternalListener, useLayoutEffect: OwlUseLayoutEffect, useSubEnv: OwlUseSubEnv, Plugin, plugin, props, providePlugins, useScope, xml: xml$1 } = owl;
+const { __ODOO_COMPATIBILITY_LAYER_ADDED__, blockDom: blockDom$1, config, onMounted: onMounted$1, onPatched: onPatched$1, onWillUnmount: onWillUnmount$1, App: OwlApp, Component: OwlComponent, EnvPlugin: OwlEnvPlugin, useComponent: OwlUseComponent, useEnv: OwlUseEnv, useLayoutEffect: OwlUseLayoutEffect, useSubEnv: OwlUseSubEnv, Plugin, usePlugin, useProps: useProps$1, providePlugins, useScope, xml: xml$1 } = owl;
 const isOdooCompatLoaded = __ODOO_COMPATIBILITY_LAYER_ADDED__ === true;
 var _Component = class extends OwlComponent {
-	static template = "";
 	env;
 	constructor(node) {
 		super(node);
-		this.env = useChildEnv();
-		this.__owl__ = node;
+		this.env = _useEnv();
 	}
 	setup() {}
-	render(deep = false) {
-		this.__owl__.render(deep === true);
-	}
 };
 function _useComponent() {
 	return useScope().component;
 }
-function _useExternalListener(target, eventName, handler, eventParams) {
-	const node = useScope();
-	const boundHandler = handler.bind(node.component);
-	onMounted$1(() => target.addEventListener(eventName, boundHandler, eventParams));
-	onWillUnmount$1(() => target.removeEventListener(eventName, boundHandler, eventParams));
-}
 function onWillRender(cb) {
 	const node = useScope();
 	const renderFn = node.renderFn;
@@ -2712,27 +2705,14 @@ var _EnvPlugin = class extends Plugin {
 	env = config("env") ?? {};
 };
 function _useEnv() {
-	return useScope().component.env;
-}
-function provideEnv(env) {
-	providePlugins([_EnvPlugin], { env });
-	return env;
-}
-function extendEnv(extension) {
-	const env = useChildEnv();
-	const subEnv = Object.create(env);
-	Object.defineProperties(subEnv, Object.getOwnPropertyDescriptors(extension));
-	return provideEnv(subEnv);
+	return usePlugin(_EnvPlugin).env;
 }
 function _useSubEnv(extension) {
-	const component = useScope().component;
-	component.env = extendEnv(extension);
-}
-function _useChildSubEnv(extension) {
-	extendEnv(extension);
-}
-function _useChildEnv() {
-	return plugin(_EnvPlugin).env;
+	const subEnv = Object.create(_useEnv());
+	Object.defineProperties(subEnv, Object.getOwnPropertyDescriptors(extension));
+	providePlugins([_EnvPlugin], { env: subEnv });
+	const component = _useComponent();
+	component.env = subEnv;
 }
 var VPortal = class extends blockDom$1.text("").constructor {
 	/**
@@ -2781,7 +2761,7 @@ var Portal = class extends OwlComponent {
 	static template = xml$1`<t t-call-slot="default"/>`;
 	constructor(node) {
 		super(node);
-		this.props = props();
+		this.props = useProps$1();
 		this.__owl__ = node;
 	}
 	setup() {
@@ -2814,18 +2794,6 @@ const customDirectives = {
 	/**
 	* @param {HTMLElement} node
 	* @param {string} value
-	* @param {string[]} modifiers
-	*/
-	model: (node, value, modifiers) => {
-		let attribute = "t-model";
-		for (const modifier of modifiers) attribute += `.${modifier}`;
-		const getter = `() => ${value}`;
-		const setter = `(nv) => {${value} = nv;}`;
-		node.setAttribute(attribute, `__globals__.createModelSignal(${getter}, ${setter})`);
-	},
-	/**
-	* @param {HTMLElement} node
-	* @param {string} value
 	*/
 	portal: (node, value) => {
 		if (node.nodeName.toLowerCase() !== "t") throw new Error("t-custom-portal should be on a 't' element");
@@ -2854,11 +2822,6 @@ set(value) {
 			refInfo.values[refId] = value;
 		} };
 	},
-	/**
-	* @param {Function} getter
-	* @param {Function} setter
-	*/
-	createModelSignal: (getter, setter) => Object.assign(getter, { set: setter }),
 	Portal
 };
 var _App = class extends OwlApp {
@@ -2884,7 +2847,7 @@ var _App = class extends OwlApp {
 	createRoot(component, config = {}) {
 		if (config.env) component = { [component.name]: class extends component {
 			constructor(node) {
-				provideEnv(config.env);
+				providePlugins([_EnvPlugin], { env: config.env });
 				super(node);
 			}
 		} }[component.name];
@@ -2893,13 +2856,10 @@ var _App = class extends OwlApp {
 };
 const Component = isOdooCompatLoaded ? OwlComponent : _Component;
 const useComponent = isOdooCompatLoaded ? OwlUseComponent : _useComponent;
-const useExternalListener = isOdooCompatLoaded ? OwlUseExternalListener : _useExternalListener;
 const useLayoutEffect = isOdooCompatLoaded ? OwlUseLayoutEffect : _useLayoutEffect;
 const EnvPlugin = isOdooCompatLoaded ? OwlEnvPlugin : _EnvPlugin;
 const useEnv = isOdooCompatLoaded ? OwlUseEnv : _useEnv;
 const useSubEnv = isOdooCompatLoaded ? OwlUseSubEnv : _useSubEnv;
-const useChildEnv = isOdooCompatLoaded ? OwlUseChildEnv : _useChildEnv;
-const useChildSubEnv = isOdooCompatLoaded ? OwlUseChildSubEnv : _useChildSubEnv;
 const App$1 = isOdooCompatLoaded ? OwlApp : _App;
 
 //#endregion
@@ -5407,7 +5367,7 @@ function _roundFormat(internalFormat) {
 }
 function humanizeNumber({ value, format }, locale) {
 	const numberValue = tryToNumber(value, locale);
-	if (numberValue === void 0) return "";
+	if (numberValue === void 0) return value?.toString() || "";
 	let numberFormat = format;
 	if (Math.abs(numberValue) < 1e3) {
 		const hasDecimal = numberValue % 1 !== 0;
@@ -7943,7 +7903,8 @@ const readonlyAllowedCommands = /* @__PURE__ */ new Set([
 	"UPDATE_CHART",
 	"UPDATE_CHART_REGION",
 	"UPDATE_CAROUSEL_ACTIVE_ITEM",
-	"UPDATE_PIVOT"
+	"UPDATE_PIVOT",
+	"UPDATE_COLOR_SCHEME"
 ]);
 const lockedSheetAllowedCommands = /* @__PURE__ */ new Set([
 	"LOCK_SHEET",
@@ -8122,8 +8083,6 @@ let CommandResult = /* @__PURE__ */ function(CommandResult) {
 	CommandResult["InvalidXRange"] = "InvalidXRange";
 	CommandResult["InvalidLabelRange"] = "InvalidLabelRange";
 	CommandResult["InvalidBubbleSizeRange"] = "InvalidBubbleSizeRange";
-	CommandResult["InvalidScorecardKeyValue"] = "InvalidScorecardKeyValue";
-	CommandResult["InvalidScorecardBaseline"] = "InvalidScorecardBaseline";
 	CommandResult["InvalidGaugeDataRange"] = "InvalidGaugeDataRange";
 	CommandResult["EmptyGaugeRangeMin"] = "EmptyGaugeRangeMin";
 	CommandResult["GaugeRangeMinNaN"] = "GaugeRangeMinNaN";
@@ -9989,6 +9948,46 @@ const NON_RETROCOMPATIBLE_FUNCTIONS = [
 ];
 const CONTENT_TYPES_FILE = "[Content_Types].xml";
 
+//#endregion
+//#region src/helpers/color_themes.ts
+const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
+const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
+const HEADER_BORDER_COLOR = "#C0C0C0";
+const TEXT_HEADER_COLOR = "#666666";
+const BACKGROUND_HEADER_COLOR = "#F8F9FA";
+const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
+const BACKGROUND_HEADER_ACTIVE_COLOR = "#595959";
+const COLOR_THEMES = {
+	light: {
+		colorThemeName: "light",
+		backgroundColor: "#FFFFFF",
+		gridBorderColor: "#CECFCF",
+		headerBackgroundColor: BACKGROUND_HEADER_COLOR,
+		headerActiveBackgroundColor: BACKGROUND_HEADER_ACTIVE_COLOR,
+		headerSelectedBackgroundColor: BACKGROUND_HEADER_SELECTED_COLOR,
+		headerTextColor: TEXT_HEADER_COLOR,
+		headerBorderColor: HEADER_BORDER_COLOR,
+		frozenPaneBorderColor: FROZEN_PANE_BORDER_COLOR,
+		frozenPaneHeaderBorderColor: FROZEN_PANE_HEADER_BORDER_COLOR,
+		singleCellSelectionBackgroundColor: "#F3F7FE",
+		multipleCellsSelectionBackgroundColor: "#E9F0FF"
+	},
+	dark: {
+		colorThemeName: "dark",
+		backgroundColor: adaptForDarkMode("#1A1C2E"),
+		gridBorderColor: adaptForDarkMode("#6B706F"),
+		headerBackgroundColor: adaptForDarkMode("#262A36"),
+		headerActiveBackgroundColor: adaptForDarkMode("#3A4052"),
+		headerSelectedBackgroundColor: adaptForDarkMode("#4E566E"),
+		headerTextColor: adaptForDarkMode("#A1A6B3"),
+		headerBorderColor: adaptForDarkMode("#7A7F91"),
+		frozenPaneBorderColor: adaptForDarkMode("#7A7F91"),
+		frozenPaneHeaderBorderColor: adaptForDarkMode("#9FA5BD"),
+		singleCellSelectionBackgroundColor: adaptForDarkMode("#696E8044"),
+		multipleCellsSelectionBackgroundColor: adaptForDarkMode("#828AA044")
+	}
+};
+
 //#endregion
 //#region src/helpers/figures/charts/chart_common.ts
 const TREND_LINE_XAXIS_ID = "x1";
@@ -10210,9 +10209,8 @@ function truncateLabel(label, maxLen = 20) {
 function isTrendLineAxis(axisID) {
 	return axisID === "x1" || axisID === "xMovingAverage";
 }
-function getChartBackgroundColor({ background }, getters) {
-	const defaultColor = getters.getSpreadsheetTheme().backgroundColor;
-	if (!background) return defaultColor;
+function getChartBackgroundColor({ background }, colorThemeName) {
+	if (!background) return COLOR_THEMES[colorThemeName].backgroundColor;
 	return background;
 }
 
@@ -12010,6 +12008,110 @@ var ChartJsComponent = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/functions/helper_matrices.ts
+function getUnitMatrix(n) {
+	const matrix = Array(n);
+	for (let i = 0; i < n; i++) {
+		matrix[i] = Array(n).fill(0);
+		matrix[i][i] = 1;
+	}
+	return matrix;
+}
+/**
+* Invert a matrix and compute its determinant using Gaussian Elimination.
+*
+* The Matrix should be a square matrix, and should be indexed [col][row] instead of the
+* standard mathematical indexing [row][col].
+*/
+function invertMatrix(M) {
+	if (M.length < 1 || M[0].length < 1) throw new Error("invertMatrix: an empty matrix cannot be inverted.");
+	if (M.length !== M[0].length) throw new Error("invertMatrix: only square matrices are invertible");
+	let determinant = 1;
+	const dim = M.length;
+	const I = getUnitMatrix(dim);
+	const C = M.map((row) => row.slice());
+	for (let pivot = 0; pivot < dim; pivot++) {
+		let diagonalElement = C[pivot][pivot];
+		if (diagonalElement === 0) {
+			for (let row = pivot + 1; row < dim; row++) if (C[pivot][row] !== 0) {
+				swapMatrixRows(C, pivot, row);
+				swapMatrixRows(I, pivot, row);
+				determinant *= -1;
+				break;
+			}
+			diagonalElement = C[pivot][pivot];
+			if (diagonalElement === 0) return { determinant: 0 };
+		}
+		for (let col = 0; col < dim; col++) {
+			C[col][pivot] = C[col][pivot] / diagonalElement;
+			I[col][pivot] = I[col][pivot] / diagonalElement;
+		}
+		determinant *= diagonalElement;
+		for (let row = 0; row < dim; row++) {
+			if (row === pivot) continue;
+			const e = C[pivot][row];
+			for (let col = 0; col < dim; col++) {
+				C[col][row] -= e * C[col][pivot];
+				I[col][row] -= e * I[col][pivot];
+			}
+		}
+	}
+	return {
+		inverted: I,
+		determinant
+	};
+}
+function swapMatrixRows(matrix, row1, row2) {
+	for (let i = 0; i < matrix.length; i++) {
+		const tmp = matrix[i][row1];
+		matrix[i][row1] = matrix[i][row2];
+		matrix[i][row2] = tmp;
+	}
+}
+/**
+* Matrix multiplication of 2 matrices.
+* ex: matrix1 : n x l, matrix2 : m x n => result : m x l
+*
+* Note: we use indexing [col][row] instead of the standard mathematical notation [row][col]
+*/
+function multiplyMatrices(matrix1, matrix2) {
+	if (matrix1.length < 1 || matrix2.length < 1) throw new Error("multiplyMatrices: empty matrices cannot be multiplied.");
+	if (matrix1.length !== matrix2[0].length) throw new Error("multiplyMatrices: incompatible matrices size.");
+	const rowsM1 = matrix1[0].length;
+	const colsM2 = matrix2.length;
+	const n = matrix1.length;
+	const result = Array(colsM2);
+	for (let col = 0; col < colsM2; col++) {
+		result[col] = Array(rowsM1);
+		for (let row = 0; row < rowsM1; row++) {
+			let sum = 0;
+			for (let k = 0; k < n; k++) sum += matrix1[k][row] * matrix2[col][k];
+			result[col][row] = sum;
+		}
+	}
+	return result;
+}
+/**
+* Return the input if it's a scalar or the first element of the input if it's a matrix.
+*/
+function toScalar(arg) {
+	if (!isMatrix(arg)) return arg;
+	if (!isSingleElementMatrix(arg)) throw new Error("The value should be a scalar or a 1x1 matrix");
+	return arg[0][0];
+}
+function isSingleElementMatrix(matrix) {
+	return matrix.length === 1 && matrix[0].length === 1;
+}
+function isMultipleElementMatrix(arg) {
+	return isMatrix(arg) && !isSingleElementMatrix(arg);
+}
+function getMatrixArgIndices(args) {
+	const indices = [];
+	for (let i = 0; i < args.length; i++) if (isMultipleElementMatrix(args[i])) indices.push(i);
+	return indices;
+}
+
 //#endregion
 //#region src/helpers/figures/charts/abstract_chart.ts
 var AbstractChart = class {
@@ -12025,11 +12127,42 @@ var AbstractChart = class {
 
 //#endregion
 //#region src/helpers/figures/charts/scorecard_chart.ts
+function getData$1(value, getters, sheetId) {
+	if (!value) return {
+		scalar: void 0,
+		range: void 0
+	};
+	if (!isFormula(value)) return {
+		scalar: { value },
+		range: void 0
+	};
+	const result = getters.evaluateFormulaResult(sheetId, value);
+	let scalar = isMultipleElementMatrix(result) ? result[0][0] : toScalar(result);
+	let range = void 0;
+	const xc = getFormulaRangeXc(value);
+	if (xc) {
+		range = createValidRange(getters, sheetId, xc);
+		if (range) {
+			if (getters.getEvaluatedCell({
+				sheetId: range.sheetId,
+				col: range.zone.left,
+				row: range.zone.top
+			}).type === "empty") scalar = void 0;
+		}
+	}
+	return {
+		scalar,
+		range
+	};
+}
 function getBaselineText(baseline, keyValue, baselineMode, humanizeNumbers, locale) {
 	if (!baseline) return "";
-	else if (baselineMode === "text" || keyValue?.type !== "number" || baseline.type !== "number") {
+	else if (baselineMode === "text" || typeof keyValue?.value !== "number" || typeof baseline.value !== "number") {
 		if (humanizeNumbers) return humanizeNumber(baseline, locale);
-		return baseline.formattedValue;
+		return formatValue(baseline.value, {
+			format: baseline.format,
+			locale
+		});
 	}
 	let { value, format } = baseline;
 	if (baselineMode === "progress") {
@@ -12050,29 +12183,31 @@ function getBaselineText(baseline, keyValue, baselineMode, humanizeNumbers, loca
 		locale
 	});
 }
-function getKeyValueText(keyValueCell, humanizeNumbers, locale) {
-	if (!keyValueCell) return "";
-	if (humanizeNumbers) return humanizeNumber(keyValueCell, locale);
-	return keyValueCell.formattedValue ?? String(keyValueCell.value ?? "");
+function getKeyValueText(keyValue, humanizeNumbers, locale) {
+	if (keyValue?.value === void 0 || keyValue?.value === null) return "";
+	if (humanizeNumbers) return humanizeNumber(keyValue, locale);
+	return keyValue.format ? formatValue(keyValue.value, {
+		format: keyValue.format,
+		locale
+	}) : String(keyValue.value ?? "");
 }
 function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
-	if (baselineMode === "text" || baselineMode === "progress" || baseline?.type !== "number" || keyValue?.type !== "number") return;
+	if (baselineMode === "text" || baselineMode === "progress" || typeof baseline?.value !== "number" || typeof keyValue?.value !== "number") return;
 	const diff = keyValue.value - baseline.value;
 	if (diff > 0) return colorUp;
 	else if (diff < 0) return colorDown;
 }
 function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
-	if (baselineMode === "text" || baseline?.type !== "number" || keyValue?.type !== "number") return "neutral";
+	if (baselineMode === "text" || typeof baseline?.value !== "number" || typeof keyValue?.value !== "number") return "neutral";
 	const diff = keyValue.value - baseline.value;
 	if (diff > 0) return "up";
 	else if (diff < 0) return "down";
 	return "neutral";
 }
-function checkKeyValue(definition) {
-	return definition.keyValue && !rangeReference.test(definition.keyValue) ? "InvalidScorecardKeyValue" : "Success";
-}
-function checkBaseline(definition) {
-	return definition.baseline && !rangeReference.test(definition.baseline) ? "InvalidScorecardBaseline" : "Success";
+function getFormulaRangeXc(formula) {
+	if (!formula || !isFormula(formula)) return;
+	const content = formula.slice(1);
+	return rangeReference.test(content) ? content : void 0;
 }
 const Path2DConstructor = globalThis.Path2D;
 const arrowDownPath = Path2DConstructor && new Path2DConstructor("M8.6 4.8a.5.5 0 0 1 0 .75l-3.9 3.9a.5 .5 0 0 1 -.75 0l-3.8 -3.9a.5 .5 0 0 1 0 -.75l.4-.4a.5.5 0 0 1 .75 0l2.3 2.4v-5.7c0-.25.25-.5.5-.5h.6c.25 0 .5.25.5.5v5.8l2.3 -2.4a.5.5 0 0 1 .75 0z");
@@ -12089,84 +12224,76 @@ const ScorecardChart$1 = {
 		"baselineColorUp",
 		"baselineColorDown"
 	],
-	fromStrDefinition(definition, sheetId, getters) {
-		const baseline = createValidRange(getters, sheetId, definition.baseline);
-		const keyValue = createValidRange(getters, sheetId, definition.keyValue);
+	fromStrDefinition: (definition) => definition,
+	validateDefinition(validator, definition) {
+		return "Success";
+	},
+	copyInSheetId: (definition, sheetIdFrom, sheetIdTo, getters) => {
+		const adaptFormula = (formula) => getters.copyFormulaStringForSheet(sheetIdFrom, sheetIdTo, formula, "keepSameReference");
 		return {
 			...definition,
-			baseline,
-			keyValue
+			keyValue: definition.keyValue ? adaptFormula(definition.keyValue) : definition.keyValue,
+			baseline: definition.baseline ? adaptFormula(definition.baseline) : definition.baseline
 		};
 	},
-	validateDefinition(validator, definition) {
-		return validator.checkValidations(definition, checkKeyValue, checkBaseline);
-	},
-	copyInSheetId: (definition) => definition,
 	getDefinitionFromContextCreation(context, dataSourceBuilder) {
+		const dataRange = context.dataSource?.type === "range" ? context.dataSource?.dataSets?.[0]?.dataRange : void 0;
+		const keyValue = (context.scorecardKeyValueFormula === void 0 || getFormulaRangeXc(context.scorecardKeyValueFormula)) && dataRange ? `=${dataRange}` : context.scorecardKeyValueFormula;
+		const baseline = (context.scorecardBaselineFormula === void 0 || getFormulaRangeXc(context.scorecardBaselineFormula)) && context.auxiliaryRange ? `=${context.auxiliaryRange}` : context.scorecardBaselineFormula;
 		return {
 			background: context.background,
 			type: "scorecard",
-			keyValue: context.dataSource?.type === "range" ? context.dataSource?.dataSets?.[0]?.dataRange : void 0,
+			keyValue,
 			title: context.title || { text: "" },
 			baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
 			baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
 			baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
-			baseline: context.auxiliaryRange || "",
+			baseline,
 			humanize: context.humanize,
 			annotationLink: context.annotationLink,
 			annotationText: context.annotationText
 		};
 	},
-	transformDefinition(definition, chartSheetId, { adaptRangeString }) {
+	transformDefinition(definition, chartSheetId, { adaptFormulaString }) {
 		let baseline;
 		let keyValue;
-		if (definition.baseline) {
-			const { changeType, range: adaptedRange } = adaptRangeString(chartSheetId, definition.baseline);
-			if (changeType !== "REMOVE") baseline = adaptedRange;
-		}
-		if (definition.keyValue) {
-			const { changeType, range: adaptedRange } = adaptRangeString(chartSheetId, definition.keyValue);
-			if (changeType !== "REMOVE") keyValue = adaptedRange;
-		}
-		return {
-			...definition,
-			baseline,
-			keyValue
-		};
-	},
-	duplicateInDuplicatedSheet(definition, sheetIdFrom, sheetIdTo) {
-		const baseline = duplicateLabelRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, definition.baseline);
-		const keyValue = duplicateLabelRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, definition.keyValue);
+		if (definition.baseline) baseline = adaptFormulaString(chartSheetId, definition.baseline);
+		if (definition.keyValue) keyValue = adaptFormulaString(chartSheetId, definition.keyValue);
 		return {
 			...definition,
 			baseline,
 			keyValue
 		};
 	},
-	toStrDefinition(definition, sheetId, getters) {
+	duplicateInDuplicatedSheet(definition, sheetIdFrom, sheetIdTo, getters) {
+		const adaptFormula = (formula) => getters.copyFormulaStringForSheet(sheetIdFrom, sheetIdTo, formula, "moveReference");
 		return {
 			...definition,
-			keyValue: definition.keyValue ? getters.getRangeString(definition.keyValue, sheetId) : void 0,
-			baseline: definition.baseline ? getters.getRangeString(definition.baseline, sheetId) : void 0
+			keyValue: definition.keyValue ? adaptFormula(definition.keyValue) : definition.keyValue,
+			baseline: definition.baseline ? adaptFormula(definition.baseline) : definition.baseline
 		};
 	},
+	toStrDefinition: (definition) => definition,
 	getContextCreation(definition, dataSource) {
+		const keyValueXc = getFormulaRangeXc(definition.keyValue);
 		return {
 			...definition,
 			dataSource: {
 				type: "range",
-				dataSets: definition.keyValue ? [{
-					dataRange: definition.keyValue,
+				dataSets: keyValueXc ? [{
+					dataRange: keyValueXc,
 					dataSetId: "0"
 				}] : []
 			},
-			auxiliaryRange: definition.baseline
+			auxiliaryRange: getFormulaRangeXc(definition.baseline),
+			scorecardKeyValueFormula: definition.keyValue,
+			scorecardBaselineFormula: definition.baseline
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	updateRanges(definition, adapterFunctions) {
-		const baseline = adaptChartRange(definition.baseline, adapterFunctions);
-		const keyValue = adaptChartRange(definition.keyValue, adapterFunctions);
+	updateRanges(definition, adapterFunctions, sheetId) {
+		const baseline = definition.baseline ? adapterFunctions.adaptFormulaString(sheetId, definition.baseline) : definition.baseline;
+		const keyValue = definition.keyValue ? adapterFunctions.adaptFormulaString(sheetId, definition.keyValue) : definition.keyValue;
 		if (definition.baseline === baseline && definition.keyValue === keyValue) return definition;
 		return {
 			...definition,
@@ -12174,32 +12301,21 @@ const ScorecardChart$1 = {
 			keyValue
 		};
 	},
-	getFormulas: () => [],
-	getRuntime(getters, definition) {
+	getFormulas(getters, sheetId, definition) {
+		const formulas = [];
+		if (definition.keyValue && isFormula(definition.keyValue)) formulas.push(CompiledFormula.Compile(definition.keyValue, sheetId, getters));
+		if (definition.baseline && isFormula(definition.baseline)) formulas.push(CompiledFormula.Compile(definition.baseline, sheetId, getters));
+		return formulas;
+	},
+	getRuntime(getters, definition, _dataExtractor, sheetId, eventHandlers, colorThemeName) {
 		let formattedKeyValue = "";
-		let keyValueCell;
+		const { scalar: keyValue, range: keyValueRange } = getData$1(definition.keyValue, getters, sheetId);
 		const locale = getters.getLocale();
-		if (definition.keyValue) {
-			const keyValuePosition = {
-				sheetId: definition.keyValue.sheetId,
-				col: definition.keyValue.zone.left,
-				row: definition.keyValue.zone.top
-			};
-			keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-			formattedKeyValue = getKeyValueText(keyValueCell, definition.humanize ?? true, locale);
-		}
-		let baselineCell;
-		const baseline = definition.baseline;
-		if (baseline) {
-			const baselinePosition = {
-				sheetId: baseline.sheetId,
-				col: baseline.zone.left,
-				row: baseline.zone.top
-			};
-			baselineCell = getters.getEvaluatedCell(baselinePosition);
-		}
-		const { background, fontColor } = getters.getStyleOfSingleCellChart(definition.background, definition.keyValue);
-		const baselineDisplay = getBaselineText(baselineCell, keyValueCell, definition.baselineMode, definition.humanize ?? true, locale);
+		if (keyValue !== null && keyValue !== void 0) formattedKeyValue = getKeyValueText(keyValue, definition.humanize ?? true, locale);
+		else formattedKeyValue = "";
+		const { scalar: baseline, range: baselineRange } = getData$1(definition.baseline, getters, sheetId);
+		const { background, fontColor } = getters.getStyleOfSingleCellChart(definition.background, keyValueRange, colorThemeName);
+		const baselineDisplay = getBaselineText(baseline, keyValue, definition.baselineMode, definition.humanize ?? true, locale);
 		const baselineValue = definition.baselineMode === "progress" && isNumber(baselineDisplay, locale) ? toNumber(baselineDisplay, locale) : 0;
 		const title = definition.title;
 		return {
@@ -12210,16 +12326,16 @@ const ScorecardChart$1 = {
 			keyValue: formattedKeyValue,
 			keyDescr: definition.keyDescr?.text ? getters.dynamicTranslate(definition.keyDescr.text) : "",
 			baselineDisplay,
-			baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, definition.baselineMode),
-			baselineColor: getBaselineColor(baselineCell, definition.baselineMode, keyValueCell, definition.baselineColorUp, definition.baselineColorDown),
+			baselineArrow: getBaselineArrowDirection(baseline, keyValue, definition.baselineMode),
+			baselineColor: getBaselineColor(baseline, definition.baselineMode, keyValue, definition.baselineColorUp, definition.baselineColorDown),
 			baselineDescr: definition.baselineMode !== "progress" && definition.baselineDescr?.text ? getters.dynamicTranslate(definition.baselineDescr.text) : "",
 			fontColor,
 			background,
 			baselineStyle: {
-				...definition.baselineMode !== "percentage" && definition.baselineMode !== "progress" && baseline ? getters.getCellComputedStyle({
-					sheetId: baseline.sheetId,
-					col: baseline.zone.left,
-					row: baseline.zone.top
+				...definition.baselineMode !== "percentage" && definition.baselineMode !== "progress" && baselineRange ? getters.getCellComputedStyle({
+					sheetId: baselineRange.sheetId,
+					col: baselineRange.zone.left,
+					row: baselineRange.zone.top
 				}) : void 0,
 				fontSize: definition.baselineDescr?.fontSize,
 				align: definition.baselineDescr?.align
@@ -12229,10 +12345,10 @@ const ScorecardChart$1 = {
 				...definition.baselineDescr
 			},
 			keyValueStyle: {
-				...definition.keyValue ? getters.getCellComputedStyle({
-					sheetId: definition.keyValue.sheetId,
-					col: definition.keyValue.zone.left,
-					row: definition.keyValue.zone.top
+				...keyValueRange ? getters.getCellComputedStyle({
+					sheetId: keyValueRange.sheetId,
+					col: keyValueRange.zone.left,
+					row: keyValueRange.zone.top
 				}) : void 0,
 				fontSize: definition.keyDescr?.fontSize,
 				align: definition.keyDescr?.align
@@ -13734,33 +13850,8 @@ var ViewportsStore = class extends SpreadsheetStore {
 	displayedSheetId = this.model.getters.getActiveSheetId();
 	constructor(get) {
 		super(get);
-		this.model.selection.observe(this, { handleEvent: this.handleEvent.bind(this) });
-		this.onDispose(() => {
-			this.model.selection.unobserve(this);
-		});
 		this.viewports.resetViewports(this.displayedSheetId);
 	}
-	handleEvent(event) {
-		const eventSheetId = this.getters.getActiveSheetId();
-		if (event.options.scrollIntoView) {
-			const oldZone = event.previousAnchor.zone;
-			const newZone = event.anchor.zone;
-			const isUpdateAnchorEvent = event.mode === "updateAnchor";
-			const sameZone = isEqual(oldZone, newZone);
-			let { col, row } = isUpdateAnchorEvent && sameZone ? event.anchor.cell : findCellInNewZone(oldZone, newZone);
-			if (isUpdateAnchorEvent && !sameZone) {
-				const { top, bottom, left, right } = this.viewports.getMainInternalViewport(eventSheetId);
-				if (oldZone.left === newZone.left && oldZone.right === newZone.right) col = left > col || col > right ? left : col;
-				if (oldZone.top === newZone.top && oldZone.bottom === newZone.bottom) row = top > row || row > bottom ? top : row;
-			}
-			col = Math.min(col, this.getters.getNumberCols(eventSheetId) - 1);
-			row = Math.min(row, this.getters.getNumberRows(eventSheetId) - 1);
-			if (!this.sheetsWithDirtyViewports.has(eventSheetId)) this.viewports.refreshViewport(eventSheetId, {
-				col,
-				row
-			});
-		}
-	}
 	handle(cmd) {
 		if (invalidateEvaluationCommands.has(cmd.type)) for (const sheetId of this.getters.getSheetIds()) this.sheetsWithDirtyViewports.add(sheetId);
 		switch (cmd.type) {
@@ -13860,6 +13951,7 @@ var ViewportsStore = class extends SpreadsheetStore {
 		this.shiftVertically(topRowDims.end - boundaryTopY - viewportHeight);
 	}
 	scrollToCell(sheetId, col, row) {
+		if (this.sheetsWithDirtyViewports.has(sheetId)) return;
 		this.viewports.refreshViewport(sheetId, {
 			col,
 			row
@@ -14462,22 +14554,35 @@ function sampleIndices(length, maxPoints) {
 	const step = length / maxPoints;
 	return Array.from({ length: maxPoints }, (_, i) => Math.min(length - 1, Math.floor(i * step)));
 }
-async function chartToImageUrl(runtime, figure, type) {
+async function chartToImageUrl(runtime, figure, type, colorThemeName = "light") {
 	try {
 		const canvas = createRenderingSurface(figure.width, figure.height);
 		const cleanup = drawChartOnCanvas(canvas, runtime, figure, type);
-		const imageUrl = await canvasToObjectUrl(canvas);
+		const imageUrl = await canvasToObjectUrl(colorThemeName === "dark" ? applyDarkMode(canvas) : canvas);
 		cleanup();
 		return imageUrl;
 	} catch (error) {
 		console.log("Error exporting chart to image URL: " + error.message);
 	}
 }
-async function chartToImageFile(runtime, figure, type) {
+/**
+* Charts are drawn with pre-inverted colors (see `adaptForDarkMode`) because they are displayed
+* through the `os-theme-dependant` CSS filter. An exported image doesn't get that filter, so it
+* has to be applied to the pixels to obtain what is actually displayed on screen.
+*/
+function applyDarkMode(canvas) {
+	const filtered = createRenderingSurface(canvas.width, canvas.height);
+	const ctx = filtered.getContext("2d");
+	if (!ctx || !("filter" in ctx)) return canvas;
+	ctx.filter = DARK_MODE_FILTER_STRING;
+	ctx.drawImage(canvas, 0, 0);
+	return filtered;
+}
+async function chartToImageFile(runtime, figure, type, colorThemeName = "light") {
 	try {
 		const canvas = createRenderingSurface(figure.width, figure.height);
 		const cleanup = drawChartOnCanvas(canvas, runtime, figure, type);
-		const chartBlob = await canvasToBlob(canvas);
+		const chartBlob = await canvasToBlob(colorThemeName === "dark" ? applyDarkMode(canvas) : canvas);
 		cleanup();
 		return chartBlob;
 	} catch (error) {
@@ -14785,7 +14890,7 @@ function getCopyAsImageMenuItem(figureId, env) {
 			const chartId = env.model.getters.getChartIdFromFigureId(figureId);
 			if (!chartId) return;
 			const chartType = env.model.getters.getChartType(chartId);
-			const blob = await chartToImageFile(env.model.getters.getChartRuntime(chartId), figure, chartType);
+			const blob = await chartToImageFile(env.model.getters.getChartRuntime(chartId), figure, chartType, env.model.getters.getSpreadsheetTheme().colorThemeName);
 			if (!blob) return;
 			const image = await new Promise((resolve) => {
 				const reader = new FileReader();
@@ -14822,7 +14927,7 @@ function getDownloadChartMenuItem(figureId, env) {
 			const chartId = env.model.getters.getChartIdFromFigureId(figureId);
 			if (!chartId) return;
 			const chartType = env.model.getters.getChartType(chartId);
-			const url = await chartToImageUrl(env.model.getters.getChartRuntime(chartId), figure, chartType);
+			const url = await chartToImageUrl(env.model.getters.getChartRuntime(chartId), figure, chartType, env.model.getters.getSpreadsheetTheme().colorThemeName);
 			if (!url) return;
 			downloadFile(url, "chart");
 		},
@@ -16371,8 +16476,8 @@ var MenuPopover = class MenuPopover extends Component {
 		useLayoutEffect(() => {
 			if (!this.props.disableKeyboardNavigation && !this.state.hoveredMenu && !this.subMenu.isOpen) this.menuRef()?.focus();
 		});
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
-		useExternalListener(window, "contextmenu", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
+		useListener(window, "contextmenu", this.onExternalClick.bind(this), { capture: true });
 		onWillUpdateProps((nextProps) => {
 			if (nextProps.menuItems !== this.props.menuItems) this.closeSubMenu();
 		});
@@ -16952,110 +17057,6 @@ function isSquareMatrix(arg) {
 }
 const expectNumberGreaterThanOrEqualToOne = (value) => _t("The function [[FUNCTION_NAME]] expects a number value to be greater than or equal to 1, but receives %s.", value);
 
-//#endregion
-//#region src/functions/helper_matrices.ts
-function getUnitMatrix(n) {
-	const matrix = Array(n);
-	for (let i = 0; i < n; i++) {
-		matrix[i] = Array(n).fill(0);
-		matrix[i][i] = 1;
-	}
-	return matrix;
-}
-/**
-* Invert a matrix and compute its determinant using Gaussian Elimination.
-*
-* The Matrix should be a square matrix, and should be indexed [col][row] instead of the
-* standard mathematical indexing [row][col].
-*/
-function invertMatrix(M) {
-	if (M.length < 1 || M[0].length < 1) throw new Error("invertMatrix: an empty matrix cannot be inverted.");
-	if (M.length !== M[0].length) throw new Error("invertMatrix: only square matrices are invertible");
-	let determinant = 1;
-	const dim = M.length;
-	const I = getUnitMatrix(dim);
-	const C = M.map((row) => row.slice());
-	for (let pivot = 0; pivot < dim; pivot++) {
-		let diagonalElement = C[pivot][pivot];
-		if (diagonalElement === 0) {
-			for (let row = pivot + 1; row < dim; row++) if (C[pivot][row] !== 0) {
-				swapMatrixRows(C, pivot, row);
-				swapMatrixRows(I, pivot, row);
-				determinant *= -1;
-				break;
-			}
-			diagonalElement = C[pivot][pivot];
-			if (diagonalElement === 0) return { determinant: 0 };
-		}
-		for (let col = 0; col < dim; col++) {
-			C[col][pivot] = C[col][pivot] / diagonalElement;
-			I[col][pivot] = I[col][pivot] / diagonalElement;
-		}
-		determinant *= diagonalElement;
-		for (let row = 0; row < dim; row++) {
-			if (row === pivot) continue;
-			const e = C[pivot][row];
-			for (let col = 0; col < dim; col++) {
-				C[col][row] -= e * C[col][pivot];
-				I[col][row] -= e * I[col][pivot];
-			}
-		}
-	}
-	return {
-		inverted: I,
-		determinant
-	};
-}
-function swapMatrixRows(matrix, row1, row2) {
-	for (let i = 0; i < matrix.length; i++) {
-		const tmp = matrix[i][row1];
-		matrix[i][row1] = matrix[i][row2];
-		matrix[i][row2] = tmp;
-	}
-}
-/**
-* Matrix multiplication of 2 matrices.
-* ex: matrix1 : n x l, matrix2 : m x n => result : m x l
-*
-* Note: we use indexing [col][row] instead of the standard mathematical notation [row][col]
-*/
-function multiplyMatrices(matrix1, matrix2) {
-	if (matrix1.length < 1 || matrix2.length < 1) throw new Error("multiplyMatrices: empty matrices cannot be multiplied.");
-	if (matrix1.length !== matrix2[0].length) throw new Error("multiplyMatrices: incompatible matrices size.");
-	const rowsM1 = matrix1[0].length;
-	const colsM2 = matrix2.length;
-	const n = matrix1.length;
-	const result = Array(colsM2);
-	for (let col = 0; col < colsM2; col++) {
-		result[col] = Array(rowsM1);
-		for (let row = 0; row < rowsM1; row++) {
-			let sum = 0;
-			for (let k = 0; k < n; k++) sum += matrix1[k][row] * matrix2[col][k];
-			result[col][row] = sum;
-		}
-	}
-	return result;
-}
-/**
-* Return the input if it's a scalar or the first element of the input if it's a matrix.
-*/
-function toScalar(arg) {
-	if (!isMatrix(arg)) return arg;
-	if (!isSingleElementMatrix(arg)) throw new Error("The value should be a scalar or a 1x1 matrix");
-	return arg[0][0];
-}
-function isSingleElementMatrix(matrix) {
-	return matrix.length === 1 && matrix[0].length === 1;
-}
-function isMultipleElementMatrix(arg) {
-	return isMatrix(arg) && !isSingleElementMatrix(arg);
-}
-function getMatrixArgIndices(args) {
-	const indices = [];
-	for (let i = 0; i < args.length; i++) if (isMultipleElementMatrix(args[i])) indices.push(i);
-	return indices;
-}
-
 //#endregion
 //#region src/functions/helper_statistical.ts
 function assertSameNumberOfElements(...args) {
@@ -18206,8 +18207,6 @@ const ChartTerms = {
 		Unexpected: _t("The chart definition is invalid for an unknown reason"),
 		["InvalidDataSet"]: _t("The dataset is invalid"),
 		["InvalidLabelRange"]: _t("Labels are invalid"),
-		["InvalidScorecardKeyValue"]: _t("The key value is invalid"),
-		["InvalidScorecardBaseline"]: _t("The baseline value is invalid"),
 		["InvalidGaugeDataRange"]: _t("The data range is invalid"),
 		["EmptyGaugeRangeMin"]: _t("A minimum range limit value is needed"),
 		["GaugeRangeMinNaN"]: _t("The minimum range limit value must be a number"),
@@ -20982,7 +20981,7 @@ var GridAddRowsFooter = class extends Component {
 	setup() {
 		this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
 		this.viewStore = useStore(ViewportsStore);
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 	}
 	get addRowsPosition() {
 		const { scrollY } = this.viewStore.activeSheetScrollInfo;
@@ -21513,7 +21512,7 @@ function useCellHovered(env, gridRef) {
 	useListener(gridRef, "mouseenter", resume);
 	useListener(gridRef, "pointerdown", recompute);
 	useListener(gridRef, "pointerdown", (ev) => env.isMobile() && updateMousePosition(withZoom(env, ev)));
-	useExternalListener(window, "click", handleGlobalClick);
+	useListener(window, "click", handleGlobalClick);
 	function handleGlobalClick(e) {
 		const target = e.target;
 		const grid = gridRef();
@@ -21884,7 +21883,7 @@ function getPivotIconSvg(isCollapsed, isHovered) {
 	};
 }
 function getDataFilterIcon(isActive, isHighContrast, isHovered) {
-	const symbolPath = isActive ? "M18.6 3.5H4.29c-.7 0-1.06.85-.56 1.35l6.1 6.1v6.8c0 .26.13.5.34.65l2.64 1.85a.79.79 0 0 0 1.25-.65v-8.64l6.1-6.1a.79.79 0 0 0-.56-1.35" : "M 339.667 681 L 510.333 681 L 510.333 595.667 L 339.667 595.667 L 339.667 681 Z M 41 169 L 41 254.333 L 809 254.333 L 809 169 L 41 169 Z M 169 467.667 L 681 467.667 L 681 382.333 L 169 382.333 L 169 467.667 Z";
+	const symbolPath = isActive ? "M 11 20 Q 10.575 20 10.2875 19.7125 T 10 19 L 10 13 L 4.2 5.6 Q 3.825 5.1 4.0875 4.55 T 5 4 L 19 4 Q 19.65 4 19.9125 4.55 T 19.8 5.6 L 14 13 L 14 19 Q 14 19.425 13.7125 19.7125 T 13 20 L 11 20 Z" : "M 339.667 681 L 510.333 681 L 510.333 595.667 L 339.667 595.667 L 339.667 681 Z M 41 169 L 41 254.333 L 809 254.333 L 809 169 L 41 169 Z M 169 467.667 L 681 467.667 L 681 382.333 L 169 382.333 L 169 467.667 Z";
 	const hoverBackgroundPath = isActive ? "M0,0 h24 v24 h-24" : "M0,0 h850 v850 h-850";
 	const colors = {
 		iconColor: FILTERS_COLOR,
@@ -23517,7 +23516,7 @@ var Select = class extends Component {
 		hoveredValue: void 0
 	});
 	setup() {
-		useExternalListener(window, "pointerdown", this.onExternalClick, { capture: true });
+		useListener(window, "pointerdown", this.onExternalClick.bind(this), { capture: true });
 		useLayoutEffect(() => {
 			const el = this.dropdownRef();
 			if (el) el.style.width = `${this.selectRef()?.offsetWidth}px`;
@@ -23619,7 +23618,7 @@ var InfoPopover = class extends Component {
 	});
 	static components = { Popover };
 	setup() {
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 	}
 	infoRef = signal.ref();
 	get popoverProps() {
@@ -24029,6 +24028,7 @@ figureRegistry.add("chart", {
 	Component: ChartFigure,
 	SidePanelComponent: "ChartPanel",
 	menuBuilder: getChartMenuActions,
+	minFigSize: 80,
 	borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 	hasShadow: (getters) => getters.isDashboard(),
 	isRounded: (getters) => getters.isDashboard(),
@@ -24047,6 +24047,7 @@ figureRegistry.add("image", {
 figureRegistry.add("carousel", {
 	Component: CarouselFigure,
 	menuBuilder: getCarouselMenuActions,
+	minFigSize: 80,
 	borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 	hasShadow: (getters) => getters.isDashboard(),
 	isRounded: (getters) => getters.isDashboard(),
@@ -24179,7 +24180,7 @@ var FigureComponent = class extends Component {
 						...this.positionInBoundary(sheetId, this.env.model.getters.getFigureUI(sheetId, figure), ev.key, ev.shiftKey)
 					});
 				}
-				this.env.model.dispatch("MOVE_FIGURES", { figures });
+				this.env.model.dispatch("UPDATE_FIGURES", { figures });
 				ev.preventDefault();
 				ev.stopPropagation();
 				break;
@@ -29277,6 +29278,20 @@ migrationStepRegistry.add("0.1", { migrate(data) {
 		figure.data.chartDefinitions[chartId] = upgrade(definition);
 	}
 	return data;
+} }).add("19.5.1", { migrate(data) {
+	function upgrade(definition) {
+		if (definition.type !== "scorecard") return definition;
+		definition = { ...definition };
+		if (definition.keyValue) definition.keyValue = `=${definition.keyValue}`;
+		if (definition.baseline) definition.baseline = `=${definition.baseline}`;
+		return definition;
+	}
+	for (const sheet of data.sheets || []) for (const figure of sheet.figures || []) if (figure.tag === "chart") figure.data = upgrade(figure.data);
+	else if (figure.tag === "carousel") for (const chartId in figure.data.chartDefinitions) {
+		const definition = figure.data.chartDefinitions[chartId];
+		figure.data.chartDefinitions[chartId] = upgrade(definition);
+	}
+	return data;
 } });
 function fixOverlappingFilters(data) {
 	for (const sheet of data.sheets || []) {
@@ -29949,7 +29964,7 @@ function buildScorecard(zone, getters) {
 	return {
 		type: "scorecard",
 		title: {},
-		keyValue: getUnboundRange(getters, zone),
+		keyValue: `=${getUnboundRange(getters, zone)}`,
 		background: cell?.style?.fillColor,
 		baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
 		baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
@@ -30910,7 +30925,7 @@ var SpreadsheetChart = class SpreadsheetChart {
 	getFormulas(getters) {
 		return this.chartTypeBuilder.getFormulas(getters, this.sheetId, this.definition);
 	}
-	getRuntime(getters, chartId) {
+	getRuntime(getters, chartId, colorThemeName) {
 		const dataSource = this.dataSource;
 		const dataExtractors = dataSource ? {
 			extractData: () => this.dataSourceBuilder.extractData(dataSource, chartId, getters),
@@ -30930,7 +30945,7 @@ var SpreadsheetChart = class SpreadsheetChart {
 				return this.dataSourceBuilder.onDataSetClick?.(this.definition.type, chartId, event, items, chartJsChart, getters);
 			},
 			onHover: (event, items, chartJsChart) => this.dataSourceBuilder.onDataSetHover?.(this.definition.type, chartId, event, items, chartJsChart)
-		});
+		}, colorThemeName);
 	}
 	static deleteInvalidKeys(definition) {
 		definition = { ...definition };
@@ -32193,7 +32208,7 @@ var NumberEditor = class extends Component {
 	DOMFocusableElementStore;
 	setup() {
 		this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 		onWillUpdateProps((nextProps) => {
 			const input = this.inputRef();
 			if (input && document.activeElement !== input) input.value = nextProps.currentValue;
@@ -32294,7 +32309,7 @@ var TextStyler = class extends Component {
 	});
 	openedEl = null;
 	setup() {
-		useExternalListener(window, "click", this.onExternalClick);
+		useListener(window, "click", this.onExternalClick.bind(this));
 	}
 	state = proxy({ activeTool: "" });
 	updateFontSize(fontSize) {
@@ -33388,7 +33403,7 @@ var RoundColorPicker = class extends Component {
 	state;
 	setup() {
 		this.state = proxy({ pickerOpened: false });
-		useExternalListener(window, "click", this.closePicker);
+		useListener(window, "click", this.closePicker.bind(this));
 	}
 	closePicker() {
 		this.state.pickerOpened = false;
@@ -34011,7 +34026,7 @@ function toXlsxHexColor(color) {
 //#region src/helpers/figures/charts/runtime/chart_data_extractor.ts
 const EMPTY$1 = Object.freeze({ value: null });
 const ZERO = Object.freeze({ value: 0 });
-function getBarChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getBarChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	const locale = getters.getLocale();
 	let labels = labelValues.map(({ value, format }) => formatValue(value, {
 		format,
@@ -34043,7 +34058,7 @@ function getBarChartData(definition, { labelValues, dataSetsValues }, getters) {
 		labels,
 		locale: getters.getLocale(),
 		topPadding: getTopPaddingForDashboard(definition, getters),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
 function getDateTimeLabel(value, stamp) {
@@ -34102,7 +34117,7 @@ function computeValuesAndLabels(timeValues, values, horizontalGroupBy, verticalG
 		labels: xValues.map((v) => ({ value: getDateTimeLabel(v, horizontalGroupBy) }))
 	};
 }
-function getCalendarChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getCalendarChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	let labels = labelValues;
 	const locale = getters.getLocale();
 	const countEntries = dataSetsValues.length === 0;
@@ -34115,14 +34130,14 @@ function getCalendarChartData(definition, { labelValues, dataSetsValues }, gette
 		labels: labels.map(({ value }) => String(value ?? "")),
 		locale: getters.getLocale(),
 		topPadding: getTopPaddingForDashboard(definition, getters),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getPyramidChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getPyramidChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	const barChartData = getBarChartData(definition, {
 		labelValues,
 		dataSetsValues: dataSetsValues.slice(0, 2)
-	}, getters);
+	}, getters, colorThemeName);
 	const barDataset = barChartData.dataSetsValues.filter((ds) => !ds.hidden);
 	const pyramidDatasetValues = [];
 	if (barDataset[0]) {
@@ -34144,7 +34159,7 @@ function getPyramidChartData(definition, { labelValues, dataSetsValues }, getter
 		dataSetsValues: pyramidDatasetValues
 	};
 }
-function getLineChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getLineChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	const axisType = getChartAxisType(definition, {
 		labelValues,
 		dataSetsValues
@@ -34180,10 +34195,10 @@ function getLineChartData(definition, { labelValues, dataSetsValues }, getters)
 		trendDataSetsValues,
 		axisType,
 		topPadding: getTopPaddingForDashboard(definition, getters),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getPieChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getPieChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	let labels = labelValues.map(({ value, format }) => formatValue(value, {
 		format,
 		locale: getters.getLocale()
@@ -34198,10 +34213,10 @@ function getPieChartData(definition, { labelValues, dataSetsValues }, getters) {
 		labels,
 		locale: getters.getLocale(),
 		topPadding: getTopPaddingForDashboard(definition, getters),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getRadarChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getRadarChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	let labels = labelValues.map(({ value, format }) => formatValue(value, {
 		format,
 		locale: getters.getLocale()
@@ -34214,10 +34229,10 @@ function getRadarChartData(definition, { labelValues, dataSetsValues }, getters)
 		axisFormats,
 		labels,
 		locale: getters.getLocale(),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getGeoChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getGeoChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	dataSetsValues = dataSetsValues.slice(0, 1);
 	let labels = labelValues.map(({ value, format }) => formatValue(value, {
 		format,
@@ -34233,10 +34248,10 @@ function getGeoChartData(definition, { labelValues, dataSetsValues }, getters) {
 		availableRegions: getters.getGeoChartAvailableRegions(),
 		geoFeatureNameToId: getters.geoFeatureNameToId,
 		getGeoJsonFeatures: getters.getGeoJsonFeatures,
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getFunnelChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getFunnelChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	let labels = labelValues.map(({ value, format }) => formatValue(value, {
 		format,
 		locale: getters.getLocale()
@@ -34250,10 +34265,10 @@ function getFunnelChartData(definition, { labelValues, dataSetsValues }, getters
 		axisFormats: { x: format },
 		labels,
 		locale: getters.getLocale(),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getHierarchalChartData(definition, { labelValues, dataSetsValues }, getters) {
+function getHierarchalChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 	let labels = labelValues;
 	({labels, dataSetsValues} = filterValuesWithDifferentSigns(labels, dataSetsValues));
 	({labels, dataSetsValues} = filterInvalidHierarchicalPoints(labels, dataSetsValues));
@@ -34262,12 +34277,12 @@ function getHierarchalChartData(definition, { labelValues, dataSetsValues }, get
 		axisFormats: { y: getChartLabelFormat(labels) },
 		labels: labels.map(({ value }) => String(value ?? "")),
 		locale: getters.getLocale(),
-		background: getChartBackgroundColor(definition, getters)
+		background: getChartBackgroundColor(definition, colorThemeName)
 	};
 }
-function getBubbleChartData(definition, getters) {
+function getBubbleChartData(definition, getters, colorThemeName) {
 	const chartData = getBubbleChartSourceData(definition, getters);
-	const data = getLineChartData(definition, chartData, getters);
+	const data = getLineChartData(definition, chartData, getters, colorThemeName);
 	let labelValues = definition.labelRange ? getters.getVisibleRangeValues(definition.labelRange) : [];
 	let sizeValues = definition.sizeRange ? getters.getVisibleRangeValues(definition.sizeRange) : [];
 	if (chartData.shouldRemoveFirstLabel) {
@@ -35269,9 +35284,9 @@ const templates = `
 `;
 let app;
 function renderToString(templateName, context = {}) {
-	return render(templateName, context).innerHTML;
+	return render$1(templateName, context).innerHTML;
 }
-function render(templateName, context = {}) {
+function render$1(templateName, context = {}) {
 	if (!app) app = new App({
 		templates,
 		translateFn: _t
@@ -35636,8 +35651,8 @@ const BarChart = {
 			verticalAxis: getDefinedAxis(definition)
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getBarChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getBarChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "bar",
@@ -35825,7 +35840,7 @@ const GaugeChart = {
 			definition.sectionRule.upperInflectionPoint.value
 		].filter((value) => value.startsWith("=")).map((formula) => CompiledFormula.Compile(formula, sheetId, getters));
 	},
-	getRuntime(getters, definition, dataSource, sheetId) {
+	getRuntime(getters, definition, dataSource, sheetId, eventHandlers, colorThemeName) {
 		const locale = getters.getLocale();
 		const chartColors = definition.sectionRule.colors;
 		let gaugeValue = void 0;
@@ -35846,7 +35861,7 @@ const GaugeChart = {
 		}
 		let minValue = getFormulaNumberValue(sheetId, definition.sectionRule.rangeMin, getters);
 		let maxValue = getFormulaNumberValue(sheetId, definition.sectionRule.rangeMax, getters);
-		if (minValue === void 0 || maxValue === void 0) return getInvalidGaugeRuntime(definition, getters);
+		if (minValue === void 0 || maxValue === void 0) return getInvalidGaugeRuntime(definition, getters, colorThemeName);
 		if (maxValue < minValue) [minValue, maxValue] = [maxValue, minValue];
 		const lowerPoint = definition.sectionRule.lowerInflectionPoint;
 		const upperPoint = definition.sectionRule.upperInflectionPoint;
@@ -35878,7 +35893,7 @@ const GaugeChart = {
 		}
 		colors.push(chartColors.upperColor);
 		return {
-			background: getters.getStyleOfSingleCellChart(definition.background, dataRange).background,
+			background: getters.getStyleOfSingleCellChart(definition.background, dataRange, colorThemeName).background,
 			title: {
 				...title,
 				text: title.text ? getters.dynamicTranslate(title.text) : ""
@@ -35912,9 +35927,9 @@ function getFormulaNumberValue(sheetId, formula, getters) {
 	const value = getters.evaluateFormula(sheetId, formula);
 	return isMultipleElementMatrix(value) ? void 0 : tryToNumber(toScalar(value), getters.getLocale());
 }
-function getInvalidGaugeRuntime(definition, getters) {
+function getInvalidGaugeRuntime(definition, getters, colorThemeName) {
 	return {
-		background: getters.getStyleOfSingleCellChart(definition.background, definition.dataRange).background,
+		background: getters.getStyleOfSingleCellChart(definition.background, definition.dataRange, colorThemeName).background,
 		title: definition.title ?? { text: "" },
 		minValue: {
 			value: 0,
@@ -36008,8 +36023,8 @@ const LineChart = {
 			verticalAxis: getDefinedAxis(definition)
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getLineChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getLineChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "line",
@@ -36090,8 +36105,8 @@ const PieChart = {
 			labelRange
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getPieChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getPieChartData(definition, extractData(), getters, colorThemeName);
 		return { chartJsConfig: {
 			type: definition.isDoughnut ? "doughnut" : "pie",
 			data: {
@@ -36167,8 +36182,8 @@ const WaterfallChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getBarChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getBarChartData(definition, extractData(), getters, colorThemeName);
 		const { labels, datasets } = getWaterfallDatasetAndLabels(definition, chartData);
 		return { chartJsConfig: {
 			type: "bar",
@@ -36935,7 +36950,7 @@ var CalendarChartConfigPanel = class extends GenericChartConfigPanel {
 	getGroupByOptions() {
 		const sheetId = this.env.model.getters.getFigureSheetId(this.env.model.getters.getFigureIdFromChartId(this.props.chartId));
 		const definition = SpreadsheetChart.fromStrDefinition(this.env.model.getters, sheetId, this.props.definition).getRangeDefinition();
-		const labels = getBarChartData(definition, getChartData(this.env.model.getters, definition.dataSource), this.env.model.getters).labels.filter((l) => isDateTime(l, DEFAULT_LOCALE));
+		const labels = getBarChartData(definition, getChartData(this.env.model.getters, definition.dataSource), this.env.model.getters, this.env.model.getters.getSpreadsheetTheme().colorThemeName).labels.filter((l) => isDateTime(l, DEFAULT_LOCALE));
 		if (labels.length === 0) return [];
 		const dates = labels.map((label) => toJsDate(label, this.env.model.getters.getLocale()));
 		const uniqueYears = /* @__PURE__ */ new Set();
@@ -36999,7 +37014,7 @@ var ColorScalePicker = class extends Component {
 	});
 	popoverRef = signal.ref(HTMLTableElement);
 	setup() {
-		useExternalListener(window, "click", this.closePopover);
+		useListener(window, "click", this.closePopover.bind(this));
 	}
 	get currentColorScale() {
 		return this.props.definition.colorScale || schemeToColorScale("oranges");
@@ -39647,10 +39662,10 @@ var ScatterConfigPanel = class extends GenericChartConfigPanel {
 var ScorecardChartConfigPanel = class extends Component {
 	static template = "o-spreadsheet-ScorecardChartConfigPanel";
 	static components = {
-		SelectionInput,
 		ChartErrorSection,
 		Section,
-		Select
+		Select,
+		StandaloneComposer
 	};
 	props = useProps(chartSidePanelPropsDefinition);
 	state = proxy({
@@ -39662,30 +39677,18 @@ var ScorecardChartConfigPanel = class extends Component {
 	get errorMessages() {
 		return [...this.state.keyValueDispatchResult?.reasons || [], ...this.state.baselineDispatchResult?.reasons || []].filter((reason) => reason !== "NoChanges").map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
 	}
-	get isKeyValueInvalid() {
-		return !!this.state.keyValueDispatchResult?.isCancelledBecause("InvalidScorecardKeyValue");
-	}
-	get isBaselineInvalid() {
-		return !!this.state.baselineDispatchResult?.isCancelledBecause("InvalidScorecardBaseline");
-	}
-	onKeyValueRangeChanged(ranges) {
-		this.keyValue = ranges[0];
-		this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.chartId, { keyValue: this.keyValue });
-	}
-	updateKeyValueRange() {
+	onConfirmKeyValue(keyValue) {
+		this.keyValue = keyValue;
 		this.state.keyValueDispatchResult = this.props.updateChart(this.props.chartId, { keyValue: this.keyValue });
 	}
-	getKeyValueRange() {
+	getKeyValue() {
 		return this.keyValue || "";
 	}
-	onBaselineRangeChanged(ranges) {
-		this.baseline = ranges[0];
-		this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.chartId, { baseline: this.baseline });
-	}
-	updateBaselineRange() {
+	onConfirmBaseline(baseline) {
+		this.baseline = baseline;
 		this.state.baselineDispatchResult = this.props.updateChart(this.props.chartId, { baseline: this.baseline });
 	}
-	getBaselineRange() {
+	getBaseline() {
 		return this.baseline || "";
 	}
 	updateBaselineMode(baselineMode) {
@@ -40142,6 +40145,7 @@ var MainChartPanelStore = class extends SpreadsheetStore {
 	changeChartType(chartId, newDisplayType) {
 		const currentCreationContext = this.getters.getContextCreationChart(chartId);
 		const savedCreationContext = this.creationContexts[chartId] || {};
+		const auxiliaryRange = currentCreationContext && "auxiliaryRange" in currentCreationContext ? currentCreationContext.auxiliaryRange : savedCreationContext.auxiliaryRange;
 		let dataSetStyles = savedCreationContext.dataSetStyles ?? currentCreationContext?.dataSetStyles;
 		let dataSource = {
 			...savedCreationContext.dataSource,
@@ -40163,7 +40167,8 @@ var MainChartPanelStore = class extends SpreadsheetStore {
 				dataSetsHaveTitle: false,
 				...savedCreationContext.dataSource,
 				...currentCreationContext?.dataSource,
-				dataSets: newRanges ?? []
+				dataSets: newRanges ?? [],
+				labelRange: auxiliaryRange
 			};
 		}
 		this.creationContexts[chartId] = {
@@ -40192,7 +40197,7 @@ var MainChartPanelStore = class extends SpreadsheetStore {
 	dataSetsStartWithSameRanges(currentDataSets, savedDataSets, currentStyles, savedStyles) {
 		return currentDataSets.every((ds, i) => {
 			const savedDs = savedDataSets[i];
-			return deepEquals(ds.dataRange, savedDs.dataRange) && deepEquals(currentStyles?.[ds.dataSetId], savedStyles?.[savedDs.dataSetId]);
+			return deepEquals(ds.dataRange, savedDs?.dataRange) && deepEquals(currentStyles?.[ds.dataSetId], savedStyles?.[savedDs?.dataSetId]);
 		});
 	}
 	/**
@@ -42028,7 +42033,7 @@ var ConditionalFormattingEditor = class extends Component {
 		useLayoutEffect((sheetId, isCfRemoved) => {
 			if (this.activeSheetId !== sheetId || isCfRemoved) this.env.replaceSidePanel("ConditionalFormatting", `ConditionalFormattingEditor_${this.props.cf.id}`);
 		}, () => [this.env.model.getters.getActiveSheetId(), this.isEditedCfRemoved]);
-		useExternalListener(window, "click", () => this.store.closeMenus());
+		useListener(window, "click", () => this.store.closeMenus());
 	}
 	get isEditedCfRemoved() {
 		return !Boolean(this.env.model.getters.getConditionalFormats(this.activeSheetId).find((cf) => cf.id === this.props.cf.id));
@@ -42301,7 +42306,7 @@ function startChartDragAndDrop(env, definition, ev) {
 			canvas.className = "w-100 h-100";
 			container.appendChild(canvas);
 			spreadsheet.appendChild(container);
-			destroyChart = drawChartOnCanvas(canvas, SpreadsheetChart.fromStrDefinition(getters, sheetId, definition).getRuntime(getters, "newChart"), {
+			destroyChart = drawChartOnCanvas(canvas, SpreadsheetChart.fromStrDefinition(getters, sheetId, definition).getRuntime(getters, "newChart", getters.getSpreadsheetTheme().colorThemeName), {
 				width,
 				height
 			}, definition.type, zoom);
@@ -42382,7 +42387,7 @@ var ChartSuggestionPreview = class extends Component {
 	getChartConfiguration() {
 		const getters = this.env.model.getters;
 		const activeSheetId = getters.getActiveSheetId();
-		const runtime = SpreadsheetChart.fromStrDefinition(getters, activeSheetId, this.props.definition).getRuntime(getters, "myChart");
+		const runtime = SpreadsheetChart.fromStrDefinition(getters, activeSheetId, this.props.definition).getRuntime(getters, "myChart", getters.getSpreadsheetTheme().colorThemeName);
 		if (!("chartJsConfig" in runtime)) return null;
 		let config = runtime.chartJsConfig;
 		const existingScales = config.options?.scales ?? {};
@@ -42449,7 +42454,7 @@ var ChartSuggestionPreview = class extends Component {
 		const canvas = this.chartCanvasRef();
 		if (!canvas) return;
 		const getters = this.env.model.getters;
-		let runtime = SpreadsheetChart.fromStrDefinition(getters, getters.getActiveSheetId(), this.props.definition).getRuntime(getters, "myChart");
+		let runtime = SpreadsheetChart.fromStrDefinition(getters, getters.getActiveSheetId(), this.props.definition).getRuntime(getters, "myChart", getters.getSpreadsheetTheme().colorThemeName);
 		const { type } = this.props.definition;
 		if (type === "scorecard") {
 			const rect = canvas.getBoundingClientRect();
@@ -42712,8 +42717,8 @@ const SINGLE_NUMBER_COLUMN_SUGGESTIONS = [
 	{
 		description: _t("Highlights the most recent value compared to the previous one."),
 		isApplicable: ({ rowCount }) => rowCount < 3,
-		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
-			baseline: ctx.prevCellXC,
+		build: (ctx) => scorecardChart(ctx.title, `=${ctx.lastCellXC}`, {
+			baseline: ctx.prevCellXC ? `=${ctx.prevCellXC}` : void 0,
 			baselineMode: "difference"
 		})
 	},
@@ -42746,8 +42751,8 @@ const SINGLE_PERCENTAGE_COLUMN_SUGGESTIONS = [
 	{
 		description: _t("Shows the last percentage value with its baseline."),
 		isApplicable: ({ rowCount }) => rowCount < 3,
-		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
-			baseline: ctx.prevCellXC,
+		build: (ctx) => scorecardChart(ctx.title, `=${ctx.lastCellXC}`, {
+			baseline: ctx.prevCellXC ? `=${ctx.prevCellXC}` : void 0,
 			baselineMode: "percentage"
 		})
 	},
@@ -42776,7 +42781,7 @@ const SINGLE_PERCENTAGE_COLUMN_SUGGESTIONS = [
 const SINGLE_DATE_COLUMN_SUGGESTIONS = [{
 	description: _t("Shows the last date value."),
 	isApplicable: ({ rowCount }) => rowCount === 1,
-	build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC)
+	build: (ctx) => scorecardChart(ctx.title, `=${ctx.lastCellXC}`)
 }];
 /** Pattern D — Single categorical column */
 const SINGLE_CATEGORICAL_COLUMN_SUGGESTIONS = [
@@ -42810,7 +42815,7 @@ const SINGLE_CATEGORICAL_COLUMN_SUGGESTIONS = [
 const SINGLE_LABEL_COLUMN_SUGGESTIONS = [{
 	description: _t("Displays a key performance indicator."),
 	isApplicable: ({ rowCount }) => rowCount === 1,
-	build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
+	build: (ctx) => scorecardChart(ctx.title, `=${ctx.lastCellXC}`, {
 		baselineMode: "text",
 		humanize: false
 	})
@@ -42868,8 +42873,8 @@ const NUMBER_VS_NUMBER_SUGGESTIONS = [
 	{
 		description: _t("Highlights the second metric compared to the first one."),
 		isApplicable: ({ rowCount1, rowCount2 }) => rowCount1 === 1 && rowCount2 === 1,
-		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
-			baseline: ctx.prevCellXC,
+		build: (ctx) => scorecardChart(ctx.title, `=${ctx.lastCellXC}`, {
+			baseline: ctx.prevCellXC ? `=${ctx.prevCellXC}` : void 0,
 			baselineMode: "difference"
 		})
 	},
@@ -42927,10 +42932,10 @@ const LABEL_VS_NUMBER_SUGGESTIONS = [
 	{
 		description: _t("Highlights the most recent value for the named entity."),
 		isApplicable: ({ rowCount }) => rowCount === 1,
-		build: (ctx) => scorecardChart("", ctx.lastCellXC, {
+		build: (ctx) => scorecardChart("", `=${ctx.lastCellXC}`, {
 			humanize: false,
 			baselineMode: "text",
-			baseline: ctx.prevCellXC
+			baseline: ctx.prevCellXC ? `=${ctx.prevCellXC}` : void 0
 		})
 	},
 	{
@@ -43931,6 +43936,7 @@ var FindAndReplaceStore = class extends SpreadsheetStore {
 	mutators = [
 		"updateSearchOptions",
 		"updateSearchContent",
+		"updateReplaceContent",
 		"searchFormulas",
 		"selectPreviousMatch",
 		"selectNextMatch",
@@ -43983,6 +43989,9 @@ var FindAndReplaceStore = class extends SpreadsheetStore {
 	updateSearchContent(toSearch) {
 		this._updateSearch(toSearch, this.searchOptions);
 	}
+	updateReplaceContent(toReplace) {
+		this.toReplace = toReplace;
+	}
 	updateSearchOptions(searchOptions) {
 		this._updateSearch(this.toSearch, {
 			...this.searchOptions,
@@ -44340,7 +44349,7 @@ var FindAndReplacePanel = class extends Component {
 	get currentSheetMatchesCount() {
 		const { activeSheetMatchesCount: count, activeSheetHiddenMatchesCount: hidden, searchOptions } = this.store;
 		const sheetName = this.env.model.getters.getSheetName(this.env.model.getters.getActiveSheetId());
-		let label = count === 1 ? _t("1 match in %(sheetName)s", { sheetName }) : _t("%(count)s matches in %(sheetName)s", {
+		let label = count === 1 ? _t("1 match in '%(sheetName)s'", { sheetName }) : _t("%(count)s matches in '%(sheetName)s'", {
 			count,
 			sheetName
 		});
@@ -44352,10 +44361,10 @@ var FindAndReplacePanel = class extends Component {
 		if (!range) return "";
 		const { specificRangeMatchesCount: count, specificRangeHiddenMatchesCount: hidden, searchOptions } = this.store;
 		const { sheetId, zone } = range;
-		let label = count === 1 ? _t("1 match in range %(range)s of %(sheetName)s", {
+		let label = count === 1 ? _t("1 match in range %(range)s of '%(sheetName)s'", {
 			range: zoneToXc(zone),
 			sheetName: this.env.model.getters.getSheetName(sheetId)
-		}) : _t("%(count)s matches in range %(range)s of %(sheetName)s", {
+		}) : _t("%(count)s matches in range %(range)s of '%(sheetName)s'", {
 			count,
 			range: zoneToXc(zone),
 			sheetName: this.env.model.getters.getSheetName(sheetId)
@@ -44383,7 +44392,7 @@ var FindAndReplacePanel = class extends Component {
 		onMounted(() => this.searchInputRef()?.focus());
 		onWillUnmount(() => this.updateSearchContent.stopDebounce());
 		this.updateSearchContent = debounce(this.store.updateSearchContent, 200);
-		useExternalListener(window, "keydown", (ev) => {
+		useListener(window, "keydown", (ev) => {
 			const code = keyboardEventToShortcutString(ev);
 			if (code === "Ctrl+F" || code === "Ctrl+H") {
 				this.searchInputRef()?.focus();
@@ -44398,6 +44407,9 @@ var FindAndReplacePanel = class extends Component {
 	onSearchInput(ev) {
 		this.updateSearchContent(ev.target.value);
 	}
+	onReplaceInput(ev) {
+		this.store.updateReplaceContent(ev.target.value);
+	}
 	onKeydownPanel(ev) {
 		if (ev.key === "Escape") {
 			ev.preventDefault();
@@ -45978,7 +45990,7 @@ var PivotFilterEditor = class extends Component {
 	buttonFilter = signal.ref();
 	popover;
 	setup() {
-		useExternalListener(window, "click", (ev) => {
+		useListener(window, "click", (ev) => {
 			if (!isChildEvent(this.buttonFilter(), ev)) this.popover.isOpen = false;
 		});
 		onWillUpdateProps((nextProps) => {
@@ -46112,7 +46124,7 @@ var AddDimensionButton = class extends Component {
 	setup() {
 		this.autoComplete = useLocalStore(AutoCompleteStore);
 		this.autoComplete.useProvider(this.getProvider());
-		useExternalListener(window, "click", (ev) => {
+		useListener(window, "click", (ev) => {
 			if (ev.target !== this.buttonRef()) this.popover.isOpen = false;
 		});
 		useAutofocus(this.autofocusRef);
@@ -48490,7 +48502,7 @@ var TableStylesPopover = class extends Component {
 	tableStyleListRef = signal.ref();
 	state = proxy({ selectedCategory: this.initialSelectedCategory });
 	setup() {
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 	}
 	onExternalClick(ev) {
 		const el = this.tableStyleListRef();
@@ -49705,7 +49717,8 @@ var TableStyleEditorPanel = class extends Component {
 	static components = {
 		Section,
 		RoundColorPicker,
-		TableStylePreview
+		TableStylePreview,
+		TextInput
 	};
 	props = useProps({
 		onCloseSidePanel: types$1.function(),
@@ -49714,7 +49727,7 @@ var TableStyleEditorPanel = class extends Component {
 	});
 	state = proxy(this.getInitialState());
 	setup() {
-		useExternalListener(window, "click", () => this.state.pickerOpened = false);
+		useListener(window, "click", () => this.state.pickerOpened = false);
 	}
 	getInitialState() {
 		const editedStyle = this.props.styleId ? this.env.model.getters.getTableStyle(this.props.styleId) : null;
@@ -53591,6 +53604,15 @@ var GridComposer = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/helpers/owl3_helpers.ts
+/**
+* Comes from https://github.com/odoo/odoo/blob/master/addons/web/static/src/owl2/utils.js
+*/
+function render(component, deep = false) {
+	component.__owl__.render(deep);
+}
+
 //#endregion
 //#region src/components/helpers/figure_drag_helper.ts
 function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, initialFigures, { maxX, maxY }, { scrollX: initialScrollX, scrollY: initialScrollY }, { scrollX, scrollY }) {
@@ -53608,19 +53630,19 @@ function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mous
 		};
 	});
 }
-function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize, { scrollX: initialScrollX, scrollY: initialScrollY }, { scrollX, scrollY }, { maxX, maxY }) {
-	let { x, y, width, height } = initialFigure;
+function dragFigureForResize(initialRect, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize, { scrollX: initialScrollX, scrollY: initialScrollY }, { scrollX, scrollY }, { maxX, maxY }) {
+	let { x, y, width, height } = initialRect;
 	if (keepRatio && dirX !== 0 && dirY !== 0) {
-		const deltaX = Math.min(dirX * (mouseInitialX - mouseX + scrollX - initialScrollX), width - minFigSize);
-		const deltaY = Math.min(dirY * (mouseInitialY - mouseY + scrollY - initialScrollY), height - minFigSize);
+		const deltaX = Math.min(dirX * (mouseInitialX - mouseX + scrollX - initialScrollX), width - minFigSize.width);
+		const deltaY = Math.min(dirY * (mouseInitialY - mouseY + scrollY - initialScrollY), height - minFigSize.height);
 		const fraction = Math.min(deltaX / width, deltaY / height);
 		if (dirX < 0) x = x + width * fraction;
 		if (dirY < 0) y = y + height * fraction;
 		width = width * (1 - fraction);
 		height = height * (1 - fraction);
 	} else {
-		const deltaX = Math.max(dirX * (mouseX - mouseInitialX + scrollX - initialScrollX), minFigSize - width);
-		const deltaY = Math.max(dirY * (mouseY - mouseInitialY + scrollY - initialScrollY), minFigSize - height);
+		const deltaX = Math.max(dirX * (mouseX - mouseInitialX + scrollX - initialScrollX), minFigSize.width - width);
+		const deltaY = Math.max(dirY * (mouseY - mouseInitialY + scrollY - initialScrollY), minFigSize.height - height);
 		width = width + deltaX;
 		height = height + deltaY;
 		if (dirX < 0) x = x - deltaX;
@@ -53635,7 +53657,6 @@ function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }
 		y = -scrollY;
 	} else if (y + height > maxY) height = maxY - y;
 	return {
-		...initialFigure,
 		x,
 		y,
 		width,
@@ -53698,29 +53719,30 @@ function snapForMove(env, figuresToSnap, otherFigures) {
 * Try to snap the given figure to the other figures when resizing the figure, and return the snapped
 * figure and the possible snap lines, if any were found
 */
-function snapForResize(env, resizeDirX, resizeDirY, figureToSnap, otherFigures) {
-	const verticalSnapLine = getSnapLine(env, figureToSnap, [resizeDirX === -1 ? "left" : "right"], otherFigures, ["right", "left"]);
+function snapForResize(env, resizeDirX, resizeDirY, rect, otherFigures) {
+	const verticalSnapLine = getSnapLine(env, rect, [resizeDirX === -1 ? "left" : "right"], otherFigures, ["right", "left"]);
+	const horizontalSnapLine = getSnapLine(env, rect, [resizeDirY === -1 ? "top" : "bottom"], otherFigures, ["bottom", "top"]);
 	if (verticalSnapLine) {
-		if (resizeDirX === 1) figureToSnap.width -= verticalSnapLine.snapOffset;
+		if (resizeDirX === 1) rect.width -= verticalSnapLine.snapOffset;
 		else if (resizeDirX === -1) {
-			figureToSnap.x -= verticalSnapLine.snapOffset;
-			figureToSnap.width += verticalSnapLine.snapOffset;
+			rect.x -= verticalSnapLine.snapOffset;
+			rect.width += verticalSnapLine.snapOffset;
 		}
 	}
-	const horizontalSnapLine = getSnapLine(env, figureToSnap, [resizeDirY === -1 ? "top" : "bottom"], otherFigures, ["bottom", "top"]);
 	if (horizontalSnapLine) {
-		if (resizeDirY === 1) figureToSnap.height -= horizontalSnapLine.snapOffset;
+		if (resizeDirY === 1) rect.height -= horizontalSnapLine.snapOffset;
 		else if (resizeDirY === -1) {
-			figureToSnap.y -= horizontalSnapLine.snapOffset;
-			figureToSnap.height += horizontalSnapLine.snapOffset;
+			rect.y -= horizontalSnapLine.snapOffset;
+			rect.height += horizontalSnapLine.snapOffset;
 		}
 	}
-	figureToSnap.x = Math.round(figureToSnap.x);
-	figureToSnap.y = Math.round(figureToSnap.y);
-	figureToSnap.height = Math.round(figureToSnap.height);
-	figureToSnap.width = Math.round(figureToSnap.width);
 	return {
-		snappedFigures: [figureToSnap],
+		snappedRect: {
+			x: Math.round(rect.x),
+			y: Math.round(rect.y),
+			width: Math.round(rect.width),
+			height: Math.round(rect.height)
+		},
 		verticalSnapLine,
 		horizontalSnapLine
 	};
@@ -53911,7 +53933,7 @@ var FiguresContainer = class extends Component {
 		this.zoomStore = useStore(ZoomStore);
 		this.chartDragStore = useStore(ChartDragStore);
 		onMounted(() => {
-			this.render();
+			render(this);
 		});
 		onWillUpdateProps(() => {
 			const sheetId = this.env.model.getters.getActiveSheetId();
@@ -53985,6 +54007,13 @@ var FiguresContainer = class extends Component {
 	get selectedRectStyle() {
 		return this.dnd.selectedRect ? this.rectToCss(this.dnd.selectedRect) : "";
 	}
+	get maxDimensions() {
+		const sheetId = this.env.model.getters.getActiveSheetId();
+		return {
+			maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
+			maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end
+		};
+	}
 	getInverseViewportPositionStyle(container) {
 		const { scrollX, scrollY } = this.viewStore.activeSheetScrollInfo;
 		const { x: viewportX, y: viewportY } = this.viewStore.mainViewportCoordinates;
@@ -54042,12 +54071,9 @@ var FiguresContainer = class extends Component {
 			y: ev.clientY / zoom
 		};
 		const initialScrollPosition = this.viewStore.activeSheetScrollInfo;
+		const maxDimensions = this.maxDimensions;
 		const initialFigures = this.env.model.getters.getSelectedFigureIds().map((id) => this.env.model.getters.getFigure(sheetId, id)).filter(isDefined).map((f) => this.env.model.getters.getFigureUI(sheetId, f)).map(this.toBottomRightViewport.bind(this));
 		const draggedFigureId = figureUI.id;
-		const maxDimensions = {
-			maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
-			maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end
-		};
 		let hasStartedDnd = false;
 		let overlappingChartOrCarousel = void 0;
 		const onMouseMove = (ev) => {
@@ -54094,7 +54120,7 @@ var FiguresContainer = class extends Component {
 						...this.viewStore.viewports.getPositionAnchorOffset(sheetId, f)
 					};
 				}) || [];
-				this.env.model.dispatch("MOVE_FIGURES", { figures: payloads });
+				this.env.model.dispatch("UPDATE_FIGURES", { figures: payloads });
 			} else {
 				const overlappingFigureId = overlappingChartOrCarousel.id;
 				const chartFigureIds = this.dnd.selectedFigures?.map((f) => f.id) || [];
@@ -54119,7 +54145,7 @@ var FiguresContainer = class extends Component {
 		this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 	}
 	/**
-	* Initialize the resize of a figure with mouse movements
+	* Initialize the resize of the selected figures with mouse movements
 	*
 	* @param dirX X direction of the resize. -1 : resize from the left border of the figure, 0 : no resize in X, 1 :
 	* resize from the right border of the figure
@@ -54127,44 +54153,78 @@ var FiguresContainer = class extends Component {
 	* resize from the bottom border of the figure
 	* @param ev Mouse Event
 	*/
-	startResize(figureUI, dirX, dirY, ev) {
+	resizeAllSelectedFigures(dirX, dirY, ev) {
 		ev.stopPropagation();
-		const initialScrollPosition = this.viewStore.activeSheetScrollInfo;
-		const keepRatio = figureRegistry.get(figureUI.tag).keepRatio || false;
-		const minFigSize = figureRegistry.get(figureUI.tag).minFigSize || 80;
-		const zoom = this.zoomStore.zoomLevel;
 		const sheetId = this.env.model.getters.getActiveSheetId();
+		const zoom = this.zoomStore.zoomLevel;
 		const initialMousePosition = {
 			x: ev.clientX / zoom,
 			y: ev.clientY / zoom
 		};
-		const maxDimensions = {
-			maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
-			maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end
-		};
+		const initialScrollPosition = this.viewStore.activeSheetScrollInfo;
+		const maxDimensions = this.maxDimensions;
+		const selectedFiguresIds = this.env.model.getters.getSelectedFigureIds();
+		const initialFigures = selectedFiguresIds.map((id) => this.env.model.getters.getFigure(sheetId, id)).filter(isDefined).map((figure) => this.env.model.getters.getFigureUI(sheetId, figure)).map(this.toBottomRightViewport.bind(this));
+		const mutlipleFiguresSelected = selectedFiguresIds.length > 1;
+		const otherFiguresUI = this.getOtherFigures(selectedFiguresIds);
+		if (initialFigures.length === 0) return;
+		let minAggregateSize;
+		if (mutlipleFiguresSelected) {
+			const widthScaleMax = Math.max(...initialFigures.map((f) => {
+				return figureRegistry.get(f.tag).minFigSize / f.width;
+			}));
+			const heightScaleMax = Math.max(...initialFigures.map((f) => {
+				return figureRegistry.get(f.tag).minFigSize / f.height;
+			}));
+			const initialAggregateRect = rectUnion(...initialFigures);
+			minAggregateSize = {
+				width: Math.round(initialAggregateRect.width * widthScaleMax),
+				height: Math.round(initialAggregateRect.height * heightScaleMax)
+			};
+		} else {
+			const minFigSize = figureRegistry.get(initialFigures[0].tag).minFigSize;
+			minAggregateSize = {
+				width: minFigSize,
+				height: minFigSize
+			};
+		}
 		const onMouseMove = (ev) => {
-			const draggedFigure = dragFigureForResize(figureUI, dirX, dirY, {
+			const currentMousePosition = {
 				x: ev.clientX / zoom,
 				y: ev.clientY / zoom
-			}, initialMousePosition, keepRatio, minFigSize, initialScrollPosition, this.viewStore.activeSheetScrollInfo, maxDimensions);
-			const otherFigures = this.getOtherFigures([figureUI.id]);
-			const snapResult = snapForResize(this.env, dirX, dirY, draggedFigure, otherFigures);
-			this.dnd.draggedFigure = snapResult.snappedFigures[0];
-			this.dnd.selectedFigures = [this.dnd.draggedFigure];
-			this.dnd.selectedRect = void 0;
-			this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
-			this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+			};
+			const keepRatio = mutlipleFiguresSelected || ev.shiftKey ? true : figureRegistry.get(initialFigures[0].tag).keepRatio || false;
+			const initialRect = rectUnion(...initialFigures);
+			const resizedRect = dragFigureForResize(initialRect, dirX, dirY, currentMousePosition, initialMousePosition, keepRatio, minAggregateSize, initialScrollPosition, this.viewStore.activeSheetScrollInfo, maxDimensions);
+			const { snappedRect, verticalSnapLine, horizontalSnapLine } = snapForResize(this.env, dirX, dirY, resizedRect, otherFiguresUI);
+			const scaleX = snappedRect.width / initialRect.width;
+			const scaleY = snappedRect.height / initialRect.height;
+			const snappedFigures = initialFigures.map((figureUI) => ({
+				...figureUI,
+				x: Math.round(snappedRect.x + (figureUI.x - initialRect.x) * scaleX),
+				y: Math.round(snappedRect.y + (figureUI.y - initialRect.y) * scaleY),
+				width: Math.round(figureUI.width * scaleX),
+				height: Math.round(figureUI.height * scaleY)
+			}));
+			this.dnd.draggedFigure = snappedFigures[0];
+			this.dnd.selectedFigures = snappedFigures;
+			this.dnd.selectedRect = this.getDndFigureRect();
+			this.dnd.horizontalSnap = this.getSnap(horizontalSnapLine);
+			this.dnd.verticalSnap = this.getSnap(verticalSnapLine);
 		};
-		const onMouseUp = (ev) => {
-			if (!this.dnd.draggedFigure) return;
-			const update = this.viewStore.viewports.getPositionAnchorOffset(this.env.model.getters.getActiveSheetId(), this.dnd.draggedFigure);
-			if (dirX) update.width = this.dnd.draggedFigure.width;
-			if (dirY) update.height = this.dnd.draggedFigure.height;
-			this.env.model.dispatch("UPDATE_FIGURE", {
-				sheetId: this.env.model.getters.getActiveSheetId(),
-				figureId: figureUI.id,
-				...update
+		const onMouseUp = () => {
+			if (!this.dnd.selectedFigures) return;
+			const dispatchPayload = this.dnd.selectedFigures.map((figureUI) => {
+				const update = this.viewStore.viewports.getPositionAnchorOffset(sheetId, figureUI);
+				if (dirX) update.width = figureUI.width;
+				if (dirY) update.height = figureUI.height;
+				return {
+					sheetId,
+					figureId: figureUI.id,
+					...update
+				};
 			});
+			this.env.model.dispatch("UPDATE_FIGURES", { figures: dispatchPayload });
 			this.dnd.draggedFigure = void 0;
 			this.dnd.selectedFigures = void 0;
 			this.dnd.selectedRect = void 0;
@@ -54827,7 +54887,7 @@ function useTouchHandlers(ref, { updateScroll, canMoveUp, canMoveDown, getZoom,
 		passive: false,
 		capture: false
 	});
-	useExternalListener(window, "pointerup", onPointerUp, {
+	useListener(window, "pointerup", onPointerUp, {
 		passive: false,
 		capture: true
 	});
@@ -55391,10 +55451,10 @@ var Grid = class extends Component {
 		this.checkboxToggleStore = useStore(CheckboxToggleStore);
 		useStore(ArrayFormulaHighlight);
 		this.automaticSumStore = useLocalStore(AutomaticSumStore);
-		useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
-		useExternalListener(document.body, "cut", this.copy.bind(this, true));
-		useExternalListener(document.body, "copy", this.copy.bind(this, false));
-		useExternalListener(document.body, "paste", this.paste);
+		useSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
+		useListener(document.body, "cut", this.copy.bind(this, true));
+		useListener(document.body, "copy", this.copy.bind(this, false));
+		useListener(document.body, "paste", this.paste.bind(this));
 		onMounted(() => this.focusDefaultElement());
 		this.props.exposeFocus(() => this.focusDefaultElement());
 		useGridDrawing({
@@ -64525,36 +64585,37 @@ function generateMasterChartConfig(chartJsConfig) {
 //#endregion
 //#region src/plugins/ui_core_views/evaluation_chart.ts
 var EvaluationChartPlugin = class extends CoreViewPlugin {
-	static getters = ["getChartRuntime", "getStyleOfSingleCellChart"];
+	static getters = ["getStyleOfSingleCellChart", "getChartRuntimeWithTheme"];
 	charts = {};
 	handle(cmd) {
-		if (invalidateEvaluationCommands.has(cmd.type) || invalidateCFEvaluationCommands.has(cmd.type) || invalidateChartEvaluationCommands.has(cmd.type)) for (const chartId in this.charts) this.charts[chartId] = void 0;
+		if (invalidateEvaluationCommands.has(cmd.type) || invalidateCFEvaluationCommands.has(cmd.type) || invalidateChartEvaluationCommands.has(cmd.type)) for (const chartId in this.charts) this.charts[chartId] = {};
 		switch (cmd.type) {
 			case "UPDATE_CHART":
 			case "CREATE_CHART":
-				this.charts[cmd.chartId] = void 0;
+				this.charts[cmd.chartId] = {};
 				break;
 			case "DELETE_CHART":
-				this.charts[cmd.chartId] = void 0;
+				this.charts[cmd.chartId] = {};
 				break;
 			case "DELETE_SHEET":
-				for (const chartId in this.charts) if (!this.getters.isChartDefined(chartId)) this.charts[chartId] = void 0;
+				for (const chartId in this.charts) if (!this.getters.isChartDefined(chartId)) this.charts[chartId] = {};
 				break;
 		}
 	}
-	getChartRuntime(chartId) {
-		if (!this.charts[chartId]) {
+	getChartRuntimeWithTheme(chartId, colorThemeName) {
+		if (!this.charts[chartId]) this.charts[chartId] = {};
+		if (!this.charts[chartId][colorThemeName]) {
 			const chart = this.getters.getChart(chartId);
 			if (!chart) throw new Error(`No chart for the given id: ${chartId}`);
-			this.charts[chartId] = this.createRuntimeChart(chartId, chart);
+			this.charts[chartId][colorThemeName] = this.createRuntimeChart(chartId, chart, colorThemeName);
 		}
-		return this.charts[chartId];
+		return this.charts[chartId][colorThemeName];
 	}
 	/**
 	* Get the background and textColor of a chart based on the color of the first cell of the main range of the chart.
 	*/
-	getStyleOfSingleCellChart(chartBackground, mainRange) {
-		const themeBackground = this.getters.getSpreadsheetTheme().backgroundColor;
+	getStyleOfSingleCellChart(chartBackground, mainRange, colorThemeName) {
+		const themeBackground = COLOR_THEMES[colorThemeName].backgroundColor;
 		if (chartBackground) return {
 			background: chartBackground,
 			fontColor: chartFontColor(chartBackground)
@@ -64595,7 +64656,7 @@ var EvaluationChartPlugin = class extends CoreViewPlugin {
 				else {
 					if (!chart) continue;
 					const type = this.getters.getChartType(chartId);
-					const img = await chartToImageUrl(this.getters.getChartRuntime(chartId), figure, type);
+					const img = await chartToImageUrl(this.getChartRuntimeWithTheme(chartId, "light"), figure, type);
 					if (img) sheet.images.push({
 						...figure,
 						tag: "image",
@@ -64613,9 +64674,9 @@ var EvaluationChartPlugin = class extends CoreViewPlugin {
 			sheet.charts = figures;
 		}
 	}
-	createRuntimeChart(chartId, chart) {
+	createRuntimeChart(chartId, chart, colorThemeName) {
 		const definition = chart.getRangeDefinition();
-		const runtime = chart.getRuntime(this.getters, chartId);
+		const runtime = chart.getRuntime(this.getters, chartId, colorThemeName);
 		if ("chartJsConfig" in runtime && /line|combo|bar|scatter|waterfall/.test(definition.type)) {
 			const chartJsConfig = runtime.chartJsConfig;
 			runtime["masterChartConfig"] = generateMasterChartConfig(chartJsConfig);
@@ -65981,6 +66042,39 @@ var PivotUIPlugin = class extends CoreViewPlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/ui_plugin.ts
+/**
+* UI plugins handle any transient data required to display a spreadsheet.
+* They can draw on the grid canvas.
+*/
+var UIPlugin = class extends BasePlugin {
+	static layers = [];
+	getters;
+	ui;
+	selection;
+	dispatch;
+	canDispatch;
+	constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection }) {
+		super(stateObserver);
+		this.getters = getters;
+		this.ui = uiActions;
+		this.selection = selection;
+		this.dispatch = dispatch;
+		this.canDispatch = canDispatch;
+	}
+	drawLayer(ctx, layer) {}
+};
+
+//#endregion
+//#region src/plugins/ui_feature/chart_ui.ts
+var ChartUIPlugin = class extends UIPlugin {
+	static getters = ["getChartRuntime"];
+	getChartRuntime(chartId) {
+		return this.getters.getChartRuntimeWithTheme(chartId, this.getters.getSpreadsheetTheme().colorThemeName);
+	}
+};
+
 //#endregion
 //#region src/helpers/range_adapter_functions.ts
 function getRangeAdapterFunctions(executedCommand) {
@@ -66970,30 +67064,6 @@ var Session = class extends EventBus {
 	}
 };
 
-//#endregion
-//#region src/plugins/ui_plugin.ts
-/**
-* UI plugins handle any transient data required to display a spreadsheet.
-* They can draw on the grid canvas.
-*/
-var UIPlugin = class extends BasePlugin {
-	static layers = [];
-	getters;
-	ui;
-	selection;
-	dispatch;
-	canDispatch;
-	constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection }) {
-		super(stateObserver);
-		this.getters = getters;
-		this.ui = uiActions;
-		this.selection = selection;
-		this.dispatch = dispatch;
-		this.canDispatch = canDispatch;
-	}
-	drawLayer(ctx, layer) {}
-};
-
 //#endregion
 //#region src/plugins/ui_feature/collaborative.ts
 var CollaborativePlugin = class extends UIPlugin {
@@ -67077,41 +67147,6 @@ var CollaborativePlugin = class extends UIPlugin {
 
 //#endregion
 //#region src/plugins/ui_feature/color_theme.ts
-const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
-const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
-const HEADER_BORDER_COLOR = "#C0C0C0";
-const TEXT_HEADER_COLOR = "#666666";
-const BACKGROUND_HEADER_COLOR = "#F8F9FA";
-const BACKGROUND_HEADER_SELECTED_COLOR = "#E8EAED";
-const BACKGROUND_HEADER_ACTIVE_COLOR = "#595959";
-const COLOR_THEMES = {
-	light: {
-		backgroundColor: "#FFFFFF",
-		gridBorderColor: "#CECFCF",
-		headerBackgroundColor: BACKGROUND_HEADER_COLOR,
-		headerActiveBackgroundColor: BACKGROUND_HEADER_ACTIVE_COLOR,
-		headerSelectedBackgroundColor: BACKGROUND_HEADER_SELECTED_COLOR,
-		headerTextColor: TEXT_HEADER_COLOR,
-		headerBorderColor: HEADER_BORDER_COLOR,
-		frozenPaneBorderColor: FROZEN_PANE_BORDER_COLOR,
-		frozenPaneHeaderBorderColor: FROZEN_PANE_HEADER_BORDER_COLOR,
-		singleCellSelectionBackgroundColor: "#F3F7FE",
-		multipleCellsSelectionBackgroundColor: "#E9F0FF"
-	},
-	dark: {
-		backgroundColor: adaptForDarkMode("#1A1C2E"),
-		gridBorderColor: adaptForDarkMode("#6B706F"),
-		headerBackgroundColor: adaptForDarkMode("#262A36"),
-		headerActiveBackgroundColor: adaptForDarkMode("#3A4052"),
-		headerSelectedBackgroundColor: adaptForDarkMode("#4E566E"),
-		headerTextColor: adaptForDarkMode("#A1A6B3"),
-		headerBorderColor: adaptForDarkMode("#7A7F91"),
-		frozenPaneBorderColor: adaptForDarkMode("#7A7F91"),
-		frozenPaneHeaderBorderColor: adaptForDarkMode("#9FA5BD"),
-		singleCellSelectionBackgroundColor: adaptForDarkMode("#696E8044"),
-		multipleCellsSelectionBackgroundColor: adaptForDarkMode("#828AA044")
-	}
-};
 var ColorThemeUIPlugin = class extends UIPlugin {
 	static getters = ["isDarkMode", "getSpreadsheetTheme"];
 	colorScheme;
@@ -69382,7 +69417,7 @@ var FigureUIPlugin = class extends UIPlugin {
 	static getters = ["getFigureUI"];
 	allowDispatch(cmd) {
 		switch (cmd.type) {
-			case "MOVE_FIGURES":
+			case "UPDATE_FIGURES":
 				for (const updateFigurePayload of cmd.figures) {
 					const result = this.canDispatch("UPDATE_FIGURE", updateFigurePayload);
 					if (!result.isSuccessful) return result.reasons;
@@ -69406,7 +69441,7 @@ var FigureUIPlugin = class extends UIPlugin {
 	}
 	handle(cmd) {
 		switch (cmd.type) {
-			case "MOVE_FIGURES":
+			case "UPDATE_FIGURES":
 				for (const updateFigurePayload of cmd.figures) this.dispatch("UPDATE_FIGURE", updateFigurePayload);
 				break;
 			case "DELETE_FIGURES":
@@ -70553,7 +70588,7 @@ var GridSelectionPlugin = class extends UIPlugin {
 //#endregion
 //#region src/plugins/plugin_registries.ts
 const corePluginRegistry = new Registry().add("settings", SettingsPlugin).add("sheet", SheetPlugin).add("header grouping", HeaderGroupingPlugin).add("header visibility", HeaderVisibilityPlugin).add("tables", TablePlugin).add("dataValidation", DataValidationPlugin).add("cell", CellPlugin).add("default", DefaultPlugin).add("merge", MergePlugin).add("headerSize", HeaderSizePlugin).add("borders", BordersPlugin).add("conditional formatting", ConditionalFormatPlugin).add("figures", FigurePlugin).add("chart", ChartPlugin).add("carousel", CarouselPlugin).add("image", ImagePlugin).add("named_ranges", NamedRangesPlugin).add("pivot_core", PivotCorePlugin).add("spreadsheet_pivot_core", SpreadsheetPivotCorePlugin).add("tableStyle", TableStylePlugin);
-const featurePluginRegistry = new Registry().add("ui_sheet", SheetUIPlugin).add("ui_options", UIOptionsPlugin).add("sort", SortPlugin).add("format", FormatPlugin).add("insert_pivot", InsertPivotPlugin).add("pivot_presence", PivotPresencePlugin).add("subtotal_evaluation", SubtotalEvaluationPlugin).add("collaborative", CollaborativePlugin).add("history", HistoryPlugin).add("datavalidation_insert", DataValidationInsertionPlugin).add("dynamic_translate", DynamicTranslate).add("geo_features", GeoFeaturePlugin).add("color_theme", ColorThemeUIPlugin).add("lock_sheet", LockSheetPlugin);
+const featurePluginRegistry = new Registry().add("ui_sheet", SheetUIPlugin).add("ui_options", UIOptionsPlugin).add("sort", SortPlugin).add("format", FormatPlugin).add("insert_pivot", InsertPivotPlugin).add("pivot_presence", PivotPresencePlugin).add("subtotal_evaluation", SubtotalEvaluationPlugin).add("collaborative", CollaborativePlugin).add("history", HistoryPlugin).add("datavalidation_insert", DataValidationInsertionPlugin).add("dynamic_translate", DynamicTranslate).add("geo_features", GeoFeaturePlugin).add("color_theme", ColorThemeUIPlugin).add("lock_sheet", LockSheetPlugin).add("chart_ui", ChartUIPlugin);
 const statefulUIPluginRegistry = new Registry().add("selection", GridSelectionPlugin).add("evaluation_filter", FilterEvaluationPlugin).add("header_visibility_ui", HeaderVisibilityUIPlugin).add("cell_computed_style", CellComputedStylePlugin).add("table_computed_style", TableComputedStylePlugin).add("header_positions", HeaderPositionsUIPlugin).add("clipboard", ClipboardPlugin).add("carousel_ui", CarouselUIPlugin).add("figure_ui", FigureUIPlugin);
 const coreViewsPluginRegistry = new Registry().add("evaluation", EvaluationPlugin).add("evaluation_chart", EvaluationChartPlugin).add("fingerprints", FingerprintPlugin).add("evaluation_cf", EvaluationConditionalFormatPlugin).add("row_size", HeaderSizeUIPlugin).add("data_validation_ui", EvaluationDataValidationPlugin).add("dynamic_tables", DynamicTablesPlugin).add("custom_colors", CustomColorsPlugin).add("pivot_ui", PivotUIPlugin).add("cell_icon", CellIconPlugin).add("formula_tracker", FormulaTrackerPlugin);
 
@@ -71495,6 +71530,31 @@ var ImageProvider = class {
 var MainViewportStore = class extends SpreadsheetStore {
 	viewStore = this.get(ViewportsStore);
 	sheetIdAtFinalize = void 0;
+	constructor(get) {
+		super(get);
+		this.model.selection.observe(this, { handleEvent: this.handleEvent.bind(this) });
+		this.onDispose(() => {
+			this.model.selection.unobserve(this);
+		});
+	}
+	handleEvent(event) {
+		const eventSheetId = this.getters.getActiveSheetId();
+		if (event.options.scrollIntoView) {
+			const oldZone = event.previousAnchor.zone;
+			const newZone = event.anchor.zone;
+			const isUpdateAnchorEvent = event.mode === "updateAnchor";
+			const sameZone = isEqual(oldZone, newZone);
+			let { col, row } = isUpdateAnchorEvent && sameZone ? event.anchor.cell : findCellInNewZone(oldZone, newZone);
+			if (isUpdateAnchorEvent && !sameZone) {
+				const { top, bottom, left, right } = this.viewStore.viewports.getMainInternalViewport(eventSheetId);
+				if (oldZone.left === newZone.left && oldZone.right === newZone.right) col = left > col || col > right ? left : col;
+				if (oldZone.top === newZone.top && oldZone.bottom === newZone.bottom) row = top > row || row > bottom ? top : row;
+			}
+			col = Math.min(col, this.getters.getNumberCols(eventSheetId) - 1);
+			row = Math.min(row, this.getters.getNumberRows(eventSheetId) - 1);
+			this.viewStore.scrollToCell(eventSheetId, col, row);
+		}
+	}
 	handle(cmd) {
 		switch (cmd.type) {
 			case "UNDO":
@@ -71884,7 +71944,7 @@ var BottomBarSheet = class extends Component {
 	DOMFocusableElementStore;
 	setup() {
 		this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
-		useExternalListener(window, "click", this.onExternalClick.bind(this), { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 		useLayoutEffect(() => {}, () => [this.state.isEditing]);
 		onPatched(() => {
 			if (this.sheetNameRef() && this.state.isEditing && this.editionState === "initializing") {
@@ -72448,7 +72508,7 @@ var SpreadsheetDashboard = class extends Component {
 		this.zoomStore = useStore(ZoomStore);
 		useLocalStore(HoveredTableStore);
 		const rendererStore = useLocalStore(RendererStore, OrderedLayers().filter((layer) => layer !== "Headers"));
-		useChildSubEnv({ getPopoverContainerRect: () => this.zoomStore.getZoomedRect(this.getGridRect()) });
+		useSubEnv({ getPopoverContainerRect: () => this.zoomStore.getZoomedRect(this.getGridRect()) });
 		useGridDrawing({
 			canvasRef: this.canvasRef,
 			rendererStore,
@@ -72520,13 +72580,12 @@ var SpreadsheetDashboard = class extends Component {
 		return this.env.model.getters.getColDimensions(sheetId, right).end;
 	}
 	get dashboardStyle() {
-		const style = { zoom: this.zoomStore.cssZoom };
-		if (this.env.model.getters.getActiveSheet().backgroundColor) style["background-color"] = "transparent";
-		return cssPropertiesToCss(style);
+		return cssPropertiesToCss({ zoom: this.zoomStore.cssZoom });
 	}
 	get backgroundStyle() {
 		const sheet = this.env.model.getters.getActiveSheet();
-		return sheet.backgroundColor ? cssPropertiesToCss({ "background-color": sheet.backgroundColor }) : "";
+		const theme = this.env.model.getters.getSpreadsheetTheme();
+		return cssPropertiesToCss({ "background-color": sheet.backgroundColor || theme.backgroundColor });
 	}
 };
 
@@ -72872,7 +72931,7 @@ var RibbonMenu = class extends Component {
 		parentState: void 0
 	});
 	setup() {
-		useExternalListener(window, "click", this.onExternalClick, { capture: true });
+		useListener(window, "click", this.onExternalClick.bind(this), { capture: true });
 		onMounted(this.updateShadows);
 	}
 	onExternalClick(ev) {
@@ -73526,7 +73585,7 @@ var SpreadsheetPrint = class extends Component {
 	setup() {
 		this.printStore = useLocalStore(SpreadsheetPrintStore);
 		let styleElement = null;
-		useExternalListener(window, "beforeprint", () => {
+		useListener(window, "beforeprint", () => {
 			styleElement = document.createElement("style");
 			styleElement.id = "o-spreadsheet-print-style";
 			const size = `${this.printStore.pageLayout} ${this.printStore.orientation}`;
@@ -73539,7 +73598,7 @@ var SpreadsheetPrint = class extends Component {
 				styleElement = null;
 			}
 		};
-		useExternalListener(window, "afterprint", () => removePrintStyle());
+		useListener(window, "afterprint", () => removePrintStyle());
 		onWillUnmount(() => removePrintStyle());
 	}
 	get pageStyle() {
@@ -74528,8 +74587,8 @@ var TopBar = class extends Component {
 		this.composerFocusStore = useStore(ComposerFocusStore);
 		this.fingerprints = useStore(FormulaFingerprintStore);
 		this.topBarToolStore = useStore(TopBarToolStore);
-		useExternalListener(window, "click", this.onExternalClick);
-		useExternalListener(window, "keydown", this.onKeydown);
+		useListener(window, "click", this.onExternalClick.bind(this));
+		useListener(window, "keydown", this.onKeydown.bind(this));
 		this.menus = topbarMenuRegistry.getMenuItems();
 		let lastWidth;
 		const updateVisibility = () => {
@@ -74856,9 +74915,9 @@ var Spreadsheet = class extends Component {
 			const el = this.spreadsheetRef();
 			if (el && !el.contains(document.activeElement) && document.activeElement?.contains(el)) this.focusGrid();
 		});
-		useExternalListener(window, "resize", () => this.render(true));
-		useExternalListener(document.body, "wheel", () => {});
-		useExternalListener(window, "keydown", async (event) => {
+		useListener(window, "resize", () => render(this, true));
+		useListener(document.body, "wheel", () => {});
+		useListener(window, "keydown", async (event) => {
 			if (keyboardEventToShortcutString(event) === "Ctrl+P") {
 				this.state.printModeEnabled = true;
 				event.stopPropagation();
@@ -74878,11 +74937,11 @@ var Spreadsheet = class extends Component {
 			resizeObserver.observe(el);
 			return () => resizeObserver.disconnect();
 		});
-		const render = batched(this.render.bind(this, true));
+		const batchedRender = batched(() => render(this, true));
 		onMounted(() => {
 			this.bindModelEvents();
 			this.checkViewportSize();
-			stores.on("store-updated", this, render);
+			stores.on("store-updated", this, batchedRender);
 		});
 		onWillUnmount(() => {
 			this.unbindModelEvents();
@@ -74894,7 +74953,7 @@ var Spreadsheet = class extends Component {
 		});
 	}
 	bindModelEvents() {
-		this.model.on("update", this, () => this.render(true));
+		this.model.on("update", this, () => render(this, true));
 		this.model.on("command-rejected", this, ({ result }) => {
 			if (result.isCancelledBecause("SheetLocked")) this.notificationStore.notifyUser({
 				type: "info",
@@ -80967,6 +81026,10 @@ var LinkEditor = class extends Component {
 		this.computeLinks();
 		onMounted(() => this.urlInput()?.focus());
 	}
+	onLinkUrlInput(ev) {
+		this.state.url = ev.target.value;
+		this.computeLinks();
+	}
 	computeLinks() {
 		this.state.selectedIndex = null;
 		this.state.linksByCategory = this.linkProposalByCategory;
@@ -81666,8 +81729,8 @@ const BubbleChart = {
 		};
 	},
 	copyInSheetId: (definition) => definition,
-	getRuntime(getters, definition) {
-		const chartData = getBubbleChartData(definition, getters);
+	getRuntime(getters, definition, chartDataExtractors, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getBubbleChartData(definition, getters, colorThemeName);
 		return { chartJsConfig: {
 			type: "line",
 			data: {
@@ -81742,8 +81805,8 @@ const CalendarChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractData }) {
-		const chartData = getCalendarChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getCalendarChartData(definition, extractData(), getters, colorThemeName);
 		const { labels, datasets } = getCalendarChartDatasetAndLabels(definition, chartData);
 		return { chartJsConfig: {
 			type: "calendar",
@@ -81829,8 +81892,8 @@ const ComboChart = {
 			annotationLink: context.annotationLink
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getBarChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getBarChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "bar",
@@ -81906,8 +81969,8 @@ const FunnelChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getFunnelChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getFunnelChartData(definition, extractData(), getters, colorThemeName);
 		return { chartJsConfig: {
 			type: "funnel",
 			data: {
@@ -81969,8 +82032,8 @@ const GeoChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getGeoChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getGeoChartData(definition, extractData(), getters, colorThemeName);
 		return { chartJsConfig: {
 			type: "choropleth",
 			data: { datasets: getGeoChartDatasets(definition, chartData) },
@@ -82039,7 +82102,7 @@ const PyramidChart = {
 	},
 	getDefinitionForExcel(getters, definition, { dataSets, labelRange }) {
 		if (definition.dataSource.type !== "range") return;
-		const chartData = getPyramidChartData(definition, getChartData(getters, definition.dataSource), getters);
+		const chartData = getPyramidChartData(definition, getChartData(getters, definition.dataSource), getters, "light");
 		const { dataSetsValues } = chartData;
 		const maxValue = Math.max(...dataSetsValues.map((dataSet) => Math.max(...dataSet.data.map((cell) => isNumberResult(cell) ? Math.abs(cell.value) : -Infinity))));
 		return {
@@ -82053,8 +82116,8 @@ const PyramidChart = {
 			maxValue
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getPyramidChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getPyramidChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "bar",
@@ -82136,8 +82199,8 @@ const RadarChart = {
 			labelRange
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getRadarChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getRadarChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "radar",
@@ -82217,8 +82280,8 @@ const ScatterChart = {
 			verticalAxis: getDefinedAxis(definition)
 		};
 	},
-	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers) {
-		const chartData = getLineChartData(definition, extractData(), getters);
+	getRuntime(getters, definition, { extractData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getLineChartData(definition, extractData(), getters, colorThemeName);
 		return {
 			chartJsConfig: {
 				type: "line",
@@ -82296,8 +82359,8 @@ const SunburstChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractHierarchicalData }, sheetId, eventHandlers) {
-		const chartData = getHierarchalChartData(definition, extractHierarchicalData(), getters);
+	getRuntime(getters, definition, { extractHierarchicalData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getHierarchalChartData(definition, extractHierarchicalData(), getters, colorThemeName);
 		return { chartJsConfig: {
 			type: "doughnut",
 			data: { datasets: getSunburstChartDatasets(definition, chartData) },
@@ -82370,8 +82433,8 @@ const TreeMapChart = {
 		};
 	},
 	getDefinitionForExcel: () => void 0,
-	getRuntime(getters, definition, { extractHierarchicalData }, sheetId, eventHandlers) {
-		const chartData = getHierarchalChartData(definition, extractHierarchicalData(), getters);
+	getRuntime(getters, definition, { extractHierarchicalData }, sheetId, eventHandlers, colorThemeName) {
+		const chartData = getHierarchalChartData(definition, extractHierarchicalData(), getters, colorThemeName);
 		return { chartJsConfig: {
 			type: "treemap",
 			data: {
@@ -90858,7 +90921,6 @@ const hooks = {
 };
 const compatibility = {
 	Component,
-	useExternalListener,
 	EnvPlugin,
 	App: App$1
 };
@@ -90914,6 +90976,6 @@ const chartHelpers = {
 //#endregion
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, BadExpressionError, CHART_TYPES, CellErrorType, CellValueType, CircularDependencyError, ClientDisconnectedError, ClipboardMIMEType, CommandResult, CompiledFormula, CorePlugin, CoreViewPlugin, DEFAULT_LOCALE, DEFAULT_LOCALES, DEFAULT_LOCALE_DIGIT_GROUPING, DIRECTION, DispatchResult, DivisionByZeroError, EvaluationError, InvalidReferenceError, LocalTransportService, Model, NEXT_VALUE, NotAvailableError, NumberTooLargeError, OrderedLayers, PREVIOUS_VALUE, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, SplillBlockedError, Spreadsheet, SpreadsheetPivotTable, UIPlugin, UnknownFunctionError, __info__, addFunction, addRenderingLayer, astToFormula, availableConditionalFormatOperators, availableDataValidationOperators, availableFiltersOperators, borderPositions, borderStyles, canExecuteInReadonly, categories, chartHelpers, compatibility, components, composerFocusTypes, constants, convertAstNodes, coreTypes, createAutocompleteArgumentsProvider, errorTypes, filterDateCriterionOperators, filterNumberCriterionOperators, filterTextCriterionOperators, findCellInNewZone, functionCache, getCaretDownSvg, getCaretUpSvg, helpers, hooks, invalidSubtotalFormulasCommands, invalidateBordersCommands, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, isCoreCommand, isHeadersDependant, isMatrix, isPositionDependent, isRangeDependant, isSheetDependent, isTargetDependent, isZoneDependent, iterateAstNodes, links, load, lockedSheetAllowedCommands, parse, parseTokens, readonlyAllowedCommands, registries, schemeToColorScale, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
-__info__.version = "19.5.0-alpha.12";
-__info__.date = "2026-08-19T09:47:03.774Z";
-__info__.hash = "68ca68e";
+__info__.version = "19.5.0-alpha.14";
+__info__.date = "2026-08-29T09:17:09.184Z";
+__info__.hash = "e8ad6ad";