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

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 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
  */
 
 (function (exports, owl) {
@@ -185,7 +185,7 @@
   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;
@@ -347,6 +347,8 @@
   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
@@ -396,6 +398,7 @@
       styleId: "TableStyleMedium5",
       automaticAutofill: false,
   };
+  const PIVOT_INDENT = 15;
   const DEFAULT_CURRENCY = {
       symbol: "$",
       position: "before",
@@ -1637,18 +1640,53 @@
       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.
    *
@@ -1659,33 +1697,17 @@
    * 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 };
@@ -5374,67 +5396,6 @@
       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
@@ -5452,63 +5413,55 @@
    *
    */
   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,
@@ -5537,7 +5490,16 @@
    */
   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.
@@ -6151,6 +6113,67 @@
       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++) {
@@ -6847,9 +6870,6 @@
       }
       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() : "";
@@ -8083,208 +8103,6 @@
       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);
@@ -8795,23 +8613,11 @@
   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 {
@@ -9842,6 +9648,13 @@
       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;
@@ -9920,6 +9733,7 @@ stores.inject(MyMetaStore, storeInstance);
               return proxifyStoreMutation(store, () => container.trigger("store-updated"));
           },
       });
+      owl.onWillUnmount(() => container.dispose());
       return container;
   }
   /**
@@ -10273,6 +10087,19 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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";
@@ -11926,10 +11753,12 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-ChartJsComponent";
       static props = {
           figureUI: Object,
+          isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("graphContainer");
       chart;
       currentRuntime;
+      animationStore;
       currentDevicePixelRatio = window.devicePixelRatio;
       get background() {
           return this.chartRuntime.background;
@@ -11945,6 +11774,9 @@ stores.inject(MyMetaStore, storeInstance);
           return runtime;
       }
       setup() {
+          if (this.env.model.getters.isDashboard()) {
+              this.animationStore = useStore(ChartAnimationStore);
+          }
           owl.onMounted(() => {
               const runtime = this.chartRuntime;
               this.currentRuntime = runtime;
@@ -11971,11 +11803,25 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       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) {
@@ -11988,6 +11834,20 @@ stores.inject(MyMetaStore, storeInstance);
           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;
+      }
   }
 
   /**
@@ -12113,6 +11973,7 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -12126,6 +11987,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -12203,6 +12065,7 @@ stores.inject(MyMetaStore, storeInstance);
               keyValue: keyValue
                   ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                   : undefined,
+              keyDescr: this.keyDescr,
               humanize: this.humanize,
           };
       }
@@ -12226,7 +12089,7 @@ stores.inject(MyMetaStore, storeInstance);
       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) {
@@ -12262,18 +12125,22 @@ stores.inject(MyMetaStore, storeInstance);
           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();
@@ -12328,28 +12195,41 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -12360,11 +12240,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   /* 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;
@@ -12414,7 +12290,7 @@ stores.inject(MyMetaStore, storeInstance);
                   style: style.title,
                   position: {
                       x,
-                      y: CHART_PADDING + titleHeight / 2,
+                      y: CHART_PADDING_BOTTOM + titleHeight / 2,
                   },
               };
           }
@@ -12424,42 +12300,49 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -12481,18 +12364,41 @@ stores.inject(MyMetaStore, storeInstance);
               };
           }
           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() {
@@ -12501,6 +12407,9 @@ stores.inject(MyMetaStore, storeInstance);
       get keyValue() {
           return this.runtime.keyValue;
       }
+      get keyDescr() {
+          return formatBaselineDescr(this.runtime.keyDescr, this.keyValue);
+      }
       get baseline() {
           return this.runtime.baselineDisplay;
       }
@@ -12533,7 +12442,9 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       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;
@@ -12545,27 +12456,37 @@ stores.inject(MyMetaStore, storeInstance);
               },
               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,
                   },
           };
       }
@@ -12959,14 +12880,14 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 {
@@ -14288,8 +14209,8 @@ stores.inject(MyMetaStore, storeInstance);
   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,
           },
@@ -14840,11 +14761,11 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -14912,7 +14833,7 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           },
       };
   }
@@ -15475,6 +15396,10 @@ stores.inject(MyMetaStore, storeInstance);
 
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
+      static props = {
+          figureUI: Object,
+          isFullScreen: { type: Boolean, optional: true },
+      };
       canvas = owl.useRef("chartContainer");
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
@@ -15487,9 +15412,6 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
   }
-  GaugeChartComponent.props = {
-      figureUI: Object,
-  };
 
   class ComboChart extends AbstractChart {
       dataSets;
@@ -18293,6 +18215,26 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  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.
    */
@@ -18412,7 +18354,9 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -18937,9 +18881,11 @@ stores.inject(MyMetaStore, storeInstance);
       static components = { Menu };
       static props = { figureUI: Object };
       originalChartDefinition;
+      fullScreenFigureStore;
       menuState = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
       setup() {
           super.setup();
+          this.fullScreenFigureStore = useStore(FullScreenChartStore);
           this.originalChartDefinition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
           owl.onWillUpdateProps(({ figureUI }) => {
               if (figureUI.id !== this.props.figureUI.id) {
@@ -18947,7 +18893,10 @@ stores.inject(MyMetaStore, storeInstance);
               }
           });
       }
-      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 [];
@@ -18955,8 +18904,11 @@ stores.inject(MyMetaStore, storeInstance);
           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),
               };
           });
       }
@@ -19011,6 +18963,30 @@ stores.inject(MyMetaStore, storeInstance);
           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);
+              },
+          };
+      }
   }
 
   // -----------------------------------------------------------------------------
@@ -29029,7 +29005,7 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -29049,7 +29025,7 @@ stores.inject(MyMetaStore, storeInstance);
                           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));
@@ -32976,12 +32952,13 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -32991,7 +32968,7 @@ stores.inject(MyMetaStore, storeInstance);
               })
                   .join("");
           }
-          return this._currentContent;
+          return localizeContent(content, this.getters.getLocale());
       }
       stopEdition() {
           this._stopEdition();
@@ -35670,11 +35647,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  /**
-   * Registry to draw icons on cells
-   */
-  const iconsOnCellRegistry = new Registry();
-
   css /* scss */ `
   .o-spreadsheet {
     .o-icon {
@@ -35811,13 +35783,6 @@ stores.inject(MyMetaStore, storeInstance);
           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
@@ -39925,6 +39890,22 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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 || []) {
@@ -40799,7 +40780,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -40818,7 +40799,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -42199,6 +42180,218 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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) {
@@ -43199,6 +43392,66 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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
@@ -43472,6 +43725,11 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -43483,6 +43741,7 @@ stores.inject(MyMetaStore, storeInstance);
               left: `${x - 1}px`,
               border: `1px solid ${color}`,
               "background-color": color,
+              visibility: visible ? "visible" : "hidden",
           });
       }
   }
@@ -43908,151 +44167,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-grid-cell-icon {
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-  }
-`;
-  class GridCellIcon extends owl.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 owl.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 owl.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 owl.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);
@@ -44066,14 +44180,14 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -44654,78 +44768,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 owl.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 owl.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;
@@ -44866,6 +44908,78 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class GridCellIcon extends owl.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 owl.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
@@ -45117,9 +45231,8 @@ stores.inject(MyMetaStore, storeInstance);
       };
       static components = {
           FiguresContainer,
-          DataValidationOverlay,
           GridAddRowsFooter,
-          FilterIconsOverlay,
+          GridCellIconOverlay,
       };
       static defaultProps = {
           onCellDoubleClicked: () => { },
@@ -46129,13 +46242,12 @@ stores.inject(MyMetaStore, storeInstance);
                   // 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;
@@ -46169,18 +46281,28 @@ stores.inject(MyMetaStore, storeInstance);
       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));
@@ -46357,13 +46479,11 @@ stores.inject(MyMetaStore, storeInstance);
               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++;
@@ -46377,13 +46497,11 @@ stores.inject(MyMetaStore, storeInstance);
               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--;
@@ -46419,6 +46537,12 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -46431,32 +46555,21 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -46465,11 +46578,11 @@ stores.inject(MyMetaStore, storeInstance);
           };
           /** 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,
               };
           }
@@ -48331,14 +48444,16 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -49368,6 +49483,7 @@ stores.inject(MyMetaStore, storeInstance);
           SidePanelCollapsible,
           Section,
           Checkbox,
+          ChartTitle,
       };
       static props = {
           figureId: String,
@@ -49392,9 +49508,6 @@ stores.inject(MyMetaStore, storeInstance);
       translate(term) {
           return _t(term);
       }
-      updateBaselineDescr(ev) {
-          this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
-      }
       setColor(color, colorPickerId) {
           switch (colorPickerId) {
               case "backgroundColor":
@@ -49408,6 +49521,38 @@ stores.inject(MyMetaStore, storeInstance);
                   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 owl.Component {
@@ -52318,6 +52463,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return undefined;
       }
+      get isCalculatedMeasureInvalid() {
+          return this.env.model.getters.getMeasureCompiledFormula(this.props.measure).isBadExpression;
+      }
   }
 
   css /* scss */ `
@@ -52808,11 +52956,13 @@ stores.inject(MyMetaStore, storeInstance);
       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) ||
@@ -52967,24 +53117,62 @@ stores.inject(MyMetaStore, storeInstance);
       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)
        */
@@ -53040,19 +53228,19 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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 };
           }
@@ -53061,31 +53249,31 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -53099,20 +53287,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
@@ -53217,7 +53391,7 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * 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);
@@ -53236,7 +53410,8 @@ stores.inject(MyMetaStore, storeInstance);
       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
@@ -53609,7 +53784,8 @@ stores.inject(MyMetaStore, storeInstance);
        * 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.
@@ -53642,7 +53818,8 @@ stores.inject(MyMetaStore, storeInstance);
               this.dataEntries = this.loadData();
           }
           if (type >= ReloadType.TABLE) {
-              this.table = undefined;
+              this.collapsedTable = undefined;
+              this.expandedTable = undefined;
           }
       }
       onDefinitionChange(nextDefinition) {
@@ -53802,14 +53979,23 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
@@ -54167,6 +54353,13 @@ stores.inject(MyMetaStore, storeInstance);
               })),
               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;
           }
@@ -54256,6 +54449,15 @@ stores.inject(MyMetaStore, storeInstance);
           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 owl.Component {
@@ -55523,6 +55725,7 @@ stores.inject(MyMetaStore, storeInstance);
       composerFocusStore;
       DOMFocusableElementStore;
       paintFormatStore;
+      clientFocusStore;
       dragNDropGrid = useDragAndDropBeyondTheViewport(this.env);
       onMouseWheel;
       hoveredCell;
@@ -55540,6 +55743,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
           this.sidePanel = useStore(SidePanelStore);
           this.paintFormatStore = useStore(PaintFormatStore);
+          this.clientFocusStore = useStore(ClientFocusStore);
           useStore(ArrayFormulaHighlight);
           owl.useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
           owl.useExternalListener(document.body, "cut", this.copy.bind(this, true));
@@ -55822,6 +56026,9 @@ stores.inject(MyMetaStore, storeInstance);
       isCellHovered(col, row) {
           return this.hoveredCell.col === col && this.hoveredCell.row === row;
       }
+      get focusedClients() {
+          return this.clientFocusStore.focusedClients;
+      }
       getGridRect() {
           return {
               ...getRefBoundingRect(this.gridRef),
@@ -56140,6 +56347,51 @@ stores.inject(MyMetaStore, storeInstance);
   const supportedPivotPositionalFormulaRegistry = new Registry();
   supportedPivotPositionalFormulaRegistry.add("SPREADSHEET", false);
 
+  class FullScreenChart extends owl.Component {
+      static template = "o-spreadsheet-FullScreenChart";
+      static props = {};
+      static components = { ChartDashboardMenu };
+      fullScreenChartStore;
+      ref = owl.useRef("fullScreenChart");
+      spreadsheetRect = useSpreadsheetRect();
+      figureRegistry = figureRegistry;
+      setup() {
+          this.fullScreenChartStore = useStore(FullScreenChartStore);
+          const animationStore = useStore(ChartAnimationStore);
+          let lastFigureId = undefined;
+          owl.onWillUpdateProps(() => {
+              if (lastFigureId !== this.figureUI?.id) {
+                  animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+              }
+              lastFigureId = this.figureUI?.id;
+          });
+          owl.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%;
@@ -56194,7 +56446,7 @@ stores.inject(MyMetaStore, storeInstance);
           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),
@@ -56238,7 +56490,7 @@ stores.inject(MyMetaStore, storeInstance);
        * 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];
@@ -63647,10 +63899,9 @@ stores.inject(MyMetaStore, storeInstance);
           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));
@@ -65052,6 +65303,323 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 owl.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 owl.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 owl.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 owl.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",
@@ -65491,7 +66059,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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 &&
@@ -65911,7 +66479,7 @@ stores.inject(MyMetaStore, storeInstance);
               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);
@@ -65935,8 +66503,13 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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;
           }
@@ -66126,7 +66699,7 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -66143,9 +66716,11 @@ stores.inject(MyMetaStore, storeInstance);
               }
               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);
@@ -68145,8 +68720,11 @@ stores.inject(MyMetaStore, storeInstance);
               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");
           }
@@ -68180,7 +68758,7 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -68391,6 +68969,7 @@ stores.inject(MyMetaStore, storeInstance);
       static getters = [
           "getClientsToDisplay",
           "getClient",
+          "getCurrentClient",
           "getConnectedClients",
           "isFullySynchronized",
       ];
@@ -68406,11 +68985,16 @@ stores.inject(MyMetaStore, storeInstance);
           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();
@@ -68421,7 +69005,7 @@ stores.inject(MyMetaStore, storeInstance);
        */
       getClientsToDisplay() {
           try {
-              this.getters.getClient();
+              this.getters.getCurrentClient();
           }
           catch (e) {
               if (e instanceof ClientDisconnectedError) {
@@ -68434,16 +69018,14 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -68969,7 +69551,7 @@ stores.inject(MyMetaStore, storeInstance);
               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", {
@@ -68992,7 +69574,7 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -69284,9 +69866,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   class SheetUIPlugin extends UIPlugin {
       static getters = [
-          "doesCellHaveGridIcon",
           "getCellWidth",
-          "getCellIconSvg",
           "getTextWidth",
           "getCellText",
           "getCellMultiLineText",
@@ -69341,12 +69921,8 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -69358,16 +69934,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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);
       }
@@ -69407,11 +69973,6 @@ stores.inject(MyMetaStore, storeInstance);
           });
           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.
        */
@@ -73303,7 +73864,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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,
@@ -74453,6 +75015,21 @@ stores.inject(MyMetaStore, storeInstance);
   }
   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) {
@@ -77290,6 +77867,7 @@ stores.inject(MyMetaStore, storeInstance);
           SidePanel,
           SpreadsheetDashboard,
           HeaderGroupContainer,
+          FullScreenChart,
       };
       sidePanel;
       spreadsheetRef = owl.useRef("spreadsheet");
@@ -77448,21 +78026,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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);
   }
@@ -81886,6 +82449,7 @@ stores.inject(MyMetaStore, storeInstance);
       RadioSelection,
       GeoChartRegionSelectSection,
       ChartDashboardMenu,
+      FullScreenChart,
   };
   const hooks = {
       useDragAndDropListItems,
@@ -81912,6 +82476,7 @@ stores.inject(MyMetaStore, storeInstance);
       SidePanelStore,
       PivotSidePanelStore,
       PivotMeasureDisplayPanelStore,
+      ClientFocusStore,
   };
   function addFunction(functionName, functionDescription) {
       functionRegistry.add(functionName, functionDescription);
@@ -81935,6 +82500,7 @@ stores.inject(MyMetaStore, storeInstance);
   exports.CoreViewPlugin = CoreViewPlugin;
   exports.DispatchResult = DispatchResult;
   exports.EvaluationError = EvaluationError;
+  exports.LocalTransportService = LocalTransportService;
   exports.Model = Model;
   exports.PivotRuntimeDefinition = PivotRuntimeDefinition;
   exports.Registry = Registry;
@@ -81976,9 +82542,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);