@odoo/o-spreadsheet 18.3.0-alpha.2 → 18.3.0-alpha.3

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.3.0-alpha.2
- * @date 2025-02-27T06:31:04.174Z
- * @hash 17e5bfa
+ * @version 18.3.0-alpha.3
+ * @date 2025-03-07T10:41:05.411Z
+ * @hash f59f5f6
  */
 
 (function (exports, owl) {
@@ -350,7 +350,6 @@
       ComponentsImportance[ComponentsImportance["ScrollBar"] = 15] = "ScrollBar";
       ComponentsImportance[ComponentsImportance["GridPopover"] = 19] = "GridPopover";
       ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
-      ComponentsImportance[ComponentsImportance["Dropdown"] = 21] = "Dropdown";
       ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
       ComponentsImportance[ComponentsImportance["TopBarComposer"] = 30] = "TopBarComposer";
       ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
@@ -860,7 +859,7 @@
   }
   function replaceItemAtIndex(array, newItem, index) {
       const newArray = [...array];
-      newArray.splice(index, 1, newItem);
+      newArray[index] = newItem;
       return newArray;
   }
   function trimContent(content) {
@@ -3402,6 +3401,7 @@
   (function (ClipboardMIMEType) {
       ClipboardMIMEType["PlainText"] = "text/plain";
       ClipboardMIMEType["Html"] = "text/html";
+      ClipboardMIMEType["Image"] = "image";
   })(ClipboardMIMEType || (ClipboardMIMEType = {}));
 
   function isSheetDependent(cmd) {
@@ -6104,8 +6104,9 @@
           if (zone.bottom !== zone.top && zone.left != zone.right) {
               if (zone.right) {
                   for (let j = zone.left; j <= zone.right; ++j) {
+                      const datasetOptions = j === zone.left ? dataSet : { yAxisId: dataSet.yAxisId };
                       postProcessedRanges.push({
-                          ...dataSet,
+                          ...datasetOptions,
                           dataRange: `${sheetPrefix}${zoneToXc({
                             left: j,
                             right: j,
@@ -6117,8 +6118,9 @@
               }
               else {
                   for (let j = zone.top; j <= zone.bottom; ++j) {
+                      const datasetOptions = j === zone.top ? dataSet : { yAxisId: dataSet.yAxisId };
                       postProcessedRanges.push({
-                          ...dataSet,
+                          ...datasetOptions,
                           dataRange: `${sheetPrefix}${zoneToXc({
                             left: zone.left,
                             right: zone.right,
@@ -6557,6 +6559,17 @@
       }
   }
 
+  const AllowedImageMimeTypes = [
+      "image/avif",
+      "image/bmp",
+      "image/gif",
+      "image/vnd.microsoft.icon",
+      "image/jpeg",
+      "image/png",
+      "image/tiff",
+      "image/webp",
+  ];
+
   function getClipboardDataPositions(sheetId, zones) {
       const lefts = new Set(zones.map((z) => z.left));
       const rights = new Set(zones.map((z) => z.right));
@@ -6603,21 +6616,28 @@
       const width = content[0].length, height = content.length;
       return target.map((t) => splitZoneForPaste(t, width, height)).flat();
   }
-  function parseOSClipboardContent(content) {
-      if (!content[ClipboardMIMEType.Html]) {
-          return {
-              text: content[ClipboardMIMEType.PlainText],
-          };
+  function parseOSClipboardContent(content, clipboardId) {
+      let spreadsheetContent = undefined;
+      if (content[ClipboardMIMEType.Html]) {
+          const htmlDocument = new DOMParser().parseFromString(content[ClipboardMIMEType.Html], "text/html");
+          const oSheetClipboardData = htmlDocument
+              .querySelector("div")
+              ?.getAttribute("data-osheet-clipboard");
+          spreadsheetContent = oSheetClipboardData && JSON.parse(oSheetClipboardData);
+      }
+      let imageBlob = undefined;
+      for (const type of AllowedImageMimeTypes) {
+          if (content[type]) {
+              imageBlob = content[type];
+              break;
+          }
       }
-      const htmlDocument = new DOMParser().parseFromString(content[ClipboardMIMEType.Html], "text/html");
-      const oSheetClipboardData = htmlDocument
-          .querySelector("div")
-          ?.getAttribute("data-osheet-clipboard");
-      const spreadsheetContent = oSheetClipboardData && JSON.parse(oSheetClipboardData);
-      return {
+      const osClipboardContent = {
           text: content[ClipboardMIMEType.PlainText],
           data: spreadsheetContent,
+          imageBlob,
       };
+      return osClipboardContent;
   }
 
   class ClipboardHandler {
@@ -9680,6 +9700,91 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  class FunnelChartController extends window.Chart?.BarController {
+      static id = "funnel";
+      static defaults = { ...window.Chart?.BarController.defaults, dataElementType: "funnel" };
+      /** Called at each chart render to update the elements of the chart (FunnelChartElement) with the updated data */
+      updateElements(rects, start, count, mode) {
+          super.updateElements(rects, start, count, mode);
+          for (let i = start; i < start + count; i++) {
+              const rect = rects[i];
+              // Add the width of the next element to the element's props
+              this.updateElement(rect, i, { nextElementWidth: rects[i + 1]?.width || 0 }, mode);
+          }
+      }
+  }
+  /**
+   * Similar to a bar chart element, but it's a trapezoid rather than a rectangle. The top is of width
+   * `width`, and the bottom is of width `nextElementWidth`.
+   */
+  class FunnelChartElement extends window.Chart?.BarElement {
+      static id = "funnel";
+      /** Overwrite this to draw a trapezoid rather then a rectangle */
+      draw(ctx) {
+          ctx.save();
+          const { x, y, width, height, nextElementWidth, base, options } = this.getProps([
+              "x",
+              "y",
+              "width",
+              "height",
+              "nextElementWidth",
+              "base",
+              "options",
+          ]);
+          const offset = (width - nextElementWidth) / 2;
+          const startX = Math.min(x, base);
+          const startY = y - height / 2;
+          ctx.fillStyle = options.backgroundColor;
+          ctx.beginPath();
+          ctx.moveTo(startX, startY);
+          ctx.lineTo(startX + width, startY);
+          ctx.lineTo(startX + width - offset, startY + height);
+          ctx.lineTo(startX + offset, startY + height);
+          ctx.closePath();
+          ctx.fill();
+          if (options.borderWidth) {
+              ctx.strokeStyle = options.borderColor;
+              ctx.lineWidth = options.borderWidth;
+              ctx.stroke();
+          }
+          ctx.restore();
+      }
+      /** Check if the mouse is inside the trapezoid */
+      inRange(mouseX, mouseY, useFinalPosition) {
+          const { x, y, width, height, nextElementWidth, base } = this.getProps(["x", "y", "width", "height", "nextElementWidth", "base"], useFinalPosition);
+          const startX = Math.min(x, base);
+          const startY = y - height / 2;
+          if (mouseY < startY || mouseY > startY + height) {
+              return false;
+          }
+          const offset = (width - nextElementWidth) / 2;
+          const left = startX + (offset * (mouseY - startY)) / height;
+          const right = startX + width - (offset * (mouseY - startY)) / height;
+          if (mouseX < left || mouseX > right) {
+              return false;
+          }
+          return true;
+      }
+  }
+  /**
+   * Position the tooltip inside the trapezoid.
+   * The default position for tooltips of bar elements is at the end of rectangle, which is not ideal for trapezoids.
+   */
+  const funnelTooltipPositioner = function (elements) {
+      if (!elements.length) {
+          return { x: 0, y: 0 };
+      }
+      const element = elements[0].element;
+      const { x, y, base, width, height } = element.getProps(["x", "y", "width", "height", "base"]);
+      const startX = Math.min(x, base);
+      const startY = y - height / 2;
+      return {
+          x: startX + (width * 2) / 3,
+          y: startY + height / 2,
+      };
+  };
+  window.Chart.Tooltip.positioners.funnelTooltipPositioner = funnelTooltipPositioner;
+
   const TREND_LINE_XAXIS_ID = "x1";
   /**
    * This file contains helpers that are common to different charts (mainly
@@ -10060,6 +10165,9 @@ stores.inject(MyMetaStore, storeInstance);
                       ? drawHorizontalBarChartValues(chart, options, ctx)
                       : drawLineOrBarOrRadarChartValues(chart, options, ctx);
                   break;
+              case "funnel":
+                  drawHorizontalBarChartValues(chart, options, ctx);
+                  break;
           }
           ctx.restore();
       },
@@ -10226,6 +10334,7 @@ stores.inject(MyMetaStore, storeInstance);
 
   window.Chart?.register(waterfallLinesPlugin);
   window.Chart?.register(chartShowValuesPlugin);
+  window.Chart?.register(FunnelChartController, FunnelChartElement);
   css /* scss */ `
   .o-spreadsheet {
     .o-chart-custom-tooltip {
@@ -22330,7 +22439,7 @@ stores.inject(MyMetaStore, storeInstance);
       condition: (cell) => !cell.isFormula &&
           evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
           alphaNumericValueRegExp.test(cell.content),
-      generateRule: (cell, cells) => {
+      generateRule: (cell, cells, direction) => {
           const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
           const prefix = cell.content.match(stringPrefixRegExp)[0];
           const numberPostfixLength = cell.content.length - prefix.length;
@@ -22338,7 +22447,10 @@ stores.inject(MyMetaStore, storeInstance);
               alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
               .filter((cell) => prefix === (cell.value ?? "").toString().match(stringPrefixRegExp)[0])
               .map((cell) => parseInt((cell.value ?? "").toString().match(numberPostfixRegExp)[0]));
-          const increment = calculateIncrementBasedOnGroup(group);
+          let increment = calculateIncrementBasedOnGroup(group);
+          if (["up", "left"].includes(direction) && group.length === 1) {
+              increment = -increment;
+          }
           return {
               type: "ALPHANUMERIC_INCREMENT_MODIFIER",
               prefix,
@@ -22401,10 +22513,13 @@ stores.inject(MyMetaStore, storeInstance);
       .add("increment_number", {
       condition: (cell) => !cell.isFormula &&
           evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
-      generateRule: (cell, cells) => {
+      generateRule: (cell, cells, direction) => {
           const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
               !isDateTimeFormat(evaluatedCell.format || "")).map((cell) => Number(cell.value));
-          const increment = calculateIncrementBasedOnGroup(group);
+          let increment = calculateIncrementBasedOnGroup(group);
+          if (["up", "left"].includes(direction) && group.length === 1) {
+              increment = -increment;
+          }
           const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
           return {
               type: "INCREMENT_MODIFIER",
@@ -22831,7 +22946,7 @@ stores.inject(MyMetaStore, storeInstance);
       },
       animation: false,
   };
-  function chartToImage(runtime, figure, type) {
+  function chartToImageUrl(runtime, figure, type) {
       // wrap the canvas in a div with a fixed size because chart.js would
       // fill the whole page otherwise
       const div = document.createElement("div");
@@ -22841,31 +22956,59 @@ stores.inject(MyMetaStore, storeInstance);
       div.append(canvas);
       canvas.setAttribute("width", figure.width.toString());
       canvas.setAttribute("height", figure.height.toString());
+      let imageContent;
       // we have to add the canvas to the DOM otherwise it won't be rendered
       document.body.append(div);
       if ("chartJsConfig" in runtime) {
           const config = deepCopy(runtime.chartJsConfig);
           config.plugins = [backgroundColorChartJSPlugin];
           const chart = new window.Chart(canvas, config);
-          const imgContent = chart.toBase64Image();
+          imageContent = chart.toBase64Image();
           chart.destroy();
-          div.remove();
-          return imgContent;
       }
       else if (type === "scorecard") {
           const design = getScorecardConfiguration(figure, runtime);
           drawScoreChart(design, canvas);
-          const imgContent = canvas.toDataURL();
-          div.remove();
-          return imgContent;
+          imageContent = canvas.toDataURL();
       }
       else if (type === "gauge") {
           drawGaugeChart(canvas, runtime);
-          const imgContent = canvas.toDataURL();
-          div.remove();
-          return imgContent;
+          imageContent = canvas.toDataURL();
       }
-      return undefined;
+      div.remove();
+      return imageContent;
+  }
+  async function chartToImageFile(runtime, figure, type) {
+      // wrap the canvas in a div with a fixed size because chart.js would
+      // fill the whole page otherwise
+      const div = document.createElement("div");
+      div.style.width = `${figure.width}px`;
+      div.style.height = `${figure.height}px`;
+      const canvas = document.createElement("canvas");
+      div.append(canvas);
+      canvas.setAttribute("width", figure.width.toString());
+      canvas.setAttribute("height", figure.height.toString());
+      // we have to add the canvas to the DOM otherwise it won't be rendered
+      document.body.append(div);
+      let chartBlob = null;
+      if ("chartJsConfig" in runtime) {
+          const config = deepCopy(runtime.chartJsConfig);
+          config.plugins = [backgroundColorChartJSPlugin];
+          const chart = new window.Chart(canvas, config);
+          chartBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+          chart.destroy();
+      }
+      else if (type === "scorecard") {
+          const design = getScorecardConfiguration(figure, runtime);
+          drawScoreChart(design, canvas);
+          chartBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+      }
+      else if (type === "gauge") {
+          drawGaugeChart(canvas, runtime);
+          chartBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+      }
+      div.remove();
+      return chartBlob ? new File([chartBlob], "chart.png", { type: "image/png" }) : undefined;
   }
   /**
    * Custom chart.js plugin to set the background color of the canvas
@@ -22948,6 +23091,7 @@ stores.inject(MyMetaStore, storeInstance);
       macroEnabledTemplateWorkbook: "application/vnd.ms-excel.template.macroEnabled.main+xml",
       excelAddInWorkbook: "application/vnd.ms-excel.addin.macroEnabled.main+xml",
       sheet: "application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml",
+      metadata: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml",
       sharedStrings: "application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml",
       styles: "application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml",
       drawing: "application/vnd.openxmlformats-officedocument.drawing+xml",
@@ -22960,6 +23104,7 @@ stores.inject(MyMetaStore, storeInstance);
   const XLSX_RELATION_TYPE = {
       document: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument",
       sheet: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet",
+      metadata: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sheetMetadata",
       sharedStrings: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings",
       styles: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles",
       drawing: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing",
@@ -22969,6 +23114,7 @@ stores.inject(MyMetaStore, storeInstance);
       hyperlink: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink",
       image: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
   };
+  const ARRAY_FORMULA_URI = "bdbb8cdc-fa1e-496e-a857-3c3f30c029c3";
   const RELATIONSHIP_NSR = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
   const HEIGHT_FACTOR = 0.75; // 100px => 75 u
   /**
@@ -25390,29 +25536,34 @@ stores.inject(MyMetaStore, storeInstance);
    * In all the sheets, replace the table-only references in the formula cells with standard references.
    */
   function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
-      for (let sheet of convertedSheets) {
-          const tables = xlsxSheets.find((s) => s.sheetName === sheet.name).tables;
+      for (let tableSheet of convertedSheets) {
+          const tables = xlsxSheets.find((s) => s.sheetName === tableSheet.name).tables;
           for (let table of tables) {
               const tabRef = table.name + "[";
-              for (let position of positions(toZone(table.ref))) {
-                  const xc = toXC(position.col, position.row);
-                  let cellContent = sheet.cells[xc];
-                  if (cellContent?.startsWith("=")) {
-                      let refIndex;
-                      while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
-                          let reference = cellContent.slice(refIndex + tabRef.length);
-                          // Expression can either be tableName[colName] or tableName[[#This Row], [colName]]
-                          let endIndex = reference.indexOf("]");
-                          if (reference.startsWith(`[`)) {
-                              endIndex = reference.indexOf("]", endIndex + 1);
-                              endIndex = reference.indexOf("]", endIndex + 1);
+              for (let sheet of convertedSheets) {
+                  for (let xc in sheet.cells) {
+                      const cell = sheet.cells[xc];
+                      let cellContent = sheet.cells[xc];
+                      if (cell && cellContent && cellContent.startsWith("=")) {
+                          let refIndex;
+                          while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
+                              let endIndex = refIndex + tabRef.length;
+                              let openBrackets = 1;
+                              while (openBrackets > 0 && endIndex < cellContent.length) {
+                                  if (cellContent[endIndex] === "[") {
+                                      openBrackets++;
+                                  }
+                                  else if (cellContent[endIndex] === "]") {
+                                      openBrackets--;
+                                  }
+                                  endIndex++;
+                              }
+                              let reference = cellContent.slice(refIndex + tabRef.length, endIndex - 1);
+                              const sheetPrefix = tableSheet.id === sheet.id ? "" : tableSheet.name + "!";
+                              const convertedRef = convertTableReference(sheetPrefix, reference, table, xc);
+                              cellContent =
+                                  cellContent.slice(0, refIndex) + convertedRef + cellContent.slice(endIndex);
                           }
-                          reference = reference.slice(0, endIndex);
-                          const convertedRef = convertTableReference(reference, table, xc);
-                          cellContent =
-                              cellContent.slice(0, refIndex) +
-                                  convertedRef +
-                                  cellContent.slice(tabRef.length + refIndex + endIndex + 1);
                       }
                       sheet.cells[xc] = cellContent;
                   }
@@ -25421,11 +25572,17 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   /**
-   * Convert table-specific references in formulas into standard references.
+   * Convert table-specific references in formulas into standard references. A table reference is composed of columns names,
+   * and of keywords determining the rows of the table to reference.
    *
    * A reference in a table can have the form (only the part between brackets should be given to this function):
    *  - tableName[colName] : reference to the whole column "colName"
+   *  - tableName[#keyword] : reference to the whatever row the keyword refers to
    *  - tableName[[#keyword], [colName]] : reference to some of the element(s) of the column colName
+   *  - tableName[[#keyword], [colName]:[col2Name]] : reference to some of the element(s) of the columns colName to col2Name
+   *  - tableName[[#keyword1], [#keyword2], [colName]] : reference to all the rows referenced by the keywords in the column colName
+   *  - tableName[[#keyword1], [colName], [#keyword2]]: the keywords and colName can be in any order
+   *
    *
    * The available keywords are :
    * - #All : all the column (including totals)
@@ -25433,58 +25590,109 @@ stores.inject(MyMetaStore, storeInstance);
    * - #Headers : only the header of the column
    * - #Totals : only the totals of the column
    * - #This Row : only the element in the same row as the cell
+   *
+   * Note that the only valid combination of multiple keywords are #Data + #Totals and #Headers + #Data.
    */
-  function convertTableReference(expr, table, cellXc) {
-      const refElements = expr.split(",");
+  function convertTableReference(sheetPrefix, expr, table, cellXc) {
+      // TODO: Ideally we'd want to make a real tokenizer, this simple approach won't work if for example the column name
+      // contain # or , characters. But that's probably an edge case that we can ignore for now.
+      const parts = expr.split(",").map((part) => part.trim());
       const tableZone = toZone(table.ref);
-      const refZone = { ...tableZone };
-      let isReferencedZoneValid = true;
-      // Single column reference
-      if (refElements.length === 1) {
-          const colRelativeIndex = table.cols.findIndex((col) => col.name === refElements[0]);
-          refZone.left = refZone.right = colRelativeIndex + tableZone.left;
-          if (table.headerRowCount) {
-              refZone.top += table.headerRowCount;
-          }
-          if (table.totalsRowCount) {
-              refZone.bottom -= 1;
+      const colIndexes = [];
+      const rowIndexes = [];
+      const foundKeywords = [];
+      for (const part of parts) {
+          if (removeBrackets(part).startsWith("#")) {
+              const keyWord = removeBrackets(part);
+              foundKeywords.push(keyWord);
+              switch (keyWord) {
+                  case "#All":
+                      rowIndexes.push(tableZone.top, tableZone.bottom);
+                      break;
+                  case "#Data":
+                      const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+                      const bottom = table.totalsRowCount
+                          ? tableZone.bottom - table.totalsRowCount
+                          : tableZone.bottom;
+                      rowIndexes.push(top, bottom);
+                      break;
+                  case "#This Row":
+                      rowIndexes.push(toCartesian(cellXc).row);
+                      break;
+                  case "#Headers":
+                      if (!table.headerRowCount) {
+                          return CellErrorType.InvalidReference;
+                      }
+                      rowIndexes.push(tableZone.top);
+                      break;
+                  case "#Totals":
+                      if (!table.totalsRowCount) {
+                          return CellErrorType.InvalidReference;
+                      }
+                      rowIndexes.push(tableZone.bottom);
+                      break;
+              }
           }
-      }
-      // Other references
-      else {
-          switch (refElements[0].slice(1, refElements[0].length - 1)) {
-              case "#All":
-                  refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                  refZone.bottom = tableZone.bottom;
-                  break;
-              case "#Data":
-                  refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                  refZone.bottom = table.totalsRowCount ? tableZone.bottom + 1 : tableZone.bottom;
-                  break;
-              case "#This Row":
-                  refZone.top = refZone.bottom = toCartesian(cellXc).row;
-                  break;
-              case "#Headers":
-                  refZone.top = refZone.bottom = tableZone.top;
-                  if (!table.headerRowCount) {
-                      isReferencedZoneValid = false;
-                  }
-                  break;
-              case "#Totals":
-                  refZone.top = refZone.bottom = tableZone.bottom;
-                  if (!table.totalsRowCount) {
-                      isReferencedZoneValid = false;
+          else {
+              const columns = part
+                  .split(":")
+                  .map((part) => part.trim())
+                  .map(removeBrackets);
+              if (colIndexes.length) {
+                  return CellErrorType.InvalidReference;
+              }
+              const colRelativeIndex = table.cols.findIndex((col) => col.name === columns[0]);
+              if (colRelativeIndex === -1) {
+                  return CellErrorType.InvalidReference;
+              }
+              colIndexes.push(colRelativeIndex + tableZone.left);
+              if (columns[1]) {
+                  const colRelativeIndex2 = table.cols.findIndex((col) => col.name === columns[1]);
+                  if (colRelativeIndex2 === -1) {
+                      return CellErrorType.InvalidReference;
                   }
-                  break;
+                  colIndexes.push(colRelativeIndex2 + tableZone.left);
+              }
           }
-          const colRef = refElements[1].slice(1, refElements[1].length - 1);
-          const colRelativeIndex = table.cols.findIndex((col) => col.name === colRef);
-          refZone.left = refZone.right = colRelativeIndex + tableZone.left;
       }
-      if (!isReferencedZoneValid) {
+      if (!areKeywordsCompatible(foundKeywords)) {
           return CellErrorType.InvalidReference;
       }
-      return refZone.top !== refZone.bottom ? zoneToXc(refZone) : toXC(refZone.left, refZone.top);
+      if (rowIndexes.length === 0) {
+          const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+          const bottom = table.totalsRowCount
+              ? tableZone.bottom - table.totalsRowCount
+              : tableZone.bottom;
+          rowIndexes.push(top, bottom);
+      }
+      if (colIndexes.length === 0) {
+          colIndexes.push(tableZone.left, tableZone.right);
+      }
+      const refZone = {
+          top: Math.min(...rowIndexes),
+          left: Math.min(...colIndexes),
+          bottom: Math.max(...rowIndexes),
+          right: Math.max(...colIndexes),
+      };
+      return sheetPrefix + zoneToXc(refZone);
+  }
+  function removeBrackets(str) {
+      return str.startsWith("[") && str.endsWith("]") ? str.slice(1, str.length - 1) : str;
+  }
+  function areKeywordsCompatible(keywords) {
+      if (keywords.length < 2) {
+          return true;
+      }
+      else if (keywords.length > 2) {
+          return false;
+      }
+      else if (keywords.includes("#Data") && keywords.includes("#Totals")) {
+          return true;
+      }
+      else if (keywords.includes("#Headers") && keywords.includes("#Data")) {
+          return true;
+      }
+      return false;
   }
 
   // -------------------------------------
@@ -27935,28 +28143,46 @@ stores.inject(MyMetaStore, storeInstance);
       const result = env.model.dispatch("PASTE", { target, pasteOption });
       handlePasteResult(env, result);
   }
-  function interactivePasteFromOS(env, target, clipboardContent, pasteOption) {
+  async function interactivePasteFromOS(env, target, parsedClipboardContent, pasteOption) {
       let result;
       // We do not trust the clipboard content to be accurate and comprehensive.
       // Therefore, to ensure reliability, we handle unexpected errors that may
       // arise from content that would not be suitable for the current version.
       try {
+          const clipboarContent = parsedClipboardContent;
+          if (parsedClipboardContent.imageBlob) {
+              try {
+                  const imageData = await env.imageProvider?.uploadFile(parsedClipboardContent.imageBlob);
+                  clipboarContent.imageData = imageData;
+              }
+              catch (e) {
+                  const msg = _t("An error occurred while uploading the image. %s", e.message);
+                  console.error(e);
+                  env.raiseError(msg);
+              }
+              delete parsedClipboardContent.imageBlob;
+          }
           result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", {
               target,
-              clipboardContent,
+              clipboardContent: parsedClipboardContent,
               pasteOption,
           });
       }
       catch (error) {
-          const parsedSpreadsheetContent = clipboardContent.data;
+          const parsedSpreadsheetContent = parsedClipboardContent.data;
           if (parsedSpreadsheetContent?.version !== CURRENT_VERSION) {
               env.raiseError(_t("An unexpected error occurred while pasting content.\
           This is probably due to a spreadsheet version mismatch."));
           }
+          else {
+              env.raiseError(_t("An unexpected error occurred while pasting content.\
+          Additional information can be found in the browser console."));
+              console.error(error);
+          }
           result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", {
               target,
               clipboardContent: {
-                  text: clipboardContent.text,
+                  text: parsedClipboardContent.text,
               },
               pasteOption,
           });
@@ -28655,8 +28881,8 @@ stores.inject(MyMetaStore, storeInstance);
       if (!window.Chart) {
           return false;
       }
-      // @ts-ignore
       const adapter = new window.Chart._adapters._date({});
+      // @ts-ignore
       const isInstalled = adapter._id === "luxon";
       if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
           missingTimeAdapterAlreadyWarned = true;
@@ -29085,6 +29311,31 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return [dataset];
   }
+  function getFunnelChartDatasets(definition, args) {
+      const dataSetsValues = args.dataSetsValues[0];
+      const labels = args.labels;
+      if (!dataSetsValues) {
+          return [];
+      }
+      let { label: datasetLabel, data } = dataSetsValues;
+      datasetLabel = definition.dataSets?.[0].label || datasetLabel;
+      const dataset = {
+          label: datasetLabel,
+          data: data.map((value) => (value <= 0 ? [0, 0] : [-value, value])),
+          backgroundColor: getFunnelLabelColors(labels, definition.funnelColors),
+          yAxisID: "y",
+          xAxisID: "x",
+          barPercentage: 1,
+          categoryPercentage: 1,
+          borderColor: definition.background || BACKGROUND_CHART_COLOR,
+          borderWidth: 3,
+      };
+      return [dataset];
+  }
+  function getFunnelLabelColors(labels, colors) {
+      const colorGenerator = new ColorGenerator(labels.length, colors);
+      return labels.map(() => colorGenerator.next());
+  }
   function getTrendingLineDataSet(dataset, config, data) {
       const defaultBorderColor = colorToRGBA(dataset.backgroundColor);
       defaultBorderColor.a = 1;
@@ -29518,6 +29769,38 @@ stores.inject(MyMetaStore, storeInstance);
           },
       };
   }
+  function getFunnelChartScales(definition, args) {
+      const dataSet = args.dataSetsValues[0];
+      return {
+          x: {
+              display: false,
+          },
+          y: {
+              grid: { offset: false }, // bar charts grid is offset by default
+              ticks: {
+                  callback: function (tickValue) {
+                      return truncateLabel(this.getLabelForValue(tickValue));
+                  },
+              },
+              border: { display: false },
+          },
+          percentages: {
+              position: "right",
+              border: { display: false },
+              ticks: {
+                  callback: function (tickValue, index, ticks) {
+                      const value = dataSet.data?.[index];
+                      const baseValue = dataSet.data?.[0];
+                      if (!baseValue || value === undefined) {
+                          return "";
+                      }
+                      return formatValue(value / baseValue, { format: "0%", locale: args.locale });
+                  },
+              },
+              grid: { display: false },
+          },
+      };
+  }
   function getGeoChartProjection(projection) {
       if (projection === "conicConformal") {
           return window.ChartGeo.geoConicConformal().rotate([100, 0]); // Centered on the US
@@ -29881,6 +30164,23 @@ stores.inject(MyMetaStore, storeInstance);
           },
       };
   }
+  function getFunnelChartTooltip(definition, args) {
+      return {
+          enabled: false,
+          external: customTooltipHandler,
+          position: "funnelTooltipPositioner",
+          callbacks: {
+              title: () => "",
+              beforeLabel: (tooltipItem) => tooltipItem.label,
+              label: function (tooltipItem) {
+                  const yLabel = tooltipItem.parsed.x;
+                  const axisId = tooltipItem.dataset.xAxisID;
+                  const yLabelStr = formatChartDatasetValue(args.axisFormats, args.locale)(yLabel, axisId);
+                  return yLabelStr;
+              },
+          },
+      };
+  }
   function calculatePercentage(dataset, dataIndex) {
       const numericData = dataset.filter((value) => typeof value === "number");
       const total = numericData.reduce((sum, value) => sum + value, 0);
@@ -29951,6 +30251,10 @@ stores.inject(MyMetaStore, storeInstance);
     getComboChartDatasets: getComboChartDatasets,
     getComboChartLegend: getComboChartLegend,
     getData: getData,
+    getFunnelChartDatasets: getFunnelChartDatasets,
+    getFunnelChartScales: getFunnelChartScales,
+    getFunnelChartTooltip: getFunnelChartTooltip,
+    getFunnelLabelColors: getFunnelLabelColors,
     getGeoChartData: getGeoChartData,
     getGeoChartDatasets: getGeoChartDatasets,
     getGeoChartScales: getGeoChartScales,
@@ -30289,6 +30593,146 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  class FunnelChart extends AbstractChart {
+      dataSets;
+      labelRange;
+      background;
+      legendPosition;
+      aggregated;
+      type = "funnel";
+      dataSetsHaveTitle;
+      dataSetDesign;
+      axesDesign;
+      horizontal = true;
+      showValues;
+      funnelColors;
+      constructor(definition, sheetId, getters) {
+          super(definition, sheetId, getters);
+          this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+          this.labelRange = createValidRange(getters, sheetId, definition.labelRange);
+          this.background = definition.background;
+          this.legendPosition = definition.legendPosition;
+          this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+          this.dataSetDesign = definition.dataSets;
+          this.axesDesign = definition.axesDesign;
+          this.showValues = definition.showValues;
+          this.horizontal = true;
+          this.funnelColors = definition.funnelColors;
+      }
+      static transformDefinition(definition, executed) {
+          return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+      }
+      static validateChartDefinition(validator, definition) {
+          return validator.checkValidations(definition, checkDataset, checkLabelRange);
+      }
+      static getDefinitionFromContextCreation(context) {
+          return {
+              background: context.background,
+              dataSets: context.range ?? [],
+              dataSetsHaveTitle: context.dataSetsHaveTitle ?? false,
+              aggregated: context.aggregated ?? false,
+              legendPosition: "none",
+              title: context.title || { text: "" },
+              type: "funnel",
+              labelRange: context.auxiliaryRange || undefined,
+              showValues: context.showValues,
+              axesDesign: context.axesDesign,
+              funnelColors: context.funnelColors,
+              horizontal: true,
+          };
+      }
+      getContextCreation() {
+          const range = [];
+          for (const [i, dataSet] of this.dataSets.entries()) {
+              range.push({
+                  ...this.dataSetDesign?.[i],
+                  dataRange: this.getters.getRangeString(dataSet.dataRange, this.sheetId),
+              });
+          }
+          return {
+              ...this,
+              range,
+              auxiliaryRange: this.labelRange
+                  ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                  : undefined,
+          };
+      }
+      duplicateInDuplicatedSheet(newSheetId) {
+          const dataSets = duplicateDataSetsInDuplicatedSheet(this.sheetId, newSheetId, this.dataSets);
+          const labelRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.labelRange);
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, newSheetId);
+          return new FunnelChart(definition, newSheetId, this.getters);
+      }
+      copyInSheetId(sheetId) {
+          const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+          return new FunnelChart(definition, sheetId, this.getters);
+      }
+      getDefinition() {
+          return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+      }
+      getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+          const ranges = [];
+          for (const [i, dataSet] of dataSets.entries()) {
+              ranges.push({
+                  ...this.dataSetDesign?.[i],
+                  dataRange: this.getters.getRangeString(dataSet.dataRange, targetSheetId || this.sheetId),
+              });
+          }
+          return {
+              type: "funnel",
+              dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+              background: this.background,
+              dataSets: ranges,
+              legendPosition: this.legendPosition,
+              labelRange: labelRange
+                  ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                  : undefined,
+              title: this.title,
+              aggregated: this.aggregated,
+              horizontal: this.horizontal,
+              axesDesign: this.axesDesign,
+              showValues: this.showValues,
+              funnelColors: this.funnelColors,
+          };
+      }
+      getDefinitionForExcel() {
+          return undefined;
+      }
+      updateRanges(applyChange) {
+          const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+          if (!isStale) {
+              return this;
+          }
+          const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+          return new FunnelChart(definition, this.sheetId, this.getters);
+      }
+  }
+  function createFunnelChartRuntime(chart, getters) {
+      const definition = chart.getDefinition();
+      const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "funnel",
+          data: {
+              labels: chartData.labels,
+              datasets: getFunnelChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              indexAxis: "y",
+              layout: getChartLayout(),
+              scales: getFunnelChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: { display: false },
+                  tooltip: getFunnelChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
+      };
+      return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+  }
+
   function isDataRangeValid(definition) {
       return definition.dataRange && !rangeReference.test(definition.dataRange)
           ? "InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */
@@ -31695,6 +32139,15 @@ stores.inject(MyMetaStore, storeInstance);
       getChartDefinitionFromContextCreation: GeoChart.getDefinitionFromContextCreation,
       sequence: 90,
   });
+  chartRegistry.add("funnel", {
+      match: (type) => type === "funnel",
+      createChart: (definition, sheetId, getters) => new FunnelChart(definition, sheetId, getters),
+      getChartRuntime: createFunnelChartRuntime,
+      validateChartDefinition: FunnelChart.validateChartDefinition,
+      transformDefinition: FunnelChart.transformDefinition,
+      getChartDefinitionFromContextCreation: FunnelChart.getDefinitionFromContextCreation,
+      sequence: 100,
+  });
   const chartComponentRegistry = new Registry();
   chartComponentRegistry.add("line", ChartJsComponent);
   chartComponentRegistry.add("bar", ChartJsComponent);
@@ -31707,6 +32160,7 @@ stores.inject(MyMetaStore, storeInstance);
   chartComponentRegistry.add("pyramid", ChartJsComponent);
   chartComponentRegistry.add("radar", ChartJsComponent);
   chartComponentRegistry.add("geo", ChartJsComponent);
+  chartComponentRegistry.add("funnel", ChartJsComponent);
   const chartCategories = {
       line: _t("Line"),
       column: _t("Column"),
@@ -31873,6 +32327,13 @@ stores.inject(MyMetaStore, storeInstance);
       chartType: "geo",
       category: "misc",
       preview: "o-spreadsheet-ChartPreview.GEO_CHART",
+  })
+      .add("funnel", {
+      displayName: _t("Funnel"),
+      chartSubtype: "funnel",
+      chartType: "funnel",
+      category: "misc",
+      preview: "o-spreadsheet-ChartPreview.FUNNEL_CHART",
   });
 
   /**
@@ -31933,6 +32394,391 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  const macRegex = /Mac/i;
+  const MODIFIER_KEYS = ["Shift", "Control", "Alt", "Meta"];
+  /**
+   * Return true if the event was triggered from
+   * a child element.
+   */
+  function isChildEvent(parent, ev) {
+      if (!parent)
+          return false;
+      return !!ev.target && parent.contains(ev.target);
+  }
+  function gridOverlayPosition() {
+      const spreadsheetElement = document.querySelector(".o-grid-overlay");
+      if (spreadsheetElement) {
+          const { top, left } = spreadsheetElement?.getBoundingClientRect();
+          return { top, left };
+      }
+      throw new Error("Can't find spreadsheet position");
+  }
+  function getBoundingRectAsPOJO(el) {
+      const rect = el.getBoundingClientRect();
+      return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+      };
+  }
+  /**
+   * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
+   */
+  function* iterateChildren(el) {
+      yield el;
+      if (el.hasChildNodes()) {
+          for (let child of el.childNodes) {
+              yield* iterateChildren(child);
+          }
+      }
+  }
+  function getOpenedMenus() {
+      return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
+  }
+  function getCurrentSelection(el) {
+      let { startElement, endElement, startSelectionOffset, endSelectionOffset } = getStartAndEndSelection(el);
+      let startSizeBefore = findSelectionIndex(el, startElement, startSelectionOffset);
+      let endSizeBefore = findSelectionIndex(el, endElement, endSelectionOffset);
+      return {
+          start: startSizeBefore,
+          end: endSizeBefore,
+      };
+  }
+  function getStartAndEndSelection(el) {
+      const selection = document.getSelection();
+      return {
+          startElement: selection.anchorNode || el,
+          startSelectionOffset: selection.anchorOffset,
+          endElement: selection.focusNode || el,
+          endSelectionOffset: selection.focusOffset,
+      };
+  }
+  /**
+   * Computes the text 'index' inside this.el based on the currently selected node and its offset.
+   * The selected node is either a Text node or an Element node.
+   *
+   * case 1 -Text node:
+   * the offset is the number of characters from the start of the node. We have to add this offset to the
+   * content length of all previous nodes.
+   *
+   * case 2 - Element node:
+   * the offset is the number of child nodes before the selected node. We have to add the content length of
+   * all the nodes prior to the selected node as well as the content of the child node before the offset.
+   *
+   * See the MDN documentation for more details.
+   * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
+   * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
+   *
+   */
+  function findSelectionIndex(el, nodeToFind, nodeOffset) {
+      let usedCharacters = 0;
+      let it = iterateChildren(el);
+      let current = it.next();
+      let isFirstParagraph = true;
+      while (!current.done && current.value !== nodeToFind) {
+          if (!current.value.hasChildNodes()) {
+              if (current.value.textContent) {
+                  usedCharacters += current.value.textContent.length;
+              }
+          }
+          // One new paragraph = one new line character, except for the first paragraph
+          if (current.value.nodeName === "P" ||
+              (current.value.nodeName === "DIV" && current.value !== el) // On paste, the HTML may contain <div> instead of <p>
+          ) {
+              if (isFirstParagraph) {
+                  isFirstParagraph = false;
+              }
+              else {
+                  usedCharacters++;
+              }
+          }
+          current = it.next();
+      }
+      if (current.value !== nodeToFind) {
+          /** This situation can happen if the code is called while the selection is not currently on the element.
+           * In this case, we return 0 because we don't know the size of the text before the selection.
+           *
+           * A known occurrence is triggered since the introduction of commit d4663158 (PR #2038).
+           */
+          return 0;
+      }
+      else {
+          if (!current.value.hasChildNodes()) {
+              usedCharacters += nodeOffset;
+          }
+          else {
+              const children = [...current.value.childNodes].slice(0, nodeOffset);
+              usedCharacters += children.reduce((acc, child, index) => {
+                  if (child.textContent !== null) {
+                      // need to account for paragraph nodes that implicitly add a new line
+                      // except for the last paragraph
+                      let chars = child.textContent.length;
+                      if (child.nodeName === "P" && index !== children.length - 1) {
+                          chars++;
+                      }
+                      return acc + chars;
+                  }
+                  else {
+                      return acc;
+                  }
+              }, 0);
+          }
+      }
+      if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
+          usedCharacters++;
+      }
+      return usedCharacters;
+  }
+  const letterRegex = /^[a-zA-Z]$/;
+  /**
+   * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
+   *
+   * @argument ev - The keyboard event to transform
+   * @argument mode - Use either ev.key of ev.code to get the string shortcut
+   *
+   * @example
+   * event : { ctrlKey: true, key: "a" } => "Ctrl+A"
+   * event : { shift: true, alt: true, key: "Home" } => "Alt+Shift+Home"
+   */
+  function keyboardEventToShortcutString(ev, mode = "key") {
+      let keyDownString = "";
+      if (!MODIFIER_KEYS.includes(ev.key)) {
+          if (isCtrlKey(ev))
+              keyDownString += "Ctrl+";
+          if (ev.altKey)
+              keyDownString += "Alt+";
+          if (ev.shiftKey)
+              keyDownString += "Shift+";
+      }
+      const key = mode === "key" ? ev.key : ev.code;
+      keyDownString += letterRegex.test(key) ? key.toUpperCase() : key;
+      return keyDownString;
+  }
+  function isMacOS() {
+      return Boolean(macRegex.test(navigator.userAgent));
+  }
+  /**
+   * @param {KeyboardEvent | MouseEvent} ev
+   * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
+   * On Mac, this is the "meta" or "command" key.
+   */
+  function isCtrlKey(ev) {
+      return isMacOS() ? ev.metaKey : ev.ctrlKey;
+  }
+  /**
+   * @param {MouseEvent} ev - The mouse event.
+   * @returns {boolean} Returns true if the event was triggered by a middle-click
+   * or a Ctrl + Click (Cmd + Click on Mac).
+   */
+  function isMiddleClickOrCtrlClick(ev) {
+      return ev.button === 1 || (isCtrlKey(ev) && ev.button === 0);
+  }
+  async function convertImageToPng(imageUrl) {
+      return new Promise((resolve, reject) => {
+          const image = new Image();
+          image.addEventListener("load", () => {
+              const canvas = document.createElement("canvas");
+              canvas.width = image.width;
+              canvas.height = image.height;
+              const ctx = canvas.getContext("2d");
+              ctx?.drawImage(image, 0, 0);
+              canvas.toBlob(resolve, "image/png");
+          });
+          image.addEventListener("error", reject);
+          image.src = imageUrl;
+      });
+  }
+  function downloadFile(dataUrl, fileName) {
+      const a = document.createElement("a");
+      a.href = dataUrl;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+  }
+
+  /**
+   * Create a function used to create a Chart based on the definition
+   */
+  function chartFactory(getters) {
+      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
+      function createChart(id, definition, sheetId) {
+          const builder = builders.find((builder) => builder.match(definition.type));
+          if (!builder) {
+              throw new Error(`No builder for this chart: ${definition.type}`);
+          }
+          return builder.createChart(definition, sheetId, getters);
+      }
+      return createChart;
+  }
+  /**
+   * Create a function used to create a Chart Runtime based on the chart class
+   * instance
+   */
+  function chartRuntimeFactory(getters) {
+      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
+      function createRuntimeChart(chart) {
+          const builder = builders.find((builder) => builder.match(chart.type));
+          if (!builder) {
+              throw new Error("No runtime builder for this chart.");
+          }
+          return builder.getChartRuntime(chart, getters);
+      }
+      return createRuntimeChart;
+  }
+  /**
+   * Validate the chart definition given in arguments
+   */
+  function validateChartDefinition(validator, definition) {
+      const validators = chartRegistry.getAll().find((validator) => validator.match(definition.type));
+      if (!validators) {
+          throw new Error("Unknown chart type.");
+      }
+      return validators.validateChartDefinition(validator, definition);
+  }
+  /**
+   * Get a new chart definition transformed with the executed command. This
+   * functions will be called during operational transform process
+   */
+  function transformDefinition(definition, executed) {
+      const transformation = chartRegistry.getAll().find((factory) => factory.match(definition.type));
+      if (!transformation) {
+          throw new Error("Unknown chart type.");
+      }
+      return transformation.transformDefinition(definition, executed);
+  }
+  /**
+   * Return a "smart" chart definition in the given zone. The definition is "smart" because it will
+   * use the best type of chart to display the data of the zone.
+   *
+   * It will also try to find labels and datasets in the range, and try to find title for the datasets.
+   *
+   * The type of chart will be :
+   * - If the zone is a single non-empty cell, returns a scorecard
+   * - If the all the labels are numbers/date, returns a line chart
+   * - Else returns a bar chart
+   */
+  function getSmartChartDefinition(zone, getters) {
+      const sheetId = getters.getActiveSheetId();
+      let dataSetZone = zone;
+      const singleColumn = zoneToDimension(zone).numberOfCols === 1;
+      if (!singleColumn) {
+          dataSetZone = { ...zone, left: zone.left + 1 };
+      }
+      const dataRange = zoneToXc(getters.getUnboundedZone(sheetId, dataSetZone));
+      const dataSets = [{ dataRange, yAxisId: "y" }];
+      const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
+      if (getZoneArea(zone) === 1 && topLeftCell?.content) {
+          return {
+              type: "scorecard",
+              title: {},
+              background: topLeftCell.style?.fillColor || undefined,
+              keyValue: zoneToXc(zone),
+              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
+              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
+              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
+          };
+      }
+      const cellsInFirstRow = getters.getEvaluatedCellsInZone(sheetId, {
+          ...dataSetZone,
+          bottom: dataSetZone.top,
+      });
+      const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
+      let labelRangeXc;
+      if (!singleColumn) {
+          labelRangeXc = zoneToXc(getters.getUnboundedZone(sheetId, { ...zone, right: zone.left }));
+      }
+      // Only display legend for several datasets.
+      const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
+      const lineChartDefinition = {
+          title: {},
+          dataSets,
+          labelsAsText: false,
+          stacked: false,
+          aggregated: false,
+          cumulative: false,
+          labelRange: labelRangeXc,
+          type: "line",
+          dataSetsHaveTitle,
+          legendPosition: newLegendPos,
+      };
+      const chart = new LineChart(lineChartDefinition, sheetId, getters);
+      if (canChartParseLabels(lineChartDefinition, chart.dataSets, chart.labelRange, getters)) {
+          return lineChartDefinition;
+      }
+      const _dataSets = createDataSets(getters, dataSets, sheetId, dataSetsHaveTitle);
+      if (singleColumn &&
+          getData(getters, _dataSets[0]).every((e) => typeof e === "string" && !isEvaluationError(e))) {
+          return {
+              title: {},
+              dataSets: [{ dataRange }],
+              aggregated: true,
+              labelRange: dataRange,
+              type: "pie",
+              legendPosition: "top",
+              dataSetsHaveTitle: false,
+          };
+      }
+      return {
+          title: {},
+          dataSets,
+          labelRange: labelRangeXc,
+          type: "bar",
+          stacked: false,
+          aggregated: false,
+          dataSetsHaveTitle,
+          legendPosition: newLegendPos,
+      };
+  }
+
+  var CHART_HELPERS = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AbstractChart: AbstractChart,
+    BarChart: BarChart,
+    CHART_AXIS_CHOICES: CHART_AXIS_CHOICES,
+    CHART_COMMON_OPTIONS: CHART_COMMON_OPTIONS,
+    GaugeChart: GaugeChart,
+    LineChart: LineChart,
+    PieChart: PieChart,
+    ScorecardChart: ScorecardChart$1,
+    TREND_LINE_XAXIS_ID: TREND_LINE_XAXIS_ID,
+    WaterfallChart: WaterfallChart,
+    adaptChartRange: adaptChartRange,
+    chartFactory: chartFactory,
+    chartFontColor: chartFontColor,
+    chartMutedFontColor: chartMutedFontColor,
+    chartRuntimeFactory: chartRuntimeFactory,
+    chartToImageFile: chartToImageFile,
+    chartToImageUrl: chartToImageUrl,
+    checkDataset: checkDataset,
+    checkLabelRange: checkLabelRange,
+    createBarChartRuntime: createBarChartRuntime,
+    createDataSets: createDataSets,
+    createGaugeChartRuntime: createGaugeChartRuntime,
+    createLineChartRuntime: createLineChartRuntime,
+    createPieChartRuntime: createPieChartRuntime,
+    createScorecardChartRuntime: createScorecardChartRuntime,
+    createWaterfallChartRuntime: createWaterfallChartRuntime,
+    drawScoreChart: drawScoreChart,
+    duplicateDataSetsInDuplicatedSheet: duplicateDataSetsInDuplicatedSheet,
+    duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
+    formatChartDatasetValue: formatChartDatasetValue,
+    formatTickValue: formatTickValue,
+    getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
+    getDefinedAxis: getDefinedAxis,
+    getPieColors: getPieColors,
+    getSmartChartDefinition: getSmartChartDefinition,
+    shouldRemoveFirstLabel: shouldRemoveFirstLabel,
+    toExcelDataset: toExcelDataset,
+    toExcelLabelRange: toExcelLabelRange,
+    transformChartDefinitionWithDataSetsWithZone: transformChartDefinitionWithDataSetsWithZone,
+    transformDefinition: transformDefinition,
+    truncateLabel: truncateLabel,
+    updateChartRangesWithDataSets: updateChartRangesWithDataSets,
+    validateChartDefinition: validateChartDefinition
+  });
+
   function centerFigurePosition(getters, size) {
       const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
       const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
@@ -31990,6 +32836,39 @@ stores.inject(MyMetaStore, storeInstance);
           },
           getCopyMenuItem(figureId, env),
           getCutMenuItem(figureId, env),
+          {
+              id: "copy_as_image",
+              name: _t("Copy as image"),
+              icon: "o-spreadsheet-Icon.COPY_AS_IMAGE",
+              sequence: 4,
+              execute: async () => {
+                  const figureSheetId = env.model.getters.getFigureSheetId(figureId);
+                  const figure = env.model.getters.getFigure(figureSheetId, figureId);
+                  const chartType = env.model.getters.getChartType(figureId);
+                  const runtime = env.model.getters.getChartRuntime(figureId);
+                  const imageUrl = chartToImageUrl(runtime, figure, chartType);
+                  const innerHTML = `<img src="${xmlEscape(imageUrl)}" />`;
+                  const blob = await chartToImageFile(runtime, figure, chartType);
+                  env.clipboard.write({
+                      "text/html": innerHTML,
+                      "image/png": blob,
+                  });
+              },
+          },
+          {
+              id: "download",
+              name: _t("Download"),
+              icon: "o-spreadsheet-Icon.DOWNLOAD",
+              sequence: 6,
+              execute: async () => {
+                  const figureSheetId = env.model.getters.getFigureSheetId(figureId);
+                  const figure = env.model.getters.getFigure(figureSheetId, figureId);
+                  const chartType = env.model.getters.getChartType(figureId);
+                  const runtime = env.model.getters.getChartRuntime(figureId);
+                  const url = chartToImageUrl(runtime, figure, chartType);
+                  downloadFile(url, "chart");
+              },
+          },
           getDeleteMenuItem(figureId, onFigureDeleted, env),
       ];
       return createActions(menuItemSpecs);
@@ -32020,6 +32899,17 @@ stores.inject(MyMetaStore, storeInstance);
               },
               icon: "o-spreadsheet-Icon.REFRESH",
           },
+          {
+              id: "download",
+              name: _t("Download"),
+              sequence: 6,
+              execute: async () => {
+                  env.model.dispatch("SELECT_FIGURE", { id: figureId });
+                  const path = env.model.getters.getImagePath(figureId);
+                  downloadFile(path, "image");
+              },
+              icon: "o-spreadsheet-Icon.DOWNLOAD",
+          },
           getDeleteMenuItem(figureId, onFigureDeleted, env),
       ];
       return createActions(menuItemSpecs);
@@ -32033,7 +32923,8 @@ stores.inject(MyMetaStore, storeInstance);
           execute: async () => {
               env.model.dispatch("SELECT_FIGURE", { id: figureId });
               env.model.dispatch("COPY");
-              await env.clipboard.write(env.model.getters.getClipboardContent());
+              const osClipboardContent = await env.model.getters.getClipboardTextAndImageContent();
+              await env.clipboard.write(osClipboardContent);
           },
           icon: "o-spreadsheet-Icon.CLIPBOARD",
       };
@@ -32047,7 +32938,7 @@ stores.inject(MyMetaStore, storeInstance);
           execute: async () => {
               env.model.dispatch("SELECT_FIGURE", { id: figureId });
               env.model.dispatch("CUT");
-              await env.clipboard.write(env.model.getters.getClipboardContent());
+              await env.clipboard.write(await env.model.getters.getClipboardTextAndImageContent());
           },
           icon: "o-spreadsheet-Icon.CUT",
       };
@@ -32478,6 +33369,7 @@ stores.inject(MyMetaStore, storeInstance);
           onPopoverHidden: { type: Function, optional: true },
           onPopoverMoved: { type: Function, optional: true },
           zIndex: { type: Number, optional: true },
+          class: { type: String, optional: true },
           slots: Object,
       };
       static defaultProps = {
@@ -32510,10 +33402,6 @@ stores.inject(MyMetaStore, storeInstance);
               this.currentDisplayValue = newDisplay;
               if (!anchor)
                   return;
-              el.style.top = "";
-              el.style.left = "";
-              el.style["max-height"] = "";
-              el.style["max-width"] = "";
               const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
               let elDims = {
                   width: el.getBoundingClientRect().width,
@@ -33058,187 +33946,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  const macRegex = /Mac/i;
-  const MODIFIER_KEYS = ["Shift", "Control", "Alt", "Meta"];
-  /**
-   * Return true if the event was triggered from
-   * a child element.
-   */
-  function isChildEvent(parent, ev) {
-      if (!parent)
-          return false;
-      return !!ev.target && parent.contains(ev.target);
-  }
-  function gridOverlayPosition() {
-      const spreadsheetElement = document.querySelector(".o-grid-overlay");
-      if (spreadsheetElement) {
-          const { top, left } = spreadsheetElement?.getBoundingClientRect();
-          return { top, left };
-      }
-      throw new Error("Can't find spreadsheet position");
-  }
-  function getBoundingRectAsPOJO(el) {
-      const rect = el.getBoundingClientRect();
-      return {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-      };
-  }
-  /**
-   * Iterate over all the children of `el` in the dom tree starting at `el`, depth first.
-   */
-  function* iterateChildren(el) {
-      yield el;
-      if (el.hasChildNodes()) {
-          for (let child of el.childNodes) {
-              yield* iterateChildren(child);
-          }
-      }
-  }
-  function getOpenedMenus() {
-      return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
-  }
-  function getCurrentSelection(el) {
-      let { startElement, endElement, startSelectionOffset, endSelectionOffset } = getStartAndEndSelection(el);
-      let startSizeBefore = findSelectionIndex(el, startElement, startSelectionOffset);
-      let endSizeBefore = findSelectionIndex(el, endElement, endSelectionOffset);
-      return {
-          start: startSizeBefore,
-          end: endSizeBefore,
-      };
-  }
-  function getStartAndEndSelection(el) {
-      const selection = document.getSelection();
-      return {
-          startElement: selection.anchorNode || el,
-          startSelectionOffset: selection.anchorOffset,
-          endElement: selection.focusNode || el,
-          endSelectionOffset: selection.focusOffset,
-      };
-  }
-  /**
-   * Computes the text 'index' inside this.el based on the currently selected node and its offset.
-   * The selected node is either a Text node or an Element node.
-   *
-   * case 1 -Text node:
-   * the offset is the number of characters from the start of the node. We have to add this offset to the
-   * content length of all previous nodes.
-   *
-   * case 2 - Element node:
-   * the offset is the number of child nodes before the selected node. We have to add the content length of
-   * all the nodes prior to the selected node as well as the content of the child node before the offset.
-   *
-   * See the MDN documentation for more details.
-   * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
-   * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
-   *
-   */
-  function findSelectionIndex(el, nodeToFind, nodeOffset) {
-      let usedCharacters = 0;
-      let it = iterateChildren(el);
-      let current = it.next();
-      let isFirstParagraph = true;
-      while (!current.done && current.value !== nodeToFind) {
-          if (!current.value.hasChildNodes()) {
-              if (current.value.textContent) {
-                  usedCharacters += current.value.textContent.length;
-              }
-          }
-          // One new paragraph = one new line character, except for the first paragraph
-          if (current.value.nodeName === "P" ||
-              (current.value.nodeName === "DIV" && current.value !== el) // On paste, the HTML may contain <div> instead of <p>
-          ) {
-              if (isFirstParagraph) {
-                  isFirstParagraph = false;
-              }
-              else {
-                  usedCharacters++;
-              }
-          }
-          current = it.next();
-      }
-      if (current.value !== nodeToFind) {
-          /** This situation can happen if the code is called while the selection is not currently on the element.
-           * In this case, we return 0 because we don't know the size of the text before the selection.
-           *
-           * A known occurrence is triggered since the introduction of commit d4663158 (PR #2038).
-           */
-          return 0;
-      }
-      else {
-          if (!current.value.hasChildNodes()) {
-              usedCharacters += nodeOffset;
-          }
-          else {
-              const children = [...current.value.childNodes].slice(0, nodeOffset);
-              usedCharacters += children.reduce((acc, child, index) => {
-                  if (child.textContent !== null) {
-                      // need to account for paragraph nodes that implicitly add a new line
-                      // except for the last paragraph
-                      let chars = child.textContent.length;
-                      if (child.nodeName === "P" && index !== children.length - 1) {
-                          chars++;
-                      }
-                      return acc + chars;
-                  }
-                  else {
-                      return acc;
-                  }
-              }, 0);
-          }
-      }
-      if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
-          usedCharacters++;
-      }
-      return usedCharacters;
-  }
-  const letterRegex = /^[a-zA-Z]$/;
-  /**
-   * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
-   *
-   * @argument ev - The keyboard event to transform
-   * @argument mode - Use either ev.key of ev.code to get the string shortcut
-   *
-   * @example
-   * event : { ctrlKey: true, key: "a" } => "Ctrl+A"
-   * event : { shift: true, alt: true, key: "Home" } => "Alt+Shift+Home"
-   */
-  function keyboardEventToShortcutString(ev, mode = "key") {
-      let keyDownString = "";
-      if (!MODIFIER_KEYS.includes(ev.key)) {
-          if (isCtrlKey(ev))
-              keyDownString += "Ctrl+";
-          if (ev.altKey)
-              keyDownString += "Alt+";
-          if (ev.shiftKey)
-              keyDownString += "Shift+";
-      }
-      const key = mode === "key" ? ev.key : ev.code;
-      keyDownString += letterRegex.test(key) ? key.toUpperCase() : key;
-      return keyDownString;
-  }
-  function isMacOS() {
-      return Boolean(macRegex.test(navigator.userAgent));
-  }
-  /**
-   * @param {KeyboardEvent | MouseEvent} ev
-   * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
-   * On Mac, this is the "meta" or "command" key.
-   */
-  function isCtrlKey(ev) {
-      return isMacOS() ? ev.metaKey : ev.ctrlKey;
-  }
-  /**
-   * @param {MouseEvent} ev - The mouse event.
-   * @returns {boolean} Returns true if the event was triggered by a middle-click
-   * or a Ctrl + Click (Cmd + Click on Mac).
-   */
-  function isMiddleClickOrCtrlClick(ev) {
-      return ev.button === 1 || (isCtrlKey(ev) && ev.button === 0);
-  }
-
   const LINK_TOOLTIP_HEIGHT = 32;
   const LINK_TOOLTIP_WIDTH = 220;
   css /* scss */ `
@@ -33908,186 +34615,6 @@ stores.inject(MyMetaStore, storeInstance);
       .add("LinkEditor", LinkEditorPopoverBuilder)
       .add("FilterMenu", FilterMenuPopoverBuilder);
 
-  /**
-   * Create a function used to create a Chart based on the definition
-   */
-  function chartFactory(getters) {
-      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-      function createChart(id, definition, sheetId) {
-          const builder = builders.find((builder) => builder.match(definition.type));
-          if (!builder) {
-              throw new Error(`No builder for this chart: ${definition.type}`);
-          }
-          return builder.createChart(definition, sheetId, getters);
-      }
-      return createChart;
-  }
-  /**
-   * Create a function used to create a Chart Runtime based on the chart class
-   * instance
-   */
-  function chartRuntimeFactory(getters) {
-      const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-      function createRuntimeChart(chart) {
-          const builder = builders.find((builder) => builder.match(chart.type));
-          if (!builder) {
-              throw new Error("No runtime builder for this chart.");
-          }
-          return builder.getChartRuntime(chart, getters);
-      }
-      return createRuntimeChart;
-  }
-  /**
-   * Validate the chart definition given in arguments
-   */
-  function validateChartDefinition(validator, definition) {
-      const validators = chartRegistry.getAll().find((validator) => validator.match(definition.type));
-      if (!validators) {
-          throw new Error("Unknown chart type.");
-      }
-      return validators.validateChartDefinition(validator, definition);
-  }
-  /**
-   * Get a new chart definition transformed with the executed command. This
-   * functions will be called during operational transform process
-   */
-  function transformDefinition(definition, executed) {
-      const transformation = chartRegistry.getAll().find((factory) => factory.match(definition.type));
-      if (!transformation) {
-          throw new Error("Unknown chart type.");
-      }
-      return transformation.transformDefinition(definition, executed);
-  }
-  /**
-   * Return a "smart" chart definition in the given zone. The definition is "smart" because it will
-   * use the best type of chart to display the data of the zone.
-   *
-   * It will also try to find labels and datasets in the range, and try to find title for the datasets.
-   *
-   * The type of chart will be :
-   * - If the zone is a single non-empty cell, returns a scorecard
-   * - If the all the labels are numbers/date, returns a line chart
-   * - Else returns a bar chart
-   */
-  function getSmartChartDefinition(zone, getters) {
-      const sheetId = getters.getActiveSheetId();
-      let dataSetZone = zone;
-      const singleColumn = zoneToDimension(zone).numberOfCols === 1;
-      if (!singleColumn) {
-          dataSetZone = { ...zone, left: zone.left + 1 };
-      }
-      const dataRange = zoneToXc(getters.getUnboundedZone(sheetId, dataSetZone));
-      const dataSets = [{ dataRange, yAxisId: "y" }];
-      const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
-      if (getZoneArea(zone) === 1 && topLeftCell?.content) {
-          return {
-              type: "scorecard",
-              title: {},
-              background: topLeftCell.style?.fillColor || undefined,
-              keyValue: zoneToXc(zone),
-              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
-              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
-              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
-          };
-      }
-      const cellsInFirstRow = getters.getEvaluatedCellsInZone(sheetId, {
-          ...dataSetZone,
-          bottom: dataSetZone.top,
-      });
-      const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
-      let labelRangeXc;
-      if (!singleColumn) {
-          labelRangeXc = zoneToXc(getters.getUnboundedZone(sheetId, { ...zone, right: zone.left }));
-      }
-      // Only display legend for several datasets.
-      const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
-      const lineChartDefinition = {
-          title: {},
-          dataSets,
-          labelsAsText: false,
-          stacked: false,
-          aggregated: false,
-          cumulative: false,
-          labelRange: labelRangeXc,
-          type: "line",
-          dataSetsHaveTitle,
-          legendPosition: newLegendPos,
-      };
-      const chart = new LineChart(lineChartDefinition, sheetId, getters);
-      if (canChartParseLabels(lineChartDefinition, chart.dataSets, chart.labelRange, getters)) {
-          return lineChartDefinition;
-      }
-      const _dataSets = createDataSets(getters, dataSets, sheetId, dataSetsHaveTitle);
-      if (singleColumn &&
-          getData(getters, _dataSets[0]).every((e) => typeof e === "string" && !isEvaluationError(e))) {
-          return {
-              title: {},
-              dataSets: [{ dataRange }],
-              aggregated: true,
-              labelRange: dataRange,
-              type: "pie",
-              legendPosition: "top",
-              dataSetsHaveTitle: false,
-          };
-      }
-      return {
-          title: {},
-          dataSets,
-          labelRange: labelRangeXc,
-          type: "bar",
-          stacked: false,
-          aggregated: false,
-          dataSetsHaveTitle,
-          legendPosition: newLegendPos,
-      };
-  }
-
-  var CHART_HELPERS = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AbstractChart: AbstractChart,
-    BarChart: BarChart,
-    CHART_AXIS_CHOICES: CHART_AXIS_CHOICES,
-    CHART_COMMON_OPTIONS: CHART_COMMON_OPTIONS,
-    GaugeChart: GaugeChart,
-    LineChart: LineChart,
-    PieChart: PieChart,
-    ScorecardChart: ScorecardChart$1,
-    TREND_LINE_XAXIS_ID: TREND_LINE_XAXIS_ID,
-    WaterfallChart: WaterfallChart,
-    adaptChartRange: adaptChartRange,
-    chartFactory: chartFactory,
-    chartFontColor: chartFontColor,
-    chartMutedFontColor: chartMutedFontColor,
-    chartRuntimeFactory: chartRuntimeFactory,
-    chartToImage: chartToImage,
-    checkDataset: checkDataset,
-    checkLabelRange: checkLabelRange,
-    createBarChartRuntime: createBarChartRuntime,
-    createDataSets: createDataSets,
-    createGaugeChartRuntime: createGaugeChartRuntime,
-    createLineChartRuntime: createLineChartRuntime,
-    createPieChartRuntime: createPieChartRuntime,
-    createScorecardChartRuntime: createScorecardChartRuntime,
-    createWaterfallChartRuntime: createWaterfallChartRuntime,
-    drawScoreChart: drawScoreChart,
-    duplicateDataSetsInDuplicatedSheet: duplicateDataSetsInDuplicatedSheet,
-    duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
-    formatChartDatasetValue: formatChartDatasetValue,
-    formatTickValue: formatTickValue,
-    getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
-    getDefinedAxis: getDefinedAxis,
-    getPieColors: getPieColors,
-    getSmartChartDefinition: getSmartChartDefinition,
-    shouldRemoveFirstLabel: shouldRemoveFirstLabel,
-    toExcelDataset: toExcelDataset,
-    toExcelLabelRange: toExcelLabelRange,
-    transformChartDefinitionWithDataSetsWithZone: transformChartDefinitionWithDataSetsWithZone,
-    transformDefinition: transformDefinition,
-    truncateLabel: truncateLabel,
-    updateChartRangesWithDataSets: updateChartRangesWithDataSets,
-    validateChartDefinition: validateChartDefinition
-  });
-
   /**
    * Create a table on the selected zone, with UI warnings to the user if the creation fails.
    * If a single cell is selected, expand the selection to non-empty adjacent cells to create a table.
@@ -34142,11 +34669,12 @@ stores.inject(MyMetaStore, storeInstance);
       const osClipboard = await env.clipboard.read();
       switch (osClipboard.status) {
           case "ok":
-              const clipboardContent = parseOSClipboardContent(osClipboard.content);
-              const clipboardId = clipboardContent.data?.clipboardId;
+              const clipboardId = env.model.getters.getClipboardId();
+              const osClipboardContent = parseOSClipboardContent(osClipboard.content);
+              const osClipboardId = osClipboardContent.data?.clipboardId;
               const target = env.model.getters.getSelectedZones();
-              if (env.model.getters.getClipboardId() !== clipboardId) {
-                  interactivePasteFromOS(env, target, clipboardContent, pasteOption);
+              if (clipboardId !== osClipboardId) {
+                  await interactivePasteFromOS(env, target, osClipboardContent, pasteOption);
               }
               else {
                   interactivePaste(env, target, pasteOption);
@@ -34506,7 +35034,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       catch {
           env.raiseError(_t("An unexpected error occurred during the image transfer"));
-          return undefined;
+          return;
       }
   }
   const CREATE_IMAGE = async (env) => {
@@ -34515,7 +35043,7 @@ stores.inject(MyMetaStore, storeInstance);
           const figureId = env.model.uuidGenerator.smallUuid();
           const image = await requestImage(env);
           if (!image) {
-              throw new Error("No image provider was given to the environment");
+              return;
           }
           const size = getMaxFigureSize(env.model.getters, image.size);
           const position = centerFigurePosition(env.model.getters, size);
@@ -34657,7 +35185,7 @@ stores.inject(MyMetaStore, storeInstance);
       isReadonlyAllowed: true,
       execute: async (env) => {
           env.model.dispatch("COPY");
-          await env.clipboard.write(env.model.getters.getClipboardContent());
+          await env.clipboard.write(await env.model.getters.getClipboardTextAndImageContent());
       },
       icon: "o-spreadsheet-Icon.CLIPBOARD",
   };
@@ -34666,7 +35194,7 @@ stores.inject(MyMetaStore, storeInstance);
       description: "Ctrl+X",
       execute: async (env) => {
           interactiveCut(env);
-          await env.clipboard.write(env.model.getters.getClipboardContent());
+          await env.clipboard.write(await env.model.getters.getClipboardTextAndImageContent());
       },
       icon: "o-spreadsheet-Icon.CUT",
   };
@@ -34703,7 +35231,7 @@ stores.inject(MyMetaStore, storeInstance);
   };
   const deleteValues = {
       name: _t("Delete values"),
-      execute: (env) => env.model.dispatch("DELETE_CONTENT", {
+      execute: (env) => env.model.dispatch("DELETE_UNFILTERED_CONTENT", {
           sheetId: env.model.getters.getActiveSheetId(),
           target: env.model.getters.getSelectedZones(),
       }),
@@ -34805,32 +35333,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  var ACTION_EDIT = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    clearCols: clearCols,
-    clearRows: clearRows,
-    copy: copy,
-    cut: cut,
-    deleteCellShiftLeft: deleteCellShiftLeft,
-    deleteCellShiftUp: deleteCellShiftUp,
-    deleteCells: deleteCells,
-    deleteCol: deleteCol,
-    deleteCols: deleteCols,
-    deleteRow: deleteRow,
-    deleteRows: deleteRows,
-    deleteTable: deleteTable,
-    deleteValues: deleteValues,
-    editTable: editTable,
-    findAndReplace: findAndReplace,
-    mergeCells: mergeCells,
-    paste: paste,
-    pasteSpecial: pasteSpecial,
-    pasteSpecialFormat: pasteSpecialFormat,
-    pasteSpecialValue: pasteSpecialValue,
-    redo: redo,
-    undo: undo
-  });
-
   const insertRow = {
       name: (env) => {
           const number = getRowsNumber(env);
@@ -35474,21 +35976,6 @@ stores.inject(MyMetaStore, storeInstance);
       isVisible: (env) => env.model.getters.getPivotIds().some((id) => env.model.getters.getPivot(id).isValid()),
   };
 
-  var ACTION_DATA = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    createRemoveFilter: createRemoveFilter,
-    createRemoveFilterTool: createRemoveFilterTool,
-    dataCleanup: dataCleanup,
-    reinsertDynamicPivotMenu: reinsertDynamicPivotMenu,
-    reinsertStaticPivotMenu: reinsertStaticPivotMenu,
-    removeDuplicates: removeDuplicates,
-    sortAscending: sortAscending,
-    sortDescending: sortDescending,
-    sortRange: sortRange,
-    splitToColumns: splitToColumns,
-    trimWhitespace: trimWhitespace
-  });
-
   /**
    * Create a format action specification for a given format.
    * The format can be dynamically computed from the environment.
@@ -35631,7 +36118,7 @@ stores.inject(MyMetaStore, storeInstance);
       format: "mmm yyyy",
       descriptionValue: EXAMPLE_DATE,
   });
-  const incraseDecimalPlaces = {
+  const increaseDecimalPlaces = {
       name: _t("Increase decimal places"),
       icon: "o-spreadsheet-Icon.INCREASE_DECIMAL",
       execute: (env) => env.model.dispatch("SET_DECIMAL", {
@@ -35640,7 +36127,7 @@ stores.inject(MyMetaStore, storeInstance);
           step: 1,
       }),
   };
-  const decraseDecimalPlaces = {
+  const decreaseDecimalPlaces = {
       name: _t("Decrease decimal places"),
       icon: "o-spreadsheet-Icon.DECRASE_DECIMAL",
       execute: (env) => env.model.dispatch("SET_DECIMAL", {
@@ -35758,14 +36245,14 @@ stores.inject(MyMetaStore, storeInstance);
       isActive: (env) => getWrappingMode(env) === "clip",
       icon: "o-spreadsheet-Icon.WRAPPING_CLIP",
   };
-  const textColor = {
+  ({
       name: _t("Text Color"),
       icon: "o-spreadsheet-Icon.TEXT_COLOR",
-  };
-  const fillColor = {
+  });
+  ({
       name: _t("Fill Color"),
       icon: "o-spreadsheet-Icon.FILL_COLOR",
-  };
+  });
   const formatCF = {
       name: _t("Conditional formatting"),
       execute: OPEN_CF_SIDEPANEL_ACTION,
@@ -35867,60 +36354,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    EXAMPLE_DATE: EXAMPLE_DATE,
-    clearFormat: clearFormat,
-    createFormatActionSpec: createFormatActionSpec,
-    decraseDecimalPlaces: decraseDecimalPlaces,
-    fillColor: fillColor,
-    formatAlignment: formatAlignment,
-    formatAlignmentBottom: formatAlignmentBottom,
-    formatAlignmentCenter: formatAlignmentCenter,
-    formatAlignmentHorizontal: formatAlignmentHorizontal,
-    formatAlignmentLeft: formatAlignmentLeft,
-    formatAlignmentMiddle: formatAlignmentMiddle,
-    formatAlignmentRight: formatAlignmentRight,
-    formatAlignmentTop: formatAlignmentTop,
-    formatAlignmentVertical: formatAlignmentVertical,
-    formatBold: formatBold,
-    formatCF: formatCF,
-    formatCustomCurrency: formatCustomCurrency,
-    formatFontSize: formatFontSize,
-    formatItalic: formatItalic,
-    formatNumberAccounting: formatNumberAccounting,
-    formatNumberAutomatic: formatNumberAutomatic,
-    formatNumberCurrency: formatNumberCurrency,
-    formatNumberCurrencyRounded: formatNumberCurrencyRounded,
-    formatNumberDate: formatNumberDate,
-    formatNumberDateTime: formatNumberDateTime,
-    formatNumberDayAndFullMonth: formatNumberDayAndFullMonth,
-    formatNumberDayAndShortMonth: formatNumberDayAndShortMonth,
-    formatNumberDuration: formatNumberDuration,
-    formatNumberFullDateTime: formatNumberFullDateTime,
-    formatNumberFullMonth: formatNumberFullMonth,
-    formatNumberFullQuarter: formatNumberFullQuarter,
-    formatNumberFullWeekDayAndMonth: formatNumberFullWeekDayAndMonth,
-    formatNumberNumber: formatNumberNumber,
-    formatNumberPercent: formatNumberPercent,
-    formatNumberPlainText: formatNumberPlainText,
-    formatNumberQuarter: formatNumberQuarter,
-    formatNumberShortMonth: formatNumberShortMonth,
-    formatNumberShortWeekDay: formatNumberShortWeekDay,
-    formatNumberTime: formatNumberTime,
-    formatPercent: formatPercent,
-    formatStrikethrough: formatStrikethrough,
-    formatUnderline: formatUnderline,
-    formatWrapping: formatWrapping,
-    formatWrappingClip: formatWrappingClip,
-    formatWrappingIcon: formatWrappingIcon,
-    formatWrappingOverflow: formatWrappingOverflow,
-    formatWrappingWrap: formatWrappingWrap,
-    incraseDecimalPlaces: incraseDecimalPlaces,
-    moreFormats: moreFormats,
-    textColor: textColor
-  });
-
   function interactiveFreezeColumnsRows(env, dimension, base) {
       const sheetId = env.model.getters.getActiveSheetId();
       const cmd = dimension === "COL" ? "FREEZE_COLUMNS" : "FREEZE_ROWS";
@@ -37874,6 +38307,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       updateColors(colors) {
           this.colors = colors;
+          const colorGenerator = new ColorGenerator(this.ranges.length, this.colors);
+          this.ranges = this.ranges.map((range) => ({
+              ...range,
+              color: colorGenerator.next(),
+          }));
       }
       confirm() {
           for (const range of this.selectionInputs) {
@@ -37908,12 +38346,11 @@ stores.inject(MyMetaStore, storeInstance);
        * e.g. ["A1", "Sheet2!B3", "E12"]
        */
       get selectionInputs() {
-          const generator = new ColorGenerator(this.ranges.length, this.colors);
           return this.ranges.map((input, index) => Object.assign({}, input, {
               color: this.hasMainFocus &&
                   this.focusedRangeIndex !== null &&
                   this.getters.isRangeValid(input.xc)
-                  ? generator.next()
+                  ? input.color
                   : null,
               isFocused: this.hasMainFocus && this.focusedRangeIndex === index,
               isValidRange: input.xc === "" || this.getters.isRangeValid(input.xc),
@@ -38183,10 +38620,10 @@ stores.inject(MyMetaStore, storeInstance);
                   if (originalIndex === finalIndex) {
                       return;
                   }
-                  const draggedItems = [...draggableIds];
-                  draggedItems.splice(originalIndex, 1);
-                  draggedItems.splice(finalIndex, 0, rangeId);
-                  this.props.onSelectionReordered?.(this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id)));
+                  const indexes = range(0, draggableIds.length);
+                  indexes.splice(originalIndex, 1);
+                  indexes.splice(finalIndex, 0, originalIndex);
+                  this.props.onSelectionReordered?.(indexes);
                   this.props.onSelectionConfirmed?.();
                   this.store.confirm();
               },
@@ -39013,8 +39450,12 @@ stores.inject(MyMetaStore, storeInstance);
           currentFontSize: Number,
           onFontSizeChanged: Function,
           onToggle: { type: Function, optional: true },
+          onFocusInput: { type: Function, optional: true },
           class: String,
       };
+      static defaultProps = {
+          onFocusInput: () => { },
+      };
       static components = { Popover };
       fontSizes = FONT_SIZES;
       dropdown = owl.useState({ isOpen: false });
@@ -39707,6 +40148,36 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class FunnelChartDesignPanel extends owl.Component {
+      static template = "o-spreadsheet-FunnelChartDesignPanel";
+      static components = {
+          GeneralDesignEditor,
+          SidePanelCollapsible,
+          RoundColorPicker,
+          Section,
+          Checkbox,
+      };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
+      getFunnelColorItems() {
+          const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+          const labels = (runtime.chartJsConfig.data.labels || []);
+          const colors = getFunnelLabelColors(labels, this.props.definition.funnelColors);
+          return labels.map((label, index) => ({
+              label: label || _t("Value %s", index + 1),
+              color: colors[index],
+          }));
+      }
+      updateFunnelItemColor(index, color) {
+          const funnelColors = replaceItemAtIndex(this.props.definition.funnelColors || [], color, index);
+          this.props.updateChart(this.props.figureId, { funnelColors });
+      }
+  }
+
   class GaugeChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartConfigPanel";
       static components = { ChartErrorSection, ChartDataSeries };
@@ -40194,8 +40665,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40246,10 +40716,11 @@ stores.inject(MyMetaStore, storeInstance);
       });
       compositionActive = false;
       spreadsheetRect = useSpreadsheetRect();
-      get assistantStyle() {
+      get assistantStyleProperties() {
           const composerRect = this.composerRef.el.getBoundingClientRect();
           const assistantStyle = {};
-          assistantStyle["min-width"] = `${this.props.rect?.width || ASSISTANT_WIDTH}px`;
+          const minWidth = Math.min(this.props.rect?.width || Infinity, ASSISTANT_WIDTH);
+          assistantStyle["min-width"] = `${minWidth}px`;
           const proposals = this.autoCompleteState.provider?.proposals;
           const proposalsHaveDescription = proposals?.some((proposal) => proposal.description);
           if (this.functionDescriptionState.showDescription || proposalsHaveDescription) {
@@ -40273,13 +40744,29 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
           else {
-              assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom}px`;
+              assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom - 1}px`; // -1: margin
               if (composerRect.left + ASSISTANT_WIDTH + SCROLLBAR_WIDTH + CLOSE_ICON_RADIUS >
                   this.spreadsheetRect.width) {
                   assistantStyle.right = `${CLOSE_ICON_RADIUS}px`;
               }
           }
-          return cssPropertiesToCss(assistantStyle);
+          return assistantStyle;
+      }
+      get assistantStyle() {
+          const allProperties = this.assistantStyleProperties;
+          return cssPropertiesToCss({
+              "max-height": allProperties["max-height"],
+              width: allProperties["width"],
+              "min-width": allProperties["min-width"],
+          });
+      }
+      get assistantContainerStyle() {
+          const allProperties = this.assistantStyleProperties;
+          return cssPropertiesToCss({
+              top: allProperties["top"],
+              right: allProperties["right"],
+              transform: allProperties["transform"],
+          });
       }
       // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
       shouldProcessInputEvents = false;
@@ -41464,6 +41951,10 @@ stores.inject(MyMetaStore, storeInstance);
       .add("geo", {
       configuration: GeoChartConfigPanel,
       design: GeoChartDesignPanel,
+  })
+      .add("funnel", {
+      configuration: GenericChartConfigPanel,
+      design: FunnelChartDesignPanel,
   });
 
   css /* scss */ `
@@ -46760,9 +47251,7 @@ stores.inject(MyMetaStore, storeInstance);
                   pivot: this.draft,
               });
               this.draft = null;
-              if (!this.alreadyNotified &&
-                  !this.isDynamicPivotInViewport() &&
-                  this.isStaticPivotInViewport()) {
+              if (!this.alreadyNotified && this.isUpdatedPivotVisibleInViewportOnlyAsStaticPivot()) {
                   const formulaId = this.getters.getPivotFormulaId(this.pivotId);
                   const pivotExample = `=PIVOT(${formulaId})`;
                   this.alreadyNotified = true;
@@ -46818,26 +47307,33 @@ stores.inject(MyMetaStore, storeInstance);
               this.applyUpdate();
           }
       }
-      isDynamicPivotInViewport() {
-          for (const position of this.getters.getVisibleCellPositions()) {
-              const isDynamicPivot = this.getters.isSpillPivotFormula(position);
-              if (isDynamicPivot) {
-                  return true;
-              }
-          }
-          return false;
-      }
-      isStaticPivotInViewport() {
+      /**
+       * @returns true if the updated pivot is visible in the viewport only as a
+       * static pivot and not as a dynamic pivot
+       */
+      isUpdatedPivotVisibleInViewportOnlyAsStaticPivot() {
+          let staticPivotCount = 0;
+          const updatedPivotFormulaId = this.getters.getPivotFormulaId(this.pivotId);
           for (const position of this.getters.getVisibleCellPositions()) {
               const cell = this.getters.getCell(position);
               if (cell?.isFormula) {
                   const pivotFunction = getFirstPivotFunction(cell.compiledFormula.tokens);
-                  if (pivotFunction && pivotFunction.functionName !== "PIVOT") {
-                      return true;
+                  const pivotFormulaId = pivotFunction?.args[0]?.value;
+                  if (pivotFunction && updatedPivotFormulaId === pivotFormulaId.toString()) {
+                      if (pivotFunction.functionName === "PIVOT") {
+                          // if we have at least one dynamic pivot visible inserted the viewport
+                          // we return false
+                          return false;
+                      }
+                      else {
+                          staticPivotCount++;
+                      }
                   }
               }
           }
-          return false;
+          // we return true if there are only static pivots visible inserted the viewport,
+          // otherwise false
+          return staticPivotCount > 0;
       }
       addDefaultDateTimeGranularity(fields, definition) {
           const { columns, rows } = definition;
@@ -47013,6 +47509,7 @@ stores.inject(MyMetaStore, storeInstance);
           columns: {},
       });
       setup() {
+          owl.onMounted(() => this.updateColumns());
           owl.onWillUpdateProps(() => this.updateColumns());
       }
       toggleHasHeader() {
@@ -52313,13 +52810,13 @@ stores.inject(MyMetaStore, storeInstance);
                   : this.onComposerContentFocused();
           },
           Delete: () => {
-              this.env.model.dispatch("DELETE_CONTENT", {
+              this.env.model.dispatch("DELETE_UNFILTERED_CONTENT", {
                   sheetId: this.env.model.getters.getActiveSheetId(),
                   target: this.env.model.getters.getSelectedZones(),
               });
           },
           Backspace: () => {
-              this.env.model.dispatch("DELETE_CONTENT", {
+              this.env.model.dispatch("DELETE_UNFILTERED_CONTENT", {
                   sheetId: this.env.model.getters.getActiveSheetId(),
                   target: this.env.model.getters.getSelectedZones(),
               });
@@ -52662,11 +53159,8 @@ stores.inject(MyMetaStore, storeInstance);
           else {
               this.env.model.dispatch("COPY");
           }
-          const content = this.env.model.getters.getClipboardContent();
-          const clipboardData = ev.clipboardData;
-          for (const type in content) {
-              clipboardData?.setData(type, content[type]);
-          }
+          const osContent = await this.env.model.getters.getClipboardTextAndImageContent();
+          await this.env.clipboard.write(osContent);
           ev.preventDefault();
       }
       async paste(ev) {
@@ -52678,21 +53172,27 @@ stores.inject(MyMetaStore, storeInstance);
           if (!clipboardData) {
               return;
           }
+          const image = [...clipboardData?.files]?.find((file) => AllowedImageMimeTypes.includes(file.type));
           const osClipboard = {
               content: {
                   [ClipboardMIMEType.PlainText]: clipboardData?.getData(ClipboardMIMEType.PlainText),
                   [ClipboardMIMEType.Html]: clipboardData?.getData(ClipboardMIMEType.Html),
               },
           };
+          if (image) {
+              // TODO: support import of multiple images
+              osClipboard.content[image.type] = image;
+          }
           const target = this.env.model.getters.getSelectedZones();
           const isCutOperation = this.env.model.getters.isCutOperation();
-          const clipboardContent = parseOSClipboardContent(osClipboard.content);
-          const clipboardId = clipboardContent.data?.clipboardId;
-          if (this.env.model.getters.getClipboardId() === clipboardId) {
+          const clipboardId = this.env.model.getters.getClipboardId();
+          const osClipboardContent = parseOSClipboardContent(osClipboard.content);
+          const osClipboardId = osClipboardContent.data?.clipboardId;
+          if (clipboardId === osClipboardId) {
               interactivePaste(this.env, target);
           }
           else {
-              interactivePasteFromOS(this.env, target, clipboardContent);
+              await interactivePasteFromOS(this.env, target, osClipboardContent);
           }
           if (isCutOperation) {
               await this.env.clipboard.write({ [ClipboardMIMEType.PlainText]: "" });
@@ -54338,25 +54838,57 @@ stores.inject(MyMetaStore, storeInstance);
           "getAdaptedCfRanges",
       ];
       cfRules = {};
-      loopThroughRangesOfSheet(sheetId, applyChange) {
-          for (const rule of this.cfRules[sheetId]) {
-              if (rule.rule.type === "DataBarRule" && rule.rule.rangeValues) {
-                  const change = applyChange(rule.rule.rangeValues);
-                  switch (change.changeType) {
-                      case "REMOVE":
-                          this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
-                          //@ts-expect-error
-                          "rangeValues", undefined);
-                          break;
-                      case "RESIZE":
-                      case "MOVE":
-                      case "CHANGE":
+      adaptCFFormulas(applyChange) {
+          for (const sheetId in this.cfRules) {
+              for (const rule of this.cfRules[sheetId]) {
+                  if (rule.rule.type === "DataBarRule" && rule.rule.rangeValues) {
+                      const change = applyChange(rule.rule.rangeValues);
+                      switch (change.changeType) {
+                          case "REMOVE":
+                              this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
+                              //@ts-expect-error
+                              "rangeValues", undefined);
+                              break;
+                          case "RESIZE":
+                          case "MOVE":
+                          case "CHANGE":
+                              this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
+                              //@ts-expect-error
+                              "rangeValues", change.range);
+                              break;
+                      }
+                  }
+                  else if (rule.rule.type === "CellIsRule") {
+                      for (let i = 0; i < rule.rule.values.length; i++) {
                           this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
                           //@ts-expect-error
-                          "rangeValues", change.range);
-                          break;
+                          "values", i, this.getters.adaptFormulaStringDependencies(sheetId, rule.rule.values[i], applyChange));
+                      }
+                  }
+                  else if (rule.rule.type === "IconSetRule") {
+                      for (const inflectionPoint of ["lowerInflectionPoint", "upperInflectionPoint"]) {
+                          if (rule.rule[inflectionPoint].type === "formula") {
+                              this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
+                              //@ts-expect-error
+                              inflectionPoint, "value", this.getters.adaptFormulaStringDependencies(sheetId, rule.rule[inflectionPoint].value, applyChange));
+                          }
+                      }
+                  }
+                  else if (rule.rule.type === "ColorScaleRule") {
+                      for (const value of ["minimum", "maximum", "midpoint"]) {
+                          const ruleValue = rule.rule[value];
+                          if (ruleValue?.type === "formula" && ruleValue?.value) {
+                              this.history.update("cfRules", sheetId, this.cfRules[sheetId].indexOf(rule), "rule", 
+                              //@ts-expect-error
+                              value, "value", this.getters.adaptFormulaStringDependencies(sheetId, ruleValue.value, applyChange));
+                          }
+                      }
                   }
               }
+          }
+      }
+      adaptCFRanges(sheetId, applyChange) {
+          for (const rule of this.cfRules[sheetId]) {
               for (const range of rule.ranges) {
                   const change = applyChange(range);
                   switch (change.changeType) {
@@ -54380,14 +54912,11 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       adaptRanges(applyChange, sheetId) {
-          if (sheetId) {
-              this.loopThroughRangesOfSheet(sheetId, applyChange);
-          }
-          else {
-              for (const sheetId of Object.keys(this.cfRules)) {
-                  this.loopThroughRangesOfSheet(sheetId, applyChange);
-              }
+          const sheetIds = sheetId ? [sheetId] : Object.keys(this.cfRules);
+          for (const sheetId of sheetIds) {
+              this.adaptCFRanges(sheetId, applyChange);
           }
+          this.adaptCFFormulas(applyChange);
       }
       // ---------------------------------------------------------------------------
       // Command Handling
@@ -54781,10 +55310,23 @@ stores.inject(MyMetaStore, storeInstance);
       adaptRanges(applyChange, sheetId) {
           const sheetIds = sheetId ? [sheetId] : Object.keys(this.rules);
           for (const sheetId of sheetIds) {
-              this.loopThroughRangesOfSheet(sheetId, applyChange);
+              this.adaptDVRanges(sheetId, applyChange);
+          }
+          this.adaptDVFormulas(applyChange);
+      }
+      adaptDVFormulas(applyChange) {
+          for (const sheetId in this.rules) {
+              const rules = this.rules[sheetId];
+              for (let ruleIndex = rules.length - 1; ruleIndex >= 0; ruleIndex--) {
+                  const rule = this.rules[sheetId][ruleIndex];
+                  for (let valueIndex = 0; valueIndex < rule.criterion.values.length; valueIndex++) {
+                      const value = this.getters.adaptFormulaStringDependencies(sheetId, rule.criterion.values[valueIndex], applyChange);
+                      this.history.update("rules", sheetId, ruleIndex, "criterion", "values", valueIndex, value);
+                  }
+              }
           }
       }
-      loopThroughRangesOfSheet(sheetId, applyChange) {
+      adaptDVRanges(sheetId, applyChange) {
           const rules = this.rules[sheetId];
           for (let ruleIndex = rules.length - 1; ruleIndex >= 0; ruleIndex--) {
               const rule = this.rules[sheetId][ruleIndex];
@@ -60691,6 +61233,7 @@ stores.inject(MyMetaStore, storeInstance);
       exportForExcel(data) {
           for (const sheet of data.sheets) {
               sheet.cellValues = {};
+              sheet.formulaSpillRanges = {};
           }
           for (const position of this.evaluator.getEvaluatedPositions()) {
               const evaluatedCell = this.evaluator.getEvaluatedCell(position);
@@ -60702,8 +61245,9 @@ stores.inject(MyMetaStore, storeInstance);
               const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
               const formulaCell = this.getCorrespondingFormulaCell(position);
               if (formulaCell) {
+                  const cell = this.getters.getCell(position);
                   isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
-                  isFormula = isExported;
+                  isFormula = isExported && cell?.content === formulaCell.content;
                   // If the cell contains a non-exported formula and that is evaluates to
                   // nothing* ,we don't export it.
                   // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
@@ -60726,7 +61270,11 @@ stores.inject(MyMetaStore, storeInstance);
                   content = !isExported ? newContent : exportedCellData;
               }
               exportedSheetData.cells[xc] = content;
-              exportedSheetData.cellValues[xc] = value;
+              exportedSheetData.cellValues[xc] = evaluatedCell.type !== "error" ? value : undefined;
+              const spillZone = this.getSpreadZone(position);
+              if (spillZone) {
+                  exportedSheetData.formulaSpillRanges[xc] = this.getters.getRangeString(this.getters.getRangeFromZone(position.sheetId, spillZone), position.sheetId);
+              }
           }
       }
       /**
@@ -61021,7 +61569,7 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       const type = this.getters.getChartType(figureId);
                       const runtime = this.getters.getChartRuntime(figureId);
-                      const img = chartToImage(runtime, figure, type);
+                      const img = chartToImageUrl(runtime, figure, type);
                       if (img) {
                           sheet.images.push({
                               ...figure,
@@ -62954,7 +63502,7 @@ stores.inject(MyMetaStore, storeInstance);
       getRule(cell, cells) {
           const rules = autofillRulesRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
           const rule = rules.find((rule) => rule.condition(cell, cells));
-          return rule && rule.generateRule(cell, cells);
+          return rule && this.direction && rule.generateRule(cell, cells, this.direction);
       }
       /**
        * Create the generator to be able to autofill the next cells.
@@ -65109,6 +65657,17 @@ stores.inject(MyMetaStore, storeInstance);
                       sheetId: cmd.sheetId,
                   });
                   break;
+              case "DELETE_UNFILTERED_CONTENT":
+                  const newTarget = [];
+                  for (const target of cmd.target) {
+                      const nonFilteredRows = range(target.top, target.bottom + 1).filter((row) => !this.getters.isRowFiltered(cmd.sheetId, row));
+                      const consecutiveRows = groupConsecutive(nonFilteredRows);
+                      for (const group of consecutiveRows) {
+                          newTarget.push({ ...target, top: group[0], bottom: group[group.length - 1] });
+                      }
+                  }
+                  this.dispatch("DELETE_CONTENT", { sheetId: cmd.sheetId, target: newTarget });
+                  break;
           }
       }
       // ---------------------------------------------------------------------------
@@ -65748,6 +66307,7 @@ stores.inject(MyMetaStore, storeInstance);
   repeatLocalCommandTransformRegistry.add("SORT_CELLS", repeatSortCellsCommand);
   repeatLocalCommandTransformRegistry.add("SUM_SELECTION", genericRepeat);
   repeatLocalCommandTransformRegistry.add("SET_DECIMAL", genericRepeat);
+  repeatLocalCommandTransformRegistry.add("DELETE_UNFILTERED_CONTENT", genericRepeat);
   function genericRepeat(getters, command) {
       let transformedCommand = deepCopy(command);
       for (const repeatTransform of genericRepeatsTransforms) {
@@ -66186,6 +66746,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
   /**
    * Clipboard Plugin
    *
@@ -66195,7 +66756,7 @@ stores.inject(MyMetaStore, storeInstance);
   class ClipboardPlugin extends UIPlugin {
       static layers = ["Clipboard"];
       static getters = [
-          "getClipboardContent",
+          "getClipboardTextAndImageContent",
           "getClipboardId",
           "getClipboardTextContent",
           "isCutOperation",
@@ -66205,6 +66766,13 @@ stores.inject(MyMetaStore, storeInstance);
       copiedData;
       _isCutOperation = false;
       clipboardId = new UuidGenerator().uuidv4();
+      fileStore;
+      uuidGenerator;
+      constructor(config) {
+          super(config);
+          this.fileStore = config.external.fileStore;
+          this.uuidGenerator = new UuidGenerator();
+      }
       // ---------------------------------------------------------------------------
       // Command Handling
       // ---------------------------------------------------------------------------
@@ -66267,9 +66835,29 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               case "PASTE_FROM_OS_CLIPBOARD": {
                   this._isCutOperation = false;
-                  this.copiedData =
-                      cmd.clipboardContent.data ||
-                          this.convertTextToClipboardData(cmd.clipboardContent.text ?? "");
+                  const htmlData = cmd.clipboardContent.data;
+                  // TODO: support multiple image import
+                  if (cmd.clipboardContent.imageData) {
+                      const sheetId = this.getters.getActiveSheetId();
+                      const figureId = this.uuidGenerator.uuidv4();
+                      const definition = cmd.clipboardContent.imageData;
+                      // compute position based on current selection
+                      const { x, y } = this.getters.getVisibleRectWithoutHeaders(cmd.target[0]);
+                      const size = getMaxFigureSize(this.getters, definition.size);
+                      this.dispatch("CREATE_IMAGE", {
+                          definition,
+                          size,
+                          position: { x, y },
+                          sheetId,
+                          figureId,
+                      });
+                  }
+                  if (htmlData) {
+                      this.copiedData = htmlData;
+                  }
+                  else {
+                      this.copiedData = this.convertTextToClipboardData(cmd.clipboardContent.text ?? "");
+                  }
                   const pasteOption = cmd.pasteOption;
                   this.paste(cmd.target, this.copiedData, {
                       pasteOption,
@@ -66277,6 +66865,7 @@ stores.inject(MyMetaStore, storeInstance);
                       isCutOperation: false,
                   });
                   this.status = "invisible";
+                  this.copiedData = undefined;
                   break;
               }
               case "PASTE": {
@@ -66569,11 +67158,17 @@ stores.inject(MyMetaStore, storeInstance);
       getClipboardId() {
           return this.clipboardId;
       }
-      getClipboardContent() {
-          return {
+      async getClipboardTextAndImageContent() {
+          const file = await this.getImageContent();
+          const mime = file?.type;
+          const content = {
               [ClipboardMIMEType.PlainText]: this.getPlainTextContent(),
-              [ClipboardMIMEType.Html]: this.getHTMLContent(),
+              [ClipboardMIMEType.Html]: await this.getHTMLContent(),
           };
+          if (mime && file) {
+              content[mime] = file;
+          }
+          return content;
       }
       getSheetData() {
           const data = {
@@ -66602,11 +67197,24 @@ stores.inject(MyMetaStore, storeInstance);
           })
               .join("\n") || "\t");
       }
-      getHTMLContent() {
+      async getHTMLContent() {
           let innerHTML = "";
           const cells = this.copiedData?.cells;
           if (!cells) {
-              innerHTML = "\t";
+              if (this.copiedData?.figureId) {
+                  const figureId = this.copiedData.figureId;
+                  const figureSheetId = this.getters.getFigureSheetId(figureId);
+                  const figure = this.getters.getFigure(figureSheetId, figureId);
+                  if (figure.tag == "image") {
+                      innerHTML = await this.craftImageHTML(figureId);
+                  }
+                  else {
+                      innerHTML = "\t";
+                  }
+              }
+              else {
+                  innerHTML = "\t";
+              }
           }
           else if (cells.length === 1 && cells[0].length === 1) {
               innerHTML = `${this.getters.getCellText(cells[0][0].position)}`;
@@ -66634,6 +67242,62 @@ stores.inject(MyMetaStore, storeInstance);
           const serializedData = JSON.stringify(this.getSheetData());
           return `<div data-osheet-clipboard='${xmlEscape(serializedData)}'>${innerHTML}</div>`;
       }
+      readFileAsDataURL(blob) {
+          return new Promise((resolve) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result);
+              reader.readAsDataURL(blob);
+          });
+      }
+      async craftImageHTML(figureId) {
+          if (!this.fileStore) {
+              return "\t";
+          }
+          const imageUrl = this.getters.getImage(figureId).path;
+          const file = (await this.fileStore?.getFile(imageUrl)) || null;
+          if (file) {
+              const imageUrl = (await this.readFileAsDataURL(file));
+              return `<img src="${xmlEscape(imageUrl)}" />`;
+          }
+          else {
+              return "\t";
+          }
+      }
+      async getImageContent() {
+          const figureId = this.copiedData?.figureId;
+          if (!figureId) {
+              return;
+          }
+          const figureSheetId = this.getters.getFigureSheetId(figureId);
+          const figure = this.getters.getFigure(figureSheetId, figureId);
+          let file;
+          if (figure.tag == "image") {
+              if (!this.fileStore) {
+                  return;
+              }
+              const imageUrl = this.getters.getImage(figureId).path;
+              file = await this.fileStore?.getFile(imageUrl);
+              // we can only write on image/png format in the clipboard
+              // So we convert the image to png if it's not already
+              if (file.type !== "image/png") {
+                  if (file.size > MAX_FILE_SIZE) {
+                      this.ui.notifyUI({
+                          text: _t(`The file you are trying to copy is too large (>%sMB).\nIt will not be added to your OS clipboard.\nYou can download it directly instead.`, Math.round(MAX_FILE_SIZE / (1024 * 1024))),
+                          sticky: false,
+                          type: "warning",
+                      });
+                      return undefined;
+                  }
+                  file = await convertImageToPng(imageUrl);
+              }
+          }
+          if (!file) {
+              return undefined;
+          }
+          else {
+              return file instanceof File ? file : new File([file], "image.png", { type: "image/png" });
+          }
+      }
       isCutOperation() {
           return this._isCutOperation ?? false;
       }
@@ -68708,12 +69372,17 @@ stores.inject(MyMetaStore, storeInstance);
           this.fileStore = fileStore;
       }
       async requestImage() {
-          const file = await this.getImageFromUser();
+          const file = await this.userImageUpload();
+          const path = await this.fileStore.upload(file);
+          const size = await this.getImageOriginalSize(path);
+          return { path, size, mimetype: file.type };
+      }
+      async uploadFile(file) {
           const path = await this.fileStore.upload(file);
           const size = await this.getImageOriginalSize(path);
           return { path, size, mimetype: file.type };
       }
-      getImageFromUser() {
+      userImageUpload() {
           return new Promise((resolve, reject) => {
               const input = document.createElement("input");
               input.setAttribute("type", "file");
@@ -68732,12 +69401,12 @@ stores.inject(MyMetaStore, storeInstance);
       getImageOriginalSize(path) {
           return new Promise((resolve, reject) => {
               const image = new Image();
-              image.src = path;
               image.addEventListener("load", () => {
                   const size = { width: image.width, height: image.height };
                   resolve(size);
               });
               image.addEventListener("error", reject);
+              image.src = path;
           });
       }
   }
@@ -70115,6 +70784,126 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  const COMPOSER_MAX_HEIGHT = 100;
+  /* svg free of use from https://uxwing.com/formula-fx-icon/ */
+  const FX_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
+  <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
+</svg>
+`;
+  css /* scss */ `
+  .o-topbar-composer-container {
+    height: ${TOPBAR_TOOLBAR_HEIGHT}px;
+  }
+
+  .o-topbar-composer {
+    height: fit-content;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    border: 1px solid;
+    font-family: ${DEFAULT_FONT};
+
+    .o-composer:empty:not(:focus):not(.active)::before {
+      content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
+      position: relative;
+      top: 20%;
+    }
+  }
+
+  .user-select-text {
+    user-select: text;
+  }
+`;
+  class TopBarComposer extends owl.Component {
+      static template = "o-spreadsheet-TopBarComposer";
+      static props = {};
+      static components = { Composer };
+      composerFocusStore;
+      composerStore;
+      composerInterface;
+      setup() {
+          this.composerFocusStore = useStore(ComposerFocusStore);
+          const composerStore = useStore(CellComposerStore);
+          this.composerStore = composerStore;
+          this.composerInterface = {
+              id: "topbarComposer",
+              get editionMode() {
+                  return composerStore.editionMode;
+              },
+              startEdition: this.composerStore.startEdition,
+              setCurrentContent: this.composerStore.setCurrentContent,
+              stopEdition: this.composerStore.stopEdition,
+          };
+      }
+      get focus() {
+          return this.composerFocusStore.activeComposer === this.composerInterface
+              ? this.composerFocusStore.focusMode
+              : "inactive";
+      }
+      get composerStyle() {
+          const style = {
+              padding: "5px 0px 5px 8px",
+              "max-height": `${COMPOSER_MAX_HEIGHT}px`,
+              "line-height": "24px",
+          };
+          style.height = this.focus === "inactive" ? `${TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
+          return cssPropertiesToCss(style);
+      }
+      get containerStyle() {
+          if (this.focus === "inactive") {
+              return cssPropertiesToCss({
+                  "border-color": SEPARATOR_COLOR,
+                  "border-right": "none",
+              });
+          }
+          return cssPropertiesToCss({
+              "border-color": SELECTION_BORDER_COLOR,
+              "z-index": String(ComponentsImportance.TopBarComposer),
+          });
+      }
+      onFocus(selection) {
+          this.composerFocusStore.focusComposer(this.composerInterface, { selection });
+      }
+  }
+
+  /**
+   * This store is used to manage the dropdown that is currently
+   * opened after clicking an item on the toolbar.
+   * It can only have one displayed at a time.
+   *
+   */
+  class TopBarToolStore {
+      mutators = ["closeDropdowns", "openDropdown"];
+      _currentDropdown = null;
+      closeDropdowns() {
+          this._currentDropdown = null;
+      }
+      openDropdown(dropdownComponent) {
+          this._currentDropdown = dropdownComponent;
+      }
+      get currentDropdown() {
+          return this._currentDropdown;
+      }
+  }
+
+  class ToolBarRegistry {
+      content = {};
+      add(key) {
+          this.content[key] = [];
+          return this;
+      }
+      addChild(key, value) {
+          this.content[key].push(value);
+          return this;
+      }
+      getEntries(id) {
+          return this.content[id].sort((a, b) => a.sequence - b.sequence);
+      }
+      getCategories() {
+          return Object.keys(this.content);
+      }
+  }
+
   css /* scss */ `
   .o-menu-item-button {
     display: flex;
@@ -70182,6 +70971,25 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  function useToolBarDropdownStore() {
+      const component = owl.useComponent();
+      const topbarStore = useStore(TopBarToolStore);
+      owl.onWillUnmount(() => {
+          if (component === topbarStore.currentDropdown) {
+              topbarStore.closeDropdowns();
+          }
+      });
+      return {
+          closeDropdowns: () => topbarStore.closeDropdowns(),
+          openDropdown: () => {
+              topbarStore.openDropdown(component);
+          },
+          get isActive() {
+              return topbarStore.currentDropdown === component;
+          },
+      };
+  }
+
   /**
    * List the available borders positions and the corresponding icons.
    * The structure of this array is defined to match the order/lines we want
@@ -70351,13 +71159,12 @@ stores.inject(MyMetaStore, storeInstance);
   class BorderEditorWidget extends owl.Component {
       static template = "o-spreadsheet-BorderEditorWidget";
       static props = {
-          toggleBorderEditor: Function,
-          showBorderEditor: Boolean,
           disabled: { type: Boolean, optional: true },
           dropdownMaxHeight: { type: Number, optional: true },
           class: { type: String, optional: true },
       };
       static components = { BorderEditor };
+      topBarToolStore;
       borderEditorButtonRef = owl.useRef("borderEditorButton");
       state = owl.useState({
           currentColor: DEFAULT_BORDER_DESC.color,
@@ -70365,12 +71172,16 @@ stores.inject(MyMetaStore, storeInstance);
           currentPosition: undefined,
       });
       setup() {
-          owl.onWillUpdateProps((newProps) => {
-              if (!newProps.showBorderEditor) {
+          this.topBarToolStore = useToolBarDropdownStore();
+          owl.onWillUpdateProps(() => {
+              if (!this.isActive) {
                   this.state.currentPosition = undefined;
               }
           });
       }
+      get dropdownMaxHeight() {
+          return this.env.model.getters.getSheetViewDimension().height;
+      }
       get borderEditorAnchorRect() {
           const button = this.borderEditorButtonRef.el;
           const buttonRect = button.getBoundingClientRect();
@@ -70393,6 +71204,17 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.currentStyle = style;
           this.updateBorder();
       }
+      get isActive() {
+          return this.topBarToolStore.isActive;
+      }
+      toggleBorderEditor() {
+          if (this.isActive) {
+              this.topBarToolStore.closeDropdowns();
+          }
+          else {
+              this.topBarToolStore.openDropdown();
+          }
+      }
       updateBorder() {
           if (this.state.currentPosition === undefined) {
               return;
@@ -70409,93 +71231,42 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const COMPOSER_MAX_HEIGHT = 100;
-  /* svg free of use from https://uxwing.com/formula-fx-icon/ */
-  const FX_SVG = /*xml*/ `
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'>
-  <path d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='#BDBDBD'/>
-</svg>
-`;
-  css /* scss */ `
-  .o-topbar-composer-container {
-    height: ${TOPBAR_TOOLBAR_HEIGHT}px;
-  }
-
-  .o-topbar-composer {
-    height: fit-content;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    border: 1px solid;
-    font-family: ${DEFAULT_FONT};
-
-    .o-composer:empty:not(:focus):not(.active)::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
-      position: relative;
-      top: 20%;
-    }
-  }
-
-  .user-select-text {
-    user-select: text;
-  }
-`;
-  class TopBarComposer extends owl.Component {
-      static template = "o-spreadsheet-TopBarComposer";
-      static props = {};
-      static components = { Composer };
-      composerFocusStore;
-      composerStore;
-      composerInterface;
+  class PaintFormatButton extends owl.Component {
+      static template = "o-spreadsheet-PaintFormatButton";
+      static props = {
+          class: { type: String, optional: true },
+      };
+      paintFormatStore;
       setup() {
-          this.composerFocusStore = useStore(ComposerFocusStore);
-          const composerStore = useStore(CellComposerStore);
-          this.composerStore = composerStore;
-          this.composerInterface = {
-              id: "topbarComposer",
-              get editionMode() {
-                  return composerStore.editionMode;
-              },
-              startEdition: this.composerStore.startEdition,
-              setCurrentContent: this.composerStore.setCurrentContent,
-              stopEdition: this.composerStore.stopEdition,
-          };
+          this.paintFormatStore = useStore(PaintFormatStore);
       }
-      get focus() {
-          return this.composerFocusStore.activeComposer === this.composerInterface
-              ? this.composerFocusStore.focusMode
-              : "inactive";
+      get isActive() {
+          return this.paintFormatStore.isActive;
       }
-      get composerStyle() {
-          const style = {
-              padding: "5px 0px 5px 8px",
-              "max-height": `${COMPOSER_MAX_HEIGHT}px`,
-              "line-height": "24px",
-          };
-          style.height = this.focus === "inactive" ? `${TOPBAR_TOOLBAR_HEIGHT}px` : "fit-content";
-          return cssPropertiesToCss(style);
+      onDblClick() {
+          this.paintFormatStore.activate({ persistent: true });
       }
-      get containerStyle() {
-          if (this.focus === "inactive") {
-              return cssPropertiesToCss({
-                  "border-color": SEPARATOR_COLOR,
-                  "border-right": "none",
-              });
+      togglePaintFormat() {
+          if (this.isActive) {
+              this.paintFormatStore.cancel();
+          }
+          else {
+              this.paintFormatStore.activate({ persistent: false });
           }
-          return cssPropertiesToCss({
-              "border-color": SELECTION_BORDER_COLOR,
-              "z-index": String(ComponentsImportance.TopBarComposer),
-          });
-      }
-      onFocus(selection) {
-          this.composerFocusStore.focusComposer(this.composerInterface, { selection });
       }
   }
 
   class TableDropdownButton extends owl.Component {
       static template = "o-spreadsheet-TableDropdownButton";
       static components = { TableStylesPopover, ActionButton };
-      static props = {};
+      static props = {
+          class: { type: String, optional: true },
+      };
+      topBarToolStore;
       state = owl.useState({ popoverProps: undefined });
+      setup() {
+          this.topBarToolStore = useToolBarDropdownStore();
+      }
       onStylePicked(styleId) {
           const sheetId = this.env.model.getters.getActiveSheetId();
           const tableConfig = { ...this.tableConfig, styleId };
@@ -70511,12 +71282,13 @@ stores.inject(MyMetaStore, storeInstance);
               return;
           }
           if (this.env.model.getters.getFirstTableInSelection()) {
+              this.topBarToolStore.closeDropdowns();
               this.env.toggleSidePanel("TableSidePanel", {});
               return;
           }
-          // Open the popover
           const target = ev.currentTarget;
-          const { bottom, left } = target.getBoundingClientRect();
+          const { left, bottom } = target.getBoundingClientRect();
+          this.topBarToolStore.openDropdown();
           this.state.popoverProps = {
               anchorRect: { x: left, y: bottom, width: 0, height: 0 },
               positioning: "BottomLeft",
@@ -70528,8 +71300,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       get action() {
           return {
-              name: (env) => this.env.model.getters.getFirstTableInSelection() ? _t("Edit table") : _t("Insert table"),
-              icon: (env) => this.env.model.getters.getFirstTableInSelection()
+              name: (env) => env.model.getters.getFirstTableInSelection() ? _t("Edit table") : _t("Insert table"),
+              icon: (env) => env.model.getters.getFirstTableInSelection()
                   ? "o-spreadsheet-Icon.EDIT_TABLE"
                   : "o-spreadsheet-Icon.PAINT_TABLE",
           };
@@ -70539,35 +71311,347 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class PaintFormatButton extends owl.Component {
-      static template = "o-spreadsheet-PaintFormatButton";
+  class TopBarColorEditor extends owl.Component {
+      static components = { ColorPickerWidget };
+      static props = { class: String, style: String, icon: String, title: String };
+      static template = "o-spreadsheet-ColorEditor";
+      topBarToolStore;
+      state = owl.useState({
+          isOpen: false,
+      });
+      setup() {
+          this.topBarToolStore = useToolBarDropdownStore();
+      }
+      get currentColor() {
+          return (this.env.model.getters.getCurrentStyle()[this.props.style] ||
+              (this.props.style === "textColor" ? "#000000" : "#ffffff"));
+      }
+      setColor(color) {
+          setStyle(this.env, { [this.props.style]: color });
+          this.state.isOpen = false;
+      }
+      get dropdownMaxHeight() {
+          return this.env.model.getters.getSheetViewDimension().height;
+      }
+      get isMenuOpen() {
+          return this.topBarToolStore.isActive;
+      }
+      onClick() {
+          if (!this.isMenuOpen) {
+              this.topBarToolStore.openDropdown();
+          }
+          else {
+              this.topBarToolStore.closeDropdowns();
+          }
+      }
+  }
+
+  class DropdownAction extends owl.Component {
+      static template = "o-spreadsheet-DropdownAction";
+      static components = { ActionButton, Popover };
       static props = {
-          class: { type: String, optional: true },
+          parentAction: Object,
+          childActions: Array,
+          class: String,
+          childClass: String,
       };
-      paintFormatStore;
+      topBarToolStore;
+      actionRef = owl.useRef("actionRef");
       setup() {
-          this.paintFormatStore = useStore(PaintFormatStore);
+          this.topBarToolStore = useToolBarDropdownStore();
+      }
+      toggleDropdown() {
+          if (this.isActive) {
+              this.topBarToolStore.closeDropdowns();
+          }
+          else {
+              this.topBarToolStore.openDropdown();
+          }
       }
       get isActive() {
-          return this.paintFormatStore.isActive;
+          return this.topBarToolStore.isActive;
       }
-      onDblClick() {
-          this.paintFormatStore.activate({ persistent: true });
+      get popoverProps() {
+          const rect = this.actionRef.el
+              ? this.actionRef.el.getBoundingClientRect()
+              : { x: 0, y: 0, width: 0, height: 0 };
+          return {
+              anchorRect: rect,
+              positioning: "BottomLeft",
+              verticalOffset: 0,
+              class: "rounded",
+          };
       }
-      togglePaintFormat() {
+  }
+
+  class TopBarFontSizeEditor extends owl.Component {
+      static components = { FontSizeEditor };
+      static props = { class: String };
+      static template = "o-spreadsheet-TopBarFontSizeEditor";
+      topBarToolStore;
+      setup() {
+          this.topBarToolStore = useToolBarDropdownStore();
+      }
+      get currentFontSize() {
+          return this.env.model.getters.getCurrentStyle().fontSize || DEFAULT_FONT_SIZE;
+      }
+      setFontSize(fontSize) {
+          setStyle(this.env, { fontSize });
+      }
+      onToggle() {
           if (this.isActive) {
-              this.paintFormatStore.cancel();
+              this.topBarToolStore.closeDropdowns();
           }
           else {
-              this.paintFormatStore.activate({ persistent: false });
+              this.topBarToolStore.openDropdown();
+          }
+      }
+      onFocusInput() {
+          this.topBarToolStore.openDropdown();
+      }
+      get isActive() {
+          return this.topBarToolStore.isActive;
+      }
+  }
+
+  class NumberFormatsTool extends owl.Component {
+      static template = "o-spreadsheet-NumberFormatsTool";
+      static components = { Menu, ActionButton };
+      static props = { class: String };
+      formatNumberMenuItemSpec = formatNumberMenuItemSpec;
+      topBarToolStore;
+      buttonRef = owl.useRef("buttonRef");
+      state = owl.useState({
+          position: { x: 0, y: 0 },
+          menuItems: [],
+      });
+      setup() {
+          this.topBarToolStore = useToolBarDropdownStore();
+      }
+      toggleMenu() {
+          if (this.isActive) {
+              this.topBarToolStore.closeDropdowns();
+          }
+          else {
+              const menu = createAction(this.formatNumberMenuItemSpec);
+              this.state.menuItems = menu.children(this.env).sort((a, b) => a.sequence - b.sequence);
+              const { x, y, height } = this.buttonRef.el.getBoundingClientRect();
+              this.state.position = { x, y: y + height };
+              this.topBarToolStore.openDropdown();
           }
       }
+      get isActive() {
+          return this.topBarToolStore.isActive;
+      }
   }
 
+  const topBarToolBarRegistry = new ToolBarRegistry();
+  topBarToolBarRegistry
+      .add("edit")
+      .addChild("edit", {
+      component: ActionButton,
+      props: {
+          action: undo,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 1,
+  })
+      .addChild("edit", {
+      component: ActionButton,
+      props: {
+          action: redo,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 2,
+  })
+      .addChild("edit", {
+      component: PaintFormatButton,
+      props: {
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 3,
+  })
+      .addChild("edit", {
+      component: ActionButton,
+      props: {
+          action: clearFormat,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 4,
+  })
+      .add("numberFormat")
+      .addChild("numberFormat", {
+      component: ActionButton,
+      props: {
+          action: formatPercent,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 1,
+  })
+      .addChild("numberFormat", {
+      component: ActionButton,
+      props: {
+          action: decreaseDecimalPlaces,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 2,
+  })
+      .addChild("numberFormat", {
+      component: ActionButton,
+      props: {
+          action: increaseDecimalPlaces,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 3,
+  })
+      .addChild("numberFormat", {
+      component: NumberFormatsTool,
+      props: {
+          class: "o-menu-item-button o-hoverable-button o-toolbar-button",
+      },
+      sequence: 4,
+  })
+      .add("fontSize")
+      .addChild("fontSize", {
+      component: TopBarFontSizeEditor,
+      props: {
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 3,
+  })
+      .add("textStyle")
+      .addChild("textStyle", {
+      component: ActionButton,
+      props: {
+          action: formatBold,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 1,
+  })
+      .addChild("textStyle", {
+      component: ActionButton,
+      props: {
+          action: formatItalic,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 2,
+  })
+      .addChild("textStyle", {
+      component: ActionButton,
+      props: {
+          action: formatStrikethrough,
+          class: "o-hoverable-button o-toolbar-button",
+      },
+      sequence: 3,
+  })
+      .addChild("textStyle", {
+      component: TopBarColorEditor,
+      props: {
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+          style: "textColor",
+          icon: "o-spreadsheet-Icon.TEXT_COLOR",
+          title: _t("Text Color"),
+      },
+      sequence: 4,
+  })
+      .add("cellStyle")
+      .addChild("cellStyle", {
+      component: TopBarColorEditor,
+      props: {
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+          style: "fillColor",
+          icon: "o-spreadsheet-Icon.FILL_COLOR",
+          title: _t("Fill Color"),
+      },
+      sequence: 1,
+  })
+      .addChild("cellStyle", {
+      component: BorderEditorWidget,
+      props: {
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+      },
+      sequence: 2,
+  })
+      .addChild("cellStyle", {
+      component: ActionButton,
+      props: {
+          action: mergeCells,
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+      },
+      sequence: 3,
+  })
+      .add("alignment")
+      .addChild("alignment", {
+      component: DropdownAction,
+      props: {
+          parentAction: formatAlignmentHorizontal,
+          childActions: [
+              formatAlignmentLeft,
+              formatAlignmentCenter,
+              formatAlignmentRight,
+          ],
+          class: "o-hoverable-button o-toolbar-button",
+          childClass: "o-hoverable-button",
+      },
+      sequence: 1,
+  })
+      .addChild("alignment", {
+      component: DropdownAction,
+      props: {
+          parentAction: formatAlignmentVertical,
+          childActions: [
+              formatAlignmentTop,
+              formatAlignmentMiddle,
+              formatAlignmentBottom,
+          ],
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+          childClass: "o-hoverable-button",
+      },
+      sequence: 2,
+  })
+      .addChild("alignment", {
+      component: DropdownAction,
+      props: {
+          parentAction: formatWrapping,
+          childActions: [
+              formatWrappingOverflow,
+              formatWrappingWrap,
+              formatWrappingClip,
+          ],
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+          childClass: "o-hoverable-button",
+      },
+      sequence: 3,
+  })
+      .add("misc")
+      .addChild("misc", {
+      component: TableDropdownButton,
+      props: { class: "o-toolbar-button o-hoverable-button o-menu-item-button" },
+      sequence: 1,
+  })
+      .addChild("misc", {
+      component: ActionButton,
+      props: {
+          action: createRemoveFilterTool,
+          class: "o-hoverable-button o-menu-item-button o-toolbar-button",
+      },
+      sequence: 2,
+  });
+
   // -----------------------------------------------------------------------------
   // TopBar
   // -----------------------------------------------------------------------------
   css /* scss */ `
+  .o-topbar-divider {
+    border-right: 1px solid ${SEPARATOR_COLOR};
+    width: 0;
+    margin: 0 6px;
+  }
+
+  .o-toolbar-button {
+    height: 30px;
+  }
+
   .o-spreadsheet-topbar {
     line-height: 1.2;
     font-size: 13px;
@@ -70617,47 +71701,7 @@ stores.inject(MyMetaStore, storeInstance);
 
       /* Toolbar */
       .o-toolbar-tools {
-        display: flex;
-        flex-shrink: 0;
-        margin: 0px 6px 0px 16px;
         cursor: default;
-
-        .o-divider {
-          display: inline-block;
-          border-right: 1px solid ${SEPARATOR_COLOR};
-          width: 0;
-          margin: 0 6px;
-        }
-
-        .o-dropdown {
-          position: relative;
-          display: flex;
-          align-items: center;
-
-          > span {
-            height: 30px;
-          }
-
-          .o-dropdown-content {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            overflow-y: auto;
-            overflow-x: hidden;
-            padding: 2px;
-            z-index: ${ComponentsImportance.Dropdown};
-            box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-            background-color: white;
-
-            .o-dropdown-line {
-              display: flex;
-
-              > span {
-                padding: 4px;
-              }
-            }
-          }
-        }
       }
     }
   }
@@ -70669,38 +71713,73 @@ stores.inject(MyMetaStore, storeInstance);
           dropdownMaxHeight: Number,
       };
       static components = {
-          ColorPickerWidget,
-          ColorPicker,
           Menu,
           TopBarComposer,
-          FontSizeEditor,
-          ActionButton,
-          PaintFormatButton,
-          BorderEditorWidget,
-          TableDropdownButton,
+          Popover,
       };
+      toolsCategories = topBarToolBarRegistry.getCategories();
       state = owl.useState({
           menuState: { isOpen: false, position: null, menuItems: [] },
-          activeTool: "",
-          fillColor: "#ffffff",
-          textColor: "#000000",
+          invisibleToolsCategories: [],
+          toolsPopoverState: { isOpen: false },
       });
       isSelectingMenu = false;
       openedEl = null;
       menus = [];
-      EDIT = ACTION_EDIT;
-      FORMAT = ACTION_FORMAT;
-      DATA = ACTION_DATA;
+      toolbarMenuRegistry = topBarToolBarRegistry;
       formatNumberMenuItemSpec = formatNumberMenuItemSpec;
       isntToolbarMenu = false;
       composerFocusStore;
       fingerprints;
+      topBarToolStore;
+      toolBarContainerRef = owl.useRef("toolBarContainer");
+      toolbarRef = owl.useRef("toolBar");
+      moreToolsContainerRef = owl.useRef("moreToolsContainer");
+      moreToolsButtonRef = owl.useRef("moreToolsButton");
+      spreadsheetRect = useSpreadsheetRect();
       setup() {
           this.composerFocusStore = useStore(ComposerFocusStore);
           this.fingerprints = useStore(FormulaFingerprintStore);
+          this.topBarToolStore = useStore(TopBarToolStore);
           owl.useExternalListener(window, "click", this.onExternalClick);
           owl.onWillStart(() => this.updateCellState());
           owl.onWillUpdateProps(() => this.updateCellState());
+          owl.useEffect(() => {
+              this.state.toolsPopoverState.isOpen = false;
+              this.setVisibilityToolsGroups();
+          }, () => [this.spreadsheetRect.width]);
+      }
+      setVisibilityToolsGroups() {
+          if (this.env.model.getters.isReadonly()) {
+              return;
+          }
+          const hiddenCategories = [];
+          const { x: toolsX } = this.toolbarRef.el.getBoundingClientRect();
+          const { x } = this.toolBarContainerRef.el.getBoundingClientRect();
+          // Compute the with of the button that will toggle the hidden tools
+          this.moreToolsContainerRef.el?.classList.remove("d-none");
+          const moreToolsWidth = this.moreToolsButtonRef.el?.getBoundingClientRect().width || 0;
+          // The actual width in which we can place our tools so that they are visible.
+          // Every tool container passed that width will be hidden.
+          // We remove 16px to the width to account for a scrollbar that might appear.
+          // Otherwise, we could end up in a loop of computation
+          const usableWidth = Math.round(this.spreadsheetRect.width) - moreToolsWidth - (toolsX - x) - 16;
+          const toolElements = document.querySelectorAll(".tool-container");
+          let currentWidth = 0;
+          for (let index = 0; index < toolElements.length; index++) {
+              const element = toolElements[index];
+              element.classList.remove("d-none");
+              const { width: toolWidth } = element.getBoundingClientRect();
+              currentWidth += toolWidth;
+              if (currentWidth > usableWidth) {
+                  element.classList.add("d-none");
+                  hiddenCategories.push(this.toolsCategories[index]);
+              }
+          }
+          this.state.invisibleToolsCategories = hiddenCategories;
+          if (!hiddenCategories.length) {
+              this.moreToolsContainerRef.el?.classList.add("d-none");
+          }
       }
       get topbarComponents() {
           return topbarComponentRegistry
@@ -70730,12 +71809,6 @@ stores.inject(MyMetaStore, storeInstance);
               this.openMenu(menu, ev);
           }
       }
-      toggleDropdownTool(tool, ev) {
-          const isOpen = this.state.activeTool === tool;
-          this.closeMenus();
-          this.state.activeTool = isOpen ? "" : tool;
-          this.openedEl = isOpen ? null : ev.target;
-      }
       toggleContextMenu(menu, ev) {
           if (this.state.menuState.isOpen && this.isntToolbarMenu) {
               this.closeMenus();
@@ -70745,19 +71818,10 @@ stores.inject(MyMetaStore, storeInstance);
               this.isntToolbarMenu = true;
           }
       }
-      toggleToolbarContextMenu(menuSpec, ev) {
-          if (this.state.menuState.isOpen && !this.isntToolbarMenu) {
-              this.closeMenus();
-          }
-          else {
-              const menu = createAction(menuSpec);
-              this.openMenu(menu, ev);
-              this.isntToolbarMenu = false;
-          }
-      }
       openMenu(menu, ev) {
+          this.topBarToolStore.closeDropdowns();
+          this.state.toolsPopoverState.isOpen = false;
           const { left, top, height } = ev.currentTarget.getBoundingClientRect();
-          this.state.activeTool = "";
           this.state.menuState.isOpen = true;
           this.state.menuState.position = { x: left, y: top + height };
           this.state.menuState.menuItems = menu
@@ -70769,16 +71833,14 @@ stores.inject(MyMetaStore, storeInstance);
           this.composerFocusStore.activeComposer.stopEdition();
       }
       closeMenus() {
-          this.state.activeTool = "";
+          this.topBarToolStore.closeDropdowns();
+          this.state.toolsPopoverState.isOpen = false;
           this.state.menuState.isOpen = false;
           this.state.menuState.parentMenu = undefined;
           this.isSelectingMenu = false;
           this.openedEl = null;
       }
       updateCellState() {
-          const style = this.env.model.getters.getCurrentStyle();
-          this.state.fillColor = style.fillColor || "#ffffff";
-          this.state.textColor = style.textColor || "#000000";
           this.menus = topbarMenuRegistry.getMenuItems();
       }
       getMenuName(menu) {
@@ -70791,6 +71853,26 @@ stores.inject(MyMetaStore, storeInstance);
       setFontSize(fontSize) {
           setStyle(this.env, { fontSize });
       }
+      toggleMoreTools() {
+          this.topBarToolStore.closeDropdowns();
+          this.state.toolsPopoverState.isOpen = !this.state.toolsPopoverState.isOpen;
+      }
+      get toolsPopoverProps() {
+          const rect = this.moreToolsButtonRef.el
+              ? getBoundingRectAsPOJO(this.moreToolsButtonRef.el)
+              : { x: 0, y: 0, width: 0, height: 0 };
+          return {
+              anchorRect: rect,
+              positioning: "BottomLeft",
+              verticalOffset: 0,
+              class: "rounded",
+              maxWidth: 300,
+          };
+      }
+      showDivider(categoryIndex) {
+          return (categoryIndex < this.toolsCategories.length - 1 ||
+              this.state.invisibleToolsCategories.length > 0);
+      }
   }
 
   function instantiateClipboard() {
@@ -70813,6 +71895,7 @@ stores.inject(MyMetaStore, storeInstance);
                    * Therefore, we try to catch any errors and fallback on writing only standard
                    * mimetypes to prevent the whole copy action from crashing.
                    */
+                  console.log("Failed to write on the clipboard, falling back to plain/html text. Error %s", e);
                   try {
                       await this.clipboard?.write([
                           new ClipboardItem({
@@ -70844,14 +71927,20 @@ stores.inject(MyMetaStore, storeInstance);
           if (this.clipboard?.read) {
               try {
                   const clipboardItems = await this.clipboard.read();
-                  const clipboardContent = {};
+                  const osClipboardContent = {};
                   for (const item of clipboardItems) {
                       for (const type of item.types) {
                           const blob = await item.getType(type);
-                          clipboardContent[type] = await blob.text();
+                          if (AllowedImageMimeTypes.includes(type)) {
+                              osClipboardContent[type] = blob;
+                          }
+                          else {
+                              const text = await blob.text();
+                              osClipboardContent[type] = text;
+                          }
                       }
                   }
-                  return { status: "ok", content: clipboardContent };
+                  return { status: "ok", content: osClipboardContent };
               }
               catch (e) {
                   const status = permissionResult?.state === "denied" ? "permissionDenied" : "notImplemented";
@@ -70868,13 +71957,17 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       getClipboardItems(content) {
-          const clipboardItemData = {
-              [ClipboardMIMEType.PlainText]: this.getBlob(content, ClipboardMIMEType.PlainText),
-              [ClipboardMIMEType.Html]: this.getBlob(content, ClipboardMIMEType.Html),
-          };
+          const clipboardItemData = {};
+          for (const type of Object.keys(content)) {
+              clipboardItemData[type] = this.getBlob(content, type);
+          }
           return [new ClipboardItem(clipboardItemData)];
       }
       getBlob(clipboardContent, type) {
+          const content = clipboardContent[type];
+          if (content instanceof Blob || content instanceof File) {
+              return content;
+          }
           return new Blob([clipboardContent[type] || ""], {
               type,
           });
@@ -71153,7 +72246,7 @@ stores.inject(MyMetaStore, storeInstance);
               properties["grid-template-rows"] = `auto`;
           }
           else {
-              properties["grid-template-rows"] = `max-content auto ${BOTTOMBAR_HEIGHT + 1}px`;
+              properties["grid-template-rows"] = `min-content auto min-content`;
           }
           properties["grid-template-columns"] = `auto ${this.sidePanel.panelSize}px`;
           return cssPropertiesToCss(properties);
@@ -71264,8 +72357,7 @@ stores.inject(MyMetaStore, storeInstance);
           this._focusGrid();
       }
       get gridHeight() {
-          const { height } = this.env.model.getters.getSheetViewDimension();
-          return height;
+          return this.env.model.getters.getSheetViewDimension().height;
       }
       get gridContainerStyle() {
           const gridColSize = GROUP_LAYER_WIDTH * this.rowLayers.length;
@@ -73436,7 +74528,7 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  function addFormula(formula, value) {
+  function addFormula(formula, value, formulaSpillRange) {
       if (!formula) {
           return { attrs: [], node: escapeXml `` };
       }
@@ -73444,10 +74536,17 @@ stores.inject(MyMetaStore, storeInstance);
       if (type === undefined) {
           return { attrs: [], node: escapeXml `` };
       }
-      const attrs = [["t", type]];
+      const attrs = [
+          ["cm", "1"],
+          ["t", type],
+      ];
       const XlsxFormula = adaptFormulaToExcel(formula);
       const exportedValue = adaptFormulaValueToExcel(value);
-      const node = escapeXml /*xml*/ `<f>${XlsxFormula}</f><v>${exportedValue}</v>`;
+      // We treat all formulas as array formulas (a simple formula
+      // is an array formula that spills on only one cell) to avoid
+      // trying to detect spilling sub-formulas which is not a trivial task.
+      let node;
+      node = escapeXml /*xml*/ `<f t="array" ref="${formulaSpillRange}">${XlsxFormula}</f><v>${exportedValue}</v>`;
       return { attrs, node };
   }
   function addContent(content, sharedStrings, forceString = false) {
@@ -74437,7 +75536,7 @@ stores.inject(MyMetaStore, storeInstance);
                   let cellNode = escapeXml ``;
                   // Either formula or static value inside the cell
                   if (content?.startsWith("=") && value !== undefined) {
-                      const res = addFormula(content, value);
+                      const res = addFormula(content, value, sheet.formulaSpillRanges[xc] ?? xc);
                       if (!res) {
                           continue;
                       }
@@ -74723,6 +75822,30 @@ stores.inject(MyMetaStore, storeInstance);
     `;
           files.push(createXMLFile(parseXML(sheetXml), `xl/worksheets/sheet${sheetIndex}.xml`, "sheet"));
       }
+      const sheetMetadataXml = escapeXml /*xml*/ `
+    <metadata xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:xda="http://schemas.microsoft.com/office/spreadsheetml/2017/dynamicarray">
+        <metadataTypes count="1">
+            <metadataType name="XLDAPR" minSupportedVersion="120000" copy="1" pasteAll="1"
+                pasteValues="1" merge="1" splitFirst="1" rowColShift="1" clearFormats="1"
+                clearComments="1" assign="1" coerce="1" cellMeta="1" />
+        </metadataTypes>
+        <futureMetadata name="XLDAPR" count="1">
+            <bk>
+                <extLst>
+                    <ext uri="{${ARRAY_FORMULA_URI}}">
+                        <xda:dynamicArrayProperties fDynamic="1" fCollapsed="0" />
+                    </ext>
+                </extLst>
+            </bk>
+        </futureMetadata>
+        <cellMetadata count="1">
+            <bk>
+                <rc t="1" v="0" />
+            </bk>
+        </cellMetadata>
+    </metadata>
+  `;
+      files.push(createXMLFile(parseXML(sheetMetadataXml), "xl/metadata.xml", "metadata"));
       addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
           type: XLSX_RELATION_TYPE.sharedStrings,
           target: "sharedStrings.xml",
@@ -74731,6 +75854,10 @@ stores.inject(MyMetaStore, storeInstance);
           type: XLSX_RELATION_TYPE.styles,
           target: "styles.xml",
       });
+      addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
+          type: XLSX_RELATION_TYPE.metadata,
+          target: "metadata.xml",
+      });
       return files;
   }
   /**
@@ -75692,9 +76819,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.3.0-alpha.2";
-  __info__.date = "2025-02-27T06:31:04.174Z";
-  __info__.hash = "17e5bfa";
+  __info__.version = "18.3.0-alpha.3";
+  __info__.date = "2025-03-07T10:41:05.411Z";
+  __info__.hash = "f59f5f6";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);