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

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.3.0-alpha.1
- * @date 2024-03-25T09:43:36.072Z
- * @hash 4095c41
+ * @version 17.3.0-alpha.3
+ * @date 2024-04-10T12:28:23.658Z
+ * @hash 80b5056
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -188,7 +188,7 @@ const DEFAULT_GAUGE_LOWER_COLOR = "#cc0000";
 const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
 const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6aa84f";
+const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6AA84F";
 const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
 const LINE_FILL_TRANSPARENCY = 0.4;
 // session
@@ -464,7 +464,7 @@ function getItemId(item, itemsDic) {
     }
     // Generate new Id if the item didn't exist in the dictionary
     const ids = Object.keys(itemsDic);
-    const maxId = ids.length === 0 ? 0 : Math.max(...ids.map((id) => parseInt(id, 10)));
+    const maxId = ids.length === 0 ? 0 : largeMax(ids.map((id) => parseInt(id, 10)));
     itemsDic[maxId + 1] = item;
     return maxId + 1;
 }
@@ -482,7 +482,7 @@ function debounce(func, wait, immediate) {
     let timeout = undefined;
     const debounced = function () {
         const context = this;
-        const args = arguments;
+        const args = Array.from(arguments);
         function later() {
             timeout = undefined;
             if (!immediate) {
@@ -560,7 +560,7 @@ function deepEquals(o1, o2) {
     if (typeof o1 !== typeof o2)
         return false;
     if (typeof o1 !== "object")
-        return o1 === o2;
+        return false;
     // Objects can have different keys if the values are undefined
     for (const key in o2) {
         if (!(key in o1) && o2[key] !== undefined) {
@@ -684,6 +684,34 @@ function getSearchRegex(searchStr, searchOptions) {
     }
     return RegExp(searchValue, flags);
 }
+/**
+ * Alternative to Math.max that works with large arrays.
+ * Typically useful for arrays bigger than 100k elements.
+ */
+function largeMax(array) {
+    let len = array.length;
+    if (len < 100_000)
+        return Math.max(...array);
+    let max = -Infinity;
+    while (len--) {
+        max = array[len] > max ? array[len] : max;
+    }
+    return max;
+}
+/**
+ * Alternative to Math.min that works with large arrays.
+ * Typically useful for arrays bigger than 100k elements.
+ */
+function largeMin(array) {
+    let len = array.length;
+    if (len < 100_000)
+        return Math.min(...array);
+    let min = +Infinity;
+    while (len--) {
+        min = array[len] < min ? array[len] : min;
+    }
+    return min;
+}
 
 const RBA_REGEX = /rgba?\(|\s+|\)/gi;
 const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/;
@@ -1856,6 +1884,11 @@ const invalidateCFEvaluationCommands = new Set([
     "REMOVE_CONDITIONAL_FORMAT",
     "CHANGE_CONDITIONAL_FORMAT_PRIORITY",
 ]);
+const invalidateBordersCommands = new Set([
+    "AUTOFILL_CELL",
+    "SET_BORDER",
+    "SET_ZONE_BORDERS",
+]);
 const readonlyAllowedCommands = new Set([
     "START",
     "ACTIVATE_SHEET",
@@ -2086,6 +2119,7 @@ var CommandResult;
     CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
     CommandResult["NoChanges"] = "NoChanges";
     CommandResult["InvalidInputId"] = "InvalidInputId";
+    CommandResult["SheetIsHidden"] = "SheetIsHidden";
 })(CommandResult || (CommandResult = {}));
 
 const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
@@ -2152,6 +2186,7 @@ const CellErrorType = {
     BadExpression: "#BAD_EXPR",
     CircularDependency: "#CYCLE",
     UnknownFunction: "#NAME?",
+    DivisionByZero: "#DIV/0!",
     GenericError: "#ERROR",
 };
 const errorTypes = new Set(Object.values(CellErrorType));
@@ -2190,9 +2225,9 @@ class UnknownFunctionError extends EvaluationError {
 
 // HELPERS
 const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
-function assert(condition, message) {
+function assert(condition, message, value) {
     if (!condition()) {
-        throw new EvaluationError(message);
+        throw new EvaluationError(message, value);
     }
 }
 function inferFormat(data) {
@@ -2270,6 +2305,9 @@ function strictToInteger(value, locale) {
 function assertNumberGreaterThanOrEqualToOne(value) {
     assert(() => value >= 1, _t("The function [[FUNCTION_NAME]] expects a number value to be greater than or equal to 1, but receives %s.", value.toString()));
 }
+function assertNotZero(value) {
+    assert(() => value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
+}
 function toString(data) {
     const value = toValue(data);
     switch (typeof value) {
@@ -3035,6 +3073,9 @@ function applyInternalFormat(value, internalFormat, locale) {
     return formattedValue;
 }
 function applyInternalNumberFormat(value, format, locale) {
+    if (value === Infinity) {
+        return "∞" + (format.isPercent ? "%" : "");
+    }
     if (format.isPercent) {
         value = value * 100;
     }
@@ -3378,6 +3419,46 @@ function roundFormat(format) {
     });
     return convertInternalFormatToFormat(roundedFormat);
 }
+function humanizeNumber({ value, format }, locale) {
+    const numberFormat = formatLargeNumber({
+        value,
+        format,
+    }, undefined, locale);
+    return formatValue(value, { format: numberFormat, locale });
+}
+function formatLargeNumber(arg, unit, locale) {
+    let value = 0;
+    try {
+        value = Math.abs(toNumber(arg?.value, locale));
+    }
+    catch (e) {
+        return "";
+    }
+    const format = arg?.format;
+    if (unit !== undefined) {
+        const postFix = unit?.value;
+        switch (postFix) {
+            case "k":
+                return createLargeNumberFormat(format, 1e3, "k");
+            case "m":
+                return createLargeNumberFormat(format, 1e6, "m");
+            case "b":
+                return createLargeNumberFormat(format, 1e9, "b");
+            default:
+                throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
+        }
+    }
+    if (value < 1e5) {
+        return createLargeNumberFormat(format, 0, "");
+    }
+    else if (value < 1e8) {
+        return createLargeNumberFormat(format, 1e3, "k");
+    }
+    else if (value < 1e11) {
+        return createLargeNumberFormat(format, 1e6, "m");
+    }
+    return createLargeNumberFormat(format, 1e9, "b");
+}
 function createLargeNumberFormat(format, magnitude, postFix, locale) {
     const internalFormat = parseFormat(format || "#,##0");
     const largeNumberFormat = [];
@@ -4557,8 +4638,9 @@ function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
  * Get the default height of the cell given its style.
  */
 function getDefaultCellHeight(ctx, cell, colSize) {
-    if (!cell || !cell.content)
+    if (!cell || (!cell.isFormula && !cell.content)) {
         return DEFAULT_CELL_HEIGHT;
+    }
     const maxWidth = cell.style?.wrapping === "wrap" ? colSize - 2 * MIN_CELL_TEXT_MARGIN : undefined;
     const numberOfLines = cell.isFormula
         ? 1
@@ -4569,14 +4651,19 @@ function getDefaultCellHeight(ctx, cell, colSize) {
 const textWidthCache = {};
 function computeTextWidth(context, text, style, fontUnit = "pt") {
     const font = computeTextFont(style, fontUnit);
+    context.save();
+    context.font = font;
+    const width = computeCachedTextWidth(context, text);
+    context.restore();
+    return width;
+}
+function computeCachedTextWidth(context, text) {
+    const font = context.font;
     if (!textWidthCache[font]) {
         textWidthCache[font] = {};
     }
     if (textWidthCache[font][text] === undefined) {
-        context.save();
-        context.font = font;
         const textWidth = context.measureText(text).width;
-        context.restore();
         textWidthCache[font][text] = textWidth;
     }
     return textWidthCache[font][text];
@@ -4721,6 +4808,42 @@ const pxRegex = /([0-9\.]*)px/;
 function getContextFontSize(font) {
     return Number(font.match(pxRegex)?.[1]);
 }
+// Inspired from https://stackoverflow.com/a/10511598
+function clipTextWithEllipsis(ctx, text, maxWidth) {
+    let width = computeCachedTextWidth(ctx, text);
+    if (width <= maxWidth) {
+        return text;
+    }
+    const ellipsis = "…";
+    const ellipsisWidth = computeCachedTextWidth(ctx, text);
+    if (width <= ellipsisWidth) {
+        return text;
+    }
+    let len = text.length;
+    while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+        text = text.substring(0, len);
+        width = computeCachedTextWidth(ctx, text);
+    }
+    return text + ellipsis;
+}
+function splitTextInTwoLines(text) {
+    let spaces = "";
+    while (text[0] === " ") {
+        spaces += " ";
+        text = text.slice(1);
+    }
+    const length = text.length;
+    const middle = Math.floor(length / 2);
+    const leftSpace = text.substring(0, middle).lastIndexOf(" ");
+    const rightSpace = text.substring(middle).indexOf(" ") + middle;
+    if (leftSpace === -1 && rightSpace === middle - 1) {
+        return [spaces + text, ""];
+    }
+    if (leftSpace > length - rightSpace || rightSpace === middle - 1) {
+        return [spaces + text.slice(0, leftSpace), spaces + text.slice(leftSpace + 1)];
+    }
+    return [spaces + text.slice(0, rightSpace), spaces + text.slice(rightSpace + 1)];
+}
 function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10 //This value is defined to get a good looking stroke
 ) {
     context.fillText(text, position.x, position.y);
@@ -6992,10 +7115,17 @@ urlRegistry.add("sheet_URL", {
     },
     open(url, env) {
         const sheetId = parseSheetUrl(url);
-        env.model.dispatch("ACTIVATE_SHEET", {
+        const result = env.model.dispatch("ACTIVATE_SHEET", {
             sheetIdFrom: env.model.getters.getActiveSheetId(),
             sheetIdTo: sheetId,
         });
+        if (result.isCancelledBecause("SheetIsHidden" /* CommandResult.SheetIsHidden */)) {
+            env.notifyUser({
+                type: "warning",
+                sticky: false,
+                text: _t("Cannot open the link because the linked sheet is hidden."),
+            });
+        }
     },
     sequence: 0,
 });
@@ -7111,7 +7241,7 @@ function textCell(value, format, formattedValue) {
 }
 function numberCell(value, format, formattedValue) {
     return {
-        value: value || 0,
+        value: value || 0, // necessary to avoid "-0" and NaN values,
         format,
         formattedValue,
         type: CellValueType.number,
@@ -7357,6 +7487,7 @@ const CellIsOperators = {
 };
 const ChartTerms = {
     Series: _t("Series"),
+    BackgroundColor: _t("Background color"),
     Errors: {
         Unexpected: _t("The chart definition is invalid for an unknown reason"),
         // BASIC CHART ERRORS (LINE | BAR | PIE)
@@ -9392,32 +9523,63 @@ function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
     }
     return true;
 }
-// ---------------------------------------------------------------------------
-// Scorecard
-// ---------------------------------------------------------------------------
-function getBaselineText(baseline, keyValue, baselineMode, locale) {
+function getChartPositionAtCenterOfViewport(getters, chartSize) {
+    const { x, y } = getters.getMainViewportCoordinates();
+    const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+    const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
+    const position = {
+        x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
+        y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
+    }; // Position at the center of the scrollable viewport
+    return position;
+}
+
+function getBaselineText(baseline, keyValue, baselineMode, humanize, locale) {
     if (!baseline) {
         return "";
     }
     else if (baselineMode === "text" ||
         keyValue?.type !== CellValueType.number ||
         baseline.type !== CellValueType.number) {
+        if (humanize) {
+            return humanizeNumber(baseline, locale);
+        }
         return baseline.formattedValue;
     }
+    let { value, format } = baseline;
+    if (baselineMode === "progress") {
+        value = keyValue.value / value;
+        format = "0.0%";
+    }
     else {
-        let diff = keyValue.value - baseline.value;
-        if (baselineMode === "percentage" && diff !== 0) {
-            diff = (diff / baseline.value) * 100;
+        value = Math.abs(keyValue.value - value);
+        if (baselineMode === "percentage" && value !== 0) {
+            value = value / baseline.value;
+        }
+        if (baselineMode === "percentage") {
+            format = "0.0%";
         }
-        if (baselineMode !== "percentage" && baseline.format) {
-            return formatValue(diff, { format: baseline.format, locale });
+        if (!format) {
+            value = Math.round(value * 100) / 100;
         }
-        const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-        return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
     }
+    if (humanize) {
+        return humanizeNumber({ value, format }, locale);
+    }
+    return formatValue(value, { format, locale });
+}
+function getKeyValueText(keyValueCell, humanize, locale) {
+    if (!keyValueCell) {
+        return "";
+    }
+    if (humanize) {
+        return humanizeNumber(keyValueCell, locale);
+    }
+    return keyValueCell.formattedValue ?? String(keyValueCell.value ?? "");
 }
 function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
     if (baselineMode === "text" ||
+        baselineMode === "progress" ||
         baseline?.type !== CellValueType.number ||
         keyValue?.type !== CellValueType.number) {
         return undefined;
@@ -9446,17 +9608,6 @@ function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
     }
     return "neutral";
 }
-function getChartPositionAtCenterOfViewport(getters, chartSize) {
-    const { x, y } = getters.getMainViewportCoordinates();
-    const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-    const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
-    const position = {
-        x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
-        y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
-    }; // Position at the center of the scrollable viewport
-    return position;
-}
-
 function checkKeyValue(definition) {
     return definition.keyValue && !rangeReference.test(definition.keyValue)
         ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
@@ -9474,10 +9625,12 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     baseline;
     baselineMode;
     baselineDescr;
+    progressBar = false;
     background;
     baselineColorUp;
     baselineColorDown;
     fontColor;
+    humanize;
     type = "scorecard";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
@@ -9488,6 +9641,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         this.background = definition.background;
         this.baselineColorUp = definition.baselineColorUp;
         this.baselineColorDown = definition.baselineColorDown;
+        this.humanize = definition.humanize ?? false;
     }
     static validateChartDefinition(validator, definition) {
         return validator.checkValidations(definition, checkKeyValue, checkBaseline);
@@ -9557,6 +9711,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
             keyValue: keyValue
                 ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                 : undefined,
+            humanize: this.humanize,
         };
     }
     getDefinitionForExcel() {
@@ -9582,7 +9737,7 @@ function drawScoreChart(structure, canvas) {
     if (structure.title) {
         ctx.font = structure.title.style.font;
         ctx.fillStyle = structure.title.style.color;
-        ctx.fillText(structure.title.text, structure.title.position.x, structure.title.position.y);
+        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
     }
     if (structure.baseline) {
         ctx.font = structure.baseline.style.font;
@@ -9609,20 +9764,41 @@ function drawScoreChart(structure, canvas) {
         ctx.restore();
     }
     if (structure.baselineDescr) {
-        ctx.font = structure.baselineDescr.style.font;
-        ctx.fillStyle = structure.baselineDescr.style.color;
-        ctx.fillText(structure.baselineDescr.text, structure.baselineDescr.position.x, structure.baselineDescr.position.y);
+        const descr = structure.baselineDescr[0];
+        ctx.font = descr.style.font;
+        ctx.fillStyle = descr.style.color;
+        for (const description of structure.baselineDescr) {
+            ctx.fillText(clipTextWithEllipsis(ctx, description.text, canvas.width - description.position.x), description.position.x, description.position.y);
+        }
     }
     if (structure.key) {
         ctx.font = structure.key.style.font;
         ctx.fillStyle = structure.key.style.color;
         drawDecoratedText(ctx, structure.key.text, structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
     }
+    if (structure.progressBar) {
+        ctx.fillStyle = structure.progressBar.style.backgroundColor;
+        ctx.beginPath();
+        ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        ctx.fill();
+        ctx.fillStyle = structure.progressBar.style.color;
+        ctx.beginPath();
+        if (structure.progressBar.value > 0) {
+            ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width *
+                Math.max(0, Math.min(1.0, structure.progressBar.value)), structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        }
+        else {
+            const width = structure.progressBar.dimension.width *
+                Math.max(0, Math.min(1.0, -structure.progressBar.value));
+            ctx.roundRect(structure.progressBar.position.x + structure.progressBar.dimension.width - width, structure.progressBar.position.y, width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        }
+        ctx.fill();
+    }
 }
 function createScorecardChartRuntime(chart, getters) {
-    let keyValue = "";
     let formattedKeyValue = "";
     let keyValueCell;
+    const locale = getters.getLocale();
     if (chart.keyValue) {
         const keyValuePosition = {
             sheetId: chart.keyValue.sheetId,
@@ -9630,31 +9806,33 @@ function createScorecardChartRuntime(chart, getters) {
             row: chart.keyValue.zone.top,
         };
         keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-        keyValue = String(keyValueCell.value ?? "");
-        formattedKeyValue = keyValueCell.formattedValue;
+        formattedKeyValue = getKeyValueText(keyValueCell, chart.humanize ?? false, locale);
     }
     let baselineCell;
     const baseline = chart.baseline;
     if (baseline) {
         const baselinePosition = {
-            sheetId: chart.baseline.sheetId,
-            col: chart.baseline.zone.left,
-            row: chart.baseline.zone.top,
+            sheetId: baseline.sheetId,
+            col: baseline.zone.left,
+            row: baseline.zone.top,
         };
         baselineCell = getters.getEvaluatedCell(baselinePosition);
     }
     const { background, fontColor } = getters.getStyleOfSingleCellChart(chart.background, chart.keyValue);
-    const locale = getters.getLocale();
+    const baselineDisplay = getBaselineText(baselineCell, keyValueCell, chart.baselineMode, chart.humanize ?? false, locale);
+    const baselineValue = chart.baselineMode === "progress" && isNumber(baselineDisplay, locale)
+        ? toNumber(baselineDisplay, locale)
+        : 0;
     return {
         title: _t(chart.title),
-        keyValue: formattedKeyValue || keyValue,
-        baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
+        keyValue: formattedKeyValue,
+        baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
+        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
         fontColor,
         background,
-        baselineStyle: chart.baselineMode !== "percentage" && baseline
+        baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
             ? getters.getCellStyle({
                 sheetId: baseline.sheetId,
                 col: baseline.zone.left,
@@ -9668,17 +9846,21 @@ function createScorecardChartRuntime(chart, getters) {
                 row: chart.keyValue.zone.top,
             })
             : undefined,
+        progressBar: chart.baselineMode === "progress"
+            ? {
+                value: baselineValue,
+                color: baselineValue > 0 ? chart.baselineColorUp : chart.baselineColorDown,
+            }
+            : undefined,
     };
 }
 
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
 const TITLE_FONT_SIZE = 18;
-const BASELINE_BOX_HEIGHT_RATIO = 0.35;
-const KEY_BOX_HEIGHT_RATIO = 0.65;
-/** Baseline description should have a smaller font than the baseline */
-const BASELINE_DESCR_FONT_RATIO = 0.9;
-/* Padding at the border of the chart, in percentage of the chart width */
-const CHART_PADDING_RATIO = 0.02;
+const KEY_BOX_HEIGHT_RATIO = 0.8;
+/* Padding at the border of the chart */
+const CHART_PADDING = 10;
+const BOTTOM_PADDING_RATIO = 0.05;
 /**
  * Line height (in em)
  * Having a line heigh =1em (=font size) don't work, the font will overflow.
@@ -9718,31 +9900,37 @@ class ScorecardChartConfigBuilder {
             },
         };
         const style = this.getTextStyles();
-        const { height: titleHeight } = this.getTextDimensions(this.title, style.title.font);
+        let titleHeight = 0;
         if (this.title) {
+            ({ height: titleHeight } = this.getFullTextDimensions(this.title, style.title.font));
             structure.title = {
                 text: this.title,
                 style: style.title,
                 position: {
-                    x: this.chartPadding,
-                    y: this.chartPadding + titleHeight,
+                    x: CHART_PADDING,
+                    y: CHART_PADDING / 2 + titleHeight,
                 },
             };
         }
         const baselineArrowSize = style.baselineArrow?.size ?? 0;
-        const { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
-        const { width: baselineDescrWidth } = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font);
+        let { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
+        if (!this.baseline) {
+            baselineHeight = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).height;
+        }
+        const baselineDescrWidth = style.baselineDescr.isSplit
+            ? Math.max(...splitTextInTwoLines(this.baselineDescr).map((line) => this.getTextDimensions(line, style.baselineDescr.font).width))
+            : this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).width;
         structure.baseline = {
             text: this.baseline,
             style: style.baselineValue,
             position: {
                 x: (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2,
                 y: this.keyValue
-                    ? this.height - 2 * this.chartPadding
-                    : this.height - (this.height - titleHeight - baselineHeight) / 2 - this.chartPadding,
+                    ? this.height * (1 - BOTTOM_PADDING_RATIO * (this.runtime.progressBar ? 1 : 2))
+                    : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING,
             },
         };
-        if (style.baselineArrow) {
+        if (style.baselineArrow && !this.runtime.progressBar) {
             structure.baselineArrow = {
                 direction: this.baselineArrow,
                 style: style.baselineArrow,
@@ -9753,23 +9941,68 @@ class ScorecardChartConfigBuilder {
             };
         }
         if (this.baselineDescr) {
-            structure.baselineDescr = {
-                text: this.baselineDescr,
-                style: style.baselineDescr,
+            const position = {
+                x: structure.baseline.position.x + baselineWidth,
+                y: structure.baseline.position.y,
+            };
+            if (style.baselineDescr.isSplit) {
+                const description = splitTextInTwoLines(this.baselineDescr);
+                const measure = this.context.measureText(description[1]);
+                const deltaY = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+                structure.baselineDescr = [
+                    {
+                        text: description[0],
+                        style: style.baselineDescr,
+                        position: {
+                            x: position.x,
+                            y: position.y - deltaY,
+                        },
+                    },
+                    {
+                        text: description[1],
+                        style: style.baselineDescr,
+                        position,
+                    },
+                ];
+            }
+            else {
+                structure.baselineDescr = [
+                    {
+                        text: this.baselineDescr,
+                        style: style.baselineDescr,
+                        position,
+                    },
+                ];
+            }
+        }
+        let progressBarHeight = 0;
+        if (this.runtime.progressBar) {
+            progressBarHeight = this.height * 0.05;
+            structure.progressBar = {
                 position: {
-                    x: structure.baseline.position.x + baselineWidth,
-                    y: structure.baseline.position.y,
+                    x: 2 * CHART_PADDING,
+                    y: this.height * (1 - 2 * BOTTOM_PADDING_RATIO) - baselineHeight - progressBarHeight,
+                },
+                dimension: {
+                    height: progressBarHeight,
+                    width: this.width - 4 * CHART_PADDING,
+                },
+                value: this.runtime.progressBar.value,
+                style: {
+                    color: this.runtime.progressBar.color,
+                    backgroundColor: this.secondaryFontColor,
                 },
             };
         }
-        const { height: keyHeight, width: keyWidth } = this.getTextDimensions(this.keyValue, style.keyValue.font);
+        const { width: keyWidth, height: keyHeight } = this.getFullTextDimensions(this.keyValue, style.keyValue.font);
         if (this.keyValue) {
             structure.key = {
                 text: this.keyValue,
                 style: style.keyValue,
                 position: {
                     x: (this.width - keyWidth) / 2,
-                    y: (this.height - baselineHeight + titleHeight + keyHeight) / 2 - this.chartPadding,
+                    y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                        (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                 },
             };
         }
@@ -9796,9 +10029,6 @@ class ScorecardChartConfigBuilder {
     get secondaryFontColor() {
         return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
     }
-    get chartPadding() {
-        return this.width * CHART_PADDING_RATIO;
-    }
     getTextDimensions(text, font) {
         this.context.font = font;
         const measure = this.context.measureText(text);
@@ -9807,16 +10037,44 @@ class ScorecardChartConfigBuilder {
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
         };
     }
+    getFullTextDimensions(text, font) {
+        this.context.font = font;
+        const measure = this.context.measureText(text);
+        return {
+            width: measure.width,
+            height: measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent,
+        };
+    }
     getTextStyles() {
         // If the widest text overflows horizontally, scale it down, and apply the same scaling factors to all the other fonts.
-        const maxLineWidth = this.width * (1 - 2 * CHART_PADDING_RATIO);
-        const widestElement = this.getWidestElement();
-        const baseFontSize = widestElement.getElementMaxFontSize(this.getDrawableHeight(), this);
-        const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.context, this));
-        let scalingFactor = fontSizeMatchingWidth / baseFontSize;
+        const maxLineWidth = this.width - 2 * CHART_PADDING;
+        const drawableHeight = this.getDrawableHeight();
         // Fonts sizes in px
-        const keyFontSize = new KeyValueElement(this.runtime.keyValueStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
-        const baselineFontSize = new BaselineElement(this.runtime.baselineStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
+        const keyValueElement = new KeyValueElement(this.runtime.keyValueStyle);
+        const heightFont = keyValueElement.getElementMaxFontSize(drawableHeight, this);
+        const widthFont = getFontSizeMatchingWidth(maxLineWidth, 600, (fontSize) => keyValueElement.getElementWidth(fontSize, this.context, this));
+        const keyFontSize = Math.min(heightFont, widthFont);
+        let baselineValueFontSize = Math.floor(keyFontSize * 0.5);
+        this.context.font = getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic);
+        const baselineText = this.baselineArrow !== "neutral" ? "A " + this.baseline : this.baseline;
+        const baselineValueWidth = computeCachedTextWidth(this.context, baselineText);
+        const remainingWidth = maxLineWidth - baselineValueWidth;
+        let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
+        let isBaselineSplit = false;
+        if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+            isBaselineSplit = true;
+            baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
+            for (const line of splitTextInTwoLines(this.baselineDescr)) {
+                const lineWidth = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => {
+                    this.context.font = getDefaultContextFont(fontSize);
+                    return this.context.measureText(line).width;
+                });
+                baselineDescrFontSize = Math.min(baselineDescrFontSize, lineWidth);
+            }
+        }
+        if (this.runtime.progressBar) {
+            baselineValueFontSize /= 1.5;
+        }
         return {
             title: {
                 font: getDefaultContextFont(TITLE_FONT_SIZE),
@@ -9829,7 +10087,7 @@ class ScorecardChartConfigBuilder {
                 underline: this.runtime.keyValueStyle?.underline,
             },
             baselineValue: {
-                font: getDefaultContextFont(baselineFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+                font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
                 strikethrough: this.runtime.baselineStyle?.strikethrough,
                 underline: this.runtime.baselineStyle?.underline,
                 color: this.runtime.baselineStyle?.textColor ||
@@ -9837,33 +10095,25 @@ class ScorecardChartConfigBuilder {
                     this.secondaryFontColor,
             },
             baselineDescr: {
-                font: getDefaultContextFont(baselineFontSize * BASELINE_DESCR_FONT_RATIO),
+                font: getDefaultContextFont(baselineDescrFontSize),
+                isSplit: isBaselineSplit,
                 color: this.secondaryFontColor,
             },
-            baselineArrow: this.baselineArrow === "neutral"
+            baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar
                 ? undefined
                 : {
-                    size: this.keyValue ? 0.8 * baselineFontSize : 0,
+                    size: this.keyValue ? 0.8 * baselineValueFontSize : 0,
                     color: this.runtime.baselineColor || this.secondaryFontColor,
                 },
         };
     }
     /** Get the height of the chart minus all the vertical paddings */
     getDrawableHeight() {
-        const verticalPadding = 2 * this.chartPadding;
-        let availableHeight = this.height - verticalPadding;
+        const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
+        let availableHeight = this.height - 2 * verticalPadding;
         availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
-    /** Return the element with he widest text in the chart */
-    getWidestElement() {
-        const baseline = new BaselineElement(this.runtime.baselineStyle);
-        const keyValue = new KeyValueElement(this.runtime.keyValueStyle);
-        return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.context, this) >
-            keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.context, this)
-            ? baseline
-            : keyValue;
-    }
 }
 class ScorecardScalableElement {
     style;
@@ -9872,29 +10122,7 @@ class ScorecardScalableElement {
     }
     measureTextWidth(ctx, text, fontSize) {
         ctx.font = getDefaultContextFont(fontSize, this.style.bold, this.style.italic);
-        return ctx.measureText(text).width;
-    }
-}
-class BaselineElement extends ScorecardScalableElement {
-    getElementWidth(fontSize, ctx, chart) {
-        if (!chart.runtime) {
-            return 0;
-        }
-        const baselineStr = chart.baseline;
-        // Put mock text to simulate the width of the up/down arrow
-        const largeText = chart.baselineArrow !== "neutral" ? "A " + baselineStr : baselineStr;
-        let textWidth = this.measureTextWidth(ctx, largeText, fontSize);
-        // Baseline descr font size should be smaller than baseline font size
-        textWidth += this.measureTextWidth(ctx, chart.baselineDescr, fontSize * BASELINE_DESCR_FONT_RATIO);
-        return textWidth;
-    }
-    getElementMaxFontSize(availableHeight, chart) {
-        if (!chart.runtime) {
-            return 0;
-        }
-        const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
-        const maxHeight = haveBaseline ? BASELINE_BOX_HEIGHT_RATIO * availableHeight : 0;
-        return maxHeight / LINE_HEIGHT;
+        return computeCachedTextWidth(ctx, text);
     }
 }
 class KeyValueElement extends ScorecardScalableElement {
@@ -9955,11 +10183,11 @@ autoCompleteProviders.add("dataValidation", {
         }
         else {
             const range = this.getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
-            values = this.getters
+            values = Array.from(new Set(this.getters
                 .getRangeValues(range)
                 .filter(isNotNull)
                 .map((value) => value.toString())
-                .filter((val) => val !== "");
+                .filter((val) => val !== "")));
         }
         return values.map((value) => ({ text: value }));
     },
@@ -10824,33 +11052,6 @@ var array = /*#__PURE__*/Object.freeze({
 // -----------------------------------------------------------------------------
 // FORMAT.LARGE.NUMBER
 // -----------------------------------------------------------------------------
-function formatLargeNumber(arg, unit, locale) {
-    const value = Math.abs(toNumber(arg?.value, locale));
-    const format = arg?.format;
-    if (unit !== undefined) {
-        const postFix = unit?.value;
-        switch (postFix) {
-            case "k":
-                return createLargeNumberFormat(format, 1e3, "k");
-            case "m":
-                return createLargeNumberFormat(format, 1e6, "m");
-            case "b":
-                return createLargeNumberFormat(format, 1e9, "b");
-            default:
-                throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
-        }
-    }
-    if (value < 1e5) {
-        return createLargeNumberFormat(format, 0, "");
-    }
-    else if (value < 1e8) {
-        return createLargeNumberFormat(format, 1e3, "k");
-    }
-    else if (value < 1e11) {
-        return createLargeNumberFormat(format, 1e6, "m");
-    }
-    return createLargeNumberFormat(format, 1e9, "b");
-}
 const FORMAT_LARGE_NUMBER = {
     description: _t("Apply a large number format"),
     args: [
@@ -11012,7 +11213,7 @@ const ATAN2 = {
     compute: function (x, y) {
         const _x = toNumber(x, this.locale);
         const _y = toNumber(y, this.locale);
-        assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
         return Math.atan2(_y, _x);
     },
     isExported: true,
@@ -11142,7 +11343,7 @@ const COT = {
     returns: ["NUMBER"],
     compute: function (angle) {
         const _angle = toNumber(angle, this.locale);
-        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_angle);
         return 1 / Math.tan(_angle);
     },
     isExported: true,
@@ -11156,7 +11357,7 @@ const COTH = {
     returns: ["NUMBER"],
     compute: function (value) {
         const _value = toNumber(value, this.locale);
-        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_value);
         return 1 / Math.tanh(_value);
     },
     isExported: true,
@@ -11284,7 +11485,7 @@ const CSC = {
     returns: ["NUMBER"],
     compute: function (angle) {
         const _angle = toNumber(angle, this.locale);
-        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_angle);
         return 1 / Math.sin(_angle);
     },
     isExported: true,
@@ -11298,7 +11499,7 @@ const CSCH = {
     returns: ["NUMBER"],
     compute: function (value) {
         const _value = toNumber(value, this.locale);
-        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_value);
         return 1 / Math.sinh(_value);
     },
     isExported: true,
@@ -11497,7 +11698,7 @@ const LN = {
 // MOD
 // -----------------------------------------------------------------------------
 function mod(dividend, divisor) {
-    assert(() => divisor !== 0, _t("The divisor must be different from 0."));
+    assert(() => divisor !== 0, _t("The divisor must be different from 0."), CellErrorType.DivisionByZero);
     const modulus = dividend % divisor;
     // -42 % 10 = -2 but we want 8, so need the code below
     if ((modulus > 0 && divisor < 0) || (modulus < 0 && divisor > 0)) {
@@ -12066,7 +12267,7 @@ function average(values, locale) {
         count += 1;
         return acc + a;
     }, 0, locale);
-    assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assertNotZero(count);
     return sum / count;
 }
 function countNumbers(values, locale) {
@@ -12133,7 +12334,7 @@ function filterAndFlatData(dataY, dataX) {
 function covariance(dataY, dataX, isSample) {
     const { flatDataX, flatDataY } = filterAndFlatData(dataY, dataX);
     const count = flatDataY.length;
-    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
     let sumY = 0;
     let sumX = 0;
     for (let i = 0; i < count; i++) {
@@ -12156,7 +12357,7 @@ function variance(args, isSample, textAs0, locale) {
         count += 1;
         return acc + a;
     }, 0, locale);
-    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
     const average = sum / count;
     return (reduceFunction(args, (acc, a) => acc + Math.pow(a - average, 2), 0, locale) /
         (count - (isSample ? 1 : 0)));
@@ -12353,7 +12554,7 @@ const AVEDEV = {
             count += 1;
             return acc + a;
         }, 0, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         const average = sum / count;
         return reduceNumbers(values, (acc, a) => acc + Math.abs(average - a), 0, this.locale) / count;
     },
@@ -12425,7 +12626,7 @@ const AVERAGE_WEIGHTED = {
                 }
             }
         }
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return { value: sum / count, format: inferFormat(args[0]) };
     },
 };
@@ -12445,7 +12646,7 @@ const AVERAGEA = {
             count += 1;
             return acc + a;
         }, 0, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return {
             value: sum / count,
             format: inferFormat(args[0]),
@@ -12475,7 +12676,7 @@ const AVERAGEIF = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return sum / count;
     },
     isExported: true,
@@ -12504,7 +12705,7 @@ const AVERAGEIFS = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return sum / count;
     },
     isExported: true,
@@ -17929,7 +18130,7 @@ const DIVIDE = {
     returns: ["NUMBER"],
     compute: function (dividend, divisor) {
         const _divisor = toNumber(divisor, this.locale);
-        assert(() => _divisor !== 0, _t("The divisor must be different from zero."));
+        assert(() => _divisor !== 0, _t("The divisor must be different from zero."), CellErrorType.DivisionByZero);
         return {
             value: toNumber(dividend, this.locale) / _divisor,
             format: dividend?.format || divisor?.format,
@@ -19406,10 +19607,10 @@ function aggregateDataForLabels(labels, datasets) {
         }
     }
     return {
-        labels: Object.keys(labelMap),
+        labels: Array.from(labelSet),
         dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
             ...dataset,
-            data: Object.values(labelMap).map((dataOfLabel) => dataOfLabel[indexOfDataset]),
+            data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
         })),
     };
 }
@@ -19428,8 +19629,8 @@ function truncateLabel(label) {
 function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale }) {
     const options = {
         // https://www.chartjs.org/docs/latest/general/responsive.html
-        responsive: true,
-        maintainAspectRatio: false,
+        responsive: true, // will resize when its container is resized
+        maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
         layout: {
             padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
         },
@@ -19475,7 +19676,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
             labels: labels.map(truncateLabel),
             datasets: [],
         },
-        platform: undefined,
+        platform: undefined, // This key is optional and will be set by chart.js
         plugins: [],
     };
 }
@@ -19752,7 +19953,7 @@ function getBarConfiguration(chart, labels, localeFormat) {
         },
         y: {
             position: chart.verticalAxisPosition,
-            beginAtZero: true,
+            beginAtZero: true, // the origin of the y axis is always zero
             ticks: {
                 color: fontColor,
                 callback: (value) => {
@@ -19803,6 +20004,204 @@ function createBarChartRuntime(chart, getters) {
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
+class ComboChart extends AbstractChart {
+    useBothYAxis;
+    dataSets;
+    labelRange;
+    background;
+    verticalAxisPosition;
+    legendPosition;
+    aggregated;
+    dataSetsHaveTitle;
+    type = "combo";
+    constructor(definition, sheetId, getters) {
+        super(definition, sheetId, getters);
+        this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.background = definition.background;
+        this.verticalAxisPosition = definition.verticalAxisPosition;
+        this.legendPosition = definition.legendPosition;
+        this.aggregated = definition.aggregated;
+        this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+        this.useBothYAxis = definition.useBothYAxis;
+    }
+    static transformDefinition(definition, executed) {
+        return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+    }
+    static validateChartDefinition(validator, definition) {
+        return validator.checkValidations(definition, checkDataset, checkLabelRange);
+    }
+    getContextCreation() {
+        return {
+            background: this.background,
+            title: this.title,
+            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            auxiliaryRange: this.labelRange
+                ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                : undefined,
+            aggregated: this.aggregated,
+        };
+    }
+    getDefinition() {
+        return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+    }
+    getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        return {
+            type: "combo",
+            dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+            background: this.background,
+            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            legendPosition: this.legendPosition,
+            verticalAxisPosition: this.verticalAxisPosition,
+            labelRange: labelRange
+                ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                : undefined,
+            title: this.title,
+            aggregated: this.aggregated,
+            useBothYAxis: this.useBothYAxis,
+        };
+    }
+    getDefinitionForExcel() {
+        // Excel does not support aggregating labels
+        if (this.aggregated) {
+            return undefined;
+        }
+        const dataSets = this.dataSets
+            .map((ds) => toExcelDataset(this.getters, ds))
+            .filter((ds) => ds.range !== "" && ds.range !== CellErrorType.InvalidReference);
+        const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        return {
+            ...this.getDefinition(),
+            backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
+            fontColor: toXlsxHexColor(chartFontColor(this.background)),
+            dataSets,
+            labelRange,
+        };
+    }
+    updateRanges(applyChange) {
+        const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+        if (!isStale) {
+            return this;
+        }
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+        return new ComboChart(definition, this.sheetId, this.getters);
+    }
+    static getDefinitionFromContextCreation(context) {
+        return {
+            background: context.background,
+            dataSets: context.range ? context.range : [],
+            dataSetsHaveTitle: false,
+            aggregated: context.aggregated,
+            legendPosition: "top",
+            title: context.title || "",
+            verticalAxisPosition: "left",
+            labelRange: context.auxiliaryRange || undefined,
+            type: "combo",
+            useBothYAxis: false,
+        };
+    }
+    copyForSheetId(sheetId) {
+        const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
+        const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
+        return new ComboChart(definition, sheetId, this.getters);
+    }
+    copyInSheetId(sheetId) {
+        const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+        return new ComboChart(definition, sheetId, this.getters);
+    }
+}
+function createComboChartRuntime(chart, getters) {
+    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+    const locale = getters.getLocale();
+    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
+    let labels = labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+    if (chart.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (chart.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    const localeFormat = { format: dataSetFormat, locale };
+    const fontColor = chartFontColor(chart.background);
+    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+    const legend = {
+        labels: { color: fontColor },
+    };
+    if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
+        legend.display = false;
+    }
+    else {
+        legend.position = chart.legendPosition;
+    }
+    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
+    config.options.layout = {
+        padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
+    };
+    config.options.scales = {
+        x: {
+            ticks: {
+                padding: 5,
+                color: fontColor,
+            },
+        },
+    };
+    const verticalAxis = {
+        beginAtZero: true, // the origin of the y axis is always zero
+        ticks: {
+            color: fontColor,
+            callback: (value) => {
+                value = Number(value);
+                if (isNaN(value))
+                    return value;
+                const { locale, format } = localeFormat;
+                return formatValue(value, {
+                    locale,
+                    format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+                });
+            },
+        },
+    };
+    if (chart.useBothYAxis) {
+        config.options.scales.y = {
+            ...verticalAxis,
+            position: "left",
+        };
+        config.options.scales.y1 = {
+            ...verticalAxis,
+            position: "right",
+            grid: {
+                display: false,
+            },
+        };
+    }
+    else {
+        config.options.scales.y = {
+            ...verticalAxis,
+            position: chart.verticalAxisPosition,
+        };
+    }
+    const colors = new ChartColors();
+    for (let [index, { label, data }] of dataSetsValues.entries()) {
+        const color = colors.next();
+        const dataset = {
+            label,
+            data,
+            borderColor: color,
+            backgroundColor: color,
+            yAxisID: index > 0 && chart.useBothYAxis ? "y1" : "y",
+            type: index === 0 ? "bar" : "line",
+            order: -index,
+        };
+        config.data.datasets.push(dataset);
+    }
+    return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+}
+
 function isDataRangeValid(definition) {
     return definition.dataRange && !rangeReference.test(definition.dataRange)
         ? "InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */
@@ -20141,7 +20540,7 @@ function getBestTimeUnitForScale(labels, format, locale) {
         return undefined;
     }
     const labelsTimestamps = labelDates.map((date) => date.getTime());
-    const period = Math.max(...labelsTimestamps) - Math.min(...labelsTimestamps);
+    const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
     const minUnit = getFormatMinDisplayUnit(format);
     if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
         return "second";
@@ -20273,7 +20672,7 @@ function getLineOrScatterConfiguration(chart, labels, localeFormat) {
         },
         y: {
             position: chart.verticalAxisPosition,
-            beginAtZero: true,
+            beginAtZero: true, // the origin of the y axis is always zero
             ticks: {
                 color: fontColor,
                 callback: (value) => {
@@ -20359,7 +20758,7 @@ function createLineOrScatterChartRuntime(chart, getters) {
         const dataset = {
             label,
             data,
-            tension: 0,
+            tension: 0, // 0 -> render straight lines, which is much faster
             borderColor: color,
             backgroundColor,
             pointBackgroundColor: color,
@@ -20581,7 +20980,7 @@ class PieChart extends AbstractChart {
             ...this.getDefinition(),
             backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
             fontColor: toXlsxHexColor(chartFontColor(this.background)),
-            verticalAxisPosition: "left",
+            verticalAxisPosition: "left", //TODO ExcelChartDefinition should be adapted, but can be done later
             dataSets,
             labelRange,
         };
@@ -20629,7 +21028,7 @@ function getPieConfiguration(chart, labels, localeFormat) {
 }
 function getPieColors(colors, dataSetsValues) {
     const pieColors = [];
-    const maxLength = Math.max(...dataSetsValues.map((ds) => ds.data.length));
+    const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
     for (let i = 0; i <= maxLength; i++) {
         pieColors.push(colors.next());
     }
@@ -20776,7 +21175,21 @@ class ScatterChart extends AbstractChart {
         return new ScatterChart(definition, this.sheetId, this.getters);
     }
     getDefinitionForExcel() {
-        return undefined; // TODO
+        // Excel does not support aggregating labels
+        if (this.aggregated) {
+            return undefined;
+        }
+        const dataSets = this.dataSets
+            .map((ds) => toExcelDataset(this.getters, ds))
+            .filter((ds) => ds.range !== "");
+        const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        return {
+            ...this.getDefinition(),
+            backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
+            fontColor: toXlsxHexColor(chartFontColor(this.background)),
+            dataSets,
+            labelRange,
+        };
     }
     copyForSheetId(sheetId) {
         const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
@@ -20798,7 +21211,7 @@ function createScatterChartRuntime(chart, getters) {
     configOptions.elements = {
         point: {
             radius: 3,
-            hoverRadius: 3,
+            hoverRadius: 3, // chartJS seems bugged, the point starts with the "hoverRadius" value
             hitRadius: 8,
         },
     };
@@ -20838,6 +21251,16 @@ chartRegistry.add("bar", {
     name: _t("Bar"),
     sequence: 10,
 });
+chartRegistry.add("combo", {
+    match: (type) => type === "combo",
+    createChart: (definition, sheetId, getters) => new ComboChart(definition, sheetId, getters),
+    getChartRuntime: createComboChartRuntime,
+    validateChartDefinition: (validator, definition) => ComboChart.validateChartDefinition(validator, definition),
+    transformDefinition: (definition, executed) => ComboChart.transformDefinition(definition, executed),
+    getChartDefinitionFromContextCreation: (context) => ComboChart.getDefinitionFromContextCreation(context),
+    name: _t("Combo"),
+    sequence: 15,
+});
 chartRegistry.add("line", {
     match: (type) => type === "line",
     createChart: (definition, sheetId, getters) => new LineChart(definition, sheetId, getters),
@@ -20891,6 +21314,7 @@ chartRegistry.add("scatter", {
 const chartComponentRegistry = new Registry();
 chartComponentRegistry.add("line", ChartJsComponent);
 chartComponentRegistry.add("bar", ChartJsComponent);
+chartComponentRegistry.add("combo", ChartJsComponent);
 chartComponentRegistry.add("pie", ChartJsComponent);
 chartComponentRegistry.add("gauge", GaugeChartComponent);
 chartComponentRegistry.add("scatter", ChartJsComponent);
@@ -23149,7 +23573,7 @@ const lightTemplateWithHeader = (colorSet) => ({
         style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
         border: { bottom: { color: colorSet.highlight, style: "thin" } },
     },
-    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
     firstRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
     secondRowStripe: { border: { bottom: { color: colorSet.highlight, style: "thin" } } },
 });
@@ -23167,7 +23591,7 @@ const lightTemplateAllBorders = (colorSet) => ({
         },
     },
     headerRow: { border: { bottom: { color: colorSet.highlight, style: "medium" } } },
-    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
     firstRowStripe: { style: { fillColor: colorSet.light } },
     firstColumnStripe: { style: { fillColor: colorSet.light } },
 });
@@ -23186,7 +23610,7 @@ const mediumTemplateBandedBorders = (colorSet) => ({
     headerRow: {
         style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
     },
-    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
     firstRowStripe: { style: { fillColor: colorSet.light } },
     firstColumnStripe: { style: { fillColor: colorSet.light } },
 });
@@ -23222,7 +23646,7 @@ const mediumTemplateMinimalBorders = (colorSet) => ({
             bottom: { color: "#000000", style: "medium" },
         },
     },
-    totalRow: { border: { top: { color: "#000000", style: "medium" } } },
+    totalRow: { border: { top: { color: "#000000", style: "medium" } } }, // @compatibility: should be double line
     headerRow: {
         style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" },
         border: { bottom: { color: "#000000", style: "medium" } },
@@ -23246,7 +23670,7 @@ const mediumTemplateAllBorders = (colorSet) => ({
         },
         style: { fillColor: colorSet.light },
     },
-    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } },
+    totalRow: { border: { top: { color: colorSet.highlight, style: "medium" } } }, // @compatibility: should be double line
     firstRowStripe: { style: { fillColor: colorSet.medium } },
     firstColumnStripe: { style: { fillColor: colorSet.medium } },
 });
@@ -23277,7 +23701,7 @@ const darkTemplateNoBorders = (colorSet) => ({
     category: "dark",
     colorName: colorSet.name,
     wholeTable: { style: { fillColor: colorSet.light } },
-    totalRow: { border: { top: { color: "#000000", style: "medium" } } },
+    totalRow: { border: { top: { color: "#000000", style: "medium" } } }, // @compatibility: should be double line
     headerRow: { style: { fillColor: colorSet.highlight, textColor: "#FFFFFF" } },
     firstRowStripe: { style: { fillColor: colorSet.medium } },
     firstColumnStripe: { style: { fillColor: colorSet.medium } },
@@ -23442,8 +23866,8 @@ const DELETE_CONTENT_ROWS_NAME = (env) => {
     let last;
     const activesRows = env.model.getters.getActiveRows();
     if (activesRows.size !== 0) {
-        first = Math.min(...activesRows);
-        last = Math.max(...activesRows);
+        first = largeMin([...activesRows]);
+        last = largeMax([...activesRows]);
     }
     else {
         const zone = env.model.getters.getSelectedZones()[0];
@@ -23471,8 +23895,8 @@ const DELETE_CONTENT_COLUMNS_NAME = (env) => {
     let last;
     const activeCols = env.model.getters.getActiveCols();
     if (activeCols.size !== 0) {
-        first = Math.min(...activeCols);
-        last = Math.max(...activeCols);
+        first = largeMin([...activeCols]);
+        last = largeMax([...activeCols]);
     }
     else {
         const zone = env.model.getters.getSelectedZones()[0];
@@ -23500,8 +23924,8 @@ const REMOVE_ROWS_NAME = (env) => {
     let last;
     const activesRows = env.model.getters.getActiveRows();
     if (activesRows.size !== 0) {
-        first = Math.min(...activesRows);
-        last = Math.max(...activesRows);
+        first = largeMin([...activesRows]);
+        last = largeMax([...activesRows]);
     }
     else {
         const zone = env.model.getters.getSelectedZones()[0];
@@ -23542,8 +23966,8 @@ const REMOVE_COLUMNS_NAME = (env) => {
     let last;
     const activeCols = env.model.getters.getActiveCols();
     if (activeCols.size !== 0) {
-        first = Math.min(...activeCols);
-        last = Math.max(...activeCols);
+        first = largeMin([...activeCols]);
+        last = largeMax([...activeCols]);
     }
     else {
         const zone = env.model.getters.getSelectedZones()[0];
@@ -23584,7 +24008,7 @@ const INSERT_ROWS_BEFORE_ACTION = (env) => {
     let row;
     let quantity;
     if (activeRows.size) {
-        row = Math.min(...activeRows);
+        row = largeMin([...activeRows]);
         quantity = activeRows.size;
     }
     else {
@@ -23605,7 +24029,7 @@ const INSERT_ROWS_AFTER_ACTION = (env) => {
     let row;
     let quantity;
     if (activeRows.size) {
-        row = Math.max(...activeRows);
+        row = largeMax([...activeRows]);
         quantity = activeRows.size;
     }
     else {
@@ -23626,7 +24050,7 @@ const INSERT_COLUMNS_BEFORE_ACTION = (env) => {
     let column;
     let quantity;
     if (activeCols.size) {
-        column = Math.min(...activeCols);
+        column = largeMin([...activeCols]);
         quantity = activeCols.size;
     }
     else {
@@ -23647,7 +24071,7 @@ const INSERT_COLUMNS_AFTER_ACTION = (env) => {
     let column;
     let quantity;
     if (activeCols.size) {
-        column = Math.max(...activeCols);
+        column = largeMax([...activeCols]);
         quantity = activeCols.size;
     }
     else {
@@ -27193,13 +27617,30 @@ class ColorPickerWidget extends Component {
     }
 }
 
-class ChartColor extends Component {
-    static template = "o-spreadsheet.ChartColor";
-    static components = { ColorPickerWidget, Section };
+const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+</svg>
+`;
+css /* scss */ `
+  .o-round-color-picker-button {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    border: 1px solid #aaa;
+    background-position: 1px 1px;
+    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
+  }
+`;
+class RoundColorPicker extends Component {
+    static template = "o-spreadsheet.RoundColorPicker";
+    static components = { ColorPickerWidget, Section, ColorPicker };
     static props = {
         currentColor: { type: String, optional: true },
+        title: { type: String, optional: true },
         onColorPicked: Function,
     };
+    colorPickerButtonRef = useRef("colorPickerButton");
     state;
     setup() {
         this.state = useState({ pickerOpened: false });
@@ -27211,6 +27652,19 @@ class ChartColor extends Component {
     togglePicker() {
         this.state.pickerOpened = !this.state.pickerOpened;
     }
+    onColorPicked(color) {
+        this.props.onColorPicked(color);
+        this.state.pickerOpened = false;
+    }
+    get colorPickerAnchorRect() {
+        const button = this.colorPickerButtonRef.el;
+        return getBoundingRectAsPOJO(button);
+    }
+    get buttonStyle() {
+        return cssPropertiesToCss({
+            background: this.props.currentColor,
+        });
+    }
 }
 
 class ChartTitle extends Component {
@@ -27224,7 +27678,7 @@ class ChartTitle extends Component {
 
 class LineBarPieDesignPanel extends Component {
     static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ChartColor, ChartTitle, Section };
+    static components = { RoundColorPicker, ChartTitle, Section };
     static props = {
         figureId: String,
         definition: Object,
@@ -27247,12 +27701,31 @@ class LineBarPieDesignPanel extends Component {
             [attr]: ev.target.value,
         });
     }
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
+    }
 }
 
 class BarChartDesignPanel extends LineBarPieDesignPanel {
     static template = "o-spreadsheet-BarChartDesignPanel";
 }
 
+class ComboChartConfigPanel extends LineBarPieConfigPanel {
+    static template = "o-spreadsheet-ComboChartConfigPanel";
+    get shouldUseRightAxis() {
+        return _t("Use right axis for line series");
+    }
+    onUpdateUseRightAxis(useBothYAxis) {
+        this.props.updateChart(this.props.figureId, {
+            useBothYAxis,
+        });
+    }
+}
+
+class ComboChartDesignPanel extends LineBarPieDesignPanel {
+    static template = "o-spreadsheet-ComboChartDesignPanel";
+}
+
 class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
     static components = { ChartErrorSection, ChartDataSeries };
@@ -27300,6 +27773,10 @@ css /* scss */ `
       line-height: 18px;
       width: 100%;
     }
+    td {
+      box-sizing: border-box;
+      height: 30px;
+    }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
     }
@@ -27322,7 +27799,12 @@ css /* scss */ `
 `;
 class GaugeChartDesignPanel extends Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
-    static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+    static components = {
+        ChartErrorSection,
+        RoundColorPicker,
+        ChartTitle,
+        Section,
+    };
     static props = {
         figureId: String,
         definition: Object,
@@ -27334,9 +27816,6 @@ class GaugeChartDesignPanel extends Component {
         sectionRuleDispatchResult: undefined,
         sectionRule: deepCopy(this.props.definition.sectionRule),
     });
-    setup() {
-        useExternalListener(window, "click", this.closeMenus);
-    }
     get title() {
         return _t(this.props.definition.title);
     }
@@ -27377,27 +27856,22 @@ class GaugeChartDesignPanel extends Component {
         const sectionRule = deepCopy(this.state.sectionRule);
         sectionRule.colors[target] = color;
         this.updateSectionRule(sectionRule);
-        this.closeMenus();
-    }
-    toggleMenu(menu) {
-        const isSelected = this.state.openedMenu === menu;
-        this.closeMenus();
-        if (!isSelected) {
-            this.state.openedMenu = menu;
-        }
     }
     updateSectionRule(sectionRule) {
         this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
             sectionRule,
         });
+        if (this.state.sectionRuleDispatchResult.isSuccessful) {
+            this.state.sectionRule = deepCopy(sectionRule);
+        }
     }
     canUpdateSectionRule(sectionRule) {
         this.state.sectionRuleDispatchResult = this.props.canUpdateChart(this.props.figureId, {
             sectionRule,
         });
     }
-    closeMenus() {
-        this.state.openedMenu = undefined;
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
     }
 }
 
@@ -27545,39 +28019,36 @@ class ScorecardChartConfigPanel extends Component {
 
 class ScorecardChartDesignPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+    static components = { RoundColorPicker, ChartTitle, Section, Checkbox };
     static props = {
         figureId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
     };
-    state = useState({
-        openedColorPicker: undefined,
-    });
-    setup() {
-        useExternalListener(window, "click", this.closeMenus);
-    }
     get title() {
         return _t(this.props.definition.title);
     }
+    get colorsSectionTitle() {
+        return this.props.definition.baselineMode === "progress"
+            ? _t("Progress bar colors")
+            : _t("Baseline colors");
+    }
+    get humanizeNumbersLabel() {
+        return _t("Humanize numbers");
+    }
     updateTitle(title) {
         this.props.updateChart(this.props.figureId, { title });
     }
+    updateHumanizeNumbers(humanize) {
+        this.props.updateChart(this.props.figureId, { humanize });
+    }
     translate(term) {
         return _t(term);
     }
     updateBaselineDescr(ev) {
         this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
-    toggleColorPicker(colorPickerId) {
-        if (this.state.openedColorPicker === colorPickerId) {
-            this.state.openedColorPicker = undefined;
-        }
-        else {
-            this.state.openedColorPicker = colorPickerId;
-        }
-    }
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
@@ -27590,10 +28061,9 @@ class ScorecardChartDesignPanel extends Component {
                 this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
-        this.closeMenus();
     }
-    closeMenus() {
-        this.state.openedColorPicker = undefined;
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
     }
 }
 
@@ -27610,6 +28080,10 @@ chartSidePanelComponentRegistry
     .add("bar", {
     configuration: BarConfigPanel,
     design: BarChartDesignPanel,
+})
+    .add("combo", {
+    configuration: ComboChartConfigPanel,
+    design: ComboChartDesignPanel,
 })
     .add("pie", {
     configuration: LineBarPieConfigPanel,
@@ -28538,6 +29012,7 @@ class ConditionalFormattingEditor extends Component {
         ColorPickerWidget,
         ConditionalFormatPreviewList,
         Section,
+        RoundColorPicker,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -30250,7 +30725,11 @@ class SplitIntoColumnsPanel extends Component {
         const composerStore = useStore(ComposerStore);
         // The feature makes no sense if we are editing a cell, because then the selection isn't active
         // Stop the edition when the panel is mounted, and close the panel if the user start editing a cell
-        useEffect(this.props.onCloseSidePanel, () => [composerStore.editionMode]);
+        useEffect((editionMode) => {
+            if (editionMode !== "inactive") {
+                this.props.onCloseSidePanel();
+            }
+        }, () => [composerStore.editionMode]);
         onMounted(() => {
             composerStore.stopEdition();
         });
@@ -31959,6 +32438,9 @@ class FunctionDescriptionProvider extends Component {
             this.assistantState.allowCellSelectionBehind = false;
         }, 2000);
     }
+    get formulaArgSeparator() {
+        return this.env.model.getters.getLocale().formulaArgSeparator + " ";
+    }
 }
 
 const functions$2 = functionRegistry.content;
@@ -32035,6 +32517,7 @@ class Composer extends Component {
         onComposerCellFocused: { type: Function, optional: true },
         onComposerContentFocused: Function,
         isDefaultFocus: { type: Boolean, optional: true },
+        onInputContextMenu: { type: Function, optional: true },
     };
     static components = { TextValueProvider, FunctionDescriptionProvider };
     static defaultProps = {
@@ -32085,6 +32568,9 @@ class Composer extends Component {
                 assistantStyle.right = `0px`;
             }
         }
+        else if (this.props.delimitation) {
+            assistantStyle["max-height"] = `${this.props.delimitation.height}px`;
+        }
         return cssPropertiesToCss(assistantStyle);
     }
     // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
@@ -32118,6 +32604,12 @@ class Composer extends Component {
         useEffect(() => {
             this.processContent();
         });
+        onPatched(() => {
+            // Required because typing '=SUM' and double-clicking another cell leaves ShowProvider/ShowDescription true
+            if (this.composerStore.editionMode === "inactive") {
+                this.processTokenAtCursor();
+            }
+        });
     }
     // ---------------------------------------------------------------------------
     // Handlers
@@ -32365,6 +32857,11 @@ class Composer extends Component {
             }
         }
     }
+    onContextMenu(ev) {
+        if (this.composerStore.editionMode === "inactive") {
+            this.props.onInputContextMenu?.(ev);
+        }
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -32586,6 +33083,7 @@ class GridComposer extends Component {
     static template = "o-spreadsheet-GridComposer";
     static props = {
         gridDims: Object,
+        onInputContextMenu: Function,
     };
     static components = { Composer };
     rect = this.defaultRect;
@@ -32633,6 +33131,7 @@ class GridComposer extends Component {
             isDefaultFocus: true,
             onComposerContentFocused: () => this.composerFocusStore.focusGridComposerContent(),
             onComposerCellFocused: (content) => this.composerFocusStore.focusGridComposerCell(content),
+            onInputContextMenu: this.props.onInputContextMenu,
         };
     }
     get containerStyle() {
@@ -32731,7 +33230,6 @@ class GridCellIcon extends Component {
         cellPosition: Object,
         horizontalAlign: { type: String, optional: true },
         verticalAlign: { type: String, optional: true },
-        offset: { type: Object, optional: true },
         slots: Object,
     };
     get iconStyle() {
@@ -32742,8 +33240,8 @@ class GridCellIcon extends Component {
         const x = this.getIconHorizontalPosition(rect, cellPosition);
         const y = this.getIconVerticalPosition(rect, cellPosition);
         return cssPropertiesToCss({
-            top: `${y + (this.props.offset?.y || 0)}px`,
-            left: `${x + (this.props.offset?.x || 0)}px`,
+            top: `${y}px`,
+            left: `${x}px`,
         });
     }
     getIconVerticalPosition(rect, cellPosition) {
@@ -32783,83 +33281,6 @@ class GridCellIcon extends Component {
     }
 }
 
-css /* scss */ `
-  .o-filter-icon {
-    color: ${FILTERS_COLOR};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      background: ${FILTERS_COLOR};
-      color: #fff;
-    }
-
-    &.o-high-contrast {
-      color: #defade;
-    }
-    &.o-high-contrast:hover {
-      color: ${FILTERS_COLOR};
-      background: #fff;
-    }
-  }
-  .o-filter-icon:hover {
-    background: ${FILTERS_COLOR};
-    color: #fff;
-  }
-`;
-class FilterIcon extends Component {
-    static template = "o-spreadsheet-FilterIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    cellPopovers;
-    setup() {
-        this.cellPopovers = useStore(CellPopoverStore);
-    }
-    onClick() {
-        const position = this.props.cellPosition;
-        const activePopover = this.cellPopovers.persistentCellPopover;
-        const { col, row } = position;
-        if (activePopover.isOpen &&
-            activePopover.col === col &&
-            activePopover.row === row &&
-            activePopover.type === "FilterMenu") {
-            this.cellPopovers.close();
-            return;
-        }
-        this.cellPopovers.open({ col, row }, "FilterMenu");
-    }
-    get isFilterActive() {
-        return this.env.model.getters.isFilterActive(this.props.cellPosition);
-    }
-    get iconClass() {
-        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
-        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
-        return luminance < 0.45 ? "o-high-contrast" : "";
-    }
-}
-
-class FilterIconsOverlay extends Component {
-    static template = "o-spreadsheet-FilterIconsOverlay";
-    static props = {
-        gridPosition: { type: Object, optional: true },
-    };
-    static components = {
-        GridCellIcon,
-        FilterIcon,
-    };
-    static defaultProps = {
-        gridPosition: { x: 0, y: 0 },
-    };
-    getFilterHeadersPositions() {
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        return this.env.model.getters.getFilterHeaders(sheetId);
-    }
-}
-
 const CHECKBOX_WIDTH = 15;
 const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
 css /* scss */ `
@@ -33527,6 +33948,80 @@ class FiguresContainer extends Component {
     }
 }
 
+css /* scss */ `
+  .o-filter-icon {
+    color: ${FILTERS_COLOR};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${GRID_ICON_EDGE_LENGTH}px;
+    height: ${GRID_ICON_EDGE_LENGTH}px;
+
+    &:hover {
+      background: ${FILTERS_COLOR};
+      color: #fff;
+    }
+
+    &.o-high-contrast {
+      color: #defade;
+    }
+    &.o-high-contrast:hover {
+      color: ${FILTERS_COLOR};
+      background: #fff;
+    }
+  }
+  .o-filter-icon:hover {
+    background: ${FILTERS_COLOR};
+    color: #fff;
+  }
+`;
+class FilterIcon extends Component {
+    static template = "o-spreadsheet-FilterIcon";
+    static props = {
+        cellPosition: Object,
+    };
+    cellPopovers;
+    setup() {
+        this.cellPopovers = useStore(CellPopoverStore);
+    }
+    onClick() {
+        const position = this.props.cellPosition;
+        const activePopover = this.cellPopovers.persistentCellPopover;
+        const { col, row } = position;
+        if (activePopover.isOpen &&
+            activePopover.col === col &&
+            activePopover.row === row &&
+            activePopover.type === "FilterMenu") {
+            this.cellPopovers.close();
+            return;
+        }
+        this.cellPopovers.open({ col, row }, "FilterMenu");
+    }
+    get isFilterActive() {
+        return this.env.model.getters.isFilterActive(this.props.cellPosition);
+    }
+    get iconClass() {
+        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
+        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
+        return luminance < 0.45 ? "o-high-contrast" : "";
+    }
+}
+
+class FilterIconsOverlay extends Component {
+    static template = "o-spreadsheet-FilterIconsOverlay";
+    static props = {
+        onMouseDown: Function,
+    };
+    static components = {
+        GridCellIcon,
+        FilterIcon,
+    };
+    getFilterHeadersPositions() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        return this.env.model.getters.getFilterHeaders(sheetId);
+    }
+}
+
 css /* scss */ `
   .o-grid-add-rows {
     input {
@@ -33740,7 +34235,12 @@ class GridOverlay extends Component {
         onGridMoved: Function,
         gridOverlayDimensions: String,
     };
-    static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
+    static components = {
+        FiguresContainer,
+        DataValidationOverlay,
+        GridAddRowsFooter,
+        FilterIconsOverlay,
+    };
     static defaultProps = {
         onCellHovered: () => { },
         onCellDoubleClicked: () => { },
@@ -33785,7 +34285,7 @@ class GridOverlay extends Component {
     get isPaintingFormat() {
         return this.env.model.getters.isPaintingFormat();
     }
-    onMouseDown(ev) {
+    onMouseDown(ev, modifiers) {
         if (ev.button > 0) {
             // not main button, probably a context menu
             return;
@@ -33794,6 +34294,7 @@ class GridOverlay extends Component {
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
+            closePopover: modifiers?.closePopover ?? true,
         });
     }
     onDoubleClick(ev) {
@@ -34097,11 +34598,6 @@ css /* scss */ `
       height: 10000px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
-    .o-unhide-buttons {
-      width: fit-content;
-      gap: 5px;
-      transform: translate(-50%, 0);
-    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -34263,10 +34759,6 @@ css /* scss */ `
       height: 1px;
       background-color: ${SELECTION_BORDER_COLOR};
     }
-    .o-unhide-buttons {
-      height: fit-content;
-      transform: translate(0, -50%);
-    }
     .o-unhide:hover {
       z-index: ${ComponentsImportance.Grid + 1};
       background-color: lightgrey;
@@ -35474,7 +35966,7 @@ class VerticalScrollBar extends Component {
     onScroll(offset) {
         const { scrollX } = this.env.model.getters.getActiveSheetDOMScrollInfo();
         this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
-            offsetX: scrollX,
+            offsetX: scrollX, // offsetX is the same
             offsetY: offset,
         });
     }
@@ -35568,7 +36060,6 @@ class Grid extends Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
     };
     HEADER_HEIGHT = HEADER_HEIGHT;
     HEADER_WIDTH = HEADER_WIDTH;
@@ -35762,8 +36253,8 @@ class Grid extends Component {
         "Ctrl+Shift+L": () => this.setHorizontalAlign("left"),
         "Ctrl+Shift+R": () => this.setHorizontalAlign("right"),
         "Ctrl+Shift+V": () => PASTE_AS_VALUE_ACTION(this.env),
-        "Ctrl+Shift+<": () => this.clearFormatting(),
-        "Ctrl+<": () => this.clearFormatting(),
+        "Ctrl+Shift+<": () => this.clearFormatting(), // for qwerty
+        "Ctrl+<": () => this.clearFormatting(), // for azerty
         "Ctrl+Shift+ ": () => {
             this.env.model.selection.selectAll();
         },
@@ -35869,17 +36360,17 @@ class Grid extends Component {
     // ---------------------------------------------------------------------------
     // Zone selection with mouse
     // ---------------------------------------------------------------------------
-    onCellClicked(col, row, { addZone, expandZone }) {
-        if (this.cellPopovers.isOpen) {
+    onCellClicked(col, row, modifiers) {
+        if (modifiers.closePopover && this.cellPopovers.isOpen) {
             this.cellPopovers.close();
         }
         if (this.composerStore.editionMode === "editing") {
             this.composerStore.stopEdition();
         }
-        if (expandZone) {
+        if (modifiers.expandZone) {
             this.env.model.selection.setAnchorCorner(col, row);
         }
-        else if (addZone) {
+        else if (modifiers.addZone) {
             this.env.model.selection.addCellToSelection(col, row);
         }
         else {
@@ -36199,6 +36690,7 @@ const XLSX_CHART_TYPES = [
     "surfaceChart",
     "surface3DChart",
     "bubbleChart",
+    "comboChart",
 ];
 
 /** In XLSX color format (no #)  */
@@ -36530,10 +37022,10 @@ function convertCFCellIsOperator(xlsxCfOperator) {
 const CF_TYPE_CONVERSION_MAP = {
     aboveAverage: undefined,
     expression: undefined,
-    cellIs: undefined,
-    colorScale: undefined,
+    cellIs: undefined, // exist but isn't an operator in o_spreadsheet
+    colorScale: undefined, // exist but isn't an operator in o_spreadsheet
     dataBar: undefined,
-    iconSet: undefined,
+    iconSet: undefined, // exist but isn't an operator in o_spreadsheet
     top10: undefined,
     uniqueValues: undefined,
     duplicateValues: undefined,
@@ -36600,7 +37092,7 @@ const CHART_TYPE_CONVERSION_MAP = {
     line3DChart: undefined,
     stockChart: undefined,
     radarChart: undefined,
-    scatterChart: undefined,
+    scatterChart: "scatter",
     pieChart: "pie",
     pie3DChart: undefined,
     doughnutChart: "pie",
@@ -36610,6 +37102,7 @@ const CHART_TYPE_CONVERSION_MAP = {
     surfaceChart: undefined,
     surface3DChart: undefined,
     bubbleChart: undefined,
+    comboChart: "combo",
 };
 /** Conversion map for the SUBTOTAL(index, formula) function in xlsx, index <=> actual function*/
 const SUBTOTAL_FUNCTION_CONVERSION_MAP = {
@@ -36768,7 +37261,7 @@ const XLSX_INDEXED_COLORS = {
     61: "993366",
     62: "333399",
     63: "333333",
-    64: "000000",
+    64: "000000", // system foreground
     65: "FFFFFF", // system background
 };
 const IMAGE_MIMETYPE_TO_EXTENSION_MAPPING = {
@@ -37363,29 +37856,12 @@ function convertWidthFromExcel(width) {
         return width;
     return Math.round((width / WIDTH_FACTOR) * 100) / 100;
 }
-function convertBorderDescr(descr) {
-    if (!descr) {
-        return undefined;
-    }
-    return {
-        style: descr.style,
-        color: { rgb: descr.color },
-    };
-}
 function extractStyle(cell, data) {
     let style = {};
     if (cell.style) {
         style = data.styles[cell.style];
     }
     const format = extractFormat(cell, data);
-    const exportedBorder = {};
-    if (cell.border) {
-        const border = data.borders[cell.border];
-        exportedBorder.left = convertBorderDescr(border.left);
-        exportedBorder.right = convertBorderDescr(border.right);
-        exportedBorder.bottom = convertBorderDescr(border.bottom);
-        exportedBorder.top = convertBorderDescr(border.top);
-    }
     const styles = {
         font: {
             size: style?.fontSize || DEFAULT_FONT_SIZE,
@@ -37399,7 +37875,7 @@ function extractStyle(cell, data) {
             }
             : { reservedAttribute: "none" },
         numFmt: format ? { format: format, id: 0 /* id not used for export */ } : undefined,
-        border: exportedBorder || {},
+        border: cell.border || 0,
         alignment: {
             horizontal: style.align,
             vertical: style.verticalAlign
@@ -37421,15 +37897,12 @@ function extractFormat(cell, data) {
     return undefined;
 }
 function normalizeStyle(construct, styles) {
-    const { id: fontId } = pushElement(styles["font"], construct.fonts);
-    const { id: fillId } = pushElement(styles["fill"], construct.fills);
-    const { id: borderId } = pushElement(styles["border"], construct.borders);
     // Normalize this
     const numFmtId = convertFormat(styles["numFmt"], construct.numFmts);
     const style = {
-        fontId,
-        fillId,
-        borderId,
+        fontId: pushElement(styles.font, construct.fonts),
+        fillId: pushElement(styles.fill, construct.fills),
+        borderId: styles.border,
         numFmtId,
         alignment: {
             vertical: styles.alignment.vertical,
@@ -37437,8 +37910,7 @@ function normalizeStyle(construct, styles) {
             wrapText: styles.alignment.wrapText,
         },
     };
-    const { id } = pushElement(style, construct.styles);
-    return id;
+    return pushElement(style, construct.styles);
 }
 function convertFormat(format, numFmtStructure) {
     if (!format) {
@@ -37446,8 +37918,7 @@ function convertFormat(format, numFmtStructure) {
     }
     let formatId = XLSX_FORMAT_MAP[format.format];
     if (!formatId) {
-        const { id } = pushElement(format, numFmtStructure);
-        formatId = id + FIRST_NUMFMT_ID;
+        formatId = pushElement(format, numFmtStructure) + FIRST_NUMFMT_ID;
     }
     return formatId;
 }
@@ -37472,20 +37943,15 @@ function addRelsToFile(relsFiles, path, rel) {
     return id;
 }
 function pushElement(property, propertyList) {
-    for (let [key, value] of Object.entries(propertyList)) {
-        if (JSON.stringify(value) === JSON.stringify(property)) {
-            return { id: parseInt(key, 10), list: propertyList };
+    let len = propertyList.length;
+    const operator = typeof property === "object" ? deepEquals : (a, b) => a === b;
+    for (let i = 0; i < len; i++) {
+        if (operator(property, propertyList[i])) {
+            return i;
         }
     }
-    let elemId = propertyList.findIndex((elem) => JSON.stringify(elem) === JSON.stringify(property));
-    if (elemId === -1) {
-        propertyList.push(property);
-        elemId = propertyList.length - 1;
-    }
-    return {
-        id: elemId,
-        list: propertyList,
-    };
+    propertyList[propertyList.length] = property;
+    return propertyList.length - 1;
 }
 const chartIds = [];
 /**
@@ -37960,7 +38426,7 @@ function convertHyperlink(link, cellValue, warningManager) {
 function getSheetDims(sheet) {
     const dims = [0, 0];
     for (let row of sheet.rows) {
-        dims[0] = Math.max(dims[0], ...row.cells.map((cell) => toCartesian(cell.xc).col));
+        dims[0] = Math.max(dims[0], largeMax(row.cells.map((cell) => toCartesian(cell.xc).col)));
         dims[1] = Math.max(dims[1], row.index);
     }
     dims[0] = Math.max(dims[0], EXCEL_IMPORT_DEFAULT_NUMBER_OF_COLS);
@@ -38280,7 +38746,25 @@ function parseXML(xmlString, mimeType = "text/xml") {
     }
     return document;
 }
-function getDefaultXLSXStructure() {
+function convertBorderDescr(descr) {
+    if (!descr) {
+        return undefined;
+    }
+    return {
+        style: descr.style,
+        color: { rgb: descr.color },
+    };
+}
+function getDefaultXLSXStructure(data) {
+    const xlsxBorders = Object.values(data.borders).map((border) => {
+        return {
+            left: convertBorderDescr(border.left),
+            right: convertBorderDescr(border.right),
+            bottom: convertBorderDescr(border.bottom),
+            top: convertBorderDescr(border.top),
+        };
+    });
+    const borders = [{}, ...xlsxBorders];
     return {
         relsFiles: [],
         sharedStrings: [],
@@ -38303,7 +38787,7 @@ function getDefaultXLSXStructure() {
             },
         ],
         fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-        borders: [{}],
+        borders,
         numFmts: [],
         dxfs: [],
     };
@@ -38826,6 +39310,9 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             if (!CHART_TYPE_CONVERSION_MAP[chartType]) {
                 throw new Error(`Unsupported chart type ${chartType}`);
             }
+            if (CHART_TYPE_CONVERSION_MAP[chartType] === "combo") {
+                return this.extractComboChart(rootChartElement);
+            }
             // Title can be separated into multiple xml elements (for styling and such), we only import the text
             const chartTitle = this.mapOnElements({ parent: rootChartElement, query: "c:title a:t" }, (textElement) => {
                 return textElement.textContent || "";
@@ -38836,8 +39323,8 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             return {
                 title: chartTitle,
                 type: CHART_TYPE_CONVERSION_MAP[chartType],
-                dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`)),
-                labelRange: this.extractChildTextContent(rootChartElement, "c:ser c:cat c:f"),
+                dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`), chartType),
+                labelRange: this.extractChildTextContent(rootChartElement, `c:ser ${chartType === "scatterChart" ? "c:numRef" : "c:cat"} c:f`),
                 backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                     default: "ffffff",
                 }).asString(),
@@ -38854,7 +39341,41 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             };
         })[0];
     }
-    extractChartDatasets(chartElement) {
+    extractComboChart(chartElement) {
+        // Title can be separated into multiple xml elements (for styling and such), we only import the text
+        const chartTitle = this.mapOnElements({ parent: chartElement, query: "c:title a:t" }, (textElement) => {
+            return textElement.textContent || "";
+        }).join("");
+        const barChartGrouping = this.extractChildAttr(chartElement, "c:grouping", "val", {
+            default: "clustered",
+        }).asString();
+        return {
+            title: chartTitle,
+            type: "combo",
+            dataSets: [
+                ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`), "comboChart"),
+                ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`), "comboChart"),
+            ],
+            labelRange: this.extractChildTextContent(chartElement, "c:ser c:cat c:f"),
+            backgroundColor: this.extractChildAttr(chartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
+                default: "ffffff",
+            }).asString(),
+            verticalAxisPosition: this.extractChildAttr(chartElement, "c:valAx > c:axPos", "val", {
+                default: "l",
+            }).asString() === "r"
+                ? "right"
+                : "left",
+            legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(chartElement, "c:legendPos", "val", {
+                default: "b",
+            }).asString()],
+            stacked: barChartGrouping === "stacked",
+            fontColor: "000000",
+        };
+    }
+    extractChartDatasets(chartElement, chartType) {
+        if (chartType === "scatterChart") {
+            return this.extractScatterChartDatasets(chartElement);
+        }
         return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
             return {
                 label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
@@ -38862,6 +39383,14 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             };
         });
     }
+    extractScatterChartDatasets(chartElement) {
+        return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
+            return {
+                label: this.extractChildTextContent(chartDataElement, "c:xVal c:f", { required: false }),
+                range: this.extractChildTextContent(chartDataElement, "c:yVal c:f", { required: true }),
+            };
+        });
+    }
     /**
      * The chart type in the XML isn't explicitly defined, but there is an XML element that define the
      * chart, and this element tag name tells us which type of chart it is. We just need to find this XML element.
@@ -38871,12 +39400,21 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
         if (!plotAreaElement) {
             throw new Error("Missing plot area in the chart definition.");
         }
+        let globalTag = undefined;
         for (let child of plotAreaElement.children) {
             const tag = removeTagEscapedNamespaces(child.tagName);
             if (XLSX_CHART_TYPES.some((chartType) => chartType === tag)) {
-                return tag;
+                if (!globalTag) {
+                    globalTag = tag;
+                }
+                else if (globalTag !== tag) {
+                    globalTag = "comboChart";
+                }
             }
         }
+        if (globalTag) {
+            return globalTag;
+        }
         throw new Error("Unknown chart type");
     }
 }
@@ -40246,12 +40784,14 @@ class BasePlugin {
     static getters = [];
     history;
     dispatch;
-    constructor(stateObserver, dispatch) {
+    canDispatch;
+    constructor(stateObserver, dispatch, canDispatch) {
         this.history = Object.assign(Object.create(stateObserver), {
             update: stateObserver.addChange.bind(stateObserver, this),
             selectCell: () => { },
         });
         this.dispatch = dispatch;
+        this.canDispatch = canDispatch;
     }
     /**
      * Export for excel should be available for all plugins, even for the UI.
@@ -40330,8 +40870,8 @@ class BasePlugin {
 class CorePlugin extends BasePlugin {
     getters;
     uuidGenerator;
-    constructor({ getters, stateObserver, range, dispatch, uuidGenerator }) {
-        super(stateObserver, dispatch);
+    constructor({ getters, stateObserver, range, dispatch, canDispatch, uuidGenerator, }) {
+        super(stateObserver, dispatch, canDispatch);
         range.addRangeProvider(this.adaptRanges.bind(this));
         this.getters = getters;
         this.uuidGenerator = uuidGenerator;
@@ -42467,6 +43007,9 @@ class DataValidationPlugin extends CorePlugin {
         if (newRule.criterion.type === "isBoolean") {
             this.setCenterStyleToBooleanCells(newRule);
         }
+        else if (newRule.criterion.type === "isValueInList") {
+            newRule.criterion.values = Array.from(new Set(newRule.criterion.values));
+        }
         const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules);
         const ruleIndex = adaptedRules.findIndex((rule) => rule.id === newRule.id);
         if (ruleIndex !== -1) {
@@ -42863,7 +43406,7 @@ class HeaderVisibilityPlugin extends CorePlugin {
                 if (hiddenElements.size >= elements) {
                     return "TooManyHiddenElements" /* CommandResult.TooManyHiddenElements */;
                 }
-                else if (Math.min(...cmd.elements) < 0 || Math.max(...cmd.elements) > elements) {
+                else if (largeMin(cmd.elements) < 0 || largeMax(cmd.elements) > elements) {
                     return "InvalidHeaderIndex" /* CommandResult.InvalidHeaderIndex */;
                 }
                 else {
@@ -43192,7 +43735,6 @@ class MergePlugin extends CorePlugin {
         "isInSameMerge",
         "isMergeHidden",
         "getMainCellPosition",
-        "getBottomLeftCell",
         "expandZone",
         "doesIntersectMerge",
         "doesColumnsHaveCommonMerges",
@@ -43374,13 +43916,6 @@ class MergePlugin extends CorePlugin {
         const mergeTopLeftPos = this.getMerge(position).topLeft;
         return { sheetId: position.sheetId, col: mergeTopLeftPos.col, row: mergeTopLeftPos.row };
     }
-    getBottomLeftCell(position) {
-        if (!this.isInMerge(position)) {
-            return position;
-        }
-        const { bottom, left } = this.getMerge(position);
-        return { sheetId: position.sheetId, col: left, row: bottom };
-    }
     isMergeHidden(sheetId, merge) {
         const hiddenColsGroups = this.getters.getHiddenColsGroups(sheetId);
         const hiddenRowsGroups = this.getters.getHiddenRowsGroups(sheetId);
@@ -43681,8 +44216,8 @@ class RangeAdapter {
                     let newRange = range;
                     let changeType = "NONE";
                     for (let group of groups) {
-                        const min = Math.min(...group);
-                        const max = Math.max(...group);
+                        const min = largeMin(group);
+                        const max = largeMax(group);
                         if (range.zone[start] <= min && min <= range.zone[end]) {
                             const toRemove = Math.min(range.zone[end], max) - min + 1;
                             changeType = "RESIZE";
@@ -44064,7 +44599,6 @@ class SheetPlugin extends CorePlugin {
         "getSheetIds",
         "getVisibleSheetIds",
         "isSheetVisible",
-        "getEvaluationSheets",
         "doesHeaderExist",
         "doesHeadersExist",
         "getCell",
@@ -44131,8 +44665,8 @@ class SheetPlugin extends CorePlugin {
                 }
                 return "Success" /* CommandResult.Success */;
             case "REMOVE_COLUMNS_ROWS": {
-                const min = Math.min(...cmd.elements);
-                const max = Math.max(...cmd.elements);
+                const min = largeMin(cmd.elements);
+                const max = largeMax(cmd.elements);
                 if (min < 0 || !this.doesHeaderExist(cmd.sheetId, cmd.dimension, max)) {
                     return "InvalidHeaderIndex" /* CommandResult.InvalidHeaderIndex */;
                 }
@@ -44323,9 +44857,6 @@ class SheetPlugin extends CorePlugin {
     getVisibleSheetIds() {
         return this.orderedSheetIds.filter(this.isSheetVisible.bind(this));
     }
-    getEvaluationSheets() {
-        return this.sheets;
-    }
     doesHeaderExist(sheetId, dimension, index) {
         return dimension === "COL"
             ? index >= 0 && index < this.getNumberCols(sheetId)
@@ -44334,13 +44865,6 @@ class SheetPlugin extends CorePlugin {
     doesHeadersExist(sheetId, dimension, headerIndexes) {
         return headerIndexes.every((index) => this.doesHeaderExist(sheetId, dimension, index));
     }
-    getRow(sheetId, index) {
-        const row = this.getSheet(sheetId).rows[index];
-        if (!row) {
-            throw new Error(`Row ${row} not found.`);
-        }
-        return row;
-    }
     getCell({ sheetId, col, row }) {
         const sheet = this.tryGetSheet(sheetId);
         const cellId = sheet?.rows[row]?.cells[col];
@@ -45844,8 +46368,8 @@ class UIPlugin extends BasePlugin {
     getters;
     ui;
     selection;
-    constructor({ getters, stateObserver, dispatch, uiActions, selection }) {
-        super(stateObserver, dispatch);
+    constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection, }) {
+        super(stateObserver, dispatch, canDispatch);
         this.getters = getters;
         this.ui = uiActions;
         this.selection = selection;
@@ -45909,12 +46433,6 @@ class CompilationParametersBuilder {
                 : _t("Function %s expects its parameters to be single values or single cell references, not ranges.", functionName.toString()));
         }
         const position = { sheetId: range.sheetId, col: range.zone.left, row: range.zone.top };
-        return this.readCell(position);
-    }
-    readCell(position) {
-        if (!this.getters.tryGetSheet(position.sheetId)) {
-            throw new EvaluationError(_t("Invalid sheet name"));
-        }
         return this.computeCell(position);
     }
     /**
@@ -45950,7 +46468,7 @@ class CompilationParametersBuilder {
             matrix[colIndex] = new Array(height);
             for (let row = _zone.top; row <= _zone.bottom; row++) {
                 const rowIndex = row - _zone.top;
-                matrix[colIndex][rowIndex] = this.readCell({ sheetId, col, row });
+                matrix[colIndex][rowIndex] = this.computeCell({ sheetId, col, row });
             }
         }
         this.rangeCache[cacheKey] = matrix;
@@ -47058,15 +47576,15 @@ class Evaluator {
     getEvaluatedCell(position) {
         return this.evaluatedCells.get(position) || EMPTY_CELL;
     }
-    getSpreadPositionsOf(position) {
+    getSpreadZone(position) {
         if (!this.spreadingRelations.isArrayFormula(position)) {
-            return [];
+            return undefined;
         }
         if (this.evaluatedCells.get(position)?.type === CellValueType.error) {
-            return [position];
+            return positionToZone(position);
         }
         const spreadPositions = Array.from(this.spreadingRelations.getArrayResultPositions(position));
-        return [position, ...spreadPositions];
+        return union(positionToZone(position), unionPositionsToZone(spreadPositions));
     }
     getEvaluatedPositions() {
         return this.evaluatedCells.keys();
@@ -47131,7 +47649,9 @@ class Evaluator {
         this.blockedArrayFormulas = this.createEmptyPositionSet();
         this.spreadingRelations = new SpreadingRelation(this.createEmptyPositionSet.bind(this));
         this.formulaDependencies = lazy(() => {
-            const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position).map((range) => ({
+            const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position)
+                .filter((range) => !range.invalidSheetName && !range.invalidXc)
+                .map((range) => ({
                 data: position,
                 boundingBox: {
                     zone: range.zone,
@@ -47471,7 +47991,7 @@ class EvaluationPlugin extends UIPlugin {
         "getEvaluatedCell",
         "getEvaluatedCells",
         "getEvaluatedCellsInZone",
-        "getSpreadPositionsOf",
+        "getSpreadZone",
         "getArrayFormulaSpreadingOn",
         "isEmpty",
     ];
@@ -47577,8 +48097,11 @@ class EvaluationPlugin extends UIPlugin {
     getEvaluatedCellsInZone(sheetId, zone) {
         return positions(zone).map(({ col, row }) => this.getters.getEvaluatedCell({ sheetId, col, row }));
     }
-    getSpreadPositionsOf(position) {
-        return this.evaluator.getSpreadPositionsOf(position);
+    /**
+     * Return the spread zone the position is part of, if any
+     */
+    getSpreadZone(position) {
+        return this.evaluator.getSpreadZone(position);
     }
     getArrayFormulaSpreadingOn(position) {
         return this.evaluator.getArrayFormulaSpreadingOn(position);
@@ -47618,7 +48141,7 @@ class EvaluationPlugin extends UIPlugin {
                 ? getItemId(newFormat, data.formats)
                 : exportedCellData.format;
             let content;
-            if (formulaCell instanceof FormulaCellWithDependencies) {
+            if (isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                 content = formulaCell.contentWithFixedReferences;
             }
             else {
@@ -47666,17 +48189,17 @@ function isBadExpression(tokens) {
  */
 function sortWithClusters(colorsToSort) {
     const clusters = [
-        { leadColor: rgba(255, 0, 0), colors: [] },
-        { leadColor: rgba(255, 128, 0), colors: [] },
-        { leadColor: rgba(128, 128, 0), colors: [] },
-        { leadColor: rgba(128, 255, 0), colors: [] },
-        { leadColor: rgba(0, 255, 0), colors: [] },
-        { leadColor: rgba(0, 255, 128), colors: [] },
-        { leadColor: rgba(0, 255, 255), colors: [] },
-        { leadColor: rgba(0, 127, 255), colors: [] },
-        { leadColor: rgba(0, 0, 255), colors: [] },
-        { leadColor: rgba(127, 0, 255), colors: [] },
-        { leadColor: rgba(128, 0, 128), colors: [] },
+        { leadColor: rgba(255, 0, 0), colors: [] }, // red
+        { leadColor: rgba(255, 128, 0), colors: [] }, // orange
+        { leadColor: rgba(128, 128, 0), colors: [] }, // yellow
+        { leadColor: rgba(128, 255, 0), colors: [] }, // chartreuse
+        { leadColor: rgba(0, 255, 0), colors: [] }, // green
+        { leadColor: rgba(0, 255, 128), colors: [] }, // spring green
+        { leadColor: rgba(0, 255, 255), colors: [] }, // cyan
+        { leadColor: rgba(0, 127, 255), colors: [] }, // azure
+        { leadColor: rgba(0, 0, 255), colors: [] }, // blue
+        { leadColor: rgba(127, 0, 255), colors: [] }, // violet
+        { leadColor: rgba(128, 0, 128), colors: [] }, // magenta
         { leadColor: rgba(255, 0, 128), colors: [] }, // rose
     ];
     for (const color of colorsToSort.map(colorToRGBA)) {
@@ -48067,13 +48590,13 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
             .map((cell) => cell.value);
         switch (threshold.type) {
             case "value":
-                const result = functionName === "max" ? Math.max(...rangeValues) : Math.min(...rangeValues);
+                const result = functionName === "max" ? largeMax(rangeValues) : largeMin(rangeValues);
                 return result;
             case "number":
                 return Number(threshold.value);
             case "percentage":
-                const min = Math.min(...rangeValues);
-                const max = Math.max(...rangeValues);
+                const min = largeMin(rangeValues);
+                const max = largeMax(rangeValues);
                 const delta = max - min;
                 return min + (delta * Number(threshold.value)) / 100;
             case "percentile":
@@ -48540,8 +49063,8 @@ class DynamicTablesPlugin extends UIPlugin {
         else if (deepEquals(parentSpreadingCell, topLeft) && getZoneArea(unionZone) === 1) {
             return true;
         }
-        const spreadPositions = this.getters.getSpreadPositionsOf(parentSpreadingCell);
-        return deepEquals(unionZone, unionPositionsToZone(spreadPositions));
+        const zone = this.getters.getSpreadZone(parentSpreadingCell);
+        return deepEquals(unionZone, zone);
     }
     coreTableToTable(sheetId, table) {
         if (table.type !== "dynamic") {
@@ -48549,8 +49072,7 @@ class DynamicTablesPlugin extends UIPlugin {
         }
         const tableZone = table.range.zone;
         const tablePosition = { sheetId, col: tableZone.left, row: tableZone.top };
-        const spreadPositions = this.getters.getSpreadPositionsOf(tablePosition);
-        const zone = spreadPositions.length ? unionPositionsToZone(spreadPositions) : table.range.zone;
+        const zone = this.getters.getSpreadZone(tablePosition) ?? table.range.zone;
         const range = this.getters.getRangeFromZone(sheetId, zone);
         const filters = this.getDynamicTableFilters(sheetId, table, zone);
         return { id: table.id, range, filters, config: table.config };
@@ -49000,8 +49522,7 @@ class AutofillPlugin extends UIPlugin {
         let row = zone.bottom;
         if (col > 0) {
             let leftPosition = { sheetId, col: col - 1, row };
-            while (this.getters.getCorrespondingFormulaCell(leftPosition) ||
-                this.getters.getCell(leftPosition)?.content) {
+            while (this.getters.getEvaluatedCell(leftPosition).type !== CellValueType.empty) {
                 row += 1;
                 leftPosition = { sheetId, col: col - 1, row };
             }
@@ -49010,8 +49531,7 @@ class AutofillPlugin extends UIPlugin {
             col = zone.right;
             if (col <= this.getters.getNumberCols(sheetId)) {
                 let rightPosition = { sheetId, col: col + 1, row };
-                while (this.getters.getCorrespondingFormulaCell(rightPosition) ||
-                    this.getters.getCell(rightPosition)?.content) {
+                while (this.getters.getEvaluatedCell(rightPosition).type !== CellValueType.empty) {
                     row += 1;
                     rightPosition = { sheetId, col: col + 1, row };
                 }
@@ -49321,13 +49841,13 @@ class AutomaticSumPlugin extends UIPlugin {
         const cells = this.getters.getEvaluatedCellsInZone(sheet.id, zone);
         const cellPositions = range(end, -1, -1);
         const invalidCells = cellPositions.filter((position) => cells[position] && !cells[position].isAutoSummable);
-        const maxValidPosition = Math.max(...invalidCells);
+        const maxValidPosition = largeMax(invalidCells);
         const numberSequences = groupConsecutive(cellPositions.filter((position) => this.isNumber(cells[position])));
         const firstSequence = numberSequences[0] || [];
-        if (Math.max(...firstSequence) < maxValidPosition) {
+        if (largeMax(firstSequence) < maxValidPosition) {
             return Infinity;
         }
-        return Math.min(...firstSequence);
+        return largeMin(firstSequence);
     }
     shouldFindData(sheetId, zone) {
         return this.getters.isEmpty(sheetId, zone) || this.getters.isSingleCellOrMerge(sheetId, zone);
@@ -50902,8 +51422,6 @@ class SheetUIPlugin extends UIPlugin {
     static getters = [
         "doesCellHaveGridIcon",
         "getCellWidth",
-        "getCellComputedBorder",
-        "getCellComputedStyle",
         "getTextWidth",
         "getCellText",
         "getCellMultiLineText",
@@ -50947,7 +51465,7 @@ class SheetUIPlugin extends UIPlugin {
     // Getters
     // ---------------------------------------------------------------------------
     getCellWidth(position) {
-        const style = this.getCellComputedStyle(position);
+        const style = this.getters.getCellComputedStyle(position);
         let contentWidth = 0;
         const content = this.getters.getEvaluatedCell(position).formattedValue;
         if (content) {
@@ -51040,35 +51558,12 @@ class SheetUIPlugin extends UIPlugin {
      */
     isCellEmpty(position) {
         const mainPosition = this.getters.getMainCellPosition(position);
-        return !(this.getters.getCorrespondingFormulaCell(mainPosition) ||
-            this.getters.getCell(mainPosition)?.content);
-    }
-    getCellComputedBorder(position) {
-        const cellBorder = this.getters.getCellBorder(position) || {};
-        const cellTableBorder = this.getters.getCellTableBorder(position) || {};
-        // Use removeFalsyAttributes to avoid overwriting borders with undefined values
-        const border = { ...cellTableBorder, ...removeFalsyAttributes(cellBorder) };
-        return isObjectEmptyRecursive(border) ? null : border;
-    }
-    getCellComputedStyle(position) {
-        const cell = this.getters.getCell(position);
-        const cfStyle = this.getters.getCellConditionalFormatStyle(position);
-        const tableStyle = this.getters.getCellTableStyle(position);
-        const computedStyle = {
-            ...removeFalsyAttributes(tableStyle),
-            ...removeFalsyAttributes(cell?.style),
-            ...removeFalsyAttributes(cfStyle),
-        };
-        const evaluatedCell = this.getters.getEvaluatedCell(position);
-        if (evaluatedCell.link && !computedStyle.textColor) {
-            computedStyle.textColor = LINK_COLOR;
-        }
-        return computedStyle;
+        return this.getters.getEvaluatedCell(mainPosition).type === CellValueType.empty;
     }
     getColMaxWidth(sheetId, index) {
         const cellsPositions = positions(this.getters.getColsZone(sheetId, index, index));
         const sizes = cellsPositions.map((position) => this.getCellWidth({ sheetId, ...position }));
-        return Math.max(0, ...sizes);
+        return Math.max(0, largeMax(sizes));
     }
     /**
      * Check that any "sheetId" in the command matches an existing
@@ -51097,6 +51592,241 @@ class SheetUIPlugin extends UIPlugin {
     }
 }
 
+class TableStylePlugin extends UIPlugin {
+    static getters = ["getCellTableStyle", "getCellTableBorder"];
+    tableStyles = {};
+    handle(cmd) {
+        if (invalidateEvaluationCommands.has(cmd.type) ||
+            (cmd.type === "UPDATE_CELL" && "content" in cmd) ||
+            cmd.type === "EVALUATE_CELLS") {
+            this.tableStyles = {};
+            return;
+        }
+        if (doesCommandInvalidatesTableStyle(cmd)) {
+            delete this.tableStyles[cmd.sheetId];
+            return;
+        }
+    }
+    finalize() {
+        for (const sheetId of this.getters.getSheetIds()) {
+            if (!this.tableStyles[sheetId]) {
+                this.tableStyles[sheetId] = {};
+            }
+            for (const table of this.getters.getTables(sheetId)) {
+                if (!this.tableStyles[sheetId][table.id]) {
+                    this.tableStyles[sheetId][table.id] = this.computeTableStyle(sheetId, table);
+                }
+            }
+        }
+    }
+    getCellTableStyle(position) {
+        const table = this.getters.getTable(position);
+        if (!table) {
+            return undefined;
+        }
+        return this.tableStyles[position.sheetId][table.id]().styles[position.col]?.[position.row];
+    }
+    getCellTableBorder(position) {
+        const table = this.getters.getTable(position);
+        if (!table) {
+            return undefined;
+        }
+        return this.tableStyles[position.sheetId][table.id]().borders[position.col]?.[position.row];
+    }
+    computeTableStyle(sheetId, table) {
+        return lazy(() => {
+            const { config, numberOfCols, numberOfRows } = this.getTableRuntimeConfig(sheetId, table);
+            const relativeTableStyle = getComputedTableStyle(config, numberOfCols, numberOfRows);
+            // Return the style with sheet coordinates instead of tables coordinates
+            const mapping = this.getTableMapping(sheetId, table);
+            const absoluteTableStyle = { borders: {}, styles: {} };
+            for (let col = 0; col < numberOfCols; col++) {
+                const colInSheet = mapping.colMapping[col];
+                absoluteTableStyle.borders[colInSheet] = {};
+                absoluteTableStyle.styles[colInSheet] = {};
+                for (let row = 0; row < numberOfRows; row++) {
+                    const rowInSheet = mapping.rowMapping[row];
+                    absoluteTableStyle.borders[colInSheet][rowInSheet] = relativeTableStyle.borders[col][row];
+                    absoluteTableStyle.styles[colInSheet][rowInSheet] = relativeTableStyle.styles[col][row];
+                }
+            }
+            return absoluteTableStyle;
+        });
+    }
+    /**
+     * Get the actual table config that will be used to compute the table style. It is different from
+     * the config of the table because of hidden rows and columns in the sheet. For example remove the
+     * hidden rows from config.numberOfHeaders.
+     */
+    getTableRuntimeConfig(sheetId, table) {
+        const tableZone = table.range.zone;
+        const config = { ...table.config };
+        let numberOfCols = tableZone.right - tableZone.left + 1;
+        let numberOfRows = tableZone.bottom - tableZone.top + 1;
+        for (let row = tableZone.top; row <= tableZone.bottom; row++) {
+            if (!this.getters.isRowHidden(sheetId, row)) {
+                continue;
+            }
+            numberOfRows--;
+            if (row - tableZone.top < table.config.numberOfHeaders) {
+                config.numberOfHeaders--;
+                if (config.numberOfHeaders < 0) {
+                    config.numberOfHeaders = 0;
+                }
+            }
+            if (row === tableZone.bottom) {
+                config.totalRow = false;
+            }
+        }
+        for (let col = tableZone.left; col <= tableZone.right; col++) {
+            if (!this.getters.isColHidden(sheetId, col)) {
+                continue;
+            }
+            numberOfCols--;
+            if (col === tableZone.left) {
+                config.firstColumn = false;
+            }
+            if (col === tableZone.right) {
+                config.lastColumn = false;
+            }
+        }
+        return {
+            config,
+            numberOfCols,
+            numberOfRows,
+        };
+    }
+    /**
+     * Get a mapping: relative col/row position in the table <=> col/row in the sheet
+     */
+    getTableMapping(sheetId, table) {
+        const colMapping = {};
+        const rowMapping = {};
+        let colOffset = 0;
+        let rowOffset = 0;
+        const tableZone = table.range.zone;
+        for (let col = tableZone.left; col <= tableZone.right; col++) {
+            if (this.getters.isColHidden(sheetId, col)) {
+                continue;
+            }
+            colMapping[colOffset] = col;
+            colOffset++;
+            for (let row = tableZone.top; row <= tableZone.bottom; row++) {
+                if (this.getters.isRowHidden(sheetId, row)) {
+                    continue;
+                }
+                rowMapping[rowOffset] = row;
+                rowOffset++;
+            }
+        }
+        return {
+            colMapping,
+            rowMapping,
+        };
+    }
+}
+const invalidateTableStyleCommands = [
+    "HIDE_COLUMNS_ROWS",
+    "UNHIDE_COLUMNS_ROWS",
+    "UNFOLD_HEADER_GROUP",
+    "FOLD_HEADER_GROUP",
+    "FOLD_ALL_HEADER_GROUPS",
+    "UNFOLD_ALL_HEADER_GROUPS",
+    "CREATE_TABLE",
+    "UPDATE_TABLE",
+    "UPDATE_FILTER",
+    "REMOVE_TABLE",
+];
+const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
+function doesCommandInvalidatesTableStyle(cmd) {
+    return invalidateTableStyleCommandsSet.has(cmd.type);
+}
+
+class CellComputedStylePlugin extends UIPlugin {
+    static getters = ["getCellComputedBorder", "getCellComputedStyle"];
+    styles = {};
+    borders = {};
+    handle(cmd) {
+        if (invalidateEvaluationCommands.has(cmd.type) ||
+            cmd.type === "UPDATE_CELL" ||
+            cmd.type === "EVALUATE_CELLS") {
+            this.styles = {};
+            this.borders = {};
+            return;
+        }
+        if (doesCommandInvalidatesTableStyle(cmd)) {
+            delete this.styles[cmd.sheetId];
+            delete this.borders[cmd.sheetId];
+            return;
+        }
+        if (invalidateCFEvaluationCommands.has(cmd.type)) {
+            this.styles = {};
+            return;
+        }
+        if (invalidateBordersCommands.has(cmd.type)) {
+            this.borders = {};
+            return;
+        }
+    }
+    getCellComputedBorder(position) {
+        const { sheetId, row, col } = position;
+        if (this.borders[sheetId]?.[row]?.[col] !== undefined) {
+            return this.borders[sheetId][row][col];
+        }
+        if (!this.borders[sheetId]) {
+            this.borders[sheetId] = {};
+        }
+        if (!this.borders[sheetId][row]) {
+            this.borders[sheetId][row] = {};
+        }
+        if (!this.borders[sheetId][row][col]) {
+            this.borders[sheetId][row][col] = this.computeCellBorder(position);
+        }
+        return this.borders[sheetId][row][col];
+    }
+    getCellComputedStyle(position) {
+        const { sheetId, row, col } = position;
+        if (this.styles[sheetId]?.[row]?.[col] !== undefined) {
+            return this.styles[sheetId][row][col];
+        }
+        if (!this.styles[sheetId]) {
+            this.styles[sheetId] = {};
+        }
+        if (!this.styles[sheetId][row]) {
+            this.styles[sheetId][row] = {};
+        }
+        if (!this.styles[sheetId][row][col]) {
+            this.styles[sheetId][row][col] = this.computeCellStyle(position);
+        }
+        return this.styles[sheetId][row][col];
+    }
+    computeCellBorder(position) {
+        const cellBorder = this.getters.getCellBorder(position) || {};
+        const cellTableBorder = this.getters.getCellTableBorder(position) || {};
+        // Use removeFalsyAttributes to avoid overwriting borders with undefined values
+        const border = {
+            ...removeFalsyAttributes(cellTableBorder),
+            ...removeFalsyAttributes(cellBorder),
+        };
+        return isObjectEmptyRecursive(border) ? null : border;
+    }
+    computeCellStyle(position) {
+        const cell = this.getters.getCell(position);
+        const cfStyle = this.getters.getCellConditionalFormatStyle(position);
+        const tableStyle = this.getters.getCellTableStyle(position);
+        const computedStyle = {
+            ...removeFalsyAttributes(tableStyle),
+            ...removeFalsyAttributes(cell?.style),
+            ...removeFalsyAttributes(cfStyle),
+        };
+        const evaluatedCell = this.getters.getEvaluatedCell(position);
+        if (evaluatedCell.link && !computedStyle.textColor) {
+            computedStyle.textColor = LINK_COLOR;
+        }
+        return computedStyle;
+    }
+}
+
 const genericRepeatsTransforms = [
     repeatSheetDependantCommand,
     repeatTargetDependantCommand,
@@ -51674,148 +52404,6 @@ class TableAutofillPlugin extends UIPlugin {
     }
 }
 
-class TableStylePlugin extends UIPlugin {
-    static getters = ["getCellTableStyle", "getCellTableBorder"];
-    tableStyles = {};
-    handle(cmd) {
-        if (invalidateEvaluationCommands.has(cmd.type) ||
-            (cmd.type === "UPDATE_CELL" && "content" in cmd) ||
-            cmd.type === "EVALUATE_CELLS") {
-            this.tableStyles = {};
-            return;
-        }
-        switch (cmd.type) {
-            case "HIDE_COLUMNS_ROWS":
-            case "UNHIDE_COLUMNS_ROWS":
-            case "UNFOLD_HEADER_GROUP":
-            case "FOLD_HEADER_GROUP":
-            case "FOLD_ALL_HEADER_GROUPS":
-            case "UNFOLD_ALL_HEADER_GROUPS":
-            case "UPDATE_TABLE":
-            case "UPDATE_FILTER":
-                delete this.tableStyles[cmd.sheetId];
-                break;
-        }
-    }
-    finalize() {
-        for (const sheetId of this.getters.getSheetIds()) {
-            if (!this.tableStyles[sheetId]) {
-                this.tableStyles[sheetId] = {};
-            }
-            for (const table of this.getters.getTables(sheetId)) {
-                if (!this.tableStyles[sheetId][table.id]) {
-                    this.tableStyles[sheetId][table.id] = this.computeTableStyle(sheetId, table);
-                }
-            }
-        }
-    }
-    getCellTableStyle(position) {
-        const table = this.getters.getTable(position);
-        if (!table) {
-            return undefined;
-        }
-        return this.tableStyles[position.sheetId][table.id]().styles[position.col]?.[position.row];
-    }
-    getCellTableBorder(position) {
-        const table = this.getters.getTable(position);
-        if (!table) {
-            return undefined;
-        }
-        return this.tableStyles[position.sheetId][table.id]().borders[position.col]?.[position.row];
-    }
-    computeTableStyle(sheetId, table) {
-        return lazy(() => {
-            const { config, numberOfCols, numberOfRows } = this.getTableRuntimeConfig(sheetId, table);
-            const relativeTableStyle = getComputedTableStyle(config, numberOfCols, numberOfRows);
-            // Return the style with sheet coordinates instead of tables coordinates
-            const mapping = this.getTableMapping(sheetId, table);
-            const absoluteTableStyle = { borders: {}, styles: {} };
-            for (let col = 0; col < numberOfCols; col++) {
-                const colInSheet = mapping.colMapping[col];
-                absoluteTableStyle.borders[colInSheet] = {};
-                absoluteTableStyle.styles[colInSheet] = {};
-                for (let row = 0; row < numberOfRows; row++) {
-                    const rowInSheet = mapping.rowMapping[row];
-                    absoluteTableStyle.borders[colInSheet][rowInSheet] = relativeTableStyle.borders[col][row];
-                    absoluteTableStyle.styles[colInSheet][rowInSheet] = relativeTableStyle.styles[col][row];
-                }
-            }
-            return absoluteTableStyle;
-        });
-    }
-    /**
-     * Get the actual table config that will be used to compute the table style. It is different from
-     * the config of the table because of hidden rows and columns in the sheet. For example remove the
-     * hidden rows from config.numberOfHeaders.
-     */
-    getTableRuntimeConfig(sheetId, table) {
-        const tableZone = table.range.zone;
-        const config = { ...table.config };
-        let numberOfCols = tableZone.right - tableZone.left + 1;
-        let numberOfRows = tableZone.bottom - tableZone.top + 1;
-        for (let row = tableZone.top; row <= tableZone.bottom; row++) {
-            if (!this.getters.isRowHidden(sheetId, row)) {
-                continue;
-            }
-            numberOfRows--;
-            if (row - tableZone.top < table.config.numberOfHeaders) {
-                config.numberOfHeaders--;
-                if (config.numberOfHeaders < 0) {
-                    config.numberOfHeaders = 0;
-                }
-            }
-            if (row === tableZone.bottom) {
-                config.totalRow = false;
-            }
-        }
-        for (let col = tableZone.left; col <= tableZone.right; col++) {
-            if (!this.getters.isColHidden(sheetId, col)) {
-                continue;
-            }
-            numberOfCols--;
-            if (col === tableZone.left) {
-                config.firstColumn = false;
-            }
-            if (col === tableZone.right) {
-                config.lastColumn = false;
-            }
-        }
-        return {
-            config,
-            numberOfCols,
-            numberOfRows,
-        };
-    }
-    /**
-     * Get a mapping: relative col/row position in the table <=> col/row in the sheet
-     */
-    getTableMapping(sheetId, table) {
-        const colMapping = {};
-        const rowMapping = {};
-        let colOffset = 0;
-        let rowOffset = 0;
-        const tableZone = table.range.zone;
-        for (let col = tableZone.left; col <= tableZone.right; col++) {
-            if (this.getters.isColHidden(sheetId, col)) {
-                continue;
-            }
-            colMapping[colOffset] = col;
-            colOffset++;
-            for (let row = tableZone.top; row <= tableZone.bottom; row++) {
-                if (this.getters.isRowHidden(sheetId, row)) {
-                    continue;
-                }
-                rowMapping[rowOffset] = row;
-                rowOffset++;
-            }
-        }
-        return {
-            colMapping,
-            rowMapping,
-        };
-    }
-}
-
 /**
  * Clipboard Plugin
  *
@@ -52525,38 +53113,6 @@ class FilterEvaluationPlugin extends UIPlugin {
     }
 }
 
-const selectionStatisticFunctions = [
-    {
-        name: _t("Sum"),
-        types: [CellValueType.number],
-        compute: (values, locale) => sum([[values]], locale),
-    },
-    {
-        name: _t("Avg"),
-        types: [CellValueType.number],
-        compute: (values, locale) => average([[values]], locale),
-    },
-    {
-        name: _t("Min"),
-        types: [CellValueType.number],
-        compute: (values, locale) => min([[values]], locale),
-    },
-    {
-        name: _t("Max"),
-        types: [CellValueType.number],
-        compute: (values, locale) => max([[values]], locale),
-    },
-    {
-        name: _t("Count"),
-        types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
-        compute: (values) => countAny([[values]]),
-    },
-    {
-        name: _t("Count Numbers"),
-        types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
-        compute: (values, locale) => countNumbers([[values]], locale),
-    },
-];
 /**
  * SelectionPlugin
  */
@@ -52572,8 +53128,6 @@ class GridSelectionPlugin extends UIPlugin {
         "getSelectedZones",
         "getSelectedZone",
         "getSelectedCells",
-        "getStatisticFnResults",
-        "getAggregate",
         "getSelectedFigureId",
         "getSelection",
         "getActivePosition",
@@ -52608,7 +53162,10 @@ class GridSelectionPlugin extends UIPlugin {
         switch (cmd.type) {
             case "ACTIVATE_SHEET":
                 try {
-                    this.getters.getSheet(cmd.sheetIdTo);
+                    const sheet = this.getters.getSheet(cmd.sheetIdTo);
+                    if (!sheet.isVisible) {
+                        return "SheetIsHidden" /* CommandResult.SheetIsHidden */;
+                    }
                     break;
                 }
                 catch (error) {
@@ -52857,52 +53414,6 @@ class GridSelectionPlugin extends UIPlugin {
                 : this.getters.getNextVisibleCellPosition({ sheetId, col: 0, row: 0 });
         }
     }
-    getStatisticFnResults() {
-        const sheetId = this.getters.getActiveSheetId();
-        const cells = new Set();
-        for (const zone of this.gridSelection.zones) {
-            for (const { col, row } of positions(zone)) {
-                if (this.getters.isRowHidden(sheetId, row) || this.getters.isColHidden(sheetId, col)) {
-                    continue; // Skip hidden cells
-                }
-                const evaluatedCell = this.getters.getEvaluatedCell({ sheetId, col, row });
-                if (evaluatedCell.type !== CellValueType.empty) {
-                    cells.add(evaluatedCell);
-                }
-            }
-        }
-        const locale = this.getters.getLocale();
-        let statisticFnResults = {};
-        for (let fn of selectionStatisticFunctions) {
-            // We don't want to display statistical information when there is no interest:
-            // We set the statistical result to undefined if the data handled by the selection
-            // does not match the data handled by the function.
-            // Ex: if there are only texts in the selection, we prefer that the SUM result
-            // be displayed as undefined rather than 0.
-            let fnResult = undefined;
-            const evaluatedCells = [...cells].filter((c) => fn.types.includes(c.type));
-            if (evaluatedCells.length) {
-                fnResult = fn.compute(evaluatedCells, locale);
-            }
-            statisticFnResults[fn.name] = fnResult;
-        }
-        return statisticFnResults;
-    }
-    getAggregate() {
-        let aggregate = 0;
-        let n = 0;
-        const sheetId = this.getters.getActiveSheetId();
-        const cellPositions = this.gridSelection.zones.map(positions).flat();
-        for (const { col, row } of cellPositions) {
-            const cell = this.getters.getEvaluatedCell({ sheetId, col, row });
-            if (cell.type === CellValueType.number) {
-                n++;
-                aggregate += cell.value;
-            }
-        }
-        const locale = this.getters.getLocale();
-        return n < 2 ? null : formatValue(aggregate, { locale });
-    }
     isSelected(zone) {
         return !!this.getters.getSelectedZones().find((z) => isEqual(z, zone));
     }
@@ -52944,9 +53455,6 @@ class GridSelectionPlugin extends UIPlugin {
     // Other
     // ---------------------------------------------------------------------------
     activateSheet(sheetIdFrom, sheetIdTo) {
-        if (!this.getters.isSheetVisible(sheetIdTo)) {
-            this.dispatch("SHOW_SHEET", { sheetId: sheetIdTo });
-        }
         this.setActiveSheet(sheetIdTo);
         this.sheetsData[sheetIdFrom] = {
             gridSelection: deepCopy(this.gridSelection),
@@ -53953,7 +54461,7 @@ class SheetViewPlugin extends UIPlugin {
      * column of the current viewport
      */
     getColDimensionsInViewport(sheetId, col) {
-        const left = Math.min(...this.getters.getSheetViewVisibleCols());
+        const left = largeMin(this.getters.getSheetViewVisibleCols());
         const start = this.getters.getColRowOffsetInViewport("COL", left, col);
         const size = this.getters.getColSize(sheetId, col);
         const isColHidden = this.getters.isColHidden(sheetId, col);
@@ -53968,7 +54476,7 @@ class SheetViewPlugin extends UIPlugin {
      * of the current viewport
      */
     getRowDimensionsInViewport(sheetId, row) {
-        const top = Math.min(...this.getters.getSheetViewVisibleRows());
+        const top = largeMin(this.getters.getSheetViewVisibleRows());
         const start = this.getters.getColRowOffsetInViewport("ROW", top, row);
         const size = this.getters.getRowSize(sheetId, row);
         const isRowHidden = this.getters.isRowHidden(sheetId, row);
@@ -54320,6 +54828,7 @@ const statefulUIPluginRegistry = new Registry()
     .add("evaluation_filter", FilterEvaluationPlugin)
     .add("header_visibility_ui", HeaderVisibilityUIPlugin)
     .add("table_style", TableStylePlugin)
+    .add("cell_computed_style", CellComputedStylePlugin)
     .add("header_positions", HeaderPositionsUIPlugin)
     .add("viewport", SheetViewPlugin)
     .add("clipboard", ClipboardPlugin);
@@ -54380,6 +54889,38 @@ class ImageProvider {
     }
 }
 
+class ArrayFormulaHighlight extends SpreadsheetStore {
+    highlightStore = this.get(HighlightStore);
+    constructor(get) {
+        super(get);
+        this.highlightStore.register(this);
+    }
+    get highlights() {
+        const zone = this.getHighlightZone();
+        if (!zone) {
+            return [];
+        }
+        const sheetId = this.model.getters.getActiveSheetId();
+        return [
+            {
+                sheetId,
+                zone,
+                color: "#17A2B8",
+                noFill: true,
+                thinLine: true,
+            },
+        ];
+    }
+    getHighlightZone() {
+        const position = this.model.getters.getActivePosition();
+        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
+        const spreadZone = spreader
+            ? this.model.getters.getSpreadZone(spreader)
+            : this.model.getters.getSpreadZone(position);
+        return spreadZone;
+    }
+}
+
 const RIPPLE_KEY_FRAMES = [
     { transform: "scale(0)" },
     { transform: "scale(0.8)", offset: 0.33 },
@@ -54682,12 +55223,14 @@ class BottomBarSheet extends Component {
         this.editionState = "initializing";
     }
     stopEdition() {
-        if (!this.state.isEditing)
+        const input = this.sheetNameRef.el;
+        if (!this.state.isEditing || !input)
             return;
         this.state.isEditing = false;
         this.editionState = "initializing";
-        this.sheetNameRef.el?.blur();
+        input.blur();
         const inputValue = this.getInputContent() || "";
+        input.innerText = inputValue;
         interactiveRenameSheet(this.env, this.props.sheetId, inputValue, () => this.startEdition());
     }
     cancelEdition() {
@@ -54731,6 +55274,115 @@ class BottomBarSheet extends Component {
     }
 }
 
+const selectionStatisticFunctions = [
+    {
+        name: _t("Sum"),
+        types: [CellValueType.number],
+        compute: (values, locale) => sum([[values]], locale),
+    },
+    {
+        name: _t("Avg"),
+        types: [CellValueType.number],
+        compute: (values, locale) => average([[values]], locale),
+    },
+    {
+        name: _t("Min"),
+        types: [CellValueType.number],
+        compute: (values, locale) => min([[values]], locale),
+    },
+    {
+        name: _t("Max"),
+        types: [CellValueType.number],
+        compute: (values, locale) => max([[values]], locale),
+    },
+    {
+        name: _t("Count"),
+        types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
+        compute: (values) => countAny([[values]]),
+    },
+    {
+        name: _t("Count Numbers"),
+        types: [CellValueType.number, CellValueType.text, CellValueType.boolean, CellValueType.error],
+        compute: (values, locale) => countNumbers([[values]], locale),
+    },
+];
+class AggregateStatisticsStore extends SpreadsheetStore {
+    statisticFnResults = this._computeStatisticFnResults();
+    isDirty = false;
+    constructor(get) {
+        super(get);
+        this.model.selection.observe(this, {
+            handleEvent: this.handleEvent.bind(this),
+        });
+    }
+    handle(cmd) {
+        if (invalidateEvaluationCommands.has(cmd.type) ||
+            (cmd.type === "UPDATE_CELL" && "content" 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 "UNDO":
+            case "REDO":
+                this.isDirty = true;
+        }
+    }
+    finalize() {
+        if (this.isDirty) {
+            this.isDirty = false;
+            this.statisticFnResults = this._computeStatisticFnResults();
+        }
+    }
+    handleEvent() {
+        if (this.getters.isGridSelectionActive()) {
+            this.statisticFnResults = this._computeStatisticFnResults();
+        }
+    }
+    _computeStatisticFnResults() {
+        const getters = this.getters;
+        const sheetId = getters.getActiveSheetId();
+        const cells = new Set();
+        const zones = getters.getSelectedZones();
+        for (const zone of zones) {
+            for (let col = zone.left; col <= zone.right; col++) {
+                for (let row = zone.top; row <= zone.bottom; row++) {
+                    if (getters.isRowHidden(sheetId, row) || getters.isColHidden(sheetId, col)) {
+                        continue; // Skip hidden cells
+                    }
+                    const evaluatedCell = getters.getEvaluatedCell({ sheetId, col, row });
+                    if (evaluatedCell.type !== CellValueType.empty) {
+                        cells.add(evaluatedCell);
+                    }
+                }
+            }
+        }
+        const locale = getters.getLocale();
+        let statisticFnResults = {};
+        const cellsArray = [...cells];
+        for (let fn of selectionStatisticFunctions) {
+            // We don't want to display statistical information when there is no interest:
+            // We set the statistical result to undefined if the data handled by the selection
+            // does not match the data handled by the function.
+            // Ex: if there are only texts in the selection, we prefer that the SUM result
+            // be displayed as undefined rather than 0.
+            let fnResult = undefined;
+            const evaluatedCells = cellsArray.filter((c) => fn.types.includes(c.type));
+            if (evaluatedCells.length) {
+                fnResult = fn.compute(evaluatedCells, locale);
+            }
+            statisticFnResults[fn.name] = fnResult;
+        }
+        return statisticFnResults;
+    }
+}
+
 // -----------------------------------------------------------------------------
 // SpreadSheet
 // -----------------------------------------------------------------------------
@@ -54746,40 +55398,38 @@ css /* scss */ `
   }
 `;
 class BottomBarStatistic extends Component {
-    static template = "o-spreadsheet-BottomBarStatisic";
+    static template = "o-spreadsheet-BottomBarStatistic";
     static props = {
         openContextMenu: Function,
         closeContextMenu: Function,
     };
     static components = { Ripple };
     selectedStatisticFn = "";
-    statisticFnResults = {};
+    store;
     setup() {
-        this.statisticFnResults = this.env.model.getters.getStatisticFnResults();
+        this.store = useStore(AggregateStatisticsStore);
         onWillUpdateProps(() => {
-            const newStatisticFnResults = this.env.model.getters.getStatisticFnResults();
-            if (!deepEquals(newStatisticFnResults, this.statisticFnResults)) {
+            if (Object.values(this.store.statisticFnResults).every((result) => result === undefined)) {
                 this.props.closeContextMenu();
             }
-            this.statisticFnResults = newStatisticFnResults;
         });
     }
     getSelectedStatistic() {
         // don't display button if no function has a result
-        if (Object.values(this.statisticFnResults).every((result) => result === undefined)) {
+        if (Object.values(this.store.statisticFnResults).every((result) => result === undefined)) {
             return undefined;
         }
         if (this.selectedStatisticFn === "") {
-            this.selectedStatisticFn = Object.keys(this.statisticFnResults)[0];
+            this.selectedStatisticFn = Object.keys(this.store.statisticFnResults)[0];
         }
-        return this.getComposedFnName(this.selectedStatisticFn, this.statisticFnResults[this.selectedStatisticFn]);
+        return this.getComposedFnName(this.selectedStatisticFn);
     }
     listSelectionStatistics(ev) {
         const registry = new MenuItemRegistry();
         let i = 0;
-        for (let [fnName, fnValue] of Object.entries(this.statisticFnResults)) {
+        for (let [fnName] of Object.entries(this.store.statisticFnResults)) {
             registry.add(fnName, {
-                name: this.getComposedFnName(fnName, fnValue),
+                name: () => this.getComposedFnName(fnName),
                 sequence: i,
                 isReadonlyAllowed: true,
                 execute: () => {
@@ -54792,8 +55442,9 @@ class BottomBarStatistic extends Component {
         const { top, left, width } = target.getBoundingClientRect();
         this.props.openContextMenu(left + width, top, registry);
     }
-    getComposedFnName(fnName, fnValue) {
+    getComposedFnName(fnName) {
         const locale = this.env.model.getters.getLocale();
+        const fnValue = this.store.statisticFnResults[fnName];
         return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
     }
 }
@@ -54902,10 +55553,14 @@ class BottomBar extends Component {
                 name: sheet.name,
                 sequence: i,
                 isReadonlyAllowed: true,
-                textColor: sheet.isVisible ? undefined : "grey",
+                textColor: sheet.isVisible ? undefined : "#808080",
                 execute: (env) => {
+                    if (!this.env.model.getters.isSheetVisible(sheetId)) {
+                        this.env.model.dispatch("SHOW_SHEET", { sheetId });
+                    }
                     env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom: from, sheetIdTo: sheetId });
                 },
+                isEnabled: (env) => (env.model.getters.isReadonly() ? sheet.isVisible : true),
             });
             i++;
         }
@@ -54978,7 +55633,7 @@ class BottomBar extends Component {
         this.sheetListRef.el.scrollTo({ top: 0, left: scroll, behavior: "smooth" });
     }
     onSheetMouseDown(sheetId, event) {
-        if (event.button !== 0)
+        if (event.button !== 0 || this.env.model.getters.isReadonly())
             return;
         this.closeMenu();
         const visibleSheets = this.getVisibleSheets();
@@ -55014,7 +55669,7 @@ class BottomBar extends Component {
             .map((sheetEl) => sheetEl.getBoundingClientRect())
             .map((rect) => ({
             x: rect.x,
-            width: rect.width - 1,
+            width: rect.width - 1, // -1 to compensate negative margin
             y: rect.y,
             height: rect.height,
         }));
@@ -55052,7 +55707,6 @@ class SpreadsheetDashboard extends Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
     };
     cellPopovers;
     onMouseWheel;
@@ -55241,7 +55895,7 @@ class RowGroup extends AbstractHeaderGroup {
         }
         return cssPropertiesToCss({
             top: `${groupBox.headerRect.height / 2}px`,
-            left: `calc(50% - 1px)`,
+            left: `calc(50% - 1px)`, // -1px: we want the border to be on the center
             width: `30%`,
             height: `calc(100% - ${groupBox.headerRect.height / 2}px)`,
             "border-left": `1px solid ${HEADER_GROUPING_BORDER_COLOR}`,
@@ -55293,7 +55947,7 @@ class ColGroup extends AbstractHeaderGroup {
             return "";
         }
         return cssPropertiesToCss({
-            top: `calc(50% - 1px)`,
+            top: `calc(50% - 1px)`, // -1px: we want the border to be on the center
             left: `${groupBox.headerRect.width / 2}px`,
             width: `calc(100% - ${groupBox.headerRect.width / 2}px)`,
             height: `30%`,
@@ -55939,6 +56593,13 @@ class TopBarComposer extends Component {
             "border-color": SELECTION_BORDER_COLOR,
         });
     }
+    get delimitation() {
+        const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        return {
+            width,
+            height,
+        };
+    }
     onFocus(selection) {
         this.composerFocusStore.focusTopBarComposer(selection);
     }
@@ -56384,7 +57045,7 @@ css /* scss */ `
     }
     .o-disabled {
       opacity: 0.4;
-      pointer: default;
+      cursor: default;
       pointer-events: none;
     }
 
@@ -56550,7 +57211,7 @@ css /* scss */ `
 
   .o-number-input {
     /* Remove number input arrows */
-    -moz-appearance: textfield;
+    appearance: textfield;
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -56593,6 +57254,7 @@ class Spreadsheet extends Component {
         this.notificationStore = useStore(NotificationStore);
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.sidePanel = useStore(SidePanelStore);
+        useStore(ArrayFormulaHighlight);
         this.keyDownMapping = {
             "CTRL+H": () => this.sidePanel.toggle("FindAndReplace", {}),
             "CTRL+F": () => this.sidePanel.toggle("FindAndReplace", {}),
@@ -56695,7 +57357,7 @@ class Spreadsheet extends Component {
         const gridColSize = GROUP_LAYER_WIDTH * this.rowLayers.length;
         const gridRowSize = GROUP_LAYER_WIDTH * this.colLayers.length;
         return cssPropertiesToCss({
-            "grid-template-columns": `${gridColSize ? gridColSize + 2 : 0}px auto`,
+            "grid-template-columns": `${gridColSize ? gridColSize + 2 : 0}px auto`, // +2: margins
             "grid-template-rows": `${gridRowSize ? gridRowSize + 2 : 0}px auto`,
         });
     }
@@ -57427,14 +58089,6 @@ class SelectiveHistory {
         this.revertBefore(operationId);
         this.tree.drop(operationId);
     }
-    getRevertedExecution() {
-        const data = [];
-        const operations = this.tree.revertedExecution(this.HEAD_BRANCH);
-        for (const { operation } of operations) {
-            data.push(operation.data);
-        }
-        return data;
-    }
     /**
      * Revert the state as it was *before* the given operation was executed.
      */
@@ -58223,9 +58877,15 @@ function createChart(chart, chartSheetIndex, data) {
         case "bar":
             plot = addBarChart(chart.data);
             break;
+        case "combo":
+            plot = addComboChart(chart.data);
+            break;
         case "line":
             plot = addLineChart(chart.data);
             break;
+        case "scatter":
+            plot = addScatterChart(chart.data);
+            break;
         case "pie":
             plot = addDoughnutChart(chart.data, chartSheetIndex, data, { holeSize: 0 });
             break;
@@ -58385,6 +59045,79 @@ function addBarChart(chart) {
     ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
   `;
 }
+function addComboChart(chart) {
+    // gapWitdh and overlap that define the space between clusters (in %) and the overlap between datasets (from -100: completely scattered to 100, completely overlapped)
+    // see gapWidth : https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_gapWidth_topic_ID0EFVEQB.html#topic_ID0EFVEQB
+    // see overlap : https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_overlap_topic_ID0ELYQQB.html#topic_ID0ELYQQB
+    //
+    // overlap and gapWitdh seems to be by default at -20 and 20 in chart.js.
+    // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
+    const colors = new ChartColors();
+    const dataSetsNodes = [];
+    for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+        const color = toXlsxHexColor(colors.next());
+        const dataShapeProperty = shapeProperty({
+            backgroundColor: color,
+            line: { color },
+        });
+        dataSetsNodes.push(dsIndex === "0"
+            ? escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        ${dataset.label ? escapeXml /*xml*/ `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${dataShapeProperty}
+        ${chart.labelRange ? escapeXml /*xml*/ `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
+        <c:val> <!-- x-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:val>
+      </c:ser>
+      `
+            : escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        <c:smooth val="0"/>
+        <c:marker>
+          <c:symbol val="circle" />
+          <c:size val="5"/>
+        </c:marker>
+        ${dataset.label ? escapeXml `<c:tx>${stringRef(dataset.label)}</c:tx>` : ""}
+        ${dataShapeProperty}
+        ${chart.labelRange ? escapeXml `<c:cat>${stringRef(chart.labelRange)}</c:cat>` : ""} <!-- x-coordinate values -->
+        <c:val> <!-- x-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:val>
+      </c:ser>
+      `);
+    }
+    // Excel does not support this feature
+    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
+    const overlap = chart.stacked ? 100 : -20;
+    return escapeXml /*xml*/ `
+    <c:barChart>
+      <c:barDir val="col"/>
+      <c:grouping val="clustered"/>
+      <c:overlap val="${overlap}"/>
+      <c:gapWidth val="70"/>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      ${dataSetsNodes[0]}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:barChart>
+    <c:lineChart>
+      <c:grouping val="standard"/>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      ${joinXmlNodes(dataSetsNodes.slice(1))}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:lineChart>
+    ${addAx("b", "c:catAx", catAxId, valAxId, { fontColor: chart.fontColor })}
+    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+  `;
+}
 function addLineChart(chart) {
     const colors = new ChartColors();
     const dataSetsNodes = [];
@@ -58430,9 +59163,55 @@ function addLineChart(chart) {
     ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
   `;
 }
+function addScatterChart(chart) {
+    const colors = new ChartColors();
+    const dataSetsNodes = [];
+    for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+        dataSetsNodes.push(escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        <c:smooth val="0"/>
+        <c:spPr>
+          <a:ln w="19050" cap="rnd">
+            <a:noFill/>
+            <a:round/>
+          </a:ln>
+          <a:effectLst/>
+        </c:spPr>
+        <c:marker>
+          <c:symbol val="circle" />
+          <c:size val="5"/>
+          ${shapeProperty({ backgroundColor: toXlsxHexColor(colors.next()) })}
+        </c:marker>
+        ${chart.labelRange
+            ? escapeXml /*xml*/ `<c:xVal> <!-- x-coordinate values -->
+              ${numberRef(chart.labelRange)}
+            </c:xVal>`
+            : ""}
+        <c:yVal> <!-- y-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:yVal>
+      </c:ser>
+    `);
+    }
+    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
+    return escapeXml /*xml*/ `
+    <c:scatterChart>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      <c:scatterStyle val="lineMarker"/>
+      ${joinXmlNodes(dataSetsNodes)}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:scatterChart>
+    ${addAx("b", "c:valAx", catAxId, valAxId, { fontColor: chart.fontColor })}
+    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+  `;
+}
 function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSize: 50 }) {
     const colors = new ChartColors();
-    const maxLength = Math.max(...chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
+    const maxLength = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
     const doughnutColors = range(0, maxLength).map(() => toXlsxHexColor(colors.next()));
     const dataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets).reverse()) {
@@ -58570,8 +59349,7 @@ function addContent(content, sharedStrings, forceString = false) {
         attrs.push(["t", "b"]);
     }
     else if (forceString || !isNumber(value, DEFAULT_LOCALE)) {
-        const { id } = pushElement(content, sharedStrings);
-        value = id.toString();
+        value = pushElement(content, sharedStrings);
         attrs.push(["t", "s"]);
     }
     return { attrs, node: escapeXml /*xml*/ `<v>${value}</v>` };
@@ -58696,8 +59474,7 @@ function addCellIsRule(cf, rule, dxfs) {
     if (rule.style.fillColor) {
         dxf.fill = { fgColor: { rgb: rule.style.fillColor } };
     }
-    const { id } = pushElement(dxf, dxfs);
-    ruleAttributes.push(["dxfId", id]);
+    ruleAttributes.push(["dxfId", pushElement(dxf, dxfs)]);
     return escapeXml /*xml*/ `
     <conditionalFormatting sqref="${cf.ranges.join(" ")}">
       <cfRule ${formatAttributes(ruleAttributes)}>
@@ -59310,7 +60087,7 @@ function addTableColumns(table, sheetData) {
         const colHeaderXc = toXC(tableZone.left + i, tableZone.top);
         const colName = sheetData.cells[colHeaderXc]?.content || `col${i}`;
         const colAttributes = [
-            ["id", i + 1],
+            ["id", i + 1], // id cannot be 0
             ["name", colName],
         ];
         columns.push(escapeXml /*xml*/ `<tableColumn ${formatAttributes(colAttributes)}/>`);
@@ -59526,8 +60303,10 @@ function addSheetViews(sheet) {
  * https://www.ecma-international.org/publications-and-standards/standards/ecma-376/
  */
 function getXLSX(data) {
+    data = fixLengthySheetNames(data);
+    data = purgeSingleRowTables(data);
     const files = [];
-    const construct = getDefaultXLSXStructure();
+    const construct = getDefaultXLSXStructure(data);
     files.push(createWorkbook(data, construct));
     files.push(...createWorksheets(data, construct));
     files.push(createStylesSheet(construct));
@@ -59773,6 +60552,50 @@ function createRelRoot() {
   `;
     return createXMLFile(parseXML(xml), "_rels/.rels");
 }
+/**
+ * Excel sheet names are maximum 31 characters while o-spreadsheet do not have this limit.
+ * This method converts the sheet names to be within the 31 characters limit.
+ * The cells/charts referencing this sheet will be updated accordingly.
+ */
+function fixLengthySheetNames(data) {
+    const nameMapping = {};
+    const newNames = new Set();
+    for (const sheet of data.sheets) {
+        let newName = sheet.name.slice(0, 31);
+        let i = 1;
+        while (newNames.has(newName)) {
+            newName = newName.slice(0, 31 - String(i).length) + i++;
+        }
+        newNames.add(newName);
+        if (newName !== sheet.name) {
+            nameMapping[sheet.name] = newName;
+            sheet.name = newName;
+        }
+    }
+    if (!Object.keys(nameMapping).length) {
+        return data;
+    }
+    const sheetWithNewNames = Object.keys(nameMapping).sort((a, b) => b.length - a.length);
+    let stringifiedData = JSON.stringify(data);
+    for (const sheetName of sheetWithNewNames) {
+        const regex = new RegExp(`'?${escapeRegExp(sheetName)}'?!`, "g");
+        stringifiedData = stringifiedData.replaceAll(regex, (match) => {
+            const newName = nameMapping[sheetName];
+            return match.replace(sheetName, newName);
+        });
+    }
+    return JSON.parse(stringifiedData);
+}
+/** Excel files do not support tables with a single row the defined range
+ * Since those tables are not really useful (no filtering/limited styling)
+ * This function filters out all tables with a single row.
+ */
+function purgeSingleRowTables(data) {
+    for (const sheet of data.sheets) {
+        sheet.tables = sheet.tables.filter((table) => zoneToDimension(toZone(table.range)).numberOfRows > 1);
+    }
+    return data;
+}
 
 var Status;
 (function (Status) {
@@ -60026,6 +60849,7 @@ class Model extends EventBus {
             stateObserver: this.state,
             range: this.range,
             dispatch: this.dispatchFromCorePlugin,
+            canDispatch: this.canDispatch,
             uuidGenerator: this.uuidGenerator,
             custom: this.config.custom,
             external: this.config.external,
@@ -60036,6 +60860,7 @@ class Model extends EventBus {
             getters: this.getters,
             stateObserver: this.state,
             dispatch: this.dispatch,
+            canDispatch: this.canDispatch,
             selection: this.selection,
             moveClient: this.session.move.bind(this.session),
             custom: this.config.custom,
@@ -60359,7 +61184,7 @@ const links = {
 const components = {
     Checkbox,
     Section,
-    ChartColor,
+    RoundColorPicker,
     ChartDataSeries,
     ChartErrorSection,
     ChartLabelRange,
@@ -60421,6 +61246,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.3.0-alpha.1";
-__info__.date = "2024-03-25T09:43:36.072Z";
-__info__.hash = "4095c41";
+__info__.version = "17.3.0-alpha.3";
+__info__.date = "2024-04-10T12:28:23.658Z";
+__info__.hash = "80b5056";