@odoo/o-spreadsheet 18.4.0-alpha.3 → 18.4.0-alpha.4

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 18.4.0-alpha.3
- * @date 2025-05-13T17:54:54.061Z
- * @hash 70ad365
+ * @version 18.4.0-alpha.4
+ * @date 2025-05-20T05:57:45.452Z
+ * @hash 5c28bca
  */
 
 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';
@@ -184,7 +184,7 @@ const ALERT_INFO_BG = "#CDEDF1";
 const ALERT_INFO_BORDER = "#98DBE2";
 const ALERT_INFO_TEXT_COLOR = "#09414A";
 const BADGE_SELECTED_COLOR = "#E6F2F3";
-const CHART_PADDING$1 = 20;
+const CHART_PADDING = 20;
 const CHART_PADDING_BOTTOM = 10;
 const CHART_PADDING_TOP = 15;
 const CHART_TITLE_FONT_SIZE = 16;
@@ -346,6 +346,8 @@ const DEFAULT_GAUGE_UPPER_COLOR = "#43C5B1";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
 const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#43C5B1";
 const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#EA6175";
+const DEFAULT_SCORECARD_KEY_VALUE_FONT_SIZE = 32;
+const DEFAULT_SCORECARD_BASELINE_FONT_SIZE = 16;
 const LINE_FILL_TRANSPARENCY = 0.4;
 const DEFAULT_WINDOW_SIZE = 2;
 // session
@@ -395,6 +397,7 @@ const PIVOT_TABLE_CONFIG = {
     styleId: "TableStyleMedium5",
     automaticAutofill: false,
 };
+const PIVOT_INDENT = 15;
 const DEFAULT_CURRENCY = {
     symbol: "$",
     position: "before",
@@ -1636,18 +1639,53 @@ function lettersToNumber(letters) {
     let result = 0;
     const l = letters.length;
     for (let i = 0; i < l; i++) {
-        const charCode = letters.charCodeAt(i);
-        const colIndex = charCode >= 65 && charCode <= 90 ? charCode - 64 : charCode - 96;
+        const colIndex = charToNumber(letters[i]);
         result = result * 26 + colIndex;
     }
     return result - 1;
 }
+function charToNumber(char) {
+    const charCode = char.charCodeAt(0);
+    return charCode >= 65 && charCode <= 90 ? charCode - 64 : charCode - 96;
+}
 function isCharALetter(char) {
     return (char >= "A" && char <= "Z") || (char >= "a" && char <= "z");
 }
 function isCharADigit(char) {
     return char >= "0" && char <= "9";
 }
+// we limit the max column to 3 letters and max row to 7 digits for performance reasons
+const MAX_COL = lettersToNumber("ZZZ");
+const MAX_ROW = 9999998;
+function consumeSpaces(chars) {
+    while (chars.current === " ") {
+        chars.advanceBy(1);
+    }
+}
+function consumeLetters(chars) {
+    if (chars.current === "$")
+        chars.advanceBy(1);
+    if (!chars.current || !isCharALetter(chars.current)) {
+        return -1;
+    }
+    let colCoordinate = 0;
+    while (chars.current && isCharALetter(chars.current)) {
+        colCoordinate = colCoordinate * 26 + charToNumber(chars.shift());
+    }
+    return colCoordinate;
+}
+function consumeDigits(chars) {
+    if (chars.current === "$")
+        chars.advanceBy(1);
+    if (!chars.current || !isCharADigit(chars.current)) {
+        return -1;
+    }
+    let num = 0;
+    while (chars.current && isCharADigit(chars.current)) {
+        num = num * 10 + Number(chars.shift());
+    }
+    return num;
+}
 /**
  * Convert a "XC" coordinate to cartesian coordinates.
  *
@@ -1658,33 +1696,17 @@ function isCharADigit(char) {
  * Note: it also accepts lowercase coordinates, but not fixed references
  */
 function toCartesian(xc) {
-    xc = xc.trim();
-    let letterPart = "";
-    let numberPart = "";
-    let i = 0;
-    // Process letter part
-    if (xc[i] === "$")
-        i++;
-    while (i < xc.length && isCharALetter(xc[i])) {
-        letterPart += xc[i++];
-    }
-    if (letterPart.length === 0 || letterPart.length > 3) {
-        // limit to max 3 letters for performance reasons
+    const chars = new TokenizingChars(xc);
+    consumeSpaces(chars);
+    const letterPart = consumeLetters(chars);
+    if (letterPart === -1 || !chars.current) {
         throw new Error(`Invalid cell description: ${xc}`);
     }
-    // Process number part
-    if (xc[i] === "$")
-        i++;
-    while (i < xc.length && isCharADigit(xc[i])) {
-        numberPart += xc[i++];
-    }
-    if (i !== xc.length || numberPart.length === 0 || numberPart.length > 7) {
-        // limit to max 7 numbers for performance reasons
-        throw new Error(`Invalid cell description: ${xc}`);
-    }
-    const col = lettersToNumber(letterPart);
-    const row = Number(numberPart) - 1;
-    if (isNaN(row)) {
+    const num = consumeDigits(chars);
+    consumeSpaces(chars);
+    const col = letterPart - 1;
+    const row = num - 1;
+    if (!chars.isOver() || col > MAX_COL || row > MAX_ROW) {
         throw new Error(`Invalid cell description: ${xc}`);
     }
     return { col, row };
@@ -5373,67 +5395,6 @@ function binarySuccessorSearch(arr, val, start = 0, matchEqual = true) {
     return result;
 }
 
-/** Reference of a cell (eg. A1, $B$5) */
-const cellReference = new RegExp(/\$?([A-Z]{1,3})\$?([0-9]{1,7})/, "i");
-// Same as above, but matches the exact string (nothing before or after)
-const singleCellReference = new RegExp(/^\$?([A-Z]{1,3})\$?([0-9]{1,7})$/, "i");
-/** Reference of a column header (eg. A, AB, $A) */
-const colHeader = new RegExp(/^\$?([A-Z]{1,3})+$/, "i");
-/** Reference of a row header (eg. 1, $1) */
-const rowHeader = new RegExp(/^\$?([0-9]{1,7})+$/, "i");
-/** Reference of a column (eg. A, $CA, Sheet1!B) */
-const colReference = new RegExp(/^\s*('.+'!|[^']+!)?\$?([A-Z]{1,3})$/, "i");
-/** Reference of a row (eg. 1, 59, Sheet1!9) */
-const rowReference = new RegExp(/^\s*('.+'!|[^']+!)?\$?([0-9]{1,7})$/, "i");
-/** Reference of a normal range or a full row range (eg. A1:B1, 1:$5, $A2:5) */
-const fullRowXc = /(\$?[A-Z]{1,3})?\$?[0-9]{1,7}\s*:\s*(\$?[A-Z]{1,3})?\$?[0-9]{1,7}\s*/i;
-/** Reference of a normal range or a column row range (eg. A1:B1, A:$B, $A1:C) */
-const fullColXc = /\$?[A-Z]{1,3}(\$?[0-9]{1,7})?\s*:\s*\$?[A-Z]{1,3}(\$?[0-9]{1,7})?\s*/i;
-/** Reference of a cell or a range, it can be a bounded range, a full row or a full column */
-const rangeReference = new RegExp(/^\s*('.+'!|[^']+!)?/.source +
-    "(" +
-    [cellReference.source, fullRowXc.source, fullColXc.source].join("|") +
-    ")" +
-    /$/.source, "i");
-/**
- * Return true if the given xc is the reference of a column (e.g. A or AC or Sheet1!A)
- */
-function isColReference(xc) {
-    return colReference.test(xc);
-}
-/**
- * Return true if the given xc is the reference of a column (e.g. 1 or Sheet1!1)
- */
-function isRowReference(xc) {
-    return rowReference.test(xc);
-}
-function isColHeader(str) {
-    return colHeader.test(str);
-}
-function isRowHeader(str) {
-    return rowHeader.test(str);
-}
-/**
- * Return true if the given xc is the reference of a single cell,
- * without any specified sheet (e.g. A1)
- */
-function isSingleCellReference(xc) {
-    return singleCellReference.test(xc);
-}
-function splitReference(ref) {
-    if (!ref.includes("!")) {
-        return { xc: ref };
-    }
-    const parts = ref.split("!");
-    const xc = parts.pop();
-    const sheetName = getUnquotedSheetName(parts.join("!")) || undefined;
-    return { sheetName, xc };
-}
-/** Return a reference SheetName!xc from the given arguments */
-function getFullReference(sheetName, xc) {
-    return sheetName !== undefined ? `${getCanonicalSymbolName(sheetName)}!${xc}` : xc;
-}
-
 /**
  * Convert from a cartesian reference to a Zone
  * The range boundaries will be kept in the same order as the
@@ -5451,63 +5412,55 @@ function getFullReference(sheetName, xc) {
  *
  */
 function toZoneWithoutBoundaryChanges(xc) {
-    if (xc.includes("!")) {
-        xc = xc.split("!").at(-1);
-    }
-    if (xc.includes("$")) {
-        xc = xc.replaceAll("$", "");
-    }
-    let firstRangePart = "";
-    let secondRangePart;
-    if (xc.includes(":")) {
-        [firstRangePart, secondRangePart] = xc.split(":");
-        firstRangePart = firstRangePart.trim();
-        secondRangePart = secondRangePart.trim();
-    }
-    else {
-        firstRangePart = xc.trim();
-    }
+    const chars = new TokenizingChars(xc);
+    consumeSpaces(chars);
+    const sheetSeparatorIndex = xc.indexOf("!");
+    if (sheetSeparatorIndex !== -1) {
+        chars.advanceBy(sheetSeparatorIndex + 1);
+    }
+    const leftLetters = consumeLetters(chars);
+    const leftNumbers = consumeDigits(chars);
     let top, bottom, left, right;
     let fullCol = false;
     let fullRow = false;
     let hasHeader = false;
-    if (isColReference(firstRangePart)) {
-        left = right = lettersToNumber(firstRangePart);
+    if (leftNumbers === -1) {
+        left = right = leftLetters - 1;
         top = bottom = 0;
         fullCol = true;
     }
-    else if (isRowReference(firstRangePart)) {
-        top = bottom = parseInt(firstRangePart, 10) - 1;
+    else if (leftLetters === -1) {
+        top = bottom = leftNumbers - 1;
         left = right = 0;
         fullRow = true;
     }
     else {
-        const c = toCartesian(firstRangePart);
-        left = right = c.col;
-        top = bottom = c.row;
+        left = right = leftLetters - 1;
+        top = bottom = leftNumbers - 1;
         hasHeader = true;
     }
-    if (secondRangePart) {
-        if (isColReference(secondRangePart)) {
-            right = lettersToNumber(secondRangePart);
+    consumeSpaces(chars);
+    if (chars.current === ":") {
+        chars.advanceBy(1);
+        consumeSpaces(chars);
+        const rightLetters = consumeLetters(chars);
+        const rightNumbers = consumeDigits(chars);
+        if (rightNumbers === -1) {
+            right = rightLetters - 1;
             fullCol = true;
         }
-        else if (isRowReference(secondRangePart)) {
-            bottom = parseInt(secondRangePart, 10) - 1;
+        else if (rightLetters === -1) {
+            bottom = rightNumbers - 1;
             fullRow = true;
         }
         else {
-            const c = toCartesian(secondRangePart);
-            right = c.col;
-            bottom = c.row;
+            right = rightLetters - 1;
+            bottom = rightNumbers - 1;
             top = fullCol ? bottom : top;
             left = fullRow ? right : left;
             hasHeader = true;
         }
     }
-    if (fullCol && fullRow) {
-        throw new Error("Wrong zone xc. The zone cannot be at the same time a full column and a full row");
-    }
     const zone = {
         top,
         left,
@@ -5536,7 +5489,16 @@ function toZoneWithoutBoundaryChanges(xc) {
  */
 function toUnboundedZone(xc) {
     const zone = toZoneWithoutBoundaryChanges(xc);
-    return reorderZone(zone);
+    const orderedZone = reorderZone(zone);
+    const bottom = orderedZone.bottom;
+    const right = orderedZone.right;
+    if ((bottom !== undefined && bottom > MAX_ROW) || (right !== undefined && right > MAX_COL)) {
+        throw new Error(`Range string out of bounds: ${xc}`); // limit the size of the zone for performance
+    }
+    if (bottom === undefined && right === undefined) {
+        throw new Error("Wrong zone xc. The zone cannot be at the same time a full column and a full row");
+    }
+    return orderedZone;
 }
 /**
  * Convert from a cartesian reference to a Zone.
@@ -6150,6 +6112,67 @@ function scrollDelay(value) {
     return MIN_DELAY + (MAX_DELAY - MIN_DELAY) * Math.exp(-ACCELERATION * (value - 1));
 }
 
+/** Reference of a cell (eg. A1, $B$5) */
+const cellReference = new RegExp(/\$?([A-Z]{1,3})\$?([0-9]{1,7})/, "i");
+// Same as above, but matches the exact string (nothing before or after)
+const singleCellReference = new RegExp(/^\$?([A-Z]{1,3})\$?([0-9]{1,7})$/, "i");
+/** Reference of a column header (eg. A, AB, $A) */
+const colHeader = new RegExp(/^\$?([A-Z]{1,3})+$/, "i");
+/** Reference of a row header (eg. 1, $1) */
+const rowHeader = new RegExp(/^\$?([0-9]{1,7})+$/, "i");
+/** Reference of a column (eg. A, $CA, Sheet1!B) */
+const colReference = new RegExp(/^\s*('.+'!|[^']+!)?\$?([A-Z]{1,3})$/, "i");
+/** Reference of a row (eg. 1, 59, Sheet1!9) */
+const rowReference = new RegExp(/^\s*('.+'!|[^']+!)?\$?([0-9]{1,7})$/, "i");
+/** Reference of a normal range or a full row range (eg. A1:B1, 1:$5, $A2:5) */
+const fullRowXc = /(\$?[A-Z]{1,3})?\$?[0-9]{1,7}\s*:\s*(\$?[A-Z]{1,3})?\$?[0-9]{1,7}\s*/i;
+/** Reference of a normal range or a column row range (eg. A1:B1, A:$B, $A1:C) */
+const fullColXc = /\$?[A-Z]{1,3}(\$?[0-9]{1,7})?\s*:\s*\$?[A-Z]{1,3}(\$?[0-9]{1,7})?\s*/i;
+/** Reference of a cell or a range, it can be a bounded range, a full row or a full column */
+const rangeReference = new RegExp(/^\s*('.+'!|[^']+!)?/.source +
+    "(" +
+    [cellReference.source, fullRowXc.source, fullColXc.source].join("|") +
+    ")" +
+    /$/.source, "i");
+/**
+ * Return true if the given xc is the reference of a column (e.g. A or AC or Sheet1!A)
+ */
+function isColReference(xc) {
+    return colReference.test(xc);
+}
+/**
+ * Return true if the given xc is the reference of a column (e.g. 1 or Sheet1!1)
+ */
+function isRowReference(xc) {
+    return rowReference.test(xc);
+}
+function isColHeader(str) {
+    return colHeader.test(str);
+}
+function isRowHeader(str) {
+    return rowHeader.test(str);
+}
+/**
+ * Return true if the given xc is the reference of a single cell,
+ * without any specified sheet (e.g. A1)
+ */
+function isSingleCellReference(xc) {
+    return singleCellReference.test(xc);
+}
+function splitReference(ref) {
+    if (!ref.includes("!")) {
+        return { xc: ref };
+    }
+    const parts = ref.split("!");
+    const xc = parts.pop();
+    const sheetName = getUnquotedSheetName(parts.join("!")) || undefined;
+    return { sheetName, xc };
+}
+/** Return a reference SheetName!xc from the given arguments */
+function getFullReference(sheetName, xc) {
+    return sheetName !== undefined ? `${getCanonicalSymbolName(sheetName)}!${xc}` : xc;
+}
+
 function createDefaultRows(rowNumber) {
     const rows = [];
     for (let i = 0; i < rowNumber; i++) {
@@ -6846,9 +6869,6 @@ function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precisio
     }
     return fontSize;
 }
-function computeIconWidth(style) {
-    return computeTextFontSizeInPixels(style) + 2 * MIN_CF_ICON_MARGIN;
-}
 /** Transform a string to lower case. If the string is undefined, return an empty string */
 function toLowerCase(str) {
     return str ? str.toLowerCase() : "";
@@ -8082,208 +8102,6 @@ function getMovingAverageValues(dataset, labels, windowSize = DEFAULT_WINDOW_SIZ
     return values;
 }
 
-const PREVIOUS_VALUE = "(previous)";
-const NEXT_VALUE = "(next)";
-function getDomainOfParentRow(pivot, domain) {
-    const { colDomain, rowDomain } = domainToColRowDomain(pivot, domain);
-    return [...colDomain, ...rowDomain.slice(0, rowDomain.length - 1)];
-}
-function getDomainOfParentCol(pivot, domain) {
-    const { colDomain, rowDomain } = domainToColRowDomain(pivot, domain);
-    return [...colDomain.slice(0, colDomain.length - 1), ...rowDomain];
-}
-/**
- * Split a pivot domain into the part related to the rows of the pivot, and the part related to the columns.
- */
-function domainToColRowDomain(pivot, domain) {
-    const rowFields = pivot.definition.rows.map((c) => c.nameWithGranularity);
-    const rowDomain = domain.filter((node) => rowFields.includes(node.field));
-    const columnFields = pivot.definition.columns.map((c) => c.nameWithGranularity);
-    const colDomain = domain.filter((node) => columnFields.includes(node.field));
-    return { colDomain, rowDomain };
-}
-function getDimensionDomain(pivot, dimension, domain) {
-    return dimension === "column"
-        ? domainToColRowDomain(pivot, domain).colDomain
-        : domainToColRowDomain(pivot, domain).rowDomain;
-}
-function getFieldValueInDomain(fieldNameWithGranularity, domain) {
-    const node = domain.find((n) => n.field === fieldNameWithGranularity);
-    return node?.value;
-}
-function isDomainIsInPivot(pivot, domain) {
-    const { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
-    return (checkIfDomainInInTree(rowDomain, pivot.getTableStructure().getRowTree()) &&
-        checkIfDomainInInTree(colDomain, pivot.getTableStructure().getColTree()));
-}
-function checkIfDomainInInTree(domain, tree) {
-    return walkDomainTree(domain, tree) !== undefined;
-}
-/**
- * Given a tree of the col/rows of a pivot, and a domain related to those col/rows, return the node of the tree
- * corresponding to the domain.
- *
- * @param domain The domain to find in the tree
- * @param tree The tree to search in7
- * @param stopAtField If provided, the search will stop at the field with this name
- */
-function walkDomainTree(domain, tree, stopAtField) {
-    let currentTreeNode = tree;
-    for (const node of domain) {
-        const child = currentTreeNode.find((n) => n.value === node.value);
-        if (!child) {
-            return undefined;
-        }
-        if (child.field === stopAtField) {
-            return currentTreeNode;
-        }
-        currentTreeNode = child.children;
-    }
-    return currentTreeNode;
-}
-/**
- * Get the domain parent of the given domain with the field `parentFieldName` as leaf of the domain.
- *
- * In practice, if the `parentFieldName` is a row in the pivot, the helper will return a domain with the same column
- * domain, and with a row domain all groupBys children to `parentFieldName` removed.
- */
-function getFieldParentDomain(pivot, parentFieldName, domain) {
-    let { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
-    const dimension = getFieldDimensionType(pivot, parentFieldName);
-    if (dimension === "row") {
-        const index = rowDomain.findIndex((node) => node.field === parentFieldName);
-        if (index === -1) {
-            return domain;
-        }
-        rowDomain = rowDomain.slice(0, index + 1);
-    }
-    else {
-        const index = colDomain.findIndex((node) => node.field === parentFieldName);
-        if (index === -1) {
-            return domain;
-        }
-        colDomain = colDomain.slice(0, index + 1);
-    }
-    return [...rowDomain, ...colDomain];
-}
-/**
- * Replace in the domain the value of the field `fieldNameWithGranularity` with the given `value`
- */
-function replaceFieldValueInDomain(domain, fieldNameWithGranularity, value) {
-    domain = deepCopy(domain);
-    const node = domain.find((n) => n.field === fieldNameWithGranularity);
-    if (!node) {
-        return domain;
-    }
-    node.value = value;
-    return domain;
-}
-function isFieldInDomain(nameWithGranularity, domain) {
-    return domain.some((node) => node.field === nameWithGranularity);
-}
-/**
- * Check if the field is in the rows or columns of the pivot
- */
-function getFieldDimensionType(pivot, nameWithGranularity) {
-    const rowFields = pivot.definition.rows.map((c) => c.nameWithGranularity);
-    if (rowFields.includes(nameWithGranularity)) {
-        return "row";
-    }
-    const columnFields = pivot.definition.columns.map((c) => c.nameWithGranularity);
-    if (columnFields.includes(nameWithGranularity)) {
-        return "column";
-    }
-    throw new Error(`Field ${nameWithGranularity} not found in pivot`);
-}
-/**
- * Replace in the given domain the value of the field `fieldNameWithGranularity` with the previous or next value.
- */
-function getPreviousOrNextValueDomain(pivot, domain, fieldNameWithGranularity, direction) {
-    const dimension = getFieldDimensionType(pivot, fieldNameWithGranularity);
-    const tree = dimension === "row"
-        ? pivot.getTableStructure().getRowTree()
-        : pivot.getTableStructure().getColTree();
-    const dimDomain = getDimensionDomain(pivot, dimension, domain);
-    const currentTreeNode = walkDomainTree(dimDomain, tree, fieldNameWithGranularity);
-    const values = currentTreeNode?.map((n) => n.value) ?? [];
-    const value = getFieldValueInDomain(fieldNameWithGranularity, domain);
-    if (value === undefined) {
-        return undefined;
-    }
-    const valueIndex = values.indexOf(value);
-    if (value === undefined || valueIndex === -1) {
-        return undefined;
-    }
-    const offset = direction === PREVIOUS_VALUE ? -1 : 1;
-    const newIndex = clip(valueIndex + offset, 0, values.length - 1);
-    return replaceFieldValueInDomain(domain, fieldNameWithGranularity, values[newIndex]);
-}
-function domainToString(domain) {
-    return domain ? domain.map(domainNodeToString).join(", ") : "";
-}
-function domainNodeToString(domainNode) {
-    return domainNode ? `${domainNode.field}=${domainNode.value}` : "";
-}
-/**
- *
- * For the ranking, the pivot cell values of a column (or row) at the same depth are grouped together before being sorted
- * and ranked.
- *
- * The grouping of a pivot cell is done with both the value of the domain nodes that are parent of the field
- * `fieldNameWithGranularity` and the value of the last node of the domain of the pivot cell, if it's not the field
- * `fieldNameWithGranularity`.
- *
- * For example, let's take a pivot grouped by (Date:year, Stage, User, Product), where we want to rank by "Stage" field.
- * The domain nodes parents of the "Stage" are [Date:year]. The pivot cell with domain:
- * - [Date:year=2021] is not ranked because it does not contain the "Stage" field
- * - [Date:year=2021, Stage=Lead] is grouped with the cells [Date:year=2021, Stage=*, User=None, Product=None],
- *      and then ranked within the group
- * - [Date:year=2021, Stage=Lead, User=Bob] is grouped with the cells [Date:year=2021, Stage=*, User=Bob, Product=None],
- *      and then ranked within the group
- * - [Date:year=2021, Stage=Lead, User=Bob, Product=Table] is grouped with the cells [Date:year=2021, Stage=*, User=*, Product=Table],
- *      and then ranked within the group
- *
- * If we rank the pivot on "User" instead, the parent domain becomes [Date:year, Sage] .The cell with domain:
- * - [Date:year=2021] is not ranked because it does not contain the "Stage" field
- * - [Date:year=2021, Stage=Lead] is not ranked because it does not contain the "User" field
- * - [Date:year=2021, Stage=Lead, User=Bob] is grouped with the cells [Date:year=2021, Stage=Lead, User=Bob, Product=None],
- *      and then ranked within the group
- * - [Date:year=2021, Stage=Lead, User=Bob, Product=Table] is grouped with the cells with [Date:year=2021, Stage=Lead, User=*, Product=Table],
- *     and then ranked within the group
- *
- */
-function getRankingDomainKey(domain, fieldNameWithGranularity) {
-    const index = domain.findIndex((node) => node.field === fieldNameWithGranularity);
-    if (index === -1) {
-        return "";
-    }
-    const parent = domain.slice(0, index);
-    const lastNode = domain.at(-1);
-    return domainToString(lastNode.field === fieldNameWithGranularity ? parent : [...parent, lastNode]);
-}
-/**
- * The running total domain is the domain without the field `fieldNameWithGranularity`, ie. we do the running total of
- * all the pivot cells of the column that have any value for the field `fieldNameWithGranularity` and the same value for
- * the other fields.
- */
-function getRunningTotalDomainKey(domain, fieldNameWithGranularity) {
-    const index = domain.findIndex((node) => node.field === fieldNameWithGranularity);
-    if (index === -1) {
-        return "";
-    }
-    return domainToString([...domain.slice(0, index), ...domain.slice(index + 1)]);
-}
-function sortPivotTree(tree, baseDomain, sortFn) {
-    const sortedTree = [...tree];
-    const domain = [...baseDomain];
-    sortedTree.sort((node1, node2) => sortFn([...domain, node1], [...domain, node2]));
-    for (const node of tree) {
-        const children = sortPivotTree(node.children, [...domain, node], sortFn);
-        node.children = children;
-    }
-    return sortedTree;
-}
-
 const pivotTimeAdapterRegistry = new Registry();
 function pivotTimeAdapter(granularity) {
     return pivotTimeAdapterRegistry.get(granularity);
@@ -8794,23 +8612,11 @@ pivotToFunctionValueRegistry
 function getFieldDisplayName(field) {
     return field.displayName + (field.granularity ? ` (${ALL_PERIODS[field.granularity]})` : "");
 }
-function addIndentAndAlignToPivotHeader(pivot, domain, functionResult) {
-    const { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
-    if (rowDomain.length === 0 && colDomain.length === 0) {
+function addAlignFormatToPivotHeader(domain, functionResult) {
+    if (domain.length === 0) {
         return functionResult;
     }
-    if (rowDomain.length === 0 && colDomain.length > 0) {
-        return {
-            ...functionResult,
-            format: (functionResult.format || "@") + "* ",
-        };
-    }
-    const indent = rowDomain.length - 1;
-    const format = functionResult.format || "@";
-    return {
-        ...functionResult,
-        format: `${"    ".repeat(indent)}${format}* `,
-    };
+    return { ...functionResult, format: (functionResult.format || "@") + "* " };
 }
 function isSortedColumnValid(sortedColumn, pivot) {
     try {
@@ -9841,6 +9647,13 @@ class DependencyContainer extends EventBus {
     resetStores() {
         this.dependencies.clear();
     }
+    dispose() {
+        for (const instance of this.dependencies.values()) {
+            if ("dispose" in instance && typeof instance.dispose === "function") {
+                instance.dispose();
+            }
+        }
+    }
 }
 class StoreFactory {
     get;
@@ -9919,6 +9732,7 @@ function useStoreProvider() {
             return proxifyStoreMutation(store, () => container.trigger("store-updated"));
         },
     });
+    onWillUnmount(() => container.dispose());
     return container;
 }
 /**
@@ -10272,6 +10086,19 @@ function unregisterChartJsExtensions() {
     }
 }
 
+class ChartAnimationStore extends SpreadsheetStore {
+    mutators = ["disableAnimationForChart", "enableAnimationForChart"];
+    animationPlayed = {};
+    disableAnimationForChart(chartId, chartType) {
+        this.animationPlayed[chartId] = chartType;
+        return "noStateChange";
+    }
+    enableAnimationForChart(chartId) {
+        this.animationPlayed[chartId] = undefined;
+        return "noStateChange";
+    }
+}
+
 function getFunnelChartController() {
     return class FunnelChartController extends window.Chart.BarController {
         static id = "funnel";
@@ -11925,10 +11752,12 @@ class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
         figureUI: Object,
+        isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("graphContainer");
     chart;
     currentRuntime;
+    animationStore;
     currentDevicePixelRatio = window.devicePixelRatio;
     get background() {
         return this.chartRuntime.background;
@@ -11944,6 +11773,9 @@ class ChartJsComponent extends Component {
         return runtime;
     }
     setup() {
+        if (this.env.model.getters.isDashboard()) {
+            this.animationStore = useStore(ChartAnimationStore);
+        }
         onMounted(() => {
             const runtime = this.chartRuntime;
             this.currentRuntime = runtime;
@@ -11970,11 +11802,25 @@ class ChartJsComponent extends Component {
         });
     }
     createChart(chartData) {
+        if (this.env.model.getters.isDashboard() && this.animationStore) {
+            const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+            if (chartType && this.animationStore.animationPlayed[this.animationFigureId] !== chartType) {
+                chartData = this.enableAnimationInChartData(chartData);
+                this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
+            }
+        }
         const canvas = this.canvas.el;
         const ctx = canvas.getContext("2d");
         this.chart = new window.Chart(ctx, chartData);
     }
     updateChartJs(chartData) {
+        if (this.env.model.getters.isDashboard()) {
+            const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+            if (chartType && this.hasChartDataChanged() && this.animationStore) {
+                chartData = this.enableAnimationInChartData(chartData);
+                this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
+            }
+        }
         if (chartData.data && chartData.data.datasets) {
             this.chart.data = chartData.data;
             if (chartData.options?.plugins?.title) {
@@ -11987,6 +11833,20 @@ class ChartJsComponent extends Component {
         this.chart.config.options = chartData.options;
         this.chart.update();
     }
+    hasChartDataChanged() {
+        return !deepEquals(this.currentRuntime.chartJsConfig.data, this.chartRuntime.chartJsConfig.data);
+    }
+    enableAnimationInChartData(chartData) {
+        return {
+            ...chartData,
+            options: { ...chartData.options, animation: { animateRotate: true } },
+        };
+    }
+    get animationFigureId() {
+        return this.props.isFullScreen
+            ? this.props.figureUI.id + "-fullscreen"
+            : this.props.figureUI.id;
+    }
 }
 
 /**
@@ -12112,6 +11972,7 @@ const arrowDownPath = new window.Path2D("M8.6 4.8a.5.5 0 0 1 0 .75l-3.9 3.9a.5 .
 const arrowUpPath = new window.Path2D("M8.7 5.5a.5.5 0 0 0 0-.75l-3.8-4a.5.5 0 0 0-.75 0l-3.8 4a.5.5 0 0 0 0 .75l.4.4a.5.5 0 0 0 .75 0l2.3-2.4v5.8c0 .25.25.5.5.5h.6c.25 0 .5-.25.5-.5v-5.8l2.2 2.4a.5.5 0 0 0 .75 0z");
 let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     keyValue;
+    keyDescr;
     baseline;
     baselineMode;
     baselineDescr;
@@ -12125,6 +11986,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.keyValue = createValidRange(getters, sheetId, definition.keyValue);
+        this.keyDescr = definition.keyDescr;
         this.baseline = createValidRange(getters, sheetId, definition.baseline);
         this.baselineMode = definition.baselineMode;
         this.baselineDescr = definition.baselineDescr;
@@ -12202,6 +12064,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
             keyValue: keyValue
                 ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                 : undefined,
+            keyDescr: this.keyDescr,
             humanize: this.humanize,
         };
     }
@@ -12225,7 +12088,7 @@ function drawScoreChart(structure, canvas) {
     canvas.width = dpr * structure.canvas.width;
     canvas.height = dpr * structure.canvas.height;
     ctx.scale(dpr, dpr);
-    const availableWidth = structure.canvas.width - CHART_PADDING$1 * 2;
+    const availableWidth = structure.canvas.width - CHART_PADDING;
     ctx.fillStyle = structure.canvas.backgroundColor;
     ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
     if (structure.title) {
@@ -12261,18 +12124,22 @@ function drawScoreChart(structure, canvas) {
         ctx.restore();
     }
     if (structure.baselineDescr) {
-        const descr = structure.baselineDescr[0];
+        const descr = structure.baselineDescr;
         ctx.font = descr.style.font;
         ctx.fillStyle = descr.style.color;
-        for (const description of structure.baselineDescr) {
-            ctx.fillText(clipTextWithEllipsis(ctx, description.text, availableWidth - description.position.x), description.position.x, description.position.y);
-        }
+        ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
     }
     if (structure.key) {
         ctx.font = structure.key.style.font;
         ctx.fillStyle = structure.key.style.color;
         drawDecoratedText(ctx, clipTextWithEllipsis(ctx, structure.key.text, availableWidth - structure.key.position.x), structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
     }
+    if (structure.keyDescr) {
+        const descr = structure.keyDescr;
+        ctx.font = structure.keyDescr?.style.font ?? descr.style.font;
+        ctx.fillStyle = descr.style.color;
+        ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
+    }
     if (structure.progressBar) {
         ctx.fillStyle = structure.progressBar.style.backgroundColor;
         ctx.beginPath();
@@ -12327,28 +12194,41 @@ function createScorecardChartRuntime(chart, getters) {
             text: chart.title.text ? _t(chart.title.text) : "",
         },
         keyValue: formattedKeyValue,
+        keyDescr: chart.keyDescr?.text
+            ? _t(chart.keyDescr.text) // descriptions are extracted from .json files and they are translated at runtime here
+            : "",
         baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr
-            ? _t(chart.baselineDescr) // descriptions are extracted from .json files and they are translated at runtime here
+        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr?.text
+            ? _t(chart.baselineDescr.text) // descriptions are extracted from .json files and they are translated at runtime here
             : "",
         fontColor,
         background,
-        baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
-            ? getters.getCellStyle({
-                sheetId: baseline.sheetId,
-                col: baseline.zone.left,
-                row: baseline.zone.top,
-            })
-            : undefined,
-        keyValueStyle: chart.keyValue
-            ? getters.getCellStyle({
-                sheetId: chart.keyValue.sheetId,
-                col: chart.keyValue.zone.left,
-                row: chart.keyValue.zone.top,
-            })
-            : undefined,
+        baselineStyle: {
+            ...(chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
+                ? getters.getCellComputedStyle({
+                    sheetId: baseline.sheetId,
+                    col: baseline.zone.left,
+                    row: baseline.zone.top,
+                })
+                : undefined),
+            fontSize: chart.baselineDescr?.fontSize,
+            align: chart.baselineDescr?.align,
+        },
+        baselineDescrStyle: { textColor: chart.baselineDescr?.color, ...chart.baselineDescr },
+        keyValueStyle: {
+            ...(chart.keyValue
+                ? getters.getCellComputedStyle({
+                    sheetId: chart.keyValue.sheetId,
+                    col: chart.keyValue.zone.left,
+                    row: chart.keyValue.zone.top,
+                })
+                : undefined),
+            fontSize: chart.keyDescr?.fontSize,
+            align: chart.keyDescr?.align,
+        },
+        keyValueDescrStyle: { textColor: chart.keyDescr?.color, ...chart.keyDescr },
         progressBar: chart.baselineMode === "progress"
             ? {
                 value: baselineValue,
@@ -12359,11 +12239,7 @@ function createScorecardChartRuntime(chart, getters) {
 }
 
 /* Padding at the border of the chart */
-const CHART_PADDING = 10;
 const BOTTOM_PADDING_RATIO = 0.05;
-/* Maximum font sizes of each element */
-const KEY_VALUE_FONT_SIZE = 32;
-const BASELINE_MAX_FONT_SIZE = 16;
 function formatBaselineDescr(baselineDescr, baseline) {
     const _baselineDescr = baselineDescr || "";
     return baseline && _baselineDescr ? " " + _baselineDescr : _baselineDescr;
@@ -12413,7 +12289,7 @@ class ScorecardChartConfigBuilder {
                 style: style.title,
                 position: {
                     x,
-                    y: CHART_PADDING + titleHeight / 2,
+                    y: CHART_PADDING_BOTTOM + titleHeight / 2,
                 },
             };
         }
@@ -12423,42 +12299,49 @@ class ScorecardChartConfigBuilder {
             baselineHeight = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).height;
         }
         const baselineDescrWidth = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).width;
-        structure.baseline = {
-            text: this.baseline,
-            style: style.baselineValue,
-            position: {
-                x: (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2,
-                y: this.keyValue
-                    ? this.height * (1 - BOTTOM_PADDING_RATIO * (this.runtime.progressBar ? 1 : 2))
-                    : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING,
-            },
-        };
-        const minimalBaselinePosition = baselineArrowSize + CHART_PADDING * 2;
-        if (structure.baseline.position.x < minimalBaselinePosition) {
-            structure.baseline.position.x = minimalBaselinePosition;
-        }
-        if (style.baselineArrow && !this.runtime.progressBar) {
-            structure.baselineArrow = {
-                direction: this.baselineArrow,
-                style: style.baselineArrow,
+        let baselineX;
+        switch (this.runtime.baselineStyle?.align) {
+            case "right":
+                baselineX = this.width - CHART_PADDING - baselineDescrWidth - baselineWidth;
+                break;
+            case "left":
+                baselineX = CHART_PADDING + baselineArrowSize;
+                break;
+            default:
+                baselineX = (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2;
+        }
+        if (this.baseline) {
+            structure.baseline = {
+                text: this.baseline,
+                style: style.baselineValue,
                 position: {
-                    x: structure.baseline.position.x - baselineArrowSize,
-                    y: structure.baseline.position.y - (baselineHeight + baselineArrowSize) / 2,
+                    x: baselineX,
+                    y: this.keyValue
+                        ? this.height * (1 - BOTTOM_PADDING_RATIO * (this.runtime.progressBar ? 1 : 2))
+                        : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING_BOTTOM,
                 },
             };
+            if (style.baselineArrow && !this.runtime.progressBar) {
+                structure.baselineArrow = {
+                    direction: this.baselineArrow,
+                    style: style.baselineArrow,
+                    position: {
+                        x: structure.baseline.position.x - baselineArrowSize,
+                        y: structure.baseline.position.y - (baselineHeight + baselineArrowSize) / 2,
+                    },
+                };
+            }
         }
-        if (this.baselineDescr) {
+        if (structure.baseline && this.baselineDescr) {
             const position = {
                 x: structure.baseline.position.x + baselineWidth,
                 y: structure.baseline.position.y,
             };
-            structure.baselineDescr = [
-                {
-                    text: this.baselineDescr,
-                    style: style.baselineDescr,
-                    position,
-                },
-            ];
+            structure.baselineDescr = {
+                text: this.baselineDescr,
+                style: style.baselineDescr,
+                position,
+            };
         }
         let progressBarHeight = 0;
         if (this.runtime.progressBar) {
@@ -12480,18 +12363,41 @@ class ScorecardChartConfigBuilder {
             };
         }
         const { width: keyWidth, height: keyHeight } = this.getFullTextDimensions(this.keyValue, style.keyValue.font);
+        const keyDescrWidth = this.getTextDimensions(this.keyDescr, style.keyDescr.font).width;
+        let keyX;
+        switch (this.runtime.keyValueStyle?.align) {
+            case "right":
+                keyX = this.width - CHART_PADDING - keyDescrWidth - keyWidth;
+                break;
+            case "left":
+                keyX = CHART_PADDING;
+                break;
+            default:
+                keyX = (this.width - keyWidth - keyDescrWidth) / 2;
+        }
         if (this.keyValue) {
             structure.key = {
                 text: this.keyValue,
                 style: style.keyValue,
                 position: {
-                    x: Math.max(CHART_PADDING, (this.width - keyWidth) / 2),
+                    x: Math.max(CHART_PADDING, keyX),
                     y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
-                        CHART_PADDING / 2 +
+                        CHART_PADDING_BOTTOM / 2 +
                         (titleHeight + keyHeight / 2) / 2,
                 },
             };
         }
+        if (structure.key && this.keyDescr) {
+            const position = {
+                x: structure.key.position.x + keyWidth,
+                y: structure.key.position.y,
+            };
+            structure.keyDescr = {
+                text: this.keyDescr,
+                style: style.keyDescr,
+                position,
+            };
+        }
         return structure;
     }
     get title() {
@@ -12500,6 +12406,9 @@ class ScorecardChartConfigBuilder {
     get keyValue() {
         return this.runtime.keyValue;
     }
+    get keyDescr() {
+        return formatBaselineDescr(this.runtime.keyDescr, this.keyValue);
+    }
     get baseline() {
         return this.runtime.baselineDisplay;
     }
@@ -12532,7 +12441,9 @@ class ScorecardChartConfigBuilder {
         };
     }
     getTextStyles() {
-        let baselineValueFontSize = BASELINE_MAX_FONT_SIZE;
+        const keyValueFontSize = this.runtime.keyValueStyle?.fontSize ?? DEFAULT_SCORECARD_KEY_VALUE_FONT_SIZE;
+        const keyValueDescrFontSize = Math.floor(0.9 * keyValueFontSize);
+        let baselineValueFontSize = this.runtime.baselineStyle?.fontSize ?? DEFAULT_SCORECARD_BASELINE_FONT_SIZE;
         const baselineDescrFontSize = Math.floor(0.9 * baselineValueFontSize);
         if (this.runtime.progressBar) {
             baselineValueFontSize /= 1.5;
@@ -12544,27 +12455,37 @@ class ScorecardChartConfigBuilder {
             },
             keyValue: {
                 color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
-                font: getDefaultContextFont(KEY_VALUE_FONT_SIZE, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
+                font: getDefaultContextFont(keyValueFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
                 strikethrough: this.runtime.keyValueStyle?.strikethrough,
                 underline: this.runtime.keyValueStyle?.underline,
             },
+            keyDescr: {
+                color: this.runtime.keyValueDescrStyle?.textColor || this.runtime.fontColor,
+                font: getDefaultContextFont(keyValueDescrFontSize, this.runtime.keyValueDescrStyle?.bold, this.runtime.keyValueDescrStyle?.italic),
+                strikethrough: this.runtime.keyValueDescrStyle?.strikethrough,
+                underline: this.runtime.keyValueDescrStyle?.underline,
+            },
             baselineValue: {
                 font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
                 strikethrough: this.runtime.baselineStyle?.strikethrough,
                 underline: this.runtime.baselineStyle?.underline,
-                color: this.runtime.baselineStyle?.textColor ||
-                    this.runtime.baselineColor ||
+                color: this.runtime.baselineColor ||
+                    this.runtime.baselineStyle?.textColor ||
                     this.secondaryFontColor,
             },
             baselineDescr: {
-                font: getDefaultContextFont(baselineDescrFontSize),
-                color: this.secondaryFontColor,
+                font: getDefaultContextFont(baselineDescrFontSize, this.runtime.baselineDescrStyle?.bold, this.runtime.baselineDescrStyle?.italic),
+                strikethrough: this.runtime.baselineDescrStyle?.strikethrough,
+                underline: this.runtime.baselineDescrStyle?.underline,
+                color: this.runtime.baselineDescrStyle?.textColor ?? this.secondaryFontColor,
             },
             baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar
                 ? undefined
                 : {
                     size: this.keyValue ? 0.8 * baselineValueFontSize : 0,
-                    color: this.runtime.baselineColor || this.secondaryFontColor,
+                    color: this.runtime.baselineColor ||
+                        this.runtime.baselineStyle?.textColor ||
+                        this.secondaryFontColor,
                 },
         };
     }
@@ -12958,14 +12879,14 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
     }
     switch (runtime.title.align) {
         case "right":
-            x = boundingRect.width - titleWidth - CHART_PADDING$1;
+            x = boundingRect.width - titleWidth - CHART_PADDING;
             break;
         case "center":
             x = (boundingRect.width - titleWidth) / 2;
             break;
         case "left":
         default:
-            x = CHART_PADDING$1;
+            x = CHART_PADDING;
             break;
     }
     return {
@@ -14287,8 +14208,8 @@ function getTopPaddingForDashboard(definition, getters) {
 function getChartLayout(definition, args) {
     return {
         padding: {
-            left: CHART_PADDING$1,
-            right: CHART_PADDING$1,
+            left: CHART_PADDING,
+            right: CHART_PADDING,
             top: Math.max(CHART_PADDING_TOP, args.topPadding || 0),
             bottom: CHART_PADDING_BOTTOM,
         },
@@ -14839,11 +14760,11 @@ function getLegendMargin(definition) {
         case "right":
             const hasTitle = !!definition.title.text;
             const topMargin = hasTitle ? CHART_PADDING_TOP + 30 : CHART_PADDING_TOP;
-            return { top: topMargin, left: CHART_PADDING$1, right: CHART_PADDING$1 };
+            return { top: topMargin, left: CHART_PADDING, right: CHART_PADDING };
         case "bottom":
         case "left":
         case "none":
-            return { left: CHART_PADDING$1, right: CHART_PADDING$1, bottom: CHART_PADDING_BOTTOM };
+            return { left: CHART_PADDING, right: CHART_PADDING, bottom: CHART_PADDING_BOTTOM };
     }
 }
 function legendPositionToGeoLegendPosition(position) {
@@ -14911,7 +14832,7 @@ function getChartTitle(definition) {
         padding: {
             // Disable title top/left/right padding to use the chart padding instead.
             // The legend already has a top padding, so bottom padding is useless for the title there.
-            bottom: definition.legendPosition === "top" ? 0 : CHART_PADDING$1,
+            bottom: definition.legendPosition === "top" ? 0 : CHART_PADDING,
         },
     };
 }
@@ -15474,6 +15395,10 @@ function createBarChartRuntime(chart, getters) {
 
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
+    static props = {
+        figureUI: Object,
+        isFullScreen: { type: Boolean, optional: true },
+    };
     canvas = useRef("chartContainer");
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
@@ -15486,9 +15411,6 @@ class GaugeChartComponent extends Component {
         });
     }
 }
-GaugeChartComponent.props = {
-    figureUI: Object,
-};
 
 class ComboChart extends AbstractChart {
     dataSets;
@@ -18292,6 +18214,26 @@ function getDeleteMenuItem(figureId, onFigureDeleted, env) {
     };
 }
 
+class FullScreenChartStore extends SpreadsheetStore {
+    mutators = ["toggleFullScreenChart"];
+    fullScreenFigure = undefined;
+    toggleFullScreenChart(figureId) {
+        if (this.fullScreenFigure?.id === figureId) {
+            this.fullScreenFigure = undefined;
+        }
+        else {
+            this.makeFullScreen(figureId);
+        }
+    }
+    makeFullScreen(figureId) {
+        const sheetId = this.getters.getActiveSheetId();
+        const figure = this.getters.getFigure(sheetId, figureId);
+        if (figure) {
+            this.fullScreenFigure = { ...figure, x: 0, y: 0, width: 0, height: 0 };
+        }
+    }
+}
+
 /**
  * Repeatedly calls a callback function with a time delay between calls.
  */
@@ -18411,7 +18353,9 @@ function usePopoverContainer() {
     const spreadsheetRect = useSpreadsheetRect();
     function updateRect() {
         const env = component.env;
-        const newRect = "getPopoverContainerRect" in env ? env.getPopoverContainerRect() : spreadsheetRect;
+        const newRect = "getPopoverContainerRect" in env && env.getPopoverContainerRect
+            ? env.getPopoverContainerRect()
+            : spreadsheetRect;
         container.x = newRect.x;
         container.y = newRect.y;
         container.width = newRect.width;
@@ -18936,9 +18880,11 @@ class ChartDashboardMenu extends Component {
     static components = { Menu };
     static props = { figureUI: Object };
     originalChartDefinition;
+    fullScreenFigureStore;
     menuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
     setup() {
         super.setup();
+        this.fullScreenFigureStore = useStore(FullScreenChartStore);
         this.originalChartDefinition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
         onWillUpdateProps(({ figureUI }) => {
             if (figureUI.id !== this.props.figureUI.id) {
@@ -18946,7 +18892,10 @@ class ChartDashboardMenu extends Component {
             }
         });
     }
-    getAvailableTypes() {
+    getMenuItems() {
+        return [this.fullScreenMenuItem, ...this.changeChartTypeMenuItems].filter(isDefined);
+    }
+    get changeChartTypeMenuItems() {
         const definition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
         if (!["line", "bar", "pie"].includes(definition.type)) {
             return [];
@@ -18954,8 +18903,11 @@ class ChartDashboardMenu extends Component {
         return ["column", "line", "pie"].map((type) => {
             const item = chartSubtypeRegistry.get(type);
             return {
-                ...item,
-                icon: this.getIconClasses(item.chartType),
+                id: item.chartType,
+                label: item.displayName,
+                onClick: () => this.onTypeChange(item.chartType),
+                isSelected: item.chartType === this.selectedChartType,
+                iconClass: this.getIconClasses(item.chartType),
             };
         });
     }
@@ -19010,6 +18962,30 @@ class ChartDashboardMenu extends Component {
         this.menuState.anchorRect = { x: ev.clientX, y: ev.clientY, width: 0, height: 0 };
         this.menuState.menuItems = getChartMenuActions(this.props.figureUI.id, () => { }, this.env);
     }
+    get fullScreenMenuItem() {
+        const definition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
+        if (definition.type === "scorecard") {
+            return undefined;
+        }
+        if (this.props.figureUI.id === this.fullScreenFigureStore.fullScreenFigure?.id) {
+            return {
+                id: "fullScreenChart",
+                label: _t("Exit Full Screen"),
+                iconClass: "fa fa-compress",
+                onClick: () => {
+                    this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                },
+            };
+        }
+        return {
+            id: "fullScreenChart",
+            label: _t("Full Screen"),
+            iconClass: "fa fa-expand",
+            onClick: () => {
+                this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+            },
+        };
+    }
 }
 
 // -----------------------------------------------------------------------------
@@ -29028,7 +29004,7 @@ const PIVOT = {
         if (error) {
             return error;
         }
-        const table = pivot.getTableStructure();
+        const table = pivot.getCollapsedTableStructure();
         const cells = table.getPivotCells(_includedTotal, _includeColumnHeaders);
         const headerRows = _includeColumnHeaders ? table.columns.length : 0;
         const pivotTitle = this.getters.getPivotDisplayName(pivotId);
@@ -29048,7 +29024,7 @@ const PIVOT = {
                         break;
                     case "HEADER":
                         const valueAndFormat = pivot.getPivotHeaderValueAndFormat(pivotCell.domain);
-                        result[col].push(addIndentAndAlignToPivotHeader(pivot, pivotCell.domain, valueAndFormat));
+                        result[col].push(addAlignFormatToPivotHeader(pivotCell.domain, valueAndFormat));
                         break;
                     case "MEASURE_HEADER":
                         result[col].push(pivot.getPivotMeasureValue(pivotCell.measure, pivotCell.domain));
@@ -32975,12 +32951,13 @@ class StandaloneComposerStore extends AbstractComposerStore {
         return res;
     }
     getComposerContent() {
+        let content = this._currentContent;
         if (this.editionMode === "inactive") {
             // References in the content might not be linked to the current active sheet
             // We here force the sheet name prefix for all references that are not in
             // the current active sheet
             const defaultRangeSheetId = this.args().defaultRangeSheetId;
-            return rangeTokenize(this.args().content)
+            content = rangeTokenize(this.args().content)
                 .map((token) => {
                 if (token.type === "REFERENCE") {
                     const range = this.getters.getRangeFromSheetXC(defaultRangeSheetId, token.value);
@@ -32990,7 +32967,7 @@ class StandaloneComposerStore extends AbstractComposerStore {
             })
                 .join("");
         }
-        return this._currentContent;
+        return localizeContent(content, this.getters.getLocale());
     }
     stopEdition() {
         this._stopEdition();
@@ -35669,11 +35646,6 @@ function buildTableStyle(name, templateName, primaryColor) {
     };
 }
 
-/**
- * Registry to draw icons on cells
- */
-const iconsOnCellRegistry = new Registry();
-
 css /* scss */ `
   .o-spreadsheet {
     .o-icon {
@@ -35810,13 +35782,6 @@ const ICON_SETS = {
         bad: "dotBad",
     },
 };
-iconsOnCellRegistry.add("conditional_formatting", (getters, position) => {
-    const icon = getters.getConditionalIcon(position);
-    if (icon) {
-        return ICONS[icon].svg;
-    }
-    return undefined;
-});
 
 /**
  * Map of the different types of conversions warnings and their name in error messages
@@ -39924,6 +39889,22 @@ migrationStepRegistry
         }
         return data;
     },
+})
+    .add("18.4.2", {
+    migrate(data) {
+        for (const sheet of data.sheets || []) {
+            for (const figure of sheet.figures || []) {
+                if (figure.tag !== "chart" || figure.data.type !== "scorecard") {
+                    continue;
+                }
+                const scData = figure.data;
+                if (scData.baselineDescr) {
+                    scData.baselineDescr = { text: scData.baselineDescr };
+                }
+            }
+        }
+        return data;
+    },
 });
 function fixOverlappingFilters(data) {
     for (const sheet of data.sheets || []) {
@@ -40798,7 +40779,7 @@ const REINSERT_DYNAMIC_PIVOT_CHILDREN = (env) => env.model.getters.getPivotIds()
     sequence: index,
     execute: (env) => {
         const zone = env.model.getters.getSelectedZone();
-        const table = env.model.getters.getPivot(pivotId).getTableStructure().export();
+        const table = env.model.getters.getPivot(pivotId).getCollapsedTableStructure().export();
         env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
             pivotId,
             table,
@@ -40817,7 +40798,7 @@ const REINSERT_STATIC_PIVOT_CHILDREN = (env) => env.model.getters.getPivotIds().
     sequence: index,
     execute: (env) => {
         const zone = env.model.getters.getSelectedZone();
-        const table = env.model.getters.getPivot(pivotId).getTableStructure().export();
+        const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure().export();
         env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
             pivotId,
             table,
@@ -42198,6 +42179,218 @@ function getColumnsNumber(env) {
     }
 }
 
+const PREVIOUS_VALUE = "(previous)";
+const NEXT_VALUE = "(next)";
+function getDomainOfParentRow(pivot, domain) {
+    const { colDomain, rowDomain } = domainToColRowDomain(pivot, domain);
+    return [...colDomain, ...rowDomain.slice(0, rowDomain.length - 1)];
+}
+function getDomainOfParentCol(pivot, domain) {
+    const { colDomain, rowDomain } = domainToColRowDomain(pivot, domain);
+    return [...colDomain.slice(0, colDomain.length - 1), ...rowDomain];
+}
+/**
+ * Split a pivot domain into the part related to the rows of the pivot, and the part related to the columns.
+ */
+function domainToColRowDomain(pivot, domain) {
+    const rowFields = pivot.definition.rows.map((c) => c.nameWithGranularity);
+    const rowDomain = domain.filter((node) => rowFields.includes(node.field));
+    const columnFields = pivot.definition.columns.map((c) => c.nameWithGranularity);
+    const colDomain = domain.filter((node) => columnFields.includes(node.field));
+    return { colDomain, rowDomain };
+}
+function getDimensionDomain(pivot, dimension, domain) {
+    return dimension === "column"
+        ? domainToColRowDomain(pivot, domain).colDomain
+        : domainToColRowDomain(pivot, domain).rowDomain;
+}
+function getFieldValueInDomain(fieldNameWithGranularity, domain) {
+    const node = domain.find((n) => n.field === fieldNameWithGranularity);
+    return node?.value;
+}
+function isDomainIsInPivot(pivot, domain) {
+    for (const node of domain) {
+        if (pivot.definition.rows.find((row) => row.nameWithGranularity === node.field) === undefined &&
+            pivot.definition.columns.find((col) => col.nameWithGranularity === node.field) === undefined) {
+            return false;
+        }
+    }
+    const { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
+    return (checkIfDomainInInTree(rowDomain, pivot.getExpandedTableStructure().getRowTree()) &&
+        checkIfDomainInInTree(colDomain, pivot.getExpandedTableStructure().getColTree()));
+}
+function checkIfDomainInInTree(domain, tree) {
+    return walkDomainTree(domain, tree) !== undefined;
+}
+/**
+ * Given a tree of the col/rows of a pivot, and a domain related to those col/rows, return the node of the tree
+ * corresponding to the domain.
+ *
+ * @param domain The domain to find in the tree
+ * @param tree The tree to search in7
+ * @param stopAtField If provided, the search will stop at the field with this name
+ */
+function walkDomainTree(domain, tree, stopAtField) {
+    let currentTreeNode = tree;
+    for (const node of domain) {
+        const child = currentTreeNode.find((n) => n.value === node.value);
+        if (!child) {
+            return undefined;
+        }
+        if (child.field === stopAtField) {
+            return currentTreeNode;
+        }
+        currentTreeNode = child.children;
+    }
+    return currentTreeNode;
+}
+/**
+ * Get the domain parent of the given domain with the field `parentFieldName` as leaf of the domain.
+ *
+ * In practice, if the `parentFieldName` is a row in the pivot, the helper will return a domain with the same column
+ * domain, and with a row domain all groupBys children to `parentFieldName` removed.
+ */
+function getFieldParentDomain(pivot, parentFieldName, domain) {
+    let { rowDomain, colDomain } = domainToColRowDomain(pivot, domain);
+    const dimension = getFieldDimensionType(pivot, parentFieldName);
+    if (dimension === "row") {
+        const index = rowDomain.findIndex((node) => node.field === parentFieldName);
+        if (index === -1) {
+            return domain;
+        }
+        rowDomain = rowDomain.slice(0, index + 1);
+    }
+    else {
+        const index = colDomain.findIndex((node) => node.field === parentFieldName);
+        if (index === -1) {
+            return domain;
+        }
+        colDomain = colDomain.slice(0, index + 1);
+    }
+    return [...rowDomain, ...colDomain];
+}
+/**
+ * Replace in the domain the value of the field `fieldNameWithGranularity` with the given `value`
+ */
+function replaceFieldValueInDomain(domain, fieldNameWithGranularity, value) {
+    domain = deepCopy(domain);
+    const node = domain.find((n) => n.field === fieldNameWithGranularity);
+    if (!node) {
+        return domain;
+    }
+    node.value = value;
+    return domain;
+}
+function isFieldInDomain(nameWithGranularity, domain) {
+    return domain.some((node) => node.field === nameWithGranularity);
+}
+/**
+ * Check if the field is in the rows or columns of the pivot
+ */
+function getFieldDimensionType(pivot, nameWithGranularity) {
+    const rowFields = pivot.definition.rows.map((c) => c.nameWithGranularity);
+    if (rowFields.includes(nameWithGranularity)) {
+        return "row";
+    }
+    const columnFields = pivot.definition.columns.map((c) => c.nameWithGranularity);
+    if (columnFields.includes(nameWithGranularity)) {
+        return "column";
+    }
+    throw new Error(`Field ${nameWithGranularity} not found in pivot`);
+}
+/**
+ * Replace in the given domain the value of the field `fieldNameWithGranularity` with the previous or next value.
+ */
+function getPreviousOrNextValueDomain(pivot, domain, fieldNameWithGranularity, direction) {
+    const dimension = getFieldDimensionType(pivot, fieldNameWithGranularity);
+    const tree = dimension === "row"
+        ? pivot.getExpandedTableStructure().getRowTree()
+        : pivot.getExpandedTableStructure().getColTree();
+    const dimDomain = getDimensionDomain(pivot, dimension, domain);
+    const currentTreeNode = walkDomainTree(dimDomain, tree, fieldNameWithGranularity);
+    const values = currentTreeNode?.map((n) => n.value) ?? [];
+    const value = getFieldValueInDomain(fieldNameWithGranularity, domain);
+    if (value === undefined) {
+        return undefined;
+    }
+    const valueIndex = values.indexOf(value);
+    if (value === undefined || valueIndex === -1) {
+        return undefined;
+    }
+    const offset = direction === PREVIOUS_VALUE ? -1 : 1;
+    const newIndex = clip(valueIndex + offset, 0, values.length - 1);
+    return replaceFieldValueInDomain(domain, fieldNameWithGranularity, values[newIndex]);
+}
+function domainToString(domain) {
+    return domain ? domain.map(domainNodeToString).join(", ") : "";
+}
+function domainNodeToString(domainNode) {
+    return domainNode ? `${domainNode.field}=${domainNode.value}` : "";
+}
+/**
+ *
+ * For the ranking, the pivot cell values of a column (or row) at the same depth are grouped together before being sorted
+ * and ranked.
+ *
+ * The grouping of a pivot cell is done with both the value of the domain nodes that are parent of the field
+ * `fieldNameWithGranularity` and the value of the last node of the domain of the pivot cell, if it's not the field
+ * `fieldNameWithGranularity`.
+ *
+ * For example, let's take a pivot grouped by (Date:year, Stage, User, Product), where we want to rank by "Stage" field.
+ * The domain nodes parents of the "Stage" are [Date:year]. The pivot cell with domain:
+ * - [Date:year=2021] is not ranked because it does not contain the "Stage" field
+ * - [Date:year=2021, Stage=Lead] is grouped with the cells [Date:year=2021, Stage=*, User=None, Product=None],
+ *      and then ranked within the group
+ * - [Date:year=2021, Stage=Lead, User=Bob] is grouped with the cells [Date:year=2021, Stage=*, User=Bob, Product=None],
+ *      and then ranked within the group
+ * - [Date:year=2021, Stage=Lead, User=Bob, Product=Table] is grouped with the cells [Date:year=2021, Stage=*, User=*, Product=Table],
+ *      and then ranked within the group
+ *
+ * If we rank the pivot on "User" instead, the parent domain becomes [Date:year, Sage] .The cell with domain:
+ * - [Date:year=2021] is not ranked because it does not contain the "Stage" field
+ * - [Date:year=2021, Stage=Lead] is not ranked because it does not contain the "User" field
+ * - [Date:year=2021, Stage=Lead, User=Bob] is grouped with the cells [Date:year=2021, Stage=Lead, User=Bob, Product=None],
+ *      and then ranked within the group
+ * - [Date:year=2021, Stage=Lead, User=Bob, Product=Table] is grouped with the cells with [Date:year=2021, Stage=Lead, User=*, Product=Table],
+ *     and then ranked within the group
+ *
+ */
+function getRankingDomainKey(domain, fieldNameWithGranularity) {
+    const index = domain.findIndex((node) => node.field === fieldNameWithGranularity);
+    if (index === -1) {
+        return "";
+    }
+    const parent = domain.slice(0, index);
+    const lastNode = domain.at(-1);
+    return domainToString(lastNode.field === fieldNameWithGranularity ? parent : [...parent, lastNode]);
+}
+/**
+ * The running total domain is the domain without the field `fieldNameWithGranularity`, ie. we do the running total of
+ * all the pivot cells of the column that have any value for the field `fieldNameWithGranularity` and the same value for
+ * the other fields.
+ */
+function getRunningTotalDomainKey(domain, fieldNameWithGranularity) {
+    const index = domain.findIndex((node) => node.field === fieldNameWithGranularity);
+    if (index === -1) {
+        return "";
+    }
+    return domainToString([...domain.slice(0, index), ...domain.slice(index + 1)]);
+}
+function sortPivotTree(tree, baseDomain, sortFn) {
+    const sortedTree = [...tree];
+    const domain = [...baseDomain];
+    sortedTree.sort((node1, node2) => sortFn([...domain, node1], [...domain, node2]));
+    for (const node of tree) {
+        const children = sortPivotTree(node.children, [...domain, node], sortFn);
+        node.children = children;
+    }
+    return sortedTree;
+}
+function isParentDomain(domain, parentDomain) {
+    return (domain.length > parentDomain.length &&
+        parentDomain.every((node, i) => deepEquals(node, domain[i])));
+}
+
 const pivotProperties = {
     name: _t("See pivot properties"),
     execute(env) {
@@ -43198,6 +43391,66 @@ class ArrayFormulaHighlight extends SpreadsheetStore {
     }
 }
 
+class ClientFocusStore extends SpreadsheetStore {
+    mutators = [
+        "focusClient",
+        "unfocusClient",
+        "showClientTag",
+        "hideClientTag",
+        "jumpToClient",
+    ];
+    _showClientTag = false;
+    clientFocusTimeout = {};
+    constructor(get) {
+        super(get);
+        this.onDispose(() => {
+            for (const clientId in this.clientFocusTimeout) {
+                this.unfocusClient(clientId);
+            }
+        });
+    }
+    get focusedClients() {
+        const focused = new Set();
+        this.model.getters.getConnectedClients().forEach((client) => {
+            if (this._showClientTag || this.clientFocusTimeout[client.id] !== undefined) {
+                focused.add(client.id);
+            }
+        });
+        return focused;
+    }
+    jumpToClient(clientId) {
+        const client = this.model.getters.getClient(clientId);
+        this.focusClient(clientId);
+        if (client.position) {
+            this.model.dispatch("ACTIVATE_SHEET", {
+                sheetIdTo: client.position.sheetId,
+                sheetIdFrom: this.getters.getActiveSheetId(),
+            });
+            this.model.dispatch("SCROLL_TO_CELL", { col: client.position.col, row: client.position.row });
+        }
+    }
+    showClientTag() {
+        this._showClientTag = true;
+    }
+    hideClientTag() {
+        this._showClientTag = false;
+    }
+    focusClient(clientId) {
+        if (this.clientFocusTimeout[clientId]) {
+            clearTimeout(this.clientFocusTimeout[clientId]);
+        }
+        // This call to unfocus client isn't proxyfied and doesn't trigger a render.
+        // The focus will visually disappear when the next render is triggered
+        this.clientFocusTimeout[clientId] = setTimeout(() => this.unfocusClient(clientId), 3000);
+    }
+    unfocusClient(clientId) {
+        if (this.clientFocusTimeout[clientId]) {
+            clearTimeout(this.clientFocusTimeout[clientId]);
+        }
+        this.clientFocusTimeout[clientId] = undefined;
+    }
+}
+
 /**
  * Function to be used during a pointerdown event, this function allows to
  * perform actions related to the pointermove and pointerup events and adjusts the viewport
@@ -43471,6 +43724,11 @@ class ClientTag extends Component {
     get tagStyle() {
         const { col, row, color } = this.props;
         const { height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        const visible = this.env.model.getters.isVisibleInViewport({
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            col,
+            row,
+        });
         const { x, y } = this.env.model.getters.getVisibleRect({
             left: col,
             top: row,
@@ -43482,6 +43740,7 @@ class ClientTag extends Component {
             left: `${x - 1}px`,
             border: `1px solid ${color}`,
             "background-color": color,
+            visibility: visible ? "visible" : "hidden",
         });
     }
 }
@@ -43907,151 +44166,6 @@ class GridComposer extends Component {
     }
 }
 
-css /* scss */ `
-  .o-grid-cell-icon {
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-  }
-`;
-class GridCellIcon extends Component {
-    static template = "o-spreadsheet-GridCellIcon";
-    static props = {
-        cellPosition: Object,
-        horizontalAlign: { type: String, optional: true },
-        verticalAlign: { type: String, optional: true },
-        slots: Object,
-    };
-    get iconStyle() {
-        const cellPosition = this.props.cellPosition;
-        const merge = this.env.model.getters.getMerge(cellPosition);
-        const zone = merge || positionToZone(cellPosition);
-        const rect = this.env.model.getters.getVisibleRectWithoutHeaders(zone);
-        const x = this.getIconHorizontalPosition(rect, cellPosition);
-        const y = this.getIconVerticalPosition(rect, cellPosition);
-        return cssPropertiesToCss({
-            top: `${y}px`,
-            left: `${x}px`,
-        });
-    }
-    getIconVerticalPosition(rect, cellPosition) {
-        const start = rect.y;
-        const end = rect.y + rect.height;
-        const cell = this.env.model.getters.getCell(cellPosition);
-        const align = this.props.verticalAlign || cell?.style?.verticalAlign || DEFAULT_VERTICAL_ALIGN;
-        switch (align) {
-            case "bottom":
-                return end - GRID_ICON_MARGIN - GRID_ICON_EDGE_LENGTH;
-            case "top":
-                return start + GRID_ICON_MARGIN;
-            default:
-                const centeringOffset = Math.floor((end - start - GRID_ICON_EDGE_LENGTH) / 2);
-                return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
-        }
-    }
-    getIconHorizontalPosition(rect, cellPosition) {
-        const start = rect.x;
-        const end = rect.x + rect.width;
-        const cell = this.env.model.getters.getCell(cellPosition);
-        const evaluatedCell = this.env.model.getters.getEvaluatedCell(cellPosition);
-        const align = this.props.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
-        switch (align) {
-            case "right":
-                return end - GRID_ICON_MARGIN - GRID_ICON_EDGE_LENGTH;
-            case "left":
-                return start + GRID_ICON_MARGIN;
-            default:
-                const centeringOffset = Math.floor((end - start - GRID_ICON_EDGE_LENGTH) / 2);
-                return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
-        }
-    }
-    isPositionVisible(position) {
-        const rect = this.env.model.getters.getVisibleRect(positionToZone(position));
-        return !(rect.width === 0 || rect.height === 0);
-    }
-}
-
-const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
-css /* scss */ `
-  .o-dv-checkbox {
-    margin: ${MARGIN}px;
-    /* required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
-    position: absolute;
-  }
-`;
-class DataValidationCheckbox extends Component {
-    static template = "o-spreadsheet-DataValidationCheckbox";
-    static components = {
-        Checkbox,
-    };
-    static props = {
-        cellPosition: Object,
-    };
-    onCheckboxChange(value) {
-        const { sheetId, col, row } = this.props.cellPosition;
-        const cellContent = value ? "TRUE" : "FALSE";
-        this.env.model.dispatch("UPDATE_CELL", { sheetId, col, row, content: cellContent });
-    }
-    get checkBoxValue() {
-        return !!this.env.model.getters.getEvaluatedCell(this.props.cellPosition).value;
-    }
-    get isDisabled() {
-        const cell = this.env.model.getters.getCell(this.props.cellPosition);
-        return this.env.model.getters.isReadonly() || !!cell?.isFormula;
-    }
-}
-
-const ICON_WIDTH = 13;
-css /* scss */ `
-  .o-dv-list-icon {
-    color: ${TEXT_BODY_MUTED};
-    border-radius: 1px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      color: #ffffff;
-      background-color: ${TEXT_BODY_MUTED};
-    }
-
-    svg {
-      width: ${ICON_WIDTH}px;
-      height: ${ICON_WIDTH}px;
-    }
-  }
-`;
-class DataValidationListIcon extends Component {
-    static template = "o-spreadsheet-DataValidationListIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    onClick() {
-        const { col, row } = this.props.cellPosition;
-        this.env.model.selection.selectCell(col, row);
-        this.env.startCellEdition();
-    }
-}
-
-class DataValidationOverlay extends Component {
-    static template = "o-spreadsheet-DataValidationOverlay";
-    static props = {};
-    static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
-    get checkBoxCellPositions() {
-        return this.env.model.getters
-            .getVisibleCellPositions()
-            .filter((position) => this.env.model.getters.isCellValidCheckbox(position) &&
-            !this.env.model.getters.isFilterHeader(position));
-    }
-    get listIconsCellPositions() {
-        if (this.env.model.getters.isReadonly()) {
-            return [];
-        }
-        return this.env.model.getters
-            .getVisibleCellPositions()
-            .filter((position) => this.env.model.getters.cellHasListDataValidationIcon(position) &&
-            !this.env.model.getters.isFilterHeader(position));
-    }
-}
-
 function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, initialFigure, { maxX, maxY }, { scrollX: initialScrollX, scrollY: initialScrollY }, { scrollX, scrollY }) {
     const deltaX = mouseX - mouseInitialX + scrollX - initialScrollX;
     const newX = clip(initialFigure.x + deltaX, 0, maxX - initialFigure.width);
@@ -44065,14 +44179,14 @@ function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }
         const deltaX = Math.min(dirX * (mouseInitialX - mouseX + scrollX - initialScrollX), width - minFigSize);
         const deltaY = Math.min(dirY * (mouseInitialY - mouseY + scrollY - initialScrollY), height - minFigSize);
         const fraction = Math.min(deltaX / width, deltaY / height);
-        width = width * (1 - fraction);
-        height = height * (1 - fraction);
         if (dirX < 0) {
             x = x + width * fraction;
         }
         if (dirY < 0) {
             y = y + height * fraction;
         }
+        width = width * (1 - fraction);
+        height = height * (1 - fraction);
     }
     else {
         const deltaX = Math.max(dirX * (mouseX - mouseInitialX + scrollX - initialScrollX), minFigSize - width);
@@ -44653,78 +44767,6 @@ class FiguresContainer extends Component {
     }
 }
 
-css /* scss */ `
-  .o-filter-icon {
-    color: ${FILTERS_COLOR};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      background: ${FILTERS_COLOR};
-      color: #fff;
-    }
-
-    &.o-high-contrast {
-      color: #defade;
-    }
-    &.o-high-contrast:hover {
-      color: ${FILTERS_COLOR};
-      background: #fff;
-    }
-  }
-  .o-filter-icon:hover {
-    background: ${FILTERS_COLOR};
-    color: #fff;
-  }
-`;
-class FilterIcon extends Component {
-    static template = "o-spreadsheet-FilterIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    cellPopovers;
-    setup() {
-        this.cellPopovers = useStore(CellPopoverStore);
-    }
-    onClick() {
-        const position = this.props.cellPosition;
-        const activePopover = this.cellPopovers.persistentCellPopover;
-        const { col, row } = position;
-        if (activePopover.isOpen &&
-            activePopover.col === col &&
-            activePopover.row === row &&
-            activePopover.type === "FilterMenu") {
-            this.cellPopovers.close();
-            return;
-        }
-        this.cellPopovers.open({ col, row }, "FilterMenu");
-    }
-    get isFilterActive() {
-        return this.env.model.getters.isFilterActive(this.props.cellPosition);
-    }
-    get iconClass() {
-        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
-        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
-        return luminance < 0.45 ? "o-high-contrast" : "";
-    }
-}
-
-class FilterIconsOverlay extends Component {
-    static template = "o-spreadsheet-FilterIconsOverlay";
-    static props = {};
-    static components = {
-        GridCellIcon,
-        FilterIcon,
-    };
-    getFilterHeadersPositions() {
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        return this.env.model.getters.getFilterHeaders(sheetId);
-    }
-}
-
 css /* scss */ `
   .o-validation {
     border-radius: 4px;
@@ -44865,6 +44907,78 @@ class GridAddRowsFooter extends Component {
     }
 }
 
+class GridCellIcon extends Component {
+    static template = "o-spreadsheet-GridCellIcon";
+    static props = {
+        icon: Object,
+        verticalAlign: { type: String, optional: true },
+        slots: Object,
+    };
+    get iconStyle() {
+        const cellPosition = this.props.icon.position;
+        const merge = this.env.model.getters.getMerge(cellPosition);
+        const zone = merge || positionToZone(cellPosition);
+        const rect = this.env.model.getters.getVisibleRectWithoutHeaders(zone);
+        const x = this.getIconHorizontalPosition(rect, cellPosition);
+        const y = this.getIconVerticalPosition(rect, cellPosition);
+        return cssPropertiesToCss({
+            top: `${y}px`,
+            left: `${x}px`,
+            width: `${this.props.icon.size}px`,
+            height: `${this.props.icon.size}px`,
+        });
+    }
+    getIconVerticalPosition(rect, cellPosition) {
+        const start = rect.y;
+        const end = rect.y + rect.height;
+        const cell = this.env.model.getters.getCell(cellPosition);
+        const align = this.props.verticalAlign || cell?.style?.verticalAlign || DEFAULT_VERTICAL_ALIGN;
+        switch (align) {
+            case "bottom":
+                return end - GRID_ICON_MARGIN - GRID_ICON_EDGE_LENGTH;
+            case "top":
+                return start + GRID_ICON_MARGIN;
+            default:
+                const centeringOffset = Math.floor((end - start - GRID_ICON_EDGE_LENGTH) / 2);
+                return end - GRID_ICON_EDGE_LENGTH - centeringOffset;
+        }
+    }
+    getIconHorizontalPosition(rect, cellPosition) {
+        const start = rect.x;
+        const end = rect.x + rect.width;
+        const cell = this.env.model.getters.getCell(cellPosition);
+        const evaluatedCell = this.env.model.getters.getEvaluatedCell(cellPosition);
+        const align = this.props.icon.horizontalAlign || cell?.style?.align || evaluatedCell.defaultAlign;
+        switch (align) {
+            case "right":
+                return end - this.props.icon.size - this.props.icon.margin;
+            case "left":
+                return start + this.props.icon.margin;
+            default:
+                const centeringOffset = Math.floor((end - start - this.props.icon.size) / 2);
+                return end - this.props.icon.size - centeringOffset;
+        }
+    }
+    isPositionVisible(position) {
+        const rect = this.env.model.getters.getVisibleRect(positionToZone(position));
+        return !(rect.width === 0 || rect.height === 0);
+    }
+}
+
+class GridCellIconOverlay extends Component {
+    static template = "o-spreadsheet-GridCellIconOverlay";
+    static props = {};
+    static components = { GridCellIcon };
+    get icons() {
+        const icons = [];
+        for (const position of this.env.model.getters.getVisibleCellPositions()) {
+            const cellIcons = this.env.model.getters.getCellIcons(position);
+            icons.push(...cellIcons.filter((icon) => icon.component));
+        }
+        return icons;
+    }
+}
+
 /**
  * Manages an event listener on a ref. Useful for hooks that want to manage
  * event listeners, especially more than one. Prefer using t-on directly in
@@ -45116,9 +45230,8 @@ class GridOverlay extends Component {
     };
     static components = {
         FiguresContainer,
-        DataValidationOverlay,
         GridAddRowsFooter,
-        FilterIconsOverlay,
+        GridCellIconOverlay,
     };
     static defaultProps = {
         onCellDoubleClicked: () => { },
@@ -46128,13 +46241,12 @@ class GridRenderer {
                 // compute horizontal align start point parameter
                 let x = box.x;
                 if (align === "left") {
-                    x += MIN_CELL_TEXT_MARGIN + (box.image ? box.image.size + MIN_CF_ICON_MARGIN : 0);
+                    const leftIconSize = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
+                    x += MIN_CELL_TEXT_MARGIN + leftIconSize;
                 }
                 else if (align === "right") {
-                    x +=
-                        box.width -
-                            MIN_CELL_TEXT_MARGIN -
-                            (box.hasIcon ? GRID_ICON_EDGE_LENGTH + GRID_ICON_MARGIN : 0);
+                    const rightIconSize = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
+                    x += box.width - MIN_CELL_TEXT_MARGIN - rightIconSize;
                 }
                 else {
                     x += box.width / 2;
@@ -46168,18 +46280,28 @@ class GridRenderer {
     drawIcon(renderingContext, boxes) {
         const { ctx } = renderingContext;
         for (const box of boxes) {
-            if (box.image && box.image.svg) {
+            for (const icon of Object.values(box.icons)) {
+                if (!icon || !icon.svg) {
+                    continue;
+                }
                 ctx.save();
-                if (box.image.clipIcon) {
-                    ctx.beginPath();
-                    const { x, y, width, height } = box.image.clipIcon;
-                    ctx.rect(x, y, width, height);
-                    ctx.clip();
+                ctx.beginPath();
+                ctx.rect(box.x, box.y, box.width, box.height);
+                ctx.clip();
+                const iconSize = icon.size;
+                const iconY = this.computeTextYCoordinate(box, iconSize);
+                const svg = icon.svg;
+                let x;
+                if (icon.horizontalAlign === "left") {
+                    x = box.x + icon.margin;
+                }
+                else if (icon.horizontalAlign === "right") {
+                    x = box.x + box.width - iconSize - icon.margin;
                 }
-                const iconSize = box.image.size;
-                const y = this.computeTextYCoordinate(box, iconSize);
-                const svg = box.image.svg;
-                ctx.translate(box.x + MIN_CF_ICON_MARGIN, y);
+                else {
+                    x = box.x + (box.width - iconSize) / 2;
+                }
+                ctx.translate(x, iconY);
                 ctx.scale(iconSize / svg.width, iconSize / svg.height);
                 ctx.fillStyle = svg.fillColor;
                 ctx.fill(new Path2D(svg.path));
@@ -46356,13 +46478,11 @@ class GridRenderer {
             const position = { sheetId, col: col + 1, row };
             const nextCell = this.getters.getEvaluatedCell(position);
             const nextCellBorder = this.getters.getCellComputedBorder(position);
-            const cellHasIcon = this.getters.doesCellHaveGridIcon(position);
-            const cellHasCheckbox = this.getters.isCellValidCheckbox(position);
+            const doesCellHaveGridIcon = this.getters.doesCellHaveGridIcon(position);
             if (nextCell.type !== CellValueType.empty ||
                 this.getters.isInMerge(position) ||
                 nextCellBorder?.left ||
-                cellHasIcon ||
-                cellHasCheckbox) {
+                doesCellHaveGridIcon) {
                 return col;
             }
             col++;
@@ -46376,13 +46496,11 @@ class GridRenderer {
             const position = { sheetId, col: col - 1, row };
             const previousCell = this.getters.getEvaluatedCell(position);
             const previousCellBorder = this.getters.getCellComputedBorder(position);
-            const cellHasIcon = this.getters.doesCellHaveGridIcon(position);
-            const cellHasCheckbox = this.getters.isCellValidCheckbox(position);
+            const doesCellHaveGridIcon = this.getters.doesCellHaveGridIcon(position);
             if (previousCell.type !== CellValueType.empty ||
                 this.getters.isInMerge(position) ||
                 previousCellBorder?.right ||
-                cellHasIcon ||
-                cellHasCheckbox) {
+                doesCellHaveGridIcon) {
                 return col;
             }
             col--;
@@ -46418,6 +46536,12 @@ class GridRenderer {
         const dataBarFill = this.fingerprints.isEnabled
             ? undefined
             : this.getters.getConditionalDataBar(position);
+        const iconsList = this.getters.getCellIcons(position);
+        const cellIcons = {
+            left: iconsList.find((icon) => icon?.horizontalAlign === "left"),
+            right: iconsList.find((icon) => icon?.horizontalAlign === "right"),
+            center: iconsList.find((icon) => icon?.horizontalAlign === "center"),
+        };
         const box = {
             x,
             y,
@@ -46430,32 +46554,21 @@ class GridRenderer {
             overlayColor: this.hoveredTables.overlayColors.get(position),
             isError: (cell.type === CellValueType.error && !!cell.message) ||
                 this.getters.isDataValidationInvalid(position),
+            icons: cellIcons,
         };
-        /** Icon */
-        const iconSvg = this.getters.getCellIconSvg(position);
         const fontSizePX = computeTextFontSizeInPixels(box.style);
-        const iconBoxWidth = iconSvg ? MIN_CF_ICON_MARGIN + fontSizePX : 0;
-        if (iconSvg) {
-            box.image = {
-                type: "icon",
-                size: fontSizePX,
-                clipIcon: { x: box.x, y: box.y, width: Math.min(iconBoxWidth, width), height },
-                svg: iconSvg,
-            };
-        }
-        if (cell.type === CellValueType.empty || this.getters.isCellValidCheckbox(position)) {
+        if (cell.type === CellValueType.empty || box.icons.center) {
             return box;
         }
-        /** Filter Header or data validation icon */
-        box.hasIcon = this.getters.doesCellHaveGridIcon(position);
-        const headerIconWidth = box.hasIcon ? GRID_ICON_EDGE_LENGTH + GRID_ICON_MARGIN : 0;
         /** Content */
         const wrapping = style.wrapping || "overflow";
         const wrapText = wrapping === "wrap" && !showFormula;
         const maxWidth = width - 2 * MIN_CELL_TEXT_MARGIN;
         const multiLineText = this.getters.getCellMultiLineText(position, { maxWidth, wrapText });
         const textWidth = Math.max(...multiLineText.map((line) => this.getters.getTextWidth(line, style) + MIN_CELL_TEXT_MARGIN));
-        const contentWidth = iconBoxWidth + textWidth + headerIconWidth;
+        const leftIconWidth = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
+        const rightIconWidth = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
+        const contentWidth = leftIconWidth + textWidth + rightIconWidth;
         const align = this.computeCellAlignment(position, contentWidth > width);
         box.content = {
             textLines: multiLineText,
@@ -46464,11 +46577,11 @@ class GridRenderer {
         };
         /** ClipRect */
         const isOverflowing = contentWidth > width || fontSizePX > height;
-        if (iconSvg || box.hasIcon) {
+        if (box.icons.left || box.icons.right) {
             box.clipRect = {
-                x: box.x + iconBoxWidth,
+                x: box.x + leftIconWidth,
                 y: box.y,
-                width: Math.max(0, width - iconBoxWidth - headerIconWidth),
+                width: Math.max(0, width - leftIconWidth - rightIconWidth),
                 height,
             };
         }
@@ -48330,14 +48443,16 @@ class ChartTitle extends Component {
     static components = { Section, TextStyler };
     static props = {
         title: { type: String, optional: true },
+        placeholder: { type: String, optional: true },
         updateTitle: Function,
-        name: { type: String, optional: true },
+        name: { type: String },
         style: Object,
         defaultStyle: { type: Object, optional: true },
         updateStyle: Function,
     };
     static defaultProps = {
         title: "",
+        placeholder: "",
     };
     updateTitle(ev) {
         this.props.updateTitle(ev.target.value);
@@ -49367,6 +49482,7 @@ class ScorecardChartDesignPanel extends Component {
         SidePanelCollapsible,
         Section,
         Checkbox,
+        ChartTitle,
     };
     static props = {
         figureId: String,
@@ -49391,9 +49507,6 @@ class ScorecardChartDesignPanel extends Component {
     translate(term) {
         return _t(term);
     }
-    updateBaselineDescr(ev) {
-        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
-    }
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
@@ -49407,6 +49520,38 @@ class ScorecardChartDesignPanel extends Component {
                 break;
         }
     }
+    get keyStyle() {
+        return {
+            align: "center",
+            fontSize: DEFAULT_SCORECARD_KEY_VALUE_FONT_SIZE,
+            ...this.props.definition.keyDescr,
+        };
+    }
+    get baselineStyle() {
+        return {
+            align: "center",
+            fontSize: DEFAULT_SCORECARD_BASELINE_FONT_SIZE,
+            ...this.props.definition.baselineDescr,
+        };
+    }
+    setKeyText(text) {
+        this.props.updateChart(this.props.figureId, {
+            keyDescr: { ...this.props.definition.keyDescr, text },
+        });
+    }
+    updateKeyStyle(style) {
+        const keyDescr = { ...this.keyStyle, ...style };
+        this.props.updateChart(this.props.figureId, { keyDescr });
+    }
+    setBaselineText(text) {
+        this.props.updateChart(this.props.figureId, {
+            baselineDescr: { ...this.props.definition.baselineDescr, text },
+        });
+    }
+    updateBaselineStyle(style) {
+        const baselineDescr = { ...this.baselineStyle, ...style };
+        this.props.updateChart(this.props.figureId, { baselineDescr });
+    }
 }
 
 class SunburstChartDesignPanel extends Component {
@@ -52317,6 +52462,9 @@ class PivotMeasureEditor extends Component {
         }
         return undefined;
     }
+    get isCalculatedMeasureInvalid() {
+        return this.env.model.getters.getMeasureCompiledFormula(this.props.measure).isBadExpression;
+    }
 }
 
 css /* scss */ `
@@ -52807,11 +52955,13 @@ class PivotRuntimeDefinition {
     columns;
     rows;
     sortedColumn;
+    collapsedDomains;
     constructor(definition, fields) {
         this.measures = definition.measures.map((measure) => createMeasure(fields, measure));
         this.columns = definition.columns.map((dimension) => createPivotDimension(fields, dimension));
         this.rows = definition.rows.map((dimension) => createPivotDimension(fields, dimension));
         this.sortedColumn = definition.sortedColumn;
+        this.collapsedDomains = definition.collapsedDomains;
     }
     getDimension(nameWithGranularity) {
         const dimension = this.columns.find((d) => d.nameWithGranularity === nameWithGranularity) ||
@@ -52966,24 +53116,62 @@ class SpreadsheetPivotTable {
     rowTree;
     colTree;
     isSorted = false;
-    constructor(columns, rows, measures, fieldsType) {
-        this.columns = columns.map((row) => {
+    constructor(columns, rows, measures, fieldsType, collapsedDomains = { COL: [], ROW: [] }) {
+        this.measures = measures;
+        this.fieldsType = fieldsType;
+        if (collapsedDomains.COL.length) {
+            columns = this.removeCollapsedColumns(columns, measures, collapsedDomains.COL);
+        }
+        this.columns = columns.map((cols) => {
             // offset in the pivot table
             // starts at 1 because the first column is the row title
             let offset = 1;
-            return row.map((col) => {
+            return cols.map((col) => {
                 col = { ...col, offset };
                 offset += col.width;
                 return col;
             });
         });
-        this.rows = rows;
-        this.measures = measures;
-        this.fieldsType = fieldsType;
+        this.rows = rows.filter((row) => !this.isParentCollapsed(collapsedDomains.ROW, row));
         this.maxIndent = Math.max(...this.rows.map((row) => row.indent));
         this.rowTree = lazy(() => this.buildRowsTree());
         this.colTree = lazy(() => this.buildColumnsTree());
     }
+    removeCollapsedColumns(columns, measures, collapsedDomains) {
+        const replaceCollapsedChildrenWithSubTotalColumns = (parentCol, depth) => {
+            const parentDomain = this.getDomain(parentCol);
+            const cols = columns[depth];
+            const startIndex = cols.findIndex((col) => isParentDomain(this.getDomain(col), parentDomain));
+            const endIndex = cols.findLastIndex((col) => isParentDomain(this.getDomain(col), parentDomain));
+            const isLeaf = depth === columns.length - 1;
+            const newColumns = measures.map((measure) => {
+                const fields = isLeaf ? [...parentCol.fields, "measure"] : [];
+                const values = isLeaf ? [...parentCol.values, measure] : [];
+                return { fields, values, width: 1, offset: 0, collapsedHeader: !isLeaf };
+            });
+            cols.splice(startIndex, endIndex - startIndex + 1, ...newColumns);
+        };
+        return columns.map((cols, i) => {
+            for (const col of cols) {
+                if (i >= columns.length - 2) {
+                    return cols;
+                }
+                const domain = this.getDomain(col);
+                if (!collapsedDomains.some((collapsedDomain) => deepEquals(domain, collapsedDomain))) {
+                    continue;
+                }
+                col.width = measures.length;
+                for (let depth = i + 1; depth < columns.length; depth++) {
+                    replaceCollapsedChildrenWithSubTotalColumns(col, depth);
+                }
+            }
+            return cols;
+        });
+    }
+    isParentCollapsed(collapsedDomains, dim) {
+        const domain = this.getDomain(dim);
+        return collapsedDomains.some((collapsedDomain) => isParentDomain(domain, collapsedDomain));
+    }
     /**
      * Get the number of columns leafs (i.e. the number of the last row of columns)
      */
@@ -53039,19 +53227,19 @@ class SpreadsheetPivotTable {
         }
         else if (row <= colHeadersHeight - 1) {
             const domain = this.getColHeaderDomain(col, row);
-            return domain ? { type: "HEADER", domain } : EMPTY_PIVOT_CELL;
+            return domain ? { type: "HEADER", domain, dimension: "COL" } : EMPTY_PIVOT_CELL;
         }
         else if (col === 0) {
             const rowIndex = row - colHeadersHeight;
-            const domain = this.getRowDomain(rowIndex);
-            return { type: "HEADER", domain };
+            const domain = this.getDomain(this.rows[rowIndex]);
+            return { type: "HEADER", domain, dimension: "ROW" };
         }
         else {
             const rowIndex = row - colHeadersHeight;
             if (!includeTotal && this.isTotalRow(rowIndex)) {
                 return EMPTY_PIVOT_CELL;
             }
-            const domain = [...this.getRowDomain(rowIndex), ...this.getColDomain(col)];
+            const domain = [...this.getDomain(this.rows[rowIndex]), ...this.getColDomain(col)];
             const measure = this.getColMeasure(col);
             return { type: "VALUE", domain, measure };
         }
@@ -53060,31 +53248,31 @@ class SpreadsheetPivotTable {
         if (col === 0) {
             return undefined;
         }
-        const domain = [];
         const pivotCol = this.columns[row].find((pivotCol) => pivotCol.offset === col);
-        if (!pivotCol) {
+        if (!pivotCol || pivotCol.collapsedHeader) {
             return undefined;
         }
-        for (let i = 0; i < pivotCol.fields.length; i++) {
-            const fieldWithGranularity = pivotCol.fields[i];
+        return this.getDomain(pivotCol);
+    }
+    getDomain(dim) {
+        return dim.fields.map((fieldWithGranularity, i) => {
             if (fieldWithGranularity === "measure") {
-                domain.push({
+                return {
                     type: "char",
                     field: fieldWithGranularity,
-                    value: toNormalizedPivotValue({ displayName: "measure", type: "char" }, pivotCol.values[i]),
-                });
+                    value: toNormalizedPivotValue({ displayName: "measure", type: "char" }, dim.values[i]),
+                };
             }
             else {
                 const { fieldName, granularity } = parseDimension(fieldWithGranularity);
                 const type = this.fieldsType[fieldName] || "char";
-                domain.push({
+                return {
                     type,
                     field: fieldWithGranularity,
-                    value: toNormalizedPivotValue({ displayName: fieldName, type, granularity }, pivotCol.values[i]),
-                });
+                    value: toNormalizedPivotValue({ displayName: fieldName, type, granularity }, dim.values[i]),
+                };
             }
-        }
-        return domain;
+        });
     }
     getColDomain(col) {
         const domain = this.getColHeaderDomain(col, this.columns.length - 1);
@@ -53098,20 +53286,6 @@ class SpreadsheetPivotTable {
         }
         return measure.toString();
     }
-    getRowDomain(row) {
-        const domain = [];
-        for (let i = 0; i < this.rows[row].fields.length; i++) {
-            const fieldWithGranularity = this.rows[row].fields[i];
-            const { fieldName, granularity } = parseDimension(fieldWithGranularity);
-            const type = this.fieldsType[fieldName] || "char";
-            domain.push({
-                type,
-                field: fieldWithGranularity,
-                value: toNormalizedPivotValue({ displayName: fieldName, type, granularity }, this.rows[row].values[i]),
-            });
-        }
-        return domain;
-    }
     buildRowsTree() {
         const tree = [];
         let depth = 0;
@@ -53216,7 +53390,7 @@ const EMPTY_PIVOT_CELL = { type: "EMPTY" };
 /**
  * This function converts a list of data entry into a spreadsheet pivot table.
  */
-function dataEntriesToSpreadsheetPivotTable(dataEntries, definition) {
+function dataEntriesToSpreadsheetPivotTable(dataEntries, definition, mode) {
     const measureIds = definition.measures.filter((measure) => !measure.isHidden).map((m) => m.id);
     const columnsTree = dataEntriesToColumnsTree(dataEntries, definition.columns, 0);
     computeWidthOfColumnsNodes(columnsTree, measureIds.length);
@@ -53235,7 +53409,8 @@ function dataEntriesToSpreadsheetPivotTable(dataEntries, definition) {
     for (const row of definition.rows) {
         fieldsType[row.fieldName] = row.type;
     }
-    return new SpreadsheetPivotTable(cols, rows, measureIds, fieldsType);
+    const collapsedDomains = mode === "collapsed" ? definition.collapsedDomains : undefined;
+    return new SpreadsheetPivotTable(cols, rows, measureIds, fieldsType, collapsedDomains);
 }
 // -----------------------------------------------------------------------------
 // ROWS
@@ -53608,7 +53783,8 @@ class SpreadsheetPivot {
      * This object contains the pivot table structure. It is created from the
      * data entries and the pivot definition.
      */
-    table;
+    collapsedTable;
+    expandedTable;
     /**
      * This error is set when the range is invalid. It is used to show an error
      * message to the user.
@@ -53641,7 +53817,8 @@ class SpreadsheetPivot {
             this.dataEntries = this.loadData();
         }
         if (type >= ReloadType.TABLE) {
-            this.table = undefined;
+            this.collapsedTable = undefined;
+            this.expandedTable = undefined;
         }
     }
     onDefinitionChange(nextDefinition) {
@@ -53801,14 +53978,23 @@ class SpreadsheetPivot {
         }
         return values;
     }
-    getTableStructure() {
+    getCollapsedTableStructure() {
         if (!this.isValid()) {
             throw new Error("Pivot is not valid !");
         }
-        if (!this.table) {
-            this.table = dataEntriesToSpreadsheetPivotTable(this.dataEntries, this.definition);
+        if (!this.collapsedTable) {
+            this.collapsedTable = dataEntriesToSpreadsheetPivotTable(this.dataEntries, this.definition, "collapsed");
+        }
+        return this.collapsedTable;
+    }
+    getExpandedTableStructure() {
+        if (!this.isValid()) {
+            throw new Error("Pivot is not valid !");
+        }
+        if (!this.expandedTable) {
+            this.expandedTable = dataEntriesToSpreadsheetPivotTable(this.dataEntries, this.definition, "expanded");
         }
-        return this.table;
+        return this.expandedTable;
     }
     getFields() {
         return this.metaData.fields;
@@ -54166,6 +54352,13 @@ class PivotSidePanelStore extends SpreadsheetStore {
             })),
             sortedColumn: this.shouldKeepSortedColumn(definition) ? definition.sortedColumn : undefined,
         };
+        if (cleanedDefinition.collapsedDomains) {
+            const { COL, ROW } = cleanedDefinition.collapsedDomains;
+            cleanedDefinition.collapsedDomains = {
+                COL: COL.filter((domain) => this.areDomainFieldsValid(domain, cleanedDefinition.columns)),
+                ROW: ROW.filter((domain) => this.areDomainFieldsValid(domain, cleanedDefinition.rows)),
+            };
+        }
         if (!this.draft && deepEquals(coreDefinition, cleanedDefinition)) {
             return;
         }
@@ -54255,6 +54448,15 @@ class PivotSidePanelStore extends SpreadsheetStore {
         return (newDefinition.measures.find((measure) => measure.id === sortedColumn.measure) &&
             deepEquals(oldDefinition.columns, newDefinition.columns));
     }
+    areDomainFieldsValid(domain, dims) {
+        const fieldsNameWithGranularity = dims.map(({ fieldName, granularity }) => fieldName + (granularity ? `:${granularity}` : ""));
+        for (let i = 0; i < domain.length; i++) {
+            if (domain[i].field !== fieldsNameWithGranularity[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
 }
 
 class PivotSpreadsheetSidePanel extends Component {
@@ -55522,6 +55724,7 @@ class Grid extends Component {
     composerFocusStore;
     DOMFocusableElementStore;
     paintFormatStore;
+    clientFocusStore;
     dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
     onMouseWheel;
     hoveredCell;
@@ -55539,6 +55742,7 @@ class Grid extends Component {
         this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
         this.sidePanel = useStore(SidePanelStore);
         this.paintFormatStore = useStore(PaintFormatStore);
+        this.clientFocusStore = useStore(ClientFocusStore);
         useStore(ArrayFormulaHighlight);
         useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
         useExternalListener(document.body, "cut", this.copy.bind(this, true));
@@ -55821,6 +56025,9 @@ class Grid extends Component {
     isCellHovered(col, row) {
         return this.hoveredCell.col === col && this.hoveredCell.row === row;
     }
+    get focusedClients() {
+        return this.clientFocusStore.focusedClients;
+    }
     getGridRect() {
         return {
             ...getRefBoundingRect(this.gridRef),
@@ -56139,6 +56346,51 @@ class Grid extends Component {
 const supportedPivotPositionalFormulaRegistry = new Registry();
 supportedPivotPositionalFormulaRegistry.add("SPREADSHEET", false);
 
+class FullScreenChart extends Component {
+    static template = "o-spreadsheet-FullScreenChart";
+    static props = {};
+    static components = { ChartDashboardMenu };
+    fullScreenChartStore;
+    ref = useRef("fullScreenChart");
+    spreadsheetRect = useSpreadsheetRect();
+    figureRegistry = figureRegistry;
+    setup() {
+        this.fullScreenChartStore = useStore(FullScreenChartStore);
+        const animationStore = useStore(ChartAnimationStore);
+        let lastFigureId = undefined;
+        onWillUpdateProps(() => {
+            if (lastFigureId !== this.figureUI?.id) {
+                animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+            }
+            lastFigureId = this.figureUI?.id;
+        });
+        useEffect((el) => el?.focus(), () => [this.ref.el]);
+    }
+    get figureUI() {
+        return this.fullScreenChartStore.fullScreenFigure;
+    }
+    exitFullScreen() {
+        if (this.figureUI) {
+            this.fullScreenChartStore.toggleFullScreenChart(this.figureUI.id);
+        }
+    }
+    onKeyDown(ev) {
+        if (ev.key === "Escape") {
+            this.exitFullScreen();
+        }
+    }
+    get chartComponent() {
+        if (!this.figureUI)
+            return undefined;
+        const type = this.env.model.getters.getChartType(this.figureUI.id);
+        const component = chartComponentRegistry.get(type);
+        if (!component) {
+            throw new Error(`Component is not defined for type ${type}`);
+        }
+        return component;
+    }
+}
+
 css /* scss */ `
   .o_pivot_html_renderer {
     width: 100%;
@@ -56193,7 +56445,7 @@ class PivotHTMLRenderer extends Component {
         showMissingValuesOnly: false,
     });
     setup() {
-        const table = this.pivot.getTableStructure();
+        const table = this.pivot.getExpandedTableStructure();
         const formulaId = this.env.model.getters.getPivotFormulaId(this.props.pivotId);
         this.data = {
             columns: this._buildColHeaders(formulaId, table),
@@ -56237,7 +56489,7 @@ class PivotHTMLRenderer extends Component {
      * The parent of "January" is "Australia"
      */
     addRecursiveRow(index) {
-        const rows = this.pivot.getTableStructure().rows;
+        const rows = this.pivot.getExpandedTableStructure().rows;
         const row = [...rows[index].values];
         if (row.length <= 1) {
             return [index];
@@ -63646,10 +63898,9 @@ class Evaluator {
         return this.evaluatedCells.keysForSheet(sheetId);
     }
     getArrayFormulaSpreadingOn(position) {
-        const hasArrayFormulaResult = this.getEvaluatedCell(position).type !== CellValueType.empty &&
-            !this.getters.getCell(position)?.isFormula;
-        if (!hasArrayFormulaResult) {
-            return this.spreadingRelations.isArrayFormula(position) ? position : undefined;
+        const isEmpty = this.getEvaluatedCell(position).type === CellValueType.empty;
+        if (isEmpty) {
+            return undefined;
         }
         const arrayFormulas = this.spreadingRelations.searchFormulaPositionsSpreadingOn(position.sheetId, positionToZone(position));
         return Array.from(arrayFormulas).find((position) => !this.blockedArrayFormulas.has(position));
@@ -65051,6 +65302,323 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
     }
 }
 
+const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
+css /* scss */ `
+  .o-dv-checkbox {
+    margin: ${MARGIN}px;
+    /* required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
+    position: absolute;
+  }
+`;
+class DataValidationCheckbox extends Component {
+    static template = "o-spreadsheet-DataValidationCheckbox";
+    static components = {
+        Checkbox,
+    };
+    static props = {
+        cellPosition: Object,
+    };
+    onCheckboxChange(value) {
+        const { sheetId, col, row } = this.props.cellPosition;
+        const cellContent = value ? "TRUE" : "FALSE";
+        this.env.model.dispatch("UPDATE_CELL", { sheetId, col, row, content: cellContent });
+    }
+    get checkBoxValue() {
+        return !!this.env.model.getters.getEvaluatedCell(this.props.cellPosition).value;
+    }
+    get isDisabled() {
+        const cell = this.env.model.getters.getCell(this.props.cellPosition);
+        return this.env.model.getters.isReadonly() || !!cell?.isFormula;
+    }
+}
+
+const ICON_WIDTH = 13;
+css /* scss */ `
+  .o-dv-list-icon {
+    color: ${TEXT_BODY_MUTED};
+    border-radius: 1px;
+    height: ${GRID_ICON_EDGE_LENGTH}px;
+    width: ${GRID_ICON_EDGE_LENGTH}px;
+
+    &:hover {
+      color: #ffffff;
+      background-color: ${TEXT_BODY_MUTED};
+    }
+
+    svg {
+      width: ${ICON_WIDTH}px;
+      height: ${ICON_WIDTH}px;
+    }
+  }
+`;
+class DataValidationListIcon extends Component {
+    static template = "o-spreadsheet-DataValidationListIcon";
+    static props = {
+        cellPosition: Object,
+    };
+    onClick() {
+        const { col, row } = this.props.cellPosition;
+        this.env.model.selection.selectCell(col, row);
+        this.env.startCellEdition();
+    }
+}
+
+css /* scss */ `
+  .o-filter-icon {
+    color: ${FILTERS_COLOR};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${GRID_ICON_EDGE_LENGTH}px;
+    height: ${GRID_ICON_EDGE_LENGTH}px;
+
+    &:hover {
+      background: ${FILTERS_COLOR};
+      color: #fff;
+    }
+
+    &.o-high-contrast {
+      color: #defade;
+    }
+    &.o-high-contrast:hover {
+      color: ${FILTERS_COLOR};
+      background: #fff;
+    }
+  }
+  .o-filter-icon:hover {
+    background: ${FILTERS_COLOR};
+    color: #fff;
+  }
+`;
+class FilterIcon extends Component {
+    static template = "o-spreadsheet-FilterIcon";
+    static props = {
+        cellPosition: Object,
+    };
+    cellPopovers;
+    setup() {
+        this.cellPopovers = useStore(CellPopoverStore);
+    }
+    onClick() {
+        const position = this.props.cellPosition;
+        const activePopover = this.cellPopovers.persistentCellPopover;
+        const { col, row } = position;
+        if (activePopover.isOpen &&
+            activePopover.col === col &&
+            activePopover.row === row &&
+            activePopover.type === "FilterMenu") {
+            this.cellPopovers.close();
+            return;
+        }
+        this.cellPopovers.open({ col, row }, "FilterMenu");
+    }
+    get isFilterActive() {
+        return this.env.model.getters.isFilterActive(this.props.cellPosition);
+    }
+    get iconClass() {
+        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
+        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
+        return luminance < 0.45 ? "o-high-contrast" : "";
+    }
+}
+
+css /* scss */ `
+  .o-spreadsheet {
+    .o-pivot-collapse-icon {
+      cursor: pointer;
+      width: 11px;
+      height: 11px;
+      border: 1px solid #777;
+      background-color: #eee;
+      margin: 3px 0 3px 6px;
+
+      .o-icon {
+        width: 5px;
+        height: 5px;
+      }
+    }
+  }
+`;
+class PivotCollapseIcon extends Component {
+    static template = "o-spreadsheet-PivotCollapseIcon";
+    static props = {
+        cellPosition: Object,
+    };
+    onClick() {
+        const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
+        const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
+        if (!pivotId || pivotCell.type !== "HEADER") {
+            return;
+        }
+        const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
+        const collapsedDomains = definition.collapsedDomains?.[pivotCell.dimension]
+            ? [...definition.collapsedDomains[pivotCell.dimension]]
+            : [];
+        const index = collapsedDomains.findIndex((domain) => deepEquals(domain, pivotCell.domain));
+        if (index !== -1) {
+            collapsedDomains.splice(index, 1);
+        }
+        else {
+            collapsedDomains.push(pivotCell.domain);
+        }
+        const newDomains = definition.collapsedDomains
+            ? { ...definition.collapsedDomains }
+            : { COL: [], ROW: [] };
+        newDomains[pivotCell.dimension] = collapsedDomains;
+        this.env.model.dispatch("UPDATE_PIVOT", {
+            pivotId,
+            pivot: { ...definition, collapsedDomains: newDomains },
+        });
+    }
+    get isCollapsed() {
+        const pivotCell = this.env.model.getters.getPivotCellFromPosition(this.props.cellPosition);
+        const pivotId = this.env.model.getters.getPivotIdFromPosition(this.props.cellPosition);
+        if (!pivotId || pivotCell.type !== "HEADER") {
+            return false;
+        }
+        const definition = this.env.model.getters.getPivotCoreDefinition(pivotId);
+        const domains = definition.collapsedDomains?.[pivotCell.dimension] ?? [];
+        return domains?.some((domain) => deepEquals(domain, pivotCell.domain));
+    }
+}
+
+/**
+ * Registry to draw icons on cells
+ */
+const iconsOnCellRegistry = new Registry();
+iconsOnCellRegistry.add("data_validation_checkbox", (getters, position) => {
+    const hasIcon = getters.isCellValidCheckbox(position);
+    if (hasIcon) {
+        return {
+            svg: undefined,
+            priority: 2,
+            horizontalAlign: "center",
+            size: GRID_ICON_EDGE_LENGTH,
+            margin: GRID_ICON_MARGIN,
+            component: DataValidationCheckbox,
+            position,
+        };
+    }
+    return undefined;
+});
+iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
+    const hasIcon = !getters.isReadonly() && getters.cellHasListDataValidationIcon(position);
+    if (hasIcon) {
+        return {
+            svg: undefined,
+            priority: 2,
+            horizontalAlign: "right",
+            size: GRID_ICON_EDGE_LENGTH,
+            margin: GRID_ICON_MARGIN,
+            component: DataValidationListIcon,
+            position,
+        };
+    }
+    return undefined;
+});
+iconsOnCellRegistry.add("filter_icon", (getters, position) => {
+    const hasIcon = getters.isFilterHeader(position);
+    if (hasIcon) {
+        return {
+            svg: undefined,
+            priority: 3,
+            horizontalAlign: "right",
+            size: GRID_ICON_EDGE_LENGTH,
+            margin: GRID_ICON_MARGIN,
+            component: FilterIcon,
+            position,
+        };
+    }
+    return undefined;
+});
+iconsOnCellRegistry.add("conditional_formatting", (getters, position) => {
+    const icon = getters.getConditionalIcon(position);
+    if (icon) {
+        const style = getters.getCellStyle(position);
+        return {
+            svg: ICONS[icon].svg,
+            priority: 1,
+            horizontalAlign: "left",
+            size: computeTextFontSizeInPixels(style),
+            margin: MIN_CF_ICON_MARGIN,
+            position,
+        };
+    }
+    return undefined;
+});
+iconsOnCellRegistry.add("pivot_collapse", (getters, position) => {
+    if (!getters.isSpillPivotFormula(position)) {
+        return undefined;
+    }
+    const pivotCell = getters.getPivotCellFromPosition(position);
+    const pivotId = getters.getPivotIdFromPosition(position);
+    if (pivotCell.type === "HEADER" && pivotId && pivotCell.domain.length) {
+        const definition = getters.getPivotCoreDefinition(pivotId);
+        const isDashboard = getters.isDashboard();
+        const fields = pivotCell.dimension === "COL" ? definition.columns : definition.rows;
+        const component = !isDashboard && pivotCell.domain.length !== fields.length ? PivotCollapseIcon : undefined;
+        return {
+            priority: 4,
+            horizontalAlign: "left",
+            size: !!component || (!isDashboard && pivotCell.dimension === "ROW" && definition.rows.length > 1)
+                ? GRID_ICON_EDGE_LENGTH
+                : 0,
+            margin: pivotCell.dimension === "ROW" ? (pivotCell.domain.length - 1) * PIVOT_INDENT : 0,
+            component,
+            position,
+        };
+    }
+    return undefined;
+});
+
+class CellIconPlugin extends CoreViewPlugin {
+    static getters = ["doesCellHaveGridIcon", "getCellIcons"];
+    cellIconsCache = {};
+    handle(cmd) {
+        if (cmd.type !== "SET_VIEWPORT_OFFSET") {
+            this.cellIconsCache = {};
+        }
+    }
+    getCellIcons(position) {
+        if (!this.cellIconsCache[position.sheetId]) {
+            this.cellIconsCache[position.sheetId] = {};
+        }
+        if (!this.cellIconsCache[position.sheetId][position.col]) {
+            this.cellIconsCache[position.sheetId][position.col] = {};
+        }
+        if (!this.cellIconsCache[position.sheetId][position.col][position.row]) {
+            this.cellIconsCache[position.sheetId][position.col][position.row] =
+                this.computeCellIcons(position);
+        }
+        return this.cellIconsCache[position.sheetId][position.col][position.row];
+    }
+    computeCellIcons(position) {
+        const icons = { left: undefined, right: undefined, center: undefined };
+        const callbacks = iconsOnCellRegistry.getAll();
+        for (const callback of callbacks) {
+            const icon = callback(this.getters, position);
+            if (icon &&
+                (!icons[icon.horizontalAlign] || icon.priority > icons[icon.horizontalAlign].priority)) {
+                icons[icon.horizontalAlign] = icon;
+            }
+        }
+        if (icons.center && (icons.left || icons.right)) {
+            const sideIconsPriority = Math.max(icons.left?.priority || 0, icons.right?.priority || 0);
+            if (icons.center.priority < sideIconsPriority) {
+                icons.center = undefined;
+            }
+            else {
+                icons.left = undefined;
+                icons.right = undefined;
+            }
+        }
+        return Object.values(icons).filter(isDefined);
+    }
+    doesCellHaveGridIcon(position) {
+        return Boolean(this.getCellIcons(position).length);
+    }
+}
+
 class DynamicTablesPlugin extends CoreViewPlugin {
     static getters = [
         "canCreateDynamicTableOnZones",
@@ -65490,7 +66058,7 @@ function withPivotPresentationLayer (PivotClass) {
         }
         getValuesToAggregate(measure, domain) {
             const { rowDomain, colDomain } = domainToColRowDomain(this, domain);
-            const table = super.getTableStructure();
+            const table = super.getExpandedTableStructure();
             const values = [];
             if (colDomain.length === 0 &&
                 rowDomain.length < this.definition.rows.length &&
@@ -65910,7 +66478,7 @@ function withPivotPresentationLayer (PivotClass) {
             return this.strictMeasureValueToNumber(comparedValue);
         }
         getPivotValueCells(measureId) {
-            return this.getTableStructure()
+            return this.getCollapsedTableStructure()
                 .getPivotCells()
                 .map((col) => col.filter((cell) => cell.type === "VALUE" && cell.measure === measureId))
                 .filter((col) => col.length > 0);
@@ -65934,8 +66502,13 @@ function withPivotPresentationLayer (PivotClass) {
             }
             throw new Error(`Value ${result.value} is not a number`);
         }
-        getTableStructure() {
-            const table = super.getTableStructure();
+        getCollapsedTableStructure() {
+            const table = super.getCollapsedTableStructure();
+            this.sortTableStructure(table);
+            return table;
+        }
+        getExpandedTableStructure() {
+            const table = super.getExpandedTableStructure();
             this.sortTableStructure(table);
             return table;
         }
@@ -66125,7 +66698,7 @@ class PivotUIPlugin extends CoreViewPlugin {
             const includeColumnHeaders = toScalar(args[3]);
             const shouldIncludeColumnHeaders = includeColumnHeaders === undefined ? true : toBoolean(includeColumnHeaders);
             const pivotCells = pivot
-                .getTableStructure()
+                .getCollapsedTableStructure()
                 .getPivotCells(shouldIncludeTotal, shouldIncludeColumnHeaders);
             const pivotCol = position.col - mainPosition.col;
             const pivotRow = position.row - mainPosition.row;
@@ -66142,9 +66715,11 @@ class PivotUIPlugin extends CoreViewPlugin {
             }
             else if (functionName === "PIVOT.HEADER") {
                 const domain = pivot.parseArgsToPivotDomain(args.slice(1).map((value) => ({ value })));
+                const colRowDomain = domainToColRowDomain(pivot, domain);
                 return {
                     type: "HEADER",
                     domain,
+                    dimension: colRowDomain.colDomain.length ? "COL" : "ROW",
                 };
             }
             const [measure, ...domainArgs] = args.slice(1);
@@ -68144,8 +68719,11 @@ class Session extends EventBus {
             version: MESSAGE_VERSION,
         });
     }
-    getClient() {
-        const client = this.clients[this.clientId];
+    getCurrentClient() {
+        return this.getClient(this.clientId);
+    }
+    getClient(clientId) {
+        const client = this.clients[clientId];
         if (!client) {
             throw new ClientDisconnectedError("The client left the session");
         }
@@ -68179,7 +68757,7 @@ class Session extends EventBus {
             return;
         }
         const type = currentPosition ? "CLIENT_MOVED" : "CLIENT_JOINED";
-        const client = this.getClient();
+        const client = this.getCurrentClient();
         this.clients[this.clientId] = { ...client, position };
         this.transportService.sendMessage({
             type,
@@ -68390,6 +68968,7 @@ class CollaborativePlugin extends UIPlugin {
     static getters = [
         "getClientsToDisplay",
         "getClient",
+        "getCurrentClient",
         "getConnectedClients",
         "isFullySynchronized",
     ];
@@ -68405,11 +68984,16 @@ class CollaborativePlugin extends UIPlugin {
         return (position.row < this.getters.getNumberRows(position.sheetId) &&
             position.col < this.getters.getNumberCols(position.sheetId));
     }
-    getClient() {
-        return this.session.getClient();
+    getClient(clientId) {
+        return this.session.getClient(clientId);
+    }
+    getCurrentClient() {
+        return this.session.getCurrentClient();
     }
     getConnectedClients() {
-        return this.session.getConnectedClients();
+        return [...this.session.getConnectedClients()].map((client) => {
+            return { ...client, color: this.colors[client.id] };
+        });
     }
     isFullySynchronized() {
         return this.session.isFullySynchronized();
@@ -68420,7 +69004,7 @@ class CollaborativePlugin extends UIPlugin {
      */
     getClientsToDisplay() {
         try {
-            this.getters.getClient();
+            this.getters.getCurrentClient();
         }
         catch (e) {
             if (e instanceof ClientDisconnectedError) {
@@ -68433,16 +69017,14 @@ class CollaborativePlugin extends UIPlugin {
         const sheetId = this.getters.getActiveSheetId();
         const clients = [];
         for (const client of this.getters.getConnectedClients()) {
-            if (client.id !== this.getters.getClient().id &&
+            if (client.id !== this.getters.getCurrentClient().id &&
                 client.position &&
                 client.position.sheetId === sheetId &&
                 this.isPositionValid(client.position)) {
-                const position = client.position;
                 if (!this.colors[client.id]) {
                     this.colors[client.id] = this.availableColors.next();
                 }
-                const color = this.colors[client.id];
-                clients.push({ ...client, position, color });
+                clients.push({ ...client, color: this.colors[client.id], position: client.position });
             }
         }
         return clients;
@@ -68968,7 +69550,7 @@ class InsertPivotPlugin extends UIPlugin {
             sheetIdTo: sheetId,
         });
         const pivot = this.getters.getPivot(pivotId);
-        this.insertPivotWithTable(sheetId, 0, 0, pivotId, pivot.getTableStructure().export(), "dynamic");
+        this.insertPivotWithTable(sheetId, 0, 0, pivotId, pivot.getCollapsedTableStructure().export(), "dynamic");
     }
     duplicatePivotInNewSheet(pivotId, newPivotId, newSheetId) {
         this.dispatch("DUPLICATE_PIVOT", {
@@ -68991,7 +69573,7 @@ class InsertPivotPlugin extends UIPlugin {
         if (result.isSuccessful) {
             this.dispatch("ACTIVATE_SHEET", { sheetIdFrom: activeSheetId, sheetIdTo: newSheetId });
             const pivot = this.getters.getPivot(pivotId);
-            this.insertPivotWithTable(newSheetId, 0, 0, newPivotId, pivot.getTableStructure().export(), "dynamic");
+            this.insertPivotWithTable(newSheetId, 0, 0, newPivotId, pivot.getCollapsedTableStructure().export(), "dynamic");
         }
     }
     getPivotDuplicateSheetName(pivotName) {
@@ -69283,9 +69865,7 @@ class UIOptionsPlugin extends UIPlugin {
 
 class SheetUIPlugin extends UIPlugin {
     static getters = [
-        "doesCellHaveGridIcon",
         "getCellWidth",
-        "getCellIconSvg",
         "getTextWidth",
         "getCellText",
         "getCellMultiLineText",
@@ -69340,12 +69920,8 @@ class SheetUIPlugin extends UIPlugin {
             const multiLineText = splitTextToWidth(this.ctx, content, style, undefined);
             contentWidth += Math.max(...multiLineText.map((line) => computeTextWidth(this.ctx, line, style)));
         }
-        const icon = this.getters.getCellIconSvg(position);
-        if (icon) {
-            contentWidth += computeIconWidth(style);
-        }
-        if (this.getters.doesCellHaveGridIcon(position)) {
-            contentWidth += ICON_EDGE_LENGTH + GRID_ICON_MARGIN;
+        for (const icon of this.getters.getCellIcons(position)) {
+            contentWidth += icon.margin + icon.size;
         }
         if (contentWidth === 0) {
             return 0;
@@ -69357,16 +69933,6 @@ class SheetUIPlugin extends UIPlugin {
         }
         return contentWidth;
     }
-    getCellIconSvg(position) {
-        const callbacks = iconsOnCellRegistry.getAll();
-        for (const callback of callbacks) {
-            const imageSrc = callback(this.getters, position);
-            if (imageSrc) {
-                return imageSrc;
-            }
-        }
-        return undefined;
-    }
     getTextWidth(text, style) {
         return computeTextWidth(this.ctx, text, style);
     }
@@ -69406,11 +69972,6 @@ class SheetUIPlugin extends UIPlugin {
         });
         return splitTextToWidth(this.ctx, text, style, args.wrapText ? args.maxWidth : undefined);
     }
-    doesCellHaveGridIcon(position) {
-        const isFilterHeader = this.getters.isFilterHeader(position);
-        const hasListIcon = !this.getters.isReadonly() && this.getters.cellHasListDataValidationIcon(position);
-        return isFilterHeader || hasListIcon;
-    }
     /**
      * Expands the given zone until bordered by empty cells or reached the sheet boundaries.
      */
@@ -73302,7 +73863,8 @@ const coreViewsPluginRegistry = new Registry()
     .add("data_validation_ui", EvaluationDataValidationPlugin)
     .add("dynamic_tables", DynamicTablesPlugin)
     .add("custom_colors", CustomColorsPlugin)
-    .add("pivot_ui", PivotUIPlugin);
+    .add("pivot_ui", PivotUIPlugin)
+    .add("cell_icon", CellIconPlugin);
 
 autoCompleteProviders.add("dataValidation", {
     displayAllOnInitialContent: true,
@@ -74452,6 +75014,21 @@ class TopBarComponentRegistry extends Registry {
 }
 const topbarComponentRegistry = new TopBarComponentRegistry();
 
+class LocalTransportService {
+    listeners = [];
+    async sendMessage(message) {
+        for (const { callback } of this.listeners) {
+            callback(message);
+        }
+    }
+    onNewMessage(id, callback) {
+        this.listeners.push({ id, callback });
+    }
+    leave(id) {
+        this.listeners = this.listeners.filter((listener) => listener.id !== id);
+    }
+}
+
 class ImageProvider {
     fileStore;
     constructor(fileStore) {
@@ -77289,6 +77866,7 @@ class Spreadsheet extends Component {
         SidePanel,
         SpreadsheetDashboard,
         HeaderGroupContainer,
+        FullScreenChart,
     };
     sidePanel;
     spreadsheetRef = useRef("spreadsheet");
@@ -77447,21 +78025,6 @@ class Spreadsheet extends Component {
     }
 }
 
-class LocalTransportService {
-    listeners = [];
-    async sendMessage(message) {
-        for (const { callback } of this.listeners) {
-            callback(message);
-        }
-    }
-    onNewMessage(id, callback) {
-        this.listeners.push({ id, callback });
-    }
-    leave(id) {
-        this.listeners = this.listeners.filter((listener) => listener.id !== id);
-    }
-}
-
 function inverseCommand(cmd) {
     return inverseCommandRegistry.get(cmd.type)(cmd);
 }
@@ -81885,6 +82448,7 @@ const components = {
     RadioSelection,
     GeoChartRegionSelectSection,
     ChartDashboardMenu,
+    FullScreenChart,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -81911,6 +82475,7 @@ const stores = {
     SidePanelStore,
     PivotSidePanelStore,
     PivotMeasureDisplayPanelStore,
+    ClientFocusStore,
 };
 function addFunction(functionName, functionDescription) {
     functionRegistry.add(functionName, functionDescription);
@@ -81926,9 +82491,9 @@ const constants = {
 };
 const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
-export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.4.0-alpha.3";
-__info__.date = "2025-05-13T17:54:54.061Z";
-__info__.hash = "70ad365";
+__info__.version = "18.4.0-alpha.4";
+__info__.date = "2025-05-20T05:57:45.452Z";
+__info__.hash = "5c28bca";