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

package/dist/o_spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -156,6 +156,8 @@ const MOBILE_WIDTH_BREAKPOINT = 768;
 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",
@@ -245,7 +247,7 @@ const DEFAULT_CAROUSEL_TITLE_STYLE = {
     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 = {
@@ -1773,7 +1775,10 @@ function isInside(col, row, zone) {
  * 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 {
@@ -2285,13 +2290,13 @@ function addMetaInfoFromArg(name, addDescr) {
     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++;
         }
     }
@@ -2299,7 +2304,7 @@ function addMetaInfoFromArg(name, addDescr) {
     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;
@@ -2327,9 +2332,9 @@ const cacheArgTargeting = {};
  * 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
@@ -2342,39 +2347,39 @@ const cacheArgTargeting = {};
  *
  * 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) {
@@ -2393,30 +2398,31 @@ function argTargeting(functionDescription, nbrArgSupplied) {
 }
 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++;
                 }
             }
@@ -2424,7 +2430,7 @@ function _argTargeting(functionDescription, nbrArgSupplied) {
             continue;
         }
         // End case: it's a required argument
-        valueIndexToArgPosition[countValueSupplied] = i;
+        valueIndexToArgPosition[countValueSupplied] = { index: i };
         countValueSupplied++;
     }
     return (argPosition) => {
@@ -2436,7 +2442,7 @@ function _argTargeting(functionDescription, nbrArgSupplied) {
 //------------------------------------------------------------------------------
 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;
@@ -4122,7 +4128,7 @@ function createComputeFunction(descr) {
         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) {
@@ -4136,7 +4142,7 @@ function createComputeFunction(descr) {
         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.
@@ -4404,8 +4410,7 @@ const CHOOSECOLS = {
     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);
@@ -4434,8 +4439,7 @@ const CHOOSEROWS = {
     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);
@@ -4485,10 +4489,7 @@ const EXPAND = {
 // -----------------------------------------------------------------------------
 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))];
     },
@@ -4546,10 +4547,7 @@ const FREQUENCY = {
 // -----------------------------------------------------------------------------
 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 = [];
@@ -4635,8 +4633,7 @@ const MMULT = {
 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)) {
@@ -4822,10 +4819,7 @@ const TRANSPOSE = {
 // -----------------------------------------------------------------------------
 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);
@@ -6392,6 +6386,7 @@ const readonlyAllowedCommands = new Set([
     "COPY",
     "RESIZE_SHEETVIEW",
     "SET_VIEWPORT_OFFSET",
+    "SET_ZOOM",
     "EVALUATE_CELLS",
     "EVALUATE_CHARTS",
     "SET_FORMULA_VISIBILITY",
@@ -7107,8 +7102,7 @@ const COTH = {
 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) => {
@@ -7150,10 +7144,8 @@ const COUNTIF = {
 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;
@@ -7169,10 +7161,7 @@ const COUNTIFS = {
 // -----------------------------------------------------------------------------
 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);
     },
@@ -7184,10 +7173,8 @@ const COUNTUNIQUEIFS = {
     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();
@@ -7543,8 +7530,7 @@ const POWER = {
 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;
@@ -7876,8 +7862,7 @@ const SUBTOTAL = {
             ...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);
@@ -7921,10 +7906,7 @@ const SUBTOTAL = {
 // -----------------------------------------------------------------------------
 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 {
@@ -7966,10 +7948,8 @@ const SUMIFS = {
     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;
@@ -8451,8 +8431,7 @@ function centile(data, percent, isInclusive, locale) {
 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;
@@ -8474,8 +8453,7 @@ const AVEDEV = {
 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 {
@@ -8493,10 +8471,8 @@ const negativeWeightError = _t$1("[[FUNCTION_NAME]] expects the weight to be pos
 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;
@@ -8552,8 +8528,7 @@ const AVERAGE_WEIGHTED = {
 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;
@@ -8606,10 +8581,8 @@ const AVERAGEIFS = {
     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);
@@ -8635,8 +8608,7 @@ const AVERAGEIFS = {
 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);
@@ -8648,10 +8620,7 @@ const COUNT = {
 // -----------------------------------------------------------------------------
 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);
     },
@@ -8884,8 +8853,7 @@ const MATTHEWS = {
 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);
@@ -8898,8 +8866,7 @@ const MAX = {
 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) => {
@@ -8916,10 +8883,8 @@ const MAXIFS = {
     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;
@@ -8939,8 +8904,7 @@ const MAXIFS = {
 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 = [];
@@ -8960,8 +8924,7 @@ const MEDIAN = {
 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);
@@ -8974,8 +8937,7 @@ const MIN = {
 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) => {
@@ -8992,10 +8954,8 @@ const MINIFS = {
     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;
@@ -9336,8 +9296,7 @@ const SPEARMAN = {
 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));
@@ -9350,8 +9309,7 @@ const STDEV = {
 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));
@@ -9364,8 +9322,7 @@ const STDEV_P = {
 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));
@@ -9378,8 +9335,7 @@ const STDEV_S = {
 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));
@@ -9392,8 +9348,7 @@ const STDEVA = {
 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));
@@ -9406,8 +9361,7 @@ const STDEVP = {
 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));
@@ -9457,8 +9411,7 @@ const TREND = {
 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);
@@ -9471,8 +9424,7 @@ const VAR = {
 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);
@@ -9485,8 +9437,7 @@ const VAR_P = {
 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);
@@ -9499,8 +9450,7 @@ const VAR_S = {
 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);
@@ -9513,8 +9463,7 @@ const VARA = {
 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);
@@ -9527,8 +9476,7 @@ const VARP = {
 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);
@@ -11432,8 +11380,7 @@ const FILTER = {
     // 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);
@@ -11473,8 +11420,8 @@ const SORT = {
     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") },
         ]),
@@ -11494,8 +11441,8 @@ const SORTN = {
         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") },
         ]),
@@ -12763,8 +12710,7 @@ const NPV = {
     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) {
@@ -14119,8 +14065,7 @@ function boolOr(args) {
 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);
@@ -14203,10 +14148,8 @@ const IFNA = {
 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) {
@@ -14245,8 +14188,7 @@ const NOT = {
 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);
@@ -14264,10 +14206,8 @@ const SWITCH = {
     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) {
@@ -14302,8 +14242,7 @@ const TRUE = {
 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;
@@ -15816,8 +15755,8 @@ const PIVOT_VALUE = {
     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);
@@ -15852,8 +15791,8 @@ const PIVOT_HEADER = {
     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);
@@ -16724,10 +16663,7 @@ const CLEAN = {
 // -----------------------------------------------------------------------------
 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), "");
     },
@@ -16782,8 +16718,7 @@ const JOIN = {
     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);
@@ -17074,13 +17009,12 @@ const TEXTJOIN_DEFAULT_IGNORE_EMPTY = true;
 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);
@@ -18458,12 +18392,10 @@ const colors = [
     "#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
@@ -19488,7 +19420,7 @@ function getRangeString(range, forSheetId, getSheetName, options = { useBoundedR
     let sheetName = "";
     if (prefixSheet) {
         if (range.invalidSheetName) {
-            sheetName = range.invalidSheetName;
+            sheetName = getCanonicalSymbolName(range.invalidSheetName);
         }
         else {
             sheetName = getCanonicalSymbolName(getSheetName(range.sheetId));
@@ -22465,7 +22397,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         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,
@@ -22968,6 +22900,66 @@ class ScorecardChartConfigBuilder {
     }
 }
 
+/**
+ * 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 Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
@@ -22991,7 +22983,8 @@ class ScorecardChart extends Component {
     }
     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);
     }
 }
@@ -23110,8 +23103,7 @@ function isChildEvent(parent, ev) {
 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");
 }
@@ -23329,8 +23321,7 @@ function generateMasterChartConfig(chartJsConfig) {
                 .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: {
@@ -23893,9 +23884,13 @@ async function canvasToObjectUrl(canvas) {
     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);
+    });
 }
 
 /**
@@ -26253,7 +26248,7 @@ function compileTokensOrThrow(tokens) {
             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
@@ -26432,12 +26427,15 @@ function assertEnoughArgs(ast) {
     }
     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,
             }));
         }
@@ -44834,8 +44832,24 @@ function astToDoc(ast) {
         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
@@ -44861,6 +44875,14 @@ function astToDoc(ast) {
             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).
  */
@@ -46468,6 +46490,7 @@ pivotRegistry.add("SPREADSHEET", {
     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"];
@@ -46486,7 +46509,7 @@ class PivotUIPlugin extends CoreViewPlugin {
         "isSpillPivotFormula",
     ];
     pivots = {};
-    unusedPivots;
+    unusedPivotsInFormulas;
     custom;
     constructor(config) {
         super(config);
@@ -46526,12 +46549,12 @@ class PivotUIPlugin extends CoreViewPlugin {
             }
             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;
@@ -46690,7 +46713,9 @@ class PivotUIPlugin extends CoreViewPlugin {
         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);
@@ -46726,9 +46751,9 @@ class PivotUIPlugin extends CoreViewPlugin {
             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()) {
@@ -46738,14 +46763,14 @@ class PivotUIPlugin extends CoreViewPlugin {
                 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;
     }
 }
 
@@ -52150,6 +52175,7 @@ class SheetViewPlugin extends UIPlugin {
         "getVisibleFigures",
         "getVisibleRect",
         "getVisibleRectWithoutHeaders",
+        "getVisibleRectWithZoom",
         "getVisibleCellPositions",
         "getColRowOffsetInViewport",
         "getMainViewportCoordinates",
@@ -52165,6 +52191,8 @@ class SheetViewPlugin extends UIPlugin {
         "getFigureUI",
         "getPositionAnchorOffset",
         "getGridOffset",
+        "getViewportZoomLevel",
+        "getScrollBarWidth",
     ];
     viewports = {};
     /**
@@ -52177,6 +52205,7 @@ class SheetViewPlugin extends UIPlugin {
     sheetViewHeight = getDefaultSheetViewSize();
     gridOffsetX = 0;
     gridOffsetY = 0;
+    zoomLevel = 1;
     sheetsWithDirtyViewports = new Set();
     shouldAdjustViewports = false;
     // ---------------------------------------------------------------------------
@@ -52243,6 +52272,9 @@ class SheetViewPlugin extends UIPlugin {
             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);
@@ -52446,7 +52478,7 @@ class SheetViewPlugin extends UIPlugin {
         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.
@@ -52454,6 +52486,9 @@ class SheetViewPlugin extends UIPlugin {
     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;
@@ -52532,6 +52567,18 @@ class SheetViewPlugin extends UIPlugin {
         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
      */
@@ -52613,6 +52660,9 @@ class SheetViewPlugin extends UIPlugin {
             };
         });
     }
+    getViewportZoomLevel() {
+        return this.zoomLevel;
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -56874,7 +56924,7 @@ class GaugeChart extends AbstractChart {
             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,
@@ -58260,22 +58310,26 @@ class ZoomableChartJsComponent extends ChartJsComponent {
     }
     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 =
@@ -58324,7 +58378,8 @@ class ZoomableChartJsComponent extends ChartJsComponent {
             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;
             }
@@ -58335,7 +58390,8 @@ class ZoomableChartJsComponent extends ChartJsComponent {
         };
         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) {
@@ -58362,7 +58418,7 @@ class ZoomableChartJsComponent extends ChartJsComponent {
         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) {
@@ -58395,7 +58451,8 @@ class ZoomableChartJsComponent extends ChartJsComponent {
     }
     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;
         }
@@ -58405,7 +58462,10 @@ class ZoomableChartJsComponent extends ChartJsComponent {
         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();
@@ -58840,7 +58900,7 @@ class GaugeChartComponent extends Component {
         });
     }
     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));
@@ -58848,7 +58908,7 @@ class GaugeChartComponent extends Component {
             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;
     }
@@ -60068,7 +60128,13 @@ class FigureComponent extends Component {
     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));
@@ -61668,7 +61734,7 @@ class TextValueProvider extends Component {
     }
     getCss(html) {
         return cssPropertiesToCss({
-            color: html.color || "#000000",
+            color: html.color,
             background: html.backgroundColor,
         });
     }
@@ -61823,6 +61889,9 @@ class ContentEditableHelper {
                 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));
                 });
@@ -61904,7 +61973,7 @@ class ContentEditableHelper {
                 else {
                     text += NEWLINE;
                 }
-                emptyParagraph = ["<br>", "<span><br></span>"].includes(current.value.innerHTML);
+                emptyParagraph = isEmptyParagraph(current.value);
                 continue;
             }
             if (!current.value.hasChildNodes()) {
@@ -61918,12 +61987,29 @@ class ContentEditableHelper {
     }
 }
 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 Component {
@@ -61931,6 +62017,7 @@ class FunctionDescriptionProvider extends Component {
     static props = {
         functionDescription: Object,
         argsToFocus: Array,
+        repeatingArgGroupIndex: { type: Number, optional: true },
     };
     static components = { Collapse };
     state = useState({
@@ -61942,8 +62029,70 @@ class FunctionDescriptionProvider extends Component {
     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;
     }
 }
 
@@ -62013,6 +62162,7 @@ class Composer extends Component {
         showDescription: false,
         functionDescription: {},
         argsToFocus: [],
+        repeatingArgGroupIndex: 0,
     });
     assistant = useState({
         forcedClosed: false,
@@ -62450,10 +62600,6 @@ class Composer extends Component {
         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 &&
@@ -62471,7 +62617,8 @@ class Composer extends Component {
             }
             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),
@@ -62551,9 +62698,21 @@ class Composer extends Component {
                 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.
      *
@@ -62563,11 +62722,11 @@ class Composer extends Component {
      * 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.
@@ -62576,11 +62735,11 @@ class Composer extends Component {
         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);
             }
@@ -63016,6 +63175,7 @@ class AbstractComposerStore extends SpreadsheetStore {
         this.highlightStore.register(this);
         this.onDispose(() => {
             this.highlightStore.unRegister(this);
+            this._cancelEdition();
         });
     }
     handleEvent(event) {
@@ -67485,6 +67645,17 @@ const irregularityMap = {
     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(),
@@ -69611,13 +69782,14 @@ function useDragAndDropBeyondTheViewport(env) {
         }
         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;
@@ -69645,7 +69817,7 @@ function useDragAndDropBeyondTheViewport(env) {
                 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;
@@ -69685,7 +69857,10 @@ function useDragAndDropBeyondTheViewport(env) {
                 pointerMoveHandler(currentEv);
             }, Math.round(timeoutDelay));
         }
-        previousEvClientPosition = { clientX: currentEv.clientX, clientY: currentEv.clientY };
+        previousEvClientPosition = {
+            clientX: zoomedMouseEvent.clientX,
+            clientY: zoomedMouseEvent.clientY,
+        };
     };
     const pointerUpHandler = () => {
         pointerUpCallback?.();
@@ -69727,30 +69902,30 @@ class Autofill extends Component {
         isVisible: Boolean,
     };
     state = 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() {
@@ -69762,11 +69937,13 @@ class Autofill extends Component {
     }
     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;
@@ -69775,8 +69952,8 @@ class Autofill extends Component {
         };
         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();
@@ -69789,7 +69966,7 @@ class Autofill extends Component {
                 }
             }
         };
-        this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
+        this.dragNDropGrid.start(zoomedMouseEvent, onMouseMove, onMouseUp);
     }
     onDblClick() {
         this.env.model.dispatch("AUTOFILL_AUTO");
@@ -70724,7 +70901,8 @@ class FiguresContainer extends Component {
             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 = {
@@ -70734,7 +70912,7 @@ class FiguresContainer extends Component {
         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) {
@@ -70797,17 +70975,18 @@ class FiguresContainer extends Component {
      */
     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);
@@ -71219,11 +71398,11 @@ function useCellHovered(env, gridRef) {
         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);
@@ -71240,9 +71419,9 @@ function useCellHovered(env, gridRef) {
             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());
         }
@@ -71254,20 +71433,21 @@ function useCellHovered(env, gridRef) {
         }
     }
     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)));
     useExternalListener(window, "click", handleGlobalClick);
     function handleGlobalClick(e) {
         const target = e.target;
@@ -71352,7 +71532,7 @@ class GridOverlay extends Component {
         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);
@@ -71363,30 +71543,30 @@ class GridOverlay extends Component {
             // 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
@@ -71395,30 +71575,28 @@ class GridOverlay extends Component {
         }
     }
     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);
@@ -71453,7 +71631,8 @@ class GridPopover extends Component {
         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"
@@ -71558,8 +71737,8 @@ class AbstractResizer extends Component {
     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;
@@ -71579,8 +71758,8 @@ class AbstractResizer extends Component {
             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();
@@ -71596,26 +71775,29 @@ class AbstractResizer extends Component {
         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;
@@ -71627,7 +71809,7 @@ class AbstractResizer extends Component {
             }
         };
         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;
@@ -71648,7 +71830,8 @@ class AbstractResizer extends Component {
             // 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) {
@@ -71659,7 +71842,8 @@ class AbstractResizer extends Component {
             // 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;
         }
@@ -71682,6 +71866,7 @@ class AbstractResizer extends Component {
     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;
@@ -71718,9 +71903,10 @@ class AbstractResizer extends Component {
             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()) {
@@ -71734,6 +71920,7 @@ class AbstractResizer extends Component {
             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) {
@@ -71744,16 +71931,16 @@ class AbstractResizer extends Component {
         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)) {
@@ -71780,14 +71967,14 @@ class ColResizer extends AbstractResizer {
     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);
@@ -71922,14 +72109,14 @@ class RowResizer extends AbstractResizer {
     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);
@@ -72107,6 +72294,9 @@ class GridRenderer extends SpreadsheetStore {
                 break;
         }
     }
+    finalize() {
+        this.zonesWithPreventedAnimationsInNextFrame = recomputeZones(this.zonesWithPreventedAnimationsInNextFrame);
+    }
     get renderingLayers() {
         return ["Background", "Headers"];
     }
@@ -72878,18 +73068,21 @@ function useGridDrawing(refName, model, canvasSize) {
         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;
         }
@@ -72900,7 +73093,7 @@ function useGridDrawing(refName, model, canvasSize) {
         // 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);
     }
 }
@@ -73136,6 +73329,7 @@ class Highlight extends Component {
     }
     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;
@@ -73174,11 +73368,12 @@ class Highlight extends Component {
         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);
@@ -73215,7 +73410,7 @@ class Highlight extends Component {
         const mouseUp = () => {
             this.highlightState.shiftingMode = "none";
         };
-        this.dragNDropGrid.start(ev, mouseMove, mouseUp);
+        this.dragNDropGrid.start(zoomedMouseEvent, mouseMove, mouseUp);
     }
 }
 
@@ -73321,11 +73516,12 @@ class HorizontalScrollBar extends Component {
     }
     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) {
@@ -73366,11 +73562,12 @@ class VerticalScrollBar extends Component {
     }
     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) {
@@ -73579,34 +73776,38 @@ class ColorPickerWidget extends Component {
     }
 }
 
-class FontSizeEditor extends Component {
-    static template = "o-spreadsheet-FontSizeEditor";
+class NumberEditor extends 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 = useState({ isOpen: false });
-    inputRef = useRef("inputFontSize");
-    rootEditorRef = useRef("FontSizeEditor");
-    fontSizeListRef = useRef("fontSizeList");
+    inputRef = useRef("inputNumber");
+    rootEditorRef = useRef("NumberEditor");
+    valueListRef = useRef("numberList");
     setup() {
         useExternalListener(window, "click", this.onExternalClick, { capture: true });
         onWillUpdateProps((nextProps) => {
             if (this.inputRef.el && document.activeElement !== this.inputRef.el) {
-                this.inputRef.el.value = nextProps.currentFontSize;
+                this.inputRef.el.value = nextProps.currentValue;
             }
         });
         onMounted(() => {
             if (this.inputRef.el) {
-                this.inputRef.el.value = this.props.currentFontSize.toString();
+                this.inputRef.el.value = this.props.currentValue.toString();
             }
         });
     }
@@ -73619,33 +73820,36 @@ class FontSizeEditor extends Component {
         };
     }
     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;
@@ -73653,17 +73857,33 @@ class FontSizeEditor extends Component {
     }
     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 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 Component {
     static template = "o-spreadsheet.TextStyler";
     static components = { ColorPickerWidget, ActionButton, FontSizeEditor };
@@ -76680,15 +76900,19 @@ class ConditionalFormattingEditor extends Component {
         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
@@ -79034,11 +79258,15 @@ pivotSidePanelRegistry.add("SPREADSHEET", {
 class PivotDesignPanel extends 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 } });
     }
@@ -80203,6 +80431,7 @@ class TableResizer extends Component {
         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;
@@ -80224,7 +80453,7 @@ class TableResizer extends Component {
                 bottom: Math.max(row, topLeft.row),
             };
         };
-        this.dragNDropGrid.start(ev, onMouseMove, onMouseUp);
+        this.dragNDropGrid.start(zoomedMouseEvent, onMouseMove, onMouseUp);
     }
     get highlights() {
         if (!this.state.highlightZone)
@@ -80299,7 +80528,9 @@ class Grid extends Component {
         this.paintFormatStore = useStore(PaintFormatStore);
         this.clientFocusStore = useStore(ClientFocusStore);
         useStore(ArrayFormulaHighlight);
-        useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
+        useChildSubEnv({
+            getPopoverContainerRect: () => getZoomedRect(this.env.model.getters.getViewportZoomLevel(), this.getGridRect()),
+        });
         useExternalListener(document.body, "cut", this.copy.bind(this, true));
         useExternalListener(document.body, "copy", this.copy.bind(this, false));
         useExternalListener(document.body, "paste", this.paste);
@@ -80325,11 +80556,12 @@ class Grid extends Component {
         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() {
@@ -80535,8 +80767,8 @@ class Grid extends Component {
         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() {
@@ -80592,8 +80824,8 @@ class Grid extends Component {
     // ---------------------------------------------------------------------------
     // 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();
         }
@@ -80627,7 +80859,7 @@ class Grid extends Component {
                 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();
@@ -81841,7 +82073,7 @@ autoCompleteProviders.add("dataValidation", {
                 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"],
                     },
@@ -82525,6 +82757,7 @@ topbarMenuRegistry
     .add("file", {
     name: _t$1("File"),
     sequence: 10,
+    isReadonlyAllowed: true,
 })
     .addChild("settings", ["file"], {
     name: _t$1("Settings"),
@@ -82539,6 +82772,7 @@ topbarMenuRegistry
     .add("edit", {
     name: _t$1("Edit"),
     sequence: 20,
+    isReadonlyAllowed: true,
 })
     .addChild("undo", ["edit"], {
     ...undo,
@@ -82623,6 +82857,7 @@ topbarMenuRegistry
     .add("view", {
     name: _t$1("View"),
     sequence: 30,
+    isReadonlyAllowed: true,
 })
     .addChild("unfreeze_panes", ["view"], {
     ...unFreezePane,
@@ -82702,6 +82937,11 @@ topbarMenuRegistry
     .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,
@@ -82714,6 +82954,7 @@ topbarMenuRegistry
     .add("insert", {
     name: _t$1("Insert"),
     sequence: 40,
+    isReadonlyAllowed: true,
 })
     .addChild("insert_row", ["insert"], {
     ...insertRow,
@@ -82825,7 +83066,11 @@ topbarMenuRegistry
     // ---------------------------------------------------------------------
     // 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"),
@@ -82917,6 +83162,7 @@ topbarMenuRegistry
     .add("data", {
     name: _t$1("Data"),
     sequence: 60,
+    isReadonlyAllowed: true,
 })
     .addChild("sort_range", ["data"], {
     ...sortRange,
@@ -82990,6 +83236,10 @@ topbarMenuRegistry
 })
     .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,
@@ -84020,7 +84270,9 @@ class SpreadsheetDashboard extends Component {
         this.gridRef = useRef("grid");
         this.hoveredCell = useStore(DelayedHoveredCellStore);
         this.clickableCellsStore = useStore(ClickableCellsStore);
-        useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
+        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);
@@ -85086,6 +85338,35 @@ class NumberFormatsTool extends Component {
     }
 }
 
+class ToolBarZoom extends 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")
@@ -85119,6 +85400,13 @@ topBarToolBarRegistry
         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", {
@@ -85562,6 +85850,7 @@ class Spreadsheet extends Component {
         notifyUser: { type: Function, optional: true },
         raiseError: { type: Function, optional: true },
         askConfirmation: { type: Function, optional: true },
+        colorScheme: { type: String, optional: true },
     };
     static components = {
         TopBar,
@@ -85585,6 +85874,7 @@ class Spreadsheet extends Component {
     }
     getStyle() {
         const properties = {};
+        const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
         if (this.env.isDashboard()) {
             properties["grid-template-rows"] = `auto`;
         }
@@ -85595,6 +85885,8 @@ class Spreadsheet extends Component {
             ? `${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() {
@@ -85723,9 +86015,11 @@ class Spreadsheet extends Component {
     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() {
@@ -85737,6 +86031,8 @@ class Spreadsheet extends Component {
         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;
@@ -85750,10 +86046,16 @@ class Spreadsheet extends Component {
             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 {
@@ -88201,6 +88503,7 @@ const components = {
     ChartDashboardMenu,
     FullScreenFigure,
     NumberInput,
+    TopBar,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -88250,6 +88553,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType$1 as CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DEFAULT_LOCALE, DEFAULT_LOCALES, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, categories, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, createAutocompleteArgumentsProvider, findCellInNewZone, functionCache, getCaretDownSvg, getCaretUpSvg, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";