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

package/dist/o_spreadsheet.iife.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.13
- * @date 2026-08-21T15:33:44.046Z
- * @hash a73559e
+ * @version 19.5.0-alpha.14
+ * @date 2026-08-29T09:17:09.184Z
+ * @hash e8ad6ad
  */
 
 (function(exports, _odoo_owl) {
@@ -2639,7 +2639,6 @@ stores.inject(MyMetaStore, storeInstance);
 	*
 	* 1. Update template directives:
 	*    - replace `t-portal` → `t-custom-portal`
-	*    - replace `t-model`  → `t-custom-model`
 	*
 	* 2. Load this file immediately after Owl 3.
 	*
@@ -2654,35 +2653,23 @@ stores.inject(MyMetaStore, storeInstance);
 	* 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$26, onPatched: onPatched$5, onWillUnmount: onWillUnmount$20, 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$5 } = _odoo_owl;
+	const { __ODOO_COMPATIBILITY_LAYER_ADDED__, blockDom: blockDom$1, config, onMounted: onMounted$26, onPatched: onPatched$5, onWillUnmount: onWillUnmount$20, App: OwlApp, Component: OwlComponent, EnvPlugin: OwlEnvPlugin, useComponent: OwlUseComponent, useEnv: OwlUseEnv, useLayoutEffect: OwlUseLayoutEffect, useSubEnv: OwlUseSubEnv, Plugin, usePlugin, useProps: useProps$171, providePlugins, useScope, xml: xml$5 } = _odoo_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$26(() => target.addEventListener(eventName, boundHandler, eventParams));
-		onWillUnmount$20(() => target.removeEventListener(eventName, boundHandler, eventParams));
-	}
 	function onWillRender(cb) {
 		const node = useScope();
 		const renderFn = node.renderFn;
@@ -2720,27 +2707,14 @@ stores.inject(MyMetaStore, storeInstance);
 		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 {
 		/**
@@ -2789,7 +2763,7 @@ stores.inject(MyMetaStore, storeInstance);
 		static template = xml$5`<t t-call-slot="default"/>`;
 		constructor(node) {
 			super(node);
-			this.props = props();
+			this.props = useProps$171();
 			this.__owl__ = node;
 		}
 		setup() {
@@ -2822,18 +2796,6 @@ stores.inject(MyMetaStore, storeInstance);
 		/**
 		* @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");
@@ -2862,11 +2824,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 {
@@ -2892,7 +2849,7 @@ set(value) {
 		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];
@@ -2901,13 +2858,10 @@ set(value) {
 	};
 	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
@@ -7951,7 +7905,8 @@ set(value) {
 		"UPDATE_CHART",
 		"UPDATE_CHART_REGION",
 		"UPDATE_CAROUSEL_ACTIVE_ITEM",
-		"UPDATE_PIVOT"
+		"UPDATE_PIVOT",
+		"UPDATE_COLOR_SCHEME"
 	]);
 	const lockedSheetAllowedCommands = /* @__PURE__ */ new Set([
 		"LOCK_SHEET",
@@ -9995,6 +9950,46 @@ set(value) {
 	];
 	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";
@@ -10216,9 +10211,8 @@ set(value) {
 	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;
 	}
 
@@ -12315,14 +12309,14 @@ set(value) {
 			if (definition.baseline && isFormula(definition.baseline)) formulas.push(CompiledFormula.Compile(definition.baseline, sheetId, getters));
 			return formulas;
 		},
-		getRuntime(getters, definition, _dataExtractor, sheetId) {
+		getRuntime(getters, definition, _dataExtractor, sheetId, eventHandlers, colorThemeName) {
 			let formattedKeyValue = "";
 			const { scalar: keyValue, range: keyValueRange } = getData$1(definition.keyValue, getters, sheetId);
 			const locale = getters.getLocale();
 			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);
+			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;
@@ -14562,22 +14556,35 @@ set(value) {
 		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) {
@@ -14885,7 +14892,7 @@ set(value) {
 				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();
@@ -14922,7 +14929,7 @@ set(value) {
 				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");
 			},
@@ -16471,8 +16478,8 @@ set(value) {
 			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 });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
+			(0, _odoo_owl.useListener)(window, "contextmenu", this.onExternalClick.bind(this), { capture: true });
 			(0, _odoo_owl.onWillUpdateProps)((nextProps) => {
 				if (nextProps.menuItems !== this.props.menuItems) this.closeSubMenu();
 			});
@@ -20976,7 +20983,7 @@ set(value) {
 		setup() {
 			this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
 			this.viewStore = useStore(ViewportsStore);
-			useExternalListener(window, "click", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 		}
 		get addRowsPosition() {
 			const { scrollY } = this.viewStore.activeSheetScrollInfo;
@@ -21507,7 +21514,7 @@ set(value) {
 		(0, _odoo_owl.useListener)(gridRef, "mouseenter", resume);
 		(0, _odoo_owl.useListener)(gridRef, "pointerdown", recompute);
 		(0, _odoo_owl.useListener)(gridRef, "pointerdown", (ev) => env.isMobile() && updateMousePosition(withZoom(env, ev)));
-		useExternalListener(window, "click", handleGlobalClick);
+		(0, _odoo_owl.useListener)(window, "click", handleGlobalClick);
 		function handleGlobalClick(e) {
 			const target = e.target;
 			const grid = gridRef();
@@ -23511,7 +23518,7 @@ set(value) {
 			hoveredValue: void 0
 		});
 		setup() {
-			useExternalListener(window, "pointerdown", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "pointerdown", this.onExternalClick.bind(this), { capture: true });
 			useLayoutEffect(() => {
 				const el = this.dropdownRef();
 				if (el) el.style.width = `${this.selectRef()?.offsetWidth}px`;
@@ -23613,7 +23620,7 @@ set(value) {
 		});
 		static components = { Popover };
 		setup() {
-			useExternalListener(window, "click", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 		}
 		infoRef = _odoo_owl.signal.ref();
 		get popoverProps() {
@@ -24023,6 +24030,7 @@ set(value) {
 		Component: ChartFigure,
 		SidePanelComponent: "ChartPanel",
 		menuBuilder: getChartMenuActions,
+		minFigSize: 80,
 		borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 		hasShadow: (getters) => getters.isDashboard(),
 		isRounded: (getters) => getters.isDashboard(),
@@ -24041,6 +24049,7 @@ set(value) {
 	figureRegistry.add("carousel", {
 		Component: CarouselFigure,
 		menuBuilder: getCarouselMenuActions,
+		minFigSize: 80,
 		borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 		hasShadow: (getters) => getters.isDashboard(),
 		isRounded: (getters) => getters.isDashboard(),
@@ -24173,7 +24182,7 @@ set(value) {
 							...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;
@@ -30918,7 +30927,7 @@ set(value) {
 		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),
@@ -30938,7 +30947,7 @@ set(value) {
 					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 };
@@ -32201,7 +32210,7 @@ set(value) {
 		DOMFocusableElementStore;
 		setup() {
 			this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
-			useExternalListener(window, "click", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 			(0, _odoo_owl.onWillUpdateProps)((nextProps) => {
 				const input = this.inputRef();
 				if (input && document.activeElement !== input) input.value = nextProps.currentValue;
@@ -32302,7 +32311,7 @@ set(value) {
 		});
 		openedEl = null;
 		setup() {
-			useExternalListener(window, "click", this.onExternalClick);
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this));
 		}
 		state = (0, _odoo_owl.proxy)({ activeTool: "" });
 		updateFontSize(fontSize) {
@@ -33396,7 +33405,7 @@ set(value) {
 		state;
 		setup() {
 			this.state = (0, _odoo_owl.proxy)({ pickerOpened: false });
-			useExternalListener(window, "click", this.closePicker);
+			(0, _odoo_owl.useListener)(window, "click", this.closePicker.bind(this));
 		}
 		closePicker() {
 			this.state.pickerOpened = false;
@@ -34019,7 +34028,7 @@ set(value) {
 //#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,
@@ -34051,7 +34060,7 @@ set(value) {
 			labels,
 			locale: getters.getLocale(),
 			topPadding: getTopPaddingForDashboard(definition, getters),
-			background: getChartBackgroundColor(definition, getters)
+			background: getChartBackgroundColor(definition, colorThemeName)
 		};
 	}
 	function getDateTimeLabel(value, stamp) {
@@ -34110,7 +34119,7 @@ set(value) {
 			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;
@@ -34123,14 +34132,14 @@ set(value) {
 			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]) {
@@ -34152,7 +34161,7 @@ set(value) {
 			dataSetsValues: pyramidDatasetValues
 		};
 	}
-	function getLineChartData(definition, { labelValues, dataSetsValues }, getters) {
+	function getLineChartData(definition, { labelValues, dataSetsValues }, getters, colorThemeName) {
 		const axisType = getChartAxisType(definition, {
 			labelValues,
 			dataSetsValues
@@ -34188,10 +34197,10 @@ set(value) {
 			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()
@@ -34206,10 +34215,10 @@ set(value) {
 			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()
@@ -34222,10 +34231,10 @@ set(value) {
 			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,
@@ -34241,10 +34250,10 @@ set(value) {
 			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()
@@ -34258,10 +34267,10 @@ set(value) {
 			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));
@@ -34270,12 +34279,12 @@ set(value) {
 			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) {
@@ -35277,9 +35286,9 @@ set(value) {
 `;
 	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 _odoo_owl.App({
 			templates,
 			translateFn: _t
@@ -35644,8 +35653,8 @@ set(value) {
 				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",
@@ -35833,7 +35842,7 @@ set(value) {
 				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;
@@ -35854,7 +35863,7 @@ set(value) {
 			}
 			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;
@@ -35886,7 +35895,7 @@ set(value) {
 			}
 			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) : ""
@@ -35920,9 +35929,9 @@ set(value) {
 		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,
@@ -36016,8 +36025,8 @@ set(value) {
 				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",
@@ -36098,8 +36107,8 @@ set(value) {
 				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: {
@@ -36175,8 +36184,8 @@ set(value) {
 			};
 		},
 		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",
@@ -36943,7 +36952,7 @@ set(value) {
 		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();
@@ -37007,7 +37016,7 @@ set(value) {
 		});
 		popoverRef = _odoo_owl.signal.ref(HTMLTableElement);
 		setup() {
-			useExternalListener(window, "click", this.closePopover);
+			(0, _odoo_owl.useListener)(window, "click", this.closePopover.bind(this));
 		}
 		get currentColorScale() {
 			return this.props.definition.colorScale || schemeToColorScale("oranges");
@@ -42026,7 +42035,7 @@ set(value) {
 			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());
+			(0, _odoo_owl.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));
@@ -42299,7 +42308,7 @@ set(value) {
 				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);
@@ -42380,7 +42389,7 @@ set(value) {
 		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 ?? {};
@@ -42447,7 +42456,7 @@ set(value) {
 			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();
@@ -43929,6 +43938,7 @@ set(value) {
 		mutators = [
 			"updateSearchOptions",
 			"updateSearchContent",
+			"updateReplaceContent",
 			"searchFormulas",
 			"selectPreviousMatch",
 			"selectNextMatch",
@@ -43981,6 +43991,9 @@ set(value) {
 		updateSearchContent(toSearch) {
 			this._updateSearch(toSearch, this.searchOptions);
 		}
+		updateReplaceContent(toReplace) {
+			this.toReplace = toReplace;
+		}
 		updateSearchOptions(searchOptions) {
 			this._updateSearch(this.toSearch, {
 				...this.searchOptions,
@@ -44338,7 +44351,7 @@ set(value) {
 		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
 			});
@@ -44350,10 +44363,10 @@ set(value) {
 			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)
@@ -44381,7 +44394,7 @@ set(value) {
 			(0, _odoo_owl.onMounted)(() => this.searchInputRef()?.focus());
 			(0, _odoo_owl.onWillUnmount)(() => this.updateSearchContent.stopDebounce());
 			this.updateSearchContent = debounce(this.store.updateSearchContent, 200);
-			useExternalListener(window, "keydown", (ev) => {
+			(0, _odoo_owl.useListener)(window, "keydown", (ev) => {
 				const code = keyboardEventToShortcutString(ev);
 				if (code === "Ctrl+F" || code === "Ctrl+H") {
 					this.searchInputRef()?.focus();
@@ -44396,6 +44409,9 @@ set(value) {
 		onSearchInput(ev) {
 			this.updateSearchContent(ev.target.value);
 		}
+		onReplaceInput(ev) {
+			this.store.updateReplaceContent(ev.target.value);
+		}
 		onKeydownPanel(ev) {
 			if (ev.key === "Escape") {
 				ev.preventDefault();
@@ -45976,7 +45992,7 @@ set(value) {
 		buttonFilter = _odoo_owl.signal.ref();
 		popover;
 		setup() {
-			useExternalListener(window, "click", (ev) => {
+			(0, _odoo_owl.useListener)(window, "click", (ev) => {
 				if (!isChildEvent(this.buttonFilter(), ev)) this.popover.isOpen = false;
 			});
 			(0, _odoo_owl.onWillUpdateProps)((nextProps) => {
@@ -46110,7 +46126,7 @@ set(value) {
 		setup() {
 			this.autoComplete = useLocalStore(AutoCompleteStore);
 			this.autoComplete.useProvider(this.getProvider());
-			useExternalListener(window, "click", (ev) => {
+			(0, _odoo_owl.useListener)(window, "click", (ev) => {
 				if (ev.target !== this.buttonRef()) this.popover.isOpen = false;
 			});
 			useAutofocus(this.autofocusRef);
@@ -48488,7 +48504,7 @@ set(value) {
 		tableStyleListRef = _odoo_owl.signal.ref();
 		state = (0, _odoo_owl.proxy)({ selectedCategory: this.initialSelectedCategory });
 		setup() {
-			useExternalListener(window, "click", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 		}
 		onExternalClick(ev) {
 			const el = this.tableStyleListRef();
@@ -49703,7 +49719,8 @@ set(value) {
 		static components = {
 			Section,
 			RoundColorPicker,
-			TableStylePreview
+			TableStylePreview,
+			TextInput
 		};
 		props = (0, _odoo_owl.useProps)({
 			onCloseSidePanel: types.function(),
@@ -49712,7 +49729,7 @@ set(value) {
 		});
 		state = (0, _odoo_owl.proxy)(this.getInitialState());
 		setup() {
-			useExternalListener(window, "click", () => this.state.pickerOpened = false);
+			(0, _odoo_owl.useListener)(window, "click", () => this.state.pickerOpened = false);
 		}
 		getInitialState() {
 			const editedStyle = this.props.styleId ? this.env.model.getters.getTableStyle(this.props.styleId) : null;
@@ -53589,6 +53606,15 @@ set(value) {
 		}
 	};
 
+//#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 }) {
@@ -53606,19 +53632,19 @@ set(value) {
 			};
 		});
 	}
-	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;
@@ -53633,7 +53659,6 @@ set(value) {
 			y = -scrollY;
 		} else if (y + height > maxY) height = maxY - y;
 		return {
-			...initialFigure,
 			x,
 			y,
 			width,
@@ -53696,29 +53721,30 @@ set(value) {
 	* 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
 		};
@@ -53909,7 +53935,7 @@ set(value) {
 			this.zoomStore = useStore(ZoomStore);
 			this.chartDragStore = useStore(ChartDragStore);
 			(0, _odoo_owl.onMounted)(() => {
-				this.render();
+				render(this);
 			});
 			(0, _odoo_owl.onWillUpdateProps)(() => {
 				const sheetId = this.env.model.getters.getActiveSheetId();
@@ -53983,6 +54009,13 @@ set(value) {
 		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;
@@ -54040,12 +54073,9 @@ set(value) {
 				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) => {
@@ -54092,7 +54122,7 @@ set(value) {
 							...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) || [];
@@ -54117,7 +54147,7 @@ set(value) {
 			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
@@ -54125,44 +54155,78 @@ set(value) {
 		* 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;
@@ -54825,7 +54889,7 @@ set(value) {
 			passive: false,
 			capture: false
 		});
-		useExternalListener(window, "pointerup", onPointerUp, {
+		(0, _odoo_owl.useListener)(window, "pointerup", onPointerUp, {
 			passive: false,
 			capture: true
 		});
@@ -55389,10 +55453,10 @@ set(value) {
 			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() });
+			(0, _odoo_owl.useListener)(document.body, "cut", this.copy.bind(this, true));
+			(0, _odoo_owl.useListener)(document.body, "copy", this.copy.bind(this, false));
+			(0, _odoo_owl.useListener)(document.body, "paste", this.paste.bind(this));
 			(0, _odoo_owl.onMounted)(() => this.focusDefaultElement());
 			this.props.exposeFocus(() => this.focusDefaultElement());
 			useGridDrawing({
@@ -64523,36 +64587,37 @@ set(value) {
 //#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)
@@ -64593,7 +64658,7 @@ set(value) {
 					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",
@@ -64611,9 +64676,9 @@ set(value) {
 				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);
@@ -65979,6 +66044,39 @@ set(value) {
 		}
 	};
 
+//#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) {
@@ -66968,30 +67066,6 @@ set(value) {
 		}
 	};
 
-//#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 {
@@ -67075,41 +67149,6 @@ set(value) {
 
 //#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;
@@ -69380,7 +69419,7 @@ set(value) {
 		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;
@@ -69404,7 +69443,7 @@ set(value) {
 		}
 		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":
@@ -70551,7 +70590,7 @@ set(value) {
 //#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);
 
@@ -71907,7 +71946,7 @@ set(value) {
 		DOMFocusableElementStore;
 		setup() {
 			this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
-			useExternalListener(window, "click", this.onExternalClick.bind(this), { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 			useLayoutEffect(() => {}, () => [this.state.isEditing]);
 			(0, _odoo_owl.onPatched)(() => {
 				if (this.sheetNameRef() && this.state.isEditing && this.editionState === "initializing") {
@@ -72471,7 +72510,7 @@ set(value) {
 			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,
@@ -72543,13 +72582,12 @@ set(value) {
 			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 });
 		}
 	};
 
@@ -72895,7 +72933,7 @@ set(value) {
 			parentState: void 0
 		});
 		setup() {
-			useExternalListener(window, "click", this.onExternalClick, { capture: true });
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this), { capture: true });
 			(0, _odoo_owl.onMounted)(this.updateShadows);
 		}
 		onExternalClick(ev) {
@@ -73549,7 +73587,7 @@ set(value) {
 		setup() {
 			this.printStore = useLocalStore(SpreadsheetPrintStore);
 			let styleElement = null;
-			useExternalListener(window, "beforeprint", () => {
+			(0, _odoo_owl.useListener)(window, "beforeprint", () => {
 				styleElement = document.createElement("style");
 				styleElement.id = "o-spreadsheet-print-style";
 				const size = `${this.printStore.pageLayout} ${this.printStore.orientation}`;
@@ -73562,7 +73600,7 @@ set(value) {
 					styleElement = null;
 				}
 			};
-			useExternalListener(window, "afterprint", () => removePrintStyle());
+			(0, _odoo_owl.useListener)(window, "afterprint", () => removePrintStyle());
 			(0, _odoo_owl.onWillUnmount)(() => removePrintStyle());
 		}
 		get pageStyle() {
@@ -74551,8 +74589,8 @@ set(value) {
 			this.composerFocusStore = useStore(ComposerFocusStore);
 			this.fingerprints = useStore(FormulaFingerprintStore);
 			this.topBarToolStore = useStore(TopBarToolStore);
-			useExternalListener(window, "click", this.onExternalClick);
-			useExternalListener(window, "keydown", this.onKeydown);
+			(0, _odoo_owl.useListener)(window, "click", this.onExternalClick.bind(this));
+			(0, _odoo_owl.useListener)(window, "keydown", this.onKeydown.bind(this));
 			this.menus = topbarMenuRegistry.getMenuItems();
 			let lastWidth;
 			const updateVisibility = () => {
@@ -74879,9 +74917,9 @@ set(value) {
 				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) => {
+			(0, _odoo_owl.useListener)(window, "resize", () => render(this, true));
+			(0, _odoo_owl.useListener)(document.body, "wheel", () => {});
+			(0, _odoo_owl.useListener)(window, "keydown", async (event) => {
 				if (keyboardEventToShortcutString(event) === "Ctrl+P") {
 					this.state.printModeEnabled = true;
 					event.stopPropagation();
@@ -74901,11 +74939,11 @@ set(value) {
 				resizeObserver.observe(el);
 				return () => resizeObserver.disconnect();
 			});
-			const render = batched(this.render.bind(this, true));
+			const batchedRender = batched(() => render(this, true));
 			(0, _odoo_owl.onMounted)(() => {
 				this.bindModelEvents();
 				this.checkViewportSize();
-				stores.on("store-updated", this, render);
+				stores.on("store-updated", this, batchedRender);
 			});
 			(0, _odoo_owl.onWillUnmount)(() => {
 				this.unbindModelEvents();
@@ -74917,7 +74955,7 @@ set(value) {
 			});
 		}
 		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",
@@ -80990,6 +81028,10 @@ set(value) {
 			this.computeLinks();
 			(0, _odoo_owl.onMounted)(() => this.urlInput()?.focus());
 		}
+		onLinkUrlInput(ev) {
+			this.state.url = ev.target.value;
+			this.computeLinks();
+		}
 		computeLinks() {
 			this.state.selectedIndex = null;
 			this.state.linksByCategory = this.linkProposalByCategory;
@@ -81689,8 +81731,8 @@ set(value) {
 			};
 		},
 		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: {
@@ -81765,8 +81807,8 @@ set(value) {
 			};
 		},
 		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",
@@ -81852,8 +81894,8 @@ set(value) {
 				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",
@@ -81929,8 +81971,8 @@ set(value) {
 			};
 		},
 		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: {
@@ -81992,8 +82034,8 @@ set(value) {
 			};
 		},
 		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) },
@@ -82062,7 +82104,7 @@ set(value) {
 		},
 		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 {
@@ -82076,8 +82118,8 @@ set(value) {
 				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",
@@ -82159,8 +82201,8 @@ set(value) {
 				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",
@@ -82240,8 +82282,8 @@ set(value) {
 				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",
@@ -82319,8 +82361,8 @@ set(value) {
 			};
 		},
 		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) },
@@ -82393,8 +82435,8 @@ set(value) {
 			};
 		},
 		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: {
@@ -90881,7 +90923,6 @@ set(value) {
 	};
 	const compatibility = {
 		Component,
-		useExternalListener,
 		EnvPlugin,
 		App: App$1
 	};
@@ -91031,8 +91072,8 @@ exports.stores = stores;
 exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
-__info__.version = "19.5.0-alpha.13";
-__info__.date = "2026-08-21T15:33:44.046Z";
-__info__.hash = "a73559e";
+__info__.version = "19.5.0-alpha.14";
+__info__.date = "2026-08-29T09:17:09.184Z";
+__info__.hash = "e8ad6ad";
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);