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

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.11
- * @date 2026-08-12T09:17:24.237Z
- * @hash bc056d7
+ * @version 19.5.0-alpha.12
+ * @date 2026-08-19T09:47:03.774Z
+ * @hash 68ca68e
  */
 
 import * as owl from "@odoo/owl";
@@ -206,6 +206,16 @@ function getBoundingRectAsPOJO(el) {
 		height: rect.height
 	};
 }
+function getBoundingRectWithMargins(el) {
+	const style = getComputedStyle(el);
+	const rect = el.getBoundingClientRect();
+	return {
+		x: rect.x,
+		y: rect.y,
+		width: rect.width + parseInt(style.marginLeft || "0") + parseInt(style.marginRight || "0"),
+		height: rect.height + parseInt(style.marginTop || "0") + parseInt(style.marginBottom || "0")
+	};
+}
 /**
 * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
 */
@@ -649,6 +659,14 @@ const DEFAULT_CAROUSEL_TITLE_STYLE = {
 	fontSize: 18,
 	color: TEXT_BODY
 };
+const CAROUSEL_LAYOUT = {
+	paddingX: 24,
+	paddingY: 8,
+	headerPaddingTop: 4,
+	separatorWidth: 1,
+	headerLineHeight: 1.5,
+	minHeaderHeight: 25
+};
 const DEFAULT_TOKEN_COLOR = "light-dark(#000000, #ffffff)";
 const functionColor = DEFAULT_TOKEN_COLOR;
 const operatorColor = "#3da4ab";
@@ -4071,6 +4089,18 @@ function toString(data) {
 		default: return "";
 	}
 }
+/**
+* Only converts the decimal separator, ignore number format such as % or dates
+*/
+function toLocaleString(data, locale) {
+	const value = toValue(data);
+	switch (typeof value) {
+		case "string": return value;
+		case "number": return value.toString().replace(".", locale.decimalSeparator);
+		case "boolean": return value ? "TRUE" : "FALSE";
+		default: return "";
+	}
+}
 /** Normalize string by setting it to lowercase and replacing accent letters with plain letters */
 const normalizeString = memoize(function normalizeString(str) {
 	return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -9247,8 +9277,8 @@ function computeCachedTextDimension(context, text, font) {
 function fontSizeInPixels(fontSize) {
 	return Math.round(fontSize * 96 / 72);
 }
-function computeTextFont(style, fontUnit = "pt") {
-	return `${style.italic ? "italic " : ""}${style.bold ? "bold" : "400"} ${(fontUnit === "pt" ? computeTextFontSizeInPixels(style) : style.fontSize) ?? DEFAULT_FONT_SIZE}px ${DEFAULT_FONT}`;
+function computeTextFont(style, fontUnit = "pt", fontWeight = 400) {
+	return `${style.italic ? "italic " : ""}${style.bold ? "bold" : fontWeight} ${(fontUnit === "pt" ? computeTextFontSizeInPixels(style) : style.fontSize) ?? DEFAULT_FONT_SIZE}px ${DEFAULT_FONT}`;
 }
 function computeTextFontSizeInPixels(style) {
 	return fontSizeInPixels(style?.fontSize || DEFAULT_FONT_SIZE);
@@ -11882,7 +11912,7 @@ var ChartJsComponent = class extends Component {
 		chartId: types$1.string(),
 		isFullScreen: types$1.boolean().optional()
 	});
-	canvas = signal(null);
+	canvas = signal.ref(HTMLCanvasElement);
 	chart;
 	currentRuntime;
 	animationStore;
@@ -12605,7 +12635,7 @@ var ScorecardChart = class extends Component {
 		chartId: types$1.string(),
 		isFullScreen: types$1.boolean().optional()
 	});
-	canvas = signal(null);
+	canvas = signal.ref(HTMLCanvasElement);
 	zoomStore;
 	get runtime() {
 		return this.env.model.getters.getChartRuntime(this.props.chartId);
@@ -13990,6 +14020,44 @@ function getCarouselItemTitle(getters, item) {
 	const definition = getters.getChartDefinition(item.chartId);
 	return (chartSubtypeRegistry.getAll().find((c) => c.matcher?.(definition)) || chartSubtypeRegistry.get(definition.type)).displayName;
 }
+function getCarouselLayout(figureRect, carousel, selectedItem) {
+	const layout = CAROUSEL_LAYOUT;
+	const title = {
+		...DEFAULT_CAROUSEL_TITLE_STYLE,
+		...carousel.title
+	};
+	const x = figureRect.x + layout.paddingX;
+	const width = Math.max(0, figureRect.width - 2 * layout.paddingX);
+	const titleHeight = title.text ? title.fontSize * layout.headerLineHeight : 0;
+	const headerRect = {
+		x,
+		y: figureRect.y + layout.paddingY + layout.headerPaddingTop,
+		width,
+		height: Math.max(layout.minHeaderHeight, titleHeight)
+	};
+	const headerBottom = headerRect.y + headerRect.height;
+	const separatorRect = title.text ? {
+		x,
+		y: headerBottom + layout.paddingY,
+		width,
+		height: layout.separatorWidth
+	} : void 0;
+	const contentPaddingTop = selectedItem?.type === "carouselDataView" ? layout.paddingY : 0;
+	const rectAboveContent = separatorRect || headerRect;
+	const contentY = rectAboveContent.y + rectAboveContent.height + contentPaddingTop;
+	const contentBottom = figureRect.y + figureRect.height - layout.paddingY;
+	return {
+		headerRect,
+		separatorRect,
+		contentRect: {
+			x,
+			y: contentY,
+			width,
+			height: Math.max(0, contentBottom - contentY)
+		},
+		headerLineHeight: layout.headerLineHeight
+	};
+}
 
 //#endregion
 //#region src/helpers/figures/charts/gauge_chart_rendering.ts
@@ -14001,7 +14069,7 @@ const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
 const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
 const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
 const GAUGE_TITLE_SECTION_HEIGHT = 25;
-function drawGaugeChart(canvas, runtime, zoom = 1, dimensions) {
+function drawGaugeChart(canvas, runtime, zoom = 1, dimensions, options) {
 	const size = dimensions ?? getCanvasSize(canvas);
 	const dpr = typeof globalThis.devicePixelRatio === "number" ? globalThis.devicePixelRatio : 1;
 	canvas.width = size.width * dpr;
@@ -14014,7 +14082,7 @@ function drawGaugeChart(canvas, runtime, zoom = 1, dimensions) {
 		height: size.height / zoom,
 		x: 0,
 		y: 0
-	}, runtime, ctx);
+	}, runtime, ctx, options);
 	drawBackground(ctx, config);
 	drawGauge(ctx, config);
 	drawInflectionValues(ctx, config);
@@ -14102,7 +14170,8 @@ function drawTitle(ctx, config) {
 	ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
 	ctx.restore();
 }
-function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
+function getGaugeRenderingConfig(boundingRect, runtime, ctx, options) {
+	const labelFontSize = options?.labelFontSize ?? 12;
 	const maxValue = runtime.maxValue;
 	const minValue = runtime.minValue;
 	const gaugeValue = getGaugeValue(runtime, "animated");
@@ -14120,14 +14189,14 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
 	if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
 	const minLabelPosition = {
 		x: gaugeRect.x + gaugeArcWidth / 2,
-		y: gaugeRect.y + gaugeRect.height + 12
+		y: gaugeRect.y + gaugeRect.height + labelFontSize
 	};
 	const maxLabelPosition = {
 		x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
-		y: gaugeRect.y + gaugeRect.height + 12
+		y: gaugeRect.y + gaugeRect.height + labelFontSize
 	};
 	const textColor = chartMutedFontColor(runtime.background);
-	const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
+	const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx, labelFontSize);
 	let x = 0, titleWidth = 0, titleHeight = 0;
 	if (runtime.title.text) ({width: titleWidth, height: titleHeight} = computeTextDimension(ctx, runtime.title.text, {
 		fontSize: 16,
@@ -14175,13 +14244,13 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
 		minLabel: {
 			label: runtime.minValue.label,
 			textPosition: minLabelPosition,
-			fontSize: 12,
+			fontSize: labelFontSize,
 			color: textColor
 		},
 		maxLabel: {
 			label: runtime.maxValue.label,
 			textPosition: maxLabelPosition,
-			fontSize: 12,
+			fontSize: labelFontSize,
 			color: textColor
 		}
 	};
@@ -14215,27 +14284,27 @@ function getGaugeRect(boundingRect, title) {
 *
 * Also compute an offset for the text so that it doesn't overlap with other text.
 */
-function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
+function getInflectionValues(runtime, gaugeRect, textColor, ctx, labelFontSize = 12) {
 	const maxValue = runtime.maxValue;
 	const minValue = runtime.minValue;
 	const gaugeCircleCenter = {
 		x: gaugeRect.x + gaugeRect.width / 2,
 		y: gaugeRect.y + gaugeRect.height
 	};
-	const textStyle = { fontSize: 12 };
+	const textStyle = { fontSize: labelFontSize };
 	const inflectionValues = [];
 	const inflectionValuesTextRects = [];
 	for (const inflectionValue of runtime.inflectionValues) {
 		const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
 		const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
 		const angle = Math.PI - Math.PI * percentage;
-		const textRect = getRectangleTangentToCircle(angle, gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, gaugeCircleCenter.x, gaugeCircleCenter.y, labelWidth + 2, 12);
-		const offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect)) ? 12 : 0;
+		const textRect = getRectangleTangentToCircle(angle, gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, gaugeCircleCenter.x, gaugeCircleCenter.y, labelWidth + 2, labelFontSize);
+		const offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect)) ? labelFontSize : 0;
 		inflectionValuesTextRects.push(textRect);
 		inflectionValues.push({
 			rotation: angle,
 			label: inflectionValue.label,
-			fontSize: 12,
+			fontSize: labelFontSize,
 			color: textColor,
 			offset
 		});
@@ -14355,6 +14424,44 @@ const CHART_COMMON_OPTIONS = {
 		"mouseup"
 	]
 };
+/**
+* Sample down a Chart.js configuration's data points to at most `maxPoints`, evenly spaced.
+* Used for lightweight previews (drag preview, chart suggestions) where rendering every point
+* of a large dataset would make Chart.js slow without any visible benefit on a small canvas.
+*/
+function limitChartConfigDataPoints(config, maxPoints = 150) {
+	const data = config.data;
+	if (!data) return config;
+	return {
+		...config,
+		data: {
+			...data,
+			labels: limitArrayDataPoints(data.labels, maxPoints),
+			datasets: data.datasets?.map((dataset) => limitDatasetDataPoints(dataset, maxPoints))
+		}
+	};
+}
+function limitDatasetDataPoints(dataset, maxPoints) {
+	const values = dataset.data;
+	if (!Array.isArray(values) || values.length <= maxPoints) return dataset;
+	const length = values.length;
+	const indices = sampleIndices(length, maxPoints);
+	const limited = { ...dataset };
+	for (const key of Object.keys(limited)) {
+		const value = limited[key];
+		if (Array.isArray(value) && value.length === length) limited[key] = indices.map((i) => value[i]);
+	}
+	return limited;
+}
+function limitArrayDataPoints(arr, maxPoints) {
+	if (!Array.isArray(arr) || arr.length <= maxPoints) return arr;
+	return sampleIndices(arr.length, maxPoints).map((i) => arr[i]);
+}
+/** Evenly spaced indices sampled from [0, length). */
+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) {
 	try {
 		const canvas = createRenderingSurface(figure.width, figure.height);
@@ -14402,7 +14509,7 @@ async function canvasToObjectUrl(canvas) {
 *
 * @returns a cleanup function to be called after the drawing is no longer needed (to free Chart.js resources)
 */
-function drawChartOnCanvas(canvas, runtime, size, type) {
+function drawChartOnCanvas(canvas, runtime, size, type, zoom = 1) {
 	if ("chartJsConfig" in runtime) {
 		if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
 		const extensionsLoaded = areChartJSExtensionsLoaded();
@@ -14418,8 +14525,8 @@ function drawChartOnCanvas(canvas, runtime, size, type) {
 			chart.destroy();
 			if (!extensionsLoaded) unregisterChartJsExtensions();
 		};
-	} else if (type === "scorecard") drawScoreChart(getScorecardConfiguration(size, runtime), canvas);
-	else if (type === "gauge") drawGaugeChart(canvas, runtime, 1, size);
+	} else if (type === "scorecard") drawScoreChart(getScorecardConfiguration(size, runtime), canvas, zoom);
+	else if (type === "gauge") drawGaugeChart(canvas, runtime, zoom, size);
 	return () => {};
 }
 
@@ -14957,7 +15064,7 @@ var ZoomableChartStore = class extends SpreadsheetStore {
 var ZoomableChartJsComponent = class extends ChartJsComponent {
 	static template = "o-spreadsheet-ZoomableChartJsComponent";
 	store;
-	masterChartCanvas = signal(null);
+	masterChartCanvas = signal.ref(HTMLCanvasElement);
 	masterChart;
 	mode;
 	hasLinearScale;
@@ -15711,7 +15818,7 @@ var GaugeChartComponent = class extends Component {
 		chartId: types$1.string(),
 		isFullScreen: types$1.boolean().optional()
 	});
-	canvas = signal(null);
+	canvas = signal.ref(HTMLCanvasElement);
 	animationStore;
 	zoomStore;
 	get runtime() {
@@ -15948,7 +16055,7 @@ var Menu = class extends Component {
 		onKeyDown: types$1.function().optional(),
 		disableKeyboardNavigation: types$1.boolean().optional()
 	});
-	menuRef = signal(null);
+	menuRef = signal.ref();
 	setup() {
 		useLayoutEffect(() => {
 			const menuEl = this.menuRef();
@@ -16068,8 +16175,8 @@ var Popover = class extends Component {
 		zIndex: types$1.number().optional(),
 		class: types$1.string().optional()
 	});
-	popoverRef = signal(null);
-	popoverContentRef = signal(null);
+	popoverRef = signal.ref();
+	popoverContentRef = signal.ref();
 	currentPosition = void 0;
 	currentDisplayValue = void 0;
 	spreadsheetRect = useSpreadsheetRect();
@@ -16257,7 +16364,7 @@ var MenuPopover = class MenuPopover extends Component {
 		isHoveringChild: false
 	});
 	state = proxy({ hoveredMenu: this.props.autoSelectFirstItem ? this.getNextEnabledMenuItem() : void 0 });
-	menuRef = signal(null);
+	menuRef = signal.ref();
 	openingTimeOut = useTimeOut();
 	setup() {
 		const domFocusableElementStore = useStore(DOMFocusableElementStore);
@@ -16546,43 +16653,29 @@ var PositionMap = class {
 };
 
 //#endregion
-//#region src/components/tables/hovered_table_store.ts
-var HoveredTableStore = class extends SpreadsheetStore {
-	mutators = ["clear", "hover"];
-	position;
+//#region src/stores/cell_hover_overlay_store.ts
+var CellHoverOverlayStore = class extends SpreadsheetStore {
+	mutators = [
+		"hover",
+		"register",
+		"unRegister"
+	];
+	storeGetters = ["getCellHoverOverlayColor"];
+	providers = [];
 	overlayColors = new PositionMap();
-	hover(position) {
-		if (!this.getters.isDashboard() || deepEquals(this.position, position)) return "noStateChange";
-		this.position = position;
-		this.computeOverlay();
+	hover(hoveredPosition) {
+		this.overlayColors = new PositionMap();
+		if (!hoveredPosition) return;
+		for (const provider of this.providers) {
+			const positions = provider.getHighlightedPositions(hoveredPosition);
+			for (const position of positions) this.overlayColors.set(position, TABLE_HOVER_BACKGROUND_COLOR);
+		}
 	}
-	clear() {
-		this.position = void 0;
+	register(highlightProvider) {
+		this.providers.push(highlightProvider);
 	}
-	computeOverlay() {
-		this.overlayColors = new PositionMap();
-		if (!this.position) return;
-		const { sheetId, col, row } = this.position;
-		const table = this.getters.getTable({
-			sheetId,
-			col,
-			row
-		});
-		if (!table) return;
-		const { left, right, top } = table.range.zone;
-		const isTableHeader = row < top + table.config.numberOfHeaders;
-		const doesTableRowHaveContent = range(left, right + 1).some((col) => {
-			return !this.getters.isColHidden(sheetId, col) && this.getters.getEvaluatedCell({
-				sheetId,
-				col,
-				row
-			}).formattedValue;
-		});
-		if (!isTableHeader && doesTableRowHaveContent) for (let col = left; col <= right; col++) this.overlayColors.set({
-			sheetId,
-			col,
-			row
-		}, TABLE_HOVER_BACKGROUND_COLOR);
+	unRegister(highlightProvider) {
+		this.providers = this.providers.filter((h) => h !== highlightProvider);
 	}
 };
 
@@ -16594,9 +16687,9 @@ var ClickableCellSortIcon = class extends Component {
 		position: types$1.CellPosition(),
 		sortDirection: types$1.or([types$1.SortDirection, types$1.literal("none")])
 	});
-	hoveredTableStore;
+	hoveredCellOverlayStore;
 	setup() {
-		this.hoveredTableStore = useStore(HoveredTableStore);
+		this.hoveredCellOverlayStore = useStore(CellHoverOverlayStore);
 	}
 	get style() {
 		const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.position);
@@ -16616,7 +16709,7 @@ var ClickableCellSortIcon = class extends Component {
 		}
 	}
 	getBackgroundColor(cellStyle) {
-		const overlayColor = this.hoveredTableStore.overlayColors.get(this.props.position);
+		const overlayColor = this.hoveredCellOverlayStore.overlayColors.get(this.props.position);
 		if (overlayColor) return blendColors(cellStyle.fillColor || "#FFFFFF", overlayColor);
 		return cellStyle.fillColor || "#FFFFFF";
 	}
@@ -21355,7 +21448,7 @@ var HoveredIconStore = class extends SpreadsheetStore {
 //#region src/components/grid_overlay/grid_overlay.ts
 function useCellHovered(env, gridRef) {
 	const delayedHoveredCell = useStore(DelayedHoveredCellStore);
-	const hoveredTable = useStore(HoveredTableStore);
+	const cellHoverOverlay = useStore(CellHoverOverlayStore);
 	const viewStore = useStore(ViewportsStore);
 	const hoveredPosition = {
 		col: void 0,
@@ -21399,7 +21492,9 @@ function useCellHovered(env, gridRef) {
 		if (isChildEvent(gridRef(), zoomedMouseEvent.ev)) {
 			({x, y} = getOffsetRelativeToOverlay(zoomedMouseEvent));
 			lastMoved = Date.now();
-			hoveredTable.hover(getPosition());
+			const position = getPosition();
+			if (position.col < 0 || position.row < 0) cellHoverOverlay.hover(void 0);
+			else cellHoverOverlay.hover(getPosition());
 		}
 	}
 	function recompute() {
@@ -21410,7 +21505,7 @@ function useCellHovered(env, gridRef) {
 		const zoomedMouseEvent = withZoom(env, e);
 		const { x, y } = getOffsetRelativeToOverlay(zoomedMouseEvent);
 		const gridRect = getElBoundingRect(gridRef());
-		if (y < 0 || y > gridRect.height || x < 0 || x > gridRect.width) return updateMousePosition(zoomedMouseEvent);
+		if (y <= 0 || y >= gridRect.height || x <= 0 || x >= gridRect.width) return updateMousePosition(zoomedMouseEvent);
 		else return pause();
 	}
 	useListener(gridRef, "pointermove", (ev) => !env.isMobile() && updateMousePosition(withZoom(env, ev)));
@@ -21447,7 +21542,7 @@ var GridOverlay = class extends Component {
 		gridOverlayDimensions: types$1.string(),
 		hasFooter: types$1.boolean().optional(() => true)
 	});
-	gridOverlayRef = signal(null);
+	gridOverlayRef = signal.ref();
 	cellPopovers;
 	paintFormatStore;
 	hoveredIconStore;
@@ -21474,7 +21569,7 @@ var GridOverlay = class extends Component {
 		return el;
 	}
 	get style() {
-		return this.props.gridOverlayDimensions + cssPropertiesToCss({ cursor: this.hoveredIconStore.hoveredIcon ? "pointer" : "default" });
+		return this.props.gridOverlayDimensions + cssPropertiesToCss({ cursor: this.hoveredIconStore.hoveredIcon ? "pointer" : "inherit" });
 	}
 	get isPaintingFormat() {
 		return this.paintFormatStore.isActive;
@@ -22114,8 +22209,9 @@ var FormulaFingerprintStore = class extends SpreadsheetStore {
 const CELL_ANIMATION_DURATION = 200;
 var GridRenderer = class extends DisposableStore {
 	renderer;
+	storeGetters = ["drawLayer"];
 	fingerprints;
-	hoveredTables;
+	cellHoverOverlayStore = this.get(CellHoverOverlayStore);
 	hoveredIcon;
 	lastRenderSheetId = void 0;
 	lastRenderBoxes = /* @__PURE__ */ new Map();
@@ -22129,15 +22225,14 @@ var GridRenderer = class extends DisposableStore {
 		const model = get(ModelStore);
 		this.getters = model.getters;
 		this.fingerprints = get(FormulaFingerprintStore);
-		this.hoveredTables = get(HoveredTableStore);
 		this.hoveredIcon = get(HoveredIconStore);
 		model.on("command-dispatched", this, this.handle);
 		model.on("command-finalized", this, this.finalize);
-		this.renderer.register(this);
+		if (this.renderer) this.renderer.register(this);
 		this.onDispose(() => {
 			model.off("command-dispatched", this);
 			model.off("command-finalized", this);
-			this.renderer.unRegister(this);
+			if (this.renderer) this.renderer.unRegister(this);
 		});
 	}
 	handle(cmd) {
@@ -22681,7 +22776,7 @@ var GridRenderer = class extends DisposableStore {
 			border: this.getters.getCellComputedBorder(position) || void 0,
 			style,
 			dataBarFill,
-			overlayColor: this.hoveredTables.overlayColors.get(position),
+			overlayColor: this.cellHoverOverlayStore.overlayColors.get(position),
 			isError: cell.type === "error" && !!cell.message || this.getters.isDataValidationInvalid(position),
 			icons: cellIcons,
 			disabledAnimation: this.zonesWithPreventedAnimationsInNextFrame[sheetId]?.some((z) => isZoneInside(zone, z) || overlap(zone, z))
@@ -22857,6 +22952,7 @@ var GridRenderer = class extends DisposableStore {
 		return boxes;
 	}
 	getBoxesWithAnimations(boxes, oldBoxes, timeStamp) {
+		if (!this.renderer) return boxes;
 		this.updateAnimationsProgress(timeStamp);
 		this.addNewAnimations(boxes, oldBoxes, timeStamp);
 		if (this.animations.size > 0) {
@@ -23001,7 +23097,7 @@ var ScrollBar = class extends Component {
 		offset: types$1.Pixel(),
 		onScroll: types$1.function()
 	});
-	scrollbarRef = signal(null);
+	scrollbarRef = signal.ref();
 	scrollbar;
 	setup() {
 		this.scrollbar = new ScrollBar$1(this.scrollbarRef(), this.props.direction);
@@ -23103,6 +23199,9 @@ var StandaloneViewportStore = class extends SpreadsheetStore {
 			zoneToDisplay: this.range.zone,
 			getFooterSize: () => 0
 		});
+		const cellHoverOverlayStore = this.get(CellHoverOverlayStore);
+		cellHoverOverlayStore.register(this);
+		this.onDispose(() => cellHoverOverlayStore.unRegister(this));
 	}
 	handle(cmd) {
 		this.cachedColDimensions = void 0;
@@ -23251,6 +23350,16 @@ var StandaloneViewportStore = class extends SpreadsheetStore {
 		}
 		return normalizedWeights;
 	}
+	getHighlightedPositions(position) {
+		const highlightedPositions = [];
+		const { col, row, sheetId } = position;
+		if (sheetId !== this.range.sheetId || !isInside(col, row, this.range.zone)) return highlightedPositions;
+		for (let col = this.range.zone.left; col <= this.range.zone.right; col++) highlightedPositions.push({
+			...position,
+			col
+		});
+		return highlightedPositions;
+	}
 };
 
 //#endregion
@@ -23267,10 +23376,11 @@ var StandaloneViewport = class extends Component {
 		range: types$1.Range(),
 		canResizeColumns: types$1.boolean().optional(true),
 		onResizeColumns: types$1.function().optional(),
-		columnWeights: types$1.array().optional()
+		columnWeights: types$1.array().optional(),
+		size: types$1.object()
 	});
-	canvasRef = signal(null);
-	containerRef = signal(null);
+	canvasRef = signal.ref(HTMLCanvasElement);
+	containerRef = signal.ref();
 	store;
 	dndState = proxy({ col: void 0 });
 	onMouseWheel;
@@ -23282,8 +23392,8 @@ var StandaloneViewport = class extends Component {
 		useChildStoreProvider([
 			ViewportsStore,
 			HoveredIconStore,
-			HoveredTableStore,
 			ClickableCellsStore,
+			CellHoverOverlayStore,
 			DelayedHoveredCellStore,
 			CellPopoverStore
 		]);
@@ -23292,18 +23402,10 @@ var StandaloneViewport = class extends Component {
 		this.zoomStore = useStore(ZoomStore);
 		this.cellPopoverStore = useStore(CellPopoverStore);
 		this.rendererStore = useLocalStore(RendererStore, ["Background", "Chart"]);
-		const resizeObserver = new ResizeObserver(() => {
-			this.store.setContainerSize(this.containerWidth, this.containerHeight);
-		});
-		useEffect(() => {
-			const el = this.containerRef();
-			if (el) resizeObserver.observe(el);
-			return () => resizeObserver.disconnect();
-		});
 		useEffect(() => {
 			this.store.setRange(this.props.range);
 			if (this.dndState.col === void 0) this.store.setCustomColWeights(this.props.columnWeights);
-			this.store.setContainerSize(this.containerWidth, this.containerHeight);
+			this.store.setContainerSize(this.contentWidth, this.props.size.height);
 		});
 		useGridDrawing({
 			canvasRef: this.canvasRef,
@@ -23322,14 +23424,11 @@ var StandaloneViewport = class extends Component {
 			}
 		});
 	}
-	get containerWidth() {
-		return Math.floor(getElBoundingRect(this.containerRef()).width / this.zoomStore.zoomLevel);
-	}
-	get containerHeight() {
-		return Math.floor(getElBoundingRect(this.containerRef()).height / this.zoomStore.zoomLevel);
+	get contentWidth() {
+		return this.hasVerticalScrollBar ? this.props.size.width - this.zoomStore.scrollBarWidth : this.props.size.width;
 	}
 	get hasVerticalScrollBar() {
-		return this.containerHeight && this.viewStore.mainViewportCoordinates.y + this.viewStore.mainViewportRect.height > this.containerHeight;
+		return this.viewStore.mainViewportCoordinates.y + this.viewStore.mainViewportRect.height > this.props.size.height;
 	}
 	get scrollBarContainerStyle() {
 		return cssPropertiesToCss({ width: `${this.zoomStore.scrollBarWidth}px` });
@@ -23381,7 +23480,7 @@ var StandaloneViewport = class extends Component {
 		};
 		const onMouseMove = (ev) => {
 			deltaX = withZoom(this.env, ev).clientX - initialX;
-			const weightDelta = deltaX / this.containerWidth * totalWeight;
+			const weightDelta = deltaX / this.props.size.width * totalWeight;
 			this.store.resizeColumn(resizer.col, weightDelta, startingColWeights);
 		};
 		startDnd(onMouseMove, onMouseUp);
@@ -23411,8 +23510,8 @@ var Select = class extends Component {
 		name: types$1.string().optional(),
 		title: types$1.string().optional()
 	});
-	selectRef = signal(null);
-	dropdownRef = signal(null);
+	selectRef = signal.ref();
+	dropdownRef = signal.ref();
 	state = proxy({
 		isPopoverOpen: false,
 		hoveredValue: void 0
@@ -23522,7 +23621,7 @@ var InfoPopover = class extends Component {
 	setup() {
 		useExternalListener(window, "click", this.onExternalClick, { capture: true });
 	}
-	infoRef = signal(null);
+	infoRef = signal.ref();
 	get popoverProps() {
 		return {
 			anchorRect: this.props.anchorRect,
@@ -23667,8 +23766,8 @@ var CarouselFigure = class extends Component {
 		isFullScreen: types$1.boolean().optional(),
 		openContextMenu: types$1.function().optional()
 	});
-	carouselTabsRef = signal(null);
-	carouselTabsDropdownRef = signal(null);
+	carouselTabsRef = signal.ref();
+	carouselTabsDropdownRef = signal.ref();
 	menuState = proxy({
 		isOpen: false,
 		anchorRect: null,
@@ -23736,6 +23835,19 @@ var CarouselFigure = class extends Component {
 		} else cssProperties["background-color"] = backgroundColor;
 		return cssPropertiesToCss(cssProperties);
 	}
+	get contentStyle() {
+		return cssPropertiesToCss(this.rectToCss(this.carouselLayout.contentRect));
+	}
+	get headerStyle() {
+		return cssPropertiesToCss({
+			...this.rectToCss(this.carouselLayout.headerRect),
+			"line-height": String(this.carouselLayout.headerLineHeight)
+		});
+	}
+	get separatorStyle() {
+		const separatorRect = this.carouselLayout.separatorRect;
+		return separatorRect ? cssPropertiesToCss(this.rectToCss(separatorRect)) : "";
+	}
 	get title() {
 		return this.env.model.getters.dynamicTranslate(this.carousel.title?.text ?? "");
 	}
@@ -23745,6 +23857,14 @@ var CarouselFigure = class extends Component {
 			...this.carousel.title
 		})));
 	}
+	rectToCss(rect) {
+		return {
+			top: `${rect.y}px`,
+			left: `${rect.x}px`,
+			width: `${rect.width}px`,
+			height: `${rect.height}px`
+		};
+	}
 	updateTabsVisibility() {
 		const tabsContainerEl = this.carouselTabsRef();
 		const dropDownEl = this.carouselTabsDropdownRef();
@@ -23836,6 +23956,13 @@ var CarouselFigure = class extends Component {
 	get canResizeDataViewColumns() {
 		return !this.env.model.getters.isReadonly() && !this.env.model.getters.isSheetLocked(this.env.model.getters.getActiveSheetId());
 	}
+	get carouselLayout() {
+		return getCarouselLayout({
+			...this.props.figureUI,
+			x: 0,
+			y: 0
+		}, this.carousel, this.selectedCarouselItem);
+	}
 };
 
 //#endregion
@@ -23876,7 +24003,7 @@ var ImageFigure = class extends Component {
 		figureUI: types$1.FigureUI(),
 		openContextMenu: types$1.function()
 	});
-	menuButtonRef = signal(null);
+	menuButtonRef = signal.ref();
 	showMenu(ev) {
 		if (!this.env.model.getters.getSelectedFigureIds().includes(this.props.figureUI.id)) this.env.model.dispatch("SELECT_FIGURE", {
 			figureId: this.props.figureUI.id,
@@ -23904,7 +24031,8 @@ figureRegistry.add("chart", {
 	menuBuilder: getChartMenuActions,
 	borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 	hasShadow: (getters) => getters.isDashboard(),
-	isRounded: (getters) => getters.isDashboard()
+	isRounded: (getters) => getters.isDashboard(),
+	isThemeDependant: true
 });
 figureRegistry.add("image", {
 	Component: ImageFigure,
@@ -23913,14 +24041,16 @@ figureRegistry.add("image", {
 	borderWidth: () => 0,
 	hasShadow: () => false,
 	isRounded: () => false,
-	menuBuilder: getImageMenuActions
+	menuBuilder: getImageMenuActions,
+	isThemeDependant: false
 });
 figureRegistry.add("carousel", {
 	Component: CarouselFigure,
 	menuBuilder: getCarouselMenuActions,
 	borderWidth: (getters) => getters.isDashboard() ? 0 : 1,
 	hasShadow: (getters) => getters.isDashboard(),
-	isRounded: (getters) => getters.isDashboard()
+	isRounded: (getters) => getters.isDashboard(),
+	isThemeDependant: true
 });
 
 //#endregion
@@ -23942,10 +24072,13 @@ var FigureComponent = class extends Component {
 		anchorRect: null,
 		menuItems: []
 	});
-	figureRef = signal(null);
+	figureRef = signal.ref();
 	get isSelected() {
 		return !this.env.model.getters.isDashboard() && this.env.model.getters.getSelectedFigureIds().includes(this.props.figureUI.id);
 	}
+	get isThemeDependant() {
+		return figureRegistry.get(this.props.figureUI.tag).isThemeDependant;
+	}
 	get figureRegistry() {
 		return figureRegistry;
 	}
@@ -29544,6 +29677,35 @@ async function interactivePasteFromOS(env, target, parsedClipboardContent, paste
 	}));
 }
 
+//#endregion
+//#region src/helpers/figures/charts/chart_data_source_helpers.ts
+function getUnboundRange(getters, zone) {
+	return zoneToXc(getters.getUnboundedZone(getters.getActiveSheetId(), zone));
+}
+function isDatasetTitled(getters, zone) {
+	const sheetId = getters.getActiveSheetId();
+	const cell = getters.getEvaluatedCell({
+		sheetId,
+		col: zone.left,
+		row: zone.top
+	});
+	return !["number", "empty"].includes(cell.type);
+}
+function dataset(zone, getters, id = "0") {
+	return {
+		dataRange: getUnboundRange(getters, zone),
+		dataSetId: id
+	};
+}
+function rangeSource(dataSets, dataSetsHaveTitle, labelRange) {
+	return {
+		type: "range",
+		dataSets,
+		dataSetsHaveTitle,
+		labelRange
+	};
+}
+
 //#endregion
 //#region src/helpers/figures/charts/smart_chart_engine.ts
 const DEFAULT_BAR_CHART_CONFIG = {
@@ -29574,9 +29736,6 @@ const DEFAULT_LINE_CHART_CONFIG = {
 	labelsAsText: false,
 	humanize: true
 };
-function getUnboundRange(getters, zone) {
-	return zoneToXc(getters.getUnboundedZone(getters.getActiveSheetId(), zone));
-}
 function detectColumnType(cells) {
 	if (!cells.length) return "empty";
 	const counts = {
@@ -29623,14 +29782,6 @@ function getCellStats(getters, zone) {
 		totalCount: values.length
 	};
 }
-function isDatasetTitled(getters, column) {
-	const titleCell = getters.getEvaluatedCell({
-		sheetId: getters.getActiveSheetId(),
-		col: column.zone.left,
-		row: column.zone.top
-	});
-	return !["number", "empty"].includes(titleCell.type);
-}
 /**
 * Builds a chart definition for a single column selection. The logic to detect the chart type is as follows:
 * - If the column contains a single cell, create a scorecard.
@@ -29642,8 +29793,7 @@ function isDatasetTitled(getters, column) {
 function buildSingleColumnChart(column, getters) {
 	const { type, zone } = column;
 	const sheetId = getters.getActiveSheetId();
-	const dataSetsHaveTitle = isDatasetTitled(getters, column);
-	const dataRange = getUnboundRange(getters, zone);
+	const dataSetsHaveTitle = isDatasetTitled(getters, column.zone);
 	const titleCell = getters.getEvaluatedCell({
 		sheetId,
 		col: zone.left,
@@ -29654,14 +29804,7 @@ function buildSingleColumnChart(column, getters) {
 		case "percentage": return {
 			type: "pie",
 			title: dataSetsHaveTitle ? { text: String(titleCell.value) } : {},
-			dataSource: {
-				type: "range",
-				dataSets: [{
-					dataRange,
-					dataSetId: "0"
-				}],
-				dataSetsHaveTitle
-			},
+			dataSource: rangeSource([dataset(zone, getters)], dataSetsHaveTitle),
 			dataSetStyles: {},
 			legendPosition: "none"
 		};
@@ -29672,45 +29815,28 @@ function buildSingleColumnChart(column, getters) {
 			return {
 				type: "pie",
 				title: hasUniqueTitle ? { text: String(titleCell.value) } : {},
-				dataSource: {
-					type: "range",
-					dataSets: [{
-						dataRange,
-						dataSetId: "0"
-					}],
-					labelRange: dataRange,
-					dataSetsHaveTitle: hasUniqueTitle
-				},
+				dataSource: rangeSource([dataset(zone, getters)], hasUniqueTitle, getUnboundRange(getters, zone)),
 				dataSetStyles: {},
 				aggregated: true,
 				legendPosition: "top"
 			};
-		case "date": return {
-			type: "calendar",
-			title: dataSetsHaveTitle ? { text: String(titleCell.value) } : {},
-			dataSource: {
-				type: "range",
-				dataSets: [],
-				dataSetsHaveTitle,
-				labelRange: dataRange
-			},
-			dataSetStyles: {},
-			legendPosition: "left",
-			horizontalGroupBy: "day_of_week",
-			verticalGroupBy: "month_number"
-		};
+		case "date": {
+			const dataRange = getUnboundRange(getters, zone);
+			return {
+				type: "calendar",
+				title: dataSetsHaveTitle ? { text: String(titleCell.value) } : {},
+				dataSource: rangeSource([], dataSetsHaveTitle, dataRange),
+				dataSetStyles: {},
+				legendPosition: "left",
+				horizontalGroupBy: "day_of_week",
+				verticalGroupBy: "month_number"
+			};
+		}
 	}
 	return {
 		...DEFAULT_BAR_CHART_CONFIG,
 		title: dataSetsHaveTitle ? { text: String(titleCell.value) } : {},
-		dataSource: {
-			type: "range",
-			dataSets: [{
-				dataRange,
-				dataSetId: "0"
-			}],
-			dataSetsHaveTitle
-		},
+		dataSource: rangeSource([dataset(zone, getters)], dataSetsHaveTitle),
 		dataSetStyles: {}
 	};
 }
@@ -29728,15 +29854,7 @@ function buildTwoColumnChart(columns, getters) {
 	if (columns[1].type === "percentage") return {
 		type: "pie",
 		title: {},
-		dataSource: {
-			type: "range",
-			dataSets: [{
-				dataRange: getUnboundRange(getters, columns[1].zone),
-				dataSetId: "0"
-			}],
-			labelRange: getUnboundRange(getters, columns[0].zone),
-			dataSetsHaveTitle: isDatasetTitled(getters, columns[1])
-		},
+		dataSource: rangeSource([dataset(columns[1].zone, getters)], isDatasetTitled(getters, columns[1].zone), getUnboundRange(getters, columns[0].zone)),
 		dataSetStyles: {},
 		aggregated: true,
 		legendPosition: "none"
@@ -29744,15 +29862,7 @@ function buildTwoColumnChart(columns, getters) {
 	if (columns[0].type === "number" && columns[1].type === "number") return {
 		type: "scatter",
 		title: {},
-		dataSource: {
-			type: "range",
-			dataSets: [{
-				dataRange: getUnboundRange(getters, columns[1].zone),
-				dataSetId: "0"
-			}],
-			labelRange: getUnboundRange(getters, columns[0].zone),
-			dataSetsHaveTitle: isDatasetTitled(getters, columns[1])
-		},
+		dataSource: rangeSource([dataset(columns[1].zone, getters)], isDatasetTitled(getters, columns[1].zone), getUnboundRange(getters, columns[0].zone)),
 		dataSetStyles: {},
 		labelsAsText: false,
 		legendPosition: "none"
@@ -29760,49 +29870,25 @@ function buildTwoColumnChart(columns, getters) {
 	if (columns[0].type === "date" && columns[1].type === "number") return {
 		...DEFAULT_LINE_CHART_CONFIG,
 		type: "line",
-		dataSource: {
-			type: "range",
-			dataSets: [{
-				dataRange: getUnboundRange(getters, columns[1].zone),
-				dataSetId: "0"
-			}],
-			labelRange: getUnboundRange(getters, columns[0].zone),
-			dataSetsHaveTitle: isDatasetTitled(getters, columns[0])
-		},
+		dataSource: rangeSource([dataset(columns[1].zone, getters)], isDatasetTitled(getters, columns[0].zone), getUnboundRange(getters, columns[0].zone)),
 		dataSetStyles: {}
 	};
 	if (columns[0].type === "text" && columns[1].type === "number") {
 		const textColumn = columns[0];
 		const numberColumn = columns[1];
 		const { uniqueCount, totalCount } = getCellStats(getters, textColumn.zone);
-		const dataSetsHaveTitle = isDatasetTitled(getters, numberColumn);
+		const dataSetsHaveTitle = isDatasetTitled(getters, numberColumn.zone);
 		if (uniqueCount !== totalCount) return {
 			type: "treemap",
 			title: {},
-			dataSource: {
-				type: "range",
-				dataSets: [{
-					dataRange: getUnboundRange(getters, textColumn.zone),
-					dataSetId: "0"
-				}],
-				labelRange: getUnboundRange(getters, numberColumn.zone),
-				dataSetsHaveTitle
-			},
+			dataSource: rangeSource([dataset(textColumn.zone, getters)], dataSetsHaveTitle, getUnboundRange(getters, numberColumn.zone)),
 			dataSetStyles: {},
 			legendPosition: "none"
 		};
 	}
 	return {
 		...DEFAULT_BAR_CHART_CONFIG,
-		dataSource: {
-			type: "range",
-			dataSets: [{
-				dataRange: getUnboundRange(getters, columns[1].zone),
-				dataSetId: "0"
-			}],
-			labelRange: getUnboundRange(getters, columns[0].zone),
-			dataSetsHaveTitle: isDatasetTitled(getters, columns[1])
-		},
+		dataSource: rangeSource([dataset(columns[1].zone, getters)], isDatasetTitled(getters, columns[1].zone), getUnboundRange(getters, columns[0].zone)),
 		dataSetStyles: {}
 	};
 }
@@ -29816,42 +29902,26 @@ function buildTwoColumnChart(columns, getters) {
 */
 function buildMultiColumnChart(columns, getters) {
 	if (columns.length < 3) throw new Error("buildMultiColumnChart expects at least three columns");
-	const dataSetsHaveTitle = columns.some((col) => col.type !== "text" && isDatasetTitled(getters, col));
+	const dataSetsHaveTitle = columns.some((col) => col.type !== "text" && isDatasetTitled(getters, col.zone));
 	const lastColumn = columns[columns.length - 1];
 	const columnsExceptLast = columns.slice(0, columns.length - 1);
 	if ((lastColumn.type === "percentage" || lastColumn.type === "number") && columnsExceptLast.every((col) => col.type === "text")) {
-		const dataSets = columnsExceptLast.map(({ zone }, i) => ({
-			dataRange: getUnboundRange(getters, zone),
-			dataSetId: i.toString()
-		}));
+		const dataSets = columnsExceptLast.map(({ zone }, i) => dataset(zone, getters, String(i)));
 		return {
 			type: columnsExceptLast.length >= 3 ? "sunburst" : "treemap",
 			title: {},
-			dataSource: {
-				type: "range",
-				dataSets,
-				dataSetsHaveTitle,
-				labelRange: getUnboundRange(getters, lastColumn.zone)
-			},
+			dataSource: rangeSource(dataSets, dataSetsHaveTitle, getUnboundRange(getters, lastColumn.zone)),
 			dataSetStyles: {},
 			legendPosition: "none"
 		};
 	}
 	const firstColumn = columns[0];
 	const columnsExceptFirst = columns.slice(1);
-	const rangesOfColumnsExceptFirst = columnsExceptFirst.map(({ zone }, i) => ({
-		dataRange: getUnboundRange(getters, zone),
-		dataSetId: i.toString()
-	}));
+	const rangesOfColumnsExceptFirst = columnsExceptFirst.map(({ zone }, i) => dataset(zone, getters, String(i)));
 	if (columnsExceptFirst.every((col) => col.type === "percentage")) return {
 		type: "pie",
 		title: {},
-		dataSource: {
-			type: "range",
-			dataSets: rangesOfColumnsExceptFirst,
-			labelRange: getUnboundRange(getters, firstColumn.zone),
-			dataSetsHaveTitle
-		},
+		dataSource: rangeSource(rangesOfColumnsExceptFirst, dataSetsHaveTitle, getUnboundRange(getters, firstColumn.zone)),
 		dataSetStyles: {},
 		aggregated: false,
 		legendPosition: "top"
@@ -29859,23 +29929,13 @@ function buildMultiColumnChart(columns, getters) {
 	if (firstColumn.type === "date" && columnsExceptFirst.every((col) => col.type === "number")) return {
 		...DEFAULT_LINE_CHART_CONFIG,
 		type: "line",
-		dataSource: {
-			type: "range",
-			dataSets: rangesOfColumnsExceptFirst,
-			labelRange: getUnboundRange(getters, firstColumn.zone),
-			dataSetsHaveTitle
-		},
+		dataSource: rangeSource(rangesOfColumnsExceptFirst, dataSetsHaveTitle, getUnboundRange(getters, firstColumn.zone)),
 		dataSetStyles: {},
 		legendPosition: "top"
 	};
 	return {
 		...DEFAULT_BAR_CHART_CONFIG,
-		dataSource: {
-			type: "range",
-			dataSets: rangesOfColumnsExceptFirst,
-			labelRange: getUnboundRange(getters, firstColumn.zone),
-			dataSetsHaveTitle
-		},
+		dataSource: rangeSource(rangesOfColumnsExceptFirst, dataSetsHaveTitle, getUnboundRange(getters, firstColumn.zone)),
 		dataSetStyles: {},
 		legendPosition: "top"
 	};
@@ -29902,17 +29962,10 @@ function buildScorecard(zone, getters) {
 function getSmartChartDefinition(zones, getters) {
 	const columns = categorizeColumns(zones, getters);
 	if (columns.length === 0 || columns.every((col) => col.type === "empty")) {
-		const dataSets = columns.map(({ zone }, i) => ({
-			dataRange: getUnboundRange(getters, zone),
-			dataSetId: i.toString()
-		}));
+		const dataSets = columns.map(({ zone }, i) => dataset(zone, getters, String(i)));
 		return {
 			...DEFAULT_BAR_CHART_CONFIG,
-			dataSource: {
-				type: "range",
-				dataSets,
-				dataSetsHaveTitle: false
-			}
+			dataSource: rangeSource(dataSets, false)
 		};
 	}
 	const nonEmptyColumns = columns.filter((col) => col.type !== "empty");
@@ -31600,7 +31653,7 @@ var SelectionInput = class extends Component {
 	dragAndDrop = useDragAndDropListItems();
 	focusedInputRef = signal.ref(HTMLInputElement);
 	unfocusedInputRef = signal.ref(HTMLInputElement);
-	selectionRef = signal(null);
+	selectionRef = signal.ref();
 	DOMFocusableElementStore;
 	store;
 	get ranges() {
@@ -32107,7 +32160,7 @@ var ColorPickerWidget = class extends Component {
 		dropdownMaxHeight: types$1.Pixel().optional(),
 		class: types$1.string().optional()
 	});
-	colorPickerButtonRef = signal(null);
+	colorPickerButtonRef = signal.ref();
 	get iconStyle() {
 		return this.props.currentColor ? `border-color: ${this.props.currentColor}` : "border-bottom-style: hidden";
 	}
@@ -32135,8 +32188,8 @@ var NumberEditor = class extends Component {
 	});
 	dropdown = proxy({ isOpen: false });
 	inputRef = signal.ref(HTMLInputElement);
-	rootEditorRef = signal(null);
-	valueListRef = signal(null);
+	rootEditorRef = signal.ref();
+	valueListRef = signal.ref();
 	DOMFocusableElementStore;
 	setup() {
 		this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
@@ -32442,7 +32495,7 @@ var ChartTypePickerPopover = class extends Component {
 	});
 	categories = chartCategories;
 	chartTypeByCategories = {};
-	popoverRef = signal(null);
+	popoverRef = signal.ref();
 	setup() {
 		useListener(window, "pointerdown", this.onExternalClick.bind(this), { capture: true });
 		for (const subtypeProperties of chartSubtypeRegistry.getAll()) {
@@ -32467,7 +32520,7 @@ var CogWheelMenu = class extends Component {
 	static template = "o-spreadsheet-CogWheelMenu";
 	static components = { MenuPopover };
 	props = useProps({ items: types$1.array(types$1.ActionSpec()) });
-	buttonRef = signal(null);
+	buttonRef = signal.ref();
 	menuState = proxy({
 		isOpen: false,
 		anchorRect: null,
@@ -32511,8 +32564,8 @@ var CarouselPanel = class extends Component {
 	});
 	DEFAULT_CAROUSEL_TITLE_STYLE = DEFAULT_CAROUSEL_TITLE_STYLE;
 	dragAndDrop = useDragAndDropListItems();
-	previewListRef = signal(null);
-	addChartButton = signal(null);
+	previewListRef = signal.ref();
+	addChartButton = signal.ref(HTMLButtonElement);
 	state = proxy({
 		popoverProps: void 0,
 		currentRange: void 0
@@ -32956,7 +33009,7 @@ var BarConfigPanel = class extends GenericChartConfigPanel {
 var Collapse = class extends Component {
 	static template = "o-spreadsheet-Collapse";
 	props = useProps({ isCollapsed: types$1.boolean() });
-	contentRef = signal(null);
+	contentRef = signal.ref();
 	setup() {
 		onMounted(() => {
 			if (this.props.isCollapsed) this.contentRef()?.classList.add("d-none");
@@ -33009,7 +33062,7 @@ var ChartAnnotation = class extends Component {
 		TextInput
 	};
 	props = useProps(chartSidePanelPropsDefinition);
-	editorRef = signal(null);
+	editorRef = signal.ref();
 	state = proxy({
 		annotationTextInput: this.props.definition.annotationText || "",
 		isOverflowing: false
@@ -33331,7 +33384,7 @@ var RoundColorPicker = class extends Component {
 		onColorPicked: types$1.function(),
 		disableNoColor: types$1.boolean().optional()
 	});
-	colorPickerButtonRef = signal(null);
+	colorPickerButtonRef = signal.ref();
 	state;
 	setup() {
 		this.state = proxy({ pickerOpened: false });
@@ -36173,6 +36226,7 @@ var helpers_index_exports$1 = /* @__PURE__ */ __exportAll({
 	getDefinedAxis: () => getDefinedAxis,
 	getPieColors: () => getPieColors,
 	isTrendLineAxis: () => isTrendLineAxis,
+	limitChartConfigDataPoints: () => limitChartConfigDataPoints,
 	shouldRemoveFirstLabel: () => shouldRemoveFirstLabel,
 	toExcelDataset: () => toExcelDataset,
 	toExcelLabelRange: () => toExcelLabelRange,
@@ -36943,7 +36997,7 @@ var ColorScalePicker = class extends Component {
 		popoverProps: void 0,
 		popoverStyle: ""
 	});
-	popoverRef = signal(null);
+	popoverRef = signal.ref(HTMLTableElement);
 	setup() {
 		useExternalListener(window, "click", this.closePopover);
 	}
@@ -37192,7 +37246,7 @@ var TextValueProvider = class extends Component {
 		onValueSelected: types$1.function(),
 		onValueHovered: types$1.function()
 	});
-	autoCompleteListRef = signal(null);
+	autoCompleteListRef = signal.ref();
 	setup() {
 		useEffect(() => {
 			const selectedIndex = this.props.selectedIndex;
@@ -37483,7 +37537,7 @@ var SpeechBubble = class extends Component {
 		anchorRect: types$1.Rect()
 	});
 	spreadsheetRect = useSpreadsheetRect();
-	bubbleRef = signal(null);
+	bubbleRef = signal.ref();
 	setup() {
 		useEffect(() => {
 			const el = this.bubbleRef();
@@ -37528,8 +37582,8 @@ var Composer = class extends Component {
 		showAssistant: types$1.boolean().optional(true)
 	});
 	DOMFocusableElementStore;
-	composerRef = signal(null);
-	containerRef = signal(null);
+	composerRef = signal.ref();
+	containerRef = signal.ref();
 	contentHelper = new ContentEditableHelper(this.composerRef());
 	composerState = proxy({
 		positionStart: 0,
@@ -40031,7 +40085,7 @@ var ChartTypePicker = class extends Component {
 		chartId: types$1.UID(),
 		chartPanelStore: types$1.Store()
 	});
-	selectRef = signal(null);
+	selectRef = signal.ref();
 	state = proxy({ popoverProps: void 0 });
 	getSupportedChartTypes() {
 		let supportedTypes;
@@ -40599,7 +40653,7 @@ var ColumnStatsPanel = class extends Component {
 		highlightPositions: []
 	});
 	store;
-	chartCanvasRef = signal(null);
+	chartCanvasRef = signal.ref(HTMLCanvasElement);
 	chart;
 	setup() {
 		this.store = useStore(ColumnStatisticsStore);
@@ -42027,7 +42081,7 @@ var ConditionalFormatPreview = class extends Component {
 		class: types$1.string()
 	});
 	icons = ICONS;
-	cfPreviewRef = signal(null);
+	cfPreviewRef = signal.ref();
 	setup() {
 		useHighlightsOnHover(this.cfPreviewRef, this);
 	}
@@ -42084,7 +42138,7 @@ var ConditionalFormatPreviewList = class extends Component {
 	static components = { ConditionalFormatPreview };
 	props = useProps({ onCloseSidePanel: types$1.function() });
 	dragAndDrop = useDragAndDropListItems();
-	cfListRef = signal(null);
+	cfListRef = signal.ref();
 	get conditionalFormats() {
 		return this.env.model.getters.getConditionalFormats(this.env.model.getters.getActiveSheetId());
 	}
@@ -42144,6 +42198,1477 @@ var ConditionalFormatPreviewList = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/stores/chart_drag_store.ts
+/**
+* Holds the id of the figure that a dragged chart suggestion is currently
+* hovering over, so it can be highlighted reactively instead of through direct DOM manipulation.
+*/
+var ChartDragStore = class {
+	mutators = ["setHighlightedFigure"];
+	highlightedFigureId = void 0;
+	setHighlightedFigure(figureId) {
+		this.highlightedFigureId = figureId;
+	}
+};
+
+//#endregion
+//#region src/components/helpers/chart_drag_and_drop.ts
+function getDefaultChartFigureSize(type) {
+	if (type === "scorecard") return {
+		width: 213,
+		height: 101
+	};
+	return {
+		width: 536,
+		height: 335
+	};
+}
+function getCarouselOverlappingChart(figureUI, otherFigures, matchTags) {
+	if (figureUI.tag !== "chart") return;
+	const figureCenterX = figureUI.x + figureUI.width / 2;
+	const figureCenterY = figureUI.y + figureUI.height / 2;
+	let bestMatch;
+	let smallestDistance = Infinity;
+	for (const figure of otherFigures) {
+		if (!matchTags.includes(figure.tag)) continue;
+		const targetCenterX = figure.x + figure.width / 2;
+		const targetCenterY = figure.y + figure.height / 2;
+		const distanceX = Math.abs(figureCenterX - targetCenterX);
+		const distanceY = Math.abs(figureCenterY - targetCenterY);
+		const squaredDistance = distanceX ** 2 + distanceY ** 2;
+		if (distanceX <= figureUI.width / 2 && distanceY <= figureUI.height / 2 && squaredDistance < smallestDistance) {
+			smallestDistance = squaredDistance;
+			bestMatch = figure;
+		}
+	}
+	return bestMatch;
+}
+/**
+* Start dragging a floating preview of the given chart definition, following the mouse.
+* On drop, creates the chart on the grid (or inside a carousel if dropped on one).
+*/
+function startChartDragAndDrop(env, definition, ev) {
+	const zoom = env.getStore(ZoomStore).zoomLevel;
+	const gridPosition = gridOverlayPosition(zoom);
+	const spreadsheet = document.querySelector(".o-spreadsheet");
+	if (!spreadsheet) return;
+	const startX = ev.clientX / zoom;
+	const startY = ev.clientY / zoom;
+	const { width, height } = getDefaultChartFigureSize(definition.type);
+	const figureWidth = width * zoom;
+	const figureHeight = height * zoom;
+	const getters = env.model.getters;
+	const sheetId = getters.getActiveSheetId();
+	let container = null;
+	let destroyChart = void 0;
+	const chartDragStore = env.getStore(ChartDragStore);
+	const previousCursor = document.body.style.cursor;
+	document.body.style.cursor = "grabbing";
+	/** Grid coordinates (in sheet pixels) of a mouse position, or undefined if outside the grid. */
+	const getGridPosition = (clientX, clientY) => {
+		if (clientX > gridPosition.x + gridPosition.width || clientY > gridPosition.y + gridPosition.height) return;
+		const { scrollX, scrollY } = env.getStore(ViewportsStore).activeSheetScrollInfo;
+		return {
+			x: Math.max(0, (clientX - gridPosition.x) / zoom + scrollX),
+			y: Math.max(0, (clientY - gridPosition.y) / zoom + scrollY)
+		};
+	};
+	/** Carousel or standalone chart the dragged chart is dropped onto, if any. */
+	const getOverlappingFigure = (clientX, clientY) => {
+		const position = getGridPosition(clientX, clientY);
+		if (!position) return;
+		const figureUI = {
+			tag: "chart",
+			...position,
+			width,
+			height
+		};
+		const otherFigures = env.getStore(ViewportsStore).visibleFigures;
+		return getCarouselOverlappingChart(figureUI, otherFigures, ["carousel", "chart"]);
+	};
+	const halfWidth = figureWidth / 2;
+	const halfHeight = figureHeight / 2;
+	const onMouseMove = (e) => {
+		if (Math.abs(e.clientX - startX) <= 5 && Math.abs(e.clientY - startY) <= 5) return;
+		if (container === null) {
+			container = document.createElement("div");
+			container.className = "o-chart-drag-preview os-theme-dependant position-fixed border pe-none";
+			container.style.width = `${width}px`;
+			container.style.height = `${height}px`;
+			container.style.zoom = `${zoom}`;
+			const canvas = document.createElement("canvas");
+			canvas.className = "w-100 h-100";
+			container.appendChild(canvas);
+			spreadsheet.appendChild(container);
+			destroyChart = drawChartOnCanvas(canvas, SpreadsheetChart.fromStrDefinition(getters, sheetId, definition).getRuntime(getters, "newChart"), {
+				width,
+				height
+			}, definition.type, zoom);
+		}
+		container.style.left = `${Math.max(gridPosition.x, (e.clientX - halfWidth) / zoom)}px`;
+		container.style.top = `${Math.max(gridPosition.y, (e.clientY - halfHeight) / zoom)}px`;
+		const overlappingFigure = getOverlappingFigure(e.clientX - halfWidth, e.clientY - halfHeight);
+		container.style.opacity = overlappingFigure?.id ? "0.6" : "0.9";
+		chartDragStore.setHighlightedFigure(overlappingFigure?.id);
+	};
+	const onMouseUp = (mouseEvent) => {
+		chartDragStore.setHighlightedFigure(void 0);
+		if (container !== null) {
+			spreadsheet.removeChild(container);
+			container = null;
+		}
+		destroyChart?.();
+		document.body.style.cursor = previousCursor;
+		let position = getGridPosition(mouseEvent.clientX - halfWidth, mouseEvent.clientY - halfHeight);
+		if (Math.abs(mouseEvent.clientX / zoom - startX) <= 5 && Math.abs(mouseEvent.clientY / zoom - startY) <= 5) position = {
+			x: 0,
+			y: 0
+		};
+		else if (!position || position.x + halfWidth > gridPosition.width) return;
+		const { col, row, offset } = env.getStore(ViewportsStore).viewports.getPositionAnchorOffset(sheetId, position);
+		const payload = {
+			chartId: UuidGenerator.smallUuid(),
+			figureId: UuidGenerator.smallUuid(),
+			sheetId,
+			size: {
+				width,
+				height
+			},
+			definition,
+			col,
+			row,
+			offset
+		};
+		const overlappingFigure = getOverlappingFigure(mouseEvent.clientX - halfWidth, mouseEvent.clientY - halfHeight);
+		if (overlappingFigure?.tag === "carousel") env.model.dispatch("ADD_NEW_CHART_TO_CAROUSEL", {
+			sheetId,
+			figureId: overlappingFigure.id,
+			newChartId: UuidGenerator.smallUuid(),
+			chartDefinition: definition
+		});
+		else if (overlappingFigure?.tag === "chart") env.model.dispatch("CREATE_CHART_AND_MERGE_INTO_CAROUSEL", {
+			chartId: payload.chartId,
+			figureId: payload.figureId,
+			sheetId: payload.sheetId,
+			definition: payload.definition,
+			baseFigureId: overlappingFigure.id
+		});
+		else env.model.dispatch("CREATE_CHART", payload);
+	};
+	startDnd(onMouseMove, onMouseUp);
+}
+
+//#endregion
+//#region src/components/side_panel/data_analysis/chart_suggestion_preview.ts
+const PREVIEW_BUBBLE_RADIUS_RATIO = .3;
+const MIN_PREVIEW_BUBBLE_RADIUS = 1;
+var ChartSuggestionPreview = class extends Component {
+	static template = "o-spreadsheet-ChartSuggestionPreview";
+	props = useProps({
+		definition: types$1.ChartDefinition(),
+		description: types$1.string(),
+		onPointerDown: types$1.function()
+	});
+	chartCanvasRef = signal.ref(HTMLCanvasElement);
+	chart;
+	setup() {
+		onMounted(() => registerChartJSExtensions());
+		onWillUnmount(() => this.destroyChart());
+		useLayoutEffect(() => {
+			this.updateChart();
+		}, () => [this.props.definition]);
+	}
+	getChartConfiguration() {
+		const getters = this.env.model.getters;
+		const activeSheetId = getters.getActiveSheetId();
+		const runtime = SpreadsheetChart.fromStrDefinition(getters, activeSheetId, this.props.definition).getRuntime(getters, "myChart");
+		if (!("chartJsConfig" in runtime)) return null;
+		let config = runtime.chartJsConfig;
+		const existingScales = config.options?.scales ?? {};
+		config = {
+			...config,
+			data: this.props.definition.type === "bubble" ? {
+				...config.data,
+				datasets: (config.data?.datasets || []).map((dataset) => ({
+					...dataset,
+					pointRadius: this.scaleBubblePointRadius(dataset.pointRadius),
+					pointHoverRadius: this.scaleBubblePointRadius(dataset.pointHoverRadius)
+				}))
+			} : config.data,
+			options: {
+				...config.options,
+				plugins: {
+					...config.options?.plugins,
+					legend: { display: false },
+					title: { display: false },
+					tooltip: { enabled: false }
+				},
+				events: [],
+				animation: false,
+				scales: this.getScalesCongif(existingScales)
+			}
+		};
+		return limitChartConfigDataPoints(config);
+	}
+	getScalesCongif(scales) {
+		if (scales.x) scales.x = {
+			...scales.x,
+			ticks: { display: false },
+			border: { display: false }
+		};
+		if (scales.y) scales.y = {
+			...scales.y,
+			ticks: { display: false },
+			border: { display: false }
+		};
+		if (scales.r) scales.r = {
+			...scales.r,
+			ticks: { display: false },
+			pointLabels: { display: false }
+		};
+		return scales;
+	}
+	scaleBubblePointRadius(pointRadius) {
+		if (Array.isArray(pointRadius)) return pointRadius.map((radius) => radius <= 0 ? radius : Math.max(MIN_PREVIEW_BUBBLE_RADIUS, radius * PREVIEW_BUBBLE_RADIUS_RATIO));
+		if (typeof pointRadius === "number") return pointRadius <= 0 ? pointRadius : Math.max(MIN_PREVIEW_BUBBLE_RADIUS, pointRadius * PREVIEW_BUBBLE_RADIUS_RATIO);
+		return pointRadius ?? MIN_PREVIEW_BUBBLE_RADIUS;
+	}
+	updateChart() {
+		this.destroyChart();
+		const config = this.getChartConfiguration();
+		if (!config) {
+			this.drawNativeChart();
+			return;
+		}
+		const ctx = this.chartCanvasRef()?.getContext("2d");
+		if (!ctx || !globalThis.Chart) return;
+		this.chart = new globalThis.Chart(ctx, config);
+	}
+	drawNativeChart() {
+		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");
+		const { type } = this.props.definition;
+		if (type === "scorecard") {
+			const rect = canvas.getBoundingClientRect();
+			runtime = {
+				...runtime,
+				keyValueStyle: {
+					...runtime.keyValueStyle,
+					fontSize: 16
+				}
+			};
+			drawScoreChart(getScorecardConfiguration({
+				width: rect.width || 130,
+				height: rect.height || 120
+			}, runtime), canvas);
+		} else if (type === "gauge") {
+			let gaugeRuntime = runtime;
+			if (gaugeRuntime.title) gaugeRuntime = {
+				...gaugeRuntime,
+				title: { text: "" }
+			};
+			drawGaugeChart(canvas, gaugeRuntime, 1, void 0, { labelFontSize: 8 });
+		}
+	}
+	destroyChart() {
+		this.chart?.destroy();
+		this.chart = void 0;
+	}
+};
+
+//#endregion
+//#region src/helpers/data_analysis.ts
+function analyzeColumns(zones, getters) {
+	return getZonesByColumns(zones).map((zone) => analyzeColumn(zone, getters));
+}
+function analyzeColumn(zone, getters) {
+	const sheetId = getters.getActiveSheetId();
+	const cells = getters.getEvaluatedCellsInZone(sheetId, zone).filter((c) => c.type !== "empty");
+	if (!cells.length) return {
+		zone,
+		type: "empty",
+		hasHeader: false,
+		rowCount: 0,
+		uniqueCount: 0,
+		uniqueRatio: 0,
+		nonEmpty: []
+	};
+	const firstCell = cells[0];
+	const rest = cells.slice(1);
+	const hasHeader = firstCell.type === "text" && rest.some((c) => c.type !== "text");
+	const dataCells = hasHeader ? rest : cells;
+	const numericValues = dataCells.filter((c) => c.type === "number").map((c) => c.value);
+	const allVals = dataCells.map((c) => String(c.value ?? ""));
+	const uniqueCount = new Set(allVals).size;
+	return {
+		zone,
+		type: computeColumnType(dataCells),
+		header: hasHeader ? firstCell.value : void 0,
+		hasHeader,
+		rowCount: dataCells.length,
+		uniqueCount,
+		uniqueRatio: allVals.length > 0 ? uniqueCount / allVals.length : 0,
+		maxValue: numericValues.length ? numericValues.reduce((max, v) => v > max ? v : max, numericValues[0]) : void 0,
+		nonEmpty: dataCells
+	};
+}
+function computeColumnType(cells) {
+	if (cells.length === 0) return "empty";
+	if (cells.every((c) => c.type === "error")) return "error";
+	cells = cells.filter((c) => c.type !== "error");
+	if (cells.every((c) => c.type === "boolean")) return "boolean";
+	if (cells.every((c) => c.type === "number" && !!c.format && isDateTimeFormat(c.format))) return "date";
+	else if (cells.every((c) => c.type === "number")) {
+		if (cells.every((c) => c.format?.includes("%"))) return "percentage";
+		return "number";
+	} else {
+		const textVals = cells.filter((c) => c.type === "text").map((c) => c.value);
+		if (textVals.length > 0) {
+			const unique = new Set(textVals).size;
+			return unique / textVals.length < .75 && unique <= 20 ? "categorical" : "label";
+		}
+	}
+	return "empty";
+}
+
+//#endregion
+//#region src/helpers/figures/charts/charts_suggestions_constants.ts
+/** Above this many rows, shape-based charts (radar, scatter, pyramid) become unreadable. */
+const MAX_ROWS_FOR_SHAPE_CHART = 10;
+function barChart(titleText, source, opts = {}) {
+	return {
+		...opts,
+		type: "bar",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: opts.legendPosition ?? "none",
+		stacked: opts.stacked ?? false,
+		humanize: true,
+		aggregated: opts.aggregated ?? false
+	};
+}
+function lineChart(titleText, source, opts = {}) {
+	return {
+		...opts,
+		type: "line",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: opts.legendPosition ?? "none",
+		stacked: opts.stacked ?? false,
+		cumulative: opts.cumulative ?? false,
+		labelsAsText: false,
+		humanize: true
+	};
+}
+function pieChart(titleText, source, opts = {}) {
+	return {
+		...opts,
+		type: "pie",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: opts.legendPosition ?? "top",
+		humanize: true
+	};
+}
+function radarChart(titleText, source, opts = {}) {
+	return {
+		...opts,
+		type: "radar",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: opts.legendPosition ?? "none",
+		stacked: false,
+		humanize: true
+	};
+}
+function sunburstChart(titleText, source) {
+	return {
+		type: "sunburst",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: "none"
+	};
+}
+function treemapChart(titleText, source) {
+	return {
+		type: "treemap",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: "none"
+	};
+}
+function calendarChart(titleText, source) {
+	return {
+		type: "calendar",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: "none",
+		horizontalGroupBy: "month_number",
+		verticalGroupBy: "day_of_week",
+		humanize: true
+	};
+}
+function scatterChart(titleText, source) {
+	return {
+		type: "scatter",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: "none",
+		labelsAsText: false,
+		humanize: true
+	};
+}
+function pyramidChart(titleText, source, opts = {}) {
+	return {
+		type: "pyramid",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: opts.legendPosition ?? "top",
+		stacked: false,
+		horizontal: true,
+		humanize: true
+	};
+}
+function comboChart(titleText, source, opts = {}) {
+	return {
+		...opts,
+		type: "combo",
+		title: { text: titleText },
+		dataSource: source,
+		dataSetStyles: {},
+		legendPosition: "top",
+		humanize: true
+	};
+}
+function bubbleChart(titleText, xRange, yRanges, sizeRange, labelRange, dataSetsHaveTitle) {
+	return {
+		type: "bubble",
+		title: { text: titleText },
+		humanize: true,
+		dataSetsHaveTitle,
+		yRanges,
+		xRange,
+		sizeRange,
+		labelRange,
+		labelsAsText: false,
+		legendPosition: "none",
+		bubbleColor: { color: "multiple" },
+		verticalAxisPosition: "left"
+	};
+}
+function scorecardChart(titleText, keyValue, opts = {}) {
+	return {
+		...opts,
+		type: "scorecard",
+		title: { text: titleText },
+		keyValue,
+		baselineMode: opts.baselineMode ?? "difference",
+		baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
+		baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
+		humanize: opts.humanize ?? true
+	};
+}
+function gaugeChart(titleText, dataRange, rangeMin, rangeMax) {
+	return {
+		type: "gauge",
+		title: { text: titleText },
+		dataRange,
+		sectionRule: {
+			colors: {
+				lowerColor: DEFAULT_GAUGE_LOWER_COLOR,
+				middleColor: DEFAULT_GAUGE_MIDDLE_COLOR,
+				upperColor: DEFAULT_GAUGE_UPPER_COLOR
+			},
+			rangeMin,
+			rangeMax,
+			lowerInflectionPoint: {
+				type: "percentage",
+				value: "33",
+				operator: "<="
+			},
+			upperInflectionPoint: {
+				type: "percentage",
+				value: "66",
+				operator: "<="
+			}
+		},
+		humanize: true
+	};
+}
+/** Pattern A — Single numeric column */
+const SINGLE_NUMBER_COLUMN_SUGGESTIONS = [
+	{
+		description: _t("Highlights the most recent value compared to the previous one."),
+		isApplicable: ({ rowCount }) => rowCount < 3,
+		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
+			baseline: ctx.prevCellXC,
+			baselineMode: "difference"
+		})
+	},
+	{
+		description: _t("Shows the position of the last value within the data's min-max range."),
+		isApplicable: ({ rowCount }) => rowCount === 3,
+		build: (ctx) => gaugeChart(ctx.title, ctx.lastCellXC, `=${ctx.firstCellXC}`, `=${ctx.prevCellXC}`)
+	},
+	{
+		description: _t("Compares individual values side-by-side."),
+		isApplicable: ({ rowCount }) => rowCount > 1,
+		build: (ctx) => barChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Shows the evolution of all values over the range."),
+		isApplicable: ({ rowCount }) => rowCount > 2,
+		build: (ctx) => lineChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Emphasizes total accumulation over the range."),
+		isApplicable: ({ rowCount }) => rowCount > 2,
+		build: (ctx) => lineChart(ctx.title, ctx.source, {
+			fillArea: true,
+			cumulative: true
+		})
+	}
+];
+/** Pattern B — Single percentage column */
+const SINGLE_PERCENTAGE_COLUMN_SUGGESTIONS = [
+	{
+		description: _t("Shows the last percentage value with its baseline."),
+		isApplicable: ({ rowCount }) => rowCount < 3,
+		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
+			baseline: ctx.prevCellXC,
+			baselineMode: "percentage"
+		})
+	},
+	{
+		description: _t("Natural fit for a 0–100% range."),
+		isApplicable: ({ rowCount }) => rowCount === 1,
+		build: (ctx) => gaugeChart(ctx.title, ctx.lastCellXC, "0", ctx.isAboveOne ? "100" : "1")
+	},
+	{
+		description: _t("Natural fit for a 0–100% range."),
+		isApplicable: ({ rowCount }) => rowCount === 3,
+		build: (ctx) => gaugeChart(ctx.title, ctx.lastCellXC, `=${ctx.firstCellXC}`, `=${ctx.prevCellXC}`)
+	},
+	{
+		description: _t("Shows completion against total."),
+		isApplicable: ({ rowCount }) => rowCount > 1,
+		build: (ctx) => pieChart(ctx.title, ctx.source, { isDoughnut: true })
+	},
+	{
+		description: _t("Compares all percentage values side-by-side."),
+		isApplicable: ({ rowCount }) => rowCount > 1,
+		build: (ctx) => barChart(ctx.title, ctx.source)
+	}
+];
+/** Pattern C — Single date column */
+const SINGLE_DATE_COLUMN_SUGGESTIONS = [{
+	description: _t("Shows the last date value."),
+	isApplicable: ({ rowCount }) => rowCount === 1,
+	build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC)
+}];
+/** Pattern D — Single categorical column */
+const SINGLE_CATEGORICAL_COLUMN_SUGGESTIONS = [
+	{
+		description: _t("Shows the share of each category."),
+		build: (ctx) => pieChart(ctx.title, ctx.source, {
+			aggregated: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Same as pie, cleaner proportional look."),
+		build: (ctx) => pieChart(ctx.title, ctx.source, {
+			aggregated: true,
+			isDoughnut: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Absolute count per category."),
+		build: (ctx) => barChart(ctx.title, {
+			...ctx.source,
+			labelRange: ctx.range
+		}, {
+			legendPosition: "none",
+			aggregated: true
+		})
+	}
+];
+/** Pattern E — Single label column */
+const SINGLE_LABEL_COLUMN_SUGGESTIONS = [{
+	description: _t("Displays a key performance indicator."),
+	isApplicable: ({ rowCount }) => rowCount === 1,
+	build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
+		baselineMode: "text",
+		humanize: false
+	})
+}];
+/** Pattern F — Categorical + Number */
+const CATEGORICAL_VS_NUMBER_SUGGESTIONS = [
+	{
+		description: _t("Classic category-vs-value comparison."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { aggregated: true })
+	},
+	{
+		description: _t("Better when category labels are long."),
+		build: (ctx) => barChart(ctx.title, ctx.source, {
+			horizontal: true,
+			aggregated: true
+		})
+	},
+	{
+		description: _t("Share of total per category."),
+		build: (ctx) => pieChart(ctx.title, ctx.source, {
+			legendPosition: "top",
+			aggregated: true
+		})
+	},
+	{
+		description: _t("Proportional area — good for many categories."),
+		build: (ctx) => treemapChart(ctx.title, ctx.treemapSource)
+	}
+];
+/** Patterns G & J — Date + Number or Date + Percentage */
+const DATE_VS_SERIES_SUGGESTIONS = [
+	{
+		description: _t("Best for visualizing time-series trends."),
+		build: (ctx) => lineChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Emphasizes total volume over time."),
+		build: (ctx) => lineChart(ctx.title, ctx.source, {
+			fillArea: true,
+			cumulative: true
+		})
+	},
+	{
+		description: _t("Period-by-period comparison."),
+		build: (ctx) => barChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Shows intensity variation across days of the year."),
+		isApplicable: ({ isPercentage }) => !isPercentage,
+		build: (ctx) => calendarChart(ctx.title, ctx.source)
+	}
+];
+/** Pattern H — Number + Number */
+const NUMBER_VS_NUMBER_SUGGESTIONS = [
+	{
+		description: _t("Highlights the second metric compared to the first one."),
+		isApplicable: ({ rowCount1, rowCount2 }) => rowCount1 === 1 && rowCount2 === 1,
+		build: (ctx) => scorecardChart(ctx.title, ctx.lastCellXC, {
+			baseline: ctx.prevCellXC,
+			baselineMode: "difference"
+		})
+	},
+	{
+		description: _t("Side-by-side comparison of two numeric series."),
+		build: (ctx) => barChart(ctx.title, ctx.sourceBoth, { legendPosition: "top" })
+	},
+	{
+		description: _t("Reveals correlation between two numeric variables."),
+		isApplicable: ({ rowCount1 }) => rowCount1 > 2,
+		build: (ctx) => scatterChart(ctx.title, ctx.source2)
+	},
+	{
+		description: _t("Bar for the first series, line for the second — good for mixed scales."),
+		isApplicable: ({ rowCount1 }) => rowCount1 > 2,
+		build: (ctx) => comboChart(ctx.title, ctx.sourceBoth)
+	},
+	{
+		description: _t("When both metrics contribute to a total."),
+		isApplicable: ({ rowCount1 }) => rowCount1 > 2,
+		build: (ctx) => lineChart(ctx.title, ctx.sourceBoth, {
+			stacked: true,
+			fillArea: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Shape-based comparison when rows represent named entities."),
+		isApplicable: ({ rowCount1 }) => rowCount1 > 2 && rowCount1 <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.sourceBoth, { legendPosition: "top" })
+	}
+];
+/** Pattern I — Categorical + Percentage */
+const CATEGORICAL_VS_PERCENTAGE_SUGGESTIONS = [
+	{
+		description: _t("Vertical comparison of rates per category."),
+		build: (ctx) => barChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Progress-bar style per category."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { horizontal: true })
+	},
+	{
+		description: _t("Share of total percentage across categories."),
+		build: (ctx) => pieChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Comparison of completion rates across categories."),
+		isApplicable: ({ rowCount }) => rowCount > 2 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.source)
+	}
+];
+/** Pattern K — Label + Number */
+const LABEL_VS_NUMBER_SUGGESTIONS = [
+	{
+		description: _t("Highlights the most recent value for the named entity."),
+		isApplicable: ({ rowCount }) => rowCount === 1,
+		build: (ctx) => scorecardChart("", ctx.lastCellXC, {
+			humanize: false,
+			baselineMode: "text",
+			baseline: ctx.prevCellXC
+		})
+	},
+	{
+		description: _t("Vertical comparison across named items."),
+		isApplicable: ({ rowCount }) => rowCount > 1,
+		build: (ctx) => barChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Works well for named entities with long labels."),
+		isApplicable: ({ rowCount }) => rowCount > 1,
+		build: (ctx) => barChart(ctx.title, ctx.source, { horizontal: true })
+	},
+	{
+		description: _t("Share of total per category."),
+		isApplicable: ({ rowCount }) => rowCount > 1 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => pieChart(ctx.title, ctx.source, {
+			legendPosition: "top",
+			aggregated: true
+		})
+	},
+	{
+		description: _t("Shape-based comparison across labeled items."),
+		isApplicable: ({ rowCount }) => rowCount > 2 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.source)
+	}
+];
+/** Pattern M — Categorical + Multiple Numbers */
+const CATEGORICAL_VS_MULTIPLE_NUMBERS_SUGGESTIONS = [
+	{
+		description: _t("Side-by-side comparison across categories for each series."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Shows composition and total per category."),
+		build: (ctx) => barChart(ctx.title, ctx.source, {
+			stacked: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Trend per series across categories."),
+		build: (ctx) => lineChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Volume and composition across categories."),
+		build: (ctx) => lineChart(ctx.title, ctx.source, {
+			stacked: true,
+			fillArea: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Shape comparison across metrics (best for ≤ 10 rows)."),
+		isApplicable: ({ rowCount }) => rowCount > 2 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.source, { legendPosition: "top" })
+	}
+];
+/** Pattern N — Date + Multiple Numbers */
+const DATE_VS_MULTIPLE_NUMBERS_SUGGESTIONS = [
+	{
+		description: _t("Trend comparison across multiple metrics over time."),
+		build: (ctx) => lineChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Volume composition over time."),
+		build: (ctx) => lineChart(ctx.title, ctx.source, {
+			stacked: true,
+			fillArea: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Bar for the primary metric, line for the others."),
+		build: (ctx) => comboChart(ctx.title, ctx.source)
+	},
+	{
+		description: _t("Period-by-period grouped comparison."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { legendPosition: "top" })
+	}
+];
+/** Pattern O — Categorical + Categorical + Number */
+const MULTIPLE_CATEGORICALS_VS_NUMBER_SUGGESTIONS = [
+	{
+		description: _t("Two-level hierarchy weighted by value."),
+		build: (ctx) => sunburstChart(ctx.title, ctx.hierarchySource)
+	},
+	{
+		description: _t("Proportional nested area weighted by value."),
+		build: (ctx) => treemapChart(ctx.title, ctx.hierarchySource)
+	},
+	{
+		description: _t("One series per inner category, grouped by outer category."),
+		build: (ctx) => barChart(ctx.title, ctx.barSource, { legendPosition: "top" })
+	},
+	{
+		description: _t("Contribution of inner categories per outer category."),
+		build: (ctx) => barChart(ctx.title, ctx.barSource, {
+			stacked: true,
+			legendPosition: "top"
+		})
+	}
+];
+/** Pattern P — Categorical + Date + Number */
+const CATEGORICAL_DATE_NUMBER_SUGGESTIONS = [
+	{
+		description: _t("Trend of values over time."),
+		build: (ctx) => lineChart(ctx.title, ctx.sourceByDate, { legendPosition: "top" })
+	},
+	{
+		description: _t("Volume contribution over time."),
+		build: (ctx) => lineChart(ctx.title, ctx.sourceByDate, {
+			stacked: true,
+			fillArea: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Period × category side-by-side comparison."),
+		build: (ctx) => barChart(ctx.title, ctx.sourceByCat, { legendPosition: "top" })
+	},
+	{
+		description: _t("Composition per period over time."),
+		build: (ctx) => barChart(ctx.title, ctx.sourceByDate, {
+			stacked: true,
+			legendPosition: "top"
+		})
+	}
+];
+/** Pattern Q — Label + Multiple Numbers */
+const LABEL_VS_MULTIPLE_NUMBERS_SUGGESTIONS = [
+	{
+		description: _t("Side-by-side per entity — works well for long labels."),
+		build: (ctx) => barChart(ctx.title, ctx.source, {
+			horizontal: true,
+			legendPosition: "top"
+		})
+	},
+	{
+		description: _t("Grouped bars per entity for direct metric comparison."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Shape/profile comparison across metrics for each entity."),
+		isApplicable: ({ rowCount }) => rowCount > 2 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Correlation between the two numeric metrics across entities."),
+		isApplicable: ({ rowCount, numColsCount }) => rowCount > 2 && numColsCount === 2,
+		build: (ctx) => scatterChart(ctx.title, ctx.scatterSource)
+	},
+	{
+		description: _t("Three metrics in one view: X position, Y position and bubble size."),
+		isApplicable: ({ numColsCount }) => numColsCount === 3,
+		build: (ctx) => {
+			const bubble = ctx.bubble;
+			return bubbleChart(ctx.title, bubble.xRange, bubble.yRanges, bubble.sizeRange, bubble.labelRange, bubble.hasTitle);
+		}
+	}
+];
+/** Pattern R — Categorical + Two Numbers (Population Pyramid or Grouped) */
+const CATEGORICAL_TWO_NUMBERS_SUGGESTIONS = [
+	{
+		description: _t("Natural fit for symmetric or opposing values per category."),
+		isApplicable: ({ isPyramid }) => isPyramid,
+		build: (ctx) => pyramidChart(ctx.title, ctx.sourceBoth)
+	},
+	{
+		description: _t("Side-by-side comparison of both metrics per category."),
+		build: (ctx) => barChart(ctx.title, ctx.sourceBoth, {
+			legendPosition: "top",
+			aggregated: true
+		})
+	},
+	{
+		description: _t("Bar for the first series, line for the second — good for mixed scales."),
+		build: (ctx) => comboChart(ctx.title, ctx.sourceBoth, { aggregated: true })
+	},
+	{
+		description: _t("Shows total and composition per category."),
+		isApplicable: ({ isPyramid }) => !isPyramid,
+		build: (ctx) => barChart(ctx.title, ctx.sourceBoth, {
+			stacked: true,
+			legendPosition: "top",
+			aggregated: true
+		})
+	}
+];
+/** Pattern S — Many Numbers (3+ numeric columns, no categorical/date) */
+const MANY_NUMBERS_SUGGESTIONS = [
+	{
+		description: _t("Shows the position of the last value within the data's min-max range."),
+		isApplicable: ({ colsLength, rowCount }) => colsLength === 3 && rowCount === 1,
+		build: (ctx) => gaugeChart(ctx.title, ctx.lastCellXC, `=${ctx.firstCellXC}`, `=${ctx.secondCellXC}`)
+	},
+	{
+		description: _t("Trend comparison across all metrics."),
+		isApplicable: ({ rowCount }) => rowCount > 2,
+		build: (ctx) => lineChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Overall shape/profile across all metrics."),
+		isApplicable: ({ rowCount }) => rowCount > 2 && rowCount <= MAX_ROWS_FOR_SHAPE_CHART,
+		build: (ctx) => radarChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Side-by-side comparison of all numeric metrics."),
+		build: (ctx) => barChart(ctx.title, ctx.source, { legendPosition: "top" })
+	},
+	{
+		description: _t("Side-by-side comparison of all numeric metrics."),
+		build: (ctx) => barChart(ctx.title, ctx.source, {
+			legendPosition: "top",
+			stacked: true
+		})
+	}
+];
+
+//#endregion
+//#region src/helpers/figures/charts/chart_suggestion_engine.ts
+const PYRAMID_HEADER_KEYWORD_PATTERNS = [
+	"male",
+	"female",
+	"man",
+	"woman",
+	"boy",
+	"girl",
+	"before",
+	"after",
+	"previous",
+	"current",
+	"positive",
+	"negative",
+	"gain",
+	"loss",
+	"income",
+	"expense",
+	"revenue",
+	"cost"
+].map((keyword) => new RegExp(`\\b${keyword}\\b`, "i"));
+function matchesColumnType(spec, type) {
+	return Array.isArray(spec) ? spec.includes(type) : spec === type;
+}
+function matchesShape(pattern, shape) {
+	const { leadingTypes, extension } = pattern;
+	const expectedLength = leadingTypes.length + (extension?.minSize ?? 0);
+	if (extension ? shape.length < expectedLength : shape.length !== expectedLength) return false;
+	return shape.every((type, i) => {
+		const spec = i < leadingTypes.length ? leadingTypes[i] : extension?.type;
+		return spec !== void 0 && matchesColumnType(spec, type);
+	});
+}
+function isPyramidLike(numCol1, numCol2) {
+	const h1 = numCol1.header ?? "";
+	const h2 = numCol2.header ?? "";
+	return PYRAMID_HEADER_KEYWORD_PATTERNS.some((re) => re.test(h1) || re.test(h2));
+}
+/** Returns the first and last cell XC coordinates, and the second-to-last cell XC coordinate if it exists. */
+function interestingCellsXc(col) {
+	if (!col) return {
+		firstCellXC: "",
+		lastCellXC: "",
+		prevCellXC: void 0
+	};
+	const firstCellPosition = col.nonEmpty.at(0)?.position;
+	const firstCellXC = firstCellPosition ? toXC(firstCellPosition?.col, firstCellPosition?.row) : "";
+	const lastCellPosition = col.nonEmpty.at(-1)?.position;
+	const lastCellXC = lastCellPosition ? toXC(lastCellPosition?.col, lastCellPosition?.row) : "";
+	const prevCellPosition = col.nonEmpty.at(-2)?.position;
+	return {
+		firstCellXC,
+		lastCellXC,
+		prevCellXC: prevCellPosition ? toXC(prevCellPosition?.col, prevCellPosition?.row) : void 0
+	};
+}
+/** Pattern A — Single numeric column */
+function buildSingleNumberContext([col], getters) {
+	const title = col.header ?? _t("Value");
+	const { firstCellXC, lastCellXC, prevCellXC } = interestingCellsXc(col);
+	return {
+		title,
+		source: rangeSource([dataset(col.zone, getters)], col.hasHeader),
+		rowCount: col.rowCount,
+		firstCellXC,
+		lastCellXC,
+		prevCellXC
+	};
+}
+/** Pattern B — Single percentage column */
+function buildSinglePercentageContext([col], getters) {
+	const hasTitle = col.hasHeader;
+	const title = col.header ?? _t("Rate");
+	const { firstCellXC, lastCellXC, prevCellXC } = interestingCellsXc(col);
+	const source = rangeSource([dataset(col.zone, getters)], hasTitle);
+	const isAboveOne = (col.maxValue ?? 0) > 1;
+	return {
+		title,
+		source,
+		rowCount: col.rowCount,
+		firstCellXC,
+		lastCellXC,
+		prevCellXC,
+		isAboveOne
+	};
+}
+/** Pattern C — Single date column */
+function buildSingleDateContext([col]) {
+	const { lastCellXC } = interestingCellsXc(col);
+	return {
+		title: col.header ?? _t("Date"),
+		lastCellXC,
+		rowCount: col.rowCount
+	};
+}
+/** Pattern D — Single categorical column */
+function buildSingleCategoricalContext([col], getters) {
+	const hasTitle = col.hasHeader;
+	const title = col.header ?? _t("Category");
+	const range = getUnboundRange(getters, col.zone);
+	return {
+		title,
+		source: rangeSource([dataset(col.zone, getters)], hasTitle, range),
+		range
+	};
+}
+/** Pattern E — Single label column */
+function buildSingleLabelContext([col]) {
+	const title = col.header ?? _t("Label");
+	const { lastCellXC } = interestingCellsXc(col);
+	return {
+		title,
+		lastCellXC,
+		rowCount: col.rowCount
+	};
+}
+/** Pattern F — Categorical + Number */
+function buildCategoricalVsNumberContext([catCol, numCol], getters) {
+	const labelRange = getUnboundRange(getters, catCol.zone);
+	const hasTitle = numCol.hasHeader;
+	return {
+		title: numCol.header ? _t("%(numberHeader)s by %(categoryHeader)s", {
+			numberHeader: numCol.header,
+			categoryHeader: catCol.header ?? _t("Category")
+		}) : _t("By Category"),
+		source: rangeSource([dataset(numCol.zone, getters)], hasTitle, labelRange),
+		treemapSource: rangeSource([dataset(catCol.zone, getters)], hasTitle, getUnboundRange(getters, numCol.zone))
+	};
+}
+/** Patterns G & J — Date + Number or Date + Percentage */
+function buildDateVsSeriesContext([dateCol, seriesCol], getters) {
+	const isPercentage = seriesCol.type === "percentage";
+	const labelRange = getUnboundRange(getters, dateCol.zone);
+	const hasTitle = isDatasetTitled(getters, dateCol.zone);
+	return {
+		title: seriesCol.header ? _t("%(seriesHeader)s over time", { seriesHeader: seriesCol.header }) : isPercentage ? _t("Rate over Time") : _t("Over Time"),
+		source: rangeSource([dataset(seriesCol.zone, getters)], hasTitle, labelRange),
+		isPercentage
+	};
+}
+/** Pattern H — Number + Number */
+function buildNumberVsNumberContext([col1, col2], getters) {
+	const title = col1.header && col2.header ? _t("%(col2Header)s vs %(col1Header)s", {
+		col2Header: col2.header,
+		col1Header: col1.header
+	}) : _t("Correlation");
+	const hasTitle = col1.hasHeader || col2.hasHeader;
+	const source2 = rangeSource([dataset(col2.zone, getters)], col2.hasHeader, getUnboundRange(getters, col1.zone));
+	const sourceBoth = rangeSource([dataset(col1.zone, getters, "0"), dataset(col2.zone, getters, "1")], hasTitle);
+	const { lastCellXC } = interestingCellsXc(col2);
+	const { lastCellXC: prevCellXC } = interestingCellsXc(col1);
+	return {
+		title,
+		source2,
+		sourceBoth,
+		rowCount1: col1.rowCount,
+		rowCount2: col2.rowCount,
+		lastCellXC,
+		prevCellXC
+	};
+}
+/** Pattern I — Categorical + Percentage */
+function buildCategoricalVsPercentageContext([catCol, pctCol], getters) {
+	const labelRange = getUnboundRange(getters, catCol.zone);
+	const hasTitle = pctCol.hasHeader;
+	return {
+		title: pctCol.header ? _t("%(percentageHeader)s by %(categoryHeader)s", {
+			percentageHeader: pctCol.header,
+			categoryHeader: catCol.header ?? _t("Category")
+		}) : _t("Rates by Category"),
+		source: rangeSource([dataset(pctCol.zone, getters)], hasTitle, labelRange),
+		rowCount: catCol.rowCount
+	};
+}
+/** Pattern K — Label + Number */
+function buildLabelVsNumberContext([labelCol, numCol], getters) {
+	const labelRange = getUnboundRange(getters, labelCol.zone);
+	const hasTitle = numCol.hasHeader;
+	const title = numCol.header ? _t("%(numberHeader)s by %(labelHeader)s", {
+		numberHeader: numCol.header,
+		labelHeader: labelCol.header ?? _t("Name")
+	}) : _t("By Name");
+	const source = rangeSource([dataset(numCol.zone, getters)], hasTitle, labelRange);
+	const { lastCellXC } = interestingCellsXc(numCol);
+	const { lastCellXC: prevCellXC } = interestingCellsXc(labelCol);
+	return {
+		title,
+		source,
+		rowCount: labelCol.rowCount,
+		lastCellXC,
+		prevCellXC
+	};
+}
+/** Pattern M — Categorical + Multiple Numbers */
+function buildCategoricalVsMultipleNumbersContext([catCol, ...numCols], getters) {
+	const labelRange = getUnboundRange(getters, catCol.zone);
+	const hasTitle = numCols.some((c) => c.hasHeader);
+	return {
+		title: catCol.header ? _t("By %(header)s", { header: catCol.header }) : _t("Multi-series"),
+		source: rangeSource(numCols.map((c, i) => dataset(c.zone, getters, String(i))), hasTitle, labelRange),
+		rowCount: catCol.rowCount
+	};
+}
+/** Pattern N — Date + Multiple Numbers */
+function buildDateVsMultipleNumbersContext([dateCol, ...numCols], getters) {
+	const labelRange = getUnboundRange(getters, dateCol.zone);
+	const hasTitle = numCols.some((c) => c.hasHeader) || isDatasetTitled(getters, dateCol.zone);
+	return {
+		title: numCols.length === 1 && numCols[0].header ? _t("%(header)s over time", { header: numCols[0].header }) : _t("Multi-series over Time"),
+		source: rangeSource(numCols.map((c, i) => dataset(c.zone, getters, String(i))), hasTitle, labelRange)
+	};
+}
+/** Pattern O — Categorical + Categorical + Number */
+function buildMultipleCategoricalsVsNumberContext([cat1, cat2, numCol], getters) {
+	const title = numCol.header ? _t("%(numHeader)s by %(cat1Header)s and %(cat2Header)s", {
+		numHeader: numCol.header,
+		cat1Header: cat1.header ?? _t("Level 1"),
+		cat2Header: cat2.header ?? _t("Level 2")
+	}) : _t("Two-level hierarchy");
+	const hasTitle = numCol.hasHeader;
+	return {
+		title,
+		hierarchySource: rangeSource([dataset(cat1.zone, getters, "0"), dataset(cat2.zone, getters, "1")], hasTitle, getUnboundRange(getters, numCol.zone)),
+		barSource: rangeSource([dataset(numCol.zone, getters)], hasTitle, getUnboundRange(getters, cat1.zone))
+	};
+}
+/** Pattern P — Categorical + Date + Number */
+function buildCategoricalDateNumberContext([catCol, dateCol, numCol], getters) {
+	const dateRange = getUnboundRange(getters, dateCol.zone);
+	const catRange = getUnboundRange(getters, catCol.zone);
+	const hasTitle = numCol.hasHeader;
+	return {
+		title: numCol.header ? _t("%(numHeader)s by %(catHeader)s over %(dateHeader)s", {
+			numHeader: numCol.header,
+			catHeader: catCol.header ?? _t("Category"),
+			dateHeader: dateCol.header ?? _t("Time")
+		}) : _t("Multi-series over Time"),
+		sourceByDate: rangeSource([dataset(numCol.zone, getters)], hasTitle, dateRange),
+		sourceByCat: rangeSource([dataset(numCol.zone, getters)], hasTitle, catRange)
+	};
+}
+/** Pattern Q — Label + Multiple Numbers */
+function buildLabelVsMultipleNumbersContext([labelCol, ...numCols], getters) {
+	const labelRange = getUnboundRange(getters, labelCol.zone);
+	const hasTitle = numCols.some((c) => c.hasHeader);
+	const title = labelCol.header ? _t("By %(header)s", { header: labelCol.header }) : _t("Profile Comparison");
+	const source = rangeSource(numCols.map((c, i) => dataset(c.zone, getters, String(i))), hasTitle, labelRange);
+	const scatterSource = rangeSource([dataset(numCols[1].zone, getters)], numCols[1].hasHeader, getUnboundRange(getters, numCols[0].zone));
+	const bubble = numCols.length === 3 ? {
+		xRange: getUnboundRange(getters, numCols[0].zone),
+		yRanges: [getUnboundRange(getters, numCols[1].zone)],
+		sizeRange: getUnboundRange(getters, numCols[2].zone),
+		labelRange,
+		hasTitle
+	} : void 0;
+	return {
+		title,
+		source,
+		rowCount: labelCol.rowCount,
+		numColsCount: numCols.length,
+		scatterSource,
+		bubble
+	};
+}
+/** Pattern R — Categorical + Two Numbers (Population Pyramid or Grouped) */
+function buildCategoricalTwoNumbersContext([catCol, numCol1, numCol2], getters) {
+	const catRange = getUnboundRange(getters, catCol.zone);
+	const hasTitle = numCol1.hasHeader || numCol2.hasHeader;
+	const title = numCol1.header && numCol2.header ? _t("%(num1Header)s vs %(num2Header)s by %(catHeader)s", {
+		num1Header: numCol1.header,
+		num2Header: numCol2.header,
+		catHeader: catCol.header ?? _t("Category")
+	}) : catCol.header ? _t("By %(header)s", { header: catCol.header }) : _t("Category Comparison");
+	const isPyramid = isPyramidLike(numCol1, numCol2);
+	return {
+		title,
+		sourceBoth: rangeSource([dataset(numCol1.zone, getters, "0"), dataset(numCol2.zone, getters, "1")], hasTitle, catRange),
+		isPyramid
+	};
+}
+/** Pattern S — Many Numbers (3+ numeric columns, no categorical/date) */
+function buildManyNumbersContext(cols, getters) {
+	const title = cols.every((c) => c.hasHeader) ? cols.map((c) => c.header).join(" / ") : _t("KPI Overview");
+	const hasTitle = cols.some((c) => c.hasHeader);
+	const source = rangeSource(cols.map((c, i) => dataset(c.zone, getters, String(i))), hasTitle);
+	const { lastCellXC } = interestingCellsXc(cols[2]);
+	const { lastCellXC: firstCellXC } = interestingCellsXc(cols[0]);
+	const { lastCellXC: secondCellXC } = interestingCellsXc(cols[1]);
+	return {
+		title,
+		source,
+		colsLength: cols.length,
+		rowCount: cols[0].rowCount,
+		lastCellXC,
+		firstCellXC,
+		secondCellXC
+	};
+}
+const NUMBER_OR_PERCENTAGE = ["number", "percentage"];
+const EXACT_PATTERNS = [
+	{
+		pattern: { leadingTypes: ["number"] },
+		buildContext: buildSingleNumberContext,
+		suggestions: SINGLE_NUMBER_COLUMN_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["percentage"] },
+		buildContext: buildSinglePercentageContext,
+		suggestions: SINGLE_PERCENTAGE_COLUMN_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["date"] },
+		buildContext: buildSingleDateContext,
+		suggestions: SINGLE_DATE_COLUMN_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["categorical"] },
+		buildContext: buildSingleCategoricalContext,
+		suggestions: SINGLE_CATEGORICAL_COLUMN_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["label"] },
+		buildContext: buildSingleLabelContext,
+		suggestions: SINGLE_LABEL_COLUMN_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["categorical", "number"] },
+		buildContext: buildCategoricalVsNumberContext,
+		suggestions: CATEGORICAL_VS_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["date", NUMBER_OR_PERCENTAGE] },
+		buildContext: buildDateVsSeriesContext,
+		suggestions: DATE_VS_SERIES_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["number", "number"] },
+		buildContext: buildNumberVsNumberContext,
+		suggestions: NUMBER_VS_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["categorical", "percentage"] },
+		buildContext: buildCategoricalVsPercentageContext,
+		suggestions: CATEGORICAL_VS_PERCENTAGE_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["label", "number"] },
+		buildContext: buildLabelVsNumberContext,
+		suggestions: LABEL_VS_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: ["label", "percentage"] },
+		buildContext: buildCategoricalVsPercentageContext,
+		suggestions: CATEGORICAL_VS_PERCENTAGE_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: [
+			"categorical",
+			"categorical",
+			"number"
+		] },
+		buildContext: buildMultipleCategoricalsVsNumberContext,
+		suggestions: MULTIPLE_CATEGORICALS_VS_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: [
+			"categorical",
+			"label",
+			"number"
+		] },
+		buildContext: buildMultipleCategoricalsVsNumberContext,
+		suggestions: MULTIPLE_CATEGORICALS_VS_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: [
+			"categorical",
+			"date",
+			NUMBER_OR_PERCENTAGE
+		] },
+		buildContext: buildCategoricalDateNumberContext,
+		suggestions: CATEGORICAL_DATE_NUMBER_SUGGESTIONS
+	},
+	{
+		pattern: { leadingTypes: [
+			"categorical",
+			NUMBER_OR_PERCENTAGE,
+			NUMBER_OR_PERCENTAGE
+		] },
+		buildContext: buildCategoricalTwoNumbersContext,
+		suggestions: CATEGORICAL_TWO_NUMBERS_SUGGESTIONS
+	}
+];
+const EXTENDABLE_PATTERNS = [
+	{
+		pattern: {
+			leadingTypes: [],
+			extension: {
+				type: NUMBER_OR_PERCENTAGE,
+				minSize: 3
+			}
+		},
+		buildContext: buildManyNumbersContext,
+		suggestions: MANY_NUMBERS_SUGGESTIONS
+	},
+	{
+		pattern: {
+			leadingTypes: ["label"],
+			extension: {
+				type: NUMBER_OR_PERCENTAGE,
+				minSize: 2
+			}
+		},
+		buildContext: buildLabelVsMultipleNumbersContext,
+		suggestions: LABEL_VS_MULTIPLE_NUMBERS_SUGGESTIONS
+	},
+	{
+		pattern: {
+			leadingTypes: ["categorical"],
+			extension: {
+				type: NUMBER_OR_PERCENTAGE,
+				minSize: 2
+			}
+		},
+		buildContext: buildCategoricalVsMultipleNumbersContext,
+		suggestions: CATEGORICAL_VS_MULTIPLE_NUMBERS_SUGGESTIONS
+	},
+	{
+		pattern: {
+			leadingTypes: ["date"],
+			extension: {
+				type: NUMBER_OR_PERCENTAGE,
+				minSize: 2
+			}
+		},
+		buildContext: buildDateVsMultipleNumbersContext,
+		suggestions: DATE_VS_MULTIPLE_NUMBERS_SUGGESTIONS
+	}
+];
+function getChartSuggestions(zones, getters) {
+	const cols = analyzeColumns(zones, getters);
+	if (cols.some((c) => c.type === "error")) return [];
+	const nonEmpty = cols.filter((c) => c.type !== "empty");
+	if (!nonEmpty.length) return [];
+	const shape = nonEmpty.map((c) => c.type);
+	const rule = EXACT_PATTERNS.find((rule) => matchesShape(rule.pattern, shape)) ?? EXTENDABLE_PATTERNS.find((rule) => matchesShape(rule.pattern, shape));
+	if (!rule) return [];
+	const ctx = rule.buildContext(nonEmpty, getters);
+	return rule.suggestions.filter((suggestion) => suggestion.isApplicable?.(ctx) ?? true).map((suggestion) => ({
+		description: suggestion.description.toString(),
+		definition: suggestion.build(ctx)
+	}));
+}
+
+//#endregion
+//#region src/components/side_panel/data_analysis/data_analysis_store.ts
+var DataAnalysisStore = class extends SpreadsheetStore {
+	mutators = [];
+	hasData = false;
+	chartSuggestions = [];
+	isDirty = false;
+	ranges;
+	constructor(get) {
+		super(get);
+		this.model.selection.observe(this, { handleEvent: () => this.refresh() });
+		this.onDispose(() => {
+			this.model.selection.unobserve(this);
+		});
+		this.refresh();
+	}
+	handle(cmd) {
+		if (invalidateEvaluationCommands.has(cmd.type) || cmd.type === "UPDATE_CELL" && ("content" in cmd || "format" in cmd)) this.isDirty = true;
+		switch (cmd.type) {
+			case "HIDE_COLUMNS_ROWS":
+			case "UNHIDE_COLUMNS_ROWS":
+			case "GROUP_HEADERS":
+			case "UNGROUP_HEADERS":
+			case "ACTIVATE_SHEET":
+			case "ACTIVATE_NEXT_SHEET":
+			case "ACTIVATE_PREVIOUS_SHEET":
+			case "EVALUATE_CELLS":
+			case "SET_FORMATTING":
+			case "CLEAR_FORMATTING":
+				this.isDirty = true;
+				break;
+		}
+	}
+	finalize() {
+		if (this.isDirty) {
+			this.refresh();
+			this.isDirty = false;
+		}
+	}
+	refresh() {
+		const sheetId = this.getters.getActiveSheetId();
+		const zones = this.getters.getSelectedZones();
+		this.ranges = zones.map(zoneToXc);
+		this.hasData = zones.some((zone) => this.getters.getEvaluatedCellsInZone(sheetId, zone).some((cell) => cell.type !== "empty"));
+		const suggestions = this.hasData ? getChartSuggestions(zones, this.getters) : [];
+		this.chartSuggestions = suggestions;
+	}
+};
+
+//#endregion
+//#region src/components/side_panel/data_analysis/data_analysis_panel.ts
+var DataAnalysisPanel = class extends Component {
+	static template = "o-spreadsheet-DataAnalysisPanel";
+	static components = {
+		Section,
+		ChartSuggestionPreview
+	};
+	store;
+	setup() {
+		this.store = useLocalStore(DataAnalysisStore);
+	}
+	onStartChartSuggestionDrag(definition, ev) {
+		startChartDragAndDrop(this.env, definition, ev);
+	}
+};
+
 //#endregion
 //#region src/registries/data_source_registry.ts
 const unusedDataSourceRegistry = new Registry();
@@ -42220,7 +43745,7 @@ var DataSourcesCleanup = class extends Component {
 var DataValidationPreview = class extends Component {
 	static template = "o-spreadsheet-DataValidationPreview";
 	props = useProps({ rule: types$1.DataValidationRule() });
-	dvPreviewRef = signal(null);
+	dvPreviewRef = signal.ref();
 	setup() {
 		useHighlightsOnHover(this.dvPreviewRef, this);
 	}
@@ -43719,7 +45244,7 @@ var NamedRangePreview = class extends Component {
 	};
 	props = useProps({ namedRange: types$1.NamedRange() });
 	state = proxy({});
-	namedRangePreviewRef = signal(null);
+	namedRangePreviewRef = signal.ref();
 	setup() {
 		useHighlightsOnHover(this.namedRangePreviewRef, this);
 	}
@@ -44210,7 +45735,7 @@ var FilterMenuValueItem = class extends Component {
 		onClick: types$1.function(),
 		scrolledTo: types$1.or([types$1.literal("top"), types$1.literal("bottom")]).optional()
 	});
-	itemRef = signal(null);
+	itemRef = signal.ref();
 	setup() {
 		onWillPatch(() => {
 			if (this.props.scrolledTo) this.scrollListToSelectedValue();
@@ -44450,7 +45975,7 @@ var PivotFilterEditor = class extends Component {
 		onFiltersUpdated: types$1.function()
 	});
 	state;
-	buttonFilter = signal(null);
+	buttonFilter = signal.ref();
 	popover;
 	setup() {
 		useExternalListener(window, "click", (ev) => {
@@ -44579,11 +46104,11 @@ var AddDimensionButton = class extends Component {
 		onFieldPicked: types$1.function(),
 		fields: types$1.array()
 	});
-	buttonRef = signal(null);
+	buttonRef = signal.ref(HTMLButtonElement);
 	popover = proxy({ isOpen: false });
 	search = proxy({ input: "" });
 	autoComplete;
-	autofocusRef = signal(null);
+	autofocusRef = signal.ref(HTMLInputElement);
 	setup() {
 		this.autoComplete = useLocalStore(AutoCompleteStore);
 		this.autoComplete.useProvider(this.getProvider());
@@ -44992,7 +46517,7 @@ var PivotLayoutConfigurator = class extends Component {
 		getScrollableContainerEl: types$1.function().optional(),
 		pivotId: types$1.UID()
 	});
-	dimensionsRef = signal(null);
+	dimensionsRef = signal.ref();
 	dragAndDrop = useDragAndDropListItems();
 	AGGREGATORS = AGGREGATORS;
 	isDateOrDatetimeField = isDateOrDatetimeField;
@@ -45063,16 +46588,7 @@ var PivotLayoutConfigurator = class extends Component {
 		});
 	}
 	getDimensionElementsRects() {
-		return Array.from(this.dimensionsRef().children).map((el) => {
-			const style = getComputedStyle(el);
-			const rect = el.getBoundingClientRect();
-			return {
-				x: rect.x,
-				y: rect.y,
-				width: rect.width + parseInt(style.marginLeft || "0") + parseInt(style.marginRight || "0"),
-				height: rect.height + parseInt(style.marginTop || "0") + parseInt(style.marginBottom || "0")
-			};
-		});
+		return Array.from(this.dimensionsRef().children).map((el) => getBoundingRectWithMargins(el));
 	}
 	removeDimension(dimension) {
 		const { columns, rows } = this.props.definition;
@@ -45637,7 +47153,7 @@ var PivotSpreadsheetSidePanel = class extends Component {
 	});
 	store;
 	state;
-	pivotSidePanelRef = signal(null);
+	pivotSidePanelRef = signal.ref();
 	setup() {
 		this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId);
 		this.state = proxy({
@@ -46877,7 +48393,7 @@ var TableStylePreview = class extends Component {
 		selected: types$1.boolean().optional(),
 		onClick: types$1.function().optional()
 	});
-	canvasRef = signal(null);
+	canvasRef = signal.ref(HTMLCanvasElement);
 	menu = proxy({
 		isOpen: false,
 		anchorRect: null,
@@ -46971,7 +48487,7 @@ var TableStylesPopover = class extends Component {
 		tableStyles: types$1.RecordOf(),
 		type: types$1.or([types$1.literal("table"), types$1.literal("pivot")])
 	});
-	tableStyleListRef = signal(null);
+	tableStyleListRef = signal.ref();
 	state = proxy({ selectedCategory: this.initialSelectedCategory });
 	setup() {
 		useExternalListener(window, "click", this.onExternalClick, { capture: true });
@@ -48342,6 +49858,10 @@ sidePanelRegistry.add("ColumnStats", {
 	title: _t("Column statistics"),
 	Body: ColumnStatsPanel
 });
+sidePanelRegistry.add("DataAnalysisPanel", {
+	title: _t("Data analysis"),
+	Body: DataAnalysisPanel
+});
 sidePanelRegistry.add("TableSidePanel", {
 	title: _t("Edit table"),
 	Body: TablePanel,
@@ -48449,6 +49969,7 @@ var SidePanelStore = class extends SpreadsheetStore {
 		"changePanelSize",
 		"resetPanelSize",
 		"togglePinPanel",
+		"togglePinnedSidePanel",
 		"closeMainPanel",
 		"changeSpreadsheetWidth",
 		"toggleCollapsePanel"
@@ -48600,6 +50121,19 @@ var SidePanelStore = class extends SpreadsheetStore {
 			this.secondaryPanel = void 0;
 		}
 	}
+	togglePinnedSidePanel(componentTag, panelProps = {}) {
+		if (this.mainPanel?.componentTag === componentTag && this.isMainPanelOpen) {
+			this.closeMainPanel();
+			return;
+		}
+		if (this.secondaryPanel?.componentTag === componentTag && this.isSecondaryPanelOpen) {
+			this.secondaryPanel?.currentPanelProps.onCloseSidePanel?.();
+			this.secondaryPanel = void 0;
+			return;
+		}
+		this.open(componentTag, panelProps);
+		if (!this.mainPanel?.isPinned) this.togglePinPanel();
+	}
 	toggleCollapsePanel(panel) {
 		const panelInfo = this[panel];
 		if (!panelInfo) return;
@@ -48978,6 +50512,219 @@ var MenuItemRegistry = class extends Registry {
 	}
 };
 
+//#endregion
+//#region src/helpers/sort_interactive.ts
+function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
+	let multiColumns = zone.right > zone.left;
+	if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
+		multiColumns = false;
+		let table;
+		for (let row = zone.top; row <= zone.bottom; row++) {
+			table = [];
+			for (let col = zone.left; col <= zone.right; col++) {
+				const merge = env.model.getters.getMerge({
+					sheetId,
+					col,
+					row
+				});
+				if (merge && !table.includes(merge.id.toString())) table.push(merge.id.toString());
+			}
+			if (table.length >= 2) {
+				multiColumns = true;
+				break;
+			}
+		}
+	}
+	if (multiColumns) {
+		interactiveSort(env, sheetId, anchor, zone, sortDirection);
+		return;
+	}
+	const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
+	if (isEqual(contiguousZone, zone)) interactiveSort(env, sheetId, anchor, zone, sortDirection);
+	else env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => interactiveSort(env, sheetId, anchor, contiguousZone, sortDirection), () => interactiveSort(env, sheetId, anchor, zone, sortDirection));
+}
+function interactiveSort(env, sheetId, anchor, zone, sortDirection, sortOptions) {
+	const result = env.model.dispatch("SORT_CELLS", {
+		sheetId,
+		col: anchor.col,
+		row: anchor.row,
+		zone,
+		sortDirection,
+		sortOptions
+	});
+	if (result.isCancelledBecause("InvalidSortZone")) {
+		const { col, row } = anchor;
+		env.model.selection.selectZone({
+			cell: {
+				col,
+				row
+			},
+			zone
+		});
+		env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
+	}
+	if (result.isCancelledBecause("SortZoneWithArrayFormulas")) {
+		const { col, row } = anchor;
+		env.model.selection.selectZone({
+			cell: {
+				col,
+				row
+			},
+			zone
+		});
+		env.raiseError(_t("Cannot sort a zone with array formulas."));
+	}
+}
+
+//#endregion
+//#region src/stores/trim_whitespace_store.ts
+var TrimWhitespaceStore = class extends SpreadsheetStore {
+	mutators = ["trimWhitespace"];
+	notificationStore = this.get(NotificationStore);
+	trimWhitespace() {
+		this.model.dispatch("TRIM_WHITESPACE");
+	}
+	handle(cmd) {
+		switch (cmd.type) {
+			case "TRIM_WHITESPACE":
+				this._trimWhitespace();
+				break;
+		}
+	}
+	_trimWhitespace() {
+		const zones = recomputeZones(this.getters.getSelectedZones());
+		const sheetId = this.getters.getActiveSheetId();
+		let count = 0;
+		for (const { col, row } of zones.map(positions).flat()) {
+			const cell = this.getters.getCell({
+				col,
+				row,
+				sheetId
+			});
+			if (!cell) continue;
+			const currentContent = !cell.isFormula ? cell.content : cell.compiledFormula.toFormulaString(this.getters);
+			const trimmedContent = trimContent(currentContent);
+			if (trimmedContent !== currentContent) {
+				count += 1;
+				this.model.dispatch("UPDATE_CELL", {
+					sheetId,
+					col,
+					row,
+					content: trimmedContent
+				});
+			}
+		}
+		const text = count ? _t("Trimmed whitespace from %s cells.", count) : _t("No selected cells had whitespace trimmed.");
+		this.notificationStore.notifyUser({
+			type: "info",
+			text,
+			sticky: false
+		});
+	}
+};
+
+//#endregion
+//#region src/actions/data_actions.ts
+const sortRange = {
+	name: _t("Sort range"),
+	isVisible: IS_ONLY_ONE_RANGE,
+	icon: "o-spreadsheet-Icon.SORT_RANGE"
+};
+const sortAscending = {
+	name: _t("Ascending (A ⟶ Z)"),
+	execute: (env) => {
+		const { anchor, zones } = env.model.getters.getSelection();
+		interactiveSortSelection(env, env.model.getters.getActiveSheetId(), anchor.cell, zones[0], "asc");
+	},
+	icon: "o-spreadsheet-Icon.SORT_ASCENDING"
+};
+const dataCleanup = {
+	name: _t("Data cleanup"),
+	icon: "o-spreadsheet-Icon.DATA_CLEANUP"
+};
+const removeDuplicates = {
+	name: _t("Remove duplicates"),
+	execute: (env) => {
+		if (getZoneArea(env.model.getters.getSelectedZone()) === 1) env.model.selection.selectTableAroundSelection();
+		env.openSidePanel("RemoveDuplicates", {});
+	},
+	isEnabled: (env) => !env.isSmall
+};
+const trimWhitespace = {
+	name: _t("Trim whitespace"),
+	execute: (env) => {
+		env.getStore(TrimWhitespaceStore).trimWhitespace();
+	}
+};
+const cleanupDataSources = {
+	name: _t("Remove unused data sources"),
+	execute: (env) => env.openSidePanel("DataSourceCleanup", {}),
+	isEnabled: (env) => !env.isSmall
+};
+const sortDescending = {
+	name: _t("Descending (Z ⟶ A)"),
+	execute: (env) => {
+		const { anchor, zones } = env.model.getters.getSelection();
+		interactiveSortSelection(env, env.model.getters.getActiveSheetId(), anchor.cell, zones[0], "desc");
+	},
+	icon: "o-spreadsheet-Icon.SORT_DESCENDING"
+};
+const createRemoveFilter = { ...CREATE_OR_REMOVE_FILTER_ACTION };
+const createRemoveFilterTool = {
+	...CREATE_OR_REMOVE_FILTER_ACTION,
+	isActive: (env) => SELECTED_TABLE_HAS_FILTERS(env)
+};
+const splitToColumns = {
+	name: _t("Split text to columns"),
+	sequence: 1,
+	execute: (env) => env.openSidePanel("SplitToColumns", {}),
+	isEnabled: (env) => !env.isSmall && env.model.getters.isSingleColSelected(),
+	icon: "o-spreadsheet-Icon.SPLIT_TEXT"
+};
+const dataAnalysis = {
+	name: _t("Data analysis"),
+	execute: (env) => {
+		env.getStore(SidePanelStore).togglePinnedSidePanel("DataAnalysisPanel");
+	},
+	icon: "o-spreadsheet-Icon.COLUMN_STATS",
+	isEnabled: (env) => !env.isSmall
+};
+const columnStatistics = {
+	name: _t("Column statistics"),
+	execute: (env) => env.openSidePanel("ColumnStats", {}),
+	icon: "o-spreadsheet-Icon.COLUMN_STATS"
+};
+const reinsertDynamicPivotMenu = {
+	id: "reinsert_dynamic_pivot",
+	name: _t("Re-insert dynamic pivot"),
+	sequence: 60,
+	icon: "o-spreadsheet-Icon.INSERT_PIVOT",
+	children: [REINSERT_DYNAMIC_PIVOT_CHILDREN],
+	isVisible: (env) => env.model.getters.getPivotIds().some((id) => env.model.getters.getPivot(id).isValid())
+};
+const reinsertStaticPivotMenu = {
+	id: "reinsert_static_pivot",
+	name: _t("Re-insert static pivot"),
+	sequence: 70,
+	icon: "o-spreadsheet-Icon.INSERT_PIVOT",
+	children: [REINSERT_STATIC_PIVOT_CHILDREN],
+	isVisible: (env) => env.model.getters.getPivotIds().some((id) => env.model.getters.getPivot(id).isValid())
+};
+const calculationMode = {
+	name: _t("Calculation"),
+	icon: "o-spreadsheet-Icon.CALCULATOR"
+};
+const automaticCalculation = {
+	name: _t("Automatic"),
+	execute: (env) => env.model.dispatch("SET_AUTOMATIC_EVALUATION", { enabled: true }),
+	isActive: (env) => env.model.getters.isAutomaticEvaluationEnabled()
+};
+const manualCalculation = {
+	name: _t("Manual"),
+	execute: (env) => env.model.dispatch("SET_AUTOMATIC_EVALUATION", { enabled: false }),
+	isActive: (env) => !env.model.getters.isAutomaticEvaluationEnabled()
+};
+
 //#endregion
 //#region src/helpers/ui/merge_interactive.ts
 const AddMergeInteractiveContent = {
@@ -49192,6 +50939,10 @@ cellMenuRegistry.add("cut", {
 }).addChild("paste_format_only", ["paste_special"], {
 	...pasteSpecialFormat,
 	sequence: 20
+}).add("data_analysis", {
+	...dataAnalysis,
+	sequence: 50,
+	separator: true
 }).add("add_row_before", {
 	...cellInsertRowsBefore,
 	sequence: 70
@@ -49299,211 +51050,6 @@ cellMenuRegistry.add("cut", {
 	sequence: 30
 });
 
-//#endregion
-//#region src/helpers/sort_interactive.ts
-function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
-	let multiColumns = zone.right > zone.left;
-	if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
-		multiColumns = false;
-		let table;
-		for (let row = zone.top; row <= zone.bottom; row++) {
-			table = [];
-			for (let col = zone.left; col <= zone.right; col++) {
-				const merge = env.model.getters.getMerge({
-					sheetId,
-					col,
-					row
-				});
-				if (merge && !table.includes(merge.id.toString())) table.push(merge.id.toString());
-			}
-			if (table.length >= 2) {
-				multiColumns = true;
-				break;
-			}
-		}
-	}
-	if (multiColumns) {
-		interactiveSort(env, sheetId, anchor, zone, sortDirection);
-		return;
-	}
-	const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
-	if (isEqual(contiguousZone, zone)) interactiveSort(env, sheetId, anchor, zone, sortDirection);
-	else env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => interactiveSort(env, sheetId, anchor, contiguousZone, sortDirection), () => interactiveSort(env, sheetId, anchor, zone, sortDirection));
-}
-function interactiveSort(env, sheetId, anchor, zone, sortDirection, sortOptions) {
-	const result = env.model.dispatch("SORT_CELLS", {
-		sheetId,
-		col: anchor.col,
-		row: anchor.row,
-		zone,
-		sortDirection,
-		sortOptions
-	});
-	if (result.isCancelledBecause("InvalidSortZone")) {
-		const { col, row } = anchor;
-		env.model.selection.selectZone({
-			cell: {
-				col,
-				row
-			},
-			zone
-		});
-		env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
-	}
-	if (result.isCancelledBecause("SortZoneWithArrayFormulas")) {
-		const { col, row } = anchor;
-		env.model.selection.selectZone({
-			cell: {
-				col,
-				row
-			},
-			zone
-		});
-		env.raiseError(_t("Cannot sort a zone with array formulas."));
-	}
-}
-
-//#endregion
-//#region src/stores/trim_whitespace_store.ts
-var TrimWhitespaceStore = class extends SpreadsheetStore {
-	mutators = ["trimWhitespace"];
-	notificationStore = this.get(NotificationStore);
-	trimWhitespace() {
-		this.model.dispatch("TRIM_WHITESPACE");
-	}
-	handle(cmd) {
-		switch (cmd.type) {
-			case "TRIM_WHITESPACE":
-				this._trimWhitespace();
-				break;
-		}
-	}
-	_trimWhitespace() {
-		const zones = recomputeZones(this.getters.getSelectedZones());
-		const sheetId = this.getters.getActiveSheetId();
-		let count = 0;
-		for (const { col, row } of zones.map(positions).flat()) {
-			const cell = this.getters.getCell({
-				col,
-				row,
-				sheetId
-			});
-			if (!cell) continue;
-			const currentContent = !cell.isFormula ? cell.content : cell.compiledFormula.toFormulaString(this.getters);
-			const trimmedContent = trimContent(currentContent);
-			if (trimmedContent !== currentContent) {
-				count += 1;
-				this.model.dispatch("UPDATE_CELL", {
-					sheetId,
-					col,
-					row,
-					content: trimmedContent
-				});
-			}
-		}
-		const text = count ? _t("Trimmed whitespace from %s cells.", count) : _t("No selected cells had whitespace trimmed.");
-		this.notificationStore.notifyUser({
-			type: "info",
-			text,
-			sticky: false
-		});
-	}
-};
-
-//#endregion
-//#region src/actions/data_actions.ts
-const sortRange = {
-	name: _t("Sort range"),
-	isVisible: IS_ONLY_ONE_RANGE,
-	icon: "o-spreadsheet-Icon.SORT_RANGE"
-};
-const sortAscending = {
-	name: _t("Ascending (A ⟶ Z)"),
-	execute: (env) => {
-		const { anchor, zones } = env.model.getters.getSelection();
-		interactiveSortSelection(env, env.model.getters.getActiveSheetId(), anchor.cell, zones[0], "asc");
-	},
-	icon: "o-spreadsheet-Icon.SORT_ASCENDING"
-};
-const dataCleanup = {
-	name: _t("Data cleanup"),
-	icon: "o-spreadsheet-Icon.DATA_CLEANUP"
-};
-const removeDuplicates = {
-	name: _t("Remove duplicates"),
-	execute: (env) => {
-		if (getZoneArea(env.model.getters.getSelectedZone()) === 1) env.model.selection.selectTableAroundSelection();
-		env.openSidePanel("RemoveDuplicates", {});
-	},
-	isEnabled: (env) => !env.isSmall
-};
-const trimWhitespace = {
-	name: _t("Trim whitespace"),
-	execute: (env) => {
-		env.getStore(TrimWhitespaceStore).trimWhitespace();
-	}
-};
-const cleanupDataSources = {
-	name: _t("Remove unused data sources"),
-	execute: (env) => env.openSidePanel("DataSourceCleanup", {}),
-	isEnabled: (env) => !env.isSmall
-};
-const sortDescending = {
-	name: _t("Descending (Z ⟶ A)"),
-	execute: (env) => {
-		const { anchor, zones } = env.model.getters.getSelection();
-		interactiveSortSelection(env, env.model.getters.getActiveSheetId(), anchor.cell, zones[0], "desc");
-	},
-	icon: "o-spreadsheet-Icon.SORT_DESCENDING"
-};
-const createRemoveFilter = { ...CREATE_OR_REMOVE_FILTER_ACTION };
-const createRemoveFilterTool = {
-	...CREATE_OR_REMOVE_FILTER_ACTION,
-	isActive: (env) => SELECTED_TABLE_HAS_FILTERS(env)
-};
-const splitToColumns = {
-	name: _t("Split text to columns"),
-	sequence: 1,
-	execute: (env) => env.openSidePanel("SplitToColumns", {}),
-	isEnabled: (env) => !env.isSmall && env.model.getters.isSingleColSelected(),
-	icon: "o-spreadsheet-Icon.SPLIT_TEXT"
-};
-const columnStatistics = {
-	name: _t("Column statistics"),
-	execute: (env) => env.openSidePanel("ColumnStats", {}),
-	icon: "o-spreadsheet-Icon.COLUMN_STATS"
-};
-const reinsertDynamicPivotMenu = {
-	id: "reinsert_dynamic_pivot",
-	name: _t("Re-insert dynamic pivot"),
-	sequence: 60,
-	icon: "o-spreadsheet-Icon.INSERT_PIVOT",
-	children: [REINSERT_DYNAMIC_PIVOT_CHILDREN],
-	isVisible: (env) => env.model.getters.getPivotIds().some((id) => env.model.getters.getPivot(id).isValid())
-};
-const reinsertStaticPivotMenu = {
-	id: "reinsert_static_pivot",
-	name: _t("Re-insert static pivot"),
-	sequence: 70,
-	icon: "o-spreadsheet-Icon.INSERT_PIVOT",
-	children: [REINSERT_STATIC_PIVOT_CHILDREN],
-	isVisible: (env) => env.model.getters.getPivotIds().some((id) => env.model.getters.getPivot(id).isValid())
-};
-const calculationMode = {
-	name: _t("Calculation"),
-	icon: "o-spreadsheet-Icon.CALCULATOR"
-};
-const automaticCalculation = {
-	name: _t("Automatic"),
-	execute: (env) => env.model.dispatch("SET_AUTOMATIC_EVALUATION", { enabled: true }),
-	isActive: (env) => env.model.getters.isAutomaticEvaluationEnabled()
-};
-const manualCalculation = {
-	name: _t("Manual"),
-	execute: (env) => env.model.dispatch("SET_AUTOMATIC_EVALUATION", { enabled: false }),
-	isActive: (env) => !env.model.getters.isAutomaticEvaluationEnabled()
-};
-
 //#endregion
 //#region src/registries/menus/col_menu_registry.ts
 const colMenuRegistry = new MenuItemRegistry();
@@ -49537,6 +51083,9 @@ colMenuRegistry.add("cut", {
 }).addChild("sort_descending", ["sort_columns"], {
 	...sortDescending,
 	sequence: 20
+}).add("data_analysis", {
+	...dataAnalysis,
+	sequence: 55
 }).add("column_statistics", {
 	...columnStatistics,
 	sequence: 60,
@@ -52352,14 +53901,15 @@ var FiguresContainer = class extends Component {
 		selectedRect: void 0,
 		horizontalSnap: void 0,
 		verticalSnap: void 0,
-		cancelDnd: void 0,
-		overlappingChartOrCarousel: void 0
+		cancelDnd: void 0
 	});
 	viewStore;
 	zoomStore;
+	chartDragStore;
 	setup() {
 		this.viewStore = useStore(ViewportsStore);
 		this.zoomStore = useStore(ZoomStore);
+		this.chartDragStore = useStore(ChartDragStore);
 		onMounted(() => {
 			this.render();
 		});
@@ -52373,7 +53923,7 @@ var FiguresContainer = class extends Component {
 				this.dnd.selectedRect = void 0;
 				this.dnd.horizontalSnap = void 0;
 				this.dnd.verticalSnap = void 0;
-				this.dnd.overlappingChartOrCarousel = void 0;
+				this.chartDragStore.setHighlightedFigure(void 0);
 				this.dnd.cancelDnd = void 0;
 			}
 		});
@@ -52499,6 +54049,7 @@ var FiguresContainer = class extends Component {
 			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) => {
 			const currentMousePosition = {
 				x: ev.clientX / zoom,
@@ -52510,10 +54061,10 @@ var FiguresContainer = class extends Component {
 			hasStartedDnd = true;
 			const selectedFigures = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigures, maxDimensions, initialScrollPosition, this.viewStore.activeSheetScrollInfo);
 			const draggedFigure = selectedFigures.find((f) => f.id === draggedFigureId);
-			let overlappingChartOrCarousel = void 0;
+			overlappingChartOrCarousel = void 0;
 			const otherFigures = this.getOtherFigures(selectedFigures.map((f) => f.id));
-			if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingChartOrCarousel = this.getOverlappingFigure(draggedFigure, otherFigures);
-			this.dnd.overlappingChartOrCarousel = overlappingChartOrCarousel;
+			if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingChartOrCarousel = getCarouselOverlappingChart(draggedFigure, otherFigures, ["carousel", "chart"]);
+			this.chartDragStore.setHighlightedFigure(overlappingChartOrCarousel?.id);
 			if (!overlappingChartOrCarousel) {
 				const snapReturn = snapForMove(this.env, selectedFigures, otherFigures);
 				this.dnd.selectedFigures = snapReturn.snappedFigures;
@@ -52535,7 +54086,7 @@ var FiguresContainer = class extends Component {
 				else this.env.model.dispatch("SELECT_FIGURE", { figureId: figureUI.id });
 				return;
 			}
-			if (!this.dnd.overlappingChartOrCarousel) {
+			if (!overlappingChartOrCarousel) {
 				const payloads = this.dnd.selectedFigures?.map((f) => {
 					return {
 						sheetId,
@@ -52545,14 +54096,14 @@ var FiguresContainer = class extends Component {
 				}) || [];
 				this.env.model.dispatch("MOVE_FIGURES", { figures: payloads });
 			} else {
-				const overlappingFigureId = this.dnd.overlappingChartOrCarousel.id;
+				const overlappingFigureId = overlappingChartOrCarousel.id;
 				const chartFigureIds = this.dnd.selectedFigures?.map((f) => f.id) || [];
-				if (this.dnd.overlappingChartOrCarousel.tag === "carousel") this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
+				if (overlappingChartOrCarousel.tag === "carousel") this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
 					sheetId,
 					carouselFigureId: overlappingFigureId,
 					chartFigureIds
 				});
-				else if (this.dnd.overlappingChartOrCarousel.tag === "chart") this.env.model.dispatch("MERGE_CHART_FIGURES_INTO_CAROUSEL", {
+				else if (overlappingChartOrCarousel.tag === "chart") this.env.model.dispatch("MERGE_CHART_FIGURES_INTO_CAROUSEL", {
 					sheetId,
 					baseFigureId: overlappingFigureId,
 					chartFigureIds: [overlappingFigureId, ...chartFigureIds]
@@ -52563,7 +54114,7 @@ var FiguresContainer = class extends Component {
 			this.dnd.selectedRect = void 0;
 			this.dnd.horizontalSnap = void 0;
 			this.dnd.verticalSnap = void 0;
-			this.dnd.overlappingChartOrCarousel = void 0;
+			this.chartDragStore.setHighlightedFigure(void 0);
 		};
 		this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 	}
@@ -52619,7 +54170,6 @@ var FiguresContainer = class extends Component {
 			this.dnd.selectedRect = void 0;
 			this.dnd.horizontalSnap = void 0;
 			this.dnd.verticalSnap = void 0;
-			this.dnd.overlappingChartOrCarousel = void 0;
 		};
 		this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 	}
@@ -52629,12 +54179,12 @@ var FiguresContainer = class extends Component {
 	getFigureStyle(figureUI) {
 		if (figureUI.id !== this.dnd.draggedFigure?.id) return "";
 		return cssPropertiesToCss({
-			opacity: this.dnd.overlappingChartOrCarousel?.id ? "0.6" : "0.9",
+			opacity: this.chartDragStore.highlightedFigureId ? "0.6" : "0.9",
 			cursor: "grabbing"
 		});
 	}
 	getFigureClass(figureUI) {
-		if (figureUI.id !== this.dnd.overlappingChartOrCarousel?.id) return "";
+		if (figureUI.id !== this.chartDragStore.highlightedFigureId) return "";
 		return "o-add-to-carousel";
 	}
 	getSnap(snapLine) {
@@ -52677,26 +54227,6 @@ var FiguresContainer = class extends Component {
 			height: `100%`
 		});
 	}
-	getOverlappingFigure(figureUI, otherFigures) {
-		if (figureUI.tag !== "chart") return;
-		const figureCenterX = figureUI.x + figureUI.width / 2;
-		const figureCenterY = figureUI.y + figureUI.height / 2;
-		let bestMatch;
-		let smallestDistance = Infinity;
-		for (const figure of otherFigures) {
-			if (figure.tag !== "chart" && figure.tag !== "carousel") continue;
-			const targetCenterX = figure.x + figure.width / 2;
-			const targetCenterY = figure.y + figure.height / 2;
-			const distanceX = Math.abs(figureCenterX - targetCenterX);
-			const distanceY = Math.abs(figureCenterY - targetCenterY);
-			const squaredDistance = distanceX ** 2 + distanceY ** 2;
-			if (distanceX <= figureUI.width / 2 && distanceY <= figureUI.height / 2 && squaredDistance < smallestDistance) {
-				smallestDistance = squaredDistance;
-				bestMatch = figure;
-			}
-		}
-		return bestMatch;
-	}
 };
 
 //#endregion
@@ -52996,7 +54526,7 @@ var AbstractResizer = class extends Component {
 var ColResizer = class extends AbstractResizer {
 	static template = "o-spreadsheet-ColResizer";
 	static components = { UnhideColumnHeaders };
-	colResizerRef = signal(null);
+	colResizerRef = signal.ref();
 	setup() {
 		super.setup();
 		this.PADDING = 15;
@@ -53130,7 +54660,7 @@ var ColResizer = class extends AbstractResizer {
 var RowResizer = class extends AbstractResizer {
 	static template = "o-spreadsheet-RowResizer";
 	static components = { UnhideRowHeaders };
-	rowResizerRef = signal(null);
+	rowResizerRef = signal.ref();
 	setup() {
 		super.setup();
 		this.PADDING = 5;
@@ -53739,9 +55269,8 @@ var TableResizer = class extends Component {
 		useStore(TableResizeStore);
 	}
 	get containerStyle() {
-		const tableZone = this.props.table.range.zone;
 		const sheetId = this.props.table.range.sheetId;
-		if (this.env.model.getters.isReadonly() || this.env.model.getters.isSheetLocked(sheetId)) return cssPropertiesToCss({ display: "none" });
+		const tableZone = this.props.table.range.zone;
 		const bottomRight = {
 			...tableZone,
 			left: tableZone.right,
@@ -53828,8 +55357,8 @@ var Grid = class extends Component {
 	HEADER_HEIGHT = 26;
 	HEADER_WIDTH = 48;
 	menuState;
-	gridRef = signal(null);
-	canvasRef = signal(null);
+	gridRef = signal.ref();
+	canvasRef = signal.ref(HTMLCanvasElement);
 	highlightStore;
 	viewStore;
 	zoomStore;
@@ -54460,6 +55989,9 @@ var Grid = class extends Component {
 		const sheetId = this.env.model.getters.getActiveSheetId();
 		return this.env.model.getters.getClientsToDisplay(sheetId);
 	}
+	get displayTableResizer() {
+		return this.env.model.getters.isGridSelectionActive() && !this.env.model.getters.isReadonly() && !this.env.model.getters.isSheetLocked(this.env.model.getters.getActiveSheetId());
+	}
 };
 
 //#endregion
@@ -54478,7 +56010,7 @@ var FullScreenFigure = class extends Component {
 	static template = "o-spreadsheet-FullScreenFigure";
 	static components = { ChartFigure };
 	fullScreenFigureStore;
-	fullScreenFigureRef = signal(null);
+	fullScreenFigureRef = signal.ref();
 	spreadsheetRect = useSpreadsheetRect();
 	figureRegistry = figureRegistry;
 	setup() {
@@ -54726,6 +56258,41 @@ var PivotHTMLRenderer = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/components/tables/hovered_table_store.ts
+var HoveredTableStore = class extends SpreadsheetStore {
+	mutators = ["hover"];
+	storeGetters = ["getCellHoverOverlayColor"];
+	position;
+	constructor(get) {
+		super(get);
+		const cellHoverOverlayStore = this.get(CellHoverOverlayStore);
+		cellHoverOverlayStore.register(this);
+		this.onDispose(() => cellHoverOverlayStore.unRegister(this));
+	}
+	getHighlightedPositions(hoveredPosition) {
+		const highlightedPositions = [];
+		const { sheetId, row } = hoveredPosition;
+		const table = this.getters.getTable(hoveredPosition);
+		if (!table) return highlightedPositions;
+		const { left, right, top } = table.range.zone;
+		const isTableHeader = row < top + table.config.numberOfHeaders;
+		const doesTableRowHaveContent = range(left, right + 1).some((col) => {
+			return !this.getters.isColHidden(sheetId, col) && this.getters.getEvaluatedCell({
+				sheetId,
+				col,
+				row
+			}).formattedValue;
+		});
+		if (!isTableHeader && doesTableRowHaveContent) for (let col = left; col <= right; col++) highlightedPositions.push({
+			sheetId,
+			col,
+			row
+		});
+		return highlightedPositions;
+	}
+};
+
 //#endregion
 //#region src/helpers/figures/charts/runtime/helpers_index.ts
 var helpers_index_exports = /* @__PURE__ */ __exportAll({
@@ -67828,6 +69395,12 @@ var FigureUIPlugin = class extends UIPlugin {
 				const figures = cmd.chartFigureIds.map((id) => this.getters.getFigure(cmd.sheetId, id));
 				const baseFigureId = this.getters.getFigure(cmd.sheetId, cmd.baseFigureId);
 				if (figures.some((f) => f === void 0 || f.tag !== "chart") || !baseFigureId || baseFigureId.tag !== "chart") return "FigureDoesNotExist";
+				break;
+			case "CREATE_CHART_AND_MERGE_INTO_CAROUSEL":
+				const baseFigure = this.getters.getFigure(cmd.sheetId, cmd.baseFigureId);
+				if (this.getters.getFigure(cmd.sheetId, cmd.figureId) || !baseFigure) return "InvalidFigureId";
+				if (baseFigure.tag !== "chart") return "FigureDoesNotExist";
+				break;
 		}
 		return "Success";
 	}
@@ -67863,6 +69436,29 @@ var FigureUIPlugin = class extends UIPlugin {
 					carouselFigureId,
 					chartFigureIds: cmd.chartFigureIds
 				});
+				break;
+			case "CREATE_CHART_AND_MERGE_INTO_CAROUSEL":
+				const baseFigureToMerge = this.getters.getFigure(cmd.sheetId, cmd.baseFigureId);
+				if (!baseFigureToMerge) throw new Error(`Figure ${cmd.baseFigureId} does not exists.`);
+				this.dispatch("CREATE_CHART", {
+					chartId: cmd.chartId,
+					figureId: cmd.figureId,
+					sheetId: cmd.sheetId,
+					definition: cmd.definition,
+					col: baseFigureToMerge.col,
+					row: baseFigureToMerge.row,
+					offset: baseFigureToMerge.offset,
+					size: {
+						width: baseFigureToMerge.width,
+						height: baseFigureToMerge.height
+					}
+				});
+				this.dispatch("MERGE_CHART_FIGURES_INTO_CAROUSEL", {
+					sheetId: cmd.sheetId,
+					baseFigureId: cmd.baseFigureId,
+					chartFigureIds: [cmd.baseFigureId, cmd.figureId]
+				});
+				break;
 		}
 	}
 	getFigureUI(sheetId, figure) {
@@ -69552,6 +71148,9 @@ topbarMenuRegistry.add("file", {
 }).addChild("split_to_columns", ["data"], {
 	...splitToColumns,
 	sequence: 20
+}).addChild("data_analysis", ["data"], {
+	...dataAnalysis,
+	sequence: 24
 }).addChild("column_statistics", ["data"], {
 	...columnStatistics,
 	sequence: 25
@@ -69953,7 +71552,7 @@ var RippleEffect = class extends Component {
 		onAnimationEnd: types$1.function(),
 		style: types$1.string()
 	});
-	rippleRef = signal(null);
+	rippleRef = signal.ref();
 	setup() {
 		let animation = void 0;
 		onMounted(() => {
@@ -70007,7 +71606,7 @@ var Ripple = class extends Component {
 		onAnimationEnd: types$1.function().optional(() => () => {}),
 		class: types$1.string().optional("")
 	});
-	childContainerRef = signal(null);
+	childContainerRef = signal.ref();
 	state = proxy({ ripples: [] });
 	currentId = 1;
 	onClick(ev) {
@@ -70278,9 +71877,9 @@ var BottomBarSheet = class extends Component {
 		isEditing: false,
 		openedPicker: void 0
 	});
-	sheetDivRef = signal(null);
-	iconRef = signal(null);
-	sheetNameRef = signal(null);
+	sheetDivRef = signal.ref();
+	iconRef = signal.ref();
+	sheetNameRef = signal.ref();
 	editionState = "initializing";
 	DOMFocusableElementStore;
 	setup() {
@@ -70564,8 +72163,10 @@ var BottomBarStatistic = class extends Component {
 	});
 	state = proxy({ selectedStatisticFn: "" });
 	store;
+	sidePanelStore;
 	setup() {
 		this.store = useStore(AggregateStatisticsStore);
+		this.sidePanelStore = useStore(SidePanelStore);
 		onWillUpdateProps(() => {
 			if (Object.values(this.store.statisticFnResults).every((result) => result?.value === void 0)) this.props.closeContextMenu();
 		});
@@ -70605,6 +72206,12 @@ var BottomBarStatistic = class extends Component {
 			format: fnValue.format()
 		});
 	}
+	get isDataAnalysisOpen() {
+		return this.sidePanelStore.mainPanel?.componentTag === "DataAnalysisPanel" && this.sidePanelStore.isMainPanelOpen || this.sidePanelStore.secondaryPanel?.componentTag === "DataAnalysisPanel" && this.sidePanelStore.isSecondaryPanelOpen;
+	}
+	toggleDataAnalysisPanel() {
+		this.sidePanelStore.togglePinnedSidePanel("DataAnalysisPanel");
+	}
 };
 
 //#endregion
@@ -70619,8 +72226,8 @@ var BottomBar = class extends Component {
 		BottomBarSheet,
 		BottomBarStatistic
 	};
-	bottomBarRef = signal(null);
-	sheetListRef = signal(null);
+	bottomBarRef = signal.ref();
+	sheetListRef = signal.ref();
 	dragAndDrop = useDragAndDropListItems();
 	targetScroll = void 0;
 	state = proxy({
@@ -70833,12 +72440,13 @@ var SpreadsheetDashboard = class extends Component {
 	hoveredCell;
 	viewStore;
 	zoomStore;
-	gridRef = signal(null);
-	canvasRef = signal(null);
+	gridRef = signal.ref();
+	canvasRef = signal.ref(HTMLCanvasElement);
 	setup() {
 		this.hoveredCell = useStore(DelayedHoveredCellStore);
 		this.viewStore = useStore(ViewportsStore);
 		this.zoomStore = useStore(ZoomStore);
+		useLocalStore(HoveredTableStore);
 		const rendererStore = useLocalStore(RendererStore, OrderedLayers().filter((layer) => layer !== "Headers"));
 		useChildSubEnv({ getPopoverContainerRect: () => this.zoomStore.getZoomedRect(this.getGridRect()) });
 		useGridDrawing({
@@ -71256,8 +72864,8 @@ var RibbonMenu = class extends Component {
 	static components = { Menu };
 	props = useProps({ onClose: types$1.function() });
 	rootItems = topbarMenuRegistry.getMenuItems();
-	menuRef = signal(null);
-	containerRef = signal(null);
+	menuRef = signal.ref();
+	containerRef = signal.ref();
 	state = proxy({
 		menuItems: this.rootItems,
 		title: _t("Menu Bar"),
@@ -71330,7 +72938,7 @@ var SmallBottomBar = class extends Component {
 	composerStore;
 	viewStore;
 	composerInterface;
-	composerRef = signal(null);
+	composerRef = signal.ref();
 	menuState = proxy({ isOpen: false });
 	setup() {
 		this.composerFocusStore = useStore(ComposerFocusStore);
@@ -71409,6 +73017,49 @@ var SmallBottomBar = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/components/standalone_grid_canvas/carousel_data_view_print.ts
+var CarouselDataViewPrint = class extends Component {
+	static template = xml``;
+	props = useProps({
+		range: types$1.Range(),
+		columnWeights: types$1.array().optional(),
+		rect: types$1.object(),
+		rendererStore: types$1.object()
+	});
+	viewportsStore;
+	gridRender;
+	setup() {
+		useChildStoreProvider([ViewportsStore]);
+		const store = useLocalStore(StandaloneViewportStore, this.props.range, this.props.columnWeights);
+		this.gridRender = useLocalStore(GridRenderer, null);
+		this.viewportsStore = useStore(ViewportsStore);
+		useEffect(() => {
+			store.setContainerSize(this.props.rect.width, this.props.rect.height);
+		});
+		onMounted(() => this.props.rendererStore.register(this));
+		onWillUnmount(() => this.props.rendererStore.unRegister(this));
+	}
+	get renderingLayers() {
+		return ["Chart"];
+	}
+	drawLayer(renderingContext) {
+		const { ctx } = renderingContext;
+		ctx.save();
+		ctx.translate(this.props.rect.x, this.props.rect.y);
+		ctx.beginPath();
+		ctx.rect(0, 0, this.props.rect.width, this.props.rect.height);
+		ctx.clip();
+		const subRenderingCtx = {
+			...renderingContext,
+			sheetId: this.viewportsStore.displayedSheetId,
+			viewports: this.viewportsStore.viewports
+		};
+		this.gridRender.drawLayer(subRenderingCtx, "Background", void 0);
+		ctx.restore();
+	}
+};
+
 //#endregion
 //#region src/components/standalone_grid_canvas/figure_renderer_store.ts
 /** Store that draws the figures directly onto the canvas */
@@ -71434,29 +73085,25 @@ var FigureRendererStore = class extends DisposableStore {
 	drawLayer(renderingCtx) {
 		const { viewports, ctx } = renderingCtx;
 		const visibleFigures = viewports.getVisibleFigures(renderingCtx.sheetId);
-		const { x: offsetX, y: offsetY } = viewports.getViewportOffset(renderingCtx.sheetId);
+		const scrollOffset = viewports.getViewportOffset(renderingCtx.sheetId);
 		for (const figure of visibleFigures) {
-			const x = figure.x - offsetX;
-			const y = figure.y - offsetY;
+			const figureRect = {
+				...figure,
+				x: figure.x - scrollOffset.x,
+				y: figure.y - scrollOffset.y
+			};
+			const { x, y, width, height } = figureRect;
 			if (figure.tag === "chart") {
 				const chartId = this.getters.getChartIdFromFigureId(figure.id);
-				if (chartId) {
-					const chartRect = {
-						x,
-						y,
-						width: figure.width,
-						height: figure.height
-					};
-					this.drawChart(renderingCtx, chartId, chartRect);
-				}
+				if (chartId) this.drawChart(renderingCtx, chartId, figureRect);
 			} else if (figure.tag === "image") {
 				const loadedImage = this.loadedImages[this.getters.getImagePath(figure.id)];
-				if (loadedImage) ctx.drawImage(loadedImage, x, y, figure.width, figure.height);
-			} else if (figure.tag === "carousel") this.drawCarousel(renderingCtx, figure);
+				if (loadedImage) ctx.drawImage(loadedImage, x, y, width, height);
+			} else if (figure.tag === "carousel") this.drawCarousel(renderingCtx, figure, figureRect);
 			if (!this.getters.isDashboard()) {
 				ctx.strokeStyle = GRAY_400;
 				ctx.lineWidth = 1;
-				ctx.strokeRect(x, y, figure.width, figure.height);
+				ctx.strokeRect(x, y, width, height);
 			}
 		}
 	}
@@ -71474,53 +73121,37 @@ var FigureRendererStore = class extends DisposableStore {
 		renderingCtx.ctx.drawImage(chartCanvas, x, y, width, height);
 		cleanUp();
 	}
-	drawCarousel(renderingCtx, figure) {
-		const { viewports: sheetView, ctx } = renderingCtx;
-		const { x: offsetX, y: offsetY } = sheetView.getViewportOffset(renderingCtx.sheetId);
-		const x = figure.x - offsetX;
-		const y = figure.y - offsetY;
+	drawCarousel(renderingCtx, figure, figureRect) {
+		const { ctx } = renderingCtx;
 		const carousel = this.getters.getCarousel(figure.id);
 		const chartId = this.getters.getChartIdFromFigureId(figure.id);
 		if (!carousel) return;
+		const layout = getCarouselLayout(figureRect, carousel, this.getters.getSelectedCarouselItem(figure.id));
 		const chartDefinition = chartId ? this.getters.getChartDefinition(chartId) : void 0;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(figureRect.x, figureRect.y, figureRect.width, figureRect.height);
+		ctx.clip();
+		ctx.fillStyle = chartDefinition?.background || this.getters.getSpreadsheetTheme().backgroundColor;
+		ctx.fillRect(figureRect.x, figureRect.y, figureRect.width, figureRect.height);
 		const title = {
 			...DEFAULT_CAROUSEL_TITLE_STYLE,
 			...carousel.title
 		};
-		const headerPadding = 4;
-		const headerSize = title.fontSize + headerPadding * 2;
-		if (!title.text && chartId) {
-			const chartRect = {
-				x,
-				y,
-				width: figure.width,
-				height: figure.height
-			};
-			this.drawChart(renderingCtx, chartId, chartRect);
-		} else if (title.text) {
-			ctx.save();
-			ctx.fillStyle = chartDefinition?.background || this.getters.getSpreadsheetTheme().backgroundColor;
-			ctx.fillRect(x, y, figure.width, headerSize);
-			ctx.font = computeTextFont(chartStyleToCellStyle(title));
+		if (title.text) {
+			ctx.font = computeTextFont(chartStyleToCellStyle(title), "px", 500);
 			ctx.fillStyle = title.color;
-			ctx.fillText(title.text, x + headerPadding, y + headerPadding + title.fontSize);
-			ctx.restore();
-			const chartRect = {
-				x,
-				y: y + headerSize,
-				width: figure.width,
-				height: figure.height - headerSize
-			};
-			if (chartId) this.drawChart(renderingCtx, chartId, chartRect);
-			else if (!this.getters.isDashboard()) {
-				ctx.strokeStyle = GRAY_400;
-				ctx.lineWidth = 1;
-				ctx.beginPath();
-				ctx.moveTo(x, y + headerSize);
-				ctx.lineTo(x + figure.width, y + headerSize);
-				ctx.stroke();
-			}
+			ctx.textBaseline = "middle";
+			const textY = Math.ceil(layout.headerRect.y + layout.headerRect.height / 2);
+			ctx.fillText(title.text, layout.headerRect.x, textY);
+		}
+		const separator = layout.separatorRect;
+		if (separator) {
+			ctx.fillStyle = GRAY_400;
+			ctx.fillRect(separator.x, separator.y, separator.width, separator.height);
 		}
+		ctx.restore();
+		if (chartId) this.drawChart(renderingCtx, chartId, layout.contentRect);
 	}
 };
 
@@ -71528,12 +73159,13 @@ var FigureRendererStore = class extends DisposableStore {
 //#region src/components/standalone_grid_canvas/standalone_grid_canvas.ts
 var StandaloneGridCanvas = class extends Component {
 	static template = "o-spreadsheet-StandaloneGridCanvas";
+	static components = { CarouselDataViewPrint };
 	props = useProps({
 		sheetId: types$1.UID(),
 		zone: types$1.Zone(),
 		renderingCtx: types$1.object()
 	});
-	canvasRef = signal(null);
+	canvasRef = signal.ref(HTMLCanvasElement);
 	rendererStore;
 	figureRendererStore;
 	setup() {
@@ -71555,6 +73187,28 @@ var StandaloneGridCanvas = class extends Component {
 			this.figureRendererStore.addLoadedImage(path, await createImageBitmap(blob));
 		}));
 	}
+	get carouselDataViews() {
+		const { sheetId, viewports } = this.props.renderingCtx;
+		return viewports.getVisibleFigures(sheetId).filter((figure) => figure.tag === "carousel").map((figure) => {
+			const carouselItem = this.env.model.getters.getSelectedCarouselItem(figure.id);
+			if (carouselItem?.type !== "carouselDataView" || !carouselItem.range) return;
+			const carousel = this.env.model.getters.getCarousel(figure.id);
+			const scroll = viewports.getViewportOffset(sheetId);
+			const { x, y, width, height } = figure;
+			const layout = getCarouselLayout({
+				x: x - scroll.x,
+				y: y - scroll.y,
+				width,
+				height
+			}, carousel, carouselItem);
+			return {
+				range: carouselItem.range,
+				columnWeights: carouselItem.columnWeights,
+				rect: layout.contentRect,
+				rendererStore: this.rendererStore
+			};
+		}).filter(isDefined);
+	}
 };
 
 //#endregion
@@ -72016,7 +73670,7 @@ var NamedRangeSelector = class extends Component {
 		anchorRect: null,
 		menuItems: []
 	});
-	namedRangeSelectorRef = signal(null);
+	namedRangeSelectorRef = signal.ref();
 	setup() {
 		this.topBarToolStore = useToolBarDropdownStore();
 		this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
@@ -72214,7 +73868,7 @@ var BorderEditor = class extends Component {
 		anchorRect: types$1.Rect()
 	});
 	BORDER_POSITIONS = BORDER_POSITIONS;
-	lineStyleButtonRef = signal(null);
+	lineStyleButtonRef = signal.ref();
 	borderStyles = borderStyles;
 	state = proxy({ activeTool: void 0 });
 	toggleDropdownTool(tool) {
@@ -72281,7 +73935,7 @@ var BorderEditorWidget = class extends Component {
 	});
 	topBarToolStore;
 	viewStore;
-	borderEditorButtonRef = signal(null);
+	borderEditorButtonRef = signal.ref();
 	state = proxy({
 		currentColor: DEFAULT_BORDER_DESC.color,
 		currentStyle: DEFAULT_BORDER_DESC.style,
@@ -72511,7 +74165,7 @@ var DropdownAction = class extends Component {
 		childClass: types$1.string()
 	});
 	topBarToolStore;
-	actionRef = signal(null);
+	actionRef = signal.ref();
 	setup() {
 		this.topBarToolStore = useToolBarDropdownStore();
 	}
@@ -72574,7 +74228,7 @@ var NumberFormatsTool = class extends Component {
 	props = useProps({ class: types$1.string() });
 	formatNumberMenuItemSpec = formatNumberMenuItemSpec;
 	topBarToolStore;
-	buttonRef = signal(null);
+	buttonRef = signal.ref();
 	state = proxy({
 		anchorRect: {
 			x: 0,
@@ -72863,12 +74517,12 @@ var TopBar = class extends Component {
 	composerFocusStore;
 	fingerprints;
 	topBarToolStore;
-	toolBarContainerRef = signal(null);
-	toolbarRef = signal(null);
-	namedRangesRef = signal(null);
-	topBarTopRef = signal(null);
-	moreToolsContainerRef = signal(null);
-	moreToolsButtonRef = signal(null);
+	toolBarContainerRef = signal.ref();
+	toolbarRef = signal.ref();
+	namedRangesRef = signal.ref();
+	topBarTopRef = signal.ref();
+	moreToolsContainerRef = signal.ref();
+	moreToolsButtonRef = signal.ref();
 	spreadsheetRect = useSpreadsheetRect();
 	setup() {
 		this.composerFocusStore = useStore(ComposerFocusStore);
@@ -73130,7 +74784,7 @@ var Spreadsheet = class extends Component {
 		SpreadsheetPrint
 	};
 	sidePanel;
-	spreadsheetRef = signal(null);
+	spreadsheetRef = signal.ref();
 	spreadsheetRect = useSpreadsheetRect();
 	state = proxy({ printModeEnabled: false });
 	_focusGrid;
@@ -79138,12 +80792,13 @@ var FilterMenu = class extends Component {
 	}
 	sortFilterZone(sortDirection) {
 		const filterPosition = this.props.filterPosition;
-		const tableZone = this.table?.range.zone;
+		const table = this.table;
+		const tableZone = table?.range.zone;
 		if (!filterPosition || !tableZone || tableZone.top === tableZone.bottom) return;
 		const sheetId = this.viewStore.displayedSheetId;
 		const contentZone = {
 			...tableZone,
-			top: tableZone.top + 1
+			top: tableZone.top + table.config.numberOfHeaders
 		};
 		const sortAnchor = {
 			col: filterPosition.col,
@@ -79301,9 +80956,9 @@ var LinkEditor = class extends Component {
 		onClosed: types$1.function().optional()
 	});
 	static size = { maxHeight: 500 };
-	urlInput = signal(null);
-	suggestionListRef = signal(null);
-	urlInputContainer = signal(null);
+	urlInput = signal.ref(HTMLInputElement);
+	suggestionListRef = signal.ref();
+	urlInputContainer = signal.ref();
 	state;
 	viewStore;
 	setup() {
@@ -81421,7 +83076,7 @@ const ARRAYTOTEXT = {
 		else if (_format === 0) {
 			const rowSeparator = this.locale.decimalSeparator === "," ? "/" : ",";
 			return { value: transposeMatrix(_array).flatMap((row) => row.map((value) => {
-				return isEvaluationError(value.value) ? value.value : toString(value);
+				return isEvaluationError(value.value) ? value.value : toLocaleString(value, this.locale);
 			})).join(rowSeparator) };
 		} else return new EvaluationError(_t("Format must be 0 or 1"));
 	},
@@ -87469,7 +89124,7 @@ const CONCAT = {
 	description: _t("Concatenation of two values."),
 	args: [arg("value1 (string)", _t("The value to which value2 will be appended.")), arg("value2 (string)", _t("The value to append to value1."))],
 	compute: function(value1, value2) {
-		return { value: toString(value1) + toString(value2) };
+		return { value: toLocaleString(value1, this.locale) + toLocaleString(value2, this.locale) };
 	},
 	isExported: true
 };
@@ -88352,7 +90007,7 @@ const CLEAN = {
 	description: _t("Remove non-printable characters from a piece of text."),
 	args: [arg("text (string)", _t("The text whose non-printable characters are to be removed."))],
 	compute: function(text) {
-		const _text = toString(text);
+		const _text = toLocaleString(text, this.locale);
 		let cleanedStr = "";
 		for (const char of _text) if (char && char.charCodeAt(0) > 31) cleanedStr += char;
 		return { value: cleanedStr };
@@ -88363,7 +90018,7 @@ const CONCATENATE = {
 	description: _t("Appends strings to one another."),
 	args: [arg("string (string, range<string>, repeating)", _t("String to append in sequence."))],
 	compute: function(...datas) {
-		return { value: reduceAny(datas, (acc, a) => acc + toString(a), "") };
+		return { value: reduceAny(datas, (acc, a) => acc + toLocaleString(a, this.locale), "") };
 	},
 	isExported: true
 };
@@ -88371,7 +90026,7 @@ const EXACT = {
 	description: _t("Tests whether two strings are identical."),
 	args: [arg("string1 (string)", _t("The first string to compare.")), arg("string2 (string)", _t("The second string to compare."))],
 	compute: function(string1, string2) {
-		return { value: toString(string1) === toString(string2) };
+		return { value: toLocaleString(string1, this.locale) === toLocaleString(string2, this.locale) };
 	},
 	isExported: true
 };
@@ -88383,8 +90038,8 @@ const FIND = {
 		arg(`starting_at (number, default=${DEFAULT_STARTING_AT})`, _t("The character within text_to_search at which to start the search."))
 	],
 	compute: function(searchFor, textToSearch, startingAt = { value: DEFAULT_STARTING_AT }) {
-		const _searchFor = toString(searchFor);
-		const _textToSearch = toString(textToSearch);
+		const _searchFor = toLocaleString(searchFor, this.locale);
+		const _textToSearch = toLocaleString(textToSearch, this.locale);
 		const _startingAt = toNumber(startingAt, this.locale);
 		if (_textToSearch === "") return new EvaluationError(_t("The text_to_search must be non-empty."));
 		if (_startingAt < 1) return new EvaluationError(_t("The starting_at (%s) must be greater than or equal to 1.", _startingAt));
@@ -88421,8 +90076,8 @@ const JOIN = {
 	description: _t("Concatenates elements of arrays with delimiter."),
 	args: [arg("delimiter (string)", _t("The character or string to place between each concatenated value.")), arg("value_or_array (string, range<string>, repeating)", _t("Value to be appended using delimiter."))],
 	compute: function(delimiter, ...valuesOrArrays) {
-		const _delimiter = toString(delimiter);
-		return { value: reduceAny(valuesOrArrays, (acc, a) => (acc ? acc + _delimiter : "") + toString(a), "") };
+		const _delimiter = toLocaleString(delimiter, this.locale);
+		return { value: reduceAny(valuesOrArrays, (acc, a) => (acc ? acc + _delimiter : "") + toLocaleString(a, this.locale), "") };
 	}
 };
 const LEFT = {
@@ -88431,7 +90086,7 @@ const LEFT = {
 	compute: function(text, ...args) {
 		const _numberOfCharacters = args.length ? toNumber(args[0], this.locale) : 1;
 		if (_numberOfCharacters < 0) return new EvaluationError(_t("The number_of_characters (%s) must be positive or null.", _numberOfCharacters));
-		return { value: toString(text).substring(0, _numberOfCharacters) };
+		return { value: toLocaleString(text, this.locale).substring(0, _numberOfCharacters) };
 	},
 	isExported: true
 };
@@ -88439,7 +90094,7 @@ const LEN = {
 	description: _t("Length of a string."),
 	args: [arg("text (string)", _t("The string whose length will be returned."))],
 	compute: function(text) {
-		return { value: toString(text).length };
+		return { value: toLocaleString(text, this.locale).length };
 	},
 	isExported: true
 };
@@ -88447,7 +90102,7 @@ const LOWER = {
 	description: _t("Converts a specified string to lowercase."),
 	args: [arg("text (string)", _t("The string to convert to lowercase."))],
 	compute: function(text) {
-		return { value: toString(text).toLowerCase() };
+		return { value: toLocaleString(text, this.locale).toLowerCase() };
 	},
 	isExported: true
 };
@@ -88459,7 +90114,7 @@ const MID = {
 		arg("extract_length (number)", _t("The length of the segment to extract."))
 	],
 	compute: function(text, starting_at, extract_length) {
-		const _text = toString(text);
+		const _text = toLocaleString(text, this.locale);
 		const _starting_at = toNumber(starting_at, this.locale);
 		const _extract_length = toNumber(extract_length, this.locale);
 		if (_starting_at < 1) return new EvaluationError(_t("The starting_at argument (%s) must be positive greater than one.", _starting_at.toString()));
@@ -88472,7 +90127,7 @@ const PROPER = {
 	description: _t("Capitalizes each word in a specified string."),
 	args: [arg("text_to_capitalize (string)", _t("The text which will be returned with the first letter of each word in uppercase and all other letters in lowercase."))],
 	compute: function(text) {
-		return { value: toString(text).replace(wordRegex, (word) => {
+		return { value: toLocaleString(text, this.locale).replace(wordRegex, (word) => {
 			return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
 		}) };
 	},
@@ -88622,8 +90277,8 @@ const REPLACE = {
 		if (_position < 1) return new EvaluationError(_t("The position (%s) must be greater than or equal to 1.", _position));
 		const _length = toNumber(length, this.locale);
 		if (_length < 0) return new EvaluationError(_t("The length (%s) must be positive or zero.", _length));
-		const _text = toString(text);
-		const _newText = toString(newText);
+		const _text = toLocaleString(text, this.locale);
+		const _newText = toLocaleString(newText, this.locale);
 		return { value: _text.substring(0, _position - 1) + _newText + _text.substring(_position - 1 + _length) };
 	},
 	isExported: true
@@ -88634,7 +90289,7 @@ const RIGHT = {
 	compute: function(text, ...args) {
 		const _numberOfCharacters = args.length ? toNumber(args[0], this.locale) : 1;
 		if (_numberOfCharacters < 0) return new EvaluationError(_t("The number_of_characters (%s) must be positive or zero.", _numberOfCharacters));
-		const _text = toString(text);
+		const _text = toLocaleString(text, this.locale);
 		const stringLength = _text.length;
 		return { value: _text.substring(stringLength - _numberOfCharacters, stringLength) };
 	},
@@ -88648,8 +90303,8 @@ const SEARCH = {
 		arg(`starting_at (number, default=${DEFAULT_STARTING_AT})`, _t("The character within text_to_search at which to start the search."))
 	],
 	compute: function(searchFor, textToSearch, startingAt = { value: DEFAULT_STARTING_AT }) {
-		const _searchFor = toString(searchFor).toLowerCase();
-		const _textToSearch = toString(textToSearch).toLowerCase();
+		const _searchFor = toLocaleString(searchFor, this.locale).toLowerCase();
+		const _textToSearch = toLocaleString(textToSearch, this.locale).toLowerCase();
 		const _startingAt = toNumber(startingAt, this.locale);
 		if (_textToSearch === "") return {
 			value: CellErrorType.GenericError,
@@ -88679,8 +90334,8 @@ const SPLIT = {
 		arg(`remove_empty_text (boolean, default=${SPLIT_DEFAULT_REMOVE_EMPTY_TEXT})`, _t("Whether or not to remove empty text messages from the split results. The default behavior is to treat         consecutive delimiters as one (if TRUE). If FALSE, empty cells values are added between consecutive delimiters."))
 	],
 	computeArray: function(text, delimiter, splitByEach = { value: SPLIT_DEFAULT_SPLIT_BY_EACH }, removeEmptyText = { value: SPLIT_DEFAULT_REMOVE_EMPTY_TEXT }) {
-		const _text = toString(text);
-		const _delimiter = escapeRegExp(toString(delimiter));
+		const _text = toLocaleString(text, this.locale);
+		const _delimiter = escapeRegExp(toLocaleString(delimiter, this.locale));
 		const _splitByEach = toBoolean(splitByEach);
 		const _removeEmptyText = toBoolean(removeEmptyText);
 		if (_delimiter.length <= 0) return new EvaluationError(_t("The delimiter (%s) must be not be empty.", _delimiter));
@@ -88702,10 +90357,10 @@ const SUBSTITUTE = {
 	compute: function(textToSearch, searchFor, replaceWith, occurrenceNumber) {
 		const _occurrenceNumber = toNumber(occurrenceNumber, this.locale);
 		if (_occurrenceNumber < 0) return new EvaluationError(_t("The occurrenceNumber (%s) must be positive or null.", _occurrenceNumber));
-		const _textToSearch = toString(textToSearch);
-		const _searchFor = toString(searchFor);
+		const _textToSearch = toLocaleString(textToSearch, this.locale);
+		const _searchFor = toLocaleString(searchFor, this.locale);
 		if (_searchFor === "") return { value: _textToSearch };
-		const _replaceWith = toString(replaceWith);
+		const _replaceWith = toLocaleString(replaceWith, this.locale);
 		const reg = new RegExp(escapeRegExp(_searchFor), "g");
 		if (_occurrenceNumber === 0) return { value: _textToSearch.replace(reg, _replaceWith) };
 		let n = 0;
@@ -88728,10 +90383,10 @@ const TEXTJOIN = {
 		arg("texts (string, range<string>, repeating)", _t("Text item to join."))
 	],
 	compute: function(delimiter, ignoreEmpty = { value: TEXTJOIN_DEFAULT_IGNORE_EMPTY }, ...textsOrArrays) {
-		const _delimiter = toString(delimiter);
+		const _delimiter = toLocaleString(delimiter, this.locale);
 		const _ignoreEmpty = toBoolean(ignoreEmpty);
 		let n = 0;
-		return { value: reduceAny(textsOrArrays, (acc, a) => !(_ignoreEmpty && toString(a) === "") ? (n++ ? acc + _delimiter : "") + toString(a) : acc, "") };
+		return { value: reduceAny(textsOrArrays, (acc, a) => !(_ignoreEmpty && toLocaleString(a, this.locale) === "") ? (n++ ? acc + _delimiter : "") + toLocaleString(a, this.locale) : acc, "") };
 	},
 	isExported: true
 };
@@ -88784,7 +90439,7 @@ const TRIM = {
 	description: _t("Removes space characters."),
 	args: [arg("text (string)", _t("The text or reference to a cell containing text to be trimmed."))],
 	compute: function(text) {
-		return { value: trimContent(toString(text)) };
+		return { value: trimContent(toLocaleString(text, this.locale)) };
 	},
 	isExported: true
 };
@@ -88792,7 +90447,7 @@ const UPPER = {
 	description: _t("Converts a specified string to uppercase."),
 	args: [arg("text (string)", _t("The string to convert to uppercase."))],
 	compute: function(text) {
-		return { value: toString(text).toUpperCase() };
+		return { value: toLocaleString(text, this.locale).toUpperCase() };
 	},
 	isExported: true
 };
@@ -88889,7 +90544,7 @@ const HYPERLINK = {
 	args: [arg("url (string)", _t("The full URL of the link enclosed in quotation marks.")), arg("link_label (string, optional)", _t("The text to display in the cell, enclosed in quotation marks."))],
 	compute: function(url, linkLabel) {
 		const processedUrl = toString(url).trim();
-		const processedLabel = toString(linkLabel) || processedUrl;
+		const processedLabel = toLocaleString(linkLabel, this.locale) || processedUrl;
 		if (processedUrl === "") return { value: processedLabel };
 		return { value: markdownLink(processedLabel, processedUrl) };
 	},
@@ -89119,7 +90774,9 @@ const helpers = {
 	computeCachedTextDimension,
 	createComputeFunction,
 	isMobileOS,
-	drawHighlight
+	drawHighlight,
+	getBoundingRectWithMargins,
+	hasInteractiveElementInEventTree
 };
 const links = {
 	isMarkdownLink,
@@ -89257,6 +90914,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.11";
-__info__.date = "2026-08-12T09:17:24.237Z";
-__info__.hash = "bc056d7";
+__info__.version = "19.5.0-alpha.12";
+__info__.date = "2026-08-19T09:47:03.774Z";
+__info__.hash = "68ca68e";