@odoo/o-spreadsheet 19.1.0-alpha.10 → 19.1.0-alpha.12

package/dist/o_spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.1.0-alpha.10
- * @date 2025-10-30T12:26:30.196Z
- * @hash d0b65e9
+ * @version 19.1.0-alpha.12
+ * @date 2025-11-12T14:17:07.713Z
+ * @hash 6fefc9c
  */
 
 (function (exports, owl) {
@@ -157,6 +157,8 @@
     const MENU_WIDTH = 250;
     const MENU_VERTICAL_PADDING = 6;
     const DESKTOP_MENU_ITEM_HEIGHT = 26;
+    // Zoom
+    const ZOOM_VALUES = [50, 75, 100, 125, 150, 200];
     // Style
     const DEFAULT_STYLE = {
         align: "left",
@@ -246,7 +248,7 @@
         fontSize: CHART_TITLE_FONT_SIZE,
         color: TEXT_BODY,
     };
-    const DEFAULT_TOKEN_COLOR = "#000000";
+    const DEFAULT_TOKEN_COLOR = "light-dark(#000000, #ffffff)";
     const functionColor = DEFAULT_TOKEN_COLOR;
     const operatorColor = "#3da4ab";
     const tokenColors = {
@@ -1774,7 +1776,10 @@
      * Check if a zone is inside another
      */
     function isZoneInside(smallZone, biggerZone) {
-        return isEqual(union(biggerZone, smallZone), biggerZone);
+        return (smallZone.left >= biggerZone.left &&
+            smallZone.right <= biggerZone.right &&
+            smallZone.top >= biggerZone.top &&
+            smallZone.bottom <= biggerZone.bottom);
     }
     function zoneToDimension(zone) {
         return {
@@ -2286,13 +2291,13 @@
         let optionalArg = 0;
         for (const arg of addDescr.args) {
             countArg++;
-            if (!arg.optional && !arg.repeating && !arg.default) {
+            if (!arg.optional && !arg.default) {
                 minArg++;
             }
             if (arg.repeating) {
                 repeatingArg++;
             }
-            if (arg.optional || arg.default) {
+            if ((arg.optional || arg.default) && !arg.repeating) {
                 optionalArg++;
             }
         }
@@ -2300,7 +2305,7 @@
         descr.minArgRequired = minArg;
         descr.maxArgPossible = repeatingArg ? Infinity : countArg;
         descr.nbrArgRepeating = repeatingArg;
-        descr.nbrArgOptional = optionalArg;
+        descr.nbrOptionalNonRepeatingArgs = optionalArg;
         descr.hidden = addDescr.hidden || false;
         descr.name = name;
         return descr;
@@ -2328,9 +2333,9 @@
      * and rows representing the correspondence with the argument index.
      *
      * The tables are built based on the following conventions:
-     * - `m`: Mandatory argument
-     * - `o`: Optional argument
-     * - `r`: Repeating argument
+     * - `m`: Mandatory argument (count as one argument)
+     * - `o`: Optional argument (count as zero or one argument)
+     * - `r`: Repeating argument (count as one or more arguments)
      *
      *
      * Configuration 1: (m, o) like the CEILING function
@@ -2343,39 +2348,39 @@
      *
      * Configuration 2: (m, m, m, r, r) like the SUMIFS function
      *
-     * |   | 3 | 5 | 7    | 3 + 2n     |
-     * |---|---|---|------|------------|
-     * | m | 0 | 0 | 0    | 0          |
-     * | m | 1 | 1 | 1    | 1          |
-     * | m | 2 | 2 | 2    | 2          |
-     * | r |   | 3 | 3, 5 | 3 + 2n     |
-     * | r |   | 4 | 4, 6 | 3 + 2n + 1 |
+     * |   | 5 | 7    | 3 + 2n     |
+     * |---|---|------|------------|
+     * | m | 0 | 0    | 0          |
+     * | m | 1 | 1    | 1          |
+     * | m | 2 | 2    | 2          |
+     * | r | 3 | 3, 5 | 3 + 2n     |
+     * | r | 4 | 4, 6 | 3 + 2n + 1 |
      *
      *
      * Configuration 3: (m, m, m, r, r, o) like the SWITCH function
      *
-     * |   | 3 | 4 | 5 | 6 | 7    | 8    | 3 + 2n     | 3 + 2n + 1     |
-     * |---|---|---|---|---|------|------|------------|----------------|
-     * | m | 0 | 0 | 0 | 0 | 0    | 0    | 0          | 0              |
-     * | m | 1 | 1 | 1 | 1 | 1    | 1    | 1          | 1              |
-     * | m | 2 | 2 | 2 | 2 | 2    | 2    | 2          | 2              |
-     * | r |   |   | 3 | 3 | 3, 5 | 3, 5 | 3 + 2n     | 3 + 2n         |
-     * | r |   |   | 4 | 4 | 4, 6 | 4, 6 | 3 + 2n + 1 | 3 + 2n + 1     |
-     * | o |   | 3 |   | 5 |      | 7    |            | 3 + 2N + 2     |
+     * |   | 5 | 6 | 7    | 8    | 3 + 2n     | 3 + 2n + 1     |
+     * |---|---|---|------|------|------------|----------------|
+     * | m | 0 | 0 | 0    | 0    | 0          | 0              |
+     * | m | 1 | 1 | 1    | 1    | 1          | 1              |
+     * | m | 2 | 2 | 2    | 2    | 2          | 2              |
+     * | r | 3 | 3 | 3, 5 | 3, 5 | 3 + 2n     | 3 + 2n         |
+     * | r | 4 | 4 | 4, 6 | 4, 6 | 3 + 2n + 1 | 3 + 2n + 1     |
+     * | o |   | 5 |      | 7    |            | 3 + 2N + 2     |
      *
      *
      * Configuration 4: (m, o, m, o, r, r, r, m) a complex case to understand subtleties
      *
-     * |   | 3 | 4 | 5 | 6 | 7 | 8 | 9    | 10   | 11   | ... |
-     * |---|---|---|---|---|---|---|------|------|------|-----|
-     * | m | 0 | 0 | 0 | 0 | 0 | 0 | 0    | 0    | 0    | ... |
-     * | o |   | 1 | 1 |   | 1 | 1 |      | 1    | 1    | ... |
-     * | m | 1 | 2 | 2 | 1 | 2 | 2 | 1    | 2    | 2    | ... |
-     * | o |   |   | 3 |   |   | 3 |      |      | 3    | ... |
-     * | r |   |   |   | 2 | 3 | 4 | 2, 5 | 3, 6 | 4, 7 | ... |
-     * | r |   |   |   | 3 | 4 | 5 | 3, 6 | 4, 7 | 5, 8 | ... |
-     * | r |   |   |   | 4 | 5 | 6 | 4, 7 | 5, 8 | 6, 9 | ... |
-     * | m | 2 | 3 | 4 | 5 | 6 | 7 | 8    | 9    | 10   | ... |
+     * |   | 6 | 7 | 8 | 9    | 10   | 11   | ... |
+     * |---|---|---|---|------|------|------|-----|
+     * | m | 0 | 0 | 0 | 0    | 0    | 0    | ... |
+     * | o |   | 1 | 1 |      | 1    | 1    | ... |
+     * | m | 1 | 2 | 2 | 1    | 2    | 2    | ... |
+     * | o |   |   | 3 |      |      | 3    | ... |
+     * | r | 2 | 3 | 4 | 2, 5 | 3, 6 | 4, 7 | ... |
+     * | r | 3 | 4 | 5 | 3, 6 | 4, 7 | 5, 8 | ... |
+     * | r | 4 | 5 | 6 | 4, 7 | 5, 8 | 6, 9 | ... |
+     * | m | 5 | 6 | 7 | 8    | 9    | 10   | ... |
      *
      */
     function argTargeting(functionDescription, nbrArgSupplied) {
@@ -2394,30 +2399,31 @@
     }
     function _argTargeting(functionDescription, nbrArgSupplied) {
         const valueIndexToArgPosition = {};
-        const groupsOfRepeatingValues = functionDescription.nbrArgRepeating
+        const groupsOfOptionalRepeatingValues = functionDescription.nbrArgRepeating
             ? Math.floor((nbrArgSupplied - functionDescription.minArgRequired) / functionDescription.nbrArgRepeating)
             : 0;
-        const nbrValueRepeating = functionDescription.nbrArgRepeating * groupsOfRepeatingValues;
-        const nbrValueOptional = nbrArgSupplied - functionDescription.minArgRequired - nbrValueRepeating;
+        const nbrValueOptionalRepeating = functionDescription.nbrArgRepeating * groupsOfOptionalRepeatingValues;
+        const nbrValueOptional = nbrArgSupplied - functionDescription.minArgRequired - nbrValueOptionalRepeating;
         let countValueSupplied = 0;
         let countValueOptional = 0;
         for (let i = 0; i < functionDescription.args.length; i++) {
             const arg = functionDescription.args[i];
-            if (arg.optional || arg.default) {
+            if ((arg.optional || arg.default) && !arg.repeating) {
                 if (countValueOptional < nbrValueOptional) {
-                    valueIndexToArgPosition[countValueSupplied] = i;
+                    valueIndexToArgPosition[countValueSupplied] = { index: i };
                     countValueSupplied++;
                 }
                 countValueOptional++;
                 continue;
             }
             if (arg.repeating) {
+                const groupOfMandatoryRepeatingValues = arg.optional ? 0 : 1;
                 // As we know all repeating arguments are consecutive,
                 // --> we will treat all repeating arguments in one go
                 // --> the index i will be incremented by the number of repeating values at the end of the loop
-                for (let j = 0; j < groupsOfRepeatingValues; j++) {
+                for (let j = 0; j < groupsOfOptionalRepeatingValues + groupOfMandatoryRepeatingValues; j++) {
                     for (let k = 0; k < functionDescription.nbrArgRepeating; k++) {
-                        valueIndexToArgPosition[countValueSupplied] = i + k;
+                        valueIndexToArgPosition[countValueSupplied] = { index: i + k, repeatingGroupIndex: j };
                         countValueSupplied++;
                     }
                 }
@@ -2425,7 +2431,7 @@
                 continue;
             }
             // End case: it's a required argument
-            valueIndexToArgPosition[countValueSupplied] = i;
+            valueIndexToArgPosition[countValueSupplied] = { index: i };
             countValueSupplied++;
         }
         return (argPosition) => {
@@ -2437,7 +2443,7 @@
     //------------------------------------------------------------------------------
     const META_TYPES = ["META", "RANGE<META>"];
     function validateArguments(descr) {
-        if (descr.nbrArgRepeating && descr.nbrArgOptional >= descr.nbrArgRepeating) {
+        if (descr.nbrArgRepeating && descr.nbrOptionalNonRepeatingArgs >= descr.nbrArgRepeating) {
             throw new Error(`Function ${descr.name} has more optional arguments than repeatable ones.`);
         }
         let foundRepeating = false;
@@ -4123,7 +4129,7 @@
             const getArgToFocus = argTargeting(descr, args.length);
             //#region Compute vectorisation limits
             for (let i = 0; i < args.length; i++) {
-                const argIndex = getArgToFocus(i) ?? -1;
+                const argIndex = getArgToFocus(i).index ?? -1;
                 const argDefinition = descr.args[argIndex];
                 const arg = args[i];
                 if (!isMatrix(arg) && argDefinition.acceptMatrixOnly) {
@@ -4137,7 +4143,7 @@
             for (let i = 0; i < args.length; i++) {
                 const arg = args[i];
                 const getArgToFocus = argTargeting(descr, args.length);
-                const argDefinition = descr.args[getArgToFocus(i) || i];
+                const argDefinition = descr.args[getArgToFocus(i).index ?? i];
                 // Early exit if the argument is an error and the function does not accept errors
                 // We only check scalar arguments, not matrix arguments for performance reasons.
                 // Casting helpers are responsible for handling errors in matrix arguments.
@@ -4405,8 +4411,7 @@
         description: _t$1("Creates a new array from the selected columns in the existing range."),
         args: [
             arg("array (any, range<any>)", _t$1("The array that contains the columns to be returned.")),
-            arg("col_num (number, range<number>)", _t$1("The first column index of the columns to be returned.")),
-            arg("col_num2 (number, range<number>, repeating)", _t$1("The columns indexes of the columns to be returned.")),
+            arg("col_num (number, range<number>, repeating)", _t$1("The column index of the column to be returned.")),
         ],
         compute: function (array, ...columns) {
             const _array = toMatrix(array);
@@ -4435,8 +4440,7 @@
         description: _t$1("Creates a new array from the selected rows in the existing range."),
         args: [
             arg("array (any, range<any>)", _t$1("The array that contains the rows to be returned.")),
-            arg("row_num (number, range<number>)", _t$1("The first row index of the rows to be returned.")),
-            arg("row_num2 (number, range<number>, repeating)", _t$1("The rows indexes of the rows to be returned.")),
+            arg("row_num (number, range<number>, repeating)", _t$1("The row index of the row to be returned.")),
         ],
         compute: function (array, ...rows) {
             const _array = toMatrix(array);
@@ -4486,10 +4490,7 @@
     // -----------------------------------------------------------------------------
     const FLATTEN = {
         description: _t$1("Flattens all the values from one or more ranges into a single column."),
-        args: [
-            arg("range (any, range<any>)", _t$1("The first range to flatten.")),
-            arg("range2 (any, range<any>, repeating)", _t$1("Additional ranges to flatten.")),
-        ],
+        args: [arg("range (any, range<any>, repeating)", _t$1("The range to flatten."))],
         compute: function (...ranges) {
             return [flattenRowFirst(ranges, (val) => (val === undefined ? { value: "" } : val))];
         },
@@ -4547,10 +4548,7 @@
     // -----------------------------------------------------------------------------
     const HSTACK = {
         description: _t$1("Appends ranges horizontally and in sequence to return a larger array."),
-        args: [
-            arg("range1 (any, range<any>)", _t$1("The first range to be appended.")),
-            arg("range2 (any, range<any>, repeating)", _t$1("Additional ranges to add to range1.")),
-        ],
+        args: [arg("range (any, range<any>, repeating)", _t$1("The range to be appended."))],
         compute: function (...ranges) {
             const nbRows = Math.max(...ranges.map((r) => r?.[0]?.length ?? 0));
             const result = [];
@@ -4636,8 +4634,7 @@
     const SUMPRODUCT = {
         description: _t$1("Calculates the sum of the products of corresponding entries in equal-sized ranges."),
         args: [
-            arg("range1 (number, range<number>)", _t$1("The first range whose entries will be multiplied with corresponding entries in the other ranges.")),
-            arg("range2 (number, range<number>, repeating)", _t$1("The other range whose entries will be multiplied with corresponding entries in the other ranges.")),
+            arg("range (number, range<number>, repeating)", _t$1("The range whose entries will be multiplied with corresponding entries in the other range.")),
         ],
         compute: function (...args) {
             if (!areSameDimensions(...args)) {
@@ -4823,10 +4820,7 @@
     // -----------------------------------------------------------------------------
     const VSTACK = {
         description: _t$1("Appends ranges vertically and in sequence to return a larger array."),
-        args: [
-            arg("range1 (any, range<any>)", _t$1("The first range to be appended.")),
-            arg("range2 (any, range<any>, repeating)", _t$1("Additional ranges to add to range1.")),
-        ],
+        args: [arg("range (any, range<any>, repeating)", _t$1("The range to be appended."))],
         compute: function (...ranges) {
             const nbColumns = Math.max(...ranges.map((range) => toMatrix(range).length));
             const nbRows = ranges.reduce((acc, range) => acc + toMatrix(range)[0].length, 0);
@@ -6393,6 +6387,7 @@
         "COPY",
         "RESIZE_SHEETVIEW",
         "SET_VIEWPORT_OFFSET",
+        "SET_ZOOM",
         "EVALUATE_CELLS",
         "EVALUATE_CHARTS",
         "SET_FORMULA_VISIBILITY",
@@ -7108,8 +7103,7 @@
     const COUNTBLANK = {
         description: _t$1("Number of empty values."),
         args: [
-            arg("value1 (any, range)", _t$1("The first value or range in which to count the number of blanks.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values or ranges in which to count the number of blanks.")),
+            arg("value (any, range, repeating)", _t$1("Value or range in which to count the number of blanks.")),
         ],
         compute: function (...args) {
             return reduceAny(args, (acc, a) => {
@@ -7151,10 +7145,8 @@
     const COUNTIFS = {
         description: _t$1("Count values depending on multiple criteria."),
         args: [
-            arg("criteria_range1 (range)", _t$1("The range to check against criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional ranges over which to evaluate the additional criteria. The filtered set will be the intersection of the sets produced by each criterion-range pair.")),
-            arg("criterion2 (string, repeating)", _t$1("Additional criteria to check.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range over which to evaluate criteria.")),
+            arg("criterion (string, repeating)", _t$1("Criteria to check.")),
         ],
         compute: function (...args) {
             let count = 0;
@@ -7170,10 +7162,7 @@
     // -----------------------------------------------------------------------------
     const COUNTUNIQUE = {
         description: _t$1("Counts number of unique values in a range."),
-        args: [
-            arg("value1 (any, range)", _t$1("The first value or range to consider for uniqueness.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values or ranges to consider for uniqueness.")),
-        ],
+        args: [arg("value (any, range, repeating)", _t$1("Value or range to consider for uniqueness."))],
         compute: function (...args) {
             return countUnique(args);
         },
@@ -7185,10 +7174,8 @@
         description: _t$1("Counts number of unique values in a range, filtered by a set of criteria."),
         args: [
             arg("range (range)", _t$1("The range of cells from which the number of unique values will be counted.")),
-            arg("criteria_range1 (range)", _t$1("The range of cells over which to evaluate criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1, such that each cell that evaluates to TRUE will be included in the filtered set.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional ranges over which to evaluate the additional criteria. The filtered set will be the intersection of the sets produced by each criterion-range pair.")),
-            arg("criterion2 (string, repeating)", _t$1("The pattern or test to apply to criteria_range2.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range over which to evaluate criteria.")),
+            arg("criterion (string, repeating)", _t$1("Criteria to check.")),
         ],
         compute: function (range, ...args) {
             const uniqueValues = new Set();
@@ -7544,8 +7531,7 @@
     const PRODUCT = {
         description: _t$1("Result of multiplying a series of numbers together."),
         args: [
-            arg("factor1 (number, range<number>)", _t$1("The first number or range to calculate for the product.")),
-            arg("factor2 (number, range<number>, repeating)", _t$1("More numbers or ranges to calculate for the product.")),
+            arg("factor (number, range<number>, repeating)", _t$1("Number or range to calculate for the product.")),
         ],
         compute: function (...factors) {
             let count = 0;
@@ -7877,8 +7863,7 @@
                 ...subtotalFunctionOptionsIncludeHiddenRows,
                 ...subtotalFunctionOptionsExcludeHiddenRows,
             ]),
-            arg("ref1 (meta, range<meta>)", _t$1("The range or reference for which you want the subtotal.")),
-            arg("ref2 (meta, range<meta>, repeating)", _t$1("Additional ranges or references for which you want the subtotal.")),
+            arg("ref (meta, range<meta>, repeating)", _t$1("Range or reference for which you want the subtotal.")),
         ],
         compute: function (functionCode, ...refs) {
             let code = toInteger(functionCode, this.locale);
@@ -7922,10 +7907,7 @@
     // -----------------------------------------------------------------------------
     const SUM = {
         description: _t$1("Sum of a series of numbers and/or cells."),
-        args: [
-            arg("value1 (number, range<number>)", _t$1("The first number or range to add together.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional numbers or ranges to add to value1.")),
-        ],
+        args: [arg("value (number, range<number>, repeating)", _t$1("Number or range to add together."))],
         compute: function (...values) {
             const v1 = values[0];
             return {
@@ -7967,10 +7949,8 @@
         description: _t$1("Sums a range depending on multiple criteria."),
         args: [
             arg("sum_range (range)", _t$1("The range to sum.")),
-            arg("criteria_range1 (range)", _t$1("The range to check against criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional ranges to check.")),
-            arg("criterion2 (string, repeating)", _t$1("Additional criteria to check.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range to check.")),
+            arg("criterion (string, repeating)", _t$1("Criteria to check.")),
         ],
         compute: function (sumRange, ...criters) {
             let sum = 0;
@@ -8452,8 +8432,7 @@
     const AVEDEV = {
         description: _t$1("Average magnitude of deviations from mean."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...values) {
             let count = 0;
@@ -8475,8 +8454,7 @@
     const AVERAGE = {
         description: _t$1("Numerical average value in a dataset, ignoring text."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range to consider when calculating the average value.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to consider when calculating the average value.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to consider when calculating the average value.")),
         ],
         compute: function (...values) {
             return {
@@ -8494,10 +8472,8 @@
     const AVERAGE_WEIGHTED = {
         description: _t$1("Weighted average."),
         args: [
-            arg("values (number, range<number>)", _t$1("Values to average.")),
-            arg("weights (number, range<number>)", _t$1("Weights for each corresponding value.")),
-            arg("additional_values (number, range<number>, repeating)", _t$1("Additional values to average.")),
-            arg("additional_weights (number, range<number>, repeating)", _t$1("Additional weights.")),
+            arg("values (number, range<number>, repeating)", _t$1("Value to average.")),
+            arg("weights (number, range<number>, repeating)", _t$1("Weight for each corresponding value.")),
         ],
         compute: function (...args) {
             let sum = 0;
@@ -8553,8 +8529,7 @@
     const AVERAGEA = {
         description: _t$1("Numerical average value in a dataset."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range to consider when calculating the average value.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to consider when calculating the average value.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to consider when calculating the average value.")),
         ],
         compute: function (...args) {
             let count = 0;
@@ -8607,10 +8582,8 @@
         description: _t$1("Average of values depending on multiple criteria."),
         args: [
             arg("average_range (range)", _t$1("The range to average.")),
-            arg("criteria_range1 (range)", _t$1("The range to check against criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional criteria_range and criterion to check.")),
-            arg("criterion2 (string, repeating)", _t$1("The pattern or test to apply to criteria_range2.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range to check.")),
+            arg("criterion (string, repeating)", _t$1("Criterion to check.")),
         ],
         compute: function (averageRange, ...args) {
             const _averageRange = toMatrix(averageRange);
@@ -8636,8 +8609,7 @@
     const COUNT = {
         description: _t$1("The number of numeric values in dataset."),
         args: [
-            arg("value1 (number, any, range<number>)", _t$1("The first value or range to consider when counting.")),
-            arg("value2 (number, any, range<number>, repeating)", _t$1("Additional values or ranges to consider when counting.")),
+            arg("value (number, any, range<number>, repeating)", _t$1("Value or range to consider when counting.")),
         ],
         compute: function (...values) {
             return countNumbers(values, this.locale);
@@ -8649,10 +8621,7 @@
     // -----------------------------------------------------------------------------
     const COUNTA = {
         description: _t$1("The number of values in a dataset."),
-        args: [
-            arg("value1 (any, range)", _t$1("The first value or range to consider when counting.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values or ranges to consider when counting.")),
-        ],
+        args: [arg("value (any, range, repeating)", _t$1("Value or range to consider when counting."))],
         compute: function (...values) {
             return countAny(values);
         },
@@ -8885,8 +8854,7 @@
     const MAX = {
         description: _t$1("Maximum value in a numeric dataset."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range to consider when calculating the maximum value.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to consider when calculating the maximum value.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to consider when calculating the maximum value.")),
         ],
         compute: function (...values) {
             return max(values, this.locale);
@@ -8899,8 +8867,7 @@
     const MAXA = {
         description: _t$1("Maximum numeric value in a dataset."),
         args: [
-            arg("value1 (any, range)", _t$1("The first value or range to consider when calculating the maximum value.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values or ranges to consider when calculating the maximum value.")),
+            arg("value (any, range, repeating)", _t$1("Value or range to consider when calculating the maximum value.")),
         ],
         compute: function (...args) {
             const maxa = reduceNumbersTextAs0(args, (acc, a) => {
@@ -8917,10 +8884,8 @@
         description: _t$1("Returns the maximum value in a range of cells, filtered by a set of criteria."),
         args: [
             arg("range (range)", _t$1("The range of cells from which the maximum will be determined.")),
-            arg("criteria_range1 (range)", _t$1("The range of cells over which to evaluate criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1, such that each cell that evaluates to TRUE will be included in the filtered set.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional ranges over which to evaluate the additional criteria. The filtered set will be the intersection of the sets produced by each criterion-range pair.")),
-            arg("criterion2 (string, repeating)", _t$1("The pattern or test to apply to criteria_range2.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range to evaluate criteria.")),
+            arg("criterion (string, repeating)", _t$1("Criteria to check.")),
         ],
         compute: function (range, ...args) {
             let result = -Infinity;
@@ -8940,8 +8905,7 @@
     const MEDIAN = {
         description: _t$1("Median value in a numeric dataset."),
         args: [
-            arg("value1 (any, range)", _t$1("The first value or range to consider when calculating the median value.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values or ranges to consider when calculating the median value.")),
+            arg("value (any, range, repeating)", _t$1("Value or range to consider when calculating the median value.")),
         ],
         compute: function (...values) {
             const data = [];
@@ -8961,8 +8925,7 @@
     const MIN = {
         description: _t$1("Minimum value in a numeric dataset."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range to consider when calculating the minimum value.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to consider when calculating the minimum value.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to consider when calculating the minimum value.")),
         ],
         compute: function (...values) {
             return min(values, this.locale);
@@ -8975,8 +8938,7 @@
     const MINA = {
         description: _t$1("Minimum numeric value in a dataset."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range to consider when calculating the minimum value.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to consider when calculating the minimum value.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to consider when calculating the minimum value.")),
         ],
         compute: function (...args) {
             const mina = reduceNumbersTextAs0(args, (acc, a) => {
@@ -8993,10 +8955,8 @@
         description: _t$1("Returns the minimum value in a range of cells, filtered by a set of criteria."),
         args: [
             arg("range (range)", _t$1("The range of cells from which the minimum will be determined.")),
-            arg("criteria_range1 (range)", _t$1("The range of cells over which to evaluate criterion1.")),
-            arg("criterion1 (string)", _t$1("The pattern or test to apply to criteria_range1, such that each cell that evaluates to TRUE will be included in the filtered set.")),
-            arg("criteria_range2 (any, range, repeating)", _t$1("Additional ranges over which to evaluate the additional criteria. The filtered set will be the intersection of the sets produced by each criterion-range pair.")),
-            arg("criterion2 (string, repeating)", _t$1("The pattern or test to apply to criteria_range2.")),
+            arg("criteria_range (any, range, repeating)", _t$1("Range to evaluate criteria.")),
+            arg("criterion (string, repeating)", _t$1("Criterion to check.")),
         ],
         compute: function (range, ...args) {
             let result = Infinity;
@@ -9337,8 +9297,7 @@
     const STDEV = {
         description: _t$1("Standard deviation."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VAR.compute.bind(this)(...args));
@@ -9351,8 +9310,7 @@
     const STDEV_P = {
         description: _t$1("Standard deviation of entire population."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VAR_P.compute.bind(this)(...args));
@@ -9365,8 +9323,7 @@
     const STDEV_S = {
         description: _t$1("Standard deviation."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VAR_S.compute.bind(this)(...args));
@@ -9379,8 +9336,7 @@
     const STDEVA = {
         description: _t$1("Standard deviation of sample (text as 0)."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VARA.compute.bind(this)(...args));
@@ -9393,8 +9349,7 @@
     const STDEVP = {
         description: _t$1("Standard deviation of entire population."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VARP.compute.bind(this)(...args));
@@ -9407,8 +9362,7 @@
     const STDEVPA = {
         description: _t$1("Standard deviation of entire population (text as 0)."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return Math.sqrt(VARPA.compute.bind(this)(...args));
@@ -9458,8 +9412,7 @@
     const VAR = {
         description: _t$1("Variance."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return variance(args, true, false, this.locale);
@@ -9472,8 +9425,7 @@
     const VAR_P = {
         description: _t$1("Variance of entire population."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return variance(args, false, false, this.locale);
@@ -9486,8 +9438,7 @@
     const VAR_S = {
         description: _t$1("Variance."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return variance(args, true, false, this.locale);
@@ -9500,8 +9451,7 @@
     const VARA = {
         description: _t$1("Variance of sample (text as 0)."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the sample.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the sample.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the sample.")),
         ],
         compute: function (...args) {
             return variance(args, true, true, this.locale);
@@ -9514,8 +9464,7 @@
     const VARP = {
         description: _t$1("Variance of entire population."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return variance(args, false, false, this.locale);
@@ -9528,8 +9477,7 @@
     const VARPA = {
         description: _t$1("Variance of entire population (text as 0)."),
         args: [
-            arg("value1 (number, range<number>)", _t$1("The first value or range of the population.")),
-            arg("value2 (number, range<number>, repeating)", _t$1("Additional values or ranges to include in the population.")),
+            arg("value (number, range<number>, repeating)", _t$1("Value or range to include in the population.")),
         ],
         compute: function (...args) {
             return variance(args, false, true, this.locale);
@@ -11433,8 +11381,7 @@
         // TODO modify args description when vectorization on formulas is available
         args: [
             arg("range (any, range<any>)", _t$1("The data to be filtered.")),
-            arg("condition1 (boolean, range<boolean>)", _t$1("A column or row containing true or false values corresponding to the first column or row of range.")),
-            arg("condition2 (boolean, range<boolean>, repeating)", _t$1("Additional column or row containing true or false values.")),
+            arg("condition (boolean, range<boolean>, repeating)", _t$1("Column or row containing true or false values corresponding to the range.")),
         ],
         compute: function (range, ...conditions) {
             let _array = toMatrix(range);
@@ -11474,8 +11421,8 @@
         description: _t$1("Sorts the rows of a given array or range by the values in one or more columns."),
         args: [
             arg("range (range)", _t$1("The data to be sorted.")),
-            arg("sort_column (any, range<number>, repeating)", _t$1("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$1("TRUE or FALSE indicating whether to sort sort_column in ascending order."), [
+            arg("sort_column (any, range<number>, repeating, optional)", _t$1("The index of the column in range or a range outside of range containing the value by which to sort.")),
+            arg("is_ascending (boolean, repeating, optional)", _t$1("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order."), [
                 { value: true, label: _t$1("Ascending") },
                 { value: false, label: _t$1("Descending") },
             ]),
@@ -11495,8 +11442,8 @@
             arg("range (range)", _t$1("The data to be sorted.")),
             arg("n (number)", _t$1("The number of items to return.")),
             arg("display_ties_mode (number, default=0)", _t$1("A number representing the way to display ties.")),
-            arg("sort_column (number, range<number>, repeating)", _t$1("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$1("TRUE or FALSE indicating whether to sort sort_column in ascending order."), [
+            arg("sort_column (number, range<number>, repeating, optional)", _t$1("The index of the column in range or a range outside of range containing the value by which to sort.")),
+            arg("is_ascending (boolean, repeating, optional)", _t$1("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order."), [
                 { value: true, label: _t$1("Ascending") },
                 { value: false, label: _t$1("Descending") },
             ]),
@@ -12764,8 +12711,7 @@
         description: _t$1("The net present value of an investment based on a series of periodic cash flows and a discount rate."),
         args: [
             arg("discount (number)", _t$1("The discount rate of the investment over one period.")),
-            arg("cashflow1 (number, range<number>)", _t$1("The first future cash flow.")),
-            arg("cashflow2 (number, range<number>, repeating)", _t$1("Additional future cash flows.")),
+            arg("cashflow (number, range<number>, repeating)", _t$1("The future cash flows.")),
         ],
         // to do: replace by dollar format
         compute: function (discount, ...values) {
@@ -14120,8 +14066,7 @@
     const AND = {
         description: _t$1("Logical `and` operator."),
         args: [
-            arg("logical_expression1 (boolean, range<boolean>)", _t$1("An expression or reference to a cell containing an expression that represents some logical value, i.e. TRUE or FALSE, or an expression that can be coerced to a logical value.")),
-            arg("logical_expression2 (boolean, range<boolean>, repeating)", _t$1("More expressions that represent logical values.")),
+            arg("logical_expression (boolean, range<boolean>, repeating)", _t$1("Expression or reference to a cell containing a logical value (TRUE/FALSE) or an expression that can be coerced to a logical value.")),
         ],
         compute: function (...logicalExpressions) {
             const { result, foundBoolean } = boolAnd(logicalExpressions);
@@ -14204,10 +14149,8 @@
     const IFS = {
         description: _t$1("Returns a value depending on multiple logical expressions."),
         args: [
-            arg("condition1 (boolean, range<boolean>)", _t$1("The first condition to be evaluated. This can be a boolean, a number, an array, or a reference to any of those.")),
-            arg("value1 (any, range)", _t$1("The returned value if condition1 is TRUE.")),
-            arg("condition2 (boolean, any, range, repeating)", _t$1("Additional conditions to be evaluated if the previous ones are FALSE.")),
-            arg("value2 (any, range, repeating)", _t$1("Additional values to be returned if their corresponding conditions are TRUE.")),
+            arg("condition (any, range, repeating)", _t$1("The condition to be evaluated. It can be a boolean, a number, an array, or a reference to any of those.")),
+            arg("value (any, range, repeating)", _t$1("The value to be returned if its corresponding condition is TRUE.")),
         ],
         compute: function (...values) {
             if (values.length % 2 !== 0) {
@@ -14246,8 +14189,7 @@
     const OR = {
         description: _t$1("Logical `or` operator."),
         args: [
-            arg("logical_expression1 (boolean, range<boolean>)", _t$1("An expression or reference to a cell containing an expression that represents some logical value, i.e. TRUE or FALSE, or an expression that can be coerced to a logical value.")),
-            arg("logical_expression2 (boolean, range<boolean>, repeating)", _t$1("More expressions that evaluate to logical values.")),
+            arg("logical_expression (boolean, range<boolean>, repeating)", _t$1("Expression or reference to a cell containing a logical value (TRUE/FALSE) or an expression that can be coerced to a logical value.")),
         ],
         compute: function (...logicalExpressions) {
             const { result, foundBoolean } = boolOr(logicalExpressions);
@@ -14265,10 +14207,8 @@
         description: _t$1("Returns a value by comparing cases to an expression."),
         args: [
             arg("expression (number, boolean, string)", _t$1("The value to be checked.")),
-            arg("case1 (number, boolean, string)", _t$1("The first case to be checked against expression.")),
-            arg("value1 (any)", _t$1("The corresponding value to be returned if case1 matches expression.")),
-            arg("case2 (any, repeating)", _t$1("Additional cases to try if the previous ones don't match expression.")),
-            arg("value2 (any, repeating)", _t$1("Additional values to be returned if their corresponding cases match expression.")),
+            arg("case (any, repeating)", _t$1("Case to be checked against expression.")),
+            arg("value (any, repeating)", _t$1("Value to be returned if its corresponding case matches expression.")),
             arg(`default (any, default="empty")`, _t$1("An optional default value to be returned if none of the cases match expression.")),
         ],
         compute: function (expression, ...casesAndValues) {
@@ -14303,8 +14243,7 @@
     const XOR = {
         description: _t$1("Logical `xor` operator."),
         args: [
-            arg("logical_expression1 (boolean, range<boolean>)", _t$1("An expression or reference to a cell containing an expression that represents some logical value, i.e. TRUE or FALSE, or an expression that can be coerced to a logical value.")),
-            arg("logical_expression2 (boolean, range<boolean>, repeating)", _t$1("More expressions that evaluate to logical values.")),
+            arg("logical_expression (boolean, range<boolean>, repeating)", _t$1("Expression or reference to a cell containing a logical value (TRUE/FALSE) or an expression that can be coerced to a logical value.")),
         ],
         compute: function (...logicalExpressions) {
             let foundBoolean = false;
@@ -15817,8 +15756,8 @@
         args: [
             arg("pivot_id (number,string)", _t$1("ID of the pivot.")),
             arg("measure_name (string)", _t$1("Name of the measure.")),
-            arg("domain_field_name (string,repeating)", _t$1("Field name.")),
-            arg("domain_value (number,string,boolean,repeating)", _t$1("Value.")),
+            arg("domain_field_name (string,repeating,optional)", _t$1("Field name.")),
+            arg("domain_value (number,string,boolean,repeating,optional)", _t$1("Value.")),
         ],
         compute: function (formulaId, measureName, ...domainArgs) {
             const _pivotFormulaId = toString(formulaId);
@@ -15853,8 +15792,8 @@
         description: _t$1("Get the header of a pivot."),
         args: [
             arg("pivot_id (number,string)", _t$1("ID of the pivot.")),
-            arg("domain_field_name (string,repeating)", _t$1("Field name.")),
-            arg("domain_value (number,string,value,repeating)", _t$1("Value.")),
+            arg("domain_field_name (string,repeating,optional)", _t$1("Field name.")),
+            arg("domain_value (number,string,value,repeating,optional)", _t$1("Value.")),
         ],
         compute: function (pivotId, ...domainArgs) {
             const _pivotFormulaId = toString(pivotId);
@@ -16725,10 +16664,7 @@
     // -----------------------------------------------------------------------------
     const CONCATENATE = {
         description: _t$1("Appends strings to one another."),
-        args: [
-            arg("string1 (string, range<string>)", _t$1("The initial string.")),
-            arg("string2 (string, range<string>, repeating)", _t$1("More strings to append in sequence.")),
-        ],
+        args: [arg("string (string, range<string>, repeating)", _t$1("String to append in sequence."))],
         compute: function (...datas) {
             return reduceAny(datas, (acc, a) => acc + toString(a), "");
         },
@@ -16783,8 +16719,7 @@
         description: _t$1("Concatenates elements of arrays with delimiter."),
         args: [
             arg("delimiter (string)", _t$1("The character or string to place between each concatenated value.")),
-            arg("value_or_array1 (string, range<string>)", _t$1("The value or values to be appended using delimiter.")),
-            arg("value_or_array2 (string, range<string>, repeating)", _t$1("More values to be appended using delimiter.")),
+            arg("value_or_array (string, range<string>, repeating)", _t$1("Value to be appended using delimiter.")),
         ],
         compute: function (delimiter, ...valuesOrArrays) {
             const _delimiter = toString(delimiter);
@@ -17075,13 +17010,12 @@
     const TEXTJOIN = {
         description: _t$1("Combines text from multiple strings and/or arrays."),
         args: [
-            arg("delimiter (string)", _t$1(" A string, possible empty, or a reference to a valid string. If empty, the text will be simply concatenated.")),
+            arg("delimiter (string)", _t$1("A string, possible empty, or a reference to a valid string. If empty, the text will be simply concatenated.")),
             arg("ignore_empty (boolean)", _t$1("A boolean; if TRUE, empty cells selected in the text arguments won't be included in the result."), [
                 { value: true, label: _t$1("Ignore empty cells") },
                 { value: false, label: _t$1("Include empty cells (default)") },
             ]),
-            arg("text1 (string, range<string>)", _t$1("Any text item. This could be a string, or an array of strings in a range.")),
-            arg("text2 (string, range<string>, repeating)", _t$1("Additional text item(s).")),
+            arg("texts (string, range<string>, repeating)", _t$1("Text item to join.")),
         ],
         compute: function (delimiter, ignoreEmpty = { value: TEXTJOIN_DEFAULT_IGNORE_EMPTY }, ...textsOrArrays) {
             const _delimiter = toString(delimiter);
@@ -18459,12 +18393,10 @@ stores.inject(MyMetaStore, storeInstance);
         "#00a3a3",
         "#f012be",
         "#3d9970",
-        "#111111",
         "#62A300",
         "#ff4136",
         "#949494",
-        "#85144b",
-        "#001f3f",
+        "#ff5c9d",
     ];
     /*
      * transform a color number (R * 256^2 + G * 256 + B) into classic hex (+alpha) value
@@ -19489,7 +19421,7 @@ stores.inject(MyMetaStore, storeInstance);
         let sheetName = "";
         if (prefixSheet) {
             if (range.invalidSheetName) {
-                sheetName = range.invalidSheetName;
+                sheetName = getCanonicalSymbolName(range.invalidSheetName);
             }
             else {
                 sheetName = getCanonicalSymbolName(getSheetName(range.sheetId));
@@ -22466,7 +22398,7 @@ stores.inject(MyMetaStore, storeInstance);
             return {
                 background: context.background,
                 type: "scorecard",
-                keyValue: context.range ? context.range[0].dataRange : undefined,
+                keyValue: context.range?.[0]?.dataRange,
                 title: context.title || { text: "" },
                 baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
                 baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
@@ -22969,6 +22901,66 @@ stores.inject(MyMetaStore, storeInstance);
         }
     }
 
+    /**
+     * Return a POJO containing the original event as well as the client position and the client offset
+     * where the event would target if the spreadsheet was not zoomed
+     * @param ev unzoomed mouse event
+     * @param originalTargetRect The original target bounding rect the resulting ZoomedMouseEvent offset must refer to
+     * @returns a ZoomedMouseEvent
+     */
+    function withZoom(env, ev, originalTargetRect) {
+        const zoomLevel = env.model.getters.getViewportZoomLevel();
+        if (originalTargetRect === undefined) {
+            originalTargetRect = getZoomTargetBoundingRect(ev);
+        }
+        if (!originalTargetRect)
+            return withNoZoom(ev);
+        const baseOffsetX = ev.clientX - originalTargetRect.left;
+        const baseOffsetY = ev.clientY - originalTargetRect.top;
+        const offsetX = baseOffsetX / zoomLevel;
+        const offsetY = baseOffsetY / zoomLevel;
+        return {
+            ev,
+            clientX: ev.clientX - baseOffsetX + offsetX,
+            clientY: ev.clientY - baseOffsetY + offsetY,
+            offsetX,
+            offsetY,
+        };
+    }
+    function withNoZoom(ev) {
+        return {
+            ev,
+            clientX: ev.clientX,
+            clientY: ev.clientY,
+            offsetX: ev.offsetX,
+            offsetY: ev.offsetY,
+        };
+    }
+    /**
+     * Return a Rect with position and size on the zoomed canvas
+     */
+    function getZoomedRect(zoom, rect) {
+        return {
+            height: rect.height * zoom,
+            width: rect.width * zoom,
+            x: rect.x * zoom,
+            y: rect.y * zoom,
+        };
+    }
+    /**
+     * Returns the bounding rect of the closest or self element who is targetable by a ZoomedMouseEvent
+     */
+    function getZoomTargetBoundingRect(ev) {
+        const target = ev.target;
+        if (!target || !("classList" in target) || !(target instanceof Element)) {
+            return null;
+        }
+        const targetEl = target.classList.contains("o-zoomable") ? target : target.closest(".o-zoomable");
+        if (!targetEl)
+            return null;
+        return targetEl.getBoundingClientRect();
+    }
+
     class ScorecardChart extends owl.Component {
         static template = "o-spreadsheet-ScorecardChart";
         static props = {
@@ -22992,7 +22984,8 @@ stores.inject(MyMetaStore, storeInstance);
         }
         createChart() {
             const canvas = this.canvas.el;
-            const config = getScorecardConfiguration(canvas.getBoundingClientRect(), this.runtime);
+            const zoom = this.env.model.getters.getViewportZoomLevel();
+            const config = getScorecardConfiguration(getZoomedRect(1 / zoom, canvas.getBoundingClientRect()), this.runtime);
             drawScoreChart(config, canvas);
         }
     }
@@ -23111,8 +23104,7 @@ stores.inject(MyMetaStore, storeInstance);
     function gridOverlayPosition() {
         const spreadsheetElement = document.querySelector(".o-grid-overlay");
         if (spreadsheetElement) {
-            const { top, left } = spreadsheetElement.getBoundingClientRect();
-            return { top, left };
+            return spreadsheetElement.getBoundingClientRect();
         }
         throw new Error("Can't find spreadsheet position");
     }
@@ -23330,8 +23322,7 @@ stores.inject(MyMetaStore, storeInstance);
                     .filter((ds) => !isTrendLineAxis(ds["xAxisID"]))
                     .map((ds) => ({
                     ...ds,
-                    pointRadius: 0,
-                    showLine: true,
+                    pointRadius: ds.showLine === false ? 2 : 0, // Show points only for scatter plots
                 })),
             },
             options: {
@@ -23894,9 +23885,13 @@ stores.inject(MyMetaStore, storeInstance);
         if (!blob) {
             return undefined;
         }
-        if (!URL.createObjectURL)
-            throw new Error("URL.createObjectURL is not supported in this environment");
-        return URL.createObjectURL(blob);
+        return new Promise((resolve) => {
+            const f = new FileReader();
+            f.addEventListener("load", () => {
+                resolve(f.result);
+            });
+            f.readAsDataURL(blob);
+        });
     }
 
     /**
@@ -26254,7 +26249,7 @@ stores.inject(MyMetaStore, storeInstance);
                 const compiledArgs = [];
                 const argToFocus = argTargeting(functionDefinition, args.length);
                 for (let i = 0; i < args.length; i++) {
-                    const argDefinition = functionDefinition.args[argToFocus(i) ?? -1];
+                    const argDefinition = functionDefinition.args[argToFocus(i).index ?? -1];
                     const currentArg = args[i];
                     const argTypes = argDefinition.type || [];
                     // detect when an argument need to be evaluated as a meta argument
@@ -26433,12 +26428,15 @@ stores.inject(MyMetaStore, storeInstance);
         }
         if (nbrArgRepeating > 1) {
             const nbrValueRepeating = nbrArgRepeating * Math.floor((nbrArgSupplied - minArgRequired) / nbrArgRepeating);
-            const nbrValueRemaining = nbrArgSupplied - minArgRequired - nbrValueRepeating - functionDefinition.nbrArgOptional;
+            const nbrValueRemaining = nbrArgSupplied -
+                minArgRequired -
+                nbrValueRepeating -
+                functionDefinition.nbrOptionalNonRepeatingArgs;
             if (nbrValueRemaining > 0) {
                 throw new BadExpressionError(_t$1("Invalid number of arguments for the %(functionName)s function. Repeatable arguments should be supplied in groups of %(nbrArgRepeating)s, with up to %(nbrArgOptional)s optional. Got %(nbrValueRemaining)s too many.", {
                     functionName,
                     nbrArgRepeating,
-                    nbrArgOptional: functionDefinition.nbrArgOptional,
+                    nbrArgOptional: functionDefinition.nbrOptionalNonRepeatingArgs,
                     nbrValueRemaining,
                 }));
             }
@@ -44835,8 +44833,24 @@ stores.inject(MyMetaStore, storeInstance);
             case "REFERENCE":
                 return ast.value;
             case "FUNCALL":
-                const docs = ast.args.map(astToDoc);
-                return wrapInParentheses(concat(docs.map((doc, i) => (i < 1 ? doc : concat([", ", line(), doc])))), ast.value);
+                const functionDescription = functionRegistry.get(ast.value.toUpperCase());
+                const getArgToFocus = argTargeting(functionDescription, ast.args.length);
+                const docs = [];
+                let i = 0;
+                while (i < ast.args.length) {
+                    const isRepeating = functionDescription.args[getArgToFocus(i).index ?? -1]?.repeating;
+                    if (isRepeating) {
+                        const repeatingArgSeries = ast.args.slice(i, i + functionDescription.nbrArgRepeating);
+                        const docsSeries = repeatingArgSeries.map((arg) => astToDoc(arg));
+                        docs.push(group(concat(splitArgsWithCommas(docsSeries))));
+                        i += functionDescription.nbrArgRepeating;
+                    }
+                    else {
+                        docs.push(astToDoc(ast.args[i]));
+                        i++;
+                    }
+                }
+                return wrapInParentheses(concat(splitArgsWithCommas(docs)), ast.value);
             case "UNARY_OPERATION":
                 const operandDoc = astToDoc(ast.operand);
                 const needParenthesis = ast.postfix
@@ -44862,6 +44876,14 @@ stores.inject(MyMetaStore, storeInstance);
                 return "";
         }
     }
+    function splitArgsWithCommas(docs) {
+        const result = docs.length ? [docs[0]] : [];
+        for (let i = 1; i < docs.length; i++) {
+            result.push(", ", line());
+            result.push(docs[i]);
+        }
+        return result;
+    }
     /**
      * Wraps a `Doc` in parentheses (with optional function name).
      */
@@ -46469,6 +46491,7 @@ stores.inject(MyMetaStore, storeInstance);
         isMeasureCandidate: (field) => field.type !== "boolean",
         isGroupable: () => true,
         canHaveCustomGroup: (field) => field.type === "char" && !field.isCustomField,
+        isPivotUnused: () => true,
     });
 
     const UNDO_REDO_PIVOT_COMMANDS = ["ADD_PIVOT", "UPDATE_PIVOT", "REMOVE_PIVOT"];
@@ -46487,7 +46510,7 @@ stores.inject(MyMetaStore, storeInstance);
             "isSpillPivotFormula",
         ];
         pivots = {};
-        unusedPivots;
+        unusedPivotsInFormulas;
         custom;
         constructor(config) {
             super(config);
@@ -46527,12 +46550,12 @@ stores.inject(MyMetaStore, storeInstance);
                 }
                 case "DELETE_SHEET":
                 case "UPDATE_CELL": {
-                    this.unusedPivots = undefined;
+                    this.unusedPivotsInFormulas = undefined;
                     break;
                 }
                 case "UNDO":
                 case "REDO": {
-                    this.unusedPivots = undefined;
+                    this.unusedPivotsInFormulas = undefined;
                     const pivotCommands = cmd.commands.filter(isPivotCommand);
                     for (const cmd of pivotCommands) {
                         const pivotId = cmd.pivotId;
@@ -46691,7 +46714,9 @@ stores.inject(MyMetaStore, storeInstance);
             return this.pivots[pivotId];
         }
         isPivotUnused(pivotId) {
-            return this._getUnusedPivots().includes(pivotId);
+            const { type } = this.getters.getPivot(pivotId);
+            return (this._getUnusedPivotsInFormulas().includes(pivotId) &&
+                pivotRegistry.get(type).isPivotUnused(this.getters, pivotId));
         }
         getPivotCellSortDirection(position) {
             const pivotId = this.getters.getPivotIdFromPosition(position);
@@ -46727,9 +46752,9 @@ stores.inject(MyMetaStore, storeInstance);
                 this.pivots[pivotId].onDefinitionChange(definition);
             }
         }
-        _getUnusedPivots() {
-            if (this.unusedPivots !== undefined) {
-                return this.unusedPivots;
+        _getUnusedPivotsInFormulas() {
+            if (this.unusedPivotsInFormulas !== undefined) {
+                return this.unusedPivotsInFormulas;
             }
             const unusedPivots = new Set(this.getters.getPivotIds());
             for (const sheetId of this.getters.getSheetIds()) {
@@ -46739,14 +46764,14 @@ stores.inject(MyMetaStore, storeInstance);
                     if (pivotId) {
                         unusedPivots.delete(pivotId);
                         if (!unusedPivots.size) {
-                            this.unusedPivots = [];
+                            this.unusedPivotsInFormulas = [];
                             return [];
                         }
                     }
                 }
             }
-            this.unusedPivots = [...unusedPivots];
-            return this.unusedPivots;
+            this.unusedPivotsInFormulas = [...unusedPivots];
+            return this.unusedPivotsInFormulas;
         }
     }
 
@@ -52151,6 +52176,7 @@ stores.inject(MyMetaStore, storeInstance);
             "getVisibleFigures",
             "getVisibleRect",
             "getVisibleRectWithoutHeaders",
+            "getVisibleRectWithZoom",
             "getVisibleCellPositions",
             "getColRowOffsetInViewport",
             "getMainViewportCoordinates",
@@ -52166,6 +52192,8 @@ stores.inject(MyMetaStore, storeInstance);
             "getFigureUI",
             "getPositionAnchorOffset",
             "getGridOffset",
+            "getViewportZoomLevel",
+            "getScrollBarWidth",
         ];
         viewports = {};
         /**
@@ -52178,6 +52206,7 @@ stores.inject(MyMetaStore, storeInstance);
         sheetViewHeight = getDefaultSheetViewSize();
         gridOffsetX = 0;
         gridOffsetY = 0;
+        zoomLevel = 1;
         sheetsWithDirtyViewports = new Set();
         shouldAdjustViewports = false;
         // ---------------------------------------------------------------------------
@@ -52244,6 +52273,9 @@ stores.inject(MyMetaStore, storeInstance);
                 case "SET_VIEWPORT_OFFSET":
                     this.setSheetViewOffset(cmd.offsetX, cmd.offsetY);
                     break;
+                case "SET_ZOOM":
+                    this.zoomLevel = cmd.zoom || 1;
+                    break;
                 case "SHIFT_VIEWPORT_DOWN":
                     const sheetId = this.getters.getActiveSheetId();
                     const { top, viewportHeight, offsetCorrectionY } = this.getMainInternalViewport(sheetId);
@@ -52447,7 +52479,7 @@ stores.inject(MyMetaStore, storeInstance);
             for (const i of relevantIndexes) {
                 offset += this.getters.getHeaderSize(sheetId, dimension, i);
             }
-            return offset;
+            return offset * this.zoomLevel;
         }
         /**
          * Check if a given position is visible in the viewport.
@@ -52455,6 +52487,9 @@ stores.inject(MyMetaStore, storeInstance);
         isVisibleInViewport({ sheetId, col, row }) {
             return this.getSubViewports(sheetId).some((pane) => pane.isVisible(col, row));
         }
+        getScrollBarWidth() {
+            return SCROLLBAR_WIDTH / this.zoomLevel;
+        }
         // => returns the new offset
         getEdgeScrollCol(x, previousX, startingX) {
             let canEdgeScroll = false;
@@ -52533,6 +52568,18 @@ stores.inject(MyMetaStore, storeInstance);
             const rect = this.getVisibleRectWithoutHeaders(zone);
             return { ...rect, x: rect.x + this.gridOffsetX, y: rect.y + this.gridOffsetY };
         }
+        /**
+         * Computes the coordinates and size to draw the zone on the canvas after it has been zoomed
+         */
+        getVisibleRectWithZoom(zone) {
+            const zoom = this.getViewportZoomLevel();
+            const rect = this.getVisibleRectWithoutHeaders(zone);
+            rect.width = rect.width * zoom;
+            rect.height = rect.height * zoom;
+            rect.x = rect.x * zoom + this.gridOffsetX * zoom;
+            rect.y = rect.y * zoom + this.gridOffsetY * zoom;
+            return rect;
+        }
         /**
          * Computes the coordinates and size to draw the zone without taking the grid offset into account
          */
@@ -52614,6 +52661,9 @@ stores.inject(MyMetaStore, storeInstance);
                 };
             });
         }
+        getViewportZoomLevel() {
+            return this.zoomLevel;
+        }
         // ---------------------------------------------------------------------------
         // Private
         // ---------------------------------------------------------------------------
@@ -56875,7 +56925,7 @@ stores.inject(MyMetaStore, storeInstance);
                 background: context.background,
                 title: context.title || { text: "" },
                 type: "gauge",
-                dataRange: context.range ? context.range[0].dataRange : undefined,
+                dataRange: context.range?.[0]?.dataRange,
                 sectionRule: {
                     colors: {
                         lowerColor: DEFAULT_GAUGE_LOWER_COLOR,
@@ -58261,22 +58311,26 @@ stores.inject(MyMetaStore, storeInstance);
         }
         onPointerDownInMasterChart(ev) {
             this.removeEventListeners();
-            const position = ev.offsetX;
+            const zoomedEvent = withZoom(this.env, ev, this.masterChartCanvas.el?.getBoundingClientRect());
+            const position = zoomedEvent.offsetX;
             if (!this.masterChart?.chartArea || !this.chart?.scales?.x) {
                 return;
             }
             const { left, right, top, bottom } = this.masterChart.chartArea;
             const xMax = this.upperBound ?? right;
             const xMin = this.lowerBound ?? left;
-            if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+            if (position < left - 5 ||
+                position > right + 5 ||
+                zoomedEvent.offsetY < top ||
+                zoomedEvent.offsetY > bottom) {
                 return;
             }
             ev.preventDefault();
             ev.stopPropagation();
             let startingPositionOnChart, windowSize, startX;
-            const startingEventPosition = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+            const startingEventPosition = position;
             if ((xMin !== left || xMax !== right) && position > xMin + 5 && position < xMax - 5) {
-                startingPositionOnChart = ev.offsetX - xMin;
+                startingPositionOnChart = zoomedEvent.offsetX - xMin;
                 this.mode = "moveInMaster";
                 const currentLimits = this.store.currentAxesLimits[this.chartId]?.x;
                 windowSize =
@@ -58325,7 +58379,8 @@ stores.inject(MyMetaStore, storeInstance);
                 return { min: xMin, max: xMax };
             };
             const onDragFromMasterChart = (ev) => {
-                const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+                const zoomedEvent = withZoom(this.env, ev, this.masterChartCanvas.el?.getBoundingClientRect());
+                const position = zoomedEvent.offsetX;
                 if (Math.abs(position - startingEventPosition) < 5) {
                     return;
                 }
@@ -58336,7 +58391,8 @@ stores.inject(MyMetaStore, storeInstance);
             };
             const onPointerUpInMasterChart = (ev) => {
                 this.removeEventListeners();
-                const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+                const zoomedEvent = withZoom(this.env, ev, this.masterChartCanvas.el?.getBoundingClientRect());
+                const position = zoomedEvent.offsetX;
                 if (Math.abs(position - startingEventPosition) > 5) {
                     let { min: xMin, max: xMax } = computeNewAxisLimits(position);
                     if (xMin !== undefined && xMax !== undefined) {
@@ -58363,7 +58419,7 @@ stores.inject(MyMetaStore, storeInstance);
             window.addEventListener("pointerup", onPointerUpInMasterChart, true);
         }
         onPointerMoveInMasterChart(ev) {
-            const { offsetX: x, offsetY: y } = ev;
+            const { offsetX: x, offsetY: y } = withZoom(this.env, ev, ev.target?.getBoundingClientRect());
             if (this.mode === undefined) {
                 const target = ev.target;
                 if (!this.masterChart?.chartArea) {
@@ -58396,7 +58452,8 @@ stores.inject(MyMetaStore, storeInstance);
         }
         onDoubleClickInMasterChart(ev) {
             this.mode = undefined;
-            const position = ev.offsetX;
+            const zoomedEvent = withZoom(this.env, ev, this.masterChartCanvas.el?.getBoundingClientRect());
+            const position = zoomedEvent.offsetX;
             if (!this.masterChart?.chartArea || !this.chart?.scales.x) {
                 return;
             }
@@ -58406,7 +58463,10 @@ stores.inject(MyMetaStore, storeInstance);
             if (upperBound < lowerBound) {
                 [upperBound, lowerBound] = [lowerBound, upperBound];
             }
-            if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+            if (position < left - 5 ||
+                position > right + 5 ||
+                zoomedEvent.offsetY < top ||
+                zoomedEvent.offsetY > bottom) {
                 return;
             }
             ev.preventDefault();
@@ -58841,7 +58901,7 @@ stores.inject(MyMetaStore, storeInstance);
             });
         }
         drawGaugeWithAnimation() {
-            drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue: 0 });
+            drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue: 0 }, undefined);
             const gaugeValue = this.runtime.gaugeValue?.value || 0;
             const upperBound = this.runtime.maxValue.value;
             const finalValue = Math.sign(gaugeValue) * Math.min(Math.abs(gaugeValue), Math.abs(upperBound));
@@ -58849,7 +58909,7 @@ stores.inject(MyMetaStore, storeInstance);
                 return null;
             }
             const lowerBound = this.runtime.minValue.value;
-            const animation = new Animation(lowerBound, finalValue, ANIMATION_DURATION, (animationValue) => drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue }));
+            const animation = new Animation(lowerBound, finalValue, ANIMATION_DURATION, (animationValue) => drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue }, undefined));
             animation.start();
             return animation;
         }
@@ -60069,7 +60129,13 @@ stores.inject(MyMetaStore, storeInstance);
         onContextMenu(ev) {
             if (this.env.isDashboard())
                 return;
-            this.openContextMenu({ x: ev.clientX, y: ev.clientY, width: 0, height: 0 });
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            this.openContextMenu({
+                x: zoomedMouseEvent.clientX,
+                y: zoomedMouseEvent.clientY,
+                width: 0,
+                height: 0,
+            });
         }
         showMenu() {
             this.openContextMenu(getRefBoundingRect(this.menuButtonRef));
@@ -61669,7 +61735,7 @@ stores.inject(MyMetaStore, storeInstance);
         }
         getCss(html) {
             return cssPropertiesToCss({
-                color: html.color || "#000000",
+                color: html.color,
                 background: html.backgroundColor,
             });
         }
@@ -61824,6 +61890,9 @@ stores.inject(MyMetaStore, storeInstance);
                     const span = document.createElement("span");
                     span.innerText = content.value;
                     span.style.color = content.color || "";
+                    if (content.opacity !== undefined && content.opacity !== 1) {
+                        span.style.opacity = content.opacity.toString();
+                    }
                     span.addEventListener("mousemove", () => {
                         content.onHover?.(getBoundingRectAsPOJO(span));
                     });
@@ -61905,7 +61974,7 @@ stores.inject(MyMetaStore, storeInstance);
                     else {
                         text += NEWLINE;
                     }
-                    emptyParagraph = ["<br>", "<span><br></span>"].includes(current.value.innerHTML);
+                    emptyParagraph = isEmptyParagraph(current.value);
                     continue;
                 }
                 if (!current.value.hasChildNodes()) {
@@ -61919,12 +61988,29 @@ stores.inject(MyMetaStore, storeInstance);
         }
     }
     function compareContentToSpanElement(content, node) {
-        const contentColor = content.color ? toHex(content.color) : "";
-        const nodeColor = node.style?.color ? toHex(node.style.color) : "";
+        const contentColor = content.color || "";
+        const nodeColor = node.style?.color || "";
+        const nodeOpacity = node.style?.opacity || "1";
         const sameColor = contentColor === nodeColor;
         const sameClass = deepEquals$1(content.classes, [...node.classList]);
         const sameContent = node.innerText === content.value;
-        return sameColor && sameClass && sameContent;
+        const sameOpacity = (content.opacity ?? 1).toString() === nodeOpacity;
+        return sameColor && sameClass && sameContent && sameOpacity;
+    }
+    const doc = new DOMParser();
+    const brNode = doc.parseFromString("<br>", "text/html").body.firstChild;
+    const spanBrNode = doc.parseFromString("<span><br></span>", "text/html").body.firstChild;
+    function isEmptyParagraph(node) {
+        if (node.childNodes.length > 1)
+            return false;
+        const node2 = node.firstChild?.cloneNode(true);
+        if (!node2)
+            return true;
+        if (!(node2 instanceof Element))
+            return false;
+        node2.removeAttribute("class");
+        node2.removeAttribute("style");
+        return node2.isEqualNode(brNode) || node2.isEqualNode(spanBrNode) || false;
     }
 
     class FunctionDescriptionProvider extends owl.Component {
@@ -61932,6 +62018,7 @@ stores.inject(MyMetaStore, storeInstance);
         static props = {
             functionDescription: Object,
             argsToFocus: Array,
+            repeatingArgGroupIndex: { type: Number, optional: true },
         };
         static components = { Collapse };
         state = owl.useState({
@@ -61943,8 +62030,70 @@ stores.inject(MyMetaStore, storeInstance);
         getContext() {
             return this.props;
         }
-        get formulaArgSeparator() {
-            return this.env.model.getters.getLocale().formulaArgSeparator + " ";
+        get formulaHeaderContent() {
+            const { functionDescription, repeatingArgGroupIndex, argsToFocus } = this.props;
+            const argSeparator = this.env.model.getters.getLocale().formulaArgSeparator + " ";
+            const result = [
+                { content: functionDescription.name + " ( " },
+            ];
+            for (let i = 0; i < functionDescription.args.length; i++) {
+                const arg = functionDescription.args[i];
+                const isRepeating = arg.repeating;
+                if (i > 0) {
+                    result.push({ content: argSeparator });
+                }
+                if (isRepeating) {
+                    // treat all repeating args in one go
+                    const displayBrackets = arg.optional || (repeatingArgGroupIndex ?? 0) > 0;
+                    const repeatingArgNames = functionDescription.args
+                        .slice(i, i + functionDescription.nbrArgRepeating)
+                        .map((arg) => arg.name);
+                    if (repeatingArgGroupIndex) {
+                        result.push({ content: "... " + argSeparator });
+                    }
+                    if (displayBrackets) {
+                        result.push({ content: "[" });
+                    }
+                    for (let idx = 0; idx < repeatingArgNames.length; idx++) {
+                        const name = repeatingArgNames[idx];
+                        const argIndex = i + idx;
+                        const focused = argsToFocus.includes(argIndex);
+                        result.push({ content: name + ((repeatingArgGroupIndex ?? 0) + 1), focused });
+                        // Add separator after each element except the last
+                        if (idx < repeatingArgNames.length - 1) {
+                            result.push({ content: argSeparator });
+                        }
+                    }
+                    if (displayBrackets) {
+                        result.push({ content: "]" });
+                    }
+                    result.push({ content: argSeparator + "[" });
+                    for (let idx = 0; idx < repeatingArgNames.length; idx++) {
+                        const name = repeatingArgNames[idx];
+                        result.push({ content: name + ((repeatingArgGroupIndex ?? 0) + 2) });
+                        // Add separator after each element except the last
+                        if (idx < repeatingArgNames.length - 1) {
+                            result.push({ content: argSeparator });
+                        }
+                    }
+                    result.push({ content: "]" + argSeparator + "... " });
+                    // Skip the processed repeating args
+                    i += functionDescription.nbrArgRepeating - 1;
+                }
+                else {
+                    const displayBrackets = arg.optional || arg.default;
+                    const focused = argsToFocus.includes(i);
+                    if (displayBrackets) {
+                        result.push({ content: "[" });
+                    }
+                    result.push({ content: arg.name, focused });
+                    if (displayBrackets) {
+                        result.push({ content: "]" });
+                    }
+                }
+            }
+            result.push({ content: " )" });
+            return result;
         }
     }
 
@@ -62014,6 +62163,7 @@ stores.inject(MyMetaStore, storeInstance);
             showDescription: false,
             functionDescription: {},
             argsToFocus: [],
+            repeatingArgGroupIndex: 0,
         });
         assistant = owl.useState({
             forcedClosed: false,
@@ -62451,10 +62601,6 @@ stores.inject(MyMetaStore, storeInstance);
             const { end, start } = this.props.composerStore.composerSelection;
             for (let index = 0; index < tokens.length; index++) {
                 const token = tokens[index];
-                let color = token.color || DEFAULT_TOKEN_COLOR;
-                if (token.isBlurred) {
-                    color = setColorAlpha(color, 0.5);
-                }
                 const classes = [];
                 if (token.type === "REFERENCE" &&
                     this.props.composerStore.tokenAtCursor === token &&
@@ -62472,7 +62618,8 @@ stores.inject(MyMetaStore, storeInstance);
                 }
                 result.push({
                     value: token.value,
-                    color,
+                    color: token.color || DEFAULT_TOKEN_COLOR,
+                    opacity: token.isBlurred ? 0.5 : 1,
                     classes,
                     onHover: (rect) => this.onTokenHover(index, rect),
                     onStopHover: () => this.onTokenHover(undefined),
@@ -62552,9 +62699,21 @@ stores.inject(MyMetaStore, storeInstance);
                     const isParenthesisClosed = this.props.composerStore.currentTokens.some((t) => t.type === "RIGHT_PAREN" && t.parenthesesCode === token.parenthesesCode);
                     this.functionDescriptionState.argsToFocus = this.getArgsToFocus(isParenthesisClosed, description, nbrArgSupplied, argPosition);
                     this.functionDescriptionState.showDescription = true;
+                    this.functionDescriptionState.repeatingArgGroupIndex = this.getRepeatingArgGroupIndex(description, nbrArgSupplied, argPosition);
                 }
             }
         }
+        getRepeatingArgGroupIndex(description, nbrArgSupplied, argPosition) {
+            const { minArgRequired, maxArgPossible, nbrArgRepeating } = description;
+            if (!nbrArgRepeating) {
+                return undefined;
+            }
+            const groupsOfOptionalRepeatingValues = nbrArgRepeating
+                ? Math.ceil((nbrArgSupplied - minArgRequired) / nbrArgRepeating)
+                : 0;
+            const nbrArgSuppliedRoundedToGroupOfRepeating = groupsOfOptionalRepeatingValues * nbrArgRepeating + minArgRequired;
+            return (argTargeting(description, Math.max(Math.min(maxArgPossible, nbrArgSuppliedRoundedToGroupOfRepeating), minArgRequired))(argPosition).repeatingGroupIndex ?? 0);
+        }
         /**
          * Compute the arguments to focus depending on the current value position.
          *
@@ -62564,11 +62723,11 @@ stores.inject(MyMetaStore, storeInstance);
          * This function computes all the possible arguments to focus for different numbers of arguments supplied.
          */
         getArgsToFocus(isParenthesisClosed, description, nbrArgSupplied, argPosition) {
-            const { nbrArgRepeating, minArgRequired, nbrArgOptional, maxArgPossible } = description;
+            const { nbrArgRepeating, minArgRequired, nbrOptionalNonRepeatingArgs, maxArgPossible } = description;
             // When the parenthesis is closed, we consider the user is done with the function,
             // so we know exactly the number of arguments supplied.
             if (isParenthesisClosed) {
-                const focusedArg = argTargeting(description, Math.max(Math.min(maxArgPossible, nbrArgSupplied), minArgRequired))(argPosition);
+                const focusedArg = argTargeting(description, Math.max(Math.min(maxArgPossible, nbrArgSupplied), minArgRequired))(argPosition)?.index;
                 return focusedArg !== undefined ? [focusedArg] : [];
             }
             // Otherwise, the user is still typing the formula, so we don't know yet how many arguments the user will supply.
@@ -62577,11 +62736,11 @@ stores.inject(MyMetaStore, storeInstance);
             const maxArgsNumberPossibility = nbrArgRepeating
                 ? minArgRequired +
                     Math.ceil((minArgsNumberPossibility - minArgRequired) / nbrArgRepeating) * nbrArgRepeating +
-                    nbrArgOptional
+                    nbrOptionalNonRepeatingArgs
                 : maxArgPossible;
             const argsToFocus = [];
             for (let i = minArgsNumberPossibility; i <= maxArgsNumberPossibility; i++) {
-                const focusedArg = argTargeting(description, i)(argPosition);
+                const focusedArg = argTargeting(description, i)(argPosition)?.index;
                 if (focusedArg !== undefined) {
                     argsToFocus.push(focusedArg);
                 }
@@ -63017,6 +63176,7 @@ stores.inject(MyMetaStore, storeInstance);
             this.highlightStore.register(this);
             this.onDispose(() => {
                 this.highlightStore.unRegister(this);
+                this._cancelEdition();
             });
         }
         handleEvent(event) {
@@ -67486,6 +67646,17 @@ stores.inject(MyMetaStore, storeInstance);
         isReadonlyAllowed: true,
         icon: "o-spreadsheet-Icon.IRREGULARITY_MAP",
     };
+    function zoomAction(zoom) {
+        return {
+            name: _t$1("%(zoom_percentage)s%", { zoom_percentage: zoom }),
+            execute: (env) => {
+                env.model.dispatch("SET_ZOOM", { zoom: zoom / 100 });
+            },
+            isActive: (env) => env.model.getters.getViewportZoomLevel() === zoom / 100,
+            isReadonlyAllowed: true,
+            sequence: zoom,
+        };
+    }
     const viewFormulas = {
         name: _t$1("Formulas"),
         isActive: (env) => env.model.getters.shouldShowFormulas(),
@@ -69612,13 +69783,14 @@ stores.inject(MyMetaStore, storeInstance);
             }
             const sheetId = getters.getActiveSheetId();
             const position = gridOverlayPosition();
+            const zoomedMouseEvent = withZoom(env, currentEv, position);
             const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
             const { top, left, bottom, right } = getters.getActiveMainViewport();
             let { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
             const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
             let canEdgeScroll = false;
             let timeoutDelay = MAX_DELAY;
-            const x = currentEv.clientX - position.left;
+            const x = zoomedMouseEvent.clientX - position.left;
             let colIndex = getters.getColIndex(x);
             if (scrollDirection !== "vertical") {
                 const previousX = previousEvClientPosition.clientX - position.left;
@@ -69646,7 +69818,7 @@ stores.inject(MyMetaStore, storeInstance);
                     scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
                 }
             }
-            const y = currentEv.clientY - position.top;
+            const y = zoomedMouseEvent.clientY - position.top;
             let rowIndex = getters.getRowIndex(y);
             if (scrollDirection !== "horizontal") {
                 const previousY = previousEvClientPosition.clientY - position.top;
@@ -69686,7 +69858,10 @@ stores.inject(MyMetaStore, storeInstance);
                     pointerMoveHandler(currentEv);
                 }, Math.round(timeoutDelay));
             }
-            previousEvClientPosition = { clientX: currentEv.clientX, clientY: currentEv.clientY };
+            previousEvClientPosition = {
+                clientX: zoomedMouseEvent.clientX,
+                clientY: zoomedMouseEvent.clientY,
+            };
         };
         const pointerUpHandler = () => {
             pointerUpCallback?.();
@@ -69728,30 +69903,30 @@ stores.inject(MyMetaStore, storeInstance);
             isVisible: Boolean,
         };
         state = owl.useState({
-            position: { left: 0, top: 0 },
+            position: { x: 0, y: 0 },
             handler: false,
         });
         dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
         get style() {
-            const { left, top } = this.props.position;
+            const { x, y } = this.props.position;
             return cssPropertiesToCss({
-                top: `${top}px`,
-                left: `${left}px`,
+                top: `${y}px`,
+                left: `${x}px`,
                 visibility: this.props.isVisible ? "visible" : "hidden",
             });
         }
         get handlerStyle() {
-            const { left, top } = this.state.handler ? this.state.position : this.props.position;
+            const { x, y } = this.state.handler ? this.state.position : this.props.position;
             return cssPropertiesToCss({
-                top: `${top}px`,
-                left: `${left}px`,
+                top: `${y}px`,
+                left: `${x}px`,
             });
         }
         get styleNextValue() {
-            const { left, top } = this.state.position;
+            const { x, y } = this.state.position;
             return cssPropertiesToCss({
-                top: `${top + 5}px`,
-                left: `${left + 15}px`,
+                top: `${y + 5}px`,
+                left: `${x + 15}px`,
             });
         }
         getTooltip() {
@@ -69763,11 +69938,13 @@ stores.inject(MyMetaStore, storeInstance);
         }
         onMouseDown(ev) {
             this.state.handler = true;
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            const zoom = this.env.model.getters.getViewportZoomLevel();
             let lastCol;
             let lastRow;
             const start = {
-                left: ev.clientX - this.props.position.left,
-                top: ev.clientY - this.props.position.top,
+                x: ev.clientX / zoom - this.props.position.x,
+                y: ev.clientY / zoom - this.props.position.y,
             };
             const onMouseUp = () => {
                 this.state.handler = false;
@@ -69776,8 +69953,8 @@ stores.inject(MyMetaStore, storeInstance);
             };
             const onMouseMove = (col, row, ev) => {
                 this.state.position = {
-                    left: ev.clientX - start.left,
-                    top: ev.clientY - start.top,
+                    x: ev.clientX / zoom - start.x,
+                    y: ev.clientY / zoom - start.y,
                 };
                 if (lastCol !== col || lastRow !== row) {
                     const activeSheetId = this.env.model.getters.getActiveSheetId();
@@ -69790,7 +69967,7 @@ stores.inject(MyMetaStore, storeInstance);
                     }
                 }
             };
-            this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
+            this.dragNDropGrid.start(zoomedMouseEvent, onMouseMove, onMouseUp);
         }
         onDblClick() {
             this.env.model.dispatch("AUTOFILL_AUTO");
@@ -70725,7 +70902,8 @@ stores.inject(MyMetaStore, storeInstance);
                 return;
             }
             const sheetId = this.env.model.getters.getActiveSheetId();
-            const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+            const zoom = this.env.model.getters.getViewportZoomLevel();
+            const initialMousePosition = { x: ev.clientX / zoom, y: ev.clientY / zoom };
             const initialScrollPosition = this.env.model.getters.getActiveSheetScrollInfo();
             const initialFigure = this.toBottomRightViewport(figureUI);
             const maxDimensions = {
@@ -70735,7 +70913,7 @@ stores.inject(MyMetaStore, storeInstance);
             let hasStartedDnd = false;
             const onMouseMove = (ev) => {
                 const getters = this.env.model.getters;
-                const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+                const currentMousePosition = { x: ev.clientX / zoom, y: ev.clientY / zoom };
                 const offsetX = Math.abs(currentMousePosition.x - initialMousePosition.x);
                 const offsetY = Math.abs(currentMousePosition.y - initialMousePosition.y);
                 if (!hasStartedDnd && offsetX < DRAG_THRESHOLD && offsetY < DRAG_THRESHOLD) {
@@ -70798,17 +70976,18 @@ stores.inject(MyMetaStore, storeInstance);
          */
         startResize(figureUI, dirX, dirY, ev) {
             ev.stopPropagation();
-            const initialMousePosition = { x: ev.clientX, y: ev.clientY };
             const initialScrollPosition = this.env.model.getters.getActiveSheetScrollInfo();
             const keepRatio = figureRegistry.get(figureUI.tag).keepRatio || false;
             const minFigSize = figureRegistry.get(figureUI.tag).minFigSize || MIN_FIG_SIZE;
+            const zoom = this.env.model.getters.getViewportZoomLevel();
             const sheetId = this.env.model.getters.getActiveSheetId();
+            const initialMousePosition = { x: ev.clientX / zoom, y: ev.clientY / zoom };
             const maxDimensions = {
                 maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
                 maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end,
             };
             const onMouseMove = (ev) => {
-                const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+                const currentMousePosition = { x: ev.clientX / zoom, y: ev.clientY / zoom };
                 const draggedFigure = dragFigureForResize(figureUI, dirX, dirY, currentMousePosition, initialMousePosition, keepRatio, minFigSize, initialScrollPosition, this.env.model.getters.getActiveSheetScrollInfo(), maxDimensions);
                 const otherFigures = this.getOtherFigures(figureUI.id);
                 const snapResult = snapForResize(this.env.model.getters, dirX, dirY, draggedFigure, otherFigures);
@@ -71220,11 +71399,11 @@ stores.inject(MyMetaStore, storeInstance);
             const row = env.model.getters.getRowIndex(y);
             return { col, row };
         }
-        function getOffsetRelativeToOverlay(ev) {
+        function getOffsetRelativeToOverlay(zoomedMouseEvent) {
             const gridRect = getBoundingRectAsPOJO(gridRef.el);
             return {
-                x: ev.clientX - gridRect.x,
-                y: ev.clientY - gridRect.y,
+                x: zoomedMouseEvent.clientX - gridRect.x,
+                y: zoomedMouseEvent.clientY - gridRect.y,
             };
         }
         const { pause, resume } = useInterval(checkTiming, 200);
@@ -71241,9 +71420,9 @@ stores.inject(MyMetaStore, storeInstance);
                 setPosition(col, row);
             }
         }
-        function updateMousePosition(e) {
-            if (isChildEvent(gridRef.el, e)) {
-                ({ x, y } = getOffsetRelativeToOverlay(e));
+        function updateMousePosition(zoomedMouseEvent) {
+            if (isChildEvent(gridRef.el, zoomedMouseEvent.ev)) {
+                ({ x, y } = getOffsetRelativeToOverlay(zoomedMouseEvent));
                 lastMoved = Date.now();
                 hoveredTable.hover(getPosition());
             }
@@ -71255,20 +71434,21 @@ stores.inject(MyMetaStore, storeInstance);
             }
         }
         function onMouseLeave(e) {
-            const { x, y } = getOffsetRelativeToOverlay(e);
+            const zoomedMouseEvent = withZoom(env, e);
+            const { x, y } = getOffsetRelativeToOverlay(zoomedMouseEvent);
             const gridRect = getBoundingRectAsPOJO(gridRef.el);
             if (y < 0 || y > gridRect.height || x < 0 || x > gridRect.width) {
-                return updateMousePosition(e);
+                return updateMousePosition(zoomedMouseEvent);
             }
             else {
                 return pause();
             }
         }
-        useRefListener(gridRef, "pointermove", (ev) => !env.isMobile() && updateMousePosition(ev));
+        useRefListener(gridRef, "pointermove", (ev) => !env.isMobile() && updateMousePosition(withZoom(env, ev)));
         useRefListener(gridRef, "mouseleave", onMouseLeave);
         useRefListener(gridRef, "mouseenter", resume);
         useRefListener(gridRef, "pointerdown", recompute);
-        useRefListener(gridRef, "pointerdown", (ev) => env.isMobile() && updateMousePosition(ev));
+        useRefListener(gridRef, "pointerdown", (ev) => env.isMobile() && updateMousePosition(withZoom(env, ev)));
         owl.useExternalListener(window, "click", handleGlobalClick);
         function handleGlobalClick(e) {
             const target = e.target;
@@ -71353,7 +71533,7 @@ stores.inject(MyMetaStore, storeInstance);
             if (this.env.isMobile()) {
                 return;
             }
-            const icon = this.getInteractiveIconAtEvent(ev);
+            const icon = this.getInteractiveIconAtEvent(withZoom(this.env, ev));
             const hoveredIcon = icon?.type ? { id: icon.type, position: icon.position } : undefined;
             if (!deepEquals$1(hoveredIcon, this.hoveredIconStore.hoveredIcon)) {
                 this.hoveredIconStore.setHoveredIcon(hoveredIcon);
@@ -71364,30 +71544,30 @@ stores.inject(MyMetaStore, storeInstance);
                 // not main button, probably a context menu
                 return;
             }
-            this.onCellClicked(ev);
+            this.onCellClicked(withZoom(this.env, ev));
         }
         onClick(ev) {
             if (ev.button > 0 || !this.env.isMobile()) {
                 // not main button, probably a context menu
                 return;
             }
-            this.onCellClicked(ev);
+            this.onCellClicked(withZoom(this.env, ev));
         }
-        onCellClicked(ev) {
+        onCellClicked(zoomedMouseEvent) {
             const openedPopover = this.cellPopovers.persistentCellPopover;
-            const [col, row] = this.getCartesianCoordinates(ev);
-            const clickedIcon = this.getInteractiveIconAtEvent(ev);
+            const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
+            const clickedIcon = this.getInteractiveIconAtEvent(zoomedMouseEvent);
             if (clickedIcon) {
                 this.env.model.selection.getBackToDefault();
             }
             this.props.onCellClicked(col, row, {
-                expandZone: ev.shiftKey,
-                addZone: isCtrlKey(ev),
-            }, ev);
+                expandZone: zoomedMouseEvent.ev.shiftKey,
+                addZone: isCtrlKey(zoomedMouseEvent.ev),
+            }, zoomedMouseEvent);
             if (clickedIcon?.onClick) {
                 clickedIcon.onClick(clickedIcon.position, this.env);
             }
-            if (ev.target === this.gridOverlay.el &&
+            if (zoomedMouseEvent.ev.target === this.gridOverlay.el &&
                 this.cellPopovers.isOpen &&
                 deepEquals$1(openedPopover, this.cellPopovers.persistentCellPopover)) {
                 // Only close the popover if props.click/icon.click didn't open a new one
@@ -71396,30 +71576,28 @@ stores.inject(MyMetaStore, storeInstance);
             }
         }
         onDoubleClick(ev) {
-            if (this.getInteractiveIconAtEvent(ev)) {
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            if (this.getInteractiveIconAtEvent(zoomedMouseEvent)) {
                 return;
             }
-            const [col, row] = this.getCartesianCoordinates(ev);
+            const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
             this.props.onCellDoubleClicked(col, row);
         }
         onContextMenu(ev) {
-            const [col, row] = this.getCartesianCoordinates(ev);
+            const [col, row] = this.getCartesianCoordinates(withZoom(this.env, ev));
             this.props.onCellRightClicked(col, row, { x: ev.clientX, y: ev.clientY });
         }
-        getCartesianCoordinates(ev) {
-            const gridOverLayRect = getRefBoundingRect(this.gridOverlay);
-            const x = ev.clientX - gridOverLayRect.x;
-            const y = ev.clientY - gridOverLayRect.y;
-            const colIndex = this.env.model.getters.getColIndex(x);
-            const rowIndex = this.env.model.getters.getRowIndex(y);
+        getCartesianCoordinates(zoomedMouseEvent) {
+            const colIndex = this.env.model.getters.getColIndex(zoomedMouseEvent.offsetX);
+            const rowIndex = this.env.model.getters.getRowIndex(zoomedMouseEvent.offsetY);
             return [colIndex, rowIndex];
         }
-        getInteractiveIconAtEvent(ev) {
+        getInteractiveIconAtEvent(zoomedMouseEvent) {
             const gridOverLayRect = getRefBoundingRect(this.gridOverlay);
             const gridOffset = this.env.model.getters.getGridOffset();
-            const x = ev.clientX - gridOverLayRect.x + gridOffset.x;
-            const y = ev.clientY - gridOverLayRect.y + gridOffset.y;
-            const [col, row] = this.getCartesianCoordinates(ev);
+            const x = zoomedMouseEvent.clientX - gridOverLayRect.x + gridOffset.x;
+            const y = zoomedMouseEvent.clientY - gridOverLayRect.y + gridOffset.y;
+            const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
             const sheetId = this.env.model.getters.getActiveSheetId();
             let position = { col, row, sheetId };
             const merge = this.env.model.getters.getMerge(position);
@@ -71454,7 +71632,8 @@ stores.inject(MyMetaStore, storeInstance);
             if (!popover.isOpen) {
                 return { isOpen: false };
             }
-            const anchorRect = popover.anchorRect;
+            const zoom = this.env.model.getters.getViewportZoomLevel();
+            const anchorRect = getZoomedRect(zoom, popover.anchorRect);
             return {
                 ...popover,
                 // transform from the "canvas coordinate system" to the "body coordinate system"
@@ -71559,8 +71738,8 @@ stores.inject(MyMetaStore, storeInstance);
         setup() {
             this.composerFocusStore = useStore(ComposerFocusStore);
         }
-        _computeHandleDisplay(ev) {
-            const position = this._getEvOffset(ev);
+        _computeHandleDisplay(zoomedMouseEvent) {
+            const position = this._getEvOffset(zoomedMouseEvent);
             const elementIndex = this._getElementIndex(position);
             if (elementIndex < 0) {
                 return;
@@ -71580,8 +71759,8 @@ stores.inject(MyMetaStore, storeInstance);
                 this.state.resizerIsActive = false;
             }
         }
-        _computeGrabDisplay(ev) {
-            const index = this._getElementIndex(this._getEvOffset(ev));
+        _computeGrabDisplay(zoomedMouseEvent) {
+            const index = this._getElementIndex(this._getEvOffset(zoomedMouseEvent));
             const activeElements = this._getActiveElements();
             const selectedZoneStart = this._getSelectedZoneStart();
             const selectedZoneEnd = this._getSelectedZoneEnd();
@@ -71597,26 +71776,29 @@ stores.inject(MyMetaStore, storeInstance);
             if (this.env.isMobile()) {
                 return;
             }
+            const zoomedMouseEvent = withZoom(this.env, ev);
             if (this.state.isResizing || this.state.isMoving || this.state.isSelecting) {
                 return;
             }
-            this._computeHandleDisplay(ev);
-            this._computeGrabDisplay(ev);
+            this._computeHandleDisplay(zoomedMouseEvent);
+            this._computeGrabDisplay(zoomedMouseEvent);
         }
         onMouseLeave() {
             this.state.resizerIsActive = this.state.isResizing;
             this.state.waitingForMove = false;
         }
         onDblClick(ev) {
+            const zoomedMouseEvent = withZoom(this.env, ev);
             this._fitElementSize(this.state.activeElement);
             this.state.isResizing = false;
-            this._computeHandleDisplay(ev);
-            this._computeGrabDisplay(ev);
+            this._computeHandleDisplay(zoomedMouseEvent);
+            this._computeGrabDisplay(zoomedMouseEvent);
         }
         onMouseDown(ev) {
             this.state.isResizing = true;
             this.state.delta = 0;
-            const initialPosition = this._getClientPosition(ev);
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            const initialPosition = this._getClientPosition(zoomedMouseEvent);
             const styleValue = this.state.draggerLinePosition;
             const size = this._getElementSize(this.state.activeElement);
             const minSize = styleValue - size + this.MIN_ELEMENT_SIZE;
@@ -71628,7 +71810,7 @@ stores.inject(MyMetaStore, storeInstance);
                 }
             };
             const onMouseMove = (ev) => {
-                this.state.delta = this._getClientPosition(ev) - initialPosition;
+                this.state.delta = this._getClientPosition(withZoom(this.env, ev)) - initialPosition;
                 this.state.draggerLinePosition = styleValue + this.state.delta;
                 if (this.state.draggerLinePosition < minSize) {
                     this.state.draggerLinePosition = minSize;
@@ -71649,7 +71831,8 @@ stores.inject(MyMetaStore, storeInstance);
                 // not main button, probably a context menu
                 return;
             }
-            const index = this._getElementIndex(this._getEvOffset(ev));
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            const index = this._getElementIndex(this._getEvOffset(zoomedMouseEvent));
             this._selectElement(index, false);
         }
         select(ev) {
@@ -71660,7 +71843,8 @@ stores.inject(MyMetaStore, storeInstance);
                 // not main button, probably a context menu
                 return;
             }
-            const index = this._getElementIndex(this._getEvOffset(ev));
+            const zoomedMouseEvent = withZoom(this.env, ev);
+            const index = this._getElementIndex(this._getEvOffset(zoomedMouseEvent));
             if (index < 0) {
                 return;
             }
@@ -71683,6 +71867,7 @@ stores.inject(MyMetaStore, storeInstance);
         startMovement(ev) {
             this.state.waitingForMove = false;
             this.state.isMoving = true;
+            const zoomedMouseEvent = withZoom(this.env, ev);
             const startDimensions = this._getDimensionsInViewport(this._getSelectedZoneStart());
             const endDimensions = this._getDimensionsInViewport(this._getSelectedZoneEnd());
             const defaultPosition = startDimensions.start;
@@ -71719,9 +71904,10 @@ stores.inject(MyMetaStore, storeInstance);
                 if (this.state.base !== this._getSelectedZoneStart()) {
                     this._moveElements();
                 }
-                this._computeGrabDisplay(ev);
+                const zoomedMouseEvent = withZoom(this.env, ev);
+                this._computeGrabDisplay(zoomedMouseEvent);
             };
-            this.dragNDropGrid.start(ev, mouseMoveMovement, mouseUpMovement);
+            this.dragNDropGrid.start(zoomedMouseEvent, mouseMoveMovement, mouseUpMovement);
         }
         startSelection(ev, index) {
             if (this.env.isMobile()) {
@@ -71735,6 +71921,7 @@ stores.inject(MyMetaStore, storeInstance);
                 this._selectElement(index, isCtrlKey(ev));
             }
             this.lastSelectedElementIndex = index;
+            const zoomedMouseEvent = withZoom(this.env, ev);
             const mouseMoveSelect = (col, row) => {
                 const newIndex = this._getType() === "COL" ? col : row;
                 if (newIndex !== this.lastSelectedElementIndex && newIndex !== -1) {
@@ -71745,16 +71932,16 @@ stores.inject(MyMetaStore, storeInstance);
             const mouseUpSelect = () => {
                 this.state.isSelecting = false;
                 this.lastSelectedElementIndex = null;
-                this._computeGrabDisplay(ev);
+                this._computeGrabDisplay(zoomedMouseEvent);
             };
-            this.dragNDropGrid.start(ev, mouseMoveSelect, mouseUpSelect);
+            this.dragNDropGrid.start(zoomedMouseEvent, mouseMoveSelect, mouseUpSelect);
         }
         onMouseUp(ev) {
             this.lastSelectedElementIndex = null;
         }
         onContextMenu(ev) {
             ev.preventDefault();
-            const index = this._getElementIndex(this._getEvOffset(ev));
+            const index = this._getElementIndex(this._getEvOffset(withZoom(this.env, ev)));
             if (index < 0)
                 return;
             if (!this._getActiveElements().has(index)) {
@@ -71781,14 +71968,14 @@ stores.inject(MyMetaStore, storeInstance);
         get sheetId() {
             return this.env.model.getters.getActiveSheetId();
         }
-        _getEvOffset(ev) {
-            return ev.offsetX;
+        _getEvOffset(zoomedMouseEvent) {
+            return zoomedMouseEvent.offsetX;
         }
         _getViewportOffset() {
             return this.env.model.getters.getActiveMainViewport().left;
         }
-        _getClientPosition(ev) {
-            return ev.clientX;
+        _getClientPosition(zoomedMouseEvent) {
+            return zoomedMouseEvent.clientX;
         }
         _getElementIndex(position) {
             return this.env.model.getters.getColIndex(position);
@@ -71923,14 +72110,14 @@ stores.inject(MyMetaStore, storeInstance);
         get sheetId() {
             return this.env.model.getters.getActiveSheetId();
         }
-        _getEvOffset(ev) {
-            return ev.offsetY;
+        _getEvOffset(zoomedMouseEvent) {
+            return zoomedMouseEvent.offsetY;
         }
         _getViewportOffset() {
             return this.env.model.getters.getActiveMainViewport().top;
         }
-        _getClientPosition(ev) {
-            return ev.clientY;
+        _getClientPosition(zoomedMouseEvent) {
+            return zoomedMouseEvent.clientY;
         }
         _getElementIndex(position) {
             return this.env.model.getters.getRowIndex(position);
@@ -72108,6 +72295,9 @@ stores.inject(MyMetaStore, storeInstance);
                     break;
             }
         }
+        finalize() {
+            this.zonesWithPreventedAnimationsInNextFrame = recomputeZones(this.zonesWithPreventedAnimationsInNextFrame);
+        }
         get renderingLayers() {
             return ["Background", "Headers"];
         }
@@ -72879,18 +73069,21 @@ stores.inject(MyMetaStore, storeInstance);
             const canvas = canvasRef.el;
             const dpr = window.devicePixelRatio || 1;
             const ctx = canvas.getContext("2d", { alpha: false });
+            const zoom = Math.max(model.getters.getViewportZoomLevel(), 1);
             const thinLineWidth = 0.4 * dpr;
             const renderingContext = {
                 ctx,
                 dpr,
                 thinLineWidth,
             };
-            const { width, height } = canvasSize();
+            let { width, height } = canvasSize();
+            width = zoom * width;
+            height = zoom * height;
             canvas.style.width = `${width}px`;
             canvas.style.height = `${height}px`;
             canvas.width = width * dpr;
             canvas.height = height * dpr;
-            canvas.setAttribute("style", `width:${width}px;height:${height}px;`);
+            canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom}`);
             if (width === 0 || height === 0) {
                 return;
             }
@@ -72901,7 +73094,7 @@ stores.inject(MyMetaStore, storeInstance);
             // you need to shift the coordinates by 0.5 perpendicular to the line's direction.
             // http://diveintohtml5.info/canvas.html#pixel-madness
             ctx.translate(-CANVAS_SHIFT, -CANVAS_SHIFT);
-            ctx.scale(dpr, dpr);
+            ctx.scale(dpr * zoom, dpr * zoom);
             rendererStore.draw(renderingContext);
         }
     }
@@ -73137,6 +73330,7 @@ stores.inject(MyMetaStore, storeInstance);
         }
         onResizeHighlight(ev, dirX, dirY) {
             const activeSheetId = this.env.model.getters.getActiveSheetId();
+            const zoomedMouseEvent = withZoom(this.env, ev);
             this.highlightState.shiftingMode = "isResizing";
             const z = this.props.range.zone;
             const pivotCol = dirX === 1 ? z.left : z.right;
@@ -73175,11 +73369,12 @@ stores.inject(MyMetaStore, storeInstance);
             const mouseUp = () => {
                 this.highlightState.shiftingMode = "none";
             };
-            this.dragNDropGrid.start(ev, mouseMove, mouseUp, scrollDirection);
+            this.dragNDropGrid.start(zoomedMouseEvent, mouseMove, mouseUp, scrollDirection);
         }
         onMoveHighlight(ev) {
             this.highlightState.shiftingMode = "isMoving";
             const z = this.props.range.zone;
+            const zoomedMouseEvent = withZoom(this.env, ev);
             const position = gridOverlayPosition();
             const activeSheetId = this.env.model.getters.getActiveSheetId();
             const initCol = this.env.model.getters.getColIndex(ev.clientX - position.left);
@@ -73216,7 +73411,7 @@ stores.inject(MyMetaStore, storeInstance);
             const mouseUp = () => {
                 this.highlightState.shiftingMode = "none";
             };
-            this.dragNDropGrid.start(ev, mouseMove, mouseUp);
+            this.dragNDropGrid.start(zoomedMouseEvent, mouseMove, mouseUp);
         }
     }
 
@@ -73322,11 +73517,12 @@ stores.inject(MyMetaStore, storeInstance);
         }
         get position() {
             const { x } = this.env.model.getters.getMainViewportRect();
+            const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
             return {
                 left: `${this.props.leftOffset + x}px`,
                 bottom: "0px",
-                height: `${SCROLLBAR_WIDTH}px`,
-                right: isBrowserFirefox() ? `${SCROLLBAR_WIDTH}px` : "0",
+                height: `${scrollbarWidth}px`,
+                right: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
             };
         }
         onScroll(offset) {
@@ -73367,11 +73563,12 @@ stores.inject(MyMetaStore, storeInstance);
         }
         get position() {
             const { y } = this.env.model.getters.getMainViewportRect();
+            const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
             return {
                 top: `${this.props.topOffset + y}px`,
                 right: "0px",
-                width: `${SCROLLBAR_WIDTH}px`,
-                bottom: isBrowserFirefox() ? `${SCROLLBAR_WIDTH}px` : "0",
+                width: `${scrollbarWidth}px`,
+                bottom: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
             };
         }
         onScroll(offset) {
@@ -73580,34 +73777,38 @@ stores.inject(MyMetaStore, storeInstance);
         }
     }
 
-    class FontSizeEditor extends owl.Component {
-        static template = "o-spreadsheet-FontSizeEditor";
+    class NumberEditor extends owl.Component {
+        static template = "o-spreadsheet-NumberEditor";
         static props = {
-            currentFontSize: Number,
-            onFontSizeChanged: Function,
+            currentValue: Number,
+            onValueChange: Function,
             onToggle: { type: Function, optional: true },
             onFocusInput: { type: Function, optional: true },
             class: String,
+            valueIcon: { type: String, optional: true },
+            min: Number,
+            max: Number,
+            title: String,
+            valueList: (Array),
         };
         static defaultProps = {
             onFocusInput: () => { },
         };
         static components = { Popover };
-        fontSizes = FONT_SIZES;
         dropdown = owl.useState({ isOpen: false });
-        inputRef = owl.useRef("inputFontSize");
-        rootEditorRef = owl.useRef("FontSizeEditor");
-        fontSizeListRef = owl.useRef("fontSizeList");
+        inputRef = owl.useRef("inputNumber");
+        rootEditorRef = owl.useRef("NumberEditor");
+        valueListRef = owl.useRef("numberList");
         setup() {
             owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
             owl.onWillUpdateProps((nextProps) => {
                 if (this.inputRef.el && document.activeElement !== this.inputRef.el) {
-                    this.inputRef.el.value = nextProps.currentFontSize;
+                    this.inputRef.el.value = nextProps.currentValue;
                 }
             });
             owl.onMounted(() => {
                 if (this.inputRef.el) {
-                    this.inputRef.el.value = this.props.currentFontSize.toString();
+                    this.inputRef.el.value = this.props.currentValue.toString();
                 }
             });
         }
@@ -73620,33 +73821,36 @@ stores.inject(MyMetaStore, storeInstance);
             };
         }
         onExternalClick(ev) {
-            if (!isChildEvent(this.fontSizeListRef.el, ev) && !isChildEvent(this.rootEditorRef.el, ev)) {
-                this.closeFontList();
+            if (!isChildEvent(this.valueListRef.el, ev) && !isChildEvent(this.rootEditorRef.el, ev)) {
+                this.closeList();
             }
         }
-        toggleFontList() {
+        toggleList() {
             const isOpen = this.dropdown.isOpen;
             if (!isOpen) {
                 this.props.onToggle?.();
                 this.inputRef.el.focus();
             }
             else {
-                this.closeFontList();
+                this.closeList();
             }
         }
-        closeFontList() {
+        closeList() {
             this.dropdown.isOpen = false;
         }
-        setSize(fontSizeStr) {
-            const fontSize = clip(Math.floor(parseFloat(fontSizeStr)), 1, 400);
-            this.props.onFontSizeChanged(fontSize);
-            this.closeFontList();
+        setValue(valueStr) {
+            const value = clip(Math.floor(parseFloat(valueStr)), this.props.min, this.props.max);
+            this.props.onValueChange(value);
+            this.closeList();
         }
-        setSizeFromInput(ev) {
-            this.setSize(ev.target.value);
+        setValueFromInput(ev) {
+            this.setValue(ev.target.value);
         }
-        setSizeFromList(fontSizeStr) {
-            this.setSize(fontSizeStr);
+        setValueFromList(valueStr) {
+            this.setValue(valueStr);
+        }
+        get currentValue() {
+            return `${this.props.currentValue}`;
         }
         onInputFocused(ev) {
             this.dropdown.isOpen = true;
@@ -73654,17 +73858,33 @@ stores.inject(MyMetaStore, storeInstance);
         }
         onInputKeydown(ev) {
             if (ev.key === "Enter" || ev.key === "Escape") {
-                this.closeFontList();
+                this.closeList();
                 const target = ev.target;
                 // In the case of a ESCAPE key, we get the previous font size back
                 if (ev.key === "Escape") {
-                    target.value = `${this.props.currentFontSize}`;
+                    target.value = `${this.props.currentValue}`;
                 }
                 this.props.onToggle?.();
             }
         }
     }
 
+    class FontSizeEditor extends owl.Component {
+        static template = "o-spreadsheet-FontSizeEditor";
+        static components = { NumberEditor };
+        static props = {
+            currentFontSize: Number,
+            onFontSizeChanged: Function,
+            onToggle: { type: Function, optional: true },
+            onFocusInput: { type: Function, optional: true },
+            class: String,
+        };
+        static defaultProps = {
+            onFocusInput: () => { },
+        };
+        fontSizes = FONT_SIZES;
+    }
+
     class TextStyler extends owl.Component {
         static template = "o-spreadsheet.TextStyler";
         static components = { ColorPickerWidget, ActionButton, FontSizeEditor };
@@ -76681,15 +76901,19 @@ stores.inject(MyMetaStore, storeInstance);
             this.updateConditionalFormat({ rule: this.state.rules.colorScale });
             this.closeMenus();
         }
-        getPreviewGradient() {
+        getColorScalePreviewStyle() {
             const rule = this.state.rules.colorScale;
             const minColor = colorNumberToHex(rule.minimum.color);
             const midColor = colorNumberToHex(rule.midpoint?.color || DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
             const maxColor = colorNumberToHex(rule.maximum.color);
-            const baseString = "background-image: linear-gradient(to right, ";
-            return rule.midpoint === undefined
+            const baseString = "linear-gradient(to right, ";
+            const backgroundImage = rule.midpoint === undefined
                 ? baseString + minColor + ", " + maxColor + ")"
                 : baseString + minColor + ", " + midColor + ", " + maxColor + ")";
+            return cssPropertiesToCss({
+                "background-image": backgroundImage,
+                color: "#000",
+            });
         }
         getThresholdColor(threshold) {
             return threshold
@@ -79035,11 +79259,15 @@ stores.inject(MyMetaStore, storeInstance);
     class PivotDesignPanel extends owl.Component {
         static template = "o-spreadsheet-PivotDesignPanel";
         static props = { pivotId: String };
-        static components = { Section, Checkbox };
+        static components = { Section, Checkbox, NumberInput };
         store;
         setup() {
             this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId, "neverDefer");
         }
+        updatePivotStyleNumberProperty(valueStr, key) {
+            const value = parseInt(valueStr);
+            this.store.update({ style: { ...this.pivotStyle, [key]: isNaN(value) ? undefined : value } });
+        }
         updatePivotStyleProperty(key, value) {
             this.store.update({ style: { ...this.pivotStyle, [key]: value } });
         }
@@ -80204,6 +80432,7 @@ stores.inject(MyMetaStore, storeInstance);
             const tableZone = this.props.table.range.zone;
             const topLeft = { col: tableZone.left, row: tableZone.top };
             document.body.style.cursor = "nwse-resize";
+            const zoomedMouseEvent = withZoom(this.env, ev);
             const onMouseUp = () => {
                 document.body.style.cursor = "";
                 const newTableZone = this.state.highlightZone;
@@ -80225,7 +80454,7 @@ stores.inject(MyMetaStore, storeInstance);
                     bottom: Math.max(row, topLeft.row),
                 };
             };
-            this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
+            this.dragNDropGrid.start(zoomedMouseEvent, onMouseMove, onMouseUp);
         }
         get highlights() {
             if (!this.state.highlightZone)
@@ -80300,7 +80529,9 @@ stores.inject(MyMetaStore, storeInstance);
             this.paintFormatStore = useStore(PaintFormatStore);
             this.clientFocusStore = useStore(ClientFocusStore);
             useStore(ArrayFormulaHighlight);
-            owl.useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
+            owl.useChildSubEnv({
+                getPopoverContainerRect: () => getZoomedRect(this.env.model.getters.getViewportZoomLevel(), this.getGridRect()),
+            });
             owl.useExternalListener(document.body, "cut", this.copy.bind(this, true));
             owl.useExternalListener(document.body, "copy", this.copy.bind(this, false));
             owl.useExternalListener(document.body, "paste", this.paste);
@@ -80326,11 +80557,12 @@ stores.inject(MyMetaStore, storeInstance);
             return this.highlightStore.highlights;
         }
         get gridOverlayDimensions() {
+            const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
             return cssPropertiesToCss({
                 top: `${HEADER_HEIGHT}px`,
                 left: `${HEADER_WIDTH}px`,
-                height: `calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px)`,
-                width: `calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px)`,
+                height: `calc(100% - ${HEADER_HEIGHT + scrollbarWidth}px)`,
+                width: `calc(100% - ${HEADER_WIDTH + scrollbarWidth}px)`,
             });
         }
         onClosePopover() {
@@ -80536,8 +80768,8 @@ stores.inject(MyMetaStore, storeInstance);
             const zone = this.env.model.getters.getSelectedZone();
             const rect = this.env.model.getters.getVisibleRect(zone);
             return {
-                left: rect.x + rect.width - AUTOFILL_EDGE_LENGTH / 2,
-                top: rect.y + rect.height - AUTOFILL_EDGE_LENGTH / 2,
+                x: rect.x + rect.width - AUTOFILL_EDGE_LENGTH / 2,
+                y: rect.y + rect.height - AUTOFILL_EDGE_LENGTH / 2,
             };
         }
         get isAutofillVisible() {
@@ -80593,8 +80825,8 @@ stores.inject(MyMetaStore, storeInstance);
         // ---------------------------------------------------------------------------
         // Zone selection with mouse
         // ---------------------------------------------------------------------------
-        onCellClicked(col, row, modifiers, ev) {
-            ev.preventDefault();
+        onCellClicked(col, row, modifiers, zoomedMouseEvent) {
+            zoomedMouseEvent.ev.preventDefault();
             if (this.composerFocusStore.activeComposer.editionMode === "editing") {
                 this.composerFocusStore.activeComposer.stopEdition();
             }
@@ -80628,7 +80860,7 @@ stores.inject(MyMetaStore, storeInstance);
                     this.paintFormatStore.pasteFormat(this.env.model.getters.getSelectedZones());
                 }
             };
-            this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
+            this.dragNDropGrid.start(zoomedMouseEvent, onMouseMove, onMouseUp);
         }
         onCellDoubleClicked(col, row) {
             const sheetId = this.env.model.getters.getActiveSheetId();
@@ -81842,7 +82074,7 @@ stores.inject(MyMetaStore, storeInstance);
                     htmlContent: [
                         {
                             value: value.label,
-                            color: color ? chipTextColor(color) : undefined,
+                            color: chipTextColor(color || GRAY_200),
                             backgroundColor: color || GRAY_200,
                             classes: ["badge rounded-pill fs-6 fw-normal w-100 mt-1 text-start"],
                         },
@@ -82526,6 +82758,7 @@ stores.inject(MyMetaStore, storeInstance);
         .add("file", {
         name: _t$1("File"),
         sequence: 10,
+        isReadonlyAllowed: true,
     })
         .addChild("settings", ["file"], {
         name: _t$1("Settings"),
@@ -82540,6 +82773,7 @@ stores.inject(MyMetaStore, storeInstance);
         .add("edit", {
         name: _t$1("Edit"),
         sequence: 20,
+        isReadonlyAllowed: true,
     })
         .addChild("undo", ["edit"], {
         ...undo,
@@ -82624,6 +82858,7 @@ stores.inject(MyMetaStore, storeInstance);
         .add("view", {
         name: _t$1("View"),
         sequence: 30,
+        isReadonlyAllowed: true,
     })
         .addChild("unfreeze_panes", ["view"], {
         ...unFreezePane,
@@ -82703,6 +82938,11 @@ stores.inject(MyMetaStore, storeInstance);
         .addChild("view_formulas", ["view", "show"], {
         ...viewFormulas,
         sequence: 10,
+    })
+        .addChild("zoom", ["view"], {
+        name: _t$1("Zoom"),
+        sequence: 1,
+        icon: "o-spreadsheet-Icon.ZOOM",
     })
         .addChild("view_irregularity_map", ["view"], {
         ...irregularityMap,
@@ -82715,6 +82955,7 @@ stores.inject(MyMetaStore, storeInstance);
         .add("insert", {
         name: _t$1("Insert"),
         sequence: 40,
+        isReadonlyAllowed: true,
     })
         .addChild("insert_row", ["insert"], {
         ...insertRow,
@@ -82826,7 +83067,11 @@ stores.inject(MyMetaStore, storeInstance);
         // ---------------------------------------------------------------------
         // FORMAT MENU ITEMS
         // ---------------------------------------------------------------------
-        .add("format", { name: _t$1("Format"), sequence: 50 })
+        .add("format", {
+        name: _t$1("Format"),
+        sequence: 50,
+        isReadonlyAllowed: true,
+    })
         .addChild("format_number", ["format"], {
         ...formatNumberMenuItemSpec,
         name: _t$1("Number"),
@@ -82918,6 +83163,7 @@ stores.inject(MyMetaStore, storeInstance);
         .add("data", {
         name: _t$1("Data"),
         sequence: 60,
+        isReadonlyAllowed: true,
     })
         .addChild("sort_range", ["data"], {
         ...sortRange,
@@ -82991,6 +83237,10 @@ stores.inject(MyMetaStore, storeInstance);
     })
         .addChild("reinsert_dynamic_pivot", ["data"], reinsertDynamicPivotMenu)
         .addChild("reinsert_static_pivot", ["data"], reinsertStaticPivotMenu);
+    // Zoom
+    ZOOM_VALUES.forEach((zoom) => {
+        topbarMenuRegistry.addChild(`zoom${zoom}`, ["view", "zoom"], zoomAction(zoom));
+    });
 
     const genericRepeatsTransforms = [
         repeatSheetDependantCommand,
@@ -84021,7 +84271,9 @@ stores.inject(MyMetaStore, storeInstance);
             this.gridRef = owl.useRef("grid");
             this.hoveredCell = useStore(DelayedHoveredCellStore);
             this.clickableCellsStore = useStore(ClickableCellsStore);
-            owl.useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
+            owl.useChildSubEnv({
+                getPopoverContainerRect: () => getZoomedRect(this.env.model.getters.getViewportZoomLevel(), this.getGridRect()),
+            });
             useGridDrawing("canvas", this.env.model, () => this.env.model.getters.getSheetViewDimension());
             this.onMouseWheel = useWheelHandler((deltaX, deltaY) => {
                 this.moveCanvas(deltaX, deltaY);
@@ -85087,6 +85339,35 @@ stores.inject(MyMetaStore, storeInstance);
         }
     }
 
+    class ToolBarZoom extends owl.Component {
+        static template = "o-spreadsheet-TopBarZoom";
+        static components = { NumberEditor };
+        static props = { class: String };
+        topBarToolStore;
+        valueList = ZOOM_VALUES;
+        setup() {
+            this.topBarToolStore = useToolBarDropdownStore();
+        }
+        get currentFontSize() {
+            const zoom = this.env.model.getters.getViewportZoomLevel() || 1;
+            return zoom * 100;
+        }
+        setZoom(fontSize) {
+            this.env.model.dispatch("SET_ZOOM", { zoom: fontSize / 100 });
+        }
+        toggle() {
+            if (this.topBarToolStore.isActive) {
+                this.topBarToolStore.closeDropdowns();
+            }
+            else {
+                this.topBarToolStore.openDropdown();
+            }
+        }
+        onFocusInput() {
+            this.topBarToolStore.openDropdown();
+        }
+    }
+
     const topBarToolBarRegistry = new ToolBarRegistry();
     topBarToolBarRegistry
         .add("edit")
@@ -85120,6 +85401,13 @@ stores.inject(MyMetaStore, storeInstance);
             class: "o-hoverable-button o-toolbar-button",
         },
         sequence: 4,
+    })
+        .addChild("edit", {
+        component: ToolBarZoom,
+        props: {
+            class: "o-menu-item-button o-hoverable-button o-toolbar-button",
+        },
+        sequence: 5,
     })
         .add("numberFormat")
         .addChild("numberFormat", {
@@ -85563,6 +85851,7 @@ stores.inject(MyMetaStore, storeInstance);
             notifyUser: { type: Function, optional: true },
             raiseError: { type: Function, optional: true },
             askConfirmation: { type: Function, optional: true },
+            colorScheme: { type: String, optional: true },
         };
         static components = {
             TopBar,
@@ -85586,6 +85875,7 @@ stores.inject(MyMetaStore, storeInstance);
         }
         getStyle() {
             const properties = {};
+            const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
             if (this.env.isDashboard()) {
                 properties["grid-template-rows"] = `auto`;
             }
@@ -85596,6 +85886,8 @@ stores.inject(MyMetaStore, storeInstance);
                 ? `${this.sidePanel.totalPanelSize || DEFAULT_SIDE_PANEL_SIZE}px`
                 : "auto";
             properties["grid-template-columns"] = `auto ${columnWidth}`;
+            properties["--os-scrollbar-width"] = `${scrollbarWidth}px`;
+            properties["color-scheme"] = this.props.colorScheme;
             return cssPropertiesToCss(properties);
         }
         setup() {
@@ -85724,9 +86016,11 @@ stores.inject(MyMetaStore, storeInstance);
         get gridContainerStyle() {
             const gridColSize = GROUP_LAYER_WIDTH * this.rowLayers.length;
             const gridRowSize = GROUP_LAYER_WIDTH * this.colLayers.length;
+            const zoom = this.env.model.getters.getViewportZoomLevel();
             return cssPropertiesToCss({
                 "grid-template-columns": `${gridColSize ? gridColSize + 2 : 0}px auto`, // +2: margins
                 "grid-template-rows": `${gridRowSize ? gridRowSize + 2 : 0}px auto`,
+                zoom: `${zoom}`,
             });
         }
         get rowLayers() {
@@ -85738,6 +86032,8 @@ stores.inject(MyMetaStore, storeInstance);
             return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
         }
         getGridSize() {
+            const zoom = this.env.model.getters.getViewportZoomLevel();
+            const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
             const topBarHeight = this.spreadsheetRef.el
                 ?.querySelector(".o-spreadsheet-topbar-wrapper")
                 ?.getBoundingClientRect().height || 0;
@@ -85751,10 +86047,16 @@ stores.inject(MyMetaStore, storeInstance);
                 topBarHeight -
                 bottomBarHeight;
             return {
-                width: Math.max(gridWidth - SCROLLBAR_WIDTH, 0),
-                height: Math.max(gridHeight - SCROLLBAR_WIDTH, 0),
+                width: Math.max(gridWidth / zoom - scrollbarWidth, 0),
+                height: Math.max(gridHeight / zoom - scrollbarWidth, 0),
             };
         }
+        getSpreadSheetClasses() {
+            return [
+                this.env.isSmall ? "o-spreadsheet-mobile" : "",
+                this.props.colorScheme === "dark" ? "dark" : "",
+            ].join(" ");
+        }
     }
 
     class ComboChart extends AbstractChart {
@@ -88202,6 +88504,7 @@ stores.inject(MyMetaStore, storeInstance);
         ChartDashboardMenu,
         FullScreenFigure,
         NumberInput,
+        TopBar,
     };
     const hooks = {
         useDragAndDropListItems,
@@ -88305,9 +88608,9 @@ stores.inject(MyMetaStore, storeInstance);
     exports.tokenize = tokenize;
 
 
-    __info__.version = "19.1.0-alpha.10";
-    __info__.date = "2025-10-30T12:26:30.196Z";
-    __info__.hash = "d0b65e9";
+    __info__.version = "19.1.0-alpha.12";
+    __info__.date = "2025-11-12T14:17:07.713Z";
+    __info__.hash = "6fefc9c";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);