@odoo/o-spreadsheet 19.5.0-alpha.1 → 19.5.0-alpha.3

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.1
- * @date 2026-07-01T05:05:42.239Z
- * @hash 3c78107
+ * @version 19.5.0-alpha.3
+ * @date 2026-07-14T10:17:06.949Z
+ * @hash c029184
  */
 
 import * as owl from "@odoo/owl";
@@ -562,6 +562,7 @@ const DEFAULT_NUMBER_STYLE = {
 };
 const DEFAULT_VERTICAL_ALIGN = DEFAULT_STYLE.verticalAlign;
 const DEFAULT_WRAPPING_MODE = DEFAULT_STYLE.wrapping;
+const DEFAULT_TEXT_HIGHLIGHT_PERCENT = .25;
 const DEFAULT_FONT_SIZE = DEFAULT_STYLE.fontSize;
 const DEFAULT_FONT = "'Roboto', arial, 'Liberation Sans'";
 const DEFAULT_BORDER_DESC = {
@@ -1246,6 +1247,12 @@ function defaultDict(def) {
 		}
 	};
 }
+function repeat(array, times) {
+	const len = array.length;
+	const result = new Array(len * times);
+	for (let t = 0; t < times; t++) for (let i = 0; i < len; i++) result[t * len + i] = array[i];
+	return result;
+}
 
 //#endregion
 //#region src/helpers/coordinates.ts
@@ -8405,534 +8412,6 @@ function addOrigin(cell, origin) {
 	return cell;
 }
 
-//#endregion
-//#region src/helpers/text_helper.ts
-function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
-	return numberOfLines * (textLineHeight + 4) - 4;
-}
-function getCanvas(width = 100, height = 100) {
-	return new OffscreenCanvas(width, height).getContext("2d");
-}
-/**
-* Get the default height of the cell given its style.
-*/
-function getDefaultCellHeight(ctx, cell, locale, colSize) {
-	if (!cell || !cell.isFormula && !cell.content) return 23;
-	let content = "";
-	try {
-		if (!cell.isFormula) {
-			const localeFormat = {
-				format: cell.format,
-				locale
-			};
-			content = formatValue(parseLiteral(cell.content, locale), localeFormat);
-		}
-	} catch {
-		content = CellErrorType.GenericError;
-	}
-	return getCellContentHeight(ctx, content, cell.style, colSize);
-}
-function getCellContentHeight(ctx, content, style, colSize) {
-	return computeMultilineTextSize(ctx, splitTextToWidth(ctx, content, style, style?.wrapping === "wrap" ? colSize - 2 * 4 : void 0), style).height + 2 * 3;
-}
-function getDefaultContextFont(fontSize, bold = false, italic = false) {
-	return `${italic ? "italic" : ""} ${bold ? "bold" : ""} ${fontSize}px ${DEFAULT_FONT}`;
-}
-function computeMultilineTextSize(context, textLines, style = {}, fontUnit = "pt") {
-	if (!textLines.length) return {
-		width: 0,
-		height: 0
-	};
-	const font = computeTextFont(style, fontUnit);
-	const sizes = textLines.map((line) => computeCachedTextDimension(context, line, font));
-	const height = computeTextLinesHeight(sizes[0].height, textLines.length);
-	const width = Math.max(...sizes.map((size) => size.width));
-	if (!style.rotation) return {
-		height,
-		width
-	};
-	const cos = Math.abs(Math.cos(style.rotation));
-	const sin = Math.abs(Math.sin(style.rotation));
-	return {
-		width: width * cos + height * sin,
-		height: sin * width + cos * height
-	};
-}
-function computeTextWidth(context, text, style = {}, fontUnit = "pt") {
-	return computeCachedTextWidth(context, text, computeTextFont(style, fontUnit), style.rotation);
-}
-function computeCachedTextWidth(context, text, font, rotation) {
-	const size = computeCachedTextDimension(context, text, font);
-	if (!rotation) return size.width;
-	const cos = Math.abs(Math.cos(rotation));
-	const sin = Math.abs(Math.sin(rotation));
-	return size.width * cos + size.height * sin;
-}
-const textDimensionsCache = {};
-function computeTextDimension(context, text, style, fontUnit = "pt") {
-	const size = computeCachedTextDimension(context, text, computeTextFont(style, fontUnit));
-	if (!style.rotation) return size;
-	const cos = Math.abs(Math.cos(style.rotation));
-	const sin = Math.abs(Math.sin(style.rotation));
-	return {
-		width: size.width * cos + size.height * sin,
-		height: size.height * cos + size.width * sin
-	};
-}
-function computeCachedTextDimension(context, text, font) {
-	if (!textDimensionsCache[font]) textDimensionsCache[font] = {};
-	if (textDimensionsCache[font][text] === void 0) {
-		context.save();
-		context.font = font;
-		const measure = context.measureText(text);
-		context.restore();
-		const width = measure.width;
-		const height = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
-		textDimensionsCache[font][text] = {
-			width,
-			height
-		};
-	}
-	return textDimensionsCache[font][text];
-}
-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 computeTextFontSizeInPixels(style) {
-	return fontSizeInPixels(style?.fontSize || DEFAULT_FONT_SIZE);
-}
-function splitWordToSpecificWidth(ctx, word, width, style) {
-	if (computeTextWidth(ctx, word, style) <= width) return [word];
-	const splitWord = [];
-	let wordPart = "";
-	for (const l of word) if (computeTextWidth(ctx, wordPart + l, style) > width) {
-		splitWord.push(wordPart);
-		wordPart = l;
-	} else wordPart += l;
-	splitWord.push(wordPart);
-	return splitWord;
-}
-/**
-* Return the given text, split in multiple lines if needed. The text will be split in multiple
-* line if it contains NEWLINE characters, or if it's longer than the given width.
-*/
-function splitTextToWidth(ctx, text, style, width) {
-	if (!style) style = {};
-	if (isMarkdownLink(text)) text = parseMarkdownLink(text).label;
-	const brokenText = [];
-	const lines = text.includes("\n") ? text.split("\n") : [text];
-	for (const line of lines) {
-		const words = line.includes(" ") ? line.split(" ") : [line];
-		if (!width) {
-			brokenText.push(line);
-			continue;
-		}
-		let textLine = "";
-		let availableWidth = width;
-		for (const word of words) {
-			const splitWord = splitWordToSpecificWidth(ctx, word, width, style);
-			const lastPart = splitWord.pop();
-			const lastPartWidth = computeTextWidth(ctx, lastPart, style);
-			if (splitWord.length) {
-				if (textLine !== "") {
-					brokenText.push(textLine);
-					textLine = "";
-					availableWidth = width;
-				}
-				splitWord.forEach((wordPart) => {
-					brokenText.push(wordPart);
-				});
-				textLine = lastPart;
-				availableWidth = width - lastPartWidth;
-			} else {
-				const _word = textLine === "" ? lastPart : " " + lastPart;
-				const wordWidth = computeTextWidth(ctx, _word, style);
-				if (wordWidth <= availableWidth) {
-					textLine += _word;
-					availableWidth -= wordWidth;
-				} else {
-					brokenText.push(textLine);
-					textLine = lastPart;
-					availableWidth = width - lastPartWidth;
-				}
-			}
-		}
-		if (textLine !== "") brokenText.push(textLine);
-	}
-	return brokenText;
-}
-/**
-* Return the font size that makes the width of a text match the given line width.
-* Minimum font size is 1.
-*
-* @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
-*/
-function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = .25) {
-	let minFontSize = 1;
-	if (getTextWidth(minFontSize) > lineWidth) return minFontSize;
-	if (getTextWidth(maxFontSize) < lineWidth) return maxFontSize;
-	let fontSize = (minFontSize + maxFontSize) / 2;
-	let currentTextWidth = getTextWidth(fontSize);
-	let iterations = 0;
-	while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
-		if (currentTextWidth >= lineWidth) maxFontSize = (minFontSize + maxFontSize) / 2;
-		else minFontSize = (minFontSize + maxFontSize) / 2;
-		fontSize = (minFontSize + maxFontSize) / 2;
-		currentTextWidth = getTextWidth(fontSize);
-		iterations++;
-	}
-	return fontSize;
-}
-/** Transform a string to lowercase and removes whitespace from both ends of the string*/
-function toTrimmedLowerCase(str) {
-	return str ? str.toLowerCase().trim() : "";
-}
-/**
-* Extract the fontSize from a context font string
-* @param font The (context) font string to parse
-* @returns The fontSize in pixels
-*/
-const pxRegex = /([0-9\.]*)px/;
-function getContextFontSize(font) {
-	return Number(font.match(pxRegex)?.[1]);
-}
-function clipTextWithEllipsis(ctx, text, maxWidth) {
-	let width = computeCachedTextWidth(ctx, text, ctx.font);
-	if (width <= maxWidth) return text;
-	const ellipsis = "…";
-	const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
-	if (width <= ellipsisWidth) return text;
-	let len = text.length;
-	while (width >= maxWidth - ellipsisWidth && len-- > 0) {
-		text = text.substring(0, len);
-		width = computeCachedTextWidth(ctx, text, ctx.font);
-	}
-	return text + ellipsis;
-}
-function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10) {
-	context.fillText(text, position.x, position.y);
-	if (!underline && !strikethrough) return;
-	const measure = context.measureText(text);
-	const textWidth = measure.width;
-	const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
-	const boxHeight = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
-	let { x, y } = position;
-	let strikeY = y, underlineY = y;
-	switch (context.textAlign) {
-		case "center":
-			x -= textWidth / 2;
-			break;
-		case "right":
-			x -= textWidth;
-			break;
-	}
-	switch (context.textBaseline) {
-		case "top":
-			underlineY += boxHeight - 2 * strokeWidth;
-			strikeY += boxHeight / 2 - strokeWidth;
-			break;
-		case "middle":
-			underlineY += boxHeight / 2 - strokeWidth;
-			break;
-		case "alphabetic":
-			underlineY += 2 * strokeWidth;
-			strikeY -= 3 * strokeWidth;
-			break;
-		case "bottom":
-			underlineY = y;
-			strikeY -= textHeight / 2 - strokeWidth / 2;
-			break;
-	}
-	if (underline) {
-		context.lineWidth = strokeWidth;
-		context.strokeStyle = context.fillStyle;
-		context.beginPath();
-		context.moveTo(x, underlineY);
-		context.lineTo(x + textWidth, underlineY);
-		context.stroke();
-	}
-	if (strikethrough) {
-		context.lineWidth = strokeWidth;
-		context.strokeStyle = context.fillStyle;
-		context.beginPath();
-		context.moveTo(x, strikeY);
-		context.lineTo(x + textWidth, strikeY);
-		context.stroke();
-	}
-}
-function sliceTextToFitWidth(context, width, text, style, fontUnit = "pt") {
-	if (computeTextWidth(context, text, style, fontUnit) <= width) return text;
-	const ellipsis = "...";
-	const ellipsisWidth = computeTextWidth(context, ellipsis, style, fontUnit);
-	if (ellipsisWidth >= width) return "";
-	let lowerBoundLen = 1;
-	let upperBoundLen = text.length;
-	let currentWidth;
-	while (lowerBoundLen <= upperBoundLen) {
-		const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
-		currentWidth = computeTextWidth(context, text.slice(0, currentLen), style, fontUnit);
-		if (currentWidth + ellipsisWidth > width) upperBoundLen = currentLen - 1;
-		else lowerBoundLen = currentLen + 1;
-	}
-	const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
-	return slicedText ? slicedText + ellipsis : "";
-}
-/**
-* Return the position to draw text on a rotated canvas to ensure that the rotated text alignment correspond
-* with to original's text vertical and horizontal alignment.
-*/
-function computeRotationPosition(rect, style) {
-	if (!style.rotation || style.rotation % (Math.PI * 2) === 0) return rect;
-	let { x, y } = rect;
-	const cos = Math.cos(-style.rotation);
-	const sin = Math.sin(-style.rotation);
-	const width = rect.textWidth - 2 * 4;
-	const height = rect.textHeight;
-	const center = style.align === "center";
-	const rotateTowardCellCenter = style.align === "left" === sin < 0;
-	const sh = sin * height;
-	const sw = Math.abs(sin * width);
-	const ch = cos * height;
-	if (style.verticalAlign === "top") if (center) {
-		y += sw / 2;
-		x -= sh / 2;
-	} else if (rotateTowardCellCenter) x -= sh;
-	else y += sw;
-	else if (!style.verticalAlign || style.verticalAlign === "bottom") {
-		y += height - ch;
-		if (center) {
-			y -= sw / 2;
-			x -= sh / 2;
-		} else if (rotateTowardCellCenter) {
-			x -= sh;
-			y -= sw;
-		}
-	} else if (center) {
-		x -= sh / 2;
-		y -= height / 2;
-		if (rotateTowardCellCenter) y += sh;
-		else y -= sh;
-	} else if (rotateTowardCellCenter) {
-		x -= sh;
-		y -= sw / 2;
-	} else y += sw / 2 + ch / 4;
-	return {
-		x: cos * x - sin * y,
-		y: cos * y + sin * x
-	};
-}
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_colorscale_plugin.ts
-/** This is a chartJS plugin that will draw the heatmap colorscale at the chart legend position */
-const chartColorScalePlugin = {
-	id: "chartColorScalePlugin",
-	afterDatasetsDraw(chart, args, options) {
-		if (!options.position || options.position === "none" || !options.colorScale.length) return;
-		const ctx = chart.ctx;
-		ctx.save();
-		ctx.textAlign = "center";
-		ctx.textBaseline = "middle";
-		ctx.miterLimit = 1;
-		const gradientHeight = (chart.chartArea.bottom - chart.chartArea.top) / 2;
-		const gradientWidth = 10;
-		const gradientX = options.position === "left" ? 20 : ctx.canvas.width - 70;
-		const gradientY = chart.chartArea.top;
-		const gradient = ctx.createLinearGradient(0, gradientY + gradientHeight, 0, gradientY);
-		const step = 1 / (options.colorScale.length - 1);
-		options.colorScale.forEach((color, index) => {
-			gradient.addColorStop(index * step, color);
-		});
-		ctx.fillStyle = gradient;
-		ctx.fillRect(gradientX, gradientY, gradientWidth, gradientHeight);
-		ctx.fillStyle = options.fontColor ?? "black";
-		ctx.font = getDefaultContextFont(12);
-		ctx.textAlign = "left";
-		let minValue = Math.round(options.minValue * 100) / 100;
-		let maxValue = Math.round(options.maxValue * 100) / 100;
-		if (options.minValue === options.maxValue) {
-			minValue -= 1;
-			maxValue += 1;
-		}
-		const formattedMaxValue = humanizeNumber({
-			value: maxValue,
-			format: void 0
-		}, options.locale);
-		const formattedMinValue = humanizeNumber({
-			value: minValue,
-			format: void 0
-		}, options.locale);
-		ctx.fillText(formattedMinValue, gradientX + gradientWidth + 5, gradientY + gradientHeight - 6);
-		ctx.fillText(formattedMaxValue, gradientX + gradientWidth + 5, gradientY + 6);
-		ctx.restore();
-	}
-};
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_funnel_chart.ts
-function getFunnelChartController() {
-	if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
-	return class FunnelChartController extends globalThis.Chart.BarController {
-		static id = "funnel";
-		static defaults = {
-			...globalThis.Chart?.BarController.defaults,
-			dataElementType: "funnel",
-			animation: { duration: (ctx) => {
-				if (ctx.type !== "data") return 1e3;
-				return 1e3 * (ctx.raw[1] / Math.max(...ctx.dataset.data.map((data) => data[1])));
-			} }
-		};
-		/** Called at each chart render to update the elements of the chart (FunnelChartElement) with the updated data */
-		updateElements(rects, start, count, mode) {
-			super.updateElements(rects, start, count, mode);
-			for (let i = start; i < start + count; i++) {
-				const rect = rects[i];
-				this.updateElement(rect, i, { nextElement: rects[i + 1] }, mode);
-			}
-		}
-	};
-}
-function getFunnelChartElement() {
-	if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
-	/**
-	* Similar to a bar chart element, but it's a trapezoid rather than a rectangle. The top is of width
-	* `width`, and the bottom is of width `nextElementWidth`.
-	*/
-	return class FunnelChartElement extends globalThis.Chart.BarElement {
-		static id = "funnel";
-		/** Overwrite this to draw a trapezoid rather then a rectangle */
-		draw(ctx) {
-			ctx.save();
-			const { x, y, height, nextElement, base, options } = this.getProps([
-				"x",
-				"y",
-				"width",
-				"height",
-				"nextElement",
-				"base",
-				"options"
-			]);
-			const width = getElementWidth(this);
-			const offset = (width - (nextElement ? getElementWidth(nextElement) : 0)) / 2;
-			const startX = Math.min(x, base);
-			const startY = y - height / 2;
-			ctx.fillStyle = options.backgroundColor;
-			ctx.beginPath();
-			ctx.moveTo(startX, startY);
-			ctx.lineTo(startX + width, startY);
-			ctx.lineTo(startX + width - offset, startY + height);
-			ctx.lineTo(startX + offset, startY + height);
-			ctx.closePath();
-			ctx.fill();
-			if (options.borderWidth) {
-				ctx.strokeStyle = options.borderColor;
-				ctx.lineWidth = options.borderWidth;
-				ctx.stroke();
-			}
-			ctx.restore();
-		}
-		/** Check if the mouse is inside the trapezoid */
-		inRange(mouseX, mouseY) {
-			const { x, y, height, nextElement, base } = this.getProps([
-				"x",
-				"y",
-				"width",
-				"height",
-				"nextElement",
-				"base",
-				"options"
-			]);
-			const width = getElementWidth(this);
-			const nextElementWidth = nextElement ? getElementWidth(nextElement) : 0;
-			const startX = Math.min(x, base);
-			const startY = y - height / 2;
-			if (mouseY < startY || mouseY > startY + height) return false;
-			const offset = (width - nextElementWidth) / 2;
-			const left = startX + offset * (mouseY - startY) / height;
-			const right = startX + width - offset * (mouseY - startY) / height;
-			if (mouseX < left || mouseX > right) return false;
-			return true;
-		}
-	};
-}
-/**
-* Get an element width.
-*
-* The property width is undefined during animations, we need to compute it manually.
-*/
-function getElementWidth(element) {
-	const { x, base } = element.getProps(["x", "base"]);
-	return Math.max(x, base) - Math.min(x, base);
-}
-/**
-* Position the tooltip inside the trapezoid.
-* The default position for tooltips of bar elements is at the end of rectangle, which is not ideal for trapezoids.
-*/
-const funnelTooltipPositioner = function(elements) {
-	if (!elements.length) return {
-		x: 0,
-		y: 0
-	};
-	const { x, y, base, width, height } = elements[0].element.getProps([
-		"x",
-		"y",
-		"width",
-		"height",
-		"base"
-	]);
-	const startX = Math.min(x, base);
-	const startY = y - height / 2;
-	return {
-		x: startX + width * 2 / 3,
-		y: startY + height / 2
-	};
-};
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts
-const chartMinorGridPlugin = {
-	id: "o-spreadsheet-minor-gridlines",
-	beforeDatasetsDraw(chart) {
-		const ctx = chart.ctx;
-		const chartArea = chart.chartArea;
-		if (!chartArea) return;
-		for (const scaleId in chart.scales) {
-			const scale = chart.scales[scaleId];
-			const options = scale.options;
-			const minor = options?.grid?.minor;
-			if (!minor?.display) continue;
-			const showMajorGrid = options?.grid?.display;
-			const ticks = scale.ticks;
-			if (!ticks || ticks.length < 2) continue;
-			ctx.save();
-			ctx.lineWidth = 1;
-			ctx.strokeStyle = minor.color ?? options?.grid?.color ?? "#e6e6e6";
-			for (let i = 0; i < ticks.length - 1; i++) {
-				const start = scale.getPixelForTick(i);
-				const end = scale.getPixelForTick(i + 1);
-				if (!isFinite(start) || !isFinite(end)) continue;
-				for (let j = showMajorGrid ? 1 : 0; j < 4; j++) {
-					const ratio = j / 4;
-					const position = Math.round(start + (end - start) * ratio) + .5;
-					ctx.beginPath();
-					if (scale.isHorizontal()) {
-						ctx.moveTo(position, chartArea.top);
-						ctx.lineTo(position, chartArea.bottom);
-					} else {
-						ctx.moveTo(chartArea.left, position);
-						ctx.lineTo(chartArea.right, position);
-					}
-					ctx.stroke();
-				}
-			}
-			ctx.restore();
-		}
-	}
-};
-
 //#endregion
 //#region src/helpers/color.ts
 const RBA_REGEX = /rgba?\(|\s+|\)/gi;
@@ -9526,113 +9005,646 @@ var AlternatingColorGenerator = class extends ColorGenerator {
 		super(paletteSize, preferredColors);
 		this.palette = getAlternatingColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
 	}
-};
-var AlternatingColorMap = class {
-	availableColors;
-	colors = {};
-	constructor(paletteSize = 12) {
-		this.availableColors = new AlternatingColorGenerator(paletteSize);
+};
+var AlternatingColorMap = class {
+	availableColors;
+	colors = {};
+	constructor(paletteSize = 12) {
+		this.availableColors = new AlternatingColorGenerator(paletteSize);
+	}
+	get(id) {
+		if (!this.colors[id]) this.colors[id] = this.availableColors.next();
+		return this.colors[id];
+	}
+};
+const COLORSCHEMES = {
+	greys: [
+		"#ffffff",
+		"#808080",
+		"#000000"
+	],
+	blues: [
+		"#f7fbff",
+		"#6aaed6",
+		"#08306b"
+	],
+	reds: [
+		"#fff5f0",
+		"#fb694a",
+		"#67000d"
+	],
+	greens: [
+		"#f7fcf5",
+		"#73c476",
+		"#00441b"
+	],
+	oranges: [
+		"#fff5eb",
+		"#fd8c3b",
+		"#7f2704"
+	],
+	purples: [
+		"#fcfbfd",
+		"#9e9ac8",
+		"#3f007d"
+	],
+	viridis: [
+		"#440154",
+		"#21918c",
+		"#fde725"
+	],
+	cividis: [
+		"#00224e",
+		"#7d7c78",
+		"#fee838"
+	],
+	rainbow: [
+		"#B41DB4",
+		"#FFFF00",
+		"#00FFFF"
+	]
+};
+const COLORSCALES = Object.keys(COLORSCHEMES);
+/**
+* Returns a function that maps a value to a color using a color scale defined by the given
+* color/threshold values pairs.
+*/
+function getColorScale(colorScalePoints) {
+	if (colorScalePoints.length < 2) throw new Error("Color scale must have at least 2 points");
+	const sortedColorScalePoints = [...colorScalePoints.sort((a, b) => a.value - b.value)];
+	const thresholds = [];
+	for (let i = 1; i < sortedColorScalePoints.length; i++) {
+		const minColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i - 1].color).a;
+		const maxColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i].color).a;
+		const minColor = colorToNumber(sortedColorScalePoints[i - 1].color);
+		const maxColor = colorToNumber(sortedColorScalePoints[i].color);
+		thresholds.push({
+			min: sortedColorScalePoints[i - 1].value,
+			max: sortedColorScalePoints[i].value,
+			minColor,
+			maxColor,
+			minColorAlpha,
+			maxColorAlpha,
+			colorDiff: computeColorDiffUnits(sortedColorScalePoints[i - 1].value, sortedColorScalePoints[i].value, minColor, maxColor)
+		});
+	}
+	return (value) => {
+		if (value < thresholds[0].min) return colorNumberToHex(thresholds[0].minColor, thresholds[0].minColorAlpha);
+		for (const threshold of thresholds) if (value >= threshold.min && value <= threshold.max) return colorNumberToHex(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff), threshold.maxColorAlpha);
+		return colorNumberToHex(thresholds[thresholds.length - 1].maxColor, thresholds[thresholds.length - 1].maxColorAlpha);
+	};
+}
+function computeColorDiffUnits(minValue, maxValue, minColor, maxColor) {
+	const deltaValue = maxValue - minValue;
+	const deltaColorR = (minColor >> 16) % 256 - (maxColor >> 16) % 256;
+	const deltaColorG = (minColor >> 8) % 256 - (maxColor >> 8) % 256;
+	const deltaColorB = minColor % 256 - maxColor % 256;
+	return [
+		deltaColorR / deltaValue,
+		deltaColorG / deltaValue,
+		deltaColorB / deltaValue
+	];
+}
+function colorCell(value, minValue, minColor, colorDiffUnit) {
+	const [colorDiffUnitR, colorDiffUnitG, colorDiffUnitB] = colorDiffUnit;
+	const r = Math.round((minColor >> 16) % 256 - colorDiffUnitR * (value - minValue));
+	const g = Math.round((minColor >> 8) % 256 - colorDiffUnitG * (value - minValue));
+	const b = Math.round(minColor % 256 - colorDiffUnitB * (value - minValue));
+	return r << 16 | g << 8 | b;
+}
+
+//#endregion
+//#region src/helpers/text_helper.ts
+function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
+	return numberOfLines * (textLineHeight + 4) - 4;
+}
+function getCanvas(width = 100, height = 100) {
+	return new OffscreenCanvas(width, height).getContext("2d");
+}
+/**
+* Get the default height of the cell given its style.
+*/
+function getDefaultCellHeight(ctx, cell, locale, colSize) {
+	if (!cell || !cell.isFormula && !cell.content) return 23;
+	let content = "";
+	try {
+		if (!cell.isFormula) {
+			const localeFormat = {
+				format: cell.format,
+				locale
+			};
+			content = formatValue(parseLiteral(cell.content, locale), localeFormat);
+		}
+	} catch {
+		content = CellErrorType.GenericError;
+	}
+	return getCellContentHeight(ctx, content, cell.style, colSize);
+}
+function getCellContentHeight(ctx, content, style, colSize) {
+	return computeMultilineTextSize(ctx, splitTextToWidth(ctx, content, style, style?.wrapping === "wrap" ? colSize - 2 * 4 : void 0), style).height + 2 * 3;
+}
+function getDefaultContextFont(fontSize, bold = false, italic = false) {
+	return `${italic ? "italic" : ""} ${bold ? "bold" : ""} ${fontSize}px ${DEFAULT_FONT}`;
+}
+function computeMultilineTextSize(context, textLines, style = {}, fontUnit = "pt") {
+	if (!textLines.length) return {
+		width: 0,
+		height: 0
+	};
+	const font = computeTextFont(style, fontUnit);
+	const sizes = textLines.map((line) => computeCachedTextDimension(context, line, font));
+	const height = computeTextLinesHeight(sizes[0].height, textLines.length);
+	const width = Math.max(...sizes.map((size) => size.width));
+	if (!style.rotation) return {
+		height,
+		width
+	};
+	const cos = Math.abs(Math.cos(style.rotation));
+	const sin = Math.abs(Math.sin(style.rotation));
+	return {
+		width: width * cos + height * sin,
+		height: sin * width + cos * height
+	};
+}
+function computeTextWidth(context, text, style = {}, fontUnit = "pt") {
+	return computeCachedTextWidth(context, text, computeTextFont(style, fontUnit), style.rotation);
+}
+function computeCachedTextWidth(context, text, font, rotation) {
+	const size = computeCachedTextDimension(context, text, font);
+	if (!rotation) return size.width;
+	const cos = Math.abs(Math.cos(rotation));
+	const sin = Math.abs(Math.sin(rotation));
+	return size.width * cos + size.height * sin;
+}
+const textDimensionsCache = {};
+function computeTextDimension(context, text, style, fontUnit = "pt") {
+	const size = computeCachedTextDimension(context, text, computeTextFont(style, fontUnit));
+	if (!style.rotation) return size;
+	const cos = Math.abs(Math.cos(style.rotation));
+	const sin = Math.abs(Math.sin(style.rotation));
+	return {
+		width: size.width * cos + size.height * sin,
+		height: size.height * cos + size.width * sin
+	};
+}
+function computeCachedTextDimension(context, text, font) {
+	if (!textDimensionsCache[font]) textDimensionsCache[font] = {};
+	if (textDimensionsCache[font][text] === void 0) {
+		context.save();
+		context.font = font;
+		const measure = context.measureText(text);
+		context.restore();
+		const width = measure.width;
+		const height = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+		textDimensionsCache[font][text] = {
+			width,
+			height
+		};
+	}
+	return textDimensionsCache[font][text];
+}
+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 computeTextFontSizeInPixels(style) {
+	return fontSizeInPixels(style?.fontSize || DEFAULT_FONT_SIZE);
+}
+function splitWordToSpecificWidth(ctx, word, width, style) {
+	if (computeTextWidth(ctx, word, style) <= width) return [word];
+	const splitWord = [];
+	let wordPart = "";
+	for (const l of word) if (computeTextWidth(ctx, wordPart + l, style) > width) {
+		splitWord.push(wordPart);
+		wordPart = l;
+	} else wordPart += l;
+	splitWord.push(wordPart);
+	return splitWord;
+}
+/**
+* Return the given text, split in multiple lines if needed. The text will be split in multiple
+* line if it contains NEWLINE characters, or if it's longer than the given width.
+*/
+function splitTextToWidth(ctx, text, style, width) {
+	if (!style) style = {};
+	if (isMarkdownLink(text)) text = parseMarkdownLink(text).label;
+	const brokenText = [];
+	const lines = text.includes("\n") ? text.split("\n") : [text];
+	for (const line of lines) {
+		const words = line.includes(" ") ? line.split(" ") : [line];
+		if (!width) {
+			brokenText.push(line);
+			continue;
+		}
+		let textLine = "";
+		let availableWidth = width;
+		for (const word of words) {
+			const splitWord = splitWordToSpecificWidth(ctx, word, width, style);
+			const lastPart = splitWord.pop();
+			const lastPartWidth = computeTextWidth(ctx, lastPart, style);
+			if (splitWord.length) {
+				if (textLine !== "") {
+					brokenText.push(textLine);
+					textLine = "";
+					availableWidth = width;
+				}
+				splitWord.forEach((wordPart) => {
+					brokenText.push(wordPart);
+				});
+				textLine = lastPart;
+				availableWidth = width - lastPartWidth;
+			} else {
+				const _word = textLine === "" ? lastPart : " " + lastPart;
+				const wordWidth = computeTextWidth(ctx, _word, style);
+				if (wordWidth <= availableWidth) {
+					textLine += _word;
+					availableWidth -= wordWidth;
+				} else {
+					brokenText.push(textLine);
+					textLine = lastPart;
+					availableWidth = width - lastPartWidth;
+				}
+			}
+		}
+		if (textLine !== "") brokenText.push(textLine);
+	}
+	return brokenText;
+}
+/**
+* Return the font size that makes the width of a text match the given line width.
+* Minimum font size is 1.
+*
+* @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
+*/
+function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = .25) {
+	let minFontSize = 1;
+	if (getTextWidth(minFontSize) > lineWidth) return minFontSize;
+	if (getTextWidth(maxFontSize) < lineWidth) return maxFontSize;
+	let fontSize = (minFontSize + maxFontSize) / 2;
+	let currentTextWidth = getTextWidth(fontSize);
+	let iterations = 0;
+	while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
+		if (currentTextWidth >= lineWidth) maxFontSize = (minFontSize + maxFontSize) / 2;
+		else minFontSize = (minFontSize + maxFontSize) / 2;
+		fontSize = (minFontSize + maxFontSize) / 2;
+		currentTextWidth = getTextWidth(fontSize);
+		iterations++;
+	}
+	return fontSize;
+}
+/** Transform a string to lowercase and removes whitespace from both ends of the string*/
+function toTrimmedLowerCase(str) {
+	return str ? str.toLowerCase().trim() : "";
+}
+/**
+* Extract the fontSize from a context font string
+* @param font The (context) font string to parse
+* @returns The fontSize in pixels
+*/
+const pxRegex = /([0-9\.]*)px/;
+function getContextFontSize(font) {
+	return Number(font.match(pxRegex)?.[1]);
+}
+function clipTextWithEllipsis(ctx, text, maxWidth) {
+	let width = computeCachedTextWidth(ctx, text, ctx.font);
+	if (width <= maxWidth) return text;
+	const ellipsis = "…";
+	const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
+	if (width <= ellipsisWidth) return text;
+	let len = text.length;
+	while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+		text = text.substring(0, len);
+		width = computeCachedTextWidth(ctx, text, ctx.font);
+	}
+	return text + ellipsis;
+}
+function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10, highlightText = false) {
+	if (highlightText) {
+		context.save();
+		context.fillStyle = lightenColor(context.fillStyle, DEFAULT_TEXT_HIGHLIGHT_PERCENT);
+	}
+	context.fillText(text, position.x, position.y);
+	if (!underline && !strikethrough) return;
+	const measure = context.measureText(text);
+	const textWidth = measure.width;
+	const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+	const boxHeight = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+	let { x, y } = position;
+	let strikeY = y, underlineY = y;
+	switch (context.textAlign) {
+		case "center":
+			x -= textWidth / 2;
+			break;
+		case "right":
+			x -= textWidth;
+			break;
+	}
+	switch (context.textBaseline) {
+		case "top":
+			underlineY += boxHeight - 2 * strokeWidth;
+			strikeY += boxHeight / 2 - strokeWidth;
+			break;
+		case "middle":
+			underlineY += boxHeight / 2 - strokeWidth;
+			break;
+		case "alphabetic":
+			underlineY += 2 * strokeWidth;
+			strikeY -= 3 * strokeWidth;
+			break;
+		case "bottom":
+			underlineY = y;
+			strikeY -= textHeight / 2 - strokeWidth / 2;
+			break;
+	}
+	if (underline) {
+		context.lineWidth = strokeWidth;
+		context.strokeStyle = context.fillStyle;
+		context.beginPath();
+		context.moveTo(x, underlineY);
+		context.lineTo(x + textWidth, underlineY);
+		context.stroke();
 	}
-	get(id) {
-		if (!this.colors[id]) this.colors[id] = this.availableColors.next();
-		return this.colors[id];
+	if (strikethrough) {
+		context.lineWidth = strokeWidth;
+		context.strokeStyle = context.fillStyle;
+		context.beginPath();
+		context.moveTo(x, strikeY);
+		context.lineTo(x + textWidth, strikeY);
+		context.stroke();
 	}
-};
-const COLORSCHEMES = {
-	greys: [
-		"#ffffff",
-		"#808080",
-		"#000000"
-	],
-	blues: [
-		"#f7fbff",
-		"#6aaed6",
-		"#08306b"
-	],
-	reds: [
-		"#fff5f0",
-		"#fb694a",
-		"#67000d"
-	],
-	greens: [
-		"#f7fcf5",
-		"#73c476",
-		"#00441b"
-	],
-	oranges: [
-		"#fff5eb",
-		"#fd8c3b",
-		"#7f2704"
-	],
-	purples: [
-		"#fcfbfd",
-		"#9e9ac8",
-		"#3f007d"
-	],
-	viridis: [
-		"#440154",
-		"#21918c",
-		"#fde725"
-	],
-	cividis: [
-		"#00224e",
-		"#7d7c78",
-		"#fee838"
-	],
-	rainbow: [
-		"#B41DB4",
-		"#FFFF00",
-		"#00FFFF"
-	]
-};
-const COLORSCALES = Object.keys(COLORSCHEMES);
+	if (highlightText) context.restore();
+}
+function sliceTextToFitWidth(context, width, text, style, fontUnit = "pt") {
+	if (computeTextWidth(context, text, style, fontUnit) <= width) return text;
+	const ellipsis = "...";
+	const ellipsisWidth = computeTextWidth(context, ellipsis, style, fontUnit);
+	if (ellipsisWidth >= width) return "";
+	let lowerBoundLen = 1;
+	let upperBoundLen = text.length;
+	let currentWidth;
+	while (lowerBoundLen <= upperBoundLen) {
+		const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
+		currentWidth = computeTextWidth(context, text.slice(0, currentLen), style, fontUnit);
+		if (currentWidth + ellipsisWidth > width) upperBoundLen = currentLen - 1;
+		else lowerBoundLen = currentLen + 1;
+	}
+	const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
+	return slicedText ? slicedText + ellipsis : "";
+}
 /**
-* Returns a function that maps a value to a color using a color scale defined by the given
-* color/threshold values pairs.
+* Return the position to draw text on a rotated canvas to ensure that the rotated text alignment correspond
+* with to original's text vertical and horizontal alignment.
 */
-function getColorScale(colorScalePoints) {
-	if (colorScalePoints.length < 2) throw new Error("Color scale must have at least 2 points");
-	const sortedColorScalePoints = [...colorScalePoints.sort((a, b) => a.value - b.value)];
-	const thresholds = [];
-	for (let i = 1; i < sortedColorScalePoints.length; i++) {
-		const minColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i - 1].color).a;
-		const maxColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i].color).a;
-		const minColor = colorToNumber(sortedColorScalePoints[i - 1].color);
-		const maxColor = colorToNumber(sortedColorScalePoints[i].color);
-		thresholds.push({
-			min: sortedColorScalePoints[i - 1].value,
-			max: sortedColorScalePoints[i].value,
-			minColor,
-			maxColor,
-			minColorAlpha,
-			maxColorAlpha,
-			colorDiff: computeColorDiffUnits(sortedColorScalePoints[i - 1].value, sortedColorScalePoints[i].value, minColor, maxColor)
+function computeRotationPosition(rect, style) {
+	if (!style.rotation || style.rotation % (Math.PI * 2) === 0) return rect;
+	let { x, y } = rect;
+	const cos = Math.cos(-style.rotation);
+	const sin = Math.sin(-style.rotation);
+	const width = rect.textWidth - 2 * 4;
+	const height = rect.textHeight;
+	const center = style.align === "center";
+	const rotateTowardCellCenter = style.align === "left" === sin < 0;
+	const sh = sin * height;
+	const sw = Math.abs(sin * width);
+	const ch = cos * height;
+	if (style.verticalAlign === "top") if (center) {
+		y += sw / 2;
+		x -= sh / 2;
+	} else if (rotateTowardCellCenter) x -= sh;
+	else y += sw;
+	else if (!style.verticalAlign || style.verticalAlign === "bottom") {
+		y += height - ch;
+		if (center) {
+			y -= sw / 2;
+			x -= sh / 2;
+		} else if (rotateTowardCellCenter) {
+			x -= sh;
+			y -= sw;
+		}
+	} else if (center) {
+		x -= sh / 2;
+		y -= height / 2;
+		if (rotateTowardCellCenter) y += sh;
+		else y -= sh;
+	} else if (rotateTowardCellCenter) {
+		x -= sh;
+		y -= sw / 2;
+	} else y += sw / 2 + ch / 4;
+	return {
+		x: cos * x - sin * y,
+		y: cos * y + sin * x
+	};
+}
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_colorscale_plugin.ts
+/** This is a chartJS plugin that will draw the heatmap colorscale at the chart legend position */
+const chartColorScalePlugin = {
+	id: "chartColorScalePlugin",
+	afterDatasetsDraw(chart, args, options) {
+		if (!options.position || options.position === "none" || !options.colorScale.length) return;
+		const ctx = chart.ctx;
+		ctx.save();
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.miterLimit = 1;
+		const gradientHeight = (chart.chartArea.bottom - chart.chartArea.top) / 2;
+		const gradientWidth = 10;
+		const gradientX = options.position === "left" ? 20 : ctx.canvas.width - 70;
+		const gradientY = chart.chartArea.top;
+		const gradient = ctx.createLinearGradient(0, gradientY + gradientHeight, 0, gradientY);
+		const step = 1 / (options.colorScale.length - 1);
+		options.colorScale.forEach((color, index) => {
+			gradient.addColorStop(index * step, color);
 		});
+		ctx.fillStyle = gradient;
+		ctx.fillRect(gradientX, gradientY, gradientWidth, gradientHeight);
+		ctx.fillStyle = options.fontColor ?? "black";
+		ctx.font = getDefaultContextFont(12);
+		ctx.textAlign = "left";
+		let minValue = Math.round(options.minValue * 100) / 100;
+		let maxValue = Math.round(options.maxValue * 100) / 100;
+		if (options.minValue === options.maxValue) {
+			minValue -= 1;
+			maxValue += 1;
+		}
+		const formattedMaxValue = humanizeNumber({
+			value: maxValue,
+			format: void 0
+		}, options.locale);
+		const formattedMinValue = humanizeNumber({
+			value: minValue,
+			format: void 0
+		}, options.locale);
+		ctx.fillText(formattedMinValue, gradientX + gradientWidth + 5, gradientY + gradientHeight - 6);
+		ctx.fillText(formattedMaxValue, gradientX + gradientWidth + 5, gradientY + 6);
+		ctx.restore();
 	}
-	return (value) => {
-		if (value < thresholds[0].min) return colorNumberToHex(thresholds[0].minColor, thresholds[0].minColorAlpha);
-		for (const threshold of thresholds) if (value >= threshold.min && value <= threshold.max) return colorNumberToHex(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff), threshold.maxColorAlpha);
-		return colorNumberToHex(thresholds[thresholds.length - 1].maxColor, thresholds[thresholds.length - 1].maxColorAlpha);
+};
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_funnel_chart.ts
+function getFunnelChartController() {
+	if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
+	return class FunnelChartController extends globalThis.Chart.BarController {
+		static id = "funnel";
+		static defaults = {
+			...globalThis.Chart?.BarController.defaults,
+			dataElementType: "funnel",
+			animation: { duration: (ctx) => {
+				if (ctx.type !== "data") return 1e3;
+				return 1e3 * (ctx.raw[1] / Math.max(...ctx.dataset.data.map((data) => data[1])));
+			} }
+		};
+		/** Called at each chart render to update the elements of the chart (FunnelChartElement) with the updated data */
+		updateElements(rects, start, count, mode) {
+			super.updateElements(rects, start, count, mode);
+			for (let i = start; i < start + count; i++) {
+				const rect = rects[i];
+				this.updateElement(rect, i, { nextElement: rects[i + 1] }, mode);
+			}
+		}
 	};
 }
-function computeColorDiffUnits(minValue, maxValue, minColor, maxColor) {
-	const deltaValue = maxValue - minValue;
-	const deltaColorR = (minColor >> 16) % 256 - (maxColor >> 16) % 256;
-	const deltaColorG = (minColor >> 8) % 256 - (maxColor >> 8) % 256;
-	const deltaColorB = minColor % 256 - maxColor % 256;
-	return [
-		deltaColorR / deltaValue,
-		deltaColorG / deltaValue,
-		deltaColorB / deltaValue
-	];
+function getFunnelChartElement() {
+	if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
+	/**
+	* Similar to a bar chart element, but it's a trapezoid rather than a rectangle. The top is of width
+	* `width`, and the bottom is of width `nextElementWidth`.
+	*/
+	return class FunnelChartElement extends globalThis.Chart.BarElement {
+		static id = "funnel";
+		/** Overwrite this to draw a trapezoid rather then a rectangle */
+		draw(ctx) {
+			ctx.save();
+			const { x, y, height, nextElement, base, options } = this.getProps([
+				"x",
+				"y",
+				"width",
+				"height",
+				"nextElement",
+				"base",
+				"options"
+			]);
+			const width = getElementWidth(this);
+			const offset = (width - (nextElement ? getElementWidth(nextElement) : 0)) / 2;
+			const startX = Math.min(x, base);
+			const startY = y - height / 2;
+			ctx.fillStyle = options.backgroundColor;
+			ctx.beginPath();
+			ctx.moveTo(startX, startY);
+			ctx.lineTo(startX + width, startY);
+			ctx.lineTo(startX + width - offset, startY + height);
+			ctx.lineTo(startX + offset, startY + height);
+			ctx.closePath();
+			ctx.fill();
+			if (options.borderWidth) {
+				ctx.strokeStyle = options.borderColor;
+				ctx.lineWidth = options.borderWidth;
+				ctx.stroke();
+			}
+			ctx.restore();
+		}
+		/** Check if the mouse is inside the trapezoid */
+		inRange(mouseX, mouseY) {
+			const { x, y, height, nextElement, base } = this.getProps([
+				"x",
+				"y",
+				"width",
+				"height",
+				"nextElement",
+				"base",
+				"options"
+			]);
+			const width = getElementWidth(this);
+			const nextElementWidth = nextElement ? getElementWidth(nextElement) : 0;
+			const startX = Math.min(x, base);
+			const startY = y - height / 2;
+			if (mouseY < startY || mouseY > startY + height) return false;
+			const offset = (width - nextElementWidth) / 2;
+			const left = startX + offset * (mouseY - startY) / height;
+			const right = startX + width - offset * (mouseY - startY) / height;
+			if (mouseX < left || mouseX > right) return false;
+			return true;
+		}
+	};
 }
-function colorCell(value, minValue, minColor, colorDiffUnit) {
-	const [colorDiffUnitR, colorDiffUnitG, colorDiffUnitB] = colorDiffUnit;
-	const r = Math.round((minColor >> 16) % 256 - colorDiffUnitR * (value - minValue));
-	const g = Math.round((minColor >> 8) % 256 - colorDiffUnitG * (value - minValue));
-	const b = Math.round(minColor % 256 - colorDiffUnitB * (value - minValue));
-	return r << 16 | g << 8 | b;
+/**
+* Get an element width.
+*
+* The property width is undefined during animations, we need to compute it manually.
+*/
+function getElementWidth(element) {
+	const { x, base } = element.getProps(["x", "base"]);
+	return Math.max(x, base) - Math.min(x, base);
 }
+/**
+* Position the tooltip inside the trapezoid.
+* The default position for tooltips of bar elements is at the end of rectangle, which is not ideal for trapezoids.
+*/
+const funnelTooltipPositioner = function(elements) {
+	if (!elements.length) return {
+		x: 0,
+		y: 0
+	};
+	const { x, y, base, width, height } = elements[0].element.getProps([
+		"x",
+		"y",
+		"width",
+		"height",
+		"base"
+	]);
+	const startX = Math.min(x, base);
+	const startY = y - height / 2;
+	return {
+		x: startX + width * 2 / 3,
+		y: startY + height / 2
+	};
+};
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts
+const chartMinorGridPlugin = {
+	id: "o-spreadsheet-minor-gridlines",
+	beforeDatasetsDraw(chart) {
+		const ctx = chart.ctx;
+		const chartArea = chart.chartArea;
+		if (!chartArea) return;
+		for (const scaleId in chart.scales) {
+			const scale = chart.scales[scaleId];
+			const options = scale.options;
+			const minor = options?.grid?.minor;
+			if (!minor?.display) continue;
+			const showMajorGrid = options?.grid?.display;
+			const ticks = scale.ticks;
+			if (!ticks || ticks.length < 2) continue;
+			ctx.save();
+			ctx.lineWidth = 1;
+			ctx.strokeStyle = minor.color ?? options?.grid?.color ?? "#e6e6e6";
+			for (let i = 0; i < ticks.length - 1; i++) {
+				const start = scale.getPixelForTick(i);
+				const end = scale.getPixelForTick(i + 1);
+				if (!isFinite(start) || !isFinite(end)) continue;
+				for (let j = showMajorGrid ? 1 : 0; j < 4; j++) {
+					const ratio = j / 4;
+					const position = Math.round(start + (end - start) * ratio) + .5;
+					ctx.beginPath();
+					if (scale.isHorizontal()) {
+						ctx.moveTo(position, chartArea.top);
+						ctx.lineTo(position, chartArea.bottom);
+					} else {
+						ctx.moveTo(chartArea.left, position);
+						ctx.lineTo(chartArea.right, position);
+					}
+					ctx.stroke();
+				}
+			}
+			ctx.restore();
+		}
+	}
+};
 
 //#endregion
 //#region src/xlsx/constants.ts
@@ -10126,6 +10138,7 @@ function getChartBackgroundColor({ background }, getters) {
 //#endregion
 //#region src/components/figures/chart/chartJs/chartjs_show_values_plugin.ts
 const MINIMAL_VERTICAL_DISTANCE = 13;
+const HORIZONTAL_PADDING = 3;
 function isLineOverlayOnBarChart(options, dataset) {
 	return options.type === "bar" && dataset.type === "line";
 }
@@ -10135,175 +10148,276 @@ const chartShowValuesPlugin = {
 	afterDatasetsDraw(chart, args, options) {
 		if (!options.showValues) return;
 		if (!chart._metasets?.[0]?.data) return;
-		const ctx = chart.ctx;
-		ctx.save();
-		ctx.textAlign = "center";
-		ctx.textBaseline = "middle";
-		ctx.miterLimit = 1;
 		switch (options.type) {
 			case "pie":
-				drawPieChartValues(chart, options, ctx);
+				drawPieValues(chart, options);
 				break;
 			case "line":
 			case "scatter":
+				drawLineValues(chart, options);
+				break;
 			case "combo":
 			case "waterfall":
+				drawComboValues(chart, options);
+				break;
 			case "radar":
-				drawLineOrBarOrRadarChartValues(chart, options, ctx);
+				drawRadarValues(chart, options);
 				break;
 			case "bar":
-				options.horizontal ? drawHorizontalBarChartValues(chart, options, ctx) : drawLineOrBarOrRadarChartValues(chart, options, ctx);
+				options.horizontal ? drawHorizontalBarValues(chart, options) : drawVerticalBarValues(chart, options);
 				break;
 			case "pyramid":
-				drawHorizontalBarChartValues(chart, options, ctx);
+				drawHorizontalBarValues(chart, options);
 				break;
 			case "calendar":
-				drawBarChartValues(chart, options, ctx);
+				drawCalendarValues(chart, options);
 				break;
 			case "bubble":
-				drawBubbleChartValues(chart, options, ctx);
+				drawBubbleValues(chart, options);
 				break;
 			case "funnel":
-				drawHorizontalBarChartValues(chart, options, ctx);
+				drawFunnelValues(chart, options);
 				break;
 		}
-		ctx.restore();
 	}
 };
-function drawTextWithBackground(text, x, y, ctx) {
-	ctx.lineWidth = 3;
-	ctx.strokeText(text, x, y);
-	ctx.lineWidth = 1;
-	ctx.fillText(text, x, y);
-}
-function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
+function drawValues(args) {
+	const { chart, options, getNumberValue, direction } = args;
+	const ctx = chart.ctx;
+	ctx.save();
+	ctx.textAlign = "center";
+	ctx.textBaseline = "middle";
+	ctx.miterLimit = 1;
 	const textsPositions = {};
 	for (const dataset of chart._metasets) {
-		if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden || isLineOverlayOnBarChart(options, dataset)) continue;
-		const yAxisScale = chart.scales[dataset.yAxisID];
+		if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) continue;
 		for (let i = 0; i < dataset._parsed.length; i++) {
-			const parsedValue = dataset._parsed[i];
-			const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
-			if (isNaN(value)) continue;
-			const point = dataset.data[i];
-			const xPosition = point.x;
-			let yPosition = 0;
-			if (chart.config.type === "line" || chart.config.type === "radar") yPosition = value < 0 ? point.y + 10 : point.y - 10;
-			else if (chart.config.type === "bubble") yPosition = point.y;
-			else {
-				const yZeroLine = yAxisScale.getPixelForValue(0);
-				const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
-				const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-				if (distanceFromAxisOrigin < textHeight) yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
-				else yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
-			}
-			if (!textsPositions[xPosition]) textsPositions[xPosition] = [];
-			for (const otherPosition of textsPositions[xPosition] || []) if (Math.abs(otherPosition - yPosition) < MINIMAL_VERTICAL_DISTANCE) yPosition = otherPosition + MINIMAL_VERTICAL_DISTANCE * (value < 0 ? 1 : -1);
-			textsPositions[xPosition].push(yPosition);
-			ctx.fillStyle = point.options.backgroundColor;
-			ctx.strokeStyle = options.background(Number(value), dataset, i) || "#ffffff";
-			drawTextWithBackground(options.callback(Number(value), dataset, i), xPosition, yPosition, ctx);
+			const numberValue = getNumberValue(dataset, i);
+			if (numberValue === void 0 || isNaN(numberValue)) continue;
+			const chartElement = dataset.data[i];
+			const elementColor = chartElement.options.backgroundColor;
+			if (!elementColor || colorToRGBA(elementColor).a !== 1) continue;
+			const valueToDisplay = options.callback(numberValue, dataset, i);
+			const textSize = getTextDimensions(valueToDisplay, ctx);
+			const callbackArgs = {
+				dataset,
+				chartElement,
+				numberValue,
+				valueIndex: i,
+				textSize,
+				options,
+				chart
+			};
+			const position = args.getValuePosition(callbackArgs);
+			if (args.shouldSkipValue?.(callbackArgs)) continue;
+			if (direction === "vertical") {
+				const key = Math.round(position.x);
+				if (!textsPositions[key]) textsPositions[key] = [];
+				for (const otherPosition of textsPositions[key] || []) if (Math.abs(otherPosition - position.y) < MINIMAL_VERTICAL_DISTANCE) position.y = otherPosition + MINIMAL_VERTICAL_DISTANCE * (numberValue < 0 ? 1 : -1);
+				textsPositions[key].push(position.y);
+			} else {
+				const key = Math.round(position.y);
+				if (!textsPositions[key]) textsPositions[key] = [];
+				for (const otherPosition of textsPositions[key]) if (Math.abs(otherPosition - position.x) < textSize.width) position.x = numberValue < 0 ? otherPosition - textSize.width - HORIZONTAL_PADDING : otherPosition + textSize.width + HORIZONTAL_PADDING;
+				textsPositions[key].push(position.x);
+			}
+			const { strokeColor, textColor } = args.getTextColors(callbackArgs);
+			if (!!strokeColor) {
+				ctx.strokeStyle = strokeColor;
+				ctx.lineWidth = 3;
+				ctx.strokeText(valueToDisplay, position.x, position.y);
+			}
+			ctx.fillStyle = textColor;
+			ctx.lineWidth = 1;
+			ctx.fillText(valueToDisplay, position.x, position.y);
 		}
 	}
+	ctx.restore();
 }
-function drawBarChartValues(chart, options, ctx) {
-	const yMax = chart.chartArea.bottom;
-	const yMin = chart.chartArea.top;
-	for (const dataset of chart._metasets) {
-		if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) continue;
-		const yAxisScale = chart.scales[dataset.yAxisID];
-		for (let i = 0; i < dataset._parsed.length; i++) {
-			const parsedValue = dataset._parsed[i];
-			const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
-			if (isNaN(value)) continue;
-			const point = dataset.data[i];
-			const xPosition = point.x;
-			let yPosition = 0;
-			const yZeroLine = yAxisScale.getPixelForValue(0);
-			const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
-			const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-			if (distanceFromAxisOrigin < textHeight) yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
-			else yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
-			yPosition = Math.min(yPosition, yMax);
-			yPosition = Math.max(yPosition, yMin);
-			ctx.strokeStyle = point.options.backgroundColor;
-			ctx.fillStyle = options.background(Number(value), dataset, i) || "#ffffff";
-			const valueToDisplay = options.callback(Number(value), dataset, i);
-			const measures = ctx.measureText(valueToDisplay);
-			if (measures.actualBoundingBoxAscent + measures.actualBoundingBoxDescent + 2 > Math.abs(point.height) - 2) continue;
-			drawTextWithBackground(valueToDisplay, xPosition, yPosition, ctx);
-		}
-	}
-}
-function drawBubbleChartValues(chart, options, ctx) {
-	const yMax = chart.chartArea.bottom;
-	const yMin = chart.chartArea.top;
-	const textsPositions = {};
-	for (const dataset of chart._metasets) for (let i = 0; i < dataset._parsed.length; i++) {
-		const value = dataset._parsed[i].y;
-		if (isNaN(value)) continue;
-		const point = dataset.data[i];
-		const xPosition = point.x;
-		let yPosition = Math.max(Math.min(point.y, yMax), yMin);
-		if (!textsPositions[xPosition]) textsPositions[xPosition] = [];
-		for (const otherPosition of textsPositions[xPosition] || []) if (Math.abs(otherPosition - yPosition) < MINIMAL_VERTICAL_DISTANCE) yPosition = otherPosition + MINIMAL_VERTICAL_DISTANCE * (value < 0 ? 1 : -1);
-		textsPositions[xPosition].push(yPosition);
-		const color = point.options.backgroundColor ?? "#ffffff";
-		if (hexToHSLA(toHex(color)).a === 1) ctx.fillStyle = chartFontColor(color);
-		else ctx.fillStyle = "#000000";
-		const valueToDisplay = options.callback(Number(value), dataset, i);
-		ctx.fillText(valueToDisplay, xPosition, yPosition);
-	}
-}
-function drawHorizontalBarChartValues(chart, options, ctx) {
-	const textsPositions = {};
-	for (const dataset of chart._metasets) {
-		if (isTrendLineAxis(dataset.xAxisID) || isLineOverlayOnBarChart(options, dataset)) continue;
-		const xZeroLine = chart.scales[dataset.xAxisID].getPixelForValue(0);
-		for (let i = 0; i < dataset._parsed.length; i++) {
-			const value = Number(dataset._parsed[i].x);
-			if (isNaN(value)) continue;
-			const displayValue = options.callback(value, dataset, i);
-			const point = dataset.data[i];
-			const yPosition = point.y;
-			const textWidth = computeTextWidth(ctx, displayValue, { fontSize: globalThis.Chart?.defaults.font.size ?? 12 }, "px");
-			const distanceFromAxisOrigin = Math.abs(point.x - xZeroLine);
-			const PADDING = 3;
+function drawVerticalBarValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+		getValuePosition: getVerticalBarValuePosition,
+		shouldSkipValue: ({ dataset }) => isLineOverlayOnBarChart(options, dataset),
+		getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+	});
+}
+function drawRadarValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => Number(dataset._parsed[i].r),
+		getValuePosition: ({ chartElement }) => ({
+			x: chartElement.x,
+			y: chartElement.y - 10
+		}),
+		shouldSkipValue: () => false,
+		getTextColors: chartElementColoredTextWithChartBackgroundHalo
+	});
+}
+function drawLineValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+		getValuePosition: ({ chartElement }) => ({
+			x: chartElement.x,
+			y: chartElement.y - 10
+		}),
+		shouldSkipValue: () => false,
+		getTextColors: chartElementColoredTextWithChartBackgroundHalo
+	});
+}
+function drawComboValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+		getValuePosition: (args) => args.dataset.type === "line" ? {
+			x: args.chartElement.x,
+			y: args.chartElement.y - 10
+		} : getVerticalBarValuePosition(args),
+		shouldSkipValue: () => false,
+		getTextColors: (args) => args.dataset.type === "line" ? chartElementColoredTextWithChartBackgroundHalo(args) : chartBackgroundColoredTextWithElementColoredHalo(args)
+	});
+}
+function drawCalendarValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => dataset._parsed[i].y,
+		getValuePosition: ({ chartElement }) => ({
+			x: chartElement.x,
+			y: chartElement.y + chartElement.height / 2
+		}),
+		shouldSkipValue: ({ chartElement, textSize }) => textSize.height + 2 > Math.abs(chartElement.height) - 2,
+		getTextColors: ({ chartElement }) => ({
+			strokeColor: void 0,
+			textColor: chartFontColor(chartElement.options.backgroundColor)
+		})
+	});
+}
+function drawBubbleValues(chart, options) {
+	const canDrawTextInsideBubble = (chartElement, textSize) => {
+		const radius = chartElement.options.radius ?? globalThis.Chart?.defaults.elements.point.radius ?? 3;
+		return textSize.height < radius * 2;
+	};
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => dataset._parsed[i].y,
+		getValuePosition: ({ chartElement, textSize }) => ({
+			x: chartElement.x,
+			y: canDrawTextInsideBubble(chartElement, textSize) ? chartElement.y : chartElement.y - 10
+		}),
+		shouldSkipValue: () => false,
+		getTextColors: (args) => {
+			return canDrawTextInsideBubble(args.chartElement, args.textSize) ? chartBackgroundColoredTextWithElementColoredHalo(args) : chartElementColoredTextWithChartBackgroundHalo(args);
+		}
+	});
+}
+function drawHorizontalBarValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "horizontal",
+		getNumberValue: (dataset, i) => dataset._parsed[i].x,
+		getValuePosition: ({ chartElement, numberValue, textSize, dataset }) => {
+			const xZeroLine = chart.scales[dataset.xAxisID].getPixelForValue(0);
+			const distanceFromAxisOrigin = Math.abs(chartElement.x - xZeroLine);
 			let xPosition;
-			if (distanceFromAxisOrigin < textWidth) xPosition = value < 0 ? xZeroLine - textWidth / 2 - PADDING : xZeroLine + textWidth / 2 + PADDING;
-			else xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
-			if (!textsPositions[yPosition]) textsPositions[yPosition] = [];
-			for (const otherPosition of textsPositions[yPosition]) if (Math.abs(otherPosition - xPosition) < textWidth) xPosition = value < 0 ? otherPosition - textWidth - PADDING : otherPosition + textWidth + PADDING;
-			textsPositions[yPosition].push(xPosition);
-			ctx.strokeStyle = point.options.backgroundColor;
-			ctx.fillStyle = options.background(Number(value), dataset, i) || "#ffffff";
-			drawTextWithBackground(displayValue, xPosition, yPosition, ctx);
-		}
-	}
-}
-function drawPieChartValues(chart, options, ctx) {
-	for (const dataset of chart._metasets) for (let i = 0; i < dataset._parsed.length; i++) {
-		const value = Number(dataset._parsed[i]);
-		if (isNaN(value) || value === 0) continue;
-		const bar = dataset.data[i];
-		const { startAngle, endAngle, innerRadius, outerRadius } = bar;
-		const midAngle = (startAngle + endAngle) / 2;
-		const midRadius = (innerRadius + outerRadius) / 2;
-		const x = bar.x + midRadius * Math.cos(midAngle);
-		const y = bar.y + midRadius * Math.sin(midAngle);
-		const displayValue = options.callback(value, dataset, i);
-		const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-		const textWidth = computeTextWidth(ctx, displayValue, { fontSize: textHeight }, "px");
-		const radius = outerRadius - innerRadius;
-		if (textWidth >= radius || radius < textHeight) continue;
-		const sliceAngle = endAngle - startAngle;
-		const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
-		if (sliceAngle < Math.PI / 2 && (textWidth >= midWidth || midWidth < textHeight)) continue;
-		const background = options.background(Number(value), dataset, i);
-		ctx.fillStyle = chartFontColor(background);
-		ctx.strokeStyle = background || "#ffffff";
-		drawTextWithBackground(displayValue, x, y, ctx);
-	}
+			const sign = numberValue < 0 ? -1 : 1;
+			if (distanceFromAxisOrigin < textSize.width) xPosition = xZeroLine + sign * (textSize.width / 2 + HORIZONTAL_PADDING);
+			else xPosition = chartElement.x - sign * (chartElement.width / 2);
+			return {
+				x: xPosition,
+				y: chartElement.y
+			};
+		},
+		shouldSkipValue: ({ dataset }) => isLineOverlayOnBarChart(options, dataset),
+		getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+	});
+}
+function drawFunnelValues(chart, options) {
+	drawValues({
+		chart,
+		options,
+		direction: "horizontal",
+		getNumberValue: (dataset, i) => dataset._parsed[i].x,
+		getValuePosition: ({ chartElement }) => ({
+			x: chartElement.x - chartElement.width / 2,
+			y: chartElement.y
+		}),
+		shouldSkipValue: () => false,
+		getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+	});
+}
+function drawPieValues(chart, options) {
+	const getSliceDimensions = (chartElement) => {
+		const { startAngle, endAngle, innerRadius, outerRadius } = chartElement;
+		return {
+			midAngle: (startAngle + endAngle) / 2,
+			midRadius: (innerRadius + outerRadius) / 2
+		};
+	};
+	drawValues({
+		chart,
+		options,
+		direction: "vertical",
+		getNumberValue: (dataset, i) => Number(dataset._parsed[i]),
+		getValuePosition: ({ chartElement }) => {
+			const { midAngle, midRadius } = getSliceDimensions(chartElement);
+			return {
+				x: chartElement.x + midRadius * Math.cos(midAngle),
+				y: chartElement.y + midRadius * Math.sin(midAngle)
+			};
+		},
+		shouldSkipValue: ({ chartElement, textSize }) => {
+			const { midRadius } = getSliceDimensions(chartElement);
+			const sliceAngle = chartElement.endAngle - chartElement.startAngle;
+			const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
+			return sliceAngle < Math.PI / 2 && (textSize.width >= midWidth || midWidth < textSize.height);
+		},
+		getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+	});
+}
+function getTextDimensions(text, ctx) {
+	return computeCachedTextDimension(ctx, text, computeTextFont({ fontSize: globalThis.Chart?.defaults.font.size ?? 12 }, "px"));
+}
+function chartBackgroundColoredTextWithElementColoredHalo(args) {
+	const { dataset, numberValue, valueIndex, chartElement, options } = args;
+	return {
+		strokeColor: chartElement.options.backgroundColor,
+		textColor: options.background(numberValue, dataset, valueIndex) || "#ffffff"
+	};
+}
+function chartElementColoredTextWithChartBackgroundHalo(args) {
+	const { dataset, numberValue, valueIndex, chartElement, options } = args;
+	return {
+		strokeColor: options.background(numberValue, dataset, valueIndex) || "#ffffff",
+		textColor: chartElement.options.backgroundColor
+	};
+}
+function getVerticalBarValuePosition(args) {
+	const { chartElement, numberValue, dataset, textSize, chart } = args;
+	const yZeroLine = chart.scales[dataset.yAxisID].getPixelForValue(0);
+	const distanceFromAxisOrigin = Math.abs(yZeroLine - chartElement.y);
+	const sign = numberValue < 0 ? -1 : 1;
+	let yPosition = 0;
+	if (distanceFromAxisOrigin < textSize.height) yPosition = yZeroLine - sign * (textSize.height / 2);
+	else yPosition = chartElement.y + sign * (chartElement.height / 2);
+	return {
+		x: chartElement.x,
+		y: yPosition
+	};
 }
 
 //#endregion
@@ -11160,6 +11274,7 @@ function getRadarChartDatasets(definition, args) {
 			hidden,
 			borderColor,
 			backgroundColor: borderColor,
+			pointBackgroundColor: borderColor,
 			pointRadius: definition.hideDataMarkers ? 0 : 3
 		};
 		if (fill) {
@@ -12072,11 +12187,11 @@ function drawScoreChart(structure, canvas, zoom = 1) {
 	if (structure.baseline) {
 		ctx.font = structure.baseline.style.font;
 		ctx.fillStyle = structure.baseline.style.color;
-		drawDecoratedText(ctx, structure.baseline.text, structure.baseline.position, structure.baseline.style.underline, structure.baseline.style.strikethrough);
+		drawDecoratedText(ctx, structure.baseline.text, structure.baseline.position, structure.baseline.style.underline, structure.baseline.style.strikethrough, void 0, structure.baseline.style.highlightText);
 	}
 	if (structure.baselineArrow && structure.baselineArrow.style.size > 0 && Path2DConstructor) {
 		ctx.save();
-		ctx.fillStyle = structure.baselineArrow.style.color;
+		ctx.fillStyle = structure.baselineArrow.style.highlight ? lightenColor(structure.baselineArrow.style.color, DEFAULT_TEXT_HIGHLIGHT_PERCENT) : structure.baselineArrow.style.color;
 		ctx.translate(structure.baselineArrow.position.x, structure.baselineArrow.position.y);
 		const ratio = structure.baselineArrow.style.size / 10;
 		ctx.scale(ratio, ratio);
@@ -12094,18 +12209,18 @@ function drawScoreChart(structure, canvas, zoom = 1) {
 		const descr = structure.baselineDescr;
 		ctx.font = descr.style.font;
 		ctx.fillStyle = descr.style.color;
-		ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
+		drawDecoratedText(ctx, clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position, void 0, void 0, void 0, structure.baseline?.style.highlightText);
 	}
 	if (structure.key) {
 		ctx.font = structure.key.style.font;
 		ctx.fillStyle = structure.key.style.color;
-		drawDecoratedText(ctx, clipTextWithEllipsis(ctx, structure.key.text, availableWidth - structure.key.position.x), structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
+		drawDecoratedText(ctx, clipTextWithEllipsis(ctx, structure.key.text, availableWidth - structure.key.position.x), structure.key.position, structure.key.style.underline, structure.key.style.strikethrough, void 0, structure.key.style.highlightText);
 	}
 	if (structure.keyDescr) {
 		const descr = structure.keyDescr;
 		ctx.font = structure.keyDescr?.style.font ?? descr.style.font;
 		ctx.fillStyle = descr.style.color;
-		ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
+		drawDecoratedText(ctx, clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position, void 0, void 0, void 0, structure.key?.style.highlightText);
 	}
 	if (structure.progressBar) {
 		ctx.fillStyle = structure.progressBar.style.backgroundColor;
@@ -12329,29 +12444,34 @@ var ScorecardChartConfigBuilder = class {
 				color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
 				font: getDefaultContextFont(keyValueFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
 				strikethrough: this.runtime.keyValueStyle?.strikethrough,
-				underline: this.runtime.keyValueStyle?.underline
+				underline: this.runtime.keyValueStyle?.underline,
+				highlightText: this.runtime.keyHighlight
 			},
 			keyDescr: {
 				color: this.runtime.keyValueDescrStyle?.textColor || this.runtime.fontColor,
 				font: getDefaultContextFont(keyValueDescrFontSize, this.runtime.keyValueDescrStyle?.bold, this.runtime.keyValueDescrStyle?.italic),
 				strikethrough: this.runtime.keyValueDescrStyle?.strikethrough,
-				underline: this.runtime.keyValueDescrStyle?.underline
+				underline: this.runtime.keyValueDescrStyle?.underline,
+				highlightText: this.runtime.keyHighlight
 			},
 			baselineValue: {
 				font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
 				strikethrough: this.runtime.baselineStyle?.strikethrough,
 				underline: this.runtime.baselineStyle?.underline,
-				color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor
+				color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor,
+				highlightText: this.runtime.baselineHighlight
 			},
 			baselineDescr: {
 				font: getDefaultContextFont(baselineDescrFontSize, this.runtime.baselineDescrStyle?.bold, this.runtime.baselineDescrStyle?.italic),
 				strikethrough: this.runtime.baselineDescrStyle?.strikethrough,
 				underline: this.runtime.baselineDescrStyle?.underline,
-				color: this.runtime.baselineDescrStyle?.textColor ?? this.secondaryFontColor
+				color: this.runtime.baselineDescrStyle?.textColor ?? this.secondaryFontColor,
+				highlightText: this.runtime.baselineHighlight
 			},
 			baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar ? void 0 : {
 				size: this.keyValue ? .8 * baselineValueFontSize : 0,
-				color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor
+				color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor,
+				highlight: this.runtime.baselineHighlight
 			}
 		};
 	}
@@ -12447,11 +12567,14 @@ var ScorecardChart = class extends Component {
 		});
 		onWillUnmount(() => resizeObserver.disconnect());
 	}
+	config(canvasRect, zoom) {
+		return getScorecardConfiguration(getZoomedRect(1 / zoom, canvasRect), this.runtime);
+	}
 	createChart() {
 		const canvas = this.canvas();
 		if (!canvas) return;
 		const zoom = this.env.model.getters.getViewportZoomLevel();
-		drawScoreChart(getScorecardConfiguration(getZoomedRect(1 / zoom, canvas.getBoundingClientRect()), this.runtime), canvas, zoom);
+		drawScoreChart(this.config(canvas.getBoundingClientRect(), zoom), canvas, zoom);
 	}
 };
 
@@ -28055,7 +28178,7 @@ function filterInvalidCalendarDataPoints(labels, datasets) {
 */
 function filterInvalidHierarchicalPoints(values, hierarchy) {
 	const numberOfDataPoints = Math.max(values.length, ...hierarchy.map((dataset) => dataset.data?.length || 0));
-	const isEmpty = (value) => value === null || value === "";
+	const isEmpty = (value) => value === void 0 || value === null || value === "";
 	const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
 		const groups = hierarchy.map((dataset) => dataset.data?.[dataPointIndex]);
 		if (isEmpty(groups[0]?.value)) return false;
@@ -28619,23 +28742,11 @@ function getChartShowValues(definition, args) {
 }
 function getCalendarChartShowValues(definition, args) {
 	const { locale, axisFormats } = args;
-	let background = (_value, dataset, index) => definition.background;
-	const values = args.dataSetsValues.flat().flatMap((dsv) => dsv?.data.filter(isNumberResult)).map((cell) => cell.value);
-	if (values.length) {
-		const min = Math.min(...values);
-		const max = Math.max(...values);
-		const colorScale = getRuntimeColorScale(definition.colorScale ?? schemeToColorScale("oranges"), min, max);
-		background = (_value, dataset, index) => {
-			const value = dataset._dataset.values[index];
-			if (value === void 0) return definition.background;
-			return chartFontColor(colorScale(value));
-		};
-	}
 	return {
 		type: "calendar",
 		horizontal: false,
 		showValues: "showValues" in definition ? !!definition.showValues : false,
-		background,
+		background: () => definition.background,
 		callback: (_value, dataset, index) => {
 			const value = dataset._dataset.values[index];
 			return value === void 0 ? "" : humanizeNumber({
@@ -34536,6 +34647,35 @@ var CellIsRuleEditor = class extends Component {
 	}
 };
 
+//#endregion
+//#region src/components/side_panel/criterion_form/calendar_button/calendar_button.ts
+var CalendarButton = class extends Component {
+	static template = "o-spreadsheet-CalendarButton";
+	props = props({
+		value: types$1.string().optional(""),
+		onChange: types$1.function()
+	});
+	datePickerRef = signal.ref(HTMLInputElement);
+	openCalendar() {
+		this.datePickerRef()?.showPicker();
+	}
+	formatDateForInput(value) {
+		const dateValue = parseDateTime(value, DEFAULT_LOCALE);
+		return dateValue ? formatValue(dateValue.value, {
+			format: "yyyy-mm-dd",
+			locale: DEFAULT_LOCALE
+		}) : "";
+	}
+	onDateInputValueChanged(value) {
+		const dateValue = parseDateTime(value, DEFAULT_LOCALE);
+		const formattedValue = dateValue ? formatValue(dateValue.value, {
+			format: DEFAULT_LOCALE.dateFormat,
+			locale: DEFAULT_LOCALE
+		}) : "";
+		this.props.onChange(formattedValue);
+	}
+};
+
 //#endregion
 //#region src/components/side_panel/criterion_form/criterion_form.ts
 var CriterionForm = class extends Component {
@@ -35224,7 +35364,8 @@ var DateCriterionForm = class extends CriterionForm {
 	static template = "o-spreadsheet-DataValidationDateCriterion";
 	static components = {
 		CriterionInput,
-		Select
+		Select,
+		CalendarButton
 	};
 	get currentDateValue() {
 		return this.props.criterion.dateValue || "exactDate";
@@ -35250,7 +35391,10 @@ var DateCriterionForm = class extends CriterionForm {
 //#region src/components/side_panel/criterion_form/double_input_criterion/double_input_criterion.ts
 var DoubleInputCriterionForm = class extends CriterionForm {
 	static template = "o-spreadsheet-DoubleInputCriterionForm";
-	static components = { CriterionInput };
+	static components = {
+		CriterionInput,
+		CalendarButton
+	};
 	onFirstValueChanged(value) {
 		const values = this.props.criterion.values;
 		this.updateCriterion({ values: [value, values[1] || ""] });
@@ -35259,6 +35403,9 @@ var DoubleInputCriterionForm = class extends CriterionForm {
 		const values = this.props.criterion.values;
 		this.updateCriterion({ values: [values[0] || "", value] });
 	}
+	get isDateType() {
+		return ["dateIsBetween", "dateIsNotBetween"].includes(this.props.criterion.type);
+	}
 };
 
 //#endregion
@@ -46605,7 +46752,7 @@ var FiguresContainer = class extends Component {
 		horizontalSnap: void 0,
 		verticalSnap: void 0,
 		cancelDnd: void 0,
-		overlappingCarousel: void 0
+		overlappingChartOrCarousel: void 0
 	});
 	setup() {
 		onMounted(() => {
@@ -46621,7 +46768,7 @@ var FiguresContainer = class extends Component {
 				this.dnd.selectedRect = void 0;
 				this.dnd.horizontalSnap = void 0;
 				this.dnd.verticalSnap = void 0;
-				this.dnd.overlappingCarousel = void 0;
+				this.dnd.overlappingChartOrCarousel = void 0;
 				this.dnd.cancelDnd = void 0;
 			}
 		});
@@ -46759,11 +46906,11 @@ var FiguresContainer = class extends Component {
 			hasStartedDnd = true;
 			const selectedFigures = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigures, maxDimensions, initialScrollPosition, getters.getActiveSheetScrollInfo());
 			const draggedFigure = selectedFigures.find((f) => f.id === draggedFigureId);
-			let overlappingCarousel = void 0;
+			let overlappingChartOrCarousel = void 0;
 			const otherFigures = this.getOtherFigures(selectedFigures.map((f) => f.id));
-			if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingCarousel = this.getCarouselOverlappingChart(draggedFigure, otherFigures);
-			this.dnd.overlappingCarousel = overlappingCarousel;
-			if (!overlappingCarousel) {
+			if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingChartOrCarousel = this.getOverlappingFigure(draggedFigure, otherFigures);
+			this.dnd.overlappingChartOrCarousel = overlappingChartOrCarousel;
+			if (!overlappingChartOrCarousel) {
 				const snapReturn = snapForMove(getters, selectedFigures, otherFigures);
 				this.dnd.selectedFigures = snapReturn.snappedFigures;
 				this.dnd.selectedRect = this.getDndFigureRect();
@@ -46784,7 +46931,7 @@ var FiguresContainer = class extends Component {
 				else this.env.model.dispatch("SELECT_FIGURE", { figureId: figureUI.id });
 				return;
 			}
-			if (!this.dnd.overlappingCarousel) {
+			if (!this.dnd.overlappingChartOrCarousel) {
 				const payloads = this.dnd.selectedFigures?.map((f) => {
 					return {
 						sheetId,
@@ -46794,20 +46941,25 @@ var FiguresContainer = class extends Component {
 				}) || [];
 				this.env.model.dispatch("MOVE_FIGURES", { figures: payloads });
 			} else {
-				const carouselFigureId = this.dnd.overlappingCarousel.id;
+				const overlappingFigureId = this.dnd.overlappingChartOrCarousel.id;
 				const chartFigureIds = this.dnd.selectedFigures?.map((f) => f.id) || [];
-				this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
+				if (this.dnd.overlappingChartOrCarousel.tag === "carousel") this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
 					sheetId,
-					carouselFigureId,
+					carouselFigureId: overlappingFigureId,
 					chartFigureIds
 				});
+				else if (this.dnd.overlappingChartOrCarousel.tag === "chart") this.env.model.dispatch("MERGE_CHART_FIGURES_INTO_CAROUSEL", {
+					sheetId,
+					baseFigureId: overlappingFigureId,
+					chartFigureIds: [overlappingFigureId, ...chartFigureIds]
+				});
 			}
 			this.dnd.draggedFigure = void 0;
 			this.dnd.selectedFigures = void 0;
 			this.dnd.selectedRect = void 0;
 			this.dnd.horizontalSnap = void 0;
 			this.dnd.verticalSnap = void 0;
-			this.dnd.overlappingCarousel = void 0;
+			this.dnd.overlappingChartOrCarousel = void 0;
 		};
 		this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 	}
@@ -46863,7 +47015,7 @@ var FiguresContainer = class extends Component {
 			this.dnd.selectedRect = void 0;
 			this.dnd.horizontalSnap = void 0;
 			this.dnd.verticalSnap = void 0;
-			this.dnd.overlappingCarousel = void 0;
+			this.dnd.overlappingChartOrCarousel = void 0;
 		};
 		this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 	}
@@ -46873,12 +47025,12 @@ var FiguresContainer = class extends Component {
 	getFigureStyle(figureUI) {
 		if (figureUI.id !== this.dnd.draggedFigure?.id) return "";
 		return cssPropertiesToCss({
-			opacity: this.dnd.overlappingCarousel?.id ? "0.6" : "0.9",
+			opacity: this.dnd.overlappingChartOrCarousel?.id ? "0.6" : "0.9",
 			cursor: "grabbing"
 		});
 	}
 	getFigureClass(figureUI) {
-		if (figureUI.id !== this.dnd.overlappingCarousel?.id) return "";
+		if (figureUI.id !== this.dnd.overlappingChartOrCarousel?.id) return "";
 		return "o-add-to-carousel";
 	}
 	getSnap(snapLine) {
@@ -46921,18 +47073,18 @@ var FiguresContainer = class extends Component {
 			height: `100%`
 		});
 	}
-	getCarouselOverlappingChart(figureUI, otherFigures) {
+	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 !== "carousel") continue;
-			const carouselCenterX = figure.x + figure.width / 2;
-			const carouselCenterY = figure.y + figure.height / 2;
-			const distanceX = Math.abs(figureCenterX - carouselCenterX);
-			const distanceY = Math.abs(figureCenterY - carouselCenterY);
+			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;
@@ -53025,11 +53177,16 @@ var DefaultPlugin = class extends CorePlugin {
 			const deltaStyle = {};
 			let hasDelta = false;
 			const styleSheet = this.style[position.sheetId];
-			if (!styleSheet) continue;
 			for (const key in newDefaultStyle) {
 				if (key in cellStyle) continue;
-				const defaults = styleSheet[key];
-				if (!defaults) continue;
+				const defaults = styleSheet?.[key];
+				if (!defaults) {
+					if (newDefaultStyle[key] !== DEFAULT_STYLE[key]) {
+						deltaStyle[key] = DEFAULT_STYLE[key];
+						hasDelta = true;
+					}
+					continue;
+				}
 				const rowDefault = defaults.rowDefault?.[position.row];
 				if (rowDefault !== void 0) {
 					if (priorities.shouldUseDefaultRow) {
@@ -53071,7 +53228,8 @@ var DefaultPlugin = class extends CorePlugin {
 		for (const key in styleSheet) if (!(key in style)) {
 			const defaults = styleSheet[key];
 			if (!defaults) continue;
-			style[key] = defaults.rowDefault?.[position.row] ?? defaults.colDefault?.[position.col] ?? defaults.sheetDefault;
+			const styleValue = defaults.rowDefault?.[position.row] ?? defaults.colDefault?.[position.col] ?? defaults.sheetDefault;
+			if (styleValue !== void 0) style[key] = styleValue;
 		}
 		return style;
 	}
@@ -58719,13 +58877,13 @@ var EvaluationConditionalFormatPlugin = class extends CoreViewPlugin {
 		const minValue = this.parsePoint(sheetId, range, rule.minimum, "min");
 		const midValue = rule.midpoint ? this.parsePoint(sheetId, range, rule.midpoint) : null;
 		const maxValue = this.parsePoint(sheetId, range, rule.maximum, "max");
-		if (minValue === null || maxValue === null || minValue >= maxValue || midValue && (minValue >= midValue || midValue >= maxValue)) return;
+		if (minValue === null || maxValue === null || minValue >= maxValue || midValue !== null && (minValue >= midValue || midValue >= maxValue)) return;
 		const zone = this.getters.getRangeFromSheetXC(sheetId, range).zone;
 		const colorThresholds = [{
 			value: minValue,
 			color: rule.minimum.color
 		}];
-		if (rule.midpoint && midValue) colorThresholds.push({
+		if (rule.midpoint && midValue !== null) colorThresholds.push({
 			value: midValue,
 			color: rule.midpoint.color
 		});
@@ -66184,7 +66342,9 @@ var GridSelectionPlugin = class extends UIPlugin {
 		ctx.lineWidth = 1.5 * thinLineWidth;
 		const isDarkMode = this.getters.isDarkMode();
 		for (const zone of zones) {
+			if (!viewports.isZoneVisibleInViewport(sheetId, zone)) continue;
 			const { x, y, width, height } = viewports.getVisibleRect(sheetId, zone);
+			const currentLineWidth = ctx.lineWidth;
 			if (!isDarkMode) ctx.globalCompositeOperation = "multiply";
 			if (height === 0 || width === 0) ctx.lineWidth = 3 * thinLineWidth;
 			if (height === 0 && width === 0) {
@@ -66198,6 +66358,7 @@ var GridSelectionPlugin = class extends UIPlugin {
 				ctx.globalCompositeOperation = "source-over";
 				ctx.strokeRect(x, y, width, height);
 			}
+			ctx.lineWidth = currentLineWidth;
 		}
 		ctx.globalCompositeOperation = "source-over";
 		const position = renderingContext.activePosition;
@@ -66344,6 +66505,9 @@ var InternalViewport = class {
 		this.adjustViewportZoneX();
 		this.adjustViewportZoneY();
 	}
+	isZoneVisible(zone) {
+		return intersection(zone, this) !== void 0;
+	}
 	/**
 	*
 	* Computes the visible coordinates & dimensions of a given zone inside the viewport
@@ -66624,6 +66788,9 @@ var ViewportCollection = class {
 	isVisibleInViewport({ sheetId, col, row }) {
 		return this.getSubViewports(sheetId).some((pane) => pane.isVisible(col, row));
 	}
+	isZoneVisibleInViewport(sheetId, zone) {
+		return this.getSubViewports(sheetId).some((pane) => pane.isZoneVisible(zone));
+	}
 	getScrollBarWidth() {
 		return 15 / this.zoomLevel;
 	}
@@ -70697,18 +70864,28 @@ var NamedRangeSelector = class extends Component {
 			return;
 		}
 		const activeSheetId = this.env.model.getters.getActiveSheetId();
-		if (activeSheetId !== sheetId) this.env.model.dispatch("ACTIVATE_SHEET", {
-			sheetIdFrom: activeSheetId,
-			sheetIdTo: sheetId
-		});
-		this.env.model.selection.selectCell(zone.right, zone.bottom);
+		if (activeSheetId !== sheetId) {
+			if (!this.env.model.getters.getSheet(sheetId).isVisible) {
+				this.env.notifyUser({
+					text: _t("The sheet on which the range is defined is hidden."),
+					type: "info",
+					sticky: false
+				});
+				return;
+			}
+			this.env.model.dispatch("ACTIVATE_SHEET", {
+				sheetIdFrom: activeSheetId,
+				sheetIdTo: sheetId
+			});
+		}
+		this.env.model.selection.selectCell(zone.right, zone.bottom, { allowsHiddenSelection: true });
 		this.env.model.selection.selectZone({
 			cell: {
 				col: zone.left,
 				row: zone.top
 			},
 			zone
-		});
+		}, { allowsHiddenSelection: true });
 	}
 	get selectionKey() {
 		return `${this.env.model.getters.getActiveSheetId()}-${zoneToXc(this.selectedZone)}`;
@@ -76987,8 +77164,8 @@ var DefaultClipboardHandler = class extends AbstractCellClipboardHandler {
 		for (const key in DEFAULT_STYLE) {
 			content.style[key] = {
 				sheetDefault: this.getters.getDefaultStyle(data.sheetId, key, "SHEET", void 0) ?? DEFAULT_STYLE[key],
-				colDefault: {},
-				rowDefault: {}
+				colDefault: [],
+				rowDefault: []
 			};
 			let colIndex = 0;
 			for (const col of data.columnsIndexes) {
@@ -77005,20 +77182,41 @@ var DefaultClipboardHandler = class extends AbstractCellClipboardHandler {
 		}
 		return content;
 	}
-	clearStyleFormat(sheetId, zone) {
-		this.dispatch("SET_FORMATTING", {
-			sheetId,
-			target: [zone],
-			format: ""
-		});
+	adaptContentToZone(zone, content) {
+		const colRepetition = Math.max(Math.floor((zone.right - zone.left + 1) / content.width), 1);
+		const rowRepetition = Math.max(Math.floor((zone.bottom - zone.top + 1) / content.height), 1);
+		if (colRepetition === 1 && rowRepetition === 1) return content;
+		const newContent = deepCopy(content);
+		newContent.height *= rowRepetition;
+		newContent.width *= colRepetition;
+		if (rowRepetition > 1 && newContent.format.rowDefault) {
+			newContent.format.rowDefault.length = content.height;
+			newContent.format.rowDefault = repeat(newContent.format.rowDefault, rowRepetition);
+		}
+		if (colRepetition > 1 && newContent.format.colDefault) {
+			newContent.format.colDefault.length = content.width;
+			newContent.format.colDefault = repeat(newContent.format.colDefault, colRepetition);
+		}
+		for (const key in content.style) {
+			if (rowRepetition > 1 && newContent.style[key].rowDefault) {
+				newContent.style[key].rowDefault.length = content.height;
+				newContent.style[key].rowDefault = repeat(newContent.style[key].rowDefault, rowRepetition);
+			}
+			if (colRepetition > 1 && newContent.style[key].colDefault) {
+				newContent.style[key].colDefault.length = content.width;
+				newContent.style[key].colDefault = repeat(newContent.style[key].colDefault, colRepetition);
+			}
+		}
+		return newContent;
 	}
 	paste(target, content, options) {
 		const sheetId = target.sheetId;
 		if (options.pasteOption === "asValue") return;
 		const zones = target.zones;
-		if (!options.isCutOperation) for (const zone of zones) for (const pasteZone of splitZoneForPaste(zone, content.width, content.height)) {
-			this.pasteStyle(sheetId, pasteZone.left, pasteZone.top, content.width, content.height, content.style);
-			this.pasteFormat(sheetId, pasteZone.left, pasteZone.top, content.width, content.height, content.format);
+		if (!options.isCutOperation) for (const zone of zones) {
+			const newContent = this.adaptContentToZone(zone, content);
+			this.pasteStyle(sheetId, zone.left, zone.top, newContent.width, newContent.height, newContent.style);
+			this.pasteFormat(sheetId, zone.left, zone.top, newContent.width, newContent.height, newContent.format);
 		}
 		else {
 			this.clearClippedZones(content);
@@ -77131,7 +77329,7 @@ var DefaultClipboardHandler = class extends AbstractCellClipboardHandler {
 		const commands = [];
 		for (const [zoneStr, [zone, priority]] of Object.entries(zones)) {
 			const format = updateCells[zoneStr];
-			commands.push([
+			if (format !== void 0) commands.push([
 				priority,
 				zone,
 				format
@@ -87333,7 +87531,9 @@ const helpers = {
 	collapseHierarchicalDisplayName,
 	getCanonicalSymbolName,
 	fuzzyLookup,
-	replaceSymbolInFormula
+	replaceSymbolInFormula,
+	isSingleCellReference,
+	computeCachedTextDimension
 };
 const links = {
 	isMarkdownLink,
@@ -87403,7 +87603,8 @@ const components = {
 	FullScreenFigure,
 	NumberInput,
 	TopBar,
-	Composer
+	Composer,
+	CalendarButton
 };
 const hooks = {
 	useDragAndDropListItems,
@@ -87463,6 +87664,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.1";
-__info__.date = "2026-07-01T05:05:42.239Z";
-__info__.hash = "3c78107";
+__info__.version = "19.5.0-alpha.3";
+__info__.date = "2026-07-14T10:17:06.949Z";
+__info__.hash = "c029184";