@odoo/o-spreadsheet 16.5.0-alpha.9 → 17.0.0

package/dist/o-spreadsheet.esm.js

@@ -2,12 +2,12 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 16.5.0-alpha.9
- * @date 2023-10-03T13:16:46.370Z
- * @hash c46de91
+ * @version 17.0.0
+ * @date 2023-10-27T06:53:09.229Z
+ * @hash c0a34c2
  */
 
-import { Component, useRef, onMounted, onPatched, onWillPatch, useState, onWillUpdateProps, useComponent, useEffect, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
+import { Component, useRef, onMounted, useEffect, onWillPatch, useState, onWillUpdateProps, onPatched, useComponent, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
 
 // define a mock translation function, when o-spreadsheet runs in standalone it doesn't translate any string
 let _translate = (s) => s;
@@ -130,6 +130,7 @@ const HEADER_GROUPING_BORDER_COLOR = "#999";
 const GRID_BORDER_COLOR = "#E2E3E3";
 const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
 const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
+const COMPOSER_ASSISTANT_COLOR = "#9B359B";
 // Color picker defaults as upper case HEX to match `toHex`helper
 const COLOR_PICKER_DEFAULTS = [
     "#000000",
@@ -1241,7 +1242,17 @@ function valueToDateNumber(value, locale) {
 function isDateTime(str, locale) {
     return parseDateTime(str, locale) !== null;
 }
+const CACHE = new Map();
 function parseDateTime(str, locale) {
+    if (!CACHE.has(locale)) {
+        CACHE.set(locale, new Map());
+    }
+    if (!CACHE.get(locale).has(str)) {
+        CACHE.get(locale).set(str, _parseDateTime(str, locale));
+    }
+    return CACHE.get(locale).get(str);
+}
+function _parseDateTime(str, locale) {
     str = str.trim();
     let time = null;
     const timeMatch = str.match(timeRegexp);
@@ -2047,6 +2058,7 @@ var CommandResult;
     CommandResult["InvalidDataValidationCriterionValue"] = "InvalidDataValidationCriterionValue";
     CommandResult["InvalidNumberOfCriterionValues"] = "InvalidNumberOfCriterionValues";
     CommandResult["BlockingValidationRule"] = "BlockingValidationRule";
+    CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
 })(CommandResult || (CommandResult = {}));
 
 const DEFAULT_LOCALES = [
@@ -2099,7 +2111,7 @@ var LAYERS;
 const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
 function assert(condition, message) {
     if (!condition()) {
-        throw new Error(message);
+        throw new EvaluationError(CellErrorType.GenericError, message);
     }
 }
 // -----------------------------------------------------------------------------
@@ -2505,7 +2517,7 @@ function evaluatePredicate(value, criterion) {
 function visitMatchingRanges(args, cb, locale, isQuery = false) {
     const countArg = args.length;
     if (countArg % 2 === 1) {
-        throw new Error(_t(`Function [[FUNCTION_NAME]] expects criteria_range and criterion to be in pairs.`));
+        throw new Error(_t("Function [[FUNCTION_NAME]] expects criteria_range and criterion to be in pairs."));
     }
     const dimRow = args[0].length;
     const dimCol = args[0][0].length;
@@ -2515,7 +2527,7 @@ function visitMatchingRanges(args, cb, locale, isQuery = false) {
         if (!isMatrix(criteriaRange) ||
             criteriaRange.length !== dimRow ||
             criteriaRange[0].length !== dimCol) {
-            throw new Error(_t(`Function [[FUNCTION_NAME]] expects criteria_range to have the same dimension`));
+            throw new Error(_t("Function [[FUNCTION_NAME]] expects criteria_range to have the same dimension"));
         }
         const description = toString(args[i + 1]);
         predicates.push(getPredicate(description, isQuery, locale));
@@ -4061,8 +4073,9 @@ class RangeImpl {
     }
     get zone() {
         const { left, top, bottom, right } = this._zone;
-        if (right !== undefined && bottom !== undefined)
-            return { left, top, right, bottom };
+        if (right !== undefined && bottom !== undefined) {
+            return this._zone;
+        }
         else if (bottom === undefined && right !== undefined) {
             return { right, top, left, bottom: this.getSheetSize(this.sheetId).numberOfRows - 1 };
         }
@@ -4487,6 +4500,69 @@ function computeIconWidth(style) {
 function toLowerCase(str) {
     return str ? str.toLowerCase() : "";
 }
+/**
+ * Extract the fontSize from a context font string
+ * @param font The (context) font string to parse
+ * @returns The fontSize in pixels
+ */
+const pxRegex = /([0-9\.]*)px/;
+function getContextFontSize(font) {
+    return Number(font.match(pxRegex)?.[1]);
+}
+function 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);
+    if (!underline && !strikethrough) {
+        return;
+    }
+    const measure = context.measureText(text);
+    const textWidth = measure.width;
+    const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+    const boxHeight = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+    let { x, y } = position;
+    let strikeY = y, underlineY = y;
+    switch (context.textAlign) {
+        case "center":
+            x -= textWidth / 2;
+            break;
+        case "right":
+            x -= textWidth;
+            break;
+    }
+    switch (context.textBaseline) {
+        case "top":
+            underlineY += boxHeight - 2 * strokeWidth;
+            strikeY += boxHeight - textHeight;
+            break;
+        case "middle":
+            underlineY += boxHeight / 2 - strokeWidth;
+            break;
+        case "alphabetic":
+            underlineY += 2 * strokeWidth;
+            strikeY -= textHeight / 2 - strokeWidth / 2;
+            break;
+        case "bottom":
+            underlineY = y;
+            strikeY -= textHeight / 2 - strokeWidth / 2;
+            break;
+    }
+    if (underline) {
+        context.lineWidth = strokeWidth;
+        context.strokeStyle = context.fillStyle;
+        context.beginPath();
+        context.moveTo(x, underlineY);
+        context.lineTo(x + textWidth, underlineY);
+        context.stroke();
+    }
+    if (strikethrough) {
+        context.lineWidth = strokeWidth;
+        context.strokeStyle = context.fillStyle;
+        context.beginPath();
+        context.moveTo(x, strikeY);
+        context.lineTo(x + textWidth, strikeY);
+        context.stroke();
+    }
+}
 
 /*
  * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
@@ -4550,6 +4626,29 @@ function createAction(item) {
     };
 }
 
+function transformZone(zone, executed) {
+    if (executed.type === "REMOVE_COLUMNS_ROWS") {
+        return reduceZoneOnDeletion(zone, executed.dimension === "COL" ? "left" : "top", executed.elements);
+    }
+    if (executed.type === "ADD_COLUMNS_ROWS") {
+        return expandZoneOnInsertion(zone, executed.dimension === "COL" ? "left" : "top", executed.base, executed.position, executed.quantity);
+    }
+    return { ...zone };
+}
+function transformRangeData(range, executed) {
+    const deletedSheet = executed.type === "DELETE_SHEET" && executed.sheetId;
+    if ("sheetId" in executed && range._sheetId !== executed.sheetId) {
+        return range;
+    }
+    else {
+        const newZone = transformZone(range._zone, executed);
+        if (newZone && deletedSheet !== range._sheetId) {
+            return { ...range, _zone: newZone };
+        }
+    }
+    return undefined;
+}
+
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     canvas = useRef("graphContainer");
@@ -4572,15 +4671,7 @@ class ChartJsComponent extends Component {
             const runtime = this.chartRuntime;
             this.createChart(runtime.chartJsConfig);
         });
-        let previousRuntime = this.chartRuntime;
-        onPatched(() => {
-            const chartRuntime = this.chartRuntime;
-            if (deepEquals(previousRuntime, chartRuntime)) {
-                return;
-            }
-            this.updateChartJs(chartRuntime);
-            previousRuntime = chartRuntime;
-        });
+        useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
     }
     createChart(chartData) {
         const canvas = this.canvas.el;
@@ -4617,145 +4708,606 @@ ChartJsComponent.props = {
 };
 
 /**
- * This file is largely inspired by owl 1.
- * `css` tag has been removed from owl 2 without workaround to manage css.
- * So, the solution was to import the behavior of owl 1 directly in our
- * codebase, with one difference: the css is added to the sheet as soon as the
- * css tag is executed. In owl 1, the css was added as soon as a Component was
- * created for the first time.
+ * AbstractChart is the class from which every Chart should inherit.
+ * The role of this class is to maintain the state of each chart.
  */
-const STYLESHEETS = {};
-let nextId = 0;
+class AbstractChart {
+    sheetId;
+    title;
+    getters;
+    constructor(definition, sheetId, getters) {
+        this.title = definition.title;
+        this.sheetId = sheetId;
+        this.getters = getters;
+    }
+    /**
+     * Validate the chart definition given as arguments. This function will be
+     * called from allowDispatch function
+     */
+    static validateChartDefinition(validator, definition) {
+        throw new Error("This method should be implemented by sub class");
+    }
+    /**
+     * Get a new chart definition transformed with the executed command. This
+     * functions will be called during operational transform process
+     */
+    static transformDefinition(definition, executed) {
+        throw new Error("This method should be implemented by sub class");
+    }
+    /**
+     * Get an empty definition based on the given context
+     */
+    static getDefinitionFromContextCreation(context) {
+        throw new Error("This method should be implemented by sub class");
+    }
+}
+
 /**
- * CSS tag helper for defining inline stylesheets.  With this, one can simply define
- * an inline stylesheet with just the following code:
- * ```js
- *     css`.component-a { color: red; }`;
- * ```
+ * This file contains helpers that are common to different charts (mainly
+ * line, bar and pie charts)
  */
-function css(strings, ...args) {
-    const name = `__sheet__${nextId++}`;
-    const value = String.raw(strings, ...args);
-    registerSheet(name, value);
-    activateSheet(name);
-    return name;
-}
-function processSheet(str) {
-    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-    const selectorStack = [];
-    const parts = [];
-    let rules = [];
-    function generateSelector(stackIndex, parentSelector) {
-        const parts = [];
-        for (const selector of selectorStack[stackIndex]) {
-            let part = (parentSelector && parentSelector + " " + selector) || selector;
-            if (part.includes("&")) {
-                part = selector.replace(/&/g, parentSelector || "");
-            }
-            if (stackIndex < selectorStack.length - 1) {
-                part = generateSelector(stackIndex + 1, part);
+/**
+ * Adapt ranges of a chart which support DataSet (dataSets and LabelRange).
+ */
+function updateChartRangesWithDataSets(getters, applyChange, chartDataSets, chartLabelRange) {
+    let isStale = false;
+    const dataSetsWithUndefined = [];
+    for (let index in chartDataSets) {
+        let ds = chartDataSets[index];
+        if (ds.labelCell) {
+            const labelCell = adaptChartRange(ds.labelCell, applyChange);
+            if (ds.labelCell !== labelCell) {
+                isStale = true;
+                ds = {
+                    ...ds,
+                    labelCell: labelCell,
+                };
             }
-            parts.push(part);
         }
-        return parts.join(", ");
-    }
-    function generateRules() {
-        if (rules.length) {
-            parts.push(generateSelector(0) + " {");
-            parts.push(...rules);
-            parts.push("}");
-            rules = [];
+        const dataRange = adaptChartRange(ds.dataRange, applyChange);
+        if (dataRange === undefined ||
+            getters.getRangeString(dataRange, dataRange.sheetId) === INCORRECT_RANGE_STRING) {
+            isStale = true;
+            ds = undefined;
+        }
+        else if (dataRange !== ds.dataRange) {
+            isStale = true;
+            ds = {
+                ...ds,
+                dataRange,
+            };
         }
+        dataSetsWithUndefined[index] = ds;
     }
-    while (tokens.length) {
-        let token = tokens.shift();
-        if (token === "}") {
-            generateRules();
-            selectorStack.pop();
+    let labelRange = chartLabelRange;
+    const range = adaptChartRange(labelRange, applyChange);
+    if (range !== labelRange) {
+        isStale = true;
+        labelRange = range;
+    }
+    const dataSets = dataSetsWithUndefined.filter(isDefined$1);
+    return {
+        isStale,
+        dataSets,
+        labelRange,
+    };
+}
+/**
+ * Copy the dataSets given. All the ranges which are on sheetIdFrom will target
+ * sheetIdTo.
+ */
+function copyDataSetsWithNewSheetId(sheetIdFrom, sheetIdTo, dataSets) {
+    return dataSets.map((ds) => {
+        return {
+            dataRange: copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.dataRange),
+            labelCell: ds.labelCell
+                ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.labelCell)
+                : undefined,
+        };
+    });
+}
+/**
+ * Copy a range. If the range is on the sheetIdFrom, the range will target
+ * sheetIdTo.
+ */
+function copyLabelRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
+    return range ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) : undefined;
+}
+/**
+ * Adapt a single range of a chart
+ */
+function adaptChartRange(range, applyChange) {
+    if (!range) {
+        return undefined;
+    }
+    const change = applyChange(range);
+    switch (change.changeType) {
+        case "NONE":
+            return range;
+        case "REMOVE":
+            return undefined;
+        default:
+            return change.range;
+    }
+}
+/**
+ * Create the dataSet objects from xcs
+ */
+function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
+    const dataSets = [];
+    for (const sheetXC of dataSetsString) {
+        const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
+        const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
+        if (invalidSheetName || invalidXc) {
+            continue;
         }
-        else {
-            if (tokens[0] === "{") {
-                generateRules();
-                selectorStack.push(token.split(/\s*,\s*/));
-                tokens.shift();
+        // It's a rectangle. We treat all columns (arbitrary) as different data series.
+        if (zone.left !== zone.right && zone.top !== zone.bottom) {
+            if (zone.right === undefined) {
+                // Should never happens because of the allowDispatch of charts, but just making sure
+                continue;
             }
-            if (tokens[0] === ";") {
-                rules.push("  " + token + ";");
+            for (let column = zone.left; column <= zone.right; column++) {
+                const columnZone = {
+                    ...zone,
+                    left: column,
+                    right: column,
+                };
+                dataSets.push(createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
+                    ? {
+                        top: columnZone.top,
+                        bottom: columnZone.top,
+                        left: columnZone.left,
+                        right: columnZone.left,
+                    }
+                    : undefined));
+            }
+        }
+        else if (zone.left === zone.right && zone.top === zone.bottom) {
+            // A single cell. If it's only the title, the dataset is not added.
+            if (!dataSetsHaveTitle) {
+                dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
             }
         }
+        else {
+            /* 1 row or 1 column */
+            dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
+                ? {
+                    top: zone.top,
+                    bottom: zone.top,
+                    left: zone.left,
+                    right: zone.left,
+                }
+                : undefined));
+        }
     }
-    return parts.join("\n");
+    return dataSets;
 }
-function registerSheet(id, css) {
-    const sheet = document.createElement("style");
-    sheet.textContent = processSheet(css);
-    STYLESHEETS[id] = sheet;
+function createDataSet(getters, sheetId, fullZone, titleZone) {
+    if (fullZone.left !== fullZone.right && fullZone.top !== fullZone.bottom) {
+        throw new Error(`Zone should be a single column or row: ${zoneToXc(fullZone)}`);
+    }
+    if (titleZone) {
+        const dataXC = zoneToXc(fullZone);
+        const labelCellXC = zoneToXc(titleZone);
+        return {
+            labelCell: getters.getRangeFromSheetXC(sheetId, labelCellXC),
+            dataRange: getters.getRangeFromSheetXC(sheetId, dataXC),
+        };
+    }
+    else {
+        return {
+            labelCell: undefined,
+            dataRange: getters.getRangeFromSheetXC(sheetId, zoneToXc(fullZone)),
+        };
+    }
 }
-function activateSheet(id) {
-    const sheet = STYLESHEETS[id];
-    sheet.setAttribute("component", id);
-    document.head.appendChild(sheet);
+/**
+ * Transform a dataSet to a ExcelDataSet
+ */
+function toExcelDataset(getters, ds) {
+    const labelZone = ds.labelCell?.zone;
+    let dataZone = ds.dataRange.zone;
+    if (labelZone) {
+        const { numberOfRows, numberOfCols } = zoneToDimension(dataZone);
+        if (numberOfRows === 1) {
+            dataZone = { ...dataZone, left: dataZone.left + 1 };
+        }
+        else if (numberOfCols === 1) {
+            dataZone = { ...dataZone, top: dataZone.top + 1 };
+        }
+    }
+    const dataRange = ds.dataRange.clone({ zone: dataZone });
+    return {
+        label: ds.labelCell ? getters.getRangeString(ds.labelCell, "forceSheetReference") : undefined,
+        range: getters.getRangeString(dataRange, "forceSheetReference"),
+    };
 }
-function getTextDecoration({ strikethrough, underline, }) {
-    if (!strikethrough && !underline) {
-        return "none";
+function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
+    if (!labelRange)
+        return undefined;
+    let zone = {
+        ...labelRange.zone,
+    };
+    if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
+        zone.top = zone.top + 1;
     }
-    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+    const range = labelRange.clone({ zone });
+    return getters.getRangeString(range, "forceSheetReference");
 }
 /**
- * Convert the cell style to CSS properties.
+ * Transform a chart definition which supports dataSets (dataSets and LabelRange)
+ * with an executed command
  */
-function cellStyleToCss(style) {
-    const attributes = cellTextStyleToCss(style);
-    if (!style)
-        return attributes;
-    if (style.fillColor) {
-        attributes["background"] = style.fillColor;
+function transformChartDefinitionWithDataSetsWithZone(definition, executed) {
+    let labelRange;
+    if (definition.labelRange) {
+        const labelZone = transformZone(toUnboundedZone(definition.labelRange), executed);
+        labelRange = labelZone ? zoneToXc(labelZone) : undefined;
+    }
+    const dataSets = definition.dataSets
+        .map(toUnboundedZone)
+        .map((zone) => transformZone(zone, executed))
+        .filter(isDefined$1)
+        .map(zoneToXc);
+    return {
+        ...definition,
+        labelRange,
+        dataSets,
+    };
+}
+const GraphColors = [
+    // the same colors as those used in odoo reporting
+    "rgb(31,119,180)",
+    "rgb(255,127,14)",
+    "rgb(174,199,232)",
+    "rgb(255,187,120)",
+    "rgb(44,160,44)",
+    "rgb(152,223,138)",
+    "rgb(214,39,40)",
+    "rgb(255,152,150)",
+    "rgb(148,103,189)",
+    "rgb(197,176,213)",
+    "rgb(140,86,75)",
+    "rgb(196,156,148)",
+    "rgb(227,119,194)",
+    "rgb(247,182,210)",
+    "rgb(127,127,127)",
+    "rgb(199,199,199)",
+    "rgb(188,189,34)",
+    "rgb(219,219,141)",
+    "rgb(23,190,207)",
+    "rgb(158,218,229)",
+];
+class ChartColors {
+    graphColorIndex = 0;
+    next() {
+        return GraphColors[this.graphColorIndex++ % GraphColors.length];
     }
-    return attributes;
 }
 /**
- * Convert the cell text style to CSS properties.
+ * Choose a font color based on a background color.
+ * The font is white with a dark background.
  */
-function cellTextStyleToCss(style) {
-    const attributes = {};
-    if (!style)
-        return attributes;
-    if (style.bold) {
-        attributes["font-weight"] = "bold";
+function chartFontColor(backgroundColor) {
+    if (!backgroundColor) {
+        return "#000000";
     }
-    if (style.italic) {
-        attributes["font-style"] = "italic";
+    return relativeLuminance(backgroundColor) < 0.3 ? "#FFFFFF" : "#000000";
+}
+function checkDataset(definition) {
+    if (definition.dataSets) {
+        const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range)) !== undefined;
+        if (invalidRanges) {
+            return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
+        }
+        const zones = definition.dataSets.map(toUnboundedZone);
+        if (zones.some((zone) => zone.top !== zone.bottom && isFullRow(zone))) {
+            return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
+        }
     }
-    if (style.strikethrough || style.underline) {
-        let decoration = style.strikethrough ? "line-through" : "";
-        decoration = style.underline ? decoration + " underline" : decoration;
-        attributes["text-decoration"] = decoration;
+    return "Success" /* CommandResult.Success */;
+}
+function checkLabelRange(definition) {
+    if (definition.labelRange) {
+        const invalidLabels = !rangeReference.test(definition.labelRange || "");
+        if (invalidLabels) {
+            return "InvalidLabelRange" /* CommandResult.InvalidLabelRange */;
+        }
     }
-    if (style.textColor) {
-        attributes["color"] = style.textColor;
+    return "Success" /* CommandResult.Success */;
+}
+function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
+    if (!dataSetsHaveTitle)
+        return false;
+    if (!labelRange)
+        return false;
+    if (!dataset)
+        return true;
+    const datasetLength = getZoneArea(dataset.dataRange.zone);
+    const labelLength = getZoneArea(labelRange.zone);
+    if (labelLength < datasetLength) {
+        return false;
     }
-    return attributes;
+    return true;
 }
-/**
- * Transform CSS properties into a CSS string.
- */
-function cssPropertiesToCss(attributes) {
-    const str = Object.entries(attributes)
-        .filter(([attName, attValue]) => attValue !== undefined)
-        .map(([attName, attValue]) => `${attName}:${attValue};`)
-        .join(" ");
-    return str;
+// ---------------------------------------------------------------------------
+// Scorecard
+// ---------------------------------------------------------------------------
+function getBaselineText(baseline, keyValue, baselineMode, locale) {
+    if (!baseline) {
+        return "";
+    }
+    else if (baselineMode === "text" ||
+        keyValue?.type !== CellValueType.number ||
+        baseline.type !== CellValueType.number) {
+        return baseline.formattedValue;
+    }
+    else {
+        let diff = keyValue.value - baseline.value;
+        if (baselineMode === "percentage" && diff !== 0) {
+            diff = (diff / baseline.value) * 100;
+        }
+        if (baselineMode !== "percentage" && baseline.format) {
+            return formatValue(diff, { format: baseline.format, locale });
+        }
+        const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
+        return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
+    }
 }
-function getElementMargins(el) {
-    const style = window.getComputedStyle(el);
-    const margins = {
-        top: parseInt(style.marginTop, 10) || 0,
-        bottom: parseInt(style.marginBottom, 10) || 0,
-        left: parseInt(style.marginLeft, 10) || 0,
-        right: parseInt(style.marginRight, 10) || 0,
+function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
+    if (baselineMode === "text" ||
+        baseline?.type !== CellValueType.number ||
+        keyValue?.type !== CellValueType.number) {
+        return undefined;
+    }
+    const diff = keyValue.value - baseline.value;
+    if (diff > 0) {
+        return colorUp;
+    }
+    else if (diff < 0) {
+        return colorDown;
+    }
+    return undefined;
+}
+function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
+    if (baselineMode === "text" ||
+        baseline?.type !== CellValueType.number ||
+        keyValue?.type !== CellValueType.number) {
+        return "neutral";
+    }
+    const diff = keyValue.value - baseline.value;
+    if (diff > 0) {
+        return "up";
+    }
+    else if (diff < 0) {
+        return "down";
+    }
+    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 */
+        : "Success" /* CommandResult.Success */;
+}
+function checkBaseline(definition) {
+    return definition.baseline && !rangeReference.test(definition.baseline)
+        ? "InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */
+        : "Success" /* CommandResult.Success */;
+}
+const arrowDownPath = new window.Path2D("M8.6 4.8a.5.5 0 0 1 0 .75l-3.9 3.9a.5 .5 0 0 1 -.75 0l-3.8 -3.9a.5 .5 0 0 1 0 -.75l.4-.4a.5.5 0 0 1 .75 0l2.3 2.4v-5.7c0-.25.25-.5.5-.5h.6c.25 0 .5.25.5.5v5.8l2.3 -2.4a.5.5 0 0 1 .75 0z");
+const arrowUpPath = new window.Path2D("M8.7 5.5a.5.5 0 0 0 0-.75l-3.8-4a.5.5 0 0 0-.75 0l-3.8 4a.5.5 0 0 0 0 .75l.4.4a.5.5 0 0 0 .75 0l2.3-2.4v5.8c0 .25.25.5.5.5h.6c.25 0 .5-.25.5-.5v-5.8l2.2 2.4a.5.5 0 0 0 .75 0z");
+let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
+    keyValue;
+    baseline;
+    baselineMode;
+    baselineDescr;
+    background;
+    baselineColorUp;
+    baselineColorDown;
+    fontColor;
+    type = "scorecard";
+    constructor(definition, sheetId, getters) {
+        super(definition, sheetId, getters);
+        this.keyValue = createRange(getters, sheetId, definition.keyValue);
+        this.baseline = createRange(getters, sheetId, definition.baseline);
+        this.baselineMode = definition.baselineMode;
+        this.baselineDescr = definition.baselineDescr;
+        this.background = definition.background;
+        this.baselineColorUp = definition.baselineColorUp;
+        this.baselineColorDown = definition.baselineColorDown;
+    }
+    static validateChartDefinition(validator, definition) {
+        return validator.checkValidations(definition, checkKeyValue, checkBaseline);
+    }
+    static getDefinitionFromContextCreation(context) {
+        return {
+            background: context.background,
+            type: "scorecard",
+            keyValue: context.range ? context.range[0] : undefined,
+            title: context.title || "",
+            baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
+            baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
+            baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
+            baseline: context.auxiliaryRange || "",
+        };
+    }
+    static transformDefinition(definition, executed) {
+        let baselineZone;
+        let keyValueZone;
+        if (definition.baseline) {
+            baselineZone = transformZone(toUnboundedZone(definition.baseline), executed);
+        }
+        if (definition.keyValue) {
+            keyValueZone = transformZone(toUnboundedZone(definition.keyValue), executed);
+        }
+        return {
+            ...definition,
+            baseline: baselineZone ? zoneToXc(baselineZone) : undefined,
+            keyValue: keyValueZone ? zoneToXc(keyValueZone) : undefined,
+        };
+    }
+    copyForSheetId(sheetId) {
+        const baseline = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.baseline);
+        const keyValue = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.keyValue);
+        const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, sheetId);
+        return new ScorecardChart(definition, sheetId, this.getters);
+    }
+    copyInSheetId(sheetId) {
+        const definition = this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue, sheetId);
+        return new ScorecardChart(definition, sheetId, this.getters);
+    }
+    getDefinition() {
+        return this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue);
+    }
+    getContextCreation() {
+        return {
+            background: this.background,
+            title: this.title,
+            range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
+            auxiliaryRange: this.baseline
+                ? this.getters.getRangeString(this.baseline, this.sheetId)
+                : undefined,
+        };
+    }
+    getDefinitionWithSpecificRanges(baseline, keyValue, targetSheetId) {
+        return {
+            baselineColorDown: this.baselineColorDown,
+            baselineColorUp: this.baselineColorUp,
+            baselineMode: this.baselineMode,
+            title: this.title,
+            type: "scorecard",
+            background: this.background,
+            baseline: baseline
+                ? this.getters.getRangeString(baseline, targetSheetId || this.sheetId)
+                : undefined,
+            baselineDescr: this.baselineDescr,
+            keyValue: keyValue
+                ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
+                : undefined,
+        };
+    }
+    getDefinitionForExcel() {
+        // This kind of graph is not exportable in Excel
+        return undefined;
+    }
+    updateRanges(applyChange) {
+        const baseline = adaptChartRange(this.baseline, applyChange);
+        const keyValue = adaptChartRange(this.keyValue, applyChange);
+        if (this.baseline === baseline && this.keyValue === keyValue) {
+            return this;
+        }
+        const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue);
+        return new ScorecardChart(definition, this.sheetId, this.getters);
+    }
+};
+function drawScoreChart(structure, canvas) {
+    const ctx = canvas.getContext("2d");
+    canvas.width = structure.canvas.width;
+    canvas.height = structure.canvas.height;
+    ctx.fillStyle = structure.canvas.backgroundColor;
+    ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
+    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);
+    }
+    if (structure.baseline) {
+        ctx.font = structure.baseline.style.font;
+        ctx.fillStyle = structure.baseline.style.color;
+        drawDecoratedText(ctx, structure.baseline.text, structure.baseline.position, structure.baseline.style.underline, structure.baseline.style.strikethrough);
+    }
+    if (structure.baselineArrow && structure.baselineArrow.style.size > 0) {
+        ctx.save();
+        ctx.fillStyle = structure.baselineArrow.style.color;
+        ctx.translate(structure.baselineArrow.position.x, structure.baselineArrow.position.y);
+        // This ratio is computed according to the original svg size and the final size we want
+        const ratio = structure.baselineArrow.style.size / 10;
+        ctx.scale(ratio, ratio);
+        switch (structure.baselineArrow.direction) {
+            case "down": {
+                ctx.fill(arrowDownPath);
+                break;
+            }
+            case "up": {
+                ctx.fill(arrowUpPath);
+                break;
+            }
+        }
+        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);
+    }
+    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);
+    }
+}
+function createScorecardChartRuntime(chart, getters) {
+    let keyValue = "";
+    let formattedKeyValue = "";
+    let keyValueCell;
+    if (chart.keyValue) {
+        const keyValuePosition = {
+            sheetId: chart.keyValue.sheetId,
+            col: chart.keyValue.zone.left,
+            row: chart.keyValue.zone.top,
+        };
+        keyValueCell = getters.getEvaluatedCell(keyValuePosition);
+        keyValue = String(keyValueCell.value);
+        formattedKeyValue = keyValueCell.formattedValue;
+    }
+    let baselineCell;
+    const baseline = chart.baseline;
+    if (baseline) {
+        const baselinePosition = {
+            sheetId: chart.baseline.sheetId,
+            col: chart.baseline.zone.left,
+            row: chart.baseline.zone.top,
+        };
+        baselineCell = getters.getEvaluatedCell(baselinePosition);
+    }
+    const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
+    const locale = getters.getLocale();
+    return {
+        title: _t(chart.title),
+        keyValue: formattedKeyValue || keyValue,
+        baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
+        baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
+        baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
+        baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
+        fontColor: chartFontColor(background),
+        background,
+        baselineStyle: chart.baselineMode !== "percentage" && baseline
+            ? getters.getCellStyle({
+                sheetId: baseline.sheetId,
+                col: baseline.zone.left,
+                row: baseline.zone.top,
+            })
+            : undefined,
+        keyValueStyle: chart.keyValue
+            ? getters.getCellStyle({
+                sheetId: chart.keyValue.sheetId,
+                col: chart.keyValue.zone.left,
+                row: chart.keyValue.zone.top,
+            })
+            : undefined,
     };
-    return margins;
 }
 
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
@@ -4771,64 +5323,96 @@ const CHART_PADDING_RATIO = 0.02;
  * Having a line heigh =1em (=font size) don't work, the font will overflow.
  */
 const LINE_HEIGHT = 1.2;
-css /* scss */ `
-  div.o-scorecard {
-    font-family: ${DEFAULT_FONT};
-    user-select: none;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-
-    .o-scorecard-content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      justify-content: center;
-      text-align: center;
-    }
-
-    .o-title-text {
-      text-align: left;
-      height: ${LINE_HEIGHT + "em"};
-      line-height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .o-key-text {
-      line-height: ${LINE_HEIGHT + "em"};
-      height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .o-cf-icon {
-      display: inline-block;
-      width: 0.65em;
-      height: 1em;
-      line-height: 1em;
-      padding-bottom: 0.07em;
-      padding-right: 3px;
-    }
-
-    .o-baseline-text {
-      line-height: ${LINE_HEIGHT + "em"};
-      height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-
-      .o-baseline-text-description {
-        white-space: pre;
-      }
-    }
-  }
-`;
-let ScorecardChart$1 = class ScorecardChart extends Component {
-    static template = "o-spreadsheet-ScorecardChart";
-    ctx = document.createElement("canvas").getContext("2d");
-    get runtime() {
-        return this.env.model.getters.getChartRuntime(this.props.figure.id);
+function formatBaselineDescr(baselineDescr, baseline) {
+    const _baselineDescr = baselineDescr || "";
+    return baseline && _baselineDescr ? " " + _baselineDescr : _baselineDescr;
+}
+function getDefaultContextFont(fontSize, bold = false, italic = false) {
+    const italicStr = italic ? "italic" : "";
+    const weight = bold ? "bold" : "";
+    return `${italicStr} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
+}
+function getScorecardConfiguration({ width, height }, runtime) {
+    const designer = new ScorecardChartConfigBuilder({ width, height }, runtime);
+    return designer.computeDesign();
+}
+class ScorecardChartConfigBuilder {
+    runtime;
+    context;
+    width;
+    height;
+    constructor({ width, height }, runtime) {
+        this.runtime = runtime;
+        const canvas = document.createElement("canvas");
+        this.width = canvas.width = width;
+        this.height = canvas.height = height;
+        this.context = canvas.getContext("2d");
+    }
+    computeDesign() {
+        const structure = {
+            canvas: {
+                width: this.width,
+                height: this.height,
+                backgroundColor: this.backgroundColor,
+            },
+        };
+        const style = this.getTextStyles();
+        const { height: titleHeight } = this.getTextDimensions(this.title, style.title.font);
+        if (this.title) {
+            structure.title = {
+                text: this.title,
+                style: style.title,
+                position: {
+                    x: this.chartPadding,
+                    y: this.chartPadding + 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);
+        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,
+            },
+        };
+        if (style.baselineArrow) {
+            structure.baselineArrow = {
+                direction: this.baselineArrow,
+                style: style.baselineArrow,
+                position: {
+                    x: structure.baseline.position.x - baselineArrowSize,
+                    y: structure.baseline.position.y - (baselineHeight + baselineArrowSize) / 2,
+                },
+            };
+        }
+        if (this.baselineDescr) {
+            structure.baselineDescr = {
+                text: this.baselineDescr,
+                style: style.baselineDescr,
+                position: {
+                    x: structure.baseline.position.x + baselineWidth,
+                    y: structure.baseline.position.y,
+                },
+            };
+        }
+        const { height: keyHeight, width: keyWidth } = this.getTextDimensions(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,
+                },
+            };
+        }
+        return structure;
     }
     get title() {
         return this.runtime.title;
@@ -4840,87 +5424,73 @@ let ScorecardChart$1 = class ScorecardChart extends Component {
         return this.runtime.baselineDisplay;
     }
     get baselineDescr() {
-        const baselineDescr = this.runtime.baselineDescr || "";
-        return this.baseline && baselineDescr ? " " + baselineDescr : baselineDescr;
+        return formatBaselineDescr(this.runtime.baselineDescr, this.baseline);
     }
-    get baselineArrowDirection() {
+    get baselineArrow() {
         return this.runtime.baselineArrow;
     }
     get backgroundColor() {
         return this.runtime.background;
     }
-    get primaryFontColor() {
-        return this.runtime.fontColor;
-    }
     get secondaryFontColor() {
         return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
     }
-    get figure() {
-        return this.props.figure;
-    }
-    get chartStyle() {
-        return cssPropertiesToCss({
-            padding: `${this.chartPadding}px`,
-            background: this.backgroundColor,
-        });
-    }
-    get chartContentStyle() {
-        return cssPropertiesToCss({ height: `${this.getDrawableHeight()}px` });
-    }
     get chartPadding() {
-        return this.props.figure.width * CHART_PADDING_RATIO;
+        return this.width * CHART_PADDING_RATIO;
     }
-    translate(term) {
-        return _t(term);
+    getTextDimensions(text, font) {
+        this.context.font = font;
+        const measure = this.context.measureText(text);
+        return {
+            width: measure.width,
+            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+        };
     }
     getTextStyles() {
         // If the widest text overflows horizontally, scale it down, and apply the same scaling factors to all the other fonts.
-        const maxLineWidth = this.props.figure.width * (1 - 2 * CHART_PADDING_RATIO);
+        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.ctx, this));
+        const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.context, this));
         let scalingFactor = fontSizeMatchingWidth / baseFontSize;
         // 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;
         return {
-            titleStyle: this.getTextStyle({
-                fontSize: TITLE_FONT_SIZE,
+            title: {
+                font: getDefaultContextFont(TITLE_FONT_SIZE),
                 color: this.secondaryFontColor,
-            }),
-            keyStyle: this.getTextStyle({
-                fontSize: keyFontSize,
-                cellStyle: this.runtime.keyValueStyle,
-                color: this.primaryFontColor,
-            }),
-            baselineStyle: this.getTextStyle({
-                fontSize: baselineFontSize,
-            }),
-            baselineValueStyle: this.getTextStyle({
-                fontSize: baselineFontSize,
-                cellStyle: this.runtime.baselineStyle,
-                color: this.runtime.baselineColor || this.secondaryFontColor,
-            }),
-            baselineDescrStyle: this.getTextStyle({
-                fontSize: baselineFontSize * BASELINE_DESCR_FONT_RATIO,
+            },
+            keyValue: {
+                color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
+                font: getDefaultContextFont(keyFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
+                strikethrough: this.runtime.keyValueStyle?.strikethrough,
+                underline: this.runtime.keyValueStyle?.underline,
+            },
+            baselineValue: {
+                font: getDefaultContextFont(baselineFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+                strikethrough: this.runtime.baselineStyle?.strikethrough,
+                underline: this.runtime.baselineStyle?.underline,
+                color: this.runtime.baselineStyle?.textColor ||
+                    this.runtime.baselineColor ||
+                    this.secondaryFontColor,
+            },
+            baselineDescr: {
+                font: getDefaultContextFont(baselineFontSize * BASELINE_DESCR_FONT_RATIO),
                 color: this.secondaryFontColor,
-            }),
+            },
+            baselineArrow: this.baselineArrow === "neutral"
+                ? undefined
+                : {
+                    size: this.keyValue ? 0.8 * baselineFontSize : 0,
+                    color: this.runtime.baselineColor || this.secondaryFontColor,
+                },
         };
     }
-    /** Return an CSS style string corresponding to the given arguments */
-    getTextStyle(args) {
-        const cssAttributes = cellTextStyleToCss(args.cellStyle);
-        cssAttributes["font-size"] = `${args.fontSize}px`;
-        cssAttributes["display"] = "inline-block";
-        if (!cssAttributes["color"] && args.color) {
-            cssAttributes["color"] = args.color;
-        }
-        return cssPropertiesToCss(cssAttributes);
-    }
     /** Get the height of the chart minus all the vertical paddings */
     getDrawableHeight() {
         const verticalPadding = 2 * this.chartPadding;
-        let availableHeight = this.props.figure.height - verticalPadding;
+        let availableHeight = this.height - verticalPadding;
         availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
@@ -4928,39 +5498,39 @@ let ScorecardChart$1 = class ScorecardChart extends Component {
     getWidestElement() {
         const baseline = new BaselineElement(this.runtime.baselineStyle);
         const keyValue = new KeyValueElement(this.runtime.keyValueStyle);
-        return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.ctx, this) >
-            keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.ctx, this)
+        return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.context, this) >
+            keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.context, this)
             ? baseline
             : keyValue;
     }
-};
+}
 class ScorecardScalableElement {
     style;
     constructor(style = {}) {
         this.style = style;
     }
     measureTextWidth(ctx, text, fontSize) {
-        const italic = this.style.italic ? "italic" : "";
-        const weight = this.style.bold ? "bold" : "";
-        ctx.font = `${italic} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
+        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)
+        if (!chart.runtime) {
             return 0;
+        }
         const baselineStr = chart.baseline;
         // Put mock text to simulate the width of the up/down arrow
-        const largeText = chart.baselineArrowDirection !== "neutral" ? "A " + baselineStr : baselineStr;
+        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)
+        if (!chart.runtime) {
             return 0;
+        }
         const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
         const maxHeight = haveBaseline ? BASELINE_BOX_HEIGHT_RATIO * availableHeight : 0;
         return maxHeight / LINE_HEIGHT;
@@ -4968,20 +5538,42 @@ class BaselineElement extends ScorecardScalableElement {
 }
 class KeyValueElement extends ScorecardScalableElement {
     getElementWidth(fontSize, ctx, chart) {
-        if (!chart.runtime)
+        if (!chart.runtime) {
             return 0;
+        }
         const str = chart.keyValue || "";
         return this.measureTextWidth(ctx, str, fontSize);
     }
     getElementMaxFontSize(availableHeight, chart) {
-        if (!chart.runtime)
+        if (!chart.runtime) {
             return 0;
+        }
         const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
         const maxHeight = haveBaseline ? KEY_BOX_HEIGHT_RATIO * availableHeight : availableHeight;
         return maxHeight / LINE_HEIGHT;
     }
 }
-ScorecardChart$1.props = {
+
+class ScorecardChart extends Component {
+    static template = "o-spreadsheet-ScorecardChart";
+    canvas = useRef("chartContainer");
+    get runtime() {
+        return this.env.model.getters.getChartRuntime(this.props.figure.id);
+    }
+    setup() {
+        useEffect(this.createChart.bind(this), () => {
+            const canvas = this.canvas.el;
+            const rect = canvas.getBoundingClientRect();
+            return [rect.width, rect.height, this.runtime, this.canvas.el];
+        });
+    }
+    createChart() {
+        const canvas = this.canvas.el;
+        const config = getScorecardConfiguration(canvas.getBoundingClientRect(), this.runtime);
+        drawScoreChart(config, canvas);
+    }
+}
+ScorecardChart.props = {
     figure: Object,
 };
 
@@ -5168,7 +5760,7 @@ function _createEvaluatedCell(value, localeFormat) {
         return textCell((value || "").toString(), localeFormat);
     }
     catch (error) {
-        return errorCell((value || "").toString(), new EvaluationError(CellErrorType.GenericError, error.message || DEFAULT_ERROR_MESSAGE));
+        return errorCell(new EvaluationError(CellErrorType.GenericError, error.message || DEFAULT_ERROR_MESSAGE));
     }
 }
 function textCell(value, localeFormat) {
@@ -5235,7 +5827,7 @@ function booleanCell(value, localeFormat) {
         formattedValue,
     };
 }
-function errorCell(content, error) {
+function errorCell(error) {
     return {
         type: CellValueType.error,
         value: error.errorType,
@@ -5494,6 +6086,148 @@ autofillRulesRegistry
     sequence: 40,
 });
 
+/**
+ * This file is largely inspired by owl 1.
+ * `css` tag has been removed from owl 2 without workaround to manage css.
+ * So, the solution was to import the behavior of owl 1 directly in our
+ * codebase, with one difference: the css is added to the sheet as soon as the
+ * css tag is executed. In owl 1, the css was added as soon as a Component was
+ * created for the first time.
+ */
+const STYLESHEETS = {};
+let nextId = 0;
+/**
+ * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+ * an inline stylesheet with just the following code:
+ * ```js
+ *     css`.component-a { color: red; }`;
+ * ```
+ */
+function css(strings, ...args) {
+    const name = `__sheet__${nextId++}`;
+    const value = String.raw(strings, ...args);
+    registerSheet(name, value);
+    activateSheet(name);
+    return name;
+}
+function processSheet(str) {
+    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+    const selectorStack = [];
+    const parts = [];
+    let rules = [];
+    function generateSelector(stackIndex, parentSelector) {
+        const parts = [];
+        for (const selector of selectorStack[stackIndex]) {
+            let part = (parentSelector && parentSelector + " " + selector) || selector;
+            if (part.includes("&")) {
+                part = selector.replace(/&/g, parentSelector || "");
+            }
+            if (stackIndex < selectorStack.length - 1) {
+                part = generateSelector(stackIndex + 1, part);
+            }
+            parts.push(part);
+        }
+        return parts.join(", ");
+    }
+    function generateRules() {
+        if (rules.length) {
+            parts.push(generateSelector(0) + " {");
+            parts.push(...rules);
+            parts.push("}");
+            rules = [];
+        }
+    }
+    while (tokens.length) {
+        let token = tokens.shift();
+        if (token === "}") {
+            generateRules();
+            selectorStack.pop();
+        }
+        else {
+            if (tokens[0] === "{") {
+                generateRules();
+                selectorStack.push(token.split(/\s*,\s*/));
+                tokens.shift();
+            }
+            if (tokens[0] === ";") {
+                rules.push("  " + token + ";");
+            }
+        }
+    }
+    return parts.join("\n");
+}
+function registerSheet(id, css) {
+    const sheet = document.createElement("style");
+    sheet.textContent = processSheet(css);
+    STYLESHEETS[id] = sheet;
+}
+function activateSheet(id) {
+    const sheet = STYLESHEETS[id];
+    sheet.setAttribute("component", id);
+    document.head.appendChild(sheet);
+}
+function getTextDecoration({ strikethrough, underline, }) {
+    if (!strikethrough && !underline) {
+        return "none";
+    }
+    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+}
+/**
+ * Convert the cell style to CSS properties.
+ */
+function cellStyleToCss(style) {
+    const attributes = cellTextStyleToCss(style);
+    if (!style)
+        return attributes;
+    if (style.fillColor) {
+        attributes["background"] = style.fillColor;
+    }
+    return attributes;
+}
+/**
+ * Convert the cell text style to CSS properties.
+ */
+function cellTextStyleToCss(style) {
+    const attributes = {};
+    if (!style)
+        return attributes;
+    if (style.bold) {
+        attributes["font-weight"] = "bold";
+    }
+    if (style.italic) {
+        attributes["font-style"] = "italic";
+    }
+    if (style.strikethrough || style.underline) {
+        let decoration = style.strikethrough ? "line-through" : "";
+        decoration = style.underline ? decoration + " underline" : decoration;
+        attributes["text-decoration"] = decoration;
+    }
+    if (style.textColor) {
+        attributes["color"] = style.textColor;
+    }
+    return attributes;
+}
+/**
+ * Transform CSS properties into a CSS string.
+ */
+function cssPropertiesToCss(attributes) {
+    const str = Object.entries(attributes)
+        .filter(([attName, attValue]) => attValue !== undefined)
+        .map(([attName, attValue]) => `${attName}:${attValue};`)
+        .join(" ");
+    return str;
+}
+function getElementMargins(el) {
+    const style = window.getComputedStyle(el);
+    const margins = {
+        top: parseInt(style.marginTop, 10) || 0,
+        bottom: parseInt(style.marginBottom, 10) || 0,
+        left: parseInt(style.marginLeft, 10) || 0,
+        right: parseInt(style.marginRight, 10) || 0,
+    };
+    return margins;
+}
+
 const ERROR_TOOLTIP_MAX_HEIGHT = 80;
 const ERROR_TOOLTIP_WIDTH = 180;
 css /* scss */ `
@@ -6227,6 +6961,10 @@ css /* scss */ `
       cursor: pointer;
       user-select: none;
 
+      .o-menu-item-name {
+        min-width: 40%;
+      }
+
       &.o-menu-root {
         display: flex;
         justify-content: space-between;
@@ -6845,6 +7583,18 @@ function multiplyMatrices(matrix1, matrix2) {
     }
     return result;
 }
+/**
+ * Return the input if it's a scalar or the first element of the input if it's a matrix.
+ */
+function toScalar(matrix) {
+    if (!isMatrix(matrix)) {
+        return matrix;
+    }
+    if (matrix.length !== 1 || matrix[0].length !== 1) {
+        throw new Error("toScalar: matrix should be a scalar or a 1x1 matrix");
+    }
+    return matrix[0][0];
+}
 
 // -----------------------------------------------------------------------------
 // ARRAY_CONSTRAIN
@@ -7375,7 +8125,7 @@ var array = /*#__PURE__*/Object.freeze({
 // FORMAT.LARGE.NUMBER
 // -----------------------------------------------------------------------------
 const FORMAT_LARGE_NUMBER = {
-    description: _t(`Apply a large number format`),
+    description: _t("Apply a large number format"),
     args: [
         arg("value (number)", _t("The number.")),
         arg("unit (string, optional)", _t("The formatting unit. Use 'k', 'm', or 'b' to force the unit")),
@@ -7555,7 +8305,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."));
         return Math.atan2(_y, _x);
     },
     isExported: true,
@@ -7580,7 +8330,7 @@ const ATANH = {
 // CEILING
 // -----------------------------------------------------------------------------
 const CEILING = {
-    description: _t(`Rounds number up to nearest multiple of factor.`),
+    description: _t("Rounds number up to nearest multiple of factor."),
     args: [
         arg("value (number)", _t("The value to round up to the nearest integer multiple of factor.")),
         arg(`factor (number, default=${DEFAULT_FACTOR})`, _t("The number to whose multiples value will be rounded.")),
@@ -7599,7 +8349,7 @@ const CEILING = {
 // CEILING.MATH
 // -----------------------------------------------------------------------------
 const CEILING_MATH = {
-    description: _t(`Rounds number up to nearest multiple of factor.`),
+    description: _t("Rounds number up to nearest multiple of factor."),
     args: [
         arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
         arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded. The sign of significance will be ignored.")),
@@ -7629,7 +8379,7 @@ const CEILING_MATH = {
 // CEILING.PRECISE
 // -----------------------------------------------------------------------------
 const CEILING_PRECISE = {
-    description: _t(`Rounds number up to nearest multiple of factor.`),
+    description: _t("Rounds number up to nearest multiple of factor."),
     args: [
         arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
         arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7674,7 +8424,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.`));
+        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return 1 / Math.tan(_angle);
     },
     isExported: true,
@@ -7688,7 +8438,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.`));
+        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return 1 / Math.tanh(_value);
     },
     isExported: true,
@@ -7807,7 +8557,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.`));
+        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return 1 / Math.sin(_angle);
     },
     isExported: true,
@@ -7821,7 +8571,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.`));
+        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return 1 / Math.sinh(_value);
     },
     isExported: true,
@@ -7860,7 +8610,7 @@ const DECIMAL = {
 // DEGREES
 // -----------------------------------------------------------------------------
 const DEGREES = {
-    description: _t(`Converts an angle value in radians to degrees.`),
+    description: _t("Converts an angle value in radians to degrees."),
     args: [arg("angle (number)", _t("The angle to convert from radians to degrees."))],
     returns: ["NUMBER"],
     compute: function (angle) {
@@ -7872,7 +8622,7 @@ const DEGREES = {
 // EXP
 // -----------------------------------------------------------------------------
 const EXP = {
-    description: _t(`Euler's number, e (~2.718) raised to a power.`),
+    description: _t("Euler's number, e (~2.718) raised to a power."),
     args: [arg("value (number)", _t("The exponent to raise e."))],
     returns: ["NUMBER"],
     compute: function (value) {
@@ -7884,7 +8634,7 @@ const EXP = {
 // FLOOR
 // -----------------------------------------------------------------------------
 const FLOOR = {
-    description: _t(`Rounds number down to nearest multiple of factor.`),
+    description: _t("Rounds number down to nearest multiple of factor."),
     args: [
         arg("value (number)", _t("The value to round down to the nearest integer multiple of factor.")),
         arg(`factor (number, default=${DEFAULT_FACTOR})`, _t("The number to whose multiples value will be rounded.")),
@@ -7903,7 +8653,7 @@ const FLOOR = {
 // FLOOR.MATH
 // -----------------------------------------------------------------------------
 const FLOOR_MATH = {
-    description: _t(`Rounds number down to nearest multiple of factor.`),
+    description: _t("Rounds number down to nearest multiple of factor."),
     args: [
         arg("number (number)", _t("The value to round down to the nearest integer multiple of significance.")),
         arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded. The sign of significance will be ignored.")),
@@ -7933,7 +8683,7 @@ const FLOOR_MATH = {
 // FLOOR.PRECISE
 // -----------------------------------------------------------------------------
 const FLOOR_PRECISE = {
-    description: _t(`Rounds number down to nearest multiple of factor.`),
+    description: _t("Rounds number down to nearest multiple of factor."),
     args: [
         arg("number (number)", _t("The value to round down to the nearest integer multiple of significance.")),
         arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7949,7 +8699,7 @@ const FLOOR_PRECISE = {
 // ISEVEN
 // -----------------------------------------------------------------------------
 const ISEVEN = {
-    description: _t(`Whether the provided value is even.`),
+    description: _t("Whether the provided value is even."),
     args: [arg("value (number)", _t("The value to be verified as even."))],
     returns: ["BOOLEAN"],
     compute: function (value) {
@@ -7962,7 +8712,7 @@ const ISEVEN = {
 // ISO.CEILING
 // -----------------------------------------------------------------------------
 const ISO_CEILING = {
-    description: _t(`Rounds number up to nearest multiple of factor.`),
+    description: _t("Rounds number up to nearest multiple of factor."),
     args: [
         arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
         arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7978,7 +8728,7 @@ const ISO_CEILING = {
 // ISODD
 // -----------------------------------------------------------------------------
 const ISODD = {
-    description: _t(`Whether the provided value is even.`),
+    description: _t("Whether the provided value is even."),
     args: [arg("value (number)", _t("The value to be verified as even."))],
     returns: ["BOOLEAN"],
     compute: function (value) {
@@ -7991,7 +8741,7 @@ const ISODD = {
 // LN
 // -----------------------------------------------------------------------------
 const LN = {
-    description: _t(`The logarithm of a number, base e (euler's number).`),
+    description: _t("The logarithm of a number, base e (euler's number)."),
     args: [arg("value (number)", _t("The value for which to calculate the logarithm, base e."))],
     returns: ["NUMBER"],
     compute: function (value) {
@@ -8005,7 +8755,7 @@ const LN = {
 // MOD
 // -----------------------------------------------------------------------------
 const MOD = {
-    description: _t(`Modulo (remainder) operator.`),
+    description: _t("Modulo (remainder) operator."),
     args: [
         arg("dividend (number)", _t("The number to be divided to find the remainder.")),
         arg("divisor (number)", _t("The number to divide by.")),
@@ -8045,7 +8795,7 @@ const MUNIT = {
 // ODD
 // -----------------------------------------------------------------------------
 const ODD = {
-    description: _t(`Rounds a number up to the nearest odd integer.`),
+    description: _t("Rounds a number up to the nearest odd integer."),
     args: [arg("value (number)", _t("The value to round to the next greatest odd number."))],
     returns: ["NUMBER"],
     computeFormat: (number) => number?.format,
@@ -8061,7 +8811,7 @@ const ODD = {
 // PI
 // -----------------------------------------------------------------------------
 const PI = {
-    description: _t(`The number pi.`),
+    description: _t("The number pi."),
     args: [],
     returns: ["NUMBER"],
     compute: function () {
@@ -8073,7 +8823,7 @@ const PI = {
 // POWER
 // -----------------------------------------------------------------------------
 const POWER = {
-    description: _t(`A number raised to a power.`),
+    description: _t("A number raised to a power."),
     args: [
         arg("base (number)", _t("The number to raise to the exponent power.")),
         arg("exponent (number)", _t("The exponent to raise base to.")),
@@ -8238,7 +8988,7 @@ const ROUND = {
 // ROUNDDOWN
 // -----------------------------------------------------------------------------
 const ROUNDDOWN = {
-    description: _t(`Rounds down a number.`),
+    description: _t("Rounds down a number."),
     args: [
         arg("value (number)", _t("The value to round to places number of places, always rounding down.")),
         arg(`places (number, default=${DEFAULT_PLACES})`, _t("The number of decimal places to which to round.")),
@@ -8267,7 +9017,7 @@ const ROUNDDOWN = {
 // ROUNDUP
 // -----------------------------------------------------------------------------
 const ROUNDUP = {
-    description: _t(`Rounds up a number.`),
+    description: _t("Rounds up a number."),
     args: [
         arg("value (number)", _t("The value to round to places number of places, always rounding up.")),
         arg(`places (number, default=${DEFAULT_PLACES})`, _t("The number of decimal places to which to round.")),
@@ -8569,7 +9319,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."));
     let sumY = 0;
     let sumX = 0;
     for (let i = 0; i < count; i++) {
@@ -8592,14 +9342,14 @@ 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."));
     const average = sum / count;
     return (reduceFunction(args, (acc, a) => acc + Math.pow(a - average, 2), 0, locale) /
         (count - (isSample ? 1 : 0)));
 }
 function centile(data, percent, isInclusive, locale) {
     const _percent = toNumber(percent, locale);
-    assert(() => (isInclusive ? 0 <= _percent && _percent <= 1 : 0 < _percent && _percent < 1), _t(`Function [[FUNCTION_NAME]] parameter 2 value is out of range.`));
+    assert(() => (isInclusive ? 0 <= _percent && _percent <= 1 : 0 < _percent && _percent < 1), _t("Function [[FUNCTION_NAME]] parameter 2 value is out of range."));
     let sortedArray = [];
     let index;
     let count = 0;
@@ -8610,10 +9360,10 @@ function centile(data, percent, isInclusive, locale) {
             count++;
         }
     });
-    assert(() => count !== 0, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+    assert(() => count !== 0, _t("[[FUNCTION_NAME]] has no valid input data."));
     if (!isInclusive) {
         // 2nd argument must be between 1/(n+1) and n/(n+1) with n the number of data
-        assert(() => 1 / (count + 1) <= _percent && _percent <= count / (count + 1), _t(`Function [[FUNCTION_NAME]] parameter 2 value is out of range.`));
+        assert(() => 1 / (count + 1) <= _percent && _percent <= count / (count + 1), _t("Function [[FUNCTION_NAME]] parameter 2 value is out of range."));
     }
     return percentile(sortedArray, _percent, isInclusive);
 }
@@ -8727,7 +9477,7 @@ function fullLinearRegression(X, Y, computeIntercept = true, verbose = false) {
 */
 function polynomialRegression(flatY, flatX, order, intercept) {
     assertSameNumberOfElements(flatX, flatY);
-    assert(() => order >= 1, _t(`Function [[FUNCTION_NAME]] A regression of order less than 1 cannot be possible.`));
+    assert(() => order >= 1, _t("Function [[FUNCTION_NAME]] A regression of order less than 1 cannot be possible."));
     const yMatrix = [flatY];
     const xMatrix = flatX.map((x) => range(0, order).map((i) => Math.pow(x, order - i)));
     if (intercept) {
@@ -8788,7 +9538,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.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         const average = sum / count;
         return reduceNumbers(values, (acc, a) => acc + Math.abs(average - a), 0, this.locale) / count;
     },
@@ -8798,7 +9548,7 @@ const AVEDEV = {
 // AVERAGE
 // -----------------------------------------------------------------------------
 const AVERAGE = {
-    description: _t(`Numerical average value in a dataset, ignoring text.`),
+    description: _t("Numerical average value in a dataset, ignoring text."),
     args: [
         arg("value1 (number, range<number>)", _t("The first value or range to consider when calculating the average value.")),
         arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when calculating the average value.")),
@@ -8813,7 +9563,7 @@ const AVERAGE = {
             count += 1;
             return acc + a;
         }, 0, this.locale);
-        assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return sum / count;
     },
     isExported: true,
@@ -8821,10 +9571,10 @@ const AVERAGE = {
 // -----------------------------------------------------------------------------
 // AVERAGE.WEIGHTED
 // -----------------------------------------------------------------------------
-const rangeError = _t(`[[FUNCTION_NAME]] has mismatched range sizes.`);
-const negativeWeightError = _t(`[[FUNCTION_NAME]] expects the weight to be positive or equal to 0.`);
+const rangeError = _t("[[FUNCTION_NAME]] has mismatched range sizes.");
+const negativeWeightError = _t("[[FUNCTION_NAME]] expects the weight to be positive or equal to 0.");
 const AVERAGE_WEIGHTED = {
-    description: _t(`Weighted average.`),
+    description: _t("Weighted average."),
     args: [
         arg("values (number, range<number>)", _t("Values to average.")),
         arg("weights (number, range<number>)", _t("Weights for each corresponding value.")),
@@ -8840,7 +9590,7 @@ const AVERAGE_WEIGHTED = {
         let count = 0;
         let value;
         let weight;
-        assert(() => values.length % 2 === 0, _t(`Wrong number of Argument[]. Expected an even number of Argument[].`));
+        assert(() => values.length % 2 === 0, _t("Wrong number of Argument[]. Expected an even number of Argument[]."));
         for (let n = 0; n < values.length - 1; n += 2) {
             value = values[n];
             weight = values[n + 1];
@@ -8859,7 +9609,7 @@ const AVERAGE_WEIGHTED = {
                         let subValueIsNumber = typeof subValue === "number";
                         let subWeightIsNumber = typeof subWeight === "number";
                         // typeof subValue or subWeight can be 'number' or 'undefined'
-                        assert(() => subValueIsNumber === subWeightIsNumber, _t(`[[FUNCTION_NAME]] expects number values.`));
+                        assert(() => subValueIsNumber === subWeightIsNumber, _t("[[FUNCTION_NAME]] expects number values."));
                         if (subWeightIsNumber) {
                             assert(() => subWeight >= 0, negativeWeightError);
                             sum += subValue * subWeight;
@@ -8876,7 +9626,7 @@ const AVERAGE_WEIGHTED = {
                 count += weight;
             }
         }
-        assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return sum / count;
     },
 };
@@ -8884,7 +9634,7 @@ const AVERAGE_WEIGHTED = {
 // AVERAGEA
 // -----------------------------------------------------------------------------
 const AVERAGEA = {
-    description: _t(`Numerical average value in a dataset.`),
+    description: _t("Numerical average value in a dataset."),
     args: [
         arg("value1 (number, range<number>)", _t("The first value or range to consider when calculating the average value.")),
         arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when calculating the average value.")),
@@ -8899,7 +9649,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.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return sum / count;
     },
     isExported: true,
@@ -8908,7 +9658,7 @@ const AVERAGEA = {
 // AVERAGEIF
 // -----------------------------------------------------------------------------
 const AVERAGEIF = {
-    description: _t(`Average of values depending on criteria.`),
+    description: _t("Average of values depending on criteria."),
     args: [
         arg("criteria_range (number, range<number>)", _t("The range to check against criterion.")),
         arg("criterion (string)", _t("The pattern or test to apply to criteria_range.")),
@@ -8927,7 +9677,7 @@ const AVERAGEIF = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return sum / count;
     },
     isExported: true,
@@ -8936,7 +9686,7 @@ const AVERAGEIF = {
 // AVERAGEIFS
 // -----------------------------------------------------------------------------
 const AVERAGEIFS = {
-    description: _t(`Average of values depending on multiple criteria.`),
+    description: _t("Average of values depending on multiple criteria."),
     args: [
         arg("average_range (range)", _t("The range to average.")),
         arg("criteria_range1 (range)", _t("The range to check against criterion1.")),
@@ -8956,7 +9706,7 @@ const AVERAGEIFS = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
         return sum / count;
     },
     isExported: true,
@@ -8965,7 +9715,7 @@ const AVERAGEIFS = {
 // COUNT
 // -----------------------------------------------------------------------------
 const COUNT = {
-    description: _t(`The number of numeric values in dataset.`),
+    description: _t("The number of numeric values in dataset."),
     args: [
         arg("value1 (number, range<number>)", _t("The first value or range to consider when counting.")),
         arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when counting.")),
@@ -8997,7 +9747,7 @@ const COUNT = {
 // COUNTA
 // -----------------------------------------------------------------------------
 const COUNTA = {
-    description: _t(`The number of values in a dataset.`),
+    description: _t("The number of values in a dataset."),
     args: [
         arg("value1 (any, range)", _t("The first value or range to consider when counting.")),
         arg("value2 (any, range, repeating)", _t("Additional values or ranges to consider when counting.")),
@@ -9014,7 +9764,7 @@ const COUNTA = {
 // Note: Unlike the VAR function which corresponds to the variance over a sample (VAR.S),
 // the COVAR function corresponds to the covariance over an entire population (COVAR.P)
 const COVAR = {
-    description: _t(`The covariance of a dataset.`),
+    description: _t("The covariance of a dataset."),
     args: [
         arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
         arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9029,7 +9779,7 @@ const COVAR = {
 // COVARIANCE.P
 // -----------------------------------------------------------------------------
 const COVARIANCE_P = {
-    description: _t(`The covariance of a dataset.`),
+    description: _t("The covariance of a dataset."),
     args: [
         arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
         arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9044,7 +9794,7 @@ const COVARIANCE_P = {
 // COVARIANCE.S
 // -----------------------------------------------------------------------------
 const COVARIANCE_S = {
-    description: _t(`The sample covariance of a dataset.`),
+    description: _t("The sample covariance of a dataset."),
     args: [
         arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
         arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9132,7 +9882,7 @@ const LARGE = {
             }
         });
         const result = largests.shift();
-        assert(() => result !== undefined, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+        assert(() => result !== undefined, _t("[[FUNCTION_NAME]] has no valid input data."));
         assert(() => count >= _n, _t("Function [[FUNCTION_NAME]] parameter 2 value (%s) is out of range.", _n));
         return result;
     },
@@ -9558,6 +10308,42 @@ const QUARTILE_INC = {
     },
     isExported: true,
 };
+// RANK
+// -----------------------------------------------------------------------------
+const RANK = {
+    description: _t("Returns the rank of a specified value in a dataset."),
+    args: [
+        arg("value (number)", _t("The value whose rank will be determined.")),
+        arg("data (range)", _t("The range containing the dataset to consider.")),
+        arg("is_ascending (boolean, default=FALSE)", _t("Whether to consider the values in data in descending or ascending order.")),
+    ],
+    returns: ["ANY"],
+    compute: function (value, data, isAscending = false) {
+        const _isAscending = toBoolean(isAscending);
+        const _value = toNumber(value, this.locale);
+        let rank = 1;
+        let found = false;
+        for (const row of data) {
+            for (const cell of row) {
+                if (typeof cell !== "number") {
+                    continue;
+                }
+                const _cell = toNumber(cell, this.locale);
+                if (_cell === _value) {
+                    found = true;
+                }
+                else if (_cell > _value !== _isAscending) {
+                    rank++;
+                }
+            }
+        }
+        if (!found) {
+            throw new NotAvailableError(_t("Value not found in the given data."));
+        }
+        return rank;
+    },
+    isExported: true,
+};
 // -----------------------------------------------------------------------------
 // RSQ
 // -----------------------------------------------------------------------------
@@ -9618,7 +10404,7 @@ const SMALL = {
             }
         });
         const result = largests.pop();
-        assert(() => result !== undefined, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+        assert(() => result !== undefined, _t("[[FUNCTION_NAME]] has no valid input data."));
         assert(() => count >= _n, _t("Function [[FUNCTION_NAME]] parameter 2 value (%s) is out of range.", _n));
         return result;
     },
@@ -9902,6 +10688,7 @@ var statistical = /*#__PURE__*/Object.freeze({
   QUARTILE: QUARTILE,
   QUARTILE_EXC: QUARTILE_EXC,
   QUARTILE_INC: QUARTILE_INC,
+  RANK: RANK,
   RSQ: RSQ,
   SLOPE: SLOPE,
   SMALL: SMALL,
@@ -10224,7 +11011,7 @@ const DATE = {
         }
         const jsDate = new Date(_year, _month - 1, _day);
         const result = jsDateToRoundNumber(jsDate);
-        assert(() => result >= 0, _t(`The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900.`));
+        assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
         return result;
     },
     isExported: true,
@@ -10237,7 +11024,7 @@ const DATEDIF = {
     args: [
         arg("start_date (date)", _t("The start date to consider in the calculation. Must be a reference to a cell containing a DATE, a function returning a DATE type, or a number.")),
         arg("end_date (date)", _t("The end date to consider in the calculation. Must be a reference to a cell containing a DATE, a function returning a DATE type, or a number.")),
-        arg("unit (string)", _t(`A text abbreviation for unit of time. Accepted values are "Y" (the number of whole years between start_date and end_date), "M" (the number of whole months between start_date and end_date), "D" (the number of days between start_date and end_date), "MD" (the number of days between start_date and end_date after subtracting whole months), "YM" (the number of whole months between start_date and end_date after subtracting whole years), "YD" (the number of days between start_date and end_date, assuming start_date and end_date were no more than one year apart).`)),
+        arg("unit (string)", _t('A text abbreviation for unit of time. Accepted values are "Y" (the number of whole years between start_date and end_date), "M" (the number of whole months between start_date and end_date), "D" (the number of days between start_date and end_date), "MD" (the number of days between start_date and end_date after subtracting whole months), "YM" (the number of whole months between start_date and end_date after subtracting whole years), "YD" (the number of days between start_date and end_date, assuming start_date and end_date were no more than one year apart).')),
     ],
     returns: ["NUMBER"],
     compute: function (startDate, endDate, unit) {
@@ -10679,7 +11466,7 @@ const TIME = {
         _hour += Math.floor(_minute / 60);
         _minute = (_minute % 60) + (_minute < 0 ? 60 : 0);
         _hour %= 24;
-        assert(() => _hour >= 0, _t(`The function [[FUNCTION_NAME]] result cannot be negative`));
+        assert(() => _hour >= 0, _t("The function [[FUNCTION_NAME]] result cannot be negative"));
         return _hour / 24 + _minute / (24 * 60) + _second / (24 * 60 * 60);
     },
     isExported: true,
@@ -11048,6 +11835,172 @@ var engineering = /*#__PURE__*/Object.freeze({
   DELTA: DELTA
 });
 
+const SORT_TYPES = [
+    CellValueType.number,
+    CellValueType.error,
+    CellValueType.text,
+    CellValueType.boolean,
+];
+function cellsSortingCriterion(sortingOrder) {
+    const inverse = sortingOrder === "ascending" ? 1 : -1;
+    return (left, right) => {
+        if (left.type === CellValueType.empty) {
+            return right.type === CellValueType.empty ? 0 : 1;
+        }
+        else if (right.type === CellValueType.empty) {
+            return -1;
+        }
+        let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
+        if (typeOrder === 0) {
+            if (left.type === CellValueType.text || left.type === CellValueType.error) {
+                typeOrder = left.value.localeCompare(right.value);
+            }
+            else {
+                typeOrder = left.value - right.value;
+            }
+        }
+        return inverse * typeOrder;
+    };
+}
+function sortCells(cells, sortDirection, emptyCellAsZero) {
+    const cellsWithIndex = cells.map((cell, index) => ({
+        index,
+        type: cell.type,
+        value: cell.value,
+    }));
+    const cellsToSort = emptyCellAsZero
+        ? cellsWithIndex.map((cell) => cell.type === CellValueType.empty ? { ...cell, type: CellValueType.number, value: 0 } : cell)
+        : cellsWithIndex;
+    return cellsToSort.sort(cellsSortingCriterion(sortDirection));
+}
+function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
+    let result = DispatchResult.Success;
+    //several columns => bypass the contiguity check
+    let multiColumns = zone.right > zone.left;
+    if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
+        multiColumns = false;
+        let table;
+        for (let row = zone.top; row <= zone.bottom; row++) {
+            table = [];
+            for (let col = zone.left; col <= zone.right; col++) {
+                let merge = env.model.getters.getMerge({ sheetId, col, row });
+                if (merge && !table.includes(merge.id.toString())) {
+                    table.push(merge.id.toString());
+                }
+            }
+            if (table.length >= 2) {
+                multiColumns = true;
+                break;
+            }
+        }
+    }
+    const { col, row } = anchor;
+    if (multiColumns) {
+        result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
+    }
+    else {
+        // check contiguity
+        const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
+        if (isEqual(contiguousZone, zone)) {
+            // merge as it is
+            result = env.model.dispatch("SORT_CELLS", {
+                sheetId,
+                col,
+                row,
+                zone,
+                sortDirection,
+            });
+        }
+        else {
+            env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
+                zone = contiguousZone;
+                result = env.model.dispatch("SORT_CELLS", {
+                    sheetId,
+                    col,
+                    row,
+                    zone,
+                    sortDirection,
+                });
+            }, () => {
+                result = env.model.dispatch("SORT_CELLS", {
+                    sheetId,
+                    col,
+                    row,
+                    zone,
+                    sortDirection,
+                });
+            });
+        }
+    }
+    if (result.isCancelledBecause("InvalidSortZone" /* CommandResult.InvalidSortZone */)) {
+        const { col, row } = anchor;
+        env.model.selection.selectZone({ cell: { col, row }, zone });
+        env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
+    }
+}
+
+function sortMatrix(matrix, locale, ...criteria) {
+    for (const [i, value] of criteria.entries()) {
+        assert(() => value !== undefined, _t("Value for parameter %d is missing, while the function [[FUNCTION_NAME]] expect a number or a range.", i + 1));
+    }
+    const sortingOrders = [];
+    const sortColumns = [];
+    const nRows = matrix.length;
+    for (let i = 0; i < criteria.length; i += 2) {
+        sortingOrders.push(toBoolean(toScalar(criteria[i + 1])?.value) ? "ascending" : "descending");
+        const sortColumn = criteria[i];
+        if (isMatrix(sortColumn) && (sortColumn.length > 1 || sortColumn[0].length > 1)) {
+            assert(() => sortColumn.length === 1 && sortColumn[0].length === nRows, _t("Wrong size for %s. Expected a range of size 1x%s. Got %sx%s.", `sort_column${i + 1}`, nRows, sortColumn.length, sortColumn[0].length));
+            sortColumns.push(sortColumn.flat().map((c) => c.value));
+        }
+        else {
+            const colIndex = toNumber(toScalar(sortColumn)?.value, locale);
+            if (colIndex < 1 || colIndex > matrix[0].length) {
+                return matrix;
+            }
+            sortColumns.push(matrix.map((row) => row[colIndex - 1].value));
+        }
+    }
+    if (sortColumns.length === 0) {
+        for (let i = 0; i < matrix[0].length; i++) {
+            sortColumns.push(matrix.map((row) => row[i].value));
+            sortingOrders.push("ascending");
+        }
+    }
+    const sortingCriteria = {
+        descending: cellsSortingCriterion("descending"),
+        ascending: cellsSortingCriterion("ascending"),
+    };
+    const indexes = range(0, matrix.length);
+    indexes.sort((a, b) => {
+        for (const [i, sortColumn] of sortColumns.entries()) {
+            const left = sortColumn[a];
+            const right = sortColumn[b];
+            const leftCell = {
+                value: left,
+                type: left === null
+                    ? CellValueType.empty
+                    : typeof left === "string"
+                        ? CellValueType.text
+                        : typeof left,
+            };
+            const rightCell = {
+                value: right,
+                type: right === null
+                    ? CellValueType.empty
+                    : typeof right === "string"
+                        ? CellValueType.text
+                        : typeof right,
+            };
+            const result = sortingCriteria[sortingOrders[i]](leftCell, rightCell);
+            if (result !== 0) {
+                return result;
+            }
+        }
+        return 0;
+    });
+    return indexes.map((i) => matrix[i]);
+}
 // -----------------------------------------------------------------------------
 // FILTER
 // -----------------------------------------------------------------------------
@@ -11068,7 +12021,7 @@ const FILTER = {
         const _conditions = _conditionsMatrices.map((c) => c.flat());
         const mode = _conditionsMatrices[0].length === 1 ? "row" : "col";
         _array = mode === "row" ? transposeMatrix(_array) : _array;
-        assert(() => _conditions.every((cond) => cond.length === _array.length), _t(`FILTER has mismatched sizes on the range and conditions.`));
+        assert(() => _conditions.every((cond) => cond.length === _array.length), _t("FILTER has mismatched sizes on the range and conditions."));
         const result = [];
         for (let i = 0; i < _array.length; i++) {
             const row = _array[i];
@@ -11084,6 +12037,93 @@ const FILTER = {
     isExported: true,
 };
 // -----------------------------------------------------------------------------
+// SORT
+// -----------------------------------------------------------------------------
+const SORT = {
+    description: _t("Sorts the rows of a given array or range by the values in one or more columns."),
+    args: [
+        arg("range (range)", _t("The data to be sorted.")),
+        arg("sort_column (any, range<number>, repeating)", _t("The index of the column in range or a range outside of range containing the values by which to sort.")),
+        arg("is_ascending (boolean, repeating)", _t("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order.")),
+    ],
+    returns: ["RANGE"],
+    computeValueAndFormat: function (range, ...sortingCriteria) {
+        const _range = transposeMatrix(range);
+        return transposeMatrix(sortMatrix(_range, this.locale, ...sortingCriteria));
+    },
+    isExported: true,
+};
+// -----------------------------------------------------------------------------
+// SORTN
+// -----------------------------------------------------------------------------
+const SORTN = {
+    description: _t("Returns the first n items in a data set after performing a sort."),
+    args: [
+        arg("range (range)", _t("The data to be sorted.")),
+        arg("n (number, default=1)", _t("The number of items to return.")),
+        arg("display_ties_mode (number, default=0)", _t("A number representing the way to display ties.")),
+        arg("sort_column (number, range<number>, repeating)", _t("The index of the column in range or a range outside of range containing the values by which to sort.")),
+        arg("is_ascending (boolean, repeating)", _t("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order.")),
+    ],
+    returns: ["RANGE"],
+    computeValueAndFormat: function (range, n, displayTiesMode, ...sortingCriteria) {
+        const _n = toNumber(n?.value ?? 1, this.locale);
+        assert(() => _n >= 0, _t("Wrong value of 'n'. Expected a positive number. Got %s.", _n));
+        const _displayTiesMode = toNumber(displayTiesMode?.value ?? 0, this.locale);
+        assert(() => _displayTiesMode >= 0 && _displayTiesMode <= 3, _t("Wrong value of 'display_ties_mode'. Expected a positive number between 0 and 3. Got %s.", _displayTiesMode));
+        const sortedData = sortMatrix(transposeMatrix(range), this.locale, ...sortingCriteria);
+        const sameRows = (i, j) => JSON.stringify(sortedData[i].map((c) => c.value)) ===
+            JSON.stringify(sortedData[j].map((c) => c.value));
+        /*
+         * displayTiesMode determine how ties (equal values) are dealt with:
+         * 0 - ignore ties and show first n rows only
+         * 1 - show first n rows plus any additional ties with nth row
+         * 2 - show n rows but remove duplicates
+         * 3 - show first n unique rows and all duplicates of these rows
+         */
+        switch (_displayTiesMode) {
+            case 0:
+                return transposeMatrix(sortedData.slice(0, _n));
+            case 1:
+                for (let i = _n; i < sortedData.length; i++) {
+                    if (!sameRows(i, _n - 1)) {
+                        return transposeMatrix(sortedData.slice(0, i));
+                    }
+                }
+                return transposeMatrix(sortedData);
+            case 2: {
+                const uniques = [sortedData[0]];
+                for (let i = 1; i < sortedData.length; i++) {
+                    for (let j = 0; j < i; j++) {
+                        if (sameRows(i, j)) {
+                            break;
+                        }
+                        if (j === i - 1) {
+                            uniques.push(sortedData[i]);
+                        }
+                    }
+                }
+                return transposeMatrix(uniques.slice(0, _n));
+            }
+            case 3: {
+                const uniques = [sortedData[0]];
+                let counter = 1;
+                for (let i = 1; i < sortedData.length; i++) {
+                    if (!sameRows(i, i - 1)) {
+                        counter++;
+                    }
+                    if (counter > _n) {
+                        break;
+                    }
+                    uniques.push(sortedData[i]);
+                }
+                return transposeMatrix(uniques);
+            }
+        }
+    },
+    isExported: true,
+};
+// -----------------------------------------------------------------------------
 // UNIQUE
 // -----------------------------------------------------------------------------
 const UNIQUE = {
@@ -11131,6 +12171,8 @@ const UNIQUE = {
 var filter = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FILTER: FILTER,
+  SORT: SORT,
+  SORTN: SORTN,
   UNIQUE: UNIQUE
 });
 
@@ -11283,7 +12325,7 @@ function newtonMethod(func, derivFunc, startValue, maxIterations, epsMax = 1e-10
     do {
         y = func(x);
         if (isNaN(y)) {
-            assert(() => count < maxIterations && nanFallback !== undefined, _t(`Function [[FUNCTION_NAME]] didn't find any result.`));
+            assert(() => count < maxIterations && nanFallback !== undefined, _t("Function [[FUNCTION_NAME]] didn't find any result."));
             count++;
             x = nanFallback(previousFallback);
             previousFallback = x;
@@ -11293,7 +12335,7 @@ function newtonMethod(func, derivFunc, startValue, maxIterations, epsMax = 1e-10
         xDelta = Math.abs(newX - x);
         x = newX;
         yEqual0 = xDelta < epsMax || Math.abs(y) < epsMax;
-        assert(() => count < maxIterations, _t(`Function [[FUNCTION_NAME]] didn't find any result.`));
+        assert(() => count < maxIterations, _t("Function [[FUNCTION_NAME]] didn't find any result."));
         count++;
     } while (!yEqual0);
     return x;
@@ -13386,7 +14428,7 @@ const AND = {
             acc = acc && arg;
             return acc;
         });
-        assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+        assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
         return acc;
     },
     isExported: true,
@@ -13500,7 +14542,7 @@ const IFS = {
     ],
     returns: ["ANY"],
     computeValueAndFormat: function (...values) {
-        assert(() => values.length % 2 === 0, _t(`Wrong number of arguments. Expected an even number of arguments.`));
+        assert(() => values.length % 2 === 0, _t("Wrong number of arguments. Expected an even number of arguments."));
         for (let n = 0; n < values.length - 1; n += 2) {
             if (toBoolean(values[n]()?.value)) {
                 const result = values[n + 1]();
@@ -13513,7 +14555,7 @@ const IFS = {
                 return result;
             }
         }
-        throw new Error(_t(`No match.`));
+        throw new Error(_t("No match."));
     },
     isExported: true,
 };
@@ -13549,7 +14591,7 @@ const OR = {
             acc = acc || arg;
             return !acc;
         });
-        assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+        assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
         return acc;
     },
     isExported: true,
@@ -13584,7 +14626,7 @@ const XOR = {
             acc = acc ? !arg : arg;
             return true; // no stop condition
         });
-        assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+        assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
         return acc;
     },
     isExported: true,
@@ -13688,7 +14730,7 @@ const COLUMNS = {
 // HLOOKUP
 // -----------------------------------------------------------------------------
 const HLOOKUP = {
-    description: _t(`Horizontal lookup`),
+    description: _t("Horizontal lookup"),
     args: [
         arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
         arg("range (range)", _t("The range to consider for the search. The first row in the range is searched for the key specified in search_key.")),
@@ -13746,7 +14788,7 @@ const INDEX = {
 // LOOKUP
 // -----------------------------------------------------------------------------
 const LOOKUP = {
-    description: _t(`Look up a value.`),
+    description: _t("Look up a value."),
     args: [
         arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
         arg("search_array (range)", _t("One method of using this function is to provide a single sorted row or column search_array to look through for the search_key with a second argument result_range. The other way is to combine these two arguments into one search_array where the first row or column is searched and a value is returned from the last row or column in the array. If search_key is not found, a non-exact match may be returned.")),
@@ -13787,7 +14829,7 @@ const LOOKUP = {
 // -----------------------------------------------------------------------------
 const DEFAULT_SEARCH_TYPE = 1;
 const MATCH = {
-    description: _t(`Position of item in range that matches value.`),
+    description: _t("Position of item in range that matches value."),
     args: [
         arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
         arg("range (any, range)", _t("The one-dimensional array to be searched.")),
@@ -13855,7 +14897,7 @@ const ROWS = {
 // VLOOKUP
 // -----------------------------------------------------------------------------
 const VLOOKUP = {
-    description: _t(`Vertical lookup.`),
+    description: _t("Vertical lookup."),
     args: [
         arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
         arg("range (any, range)", _t("The range to consider for the search. The first column in the range is searched for the key specified in search_key.")),
@@ -13881,7 +14923,7 @@ const VLOOKUP = {
 // XLOOKUP
 // -----------------------------------------------------------------------------
 const XLOOKUP = {
-    description: _t(`Search a range for a match and return the corresponding item from a second range.`),
+    description: _t("Search a range for a match and return the corresponding item from a second range."),
     args: [
         arg("search_key (any)", _t("The value to search for.")),
         arg("lookup_range (any, range)", _t("The range to consider for the search. Should be a single column or a single row.")),
@@ -13945,7 +14987,7 @@ var lookup = /*#__PURE__*/Object.freeze({
 // ADD
 // -----------------------------------------------------------------------------
 const ADD = {
-    description: _t(`Sum of two numbers.`),
+    description: _t("Sum of two numbers."),
     args: [
         arg("value1 (number)", _t("The first addend.")),
         arg("value2 (number)", _t("The second addend.")),
@@ -13960,7 +15002,7 @@ const ADD = {
 // CONCAT
 // -----------------------------------------------------------------------------
 const CONCAT = {
-    description: _t(`Concatenation of two values.`),
+    description: _t("Concatenation of two values."),
     args: [
         arg("value1 (string)", _t("The value to which value2 will be appended.")),
         arg("value2 (string)", _t("The value to append to value1.")),
@@ -13975,7 +15017,7 @@ const CONCAT = {
 // DIVIDE
 // -----------------------------------------------------------------------------
 const DIVIDE = {
-    description: _t(`One number divided by another.`),
+    description: _t("One number divided by another."),
     args: [
         arg("dividend (number)", _t("The number to be divided.")),
         arg("divisor (number)", _t("The number to divide by.")),
@@ -13996,7 +15038,7 @@ function isEmpty(value) {
 }
 const getNeutral = { number: 0, string: "", boolean: false };
 const EQ = {
-    description: _t(`Equal.`),
+    description: _t("Equal."),
     args: [
         arg("value1 (any)", _t("The first value.")),
         arg("value2 (any)", _t("The value to test against value1 for equality.")),
@@ -14037,7 +15079,7 @@ function applyRelationalOperator(value1, value2, cb) {
     return cb(value1, value2);
 }
 const GT = {
-    description: _t(`Strictly greater than.`),
+    description: _t("Strictly greater than."),
     args: [
         arg("value1 (any)", _t("The value to test as being greater than value2.")),
         arg("value2 (any)", _t("The second value.")),
@@ -14053,7 +15095,7 @@ const GT = {
 // GTE
 // -----------------------------------------------------------------------------
 const GTE = {
-    description: _t(`Greater than or equal to.`),
+    description: _t("Greater than or equal to."),
     args: [
         arg("value1 (any)", _t("The value to test as being greater than or equal to value2.")),
         arg("value2 (any)", _t("The second value.")),
@@ -14069,7 +15111,7 @@ const GTE = {
 // LT
 // -----------------------------------------------------------------------------
 const LT = {
-    description: _t(`Less than.`),
+    description: _t("Less than."),
     args: [
         arg("value1 (any)", _t("The value to test as being less than value2.")),
         arg("value2 (any)", _t("The second value.")),
@@ -14083,7 +15125,7 @@ const LT = {
 // LTE
 // -----------------------------------------------------------------------------
 const LTE = {
-    description: _t(`Less than or equal to.`),
+    description: _t("Less than or equal to."),
     args: [
         arg("value1 (any)", _t("The value to test as being less than or equal to value2.")),
         arg("value2 (any)", _t("The second value.")),
@@ -14097,7 +15139,7 @@ const LTE = {
 // MINUS
 // -----------------------------------------------------------------------------
 const MINUS = {
-    description: _t(`Difference of two numbers.`),
+    description: _t("Difference of two numbers."),
     args: [
         arg("value1 (number)", _t("The minuend, or number to be subtracted from.")),
         arg("value2 (number)", _t("The subtrahend, or number to subtract from value1.")),
@@ -14112,7 +15154,7 @@ const MINUS = {
 // MULTIPLY
 // -----------------------------------------------------------------------------
 const MULTIPLY = {
-    description: _t(`Product of two numbers`),
+    description: _t("Product of two numbers"),
     args: [
         arg("factor1 (number)", _t("The first multiplicand.")),
         arg("factor2 (number)", _t("The second multiplicand.")),
@@ -14127,7 +15169,7 @@ const MULTIPLY = {
 // NE
 // -----------------------------------------------------------------------------
 const NE = {
-    description: _t(`Not equal.`),
+    description: _t("Not equal."),
     args: [
         arg("value1 (any)", _t("The first value.")),
         arg("value2 (any)", _t("The value to test against value1 for inequality.")),
@@ -14141,7 +15183,7 @@ const NE = {
 // POW
 // -----------------------------------------------------------------------------
 const POW = {
-    description: _t(`A number raised to a power.`),
+    description: _t("A number raised to a power."),
     args: [
         arg("base (number)", _t("The number to raise to the exponent power.")),
         arg("exponent (number)", _t("The exponent to raise base to.")),
@@ -14155,7 +15197,7 @@ const POW = {
 // UMINUS
 // -----------------------------------------------------------------------------
 const UMINUS = {
-    description: _t(`A number with the sign reversed.`),
+    description: _t("A number with the sign reversed."),
     args: [
         arg("value (number)", _t("The number to have its sign reversed. Equivalently, the number to multiply by -1.")),
     ],
@@ -14169,7 +15211,7 @@ const UMINUS = {
 // UNARY_PERCENT
 // -----------------------------------------------------------------------------
 const UNARY_PERCENT = {
-    description: _t(`Value interpreted as a percentage.`),
+    description: _t("Value interpreted as a percentage."),
     args: [arg("percentage (number)", _t("The value to interpret as a percentage."))],
     returns: ["NUMBER"],
     compute: function (percentage) {
@@ -14180,7 +15222,7 @@ const UNARY_PERCENT = {
 // UPLUS
 // -----------------------------------------------------------------------------
 const UPLUS = {
-    description: _t(`A specified number, unchanged.`),
+    description: _t("A specified number, unchanged."),
     args: [arg("value (any)", _t("The number to return."))],
     returns: ["ANY"],
     computeFormat: (value) => value?.format,
@@ -14291,7 +15333,7 @@ const FIND = {
         const _searchFor = toString(searchFor);
         const _textToSearch = toString(textToSearch);
         const _startingAt = toNumber(startingAt, this.locale);
-        assert(() => _textToSearch !== "", _t(`The text_to_search must be non-empty.`));
+        assert(() => _textToSearch !== "", _t("The text_to_search must be non-empty."));
         assert(() => _startingAt >= 1, _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt.toString()));
         const result = _textToSearch.indexOf(_searchFor, _startingAt - 1);
         assert(() => result >= 0, _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor.toString(), _textToSearch));
@@ -14450,7 +15492,7 @@ const SEARCH = {
         const _searchFor = toString(searchFor).toLowerCase();
         const _textToSearch = toString(textToSearch).toLowerCase();
         const _startingAt = toNumber(startingAt, this.locale);
-        assert(() => _textToSearch !== "", _t(`The text_to_search must be non-empty.`));
+        assert(() => _textToSearch !== "", _t("The text_to_search must be non-empty."));
         assert(() => _startingAt >= 1, _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt.toString()));
         const result = _textToSearch.indexOf(_searchFor, _startingAt - 1);
         assert(() => result >= 0, _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor, _textToSearch));
@@ -15558,7 +16600,7 @@ function compile(formula) {
             const code = new FunctionCodeBuilder(scope);
             if (ast.type !== "REFERENCE" && !(ast.type === "BIN_OPERATION" && ast.value === ":")) {
                 if (isMeta) {
-                    throw new BadExpressionError(_t(`Argument must be a reference to a cell or range.`));
+                    throw new BadExpressionError(_t("Argument must be a reference to a cell or range."));
                 }
             }
             if (ast.debug) {
@@ -16362,410 +17404,11 @@ function toXlsxHexColor(color) {
     return color;
 }
 
-/**
- * AbstractChart is the class from which every Chart should inherit.
- * The role of this class is to maintain the state of each chart.
- */
-class AbstractChart {
-    sheetId;
-    title;
-    getters;
-    constructor(definition, sheetId, getters) {
-        this.title = definition.title;
-        this.sheetId = sheetId;
-        this.getters = getters;
-    }
-    /**
-     * Validate the chart definition given as arguments. This function will be
-     * called from allowDispatch function
-     */
-    static validateChartDefinition(validator, definition) {
-        throw new Error("This method should be implemented by sub class");
-    }
-    /**
-     * Get a new chart definition transformed with the executed command. This
-     * functions will be called during operational transform process
-     */
-    static transformDefinition(definition, executed) {
-        throw new Error("This method should be implemented by sub class");
-    }
-    /**
-     * Get an empty definition based on the given context
-     */
-    static getDefinitionFromContextCreation(context) {
-        throw new Error("This method should be implemented by sub class");
-    }
-}
-
-function transformZone(zone, executed) {
-    if (executed.type === "REMOVE_COLUMNS_ROWS") {
-        return reduceZoneOnDeletion(zone, executed.dimension === "COL" ? "left" : "top", executed.elements);
-    }
-    if (executed.type === "ADD_COLUMNS_ROWS") {
-        return expandZoneOnInsertion(zone, executed.dimension === "COL" ? "left" : "top", executed.base, executed.position, executed.quantity);
-    }
-    return { ...zone };
-}
-
-/**
- * This file contains helpers that are common to different charts (mainly
- * line, bar and pie charts)
- */
-/**
- * Adapt ranges of a chart which support DataSet (dataSets and LabelRange).
- */
-function updateChartRangesWithDataSets(getters, applyChange, chartDataSets, chartLabelRange) {
-    let isStale = false;
-    const dataSetsWithUndefined = [];
-    for (let index in chartDataSets) {
-        let ds = chartDataSets[index];
-        if (ds.labelCell) {
-            const labelCell = adaptChartRange(ds.labelCell, applyChange);
-            if (ds.labelCell !== labelCell) {
-                isStale = true;
-                ds = {
-                    ...ds,
-                    labelCell: labelCell,
-                };
-            }
-        }
-        const dataRange = adaptChartRange(ds.dataRange, applyChange);
-        if (dataRange === undefined ||
-            getters.getRangeString(dataRange, dataRange.sheetId) === INCORRECT_RANGE_STRING) {
-            isStale = true;
-            ds = undefined;
-        }
-        else if (dataRange !== ds.dataRange) {
-            isStale = true;
-            ds = {
-                ...ds,
-                dataRange,
-            };
-        }
-        dataSetsWithUndefined[index] = ds;
-    }
-    let labelRange = chartLabelRange;
-    const range = adaptChartRange(labelRange, applyChange);
-    if (range !== labelRange) {
-        isStale = true;
-        labelRange = range;
-    }
-    const dataSets = dataSetsWithUndefined.filter(isDefined$1);
-    return {
-        isStale,
-        dataSets,
-        labelRange,
-    };
-}
-/**
- * Copy the dataSets given. All the ranges which are on sheetIdFrom will target
- * sheetIdTo.
- */
-function copyDataSetsWithNewSheetId(sheetIdFrom, sheetIdTo, dataSets) {
-    return dataSets.map((ds) => {
-        return {
-            dataRange: copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.dataRange),
-            labelCell: ds.labelCell
-                ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.labelCell)
-                : undefined,
-        };
-    });
-}
-/**
- * Copy a range. If the range is on the sheetIdFrom, the range will target
- * sheetIdTo.
- */
-function copyLabelRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
-    return range ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) : undefined;
-}
-/**
- * Adapt a single range of a chart
- */
-function adaptChartRange(range, applyChange) {
-    if (!range) {
-        return undefined;
-    }
-    const change = applyChange(range);
-    switch (change.changeType) {
-        case "NONE":
-            return range;
-        case "REMOVE":
-            return undefined;
-        default:
-            return change.range;
-    }
-}
-/**
- * Create the dataSet objects from xcs
- */
-function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
-    const dataSets = [];
-    for (const sheetXC of dataSetsString) {
-        const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
-        const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
-        if (invalidSheetName || invalidXc) {
-            continue;
-        }
-        // It's a rectangle. We treat all columns (arbitrary) as different data series.
-        if (zone.left !== zone.right && zone.top !== zone.bottom) {
-            if (zone.right === undefined) {
-                // Should never happens because of the allowDispatch of charts, but just making sure
-                continue;
-            }
-            for (let column = zone.left; column <= zone.right; column++) {
-                const columnZone = {
-                    ...zone,
-                    left: column,
-                    right: column,
-                };
-                dataSets.push(createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
-                    ? {
-                        top: columnZone.top,
-                        bottom: columnZone.top,
-                        left: columnZone.left,
-                        right: columnZone.left,
-                    }
-                    : undefined));
-            }
-        }
-        else if (zone.left === zone.right && zone.top === zone.bottom) {
-            // A single cell. If it's only the title, the dataset is not added.
-            if (!dataSetsHaveTitle) {
-                dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
-            }
-        }
-        else {
-            /* 1 row or 1 column */
-            dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
-                ? {
-                    top: zone.top,
-                    bottom: zone.top,
-                    left: zone.left,
-                    right: zone.left,
-                }
-                : undefined));
-        }
-    }
-    return dataSets;
-}
-function createDataSet(getters, sheetId, fullZone, titleZone) {
-    if (fullZone.left !== fullZone.right && fullZone.top !== fullZone.bottom) {
-        throw new Error(`Zone should be a single column or row: ${zoneToXc(fullZone)}`);
-    }
-    if (titleZone) {
-        const dataXC = zoneToXc(fullZone);
-        const labelCellXC = zoneToXc(titleZone);
-        return {
-            labelCell: getters.getRangeFromSheetXC(sheetId, labelCellXC),
-            dataRange: getters.getRangeFromSheetXC(sheetId, dataXC),
-        };
-    }
-    else {
-        return {
-            labelCell: undefined,
-            dataRange: getters.getRangeFromSheetXC(sheetId, zoneToXc(fullZone)),
-        };
-    }
-}
-/**
- * Transform a dataSet to a ExcelDataSet
- */
-function toExcelDataset(getters, ds) {
-    const labelZone = ds.labelCell?.zone;
-    let dataZone = ds.dataRange.zone;
-    if (labelZone) {
-        const { numberOfRows, numberOfCols } = zoneToDimension(dataZone);
-        if (numberOfRows === 1) {
-            dataZone = { ...dataZone, left: dataZone.left + 1 };
-        }
-        else if (numberOfCols === 1) {
-            dataZone = { ...dataZone, top: dataZone.top + 1 };
-        }
-    }
-    const dataRange = ds.dataRange.clone({ zone: dataZone });
-    return {
-        label: ds.labelCell ? getters.getRangeString(ds.labelCell, "forceSheetReference") : undefined,
-        range: getters.getRangeString(dataRange, "forceSheetReference"),
-    };
-}
-function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
-    if (!labelRange)
-        return undefined;
-    let zone = {
-        ...labelRange.zone,
-    };
-    if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
-        zone.top = zone.top + 1;
-    }
-    const range = labelRange.clone({ zone });
-    return getters.getRangeString(range, "forceSheetReference");
-}
-/**
- * Transform a chart definition which supports dataSets (dataSets and LabelRange)
- * with an executed command
- */
-function transformChartDefinitionWithDataSetsWithZone(definition, executed) {
-    let labelRange;
-    if (definition.labelRange) {
-        const labelZone = transformZone(toUnboundedZone(definition.labelRange), executed);
-        labelRange = labelZone ? zoneToXc(labelZone) : undefined;
-    }
-    const dataSets = definition.dataSets
-        .map(toUnboundedZone)
-        .map((zone) => transformZone(zone, executed))
-        .filter(isDefined$1)
-        .map(zoneToXc);
-    return {
-        ...definition,
-        labelRange,
-        dataSets,
-    };
-}
-const GraphColors = [
-    // the same colors as those used in odoo reporting
-    "rgb(31,119,180)",
-    "rgb(255,127,14)",
-    "rgb(174,199,232)",
-    "rgb(255,187,120)",
-    "rgb(44,160,44)",
-    "rgb(152,223,138)",
-    "rgb(214,39,40)",
-    "rgb(255,152,150)",
-    "rgb(148,103,189)",
-    "rgb(197,176,213)",
-    "rgb(140,86,75)",
-    "rgb(196,156,148)",
-    "rgb(227,119,194)",
-    "rgb(247,182,210)",
-    "rgb(127,127,127)",
-    "rgb(199,199,199)",
-    "rgb(188,189,34)",
-    "rgb(219,219,141)",
-    "rgb(23,190,207)",
-    "rgb(158,218,229)",
-];
-class ChartColors {
-    graphColorIndex = 0;
-    next() {
-        return GraphColors[this.graphColorIndex++ % GraphColors.length];
-    }
-}
-/**
- * Choose a font color based on a background color.
- * The font is white with a dark background.
- */
-function chartFontColor(backgroundColor) {
-    if (!backgroundColor) {
-        return "#000000";
-    }
-    return relativeLuminance(backgroundColor) < 0.3 ? "#FFFFFF" : "#000000";
-}
-function checkDataset(definition) {
-    if (definition.dataSets) {
-        const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range)) !== undefined;
-        if (invalidRanges) {
-            return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
-        }
-        const zones = definition.dataSets.map(toUnboundedZone);
-        if (zones.some((zone) => zone.top !== zone.bottom && isFullRow(zone))) {
-            return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
-        }
-    }
-    return "Success" /* CommandResult.Success */;
-}
-function checkLabelRange(definition) {
-    if (definition.labelRange) {
-        const invalidLabels = !rangeReference.test(definition.labelRange || "");
-        if (invalidLabels) {
-            return "InvalidLabelRange" /* CommandResult.InvalidLabelRange */;
-        }
-    }
-    return "Success" /* CommandResult.Success */;
-}
-function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
-    if (!dataSetsHaveTitle)
-        return false;
-    if (!labelRange)
-        return false;
-    if (!dataset)
-        return true;
-    const datasetLength = getZoneArea(dataset.dataRange.zone);
-    const labelLength = getZoneArea(labelRange.zone);
-    if (labelLength < datasetLength) {
-        return false;
-    }
-    return true;
-}
-// ---------------------------------------------------------------------------
-// Scorecard
-// ---------------------------------------------------------------------------
-function getBaselineText(baseline, keyValue, baselineMode, locale) {
-    if (!baseline) {
-        return "";
-    }
-    else if (baselineMode === "text" ||
-        keyValue?.type !== CellValueType.number ||
-        baseline.type !== CellValueType.number) {
-        return baseline.formattedValue;
-    }
-    else {
-        let diff = keyValue.value - baseline.value;
-        if (baselineMode === "percentage" && diff !== 0) {
-            diff = (diff / baseline.value) * 100;
-        }
-        if (baselineMode !== "percentage" && baseline.format) {
-            return formatValue(diff, { format: baseline.format, locale });
-        }
-        const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-        return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
-    }
-}
-function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
-    if (baselineMode === "text" ||
-        baseline?.type !== CellValueType.number ||
-        keyValue?.type !== CellValueType.number) {
-        return undefined;
-    }
-    const diff = keyValue.value - baseline.value;
-    if (diff > 0) {
-        return colorUp;
-    }
-    else if (diff < 0) {
-        return colorDown;
-    }
-    return undefined;
-}
-function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
-    if (baselineMode === "text" ||
-        baseline?.type !== CellValueType.number ||
-        keyValue?.type !== CellValueType.number) {
-        return "neutral";
-    }
-    const diff = keyValue.value - baseline.value;
-    if (diff > 0) {
-        return "up";
-    }
-    else if (diff < 0) {
-        return "down";
-    }
-    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;
-}
-
 const PasteInteractiveContent = {
     wrongPasteSelection: _t("This operation is not allowed with multiple selections."),
     willRemoveExistingMerge: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
     wrongFigurePasteOption: _t("Cannot do a special paste of a figure."),
-    frozenPaneOverlap: _t("Cannot paste merged cells over a frozen pane."),
+    frozenPaneOverlap: _t("This operation is not allowed due to an overlapping frozen pane."),
 };
 function handlePasteResult(env, result) {
     if (!result.isSuccessful) {
@@ -17108,6 +17751,51 @@ function getFillingMode(index) {
         return index - 1;
     }
 }
+function chartToImage(runtime, figure, type) {
+    // wrap the canvas in a div with a fixed size because chart.js would
+    // fill the whole page otherwise
+    const div = document.createElement("div");
+    div.style.width = `${figure.width}px`;
+    div.style.height = `${figure.height}px`;
+    const canvas = document.createElement("canvas");
+    div.append(canvas);
+    canvas.setAttribute("width", figure.width.toString());
+    canvas.setAttribute("height", figure.height.toString());
+    // we have to add the canvas to the DOM otherwise it won't be rendered
+    document.body.append(div);
+    if ("chartJsConfig" in runtime) {
+        runtime.chartJsConfig.plugins = [backgroundColorChartJSPlugin];
+        // @ts-ignore
+        const chart = new window.Chart(canvas, runtime.chartJsConfig);
+        const imgContent = chart.toBase64Image();
+        chart.destroy();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "scorecard") {
+        const design = getScorecardConfiguration(figure, runtime);
+        drawScoreChart(design, canvas);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    return "";
+}
+/**
+ * Custom chart.js plugin to set the background color of the canvas
+ * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+ */
+const backgroundColorChartJSPlugin = {
+    id: "customCanvasBackgroundColor",
+    beforeDraw: (chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+    },
+};
 
 class BarChart extends AbstractChart {
     dataSets;
@@ -18178,172 +18866,6 @@ function createPieChartRuntime(chart, getters) {
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
-function checkKeyValue(definition) {
-    return definition.keyValue && !rangeReference.test(definition.keyValue)
-        ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
-        : "Success" /* CommandResult.Success */;
-}
-function checkBaseline(definition) {
-    return definition.baseline && !rangeReference.test(definition.baseline)
-        ? "InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */
-        : "Success" /* CommandResult.Success */;
-}
-class ScorecardChart extends AbstractChart {
-    keyValue;
-    baseline;
-    baselineMode;
-    baselineDescr;
-    background;
-    baselineColorUp;
-    baselineColorDown;
-    fontColor;
-    type = "scorecard";
-    constructor(definition, sheetId, getters) {
-        super(definition, sheetId, getters);
-        this.keyValue = createRange(getters, sheetId, definition.keyValue);
-        this.baseline = createRange(getters, sheetId, definition.baseline);
-        this.baselineMode = definition.baselineMode;
-        this.baselineDescr = definition.baselineDescr;
-        this.background = definition.background;
-        this.baselineColorUp = definition.baselineColorUp;
-        this.baselineColorDown = definition.baselineColorDown;
-    }
-    static validateChartDefinition(validator, definition) {
-        return validator.checkValidations(definition, checkKeyValue, checkBaseline);
-    }
-    static getDefinitionFromContextCreation(context) {
-        return {
-            background: context.background,
-            type: "scorecard",
-            keyValue: context.range ? context.range[0] : undefined,
-            title: context.title || "",
-            baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
-            baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
-            baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
-            baseline: context.auxiliaryRange || "",
-        };
-    }
-    static transformDefinition(definition, executed) {
-        let baselineZone;
-        let keyValueZone;
-        if (definition.baseline) {
-            baselineZone = transformZone(toUnboundedZone(definition.baseline), executed);
-        }
-        if (definition.keyValue) {
-            keyValueZone = transformZone(toUnboundedZone(definition.keyValue), executed);
-        }
-        return {
-            ...definition,
-            baseline: baselineZone ? zoneToXc(baselineZone) : undefined,
-            keyValue: keyValueZone ? zoneToXc(keyValueZone) : undefined,
-        };
-    }
-    copyForSheetId(sheetId) {
-        const baseline = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.baseline);
-        const keyValue = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.keyValue);
-        const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, sheetId);
-        return new ScorecardChart(definition, sheetId, this.getters);
-    }
-    copyInSheetId(sheetId) {
-        const definition = this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue, sheetId);
-        return new ScorecardChart(definition, sheetId, this.getters);
-    }
-    getDefinition() {
-        return this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue);
-    }
-    getContextCreation() {
-        return {
-            background: this.background,
-            title: this.title,
-            range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
-            auxiliaryRange: this.baseline
-                ? this.getters.getRangeString(this.baseline, this.sheetId)
-                : undefined,
-        };
-    }
-    getDefinitionWithSpecificRanges(baseline, keyValue, targetSheetId) {
-        return {
-            baselineColorDown: this.baselineColorDown,
-            baselineColorUp: this.baselineColorUp,
-            baselineMode: this.baselineMode,
-            title: this.title,
-            type: "scorecard",
-            background: this.background,
-            baseline: baseline
-                ? this.getters.getRangeString(baseline, targetSheetId || this.sheetId)
-                : undefined,
-            baselineDescr: this.baselineDescr,
-            keyValue: keyValue
-                ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
-                : undefined,
-        };
-    }
-    getDefinitionForExcel() {
-        // This kind of graph is not exportable in Excel
-        return undefined;
-    }
-    updateRanges(applyChange) {
-        const baseline = adaptChartRange(this.baseline, applyChange);
-        const keyValue = adaptChartRange(this.keyValue, applyChange);
-        if (this.baseline === baseline && this.keyValue === keyValue) {
-            return this;
-        }
-        const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue);
-        return new ScorecardChart(definition, this.sheetId, this.getters);
-    }
-}
-function createScorecardChartRuntime(chart, getters) {
-    let keyValue = "";
-    let formattedKeyValue = "";
-    let keyValueCell;
-    if (chart.keyValue) {
-        const keyValuePosition = {
-            sheetId: chart.keyValue.sheetId,
-            col: chart.keyValue.zone.left,
-            row: chart.keyValue.zone.top,
-        };
-        keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-        keyValue = String(keyValueCell.value);
-        formattedKeyValue = keyValueCell.formattedValue;
-    }
-    let baselineCell;
-    const baseline = chart.baseline;
-    if (baseline) {
-        const baselinePosition = {
-            sheetId: chart.baseline.sheetId,
-            col: chart.baseline.zone.left,
-            row: chart.baseline.zone.top,
-        };
-        baselineCell = getters.getEvaluatedCell(baselinePosition);
-    }
-    const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
-    const locale = getters.getLocale();
-    return {
-        title: _t(chart.title),
-        keyValue: formattedKeyValue || keyValue,
-        baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
-        baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
-        baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
-        fontColor: chartFontColor(background),
-        background,
-        baselineStyle: chart.baselineMode !== "percentage" && baseline
-            ? getters.getCellStyle({
-                sheetId: baseline.sheetId,
-                col: baseline.zone.left,
-                row: baseline.zone.top,
-            })
-            : undefined,
-        keyValueStyle: chart.keyValue
-            ? getters.getCellStyle({
-                sheetId: chart.keyValue.sheetId,
-                col: chart.keyValue.zone.left,
-                row: chart.keyValue.zone.top,
-            })
-            : undefined,
-    };
-}
-
 /**
  * This registry is intended to map a cell content (raw string) to
  * an instance of a cell.
@@ -18381,11 +18903,11 @@ chartRegistry.add("pie", {
 });
 chartRegistry.add("scorecard", {
     match: (type) => type === "scorecard",
-    createChart: (definition, sheetId, getters) => new ScorecardChart(definition, sheetId, getters),
+    createChart: (definition, sheetId, getters) => new ScorecardChart$1(definition, sheetId, getters),
     getChartRuntime: createScorecardChartRuntime,
-    validateChartDefinition: (validator, definition) => ScorecardChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => ScorecardChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => ScorecardChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: (validator, definition) => ScorecardChart$1.validateChartDefinition(validator, definition),
+    transformDefinition: (definition, executed) => ScorecardChart$1.transformDefinition(definition, executed),
+    getChartDefinitionFromContextCreation: (context) => ScorecardChart$1.getDefinitionFromContextCreation(context),
     name: _t("Scorecard"),
     sequence: 40,
 });
@@ -18404,7 +18926,7 @@ chartComponentRegistry.add("line", ChartJsComponent);
 chartComponentRegistry.add("bar", ChartJsComponent);
 chartComponentRegistry.add("pie", ChartJsComponent);
 chartComponentRegistry.add("gauge", ChartJsComponent);
-chartComponentRegistry.add("scorecard", ScorecardChart$1);
+chartComponentRegistry.add("scorecard", ScorecardChart);
 
 /**
  * Registry intended to support usual currencies. It is mainly used to create
@@ -19146,6 +19668,7 @@ if (window.Chart) {
 // Helpers
 //------------------------------------------------------------------------------
 function setFormatter(env, format) {
+    env.model.dispatch("CANCEL_EDITION");
     env.model.dispatch("SET_FORMATTING", {
         sheetId: env.model.getters.getActiveSheetId(),
         target: env.model.getters.getSelectedZones(),
@@ -20064,105 +20587,6 @@ cellMenuRegistry
     separator: true,
 });
 
-const SORT_TYPES = [
-    CellValueType.number,
-    CellValueType.error,
-    CellValueType.text,
-    CellValueType.boolean,
-];
-function sortCells(cells, sortDirection, emptyCellAsZero) {
-    const cellsWithIndex = cells.map((cell, index) => ({
-        index,
-        type: cell.type,
-        value: cell.value,
-    }));
-    let emptyCells = cellsWithIndex.filter((x) => x.type === CellValueType.empty);
-    let nonEmptyCells = cellsWithIndex.filter((x) => x.type !== CellValueType.empty);
-    if (emptyCellAsZero) {
-        nonEmptyCells.push(...emptyCells.map((emptyCell) => ({ ...emptyCell, type: CellValueType.number, value: 0 })));
-        emptyCells = [];
-    }
-    const inverse = sortDirection === "descending" ? -1 : 1;
-    return nonEmptyCells
-        .sort((left, right) => {
-        let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
-        if (typeOrder === 0) {
-            if (left.type === CellValueType.text || left.type === CellValueType.error) {
-                typeOrder = left.value.localeCompare(right.value);
-            }
-            else
-                typeOrder = left.value - right.value;
-        }
-        return inverse * typeOrder;
-    })
-        .concat(emptyCells);
-}
-function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
-    let result = DispatchResult.Success;
-    //several columns => bypass the contiguity check
-    let multiColumns = zone.right > zone.left;
-    if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
-        multiColumns = false;
-        let table;
-        for (let row = zone.top; row <= zone.bottom; row++) {
-            table = [];
-            for (let col = zone.left; col <= zone.right; col++) {
-                let merge = env.model.getters.getMerge({ sheetId, col, row });
-                if (merge && !table.includes(merge.id.toString())) {
-                    table.push(merge.id.toString());
-                }
-            }
-            if (table.length >= 2) {
-                multiColumns = true;
-                break;
-            }
-        }
-    }
-    const { col, row } = anchor;
-    if (multiColumns) {
-        result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
-    }
-    else {
-        // check contiguity
-        const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
-        if (isEqual(contiguousZone, zone)) {
-            // merge as it is
-            result = env.model.dispatch("SORT_CELLS", {
-                sheetId,
-                col,
-                row,
-                zone,
-                sortDirection,
-            });
-        }
-        else {
-            env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
-                zone = contiguousZone;
-                result = env.model.dispatch("SORT_CELLS", {
-                    sheetId,
-                    col,
-                    row,
-                    zone,
-                    sortDirection,
-                });
-            }, () => {
-                result = env.model.dispatch("SORT_CELLS", {
-                    sheetId,
-                    col,
-                    row,
-                    zone,
-                    sortDirection,
-                });
-            });
-        }
-    }
-    if (result.isCancelledBecause("InvalidSortZone" /* CommandResult.InvalidSortZone */)) {
-        const { col, row } = anchor;
-        env.model.selection.selectZone({ cell: { col, row }, zone });
-        env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
-    }
-}
-
 const AddFilterInteractiveContent = {
     filterOverlap: _t("You cannot create overlapping filters."),
     nonContinuousTargets: _t("A filter can only be created on a continuous selection."),
@@ -20257,109 +20681,126 @@ const splitToColumns = {
     icon: "o-spreadsheet-Icon.SPLIT_TEXT",
 };
 
+/**
+ * Create a format action specification for a given format.
+ * The format can be dynamically computed from the environment.
+ */
+function createFormatActionSpec({ name, format, descriptionValue, }) {
+    const formatCallback = typeof format === "function" ? format : () => format;
+    return {
+        name,
+        description: (env) => formatValue(descriptionValue, {
+            format: formatCallback(env),
+            locale: env.model.getters.getLocale(),
+        }),
+        execute: (env) => setFormatter(env, formatCallback(env)),
+        isActive: (env) => isFormatSelected(env, formatCallback(env)),
+    };
+}
 const formatNumberAutomatic = {
     name: _t("Automatic"),
     execute: (env) => setFormatter(env, ""),
     isActive: (env) => isAutomaticFormatSelected(env),
 };
-const formatNumberNumber = {
+const formatNumberNumber = createFormatActionSpec({
     name: _t("Number"),
-    description: (env) => formatValue(1000.12, {
-        format: "#,##0.00",
-        locale: env.model.getters.getLocale(),
-    }),
-    execute: (env) => setFormatter(env, "#,##0.00"),
-    isActive: (env) => isFormatSelected(env, "#,##0.00"),
-};
+    descriptionValue: 1000.12,
+    format: "#,##0.00",
+});
 const formatPercent = {
     name: _t("Format as percent"),
     execute: FORMAT_PERCENT_ACTION,
     icon: "o-spreadsheet-Icon.PERCENT",
 };
-const formatNumberPercent = {
+const formatNumberPercent = createFormatActionSpec({
     name: _t("Percent"),
-    description: (env) => formatValue(0.1012, {
-        format: "0.00%",
-        locale: env.model.getters.getLocale(),
-    }),
-    execute: FORMAT_PERCENT_ACTION,
-    isActive: (env) => isFormatSelected(env, "0.00%"),
-};
-const formatNumberCurrency = {
+    descriptionValue: 0.1012,
+    format: "0.00%",
+});
+const formatNumberCurrency = createFormatActionSpec({
     name: _t("Currency"),
-    description: (env) => formatValue(1000.12, {
-        format: env.model.config.defaultCurrencyFormat,
-        locale: env.model.getters.getLocale(),
-    }),
-    execute: (env) => setFormatter(env, env.model.config.defaultCurrencyFormat),
-    isActive: (env) => isFormatSelected(env, env.model.config.defaultCurrencyFormat),
-};
+    descriptionValue: 1000.12,
+    format: (env) => env.model.config.defaultCurrencyFormat,
+});
 const formatNumberCurrencyRounded = {
-    name: _t("Currency rounded"),
-    description: (env) => formatValue(1000, {
-        format: roundFormat(env.model.config.defaultCurrencyFormat),
-        locale: env.model.getters.getLocale(),
+    ...createFormatActionSpec({
+        name: _t("Currency rounded"),
+        descriptionValue: 1000,
+        format: (env) => roundFormat(env.model.config.defaultCurrencyFormat),
     }),
-    execute: (env) => setFormatter(env, roundFormat(env.model.config.defaultCurrencyFormat)),
-    isActive: (env) => isFormatSelected(env, roundFormat(env.model.config.defaultCurrencyFormat)),
     isVisible: (env) => {
         const currencyFormat = env.model.config.defaultCurrencyFormat;
         return currencyFormat !== roundFormat(currencyFormat);
     },
 };
+const EXAMPLE_DATE = parseLiteral("2023/09/26 10:43:00 PM", DEFAULT_LOCALE);
 const formatCustomCurrency = {
     name: _t("Custom currency"),
     isVisible: (env) => env.loadCurrencies !== undefined,
     execute: (env) => env.openSidePanel("CustomCurrency", {}),
 };
-const formatNumberDate = {
+const formatNumberDate = createFormatActionSpec({
     name: _t("Date"),
-    description: (env) => {
-        const locale = env.model.getters.getLocale();
-        return formatValue(parseLiteral("9/26/2023", DEFAULT_LOCALE), {
-            format: locale.dateFormat,
-            locale,
-        });
-    },
-    execute: (env) => setFormatter(env, env.model.getters.getLocale().dateFormat),
-    isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().dateFormat),
-};
-const formatNumberTime = {
+    descriptionValue: EXAMPLE_DATE,
+    format: (env) => env.model.getters.getLocale().dateFormat,
+});
+const formatNumberTime = createFormatActionSpec({
     name: _t("Time"),
-    description: (env) => {
-        const locale = env.model.getters.getLocale();
-        return formatValue(parseLiteral("9/26/2023 10:43:00 PM", DEFAULT_LOCALE), {
-            format: locale.timeFormat,
-            locale,
-        });
-    },
-    execute: (env) => setFormatter(env, env.model.getters.getLocale().timeFormat),
-    isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().timeFormat),
-};
-const formatNumberDateTime = {
+    descriptionValue: EXAMPLE_DATE,
+    format: (env) => env.model.getters.getLocale().timeFormat,
+});
+const formatNumberDateTime = createFormatActionSpec({
     name: _t("Date time"),
-    description: (env) => {
-        const locale = env.model.getters.getLocale();
-        return formatValue(parseLiteral("9/26/2023 22:43:00", DEFAULT_LOCALE), {
-            format: locale.dateFormat + " " + locale.timeFormat,
-            locale,
-        });
-    },
-    execute: (env) => {
-        const locale = env.model.getters.getLocale();
-        setFormatter(env, locale.dateFormat + " " + locale.timeFormat);
-    },
-    isActive: (env) => {
+    descriptionValue: EXAMPLE_DATE,
+    format: (env) => {
         const locale = env.model.getters.getLocale();
-        return isFormatSelected(env, locale.dateFormat + " " + locale.timeFormat);
+        return locale.dateFormat + " " + locale.timeFormat;
     },
-};
-const formatNumberDuration = {
+});
+const formatNumberDuration = createFormatActionSpec({
     name: _t("Duration"),
-    description: "27:51:38",
-    execute: (env) => setFormatter(env, "hhhh:mm:ss"),
-    isActive: (env) => isFormatSelected(env, "hhhh:mm:ss"),
-};
+    descriptionValue: "27:51:38",
+    format: "hhhh:mm:ss",
+});
+const moreFormats = {
+    name: _t("More date formats"),
+    execute: (env) => env.openSidePanel("MoreFormats", {}),
+};
+const formatNumberFullDateTime = createFormatActionSpec({
+    name: _t("Full date time"),
+    format: "dddd d mmmm yyyy hh:mm:ss a",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberFullWeekDayAndMonth = createFormatActionSpec({
+    name: _t("Full week day and month"),
+    format: "dddd d mmmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberDayAndFullMonth = createFormatActionSpec({
+    name: _t("Day and full month"),
+    format: "d mmmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberShortWeekDay = createFormatActionSpec({
+    name: _t("Short week day"),
+    format: "ddd d mmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberDayAndShortMonth = createFormatActionSpec({
+    name: _t("Day and short month"),
+    format: "d mmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberFullMonth = createFormatActionSpec({
+    name: _t("Full month"),
+    format: "mmmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
+const formatNumberShortMonth = createFormatActionSpec({
+    name: _t("Short month"),
+    format: "mmm yyyy",
+    descriptionValue: EXAMPLE_DATE,
+});
 const incraseDecimalPlaces = {
     name: _t("Increase decimal places"),
     icon: "o-spreadsheet-Icon.INCREASE_DECIMAL",
@@ -20612,9 +21053,16 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   formatNumberCurrencyRounded: formatNumberCurrencyRounded,
   formatNumberDate: formatNumberDate,
   formatNumberDateTime: formatNumberDateTime,
+  formatNumberDayAndFullMonth: formatNumberDayAndFullMonth,
+  formatNumberDayAndShortMonth: formatNumberDayAndShortMonth,
   formatNumberDuration: formatNumberDuration,
+  formatNumberFullDateTime: formatNumberFullDateTime,
+  formatNumberFullMonth: formatNumberFullMonth,
+  formatNumberFullWeekDayAndMonth: formatNumberFullWeekDayAndMonth,
   formatNumberNumber: formatNumberNumber,
   formatNumberPercent: formatNumberPercent,
+  formatNumberShortMonth: formatNumberShortMonth,
+  formatNumberShortWeekDay: formatNumberShortWeekDay,
   formatNumberTime: formatNumberTime,
   formatPercent: formatPercent,
   formatStrikethrough: formatStrikethrough,
@@ -20625,6 +21073,7 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   formatWrappingOverflow: formatWrappingOverflow,
   formatWrappingWrap: formatWrappingWrap,
   incraseDecimalPlaces: incraseDecimalPlaces,
+  moreFormats: moreFormats,
   textColor: textColor
 });
 
@@ -21082,6 +21531,10 @@ numberFormatMenuRegistry
     ...formatNumberDuration,
     sequence: 100,
     separator: true,
+})
+    .add("more_formats", {
+    ...moreFormats,
+    sequence: 110,
 });
 const formatNumberMenuItemSpec = {
     name: _t("More formats"),
@@ -22983,7 +23436,7 @@ class ChartPanel extends Component {
         });
     }
     canUpdateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId) {
+        if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
             return;
         }
         const definition = {
@@ -24350,6 +24803,44 @@ FindAndReplacePanel.props = {
     onCloseSidePanel: Function,
 };
 
+css /* scss */ `
+  .o-more-formats-panel {
+    .format-preview {
+      height: 48px;
+      background-color: white;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .check-icon {
+      width: 24px;
+    }
+  }
+`;
+const DATE_FORMAT_ACTIONS = createActions([
+    formatNumberFullDateTime,
+    formatNumberFullWeekDayAndMonth,
+    formatNumberDayAndFullMonth,
+    formatNumberShortWeekDay,
+    formatNumberDayAndShortMonth,
+    formatNumberFullMonth,
+    formatNumberShortMonth,
+    formatNumberDate,
+    formatNumberTime,
+    formatNumberDateTime,
+    formatNumberDuration,
+]);
+class MoreFormatsPanel extends Component {
+    static template = "o-spreadsheet-MoreFormatsPanel";
+    get dateFormatsActions() {
+        return DATE_FORMAT_ACTIONS;
+    }
+}
+MoreFormatsPanel.props = {
+    onCloseSidePanel: Function,
+};
+
 css /* scss */ `
   .o-checkbox-selection {
     height: 150px;
@@ -25807,6 +26298,10 @@ sidePanelRegistry.add("DataValidation", {
     title: _t("Data validation"),
     Body: DataValidationPanel,
 });
+sidePanelRegistry.add("MoreFormats", {
+    title: _t("More date formats"),
+    Body: MoreFormatsPanel,
+});
 
 class TopBarComponentRegistry extends Registry {
     mapping = {};
@@ -26274,7 +26769,6 @@ css /* scss */ `
     border-top-right-radius: 4px;
     font-size: ${DEFAULT_FONT_SIZE};
     color: white;
-    opacity: 0;
     pointer-events: none;
   }
 `;
@@ -26294,7 +26788,6 @@ class ClientTag extends Component {
             left: `${x - 1}px`,
             border: `1px solid ${color}`,
             "background-color": color,
-            opacity: this.props.active ? "opacity:1 !important" : undefined,
         });
     }
 }
@@ -26306,16 +26799,31 @@ ClientTag.props = {
     row: Number,
 };
 
+function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
+    const pendingHtmlContent = [];
+    pattern = pattern.toLowerCase();
+    for (const patternChar of pattern) {
+        const index = value.toLocaleLowerCase().indexOf(patternChar);
+        if (index === -1) {
+            continue;
+        }
+        pendingHtmlContent.push({ value: value.slice(0, index), color: "" }, { value: value[index], color: highlightColor, class: className });
+        value = value.slice(index + 1);
+    }
+    pendingHtmlContent.push({ value });
+    const htmlContent = pendingHtmlContent.filter((content) => content.value);
+    return htmlContent;
+}
+
 css /* scss */ `
   .o-autocomplete-dropdown {
     pointer-events: auto;
+    cursor: pointer;
     background-color: #fff;
     max-width: 400px;
-    & > div:hover {
-      background-color: #f2f2f2;
-    }
+
     .o-autocomplete-value-focus {
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: #f2f2f2;
     }
 
     & > div {
@@ -26333,7 +26841,9 @@ class TextValueProvider extends Component {
 TextValueProvider.props = {
     values: Array,
     selectedIndex: { type: Number, optional: true },
+    getHtmlContent: Function,
     onValueSelected: Function,
+    onValueHovered: Function,
 };
 
 class ContentEditableHelper {
@@ -26682,8 +27192,8 @@ css /* scss */ `
     .o-formula-assistant-focus {
       div:first-child,
       span {
-        color: purple;
-        text-shadow: 0px 0px 1px purple;
+        color: ${COMPOSER_ASSISTANT_COLOR};
+        text-shadow: 0px 0px 1px ${COMPOSER_ASSISTANT_COLOR};
       }
       div:last-child {
         color: black;
@@ -26728,6 +27238,7 @@ FunctionDescriptionProvider.props = {
 
 const functions = functionRegistry.content;
 const ASSISTANT_WIDTH = 300;
+const AUTOCOMPLETE_ENTRIES = 10;
 const selectionIndicatorClass = "selector-flag";
 const selectionIndicatorColor = "#a9a9a9";
 const selectionIndicator = "␣";
@@ -26777,6 +27288,13 @@ css /* scss */ `
       position: absolute;
       margin: 1px 4px;
       pointer-events: none;
+
+      .o-semi-bold {
+        /** FIXME: to remove in favor of Bootstrap
+        * 'fw-semibold' when we upgrade to Bootstrap 5.2
+        */
+        font-weight: 600 !important;
+      }
     }
   }
 `;
@@ -26797,6 +27315,7 @@ class Composer extends Component {
         values: [],
         selectedIndex: undefined,
         type: "function",
+        getHtmlContent: () => [],
     });
     functionDescriptionState = useState({
         showDescription: false,
@@ -27039,24 +27558,27 @@ class Composer extends Component {
                 text,
                 description,
             };
+        })
+            .sort((a, b) => {
+            return a.text.length - b.text.length || a.text.localeCompare(b.text);
         });
         if (searchTerm) {
-            values = fuzzyLookup(searchTerm, values, (t) => t.text);
-        }
-        else {
-            // alphabetical order
-            values = values.sort((a, b) => a.text.localeCompare(b.text));
+            values = fuzzyLookup(searchTerm, values, (t) => t.text).slice(0, AUTOCOMPLETE_ENTRIES);
         }
-        this.autoCompleteState.values = values.slice(0, 10);
+        this.autoCompleteState.values = values.slice(0, AUTOCOMPLETE_ENTRIES);
+        this.autoCompleteState.getHtmlContent = (value) => getHtmlContentFromPattern(searchTerm, value, COMPOSER_ASSISTANT_COLOR, "o-semi-bold");
         this.autoCompleteState.selectedIndex = 0;
     }
+    updateAutoCompleteIndex(index) {
+        this.autoCompleteState.selectedIndex = clip(0, index, 10);
+    }
     /**
      * This is required to ensure the content helper selection is
      * properly updated on "onclick" events. Depending on the browser,
      * the callback onClick from the composer will be executed before
      * the selection was updated in the dom, which means we capture an
      * wrong selection which is then forced upon the content helper on
-     * patchContent.
+     * processContent.
      */
     onMousedown(ev) {
         if (ev.button > 0) {
@@ -27326,6 +27848,7 @@ class Composer extends Component {
         this.autoCompleteState.type = "dataValidation";
         this.autoCompleteState.selectedIndex = undefined;
         this.autoCompleteState.values = values.map((value) => ({ text: value, description: "" }));
+        this.autoCompleteState.getHtmlContent = (value) => [{ value }];
     }
 }
 Composer.props = {
@@ -28722,7 +29245,14 @@ class AbstractResizer extends Component {
             return;
         }
         if (this.state.waitingForMove === true) {
-            this.startMovement(ev);
+            if (!this.env.model.getters.isGridSelectionActive()) {
+                this._selectElement(index, false);
+            }
+            else {
+                // FIXME: Consider reintroducing this feature for all type of selection if we find
+                // a way to have the grid selection follow the other selections evolution
+                this.startMovement(ev);
+            }
             return;
         }
         if (this.env.model.getters.getEditionMode() === "editing") {
@@ -29803,6 +30333,8 @@ class Grid extends Component {
             const position = this.env.model.getters.getActivePosition();
             this.env.model.selection.selectZone({ cell: position, zone: newZone });
         },
+        "CTRL+D": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ABOVE"),
+        "CTRL+R": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ON_LEFT"),
         "CTRL+SHIFT+E": () => this.setHorizontalAlign("center"),
         "CTRL+SHIFT+L": () => this.setHorizontalAlign("left"),
         "CTRL+SHIFT+R": () => this.setHorizontalAlign("right"),
@@ -32237,12 +32769,15 @@ function createXMLFile(doc, path, contentType) {
     };
 }
 function xmlEscape(str) {
-    return String(str)
+    return (String(str)
         .replace(/\&/g, "&amp;")
         .replace(/\</g, "&lt;")
         .replace(/\>/g, "&gt;")
         .replace(/\"/g, "&quot;")
-        .replace(/\'/g, "&apos;");
+        .replace(/\'/g, "&apos;")
+        // Delete all ASCII control characters except for TAB (\x09), LF (\x0A) and CR (\x0D)
+        // They are not valid at all in XML 1.0 (even escaped)
+        .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, ""));
 }
 function formatAttributes(attrs) {
     return new XMLString(attrs.map(([key, val]) => `${key}="${xmlEscape(val)}"`).join(" "));
@@ -34970,10 +35505,11 @@ class CellPlugin extends CorePlugin {
      * Reconstructs the original formula string based on a normalized form and its dependencies
      */
     getFormulaCellContent(sheetId, cell, dependencies) {
-        const ranges = dependencies || [...cell.dependencies];
+        const ranges = dependencies || cell.dependencies;
+        let rangeIndex = 0;
         return concat(cell.compiledFormula.tokens.map((token) => {
             if (token.type === "REFERENCE") {
-                const range = ranges.shift();
+                const range = ranges[rangeIndex++];
                 return this.getters.getRangeString(range, sheetId);
             }
             return token.value;
@@ -35351,7 +35887,7 @@ class ChartPlugin extends CorePlugin {
     export(data) {
         if (data.sheets) {
             for (let sheet of data.sheets) {
-                // TODO This code is false, if two plugins want ot insert figures on the sheet, it will crash !
+                // TODO This code is false, if two plugins want to insert figures on the sheet, it will crash !
                 const sheetFigures = this.getters.getFigures(sheet.id);
                 const figures = [];
                 for (let sheetFigure of sheetFigures) {
@@ -35371,24 +35907,6 @@ class ChartPlugin extends CorePlugin {
             }
         }
     }
-    exportForExcel(data) {
-        for (let sheet of data.sheets) {
-            const sheetFigures = this.getters.getFigures(sheet.id);
-            const figures = [];
-            for (let figure of sheetFigures) {
-                if (figure && figure.tag === "chart") {
-                    const figureData = this.charts[figure.id]?.getDefinitionForExcel();
-                    if (figureData) {
-                        figures.push({
-                            ...figure,
-                            data: figureData,
-                        });
-                    }
-                }
-            }
-            sheet.charts = figures;
-        }
-    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -36910,6 +37428,9 @@ class ImagePlugin extends CorePlugin {
     }
     exportForExcel(data) {
         for (const sheet of data.sheets) {
+            if (!sheet.images) {
+                sheet.images = [];
+            }
             const figures = this.getters.getFigures(sheet.id);
             const images = [];
             for (const figure of figures) {
@@ -36923,7 +37444,7 @@ class ImagePlugin extends CorePlugin {
                     }
                 }
             }
-            sheet.images = images;
+            sheet.images = [...sheet.images, ...images];
         }
     }
     getAllImages() {
@@ -39187,7 +39708,7 @@ class CompilationParametersBuilder {
         const evaluatedCell = this.getEvaluatedCell(position);
         if (evaluatedCell.type === CellValueType.empty) {
             const cell = this.getters.getCell(position);
-            if (!cell || cell.content === "") {
+            if (!cell || (!cell.isFormula && cell.content === "")) {
                 return undefined;
             }
         }
@@ -39293,9 +39814,9 @@ class FormulaDependencyGraph {
      */
     getCellsDependingOn(positionIds) {
         const visited = new JetSet();
-        const queue = Array.from(positionIds);
+        const queue = Array.from(positionIds).reverse();
         while (queue.length > 0) {
-            const node = queue.shift();
+            const node = queue.pop();
             visited.add(node);
             const adjacentNodes = this.inverseDependencies.get(node) || new Set();
             for (const adjacentNode of adjacentNodes) {
@@ -39400,7 +39921,7 @@ class Evaluator {
     constructor(context, getters) {
         this.context = context;
         this.getters = getters;
-        this.compilationParams = buildCompilationParameters(context, getters, (position) => this.computeCell(this.encodePosition(position)));
+        this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
     }
     getEvaluatedCell(position) {
         return (this.evaluatedCells.get(this.encodePosition(position)) ||
@@ -39428,7 +39949,7 @@ class Evaluator {
         this.formulaDependencies().addDependencies(positionId, dependencies);
     }
     updateCompilationParameters() {
-        this.compilationParams = buildCompilationParameters(this.context, this.getters, (position) => this.computeCell(this.encodePosition(position)));
+        this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
     }
     evaluateCells(positions) {
         const cells = positions.map(this.encodePosition.bind(this));
@@ -39544,15 +40065,21 @@ class Evaluator {
             this.cellsBeingComputed.delete(cellId);
         }
     }
+    computeAndSave(position) {
+        const positionId = this.encodePosition(position);
+        const evaluatedCell = this.computeCell(positionId);
+        if (!this.evaluatedCells.has(positionId)) {
+            this.setEvaluatedCell(positionId, evaluatedCell);
+        }
+        return evaluatedCell;
+    }
     handleError(e, cell) {
-        if (!(e instanceof Error)) {
-            e = new Error(e);
+        if (!(e instanceof EvaluationError)) {
+            e = new EvaluationError(CellErrorType.GenericError, e.message);
         }
-        const msg = e?.errorType || CellErrorType.GenericError;
-        // apply function name
         const __lastFnCalled = this.compilationParams[2].__lastFnCalled || "";
-        const error = new EvaluationError(msg, e.message.replace("[[FUNCTION_NAME]]", __lastFnCalled), e.logLevel !== undefined ? e.logLevel : CellErrorLevel.error);
-        return errorCell(cell.content, error);
+        e.message = e.message.replace("[[FUNCTION_NAME]]", __lastFnCalled);
+        return errorCell(e);
     }
     computeFormulaCell(cellData) {
         const cellId = cellData.id;
@@ -39860,6 +40387,7 @@ class EvaluationPlugin extends UIPlugin {
     config;
     static getters = [
         "evaluateFormula",
+        "getCorrespondingFormulaCell",
         "getRangeFormattedValues",
         "getRangeValues",
         "getRangeFormats",
@@ -40256,6 +40784,47 @@ class EvaluationChartPlugin extends UIPlugin {
         const style = this.getters.getCellComputedStyle({ sheetId, col, row });
         return style.fillColor || BACKGROUND_CHART_COLOR;
     }
+    exportForExcel(data) {
+        for (const sheet of data.sheets) {
+            if (!sheet.images) {
+                sheet.images = [];
+            }
+            const sheetFigures = this.getters.getFigures(sheet.id);
+            const figures = [];
+            for (const figure of sheetFigures) {
+                if (!figure || figure.tag !== "chart") {
+                    continue;
+                }
+                const figureId = figure.id;
+                const figureData = this.getters.getChart(figureId)?.getDefinitionForExcel();
+                if (figureData) {
+                    figures.push({
+                        ...figure,
+                        data: figureData,
+                    });
+                }
+                else {
+                    const chart = this.getters.getChart(figureId);
+                    if (!chart) {
+                        continue;
+                    }
+                    const type = this.getters.getChartType(figureId);
+                    const runtime = this.getters.getChartRuntime(figureId);
+                    const img = chartToImage(runtime, figure, type);
+                    sheet.images.push({
+                        ...figure,
+                        tag: "image",
+                        data: {
+                            mimetype: "image/png",
+                            path: img,
+                            size: { width: figure.width, height: figure.height },
+                        },
+                    });
+                }
+            }
+            sheet.charts = figures;
+        }
+    }
 }
 
 class EvaluationConditionalFormatPlugin extends UIPlugin {
@@ -40395,7 +40964,7 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
                 return percentile(rangeValues, Number(threshold.value) / 100, true);
             case "formula":
                 const value = threshold.value && this.getters.evaluateFormula(sheetId, threshold.value);
-                return !(value instanceof Promise) ? value : null;
+                return typeof value === "number" ? value : null;
             default:
                 return null;
         }
@@ -40521,10 +41090,13 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
             }
             const [value0, value1] = rule.values.map((val) => {
                 if (val.startsWith("=")) {
-                    return this.getters.evaluateFormula(target.sheetId, val);
+                    return this.getters.evaluateFormula(target.sheetId, val) ?? "";
                 }
                 return parseLiteral(val, DEFAULT_LOCALE);
             });
+            if (isMatrix(value0) || isMatrix(value1)) {
+                return false;
+            }
             switch (rule.operator) {
                 case "IsEmpty":
                     return cell.value.toString().trim() === "";
@@ -40713,7 +41285,7 @@ class EvaluationDataValidationPlugin extends UIPlugin {
                 const formula = compile(value);
                 const translatedFormula = this.getters.getTranslatedCellFormula(sheetId, offset.col, offset.row, formula, formula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)));
                 const evaluated = this.getters.evaluateFormula(sheetId, translatedFormula);
-                return evaluated ? evaluated.toString() : "";
+                return evaluated && !isMatrix(evaluated) ? evaluated.toString() : "";
             }
             catch (e) {
                 return e instanceof EvaluationError ? e.errorType : CellErrorType.GenericError;
@@ -40722,8 +41294,8 @@ class EvaluationDataValidationPlugin extends UIPlugin {
     }
 }
 
-class UIRowSizePlugin extends UIPlugin {
-    static getters = ["getRowSize"];
+class HeaderSizeUIPlugin extends UIPlugin {
+    static getters = ["getRowSize", "getHeaderSize"];
     tallestCellInRow = {};
     ctx = document.createElement("canvas").getContext("2d");
     handle(cmd) {
@@ -40802,6 +41374,11 @@ class UIRowSizePlugin extends UIPlugin {
             this.tallestCellInRow[sheetId][row]?.size ??
             DEFAULT_CELL_HEIGHT);
     }
+    getHeaderSize(sheetId, dimension, index) {
+        return dimension === "ROW"
+            ? this.getRowSize(sheetId, index)
+            : this.getters.getColSize(sheetId, index);
+    }
     updateRowSizeForCellChange(sheetId, row, col) {
         const tallestCellInRow = this.tallestCellInRow[sheetId]?.[row];
         if (tallestCellInRow?.cell.col === col) {
@@ -41872,7 +42449,7 @@ const transformations = [
     { match: isZoneDependent, fn: transformZoneDependentCommand },
     { match: isPositionDependent, fn: transformPosition },
     { match: isHeadersDependant, fn: transformHeaders },
-    { match: isRangeDependant, fn: transformRangeData },
+    { match: isRangeDependant, fn: transformRangesDependentCommand },
 ];
 /**
  * Get the result of applying the operation transformations on the given command
@@ -41968,23 +42545,13 @@ function transformZoneDependentCommand(cmd, executed) {
     }
     return "IGNORE_COMMAND";
 }
-function transformRangeData(toTransform, executed) {
+function transformRangesDependentCommand(toTransform, executed) {
     if (!("sheetId" in executed)) {
         return toTransform;
     }
-    const ranges = [];
-    const deletedSheet = executed.type === "DELETE_SHEET" && executed.sheetId;
-    for (const range of toTransform.ranges) {
-        if (range._sheetId !== executed.sheetId) {
-            ranges.push({ ...range, _zone: range._zone });
-        }
-        else {
-            const newZone = transformZone(range._zone, executed);
-            if (newZone && deletedSheet !== range._sheetId) {
-                ranges.push({ ...range, _zone: newZone });
-            }
-        }
-    }
+    const ranges = toTransform.ranges
+        .map((range) => transformRangeData(range, executed))
+        .filter(isDefined$1);
     if (!ranges.length) {
         return "IGNORE_COMMAND";
     }
@@ -43129,6 +43696,10 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
         if (!newRangesXC) {
             return;
         }
+        if (newRangesXC.length === 0) {
+            this.dispatch("REMOVE_CONDITIONAL_FORMAT", { id: cf.id, sheetId });
+            return;
+        }
         this.dispatch("ADD_CONDITIONAL_FORMAT", {
             cf: {
                 id: cf.id,
@@ -44044,7 +44615,7 @@ class RendererPlugin extends UIPlugin {
         }
     }
     drawTexts(renderingContext) {
-        const { ctx, thinLineWidth } = renderingContext;
+        const { ctx } = renderingContext;
         ctx.textBaseline = "top";
         let currentFont;
         for (let box of this.boxes) {
@@ -44089,23 +44660,7 @@ class RendererPlugin extends UIPlugin {
                 // use the horizontal and the vertical start points to:
                 // fill text / fill strikethrough / fill underline
                 for (let brokenLine of box.content.textLines) {
-                    ctx.fillText(brokenLine, Math.round(x), Math.round(y));
-                    if (style.strikethrough || style.underline) {
-                        const lineWidth = computeTextWidth(ctx, brokenLine, style);
-                        let _x = x;
-                        if (align === "right") {
-                            _x -= lineWidth;
-                        }
-                        else if (align === "center") {
-                            _x -= lineWidth / 2;
-                        }
-                        if (style.strikethrough) {
-                            ctx.fillRect(_x, y + textLineHeight / 2, lineWidth, 2.6 * thinLineWidth);
-                        }
-                        if (style.underline) {
-                            ctx.fillRect(_x, y + textLineHeight + 1, lineWidth, 1.3 * thinLineWidth);
-                        }
-                    }
+                    drawDecoratedText(ctx, brokenLine, { x: Math.round(x), y: Math.round(y) }, style.underline, style.strikethrough);
                     y += MIN_CELL_TEXT_MARGIN + textLineHeight;
                 }
                 if (box.clipRect) {
@@ -45229,9 +45784,6 @@ class SheetUIPlugin extends UIPlugin {
         "getTextWidth",
         "getCellText",
         "getCellMultiLineText",
-        "getColDimensions",
-        "getRowDimensions",
-        "getColRowOffset",
     ];
     ctx = document.createElement("canvas").getContext("2d");
     // ---------------------------------------------------------------------------
@@ -45316,55 +45868,6 @@ class SheetUIPlugin extends UIPlugin {
         const text = this.getters.getCellText(position, this.getters.shouldShowFormulas());
         return splitTextToWidth(this.ctx, text, style, width);
     }
-    /**
-     * Returns the size, start and end coordinates of a column on an unfolded sheet
-     */
-    getColDimensions(sheetId, col) {
-        const start = this.getColRowOffset("COL", 0, col, sheetId);
-        const size = this.getters.getColSize(sheetId, col);
-        const isColHidden = this.getters.isColHidden(sheetId, col);
-        return {
-            start,
-            size,
-            end: start + (isColHidden ? 0 : size),
-        };
-    }
-    /**
-     * Returns the size, start and end coordinates of a row an unfolded sheet
-     */
-    getRowDimensions(sheetId, row) {
-        const start = this.getColRowOffset("ROW", 0, row, sheetId);
-        const size = this.getters.getRowSize(sheetId, row);
-        const isRowHidden = this.getters.isRowHidden(sheetId, row);
-        return {
-            start,
-            size: size,
-            end: start + (isRowHidden ? 0 : size),
-        };
-    }
-    /**
-     * Returns the offset of a header (determined by the dimension) at the given index
-     * based on the referenceIndex given. If start === 0, this method will return
-     * the start attribute of the header.
-     *
-     * i.e. The size from A to B is the distance between A.start and B.end
-     */
-    getColRowOffset(dimension, referenceIndex, index, sheetId = this.getters.getActiveSheetId()) {
-        if (index < referenceIndex) {
-            return -this.getColRowOffset(dimension, index, referenceIndex);
-        }
-        let offset = 0;
-        for (let i = referenceIndex; i < index; i++) {
-            if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
-                continue;
-            }
-            offset +=
-                dimension === "COL"
-                    ? this.getters.getColSize(sheetId, i)
-                    : this.getters.getRowSize(sheetId, i);
-        }
-        return offset;
-    }
     doesCellHaveGridIcon(position) {
         const isFilterHeader = this.getters.isFilterHeader(position);
         const hasListIcon = !this.getters.isReadonly() && this.getters.cellHasListDataValidationIcon(position);
@@ -46190,6 +46693,20 @@ class ClipboardPlugin extends UIPlugin {
                 const state = new ClipboardOsState(cmd.text, this.getters, this.dispatch, this.selection);
                 return state.isPasteAllowed(cmd.target, { pasteOption: cmd.pasteOption });
             }
+            case "COPY_PASTE_CELLS_ABOVE": {
+                const zones = this.getters.getSelectedZones();
+                if (zones.length > 1 || (zones[0].top === 0 && zones[0].bottom === 0)) {
+                    return "InvalidCopyPasteSelection" /* CommandResult.InvalidCopyPasteSelection */;
+                }
+                break;
+            }
+            case "COPY_PASTE_CELLS_ON_LEFT": {
+                const zones = this.getters.getSelectedZones();
+                if (zones.length > 1 || (zones[0].left === 0 && zones[0].right === 0)) {
+                    return "InvalidCopyPasteSelection" /* CommandResult.InvalidCopyPasteSelection */;
+                }
+                break;
+            }
             case "INSERT_CELL": {
                 const { cut, paste } = this.getInsertCellsTargets(cmd.zone, cmd.shiftDimension);
                 const state = this.getClipboardStateForCopyCells(cut, "CUT");
@@ -46229,6 +46746,40 @@ class ClipboardPlugin extends UIPlugin {
                     this.status = "invisible";
                 }
                 break;
+            case "COPY_PASTE_CELLS_ABOVE":
+                {
+                    const zone = this.getters.getSelectedZone();
+                    const multipleRowsInSelection = zone.top !== zone.bottom;
+                    const copyTarget = {
+                        ...zone,
+                        bottom: multipleRowsInSelection ? zone.top : zone.top - 1,
+                        top: multipleRowsInSelection ? zone.top : zone.top - 1,
+                    };
+                    const state = this.getClipboardStateForCopyCells([copyTarget], "COPY");
+                    state.paste([zone], {
+                        pasteOption: undefined,
+                        shouldPasteCF: true,
+                        selectTarget: true,
+                    });
+                }
+                break;
+            case "COPY_PASTE_CELLS_ON_LEFT":
+                {
+                    const zone = this.getters.getSelectedZone();
+                    const multipleColsInSelection = zone.left !== zone.right;
+                    const copyTarget = {
+                        ...zone,
+                        right: multipleColsInSelection ? zone.left : zone.left - 1,
+                        left: multipleColsInSelection ? zone.left : zone.left - 1,
+                    };
+                    const state = this.getClipboardStateForCopyCells([copyTarget], "COPY");
+                    state.paste([zone], {
+                        pasteOption: undefined,
+                        shouldPasteCF: true,
+                        selectTarget: true,
+                    });
+                }
+                break;
             case "CLEAN_CLIPBOARD_HIGHLIGHT":
                 this.status = "invisible";
                 break;
@@ -46908,7 +47459,15 @@ class EditionPlugin extends UIPlugin {
                 return cell?.content || "";
             case CellValueType.number:
                 if (format && isDateTimeFormat(format)) {
-                    return formattedValue;
+                    if (parseDateTime(formattedValue, locale) !== null) {
+                        // formatted string can be parsed again
+                        return formattedValue;
+                    }
+                    // display a simplified and parsable string otherwise
+                    const timeFormat = Number.isInteger(value)
+                        ? locale.dateFormat
+                        : locale.dateFormat + " " + locale.timeFormat;
+                    return formatValue(value, { locale, format: timeFormat });
                 }
                 return this.numberComposerContent(value, format, locale);
         }
@@ -47174,6 +47733,9 @@ class EditionPlugin extends UIPlugin {
             const cellValue = content.startsWith("=")
                 ? this.getters.evaluateFormula(this.sheetId, content)
                 : parseLiteral(content, this.getters.getLocale());
+            if (isMatrix(cellValue)) {
+                return "Success" /* CommandResult.Success */;
+            }
             const validationResult = this.getters.getValidationResultForCellValue(cellValue, cellPosition);
             if (!validationResult.isValid && validationResult.rule.isBlocking) {
                 return "BlockingValidationRule" /* CommandResult.BlockingValidationRule */;
@@ -47463,6 +48025,7 @@ class GridSelectionPlugin extends UIPlugin {
         "isSingleColSelected",
         "getElementsFromSelection",
         "tryGetActiveSheetId",
+        "isGridSelectionActive",
     ];
     gridSelection = {
         anchor: {
@@ -47548,10 +48111,7 @@ class GridSelectionPlugin extends UIPlugin {
         switch (cmd.type) {
             case "START":
                 const firstSheetId = this.getters.getVisibleSheetIds()[0];
-                this.dispatch("ACTIVATE_SHEET", {
-                    sheetIdTo: firstSheetId,
-                    sheetIdFrom: firstSheetId,
-                });
+                this.activateSheet(firstSheetId, firstSheetId);
                 const { col, row } = this.getters.getNextVisibleCellPosition({
                     sheetId: firstSheetId,
                     col: 0,
@@ -47564,25 +48124,7 @@ class GridSelectionPlugin extends UIPlugin {
                 this.moveClient({ sheetId: firstSheetId, col: 0, row: 0 });
                 break;
             case "ACTIVATE_SHEET": {
-                if (!this.getters.isSheetVisible(cmd.sheetIdTo)) {
-                    this.dispatch("SHOW_SHEET", { sheetId: cmd.sheetIdTo });
-                }
-                this.setActiveSheet(cmd.sheetIdTo);
-                this.sheetsData[cmd.sheetIdFrom] = {
-                    gridSelection: deepCopy(this.gridSelection),
-                };
-                if (cmd.sheetIdTo in this.sheetsData) {
-                    Object.assign(this, this.sheetsData[cmd.sheetIdTo]);
-                    this.selection.resetDefaultAnchor(this, deepCopy(this.gridSelection.anchor));
-                }
-                else {
-                    const { col, row } = this.getters.getNextVisibleCellPosition({
-                        sheetId: cmd.sheetIdTo,
-                        col: 0,
-                        row: 0,
-                    });
-                    this.selectCell(col, row);
-                }
+                this.activateSheet(cmd.sheetIdFrom, cmd.sheetIdTo);
                 break;
             }
             case "REMOVE_COLUMNS_ROWS": {
@@ -47672,6 +48214,9 @@ class GridSelectionPlugin extends UIPlugin {
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
+    isGridSelectionActive() {
+        return this.selection.isListening(this);
+    }
     getActiveSheet() {
         return this.activeSheet;
     }
@@ -47756,11 +48301,19 @@ class GridSelectionPlugin extends UIPlugin {
         }
     }
     getStatisticFnResults() {
-        // get deduplicated cells in zones
-        const cells = new Set(this.gridSelection.zones
-            .map((zone) => this.getters.getEvaluatedCellsInZone(this.getters.getActiveSheetId(), zone))
-            .flat()
-            .filter((cell) => cell.type !== CellValueType.empty));
+        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);
+                }
+            }
+        }
         let cellsTypes = new Set();
         let cellsValues = [];
         for (let cell of cells) {
@@ -47838,6 +48391,27 @@ 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),
+        };
+        if (sheetIdTo in this.sheetsData) {
+            Object.assign(this, this.sheetsData[sheetIdTo]);
+            this.selection.resetDefaultAnchor(this, deepCopy(this.gridSelection.anchor));
+        }
+        else {
+            const { col, row } = this.getters.getNextVisibleCellPosition({
+                sheetId: sheetIdTo,
+                col: 0,
+                row: 0,
+            });
+            this.selectCell(col, row);
+        }
+    }
     /**
      * Ensure selections are not outside sheet boundaries.
      * They are clipped to fit inside the sheet if needed.
@@ -47949,9 +48523,7 @@ class GridSelectionPlugin extends UIPlugin {
         const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
         let currentIndex = cmd.base;
         for (const element of toRemove) {
-            const size = cmd.dimension === "COL"
-                ? this.getters.getColSize(cmd.sheetId, element)
-                : this.getters.getRowSize(cmd.sheetId, element);
+            const size = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
             this.dispatch("RESIZE_COLUMNS_ROWS", {
                 dimension: cmd.dimension,
                 sheetId: cmd.sheetId,
@@ -48132,22 +48704,22 @@ class InternalViewport {
      * visible cell.
      * It returns -1 if no column is found.
      */
-    getColIndex(x, absolute = false) {
+    getColIndex(x) {
         if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
             return -1;
         }
-        return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left, absolute);
+        return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left);
     }
     /**
      * Return the index of a row given an offset y, based on the pane top
      * visible cell.
      * It returns -1 if no row is found.
      */
-    getRowIndex(y, absolute = false) {
+    getRowIndex(y) {
         if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
             return -1;
         }
-        return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top, absolute);
+        return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top);
     }
     /**
      * This function will make sure that the provided cell position (or current selected position) is part of
@@ -48178,7 +48750,7 @@ class InternalViewport {
                 finalTarget++;
             }
             const finalTargetEnd = this.getters.getColDimensions(sheetId, finalTarget).end;
-            const startIndex = this.searchHeaderIndex("COL", finalTargetEnd - this.viewportWidth - this.offsetCorrectionX, this.boundaries.left, true);
+            const startIndex = this.searchHeaderIndex("COL", finalTargetEnd - this.viewportWidth - this.offsetCorrectionX, this.boundaries.left);
             this.offsetX =
                 this.getters.getColDimensions(sheetId, startIndex).end - this.offsetCorrectionX;
             this.offsetScrollbarX = this.offsetX;
@@ -48205,7 +48777,7 @@ class InternalViewport {
                 finalTarget++;
             }
             const finalTargetEnd = this.getters.getRowDimensions(sheetId, finalTarget).end;
-            const startIndex = this.searchHeaderIndex("ROW", finalTargetEnd - this.viewportHeight - this.offsetCorrectionY, this.boundaries.top, true);
+            const startIndex = this.searchHeaderIndex("ROW", finalTargetEnd - this.viewportHeight - this.offsetCorrectionY, this.boundaries.top);
             this.offsetY =
                 this.getters.getRowDimensions(sheetId, startIndex).end - this.offsetCorrectionY;
             this.offsetScrollbarY = this.offsetY;
@@ -48261,21 +48833,15 @@ class InternalViewport {
             !this.getters.isRowHidden(this.sheetId, row));
     }
     // PRIVATE
-    searchHeaderIndex(dimension, position, startIndex = 0, absolute = false) {
+    searchHeaderIndex(dimension, position, startIndex = 0) {
         let size = 0;
         const sheetId = this.sheetId;
         const headers = this.getters.getNumberHeaders(sheetId, dimension);
         for (let i = startIndex; i <= headers - 1; i++) {
-            const isHiddenInViewport = !absolute && dimension === "COL"
-                ? i < this.left && i > this.right
-                : i < this.top && i > this.bottom;
-            if (this.getters.isHeaderHidden(sheetId, dimension, i) || isHiddenInViewport) {
+            if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
                 continue;
             }
-            size +=
-                dimension === "COL"
-                    ? this.getters.getColSize(sheetId, i)
-                    : this.getters.getRowSize(sheetId, i);
+            size += this.getters.getHeaderSize(sheetId, dimension, i);
             if (size > position) {
                 return i;
             }
@@ -48309,8 +48875,8 @@ class InternalViewport {
                 this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
             }
         }
-        this.left = this.getColIndex(this.offsetScrollbarX, true);
-        this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth, true);
+        this.left = this.getColIndex(this.offsetScrollbarX);
+        this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth);
         if (this.right === -1) {
             this.right = this.boundaries.right;
         }
@@ -48326,8 +48892,8 @@ class InternalViewport {
                 this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
             }
         }
-        this.top = this.getRowIndex(this.offsetScrollbarY, true);
-        this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportHeight, true);
+        this.top = this.getRowIndex(this.offsetScrollbarY);
+        this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportHeight);
         if (this.bottom === -1) {
             this.bottom = this.boundaries.bottom;
         }
@@ -48442,6 +49008,7 @@ class SheetViewPlugin extends UIPlugin {
     gridOffsetX = 0;
     gridOffsetY = 0;
     sheetsWithDirtyViewports = new Set();
+    shouldAdjustViewports = false;
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
@@ -48473,11 +49040,19 @@ class SheetViewPlugin extends UIPlugin {
             const sheetId = this.getters.getActiveSheetId();
             col = Math.min(col, this.getters.getNumberCols(sheetId) - 1);
             row = Math.min(row, this.getters.getNumberRows(sheetId) - 1);
-            this.refreshViewport(this.getters.getActiveSheetId(), { col, row });
+            if (!this.sheetsWithDirtyViewports.has(sheetId)) {
+                this.refreshViewport(this.getters.getActiveSheetId(), { col, row });
+            }
         }
     }
     handle(cmd) {
         this.cleanViewports();
+        // changing the evaluation can hide/show rows because of data filters
+        if (invalidateEvaluationCommands.has(cmd.type)) {
+            for (const sheetId of this.getters.getSheetIds()) {
+                this.sheetsWithDirtyViewports.add(sheetId);
+            }
+        }
         switch (cmd.type) {
             case "START":
                 this.selection.observe(this, {
@@ -48487,7 +49062,10 @@ class SheetViewPlugin extends UIPlugin {
                 break;
             case "UNDO":
             case "REDO":
-                this.resetSheetViews();
+                for (const sheetId of this.getters.getSheetIds()) {
+                    this.sheetsWithDirtyViewports.add(sheetId);
+                }
+                this.shouldAdjustViewports = true;
                 break;
             case "RESIZE_SHEETVIEW":
                 this.resizeSheetView(cmd.height, cmd.width, cmd.gridOffsetX, cmd.gridOffsetY);
@@ -48508,12 +49086,17 @@ class SheetViewPlugin extends UIPlugin {
                 this.shiftVertically(shiftedOffsetY);
                 break;
             }
+            case "REMOVE_FILTER_TABLE":
+            case "UPDATE_FILTER":
+                this.sheetsWithDirtyViewports.add(cmd.sheetId);
+                break;
             case "REMOVE_COLUMNS_ROWS":
             case "RESIZE_COLUMNS_ROWS":
             case "HIDE_COLUMNS_ROWS":
             case "ADD_COLUMNS_ROWS":
             case "UNHIDE_COLUMNS_ROWS":
-            case "UPDATE_FILTER":
+            case "UNGROUP_HEADERS":
+            case "GROUP_HEADERS":
             case "FOLD_HEADER_GROUP":
             case "UNFOLD_HEADER_GROUP":
             case "FOLD_HEADER_GROUPS_IN_ZONE":
@@ -48527,12 +49110,13 @@ class SheetViewPlugin extends UIPlugin {
             case "UPDATE_CELL":
                 // update cell content or format can change hidden rows because of data filters
                 if ("content" in cmd || "format" in cmd || cmd.style?.fontSize !== undefined) {
-                    this.sheetsWithDirtyViewports.add(cmd.sheetId);
+                    for (const sheetId of this.getters.getSheetIds()) {
+                        this.sheetsWithDirtyViewports.add(sheetId);
+                    }
                 }
                 break;
             case "ACTIVATE_SHEET":
-                this.setViewports();
-                this.refreshViewport(cmd.sheetIdTo);
+                this.sheetsWithDirtyViewports.add(cmd.sheetIdTo);
                 break;
             case "UNFREEZE_ROWS":
             case "UNFREEZE_COLUMNS":
@@ -48553,8 +49137,16 @@ class SheetViewPlugin extends UIPlugin {
     finalize() {
         for (const sheetId of this.sheetsWithDirtyViewports) {
             this.resetViewports(sheetId);
+            if (this.shouldAdjustViewports) {
+                const position = this.getters.getSheetPosition(sheetId);
+                const viewports = this.getSubViewports(sheetId);
+                Object.values(viewports).forEach((viewport) => {
+                    viewport.adjustPosition(position);
+                });
+            }
         }
         this.sheetsWithDirtyViewports = new Set();
+        this.shouldAdjustViewports = false;
         this.setViewports();
     }
     setViewports() {
@@ -48672,10 +49264,7 @@ class SheetViewPlugin extends UIPlugin {
             if (!visibleIndexes.includes(i)) {
                 continue;
             }
-            offset +=
-                dimension === "COL"
-                    ? this.getters.getColSize(sheetId, i)
-                    : this.getters.getRowSize(sheetId, i);
+            offset += this.getters.getHeaderSize(sheetId, dimension, i);
         }
         return offset;
     }
@@ -48848,16 +49437,6 @@ class SheetViewPlugin extends UIPlugin {
             }
         }
     }
-    resetSheetViews() {
-        for (let sheetId of Object.keys(this.viewports)) {
-            const position = this.getters.getSheetPosition(sheetId);
-            this.resetViewports(sheetId);
-            const viewports = this.getSubViewports(sheetId);
-            Object.values(viewports).forEach((viewport) => {
-                viewport.adjustPosition(position);
-            });
-        }
-    }
     resizeSheetView(height, width, gridOffsetX = 0, gridOffsetY = 0) {
         this.sheetViewHeight = height;
         this.sheetViewWidth = width;
@@ -48994,6 +49573,120 @@ class SheetViewPlugin extends UIPlugin {
     }
 }
 
+class HeaderPositionsUIPlugin extends UIPlugin {
+    static getters = ["getColDimensions", "getRowDimensions", "getColRowOffset"];
+    headerPositions = {};
+    isDirty = true;
+    handle(cmd) {
+        if (invalidateEvaluationCommands.has(cmd.type)) {
+            this.headerPositions = {};
+            this.isDirty = true;
+        }
+        switch (cmd.type) {
+            case "START":
+                for (const sheetId of this.getters.getSheetIds()) {
+                    this.headerPositions[sheetId] = this.computeHeaderPositionsOfSheet(sheetId);
+                }
+                break;
+            case "UPDATE_CELL":
+                if ("content" in cmd || "format" in cmd || cmd.style?.fontSize !== undefined) {
+                    this.headerPositions = {};
+                    this.isDirty = true;
+                }
+                break;
+            case "UPDATE_FILTER":
+            case "REMOVE_FILTER_TABLE":
+                this.headerPositions = {};
+                this.isDirty = true;
+                break;
+            case "REMOVE_COLUMNS_ROWS":
+            case "RESIZE_COLUMNS_ROWS":
+            case "HIDE_COLUMNS_ROWS":
+            case "ADD_COLUMNS_ROWS":
+            case "UNHIDE_COLUMNS_ROWS":
+            case "FOLD_HEADER_GROUP":
+            case "UNFOLD_HEADER_GROUP":
+            case "FOLD_HEADER_GROUPS_IN_ZONE":
+            case "UNFOLD_HEADER_GROUPS_IN_ZONE":
+            case "UNFOLD_ALL_HEADER_GROUPS":
+            case "FOLD_ALL_HEADER_GROUPS":
+            case "UNGROUP_HEADERS":
+            case "GROUP_HEADERS":
+            case "CREATE_SHEET":
+                this.headerPositions[cmd.sheetId] = this.computeHeaderPositionsOfSheet(cmd.sheetId);
+                break;
+            case "DUPLICATE_SHEET":
+                this.headerPositions[cmd.sheetIdTo] = deepCopy(this.headerPositions[cmd.sheetId]);
+                break;
+        }
+    }
+    finalize() {
+        if (this.isDirty) {
+            for (const sheetId of this.getters.getSheetIds()) {
+                this.headerPositions[sheetId] = this.computeHeaderPositionsOfSheet(sheetId);
+            }
+            this.isDirty = false;
+        }
+    }
+    /**
+     * Returns the size, start and end coordinates of a column on an unfolded sheet
+     */
+    getColDimensions(sheetId, col) {
+        const start = this.headerPositions[sheetId]["COL"][col];
+        const size = this.getters.getColSize(sheetId, col);
+        const isColHidden = this.getters.isColHidden(sheetId, col);
+        return {
+            start,
+            size,
+            end: start + (isColHidden ? 0 : size),
+        };
+    }
+    /**
+     * Returns the size, start and end coordinates of a row an unfolded sheet
+     */
+    getRowDimensions(sheetId, row) {
+        const start = this.headerPositions[sheetId]["ROW"][row];
+        const size = this.getters.getRowSize(sheetId, row);
+        const isRowHidden = this.getters.isRowHidden(sheetId, row);
+        return {
+            start,
+            size: size,
+            end: start + (isRowHidden ? 0 : size),
+        };
+    }
+    /**
+     * Returns the offset of a header (determined by the dimension) at the given index
+     * based on the referenceIndex given. If start === 0, this method will return
+     * the start attribute of the header.
+     *
+     * i.e. The size from A to B is the distance between A.start and B.end
+     */
+    getColRowOffset(dimension, referenceIndex, index, sheetId = this.getters.getActiveSheetId()) {
+        const referencePosition = this.headerPositions[sheetId][dimension][referenceIndex];
+        const position = this.headerPositions[sheetId][dimension][index];
+        return position - referencePosition;
+    }
+    computeHeaderPositionsOfSheet(sheetId) {
+        return {
+            COL: this.computePositions(sheetId, "COL"),
+            ROW: this.computePositions(sheetId, "ROW"),
+        };
+    }
+    computePositions(sheetId, dimension) {
+        const positions = {};
+        let offset = 0;
+        // loop on number of headers +1 so the position of (last header + 1) is the end of the sheet
+        for (let i = 0; i < this.getters.getNumberHeaders(sheetId, dimension) + 1; i++) {
+            positions[i] = offset;
+            if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
+                continue;
+            }
+            offset += this.getters.getHeaderSize(sheetId, dimension, i);
+        }
+        return positions;
+    }
+}
+
 const corePluginRegistry = new Registry()
     .add("settings", SettingsPlugin)
     .add("sheet", SheetPlugin)
@@ -49012,7 +49705,6 @@ const corePluginRegistry = new Registry()
 // Plugins which handle a specific feature, without handling any core commands
 const featurePluginRegistry = new Registry()
     .add("ui_sheet", SheetUIPlugin)
-    .add("header_visibility_ui", HeaderVisibilityUIPlugin)
     .add("ui_options", UIOptionsPlugin)
     .add("selectionInputManager", SelectionInputsManagerPlugin)
     .add("highlight", HighlightPlugin)
@@ -49031,6 +49723,8 @@ const featurePluginRegistry = new Registry()
 const statefulUIPluginRegistry = new Registry()
     .add("selection", GridSelectionPlugin)
     .add("evaluation_filter", FilterEvaluationPlugin)
+    .add("header_visibility_ui", HeaderVisibilityUIPlugin)
+    .add("header_positions", HeaderPositionsUIPlugin)
     .add("viewport", SheetViewPlugin)
     .add("clipboard", ClipboardPlugin)
     .add("edition", EditionPlugin);
@@ -49039,7 +49733,7 @@ const coreViewsPluginRegistry = new Registry()
     .add("evaluation", EvaluationPlugin)
     .add("evaluation_chart", EvaluationChartPlugin)
     .add("evaluation_cf", EvaluationConditionalFormatPlugin)
-    .add("row_size", UIRowSizePlugin)
+    .add("row_size", HeaderSizeUIPlugin)
     .add("custom_colors", CustomColorsPlugin)
     .add("data_validation_ui", EvaluationDataValidationPlugin);
 
@@ -50401,6 +51095,7 @@ const BORDER_POSITIONS = [
 css /* scss */ `
   .o-border-selector {
     padding: 4px;
+    background-color: white;
   }
   .o-divider {
     border-right: 1px solid #e0e2e4;
@@ -50761,6 +51456,7 @@ css /* scss */ `
     line-height: 1.2;
     font-size: 13px;
     font-weight: 500;
+    background-color: #fff;
 
     .o-topbar-top {
       border-bottom: 1px solid ${SEPARATOR_COLOR};
@@ -52623,6 +53319,9 @@ class SelectionStreamProcessorImpl {
             },
         });
     }
+    isListening(owner) {
+        return this.stream.isListening(owner);
+    }
     /**
      * Process a new anchor selection event. If the new anchor is inside
      * the sheet boundaries, the event is pushed to the event stream to
@@ -55011,8 +55710,10 @@ const helpers = {
     toString,
     toXC,
     toZone,
+    toUnboundedZone,
     toCartesian,
     numberToLetters,
+    lettersToNumber,
     UuidGenerator,
     formatValue,
     createCurrencyFormat,
@@ -55034,6 +55735,7 @@ const helpers = {
     genericRepeat,
     createAction,
     createActions,
+    transformRangeData,
 };
 const links = {
     isMarkdownLink,
@@ -55048,7 +55750,7 @@ const components = {
     ChartJsComponent,
     Grid,
     GridOverlay,
-    ScorecardChart: ScorecardChart$1,
+    ScorecardChart,
     LineConfigPanel,
     LineBarPieDesignPanel,
     BarConfigPanel,
@@ -55059,6 +55761,7 @@ const components = {
     ScorecardChartDesignPanel,
     FigureComponent,
     Menu,
+    SelectionInput,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -55076,6 +55779,6 @@ const constants = {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = "16.5.0-alpha.9";
-__info__.date = "2023-10-03T13:16:46.370Z";
-__info__.hash = "c46de91";
+__info__.version = "17.0.0";
+__info__.date = "2023-10-27T06:53:09.229Z";
+__info__.hash = "c0a34c2";