@odoo/o-spreadsheet 19.5.0-alpha.13 → 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.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
  */
 
 import * as owl from "@odoo/owl";
@@ -2637,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.
 *
@@ -2652,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;
@@ -2718,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 {
 	/**
@@ -2787,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() {
@@ -2820,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");
@@ -2860,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 {
@@ -2890,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];
@@ -2899,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
@@ -7949,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",
@@ -9993,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";
@@ -10214,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;
 }
 
@@ -12313,14 +12307,14 @@ const ScorecardChart$1 = {
 		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;
@@ -14560,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) {
@@ -14883,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();
@@ -14920,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");
 		},
@@ -16469,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();
 		});
@@ -20974,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;
@@ -21505,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();
@@ -23509,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`;
@@ -23611,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() {
@@ -24021,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(),
@@ -24039,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(),
@@ -24171,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;
@@ -30916,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),
@@ -30936,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 };
@@ -32199,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;
@@ -32300,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) {
@@ -33394,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;
@@ -34017,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,
@@ -34049,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) {
@@ -34108,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;
@@ -34121,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]) {
@@ -34150,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
@@ -34186,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()
@@ -34204,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()
@@ -34220,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,
@@ -34239,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()
@@ -34256,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));
@@ -34268,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) {
@@ -35275,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
@@ -35642,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",
@@ -35831,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;
@@ -35852,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;
@@ -35884,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) : ""
@@ -35918,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,
@@ -36014,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",
@@ -36096,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: {
@@ -36173,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",
@@ -36941,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();
@@ -37005,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");
@@ -42024,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));
@@ -42297,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);
@@ -42378,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 ?? {};
@@ -42445,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();
@@ -43927,6 +43936,7 @@ var FindAndReplaceStore = class extends SpreadsheetStore {
 	mutators = [
 		"updateSearchOptions",
 		"updateSearchContent",
+		"updateReplaceContent",
 		"searchFormulas",
 		"selectPreviousMatch",
 		"selectNextMatch",
@@ -43979,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,
@@ -44336,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
 		});
@@ -44348,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)
@@ -44379,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();
@@ -44394,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();
@@ -45974,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) => {
@@ -46108,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);
@@ -48486,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();
@@ -49701,7 +49717,8 @@ var TableStyleEditorPanel = class extends Component {
 	static components = {
 		Section,
 		RoundColorPicker,
-		TableStylePreview
+		TableStylePreview,
+		TextInput
 	};
 	props = useProps({
 		onCloseSidePanel: types$1.function(),
@@ -49710,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;
@@ -53587,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 }) {
@@ -53604,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;
@@ -53631,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,
@@ -53694,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
 	};
@@ -53907,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();
@@ -53981,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;
@@ -54038,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) => {
@@ -54090,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) || [];
@@ -54115,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
@@ -54123,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;
@@ -54823,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
 	});
@@ -55387,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({
@@ -64521,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)
@@ -64591,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",
@@ -64609,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);
@@ -65977,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) {
@@ -66966,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 {
@@ -67073,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;
@@ -69378,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;
@@ -69402,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":
@@ -70549,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);
 
@@ -71905,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") {
@@ -72469,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,
@@ -72541,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 });
 	}
 };
 
@@ -72893,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) {
@@ -73547,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}`;
@@ -73560,7 +73598,7 @@ var SpreadsheetPrint = class extends Component {
 				styleElement = null;
 			}
 		};
-		useExternalListener(window, "afterprint", () => removePrintStyle());
+		useListener(window, "afterprint", () => removePrintStyle());
 		onWillUnmount(() => removePrintStyle());
 	}
 	get pageStyle() {
@@ -74549,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 = () => {
@@ -74877,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();
@@ -74899,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();
@@ -74915,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",
@@ -80988,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;
@@ -81687,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: {
@@ -81763,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",
@@ -81850,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",
@@ -81927,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: {
@@ -81990,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) },
@@ -82060,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 {
@@ -82074,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",
@@ -82157,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",
@@ -82238,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",
@@ -82317,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) },
@@ -82391,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: {
@@ -90879,7 +90921,6 @@ const hooks = {
 };
 const compatibility = {
 	Component,
-	useExternalListener,
 	EnvPlugin,
 	App: App$1
 };
@@ -90935,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.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";