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

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.3.0-alpha.1
- * @date 2025-02-25T06:00:14.885Z
- * @hash be4d957
+ * @version 18.3.0-alpha.3
+ * @date 2025-03-07T10:41:05.411Z
+ * @hash f59f5f6
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -349,7 +349,6 @@ var ComponentsImportance;
     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";
@@ -859,7 +858,7 @@ function insertItemsAtIndex(array, items, index) {
 }
 function replaceItemAtIndex(array, newItem, index) {
     const newArray = [...array];
-    newArray.splice(index, 1, newItem);
+    newArray[index] = newItem;
     return newArray;
 }
 function trimContent(content) {
@@ -3401,6 +3400,7 @@ var ClipboardMIMEType;
 (function (ClipboardMIMEType) {
     ClipboardMIMEType["PlainText"] = "text/plain";
     ClipboardMIMEType["Html"] = "text/html";
+    ClipboardMIMEType["Image"] = "image";
 })(ClipboardMIMEType || (ClipboardMIMEType = {}));
 
 function isSheetDependent(cmd) {
@@ -6103,8 +6103,9 @@ function spreadRange(getters, dataSets) {
         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,
@@ -6116,8 +6117,9 @@ function spreadRange(getters, dataSets) {
             }
             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,
@@ -6556,6 +6558,17 @@ class UuidGenerator {
     }
 }
 
+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));
@@ -6602,21 +6615,28 @@ function getPasteZones(target, content) {
     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 {
@@ -9679,6 +9699,91 @@ function getElementMargins(el) {
     };
 }
 
+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
@@ -10059,6 +10164,9 @@ const chartShowValuesPlugin = {
                     ? drawHorizontalBarChartValues(chart, options, ctx)
                     : drawLineOrBarOrRadarChartValues(chart, options, ctx);
                 break;
+            case "funnel":
+                drawHorizontalBarChartValues(chart, options, ctx);
+                break;
         }
         ctx.restore();
     },
@@ -10225,6 +10333,7 @@ function getNextNonEmptyBar(bars, startIndex) {
 
 window.Chart?.register(waterfallLinesPlugin);
 window.Chart?.register(chartShowValuesPlugin);
+window.Chart?.register(FunnelChartController, FunnelChartElement);
 css /* scss */ `
   .o-spreadsheet {
     .o-chart-custom-tooltip {
@@ -22329,7 +22438,7 @@ autofillRulesRegistry
     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;
@@ -22337,7 +22446,10 @@ autofillRulesRegistry
             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,
@@ -22400,10 +22512,13 @@ autofillRulesRegistry
     .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",
@@ -22830,7 +22945,7 @@ const CHART_COMMON_OPTIONS = {
     },
     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");
@@ -22840,31 +22955,59 @@ function chartToImage(runtime, figure, type) {
     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
@@ -22947,6 +23090,7 @@ const CONTENT_TYPES = {
     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",
@@ -22959,6 +23103,7 @@ const CONTENT_TYPES = {
 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",
@@ -22968,6 +23113,7 @@ const XLSX_RELATION_TYPE = {
     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
 /**
@@ -25389,29 +25535,34 @@ function convertPivotTableConfig(pivotTable) {
  * 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;
                 }
@@ -25420,11 +25571,17 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
     }
 }
 /**
- * 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)
@@ -25432,58 +25589,109 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
  * - #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;
 }
 
 // -------------------------------------
@@ -27934,28 +28142,46 @@ function interactivePaste(env, target, pasteOption) {
     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,
         });
@@ -28654,8 +28880,8 @@ function isLuxonTimeAdapterInstalled() {
     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;
@@ -29084,6 +29310,31 @@ function getGeoChartDatasets(definition, args) {
     }
     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;
@@ -29517,6 +29768,38 @@ function getGeoChartScales(definition, args) {
         },
     };
 }
+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
@@ -29880,6 +30163,23 @@ function getGeoChartTooltip(definition, args) {
         },
     };
 }
+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);
@@ -29950,6 +30250,10 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   getComboChartDatasets: getComboChartDatasets,
   getComboChartLegend: getComboChartLegend,
   getData: getData,
+  getFunnelChartDatasets: getFunnelChartDatasets,
+  getFunnelChartScales: getFunnelChartScales,
+  getFunnelChartTooltip: getFunnelChartTooltip,
+  getFunnelLabelColors: getFunnelLabelColors,
   getGeoChartData: getGeoChartData,
   getGeoChartDatasets: getGeoChartDatasets,
   getGeoChartScales: getGeoChartScales,
@@ -30288,6 +30592,146 @@ function createComboChartRuntime(chart, getters) {
     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 */
@@ -31694,6 +32138,15 @@ chartRegistry.add("geo", {
     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);
@@ -31706,6 +32159,7 @@ chartComponentRegistry.add("waterfall", ChartJsComponent);
 chartComponentRegistry.add("pyramid", ChartJsComponent);
 chartComponentRegistry.add("radar", ChartJsComponent);
 chartComponentRegistry.add("geo", ChartJsComponent);
+chartComponentRegistry.add("funnel", ChartJsComponent);
 const chartCategories = {
     line: _t("Line"),
     column: _t("Column"),
@@ -31872,6 +32326,13 @@ chartSubtypeRegistry
     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",
 });
 
 /**
@@ -31932,6 +32393,391 @@ class ImageFigure extends Component {
     }
 }
 
+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();
@@ -31989,6 +32835,39 @@ function getChartMenu(figureId, onFigureDeleted, env) {
         },
         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);
@@ -32019,6 +32898,17 @@ function getImageMenuRegistry(figureId, onFigureDeleted, env) {
             },
             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);
@@ -32032,7 +32922,8 @@ function getCopyMenuItem(figureId, env) {
         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",
     };
@@ -32046,7 +32937,7 @@ function getCutMenuItem(figureId, env) {
         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",
     };
@@ -32477,6 +33368,7 @@ class Popover extends Component {
         onPopoverHidden: { type: Function, optional: true },
         onPopoverMoved: { type: Function, optional: true },
         zIndex: { type: Number, optional: true },
+        class: { type: String, optional: true },
         slots: Object,
     };
     static defaultProps = {
@@ -32509,10 +33401,6 @@ class Popover extends Component {
             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,
@@ -33057,187 +33945,6 @@ const FilterMenuPopoverBuilder = {
     },
 };
 
-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 */ `
@@ -33907,186 +34614,6 @@ cellPopoverRegistry
     .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.
@@ -34141,11 +34668,12 @@ async function paste$1(env, pasteOption) {
     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);
@@ -34505,7 +35033,7 @@ async function requestImage(env) {
     }
     catch {
         env.raiseError(_t("An unexpected error occurred during the image transfer"));
-        return undefined;
+        return;
     }
 }
 const CREATE_IMAGE = async (env) => {
@@ -34514,7 +35042,7 @@ const CREATE_IMAGE = async (env) => {
         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);
@@ -34656,7 +35184,7 @@ const copy = {
     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",
 };
@@ -34665,7 +35193,7 @@ const cut = {
     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",
 };
@@ -34702,7 +35230,7 @@ const findAndReplace = {
 };
 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(),
     }),
@@ -34804,32 +35332,6 @@ function toggleMerge(env) {
     }
 }
 
-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);
@@ -35473,21 +35975,6 @@ const reinsertStaticPivotMenu = {
     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.
@@ -35630,7 +36117,7 @@ const formatNumberShortMonth = createFormatActionSpec({
     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", {
@@ -35639,7 +36126,7 @@ const incraseDecimalPlaces = {
         step: 1,
     }),
 };
-const decraseDecimalPlaces = {
+const decreaseDecimalPlaces = {
     name: _t("Decrease decimal places"),
     icon: "o-spreadsheet-Icon.DECRASE_DECIMAL",
     execute: (env) => env.model.dispatch("SET_DECIMAL", {
@@ -35757,14 +36244,14 @@ const formatWrappingClip = {
     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,
@@ -35866,60 +36353,6 @@ function getWrapModeIcon(env) {
     }
 }
 
-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";
@@ -37873,6 +38306,11 @@ class SelectionInputStore extends SpreadsheetStore {
     }
     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) {
@@ -37907,12 +38345,11 @@ class SelectionInputStore extends SpreadsheetStore {
      * 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),
@@ -38182,10 +38619,10 @@ class SelectionInput extends Component {
                 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();
             },
@@ -38463,6 +38900,9 @@ class GenericChartConfigPanel extends Component {
         this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSets,
         });
+        if (this.state.datasetDispatchResult.isSuccessful) {
+            this.dataSets = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+        }
     }
     getDataSeriesRanges() {
         return this.dataSets;
@@ -39009,8 +39449,12 @@ class FontSizeEditor extends Component {
         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 = useState({ isOpen: false });
@@ -39703,6 +40147,36 @@ class ComboChartDesignPanel extends ChartWithAxisDesignPanel {
     }
 }
 
+class FunnelChartDesignPanel extends 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 Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
     static components = { ChartErrorSection, ChartDataSeries };
@@ -39879,8 +40353,16 @@ class ContentEditableHelper {
             }
             let startNode = this.findChildAtCharacterIndex(start);
             let endNode = this.findChildAtCharacterIndex(end);
-            range.setStart(startNode.node, startNode.offset);
-            range.setEnd(endNode.node, endNode.offset);
+            // setEnd (setStart) will result in a collapsed range if the end point is before the start point
+            // https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd
+            if (start <= end) {
+                range.setStart(startNode.node, startNode.offset);
+                range.setEnd(endNode.node, endNode.offset);
+            }
+            else {
+                range.setStart(endNode.node, endNode.offset);
+                range.setEnd(startNode.node, startNode.offset);
+            }
         }
     }
     /**
@@ -40182,8 +40664,7 @@ css /* scss */ `
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40234,10 +40715,11 @@ class Composer extends Component {
     });
     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) {
@@ -40261,13 +40743,29 @@ class Composer extends Component {
             }
         }
         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;
@@ -41452,6 +41950,10 @@ chartSidePanelComponentRegistry
     .add("geo", {
     configuration: GeoChartConfigPanel,
     design: GeoChartDesignPanel,
+})
+    .add("funnel", {
+    configuration: GenericChartConfigPanel,
+    design: FunnelChartDesignPanel,
 });
 
 css /* scss */ `
@@ -44794,6 +45296,10 @@ class TextInput extends Component {
             type: String,
             optional: true,
         },
+        autofocus: {
+            type: Boolean,
+            optional: true,
+        },
     };
     inputRef = useRef("input");
     setup() {
@@ -44802,6 +45308,9 @@ class TextInput extends Component {
                 this.save();
             }
         }, { capture: true });
+        if (this.props.autofocus) {
+            useAutofocus({ refName: "input" });
+        }
     }
     onKeyDown(ev) {
         switch (ev.key) {
@@ -46741,9 +47250,7 @@ class PivotSidePanelStore extends SpreadsheetStore {
                 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;
@@ -46799,26 +47306,33 @@ class PivotSidePanelStore extends SpreadsheetStore {
             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;
@@ -46994,6 +47508,7 @@ class RemoveDuplicatesPanel extends Component {
         columns: {},
     });
     setup() {
+        onMounted(() => this.updateColumns());
         onWillUpdateProps(() => this.updateColumns());
     }
     toggleHasHeader() {
@@ -52294,13 +52809,13 @@ class Grid extends Component {
                 : 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(),
             });
@@ -52643,11 +53158,8 @@ class Grid extends Component {
         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) {
@@ -52659,21 +53171,27 @@ class Grid extends Component {
         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]: "" });
@@ -54319,25 +54837,57 @@ class ConditionalFormatPlugin extends CorePlugin {
         "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) {
@@ -54361,14 +54911,11 @@ class ConditionalFormatPlugin extends CorePlugin {
         }
     }
     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
@@ -54762,10 +55309,23 @@ class DataValidationPlugin extends CorePlugin {
     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];
@@ -60672,6 +61232,7 @@ class EvaluationPlugin extends CoreViewPlugin {
     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);
@@ -60683,8 +61244,9 @@ class EvaluationPlugin extends CoreViewPlugin {
             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
@@ -60707,7 +61269,11 @@ class EvaluationPlugin extends CoreViewPlugin {
                 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);
+            }
         }
     }
     /**
@@ -61002,7 +61568,7 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                     }
                     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,
@@ -62935,7 +63501,7 @@ class AutofillPlugin extends UIPlugin {
     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.
@@ -65090,6 +65656,17 @@ class SheetUIPlugin extends UIPlugin {
                     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;
         }
     }
     // ---------------------------------------------------------------------------
@@ -65729,6 +66306,7 @@ repeatLocalCommandTransformRegistry.add("AUTORESIZE_ROWS", repeatAutoResizeComma
 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) {
@@ -66167,6 +66745,7 @@ class TableResizeUI extends UIPlugin {
     }
 }
 
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
 /**
  * Clipboard Plugin
  *
@@ -66176,7 +66755,7 @@ class TableResizeUI extends UIPlugin {
 class ClipboardPlugin extends UIPlugin {
     static layers = ["Clipboard"];
     static getters = [
-        "getClipboardContent",
+        "getClipboardTextAndImageContent",
         "getClipboardId",
         "getClipboardTextContent",
         "isCutOperation",
@@ -66186,6 +66765,13 @@ class ClipboardPlugin extends UIPlugin {
     copiedData;
     _isCutOperation = false;
     clipboardId = new UuidGenerator().uuidv4();
+    fileStore;
+    uuidGenerator;
+    constructor(config) {
+        super(config);
+        this.fileStore = config.external.fileStore;
+        this.uuidGenerator = new UuidGenerator();
+    }
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
@@ -66248,9 +66834,29 @@ class ClipboardPlugin extends UIPlugin {
                 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,
@@ -66258,6 +66864,7 @@ class ClipboardPlugin extends UIPlugin {
                     isCutOperation: false,
                 });
                 this.status = "invisible";
+                this.copiedData = undefined;
                 break;
             }
             case "PASTE": {
@@ -66550,11 +67157,17 @@ class ClipboardPlugin extends UIPlugin {
     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 = {
@@ -66583,11 +67196,24 @@ class ClipboardPlugin extends UIPlugin {
         })
             .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)}`;
@@ -66615,6 +67241,62 @@ class ClipboardPlugin extends UIPlugin {
         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;
     }
@@ -68689,12 +69371,17 @@ class ImageProvider {
         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");
@@ -68713,12 +69400,12 @@ class ImageProvider {
     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;
         });
     }
 }
@@ -70096,6 +70783,126 @@ class SidePanel extends Component {
     }
 }
 
+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 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;
@@ -70163,6 +70970,25 @@ class ActionButton extends Component {
     }
 }
 
+function useToolBarDropdownStore() {
+    const component = useComponent();
+    const topbarStore = useStore(TopBarToolStore);
+    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
@@ -70332,13 +71158,12 @@ class BorderEditor extends Component {
 class BorderEditorWidget extends 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 = useRef("borderEditorButton");
     state = useState({
         currentColor: DEFAULT_BORDER_DESC.color,
@@ -70346,12 +71171,16 @@ class BorderEditorWidget extends Component {
         currentPosition: undefined,
     });
     setup() {
-        onWillUpdateProps((newProps) => {
-            if (!newProps.showBorderEditor) {
+        this.topBarToolStore = useToolBarDropdownStore();
+        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();
@@ -70374,6 +71203,17 @@ class BorderEditorWidget extends Component {
         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;
@@ -70390,93 +71230,42 @@ class BorderEditorWidget extends Component {
     }
 }
 
-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 Component {
-    static template = "o-spreadsheet-TopBarComposer";
-    static props = {};
-    static components = { Composer };
-    composerFocusStore;
-    composerStore;
-    composerInterface;
+class PaintFormatButton extends 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 Component {
     static template = "o-spreadsheet-TableDropdownButton";
     static components = { TableStylesPopover, ActionButton };
-    static props = {};
+    static props = {
+        class: { type: String, optional: true },
+    };
+    topBarToolStore;
     state = useState({ popoverProps: undefined });
+    setup() {
+        this.topBarToolStore = useToolBarDropdownStore();
+    }
     onStylePicked(styleId) {
         const sheetId = this.env.model.getters.getActiveSheetId();
         const tableConfig = { ...this.tableConfig, styleId };
@@ -70492,12 +71281,13 @@ class TableDropdownButton extends Component {
             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",
@@ -70509,8 +71299,8 @@ class TableDropdownButton extends Component {
     }
     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",
         };
@@ -70520,35 +71310,347 @@ class TableDropdownButton extends Component {
     }
 }
 
-class PaintFormatButton extends Component {
-    static template = "o-spreadsheet-PaintFormatButton";
+class TopBarColorEditor extends Component {
+    static components = { ColorPickerWidget };
+    static props = { class: String, style: String, icon: String, title: String };
+    static template = "o-spreadsheet-ColorEditor";
+    topBarToolStore;
+    state = 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 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 = 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 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 Component {
+    static template = "o-spreadsheet-NumberFormatsTool";
+    static components = { Menu, ActionButton };
+    static props = { class: String };
+    formatNumberMenuItemSpec = formatNumberMenuItemSpec;
+    topBarToolStore;
+    buttonRef = useRef("buttonRef");
+    state = 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;
@@ -70598,47 +71700,7 @@ css /* scss */ `
 
       /* 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;
-              }
-            }
-          }
-        }
       }
     }
   }
@@ -70650,38 +71712,73 @@ class TopBar extends Component {
         dropdownMaxHeight: Number,
     };
     static components = {
-        ColorPickerWidget,
-        ColorPicker,
         Menu,
         TopBarComposer,
-        FontSizeEditor,
-        ActionButton,
-        PaintFormatButton,
-        BorderEditorWidget,
-        TableDropdownButton,
+        Popover,
     };
+    toolsCategories = topBarToolBarRegistry.getCategories();
     state = 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 = useRef("toolBarContainer");
+    toolbarRef = useRef("toolBar");
+    moreToolsContainerRef = useRef("moreToolsContainer");
+    moreToolsButtonRef = useRef("moreToolsButton");
+    spreadsheetRect = useSpreadsheetRect();
     setup() {
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.fingerprints = useStore(FormulaFingerprintStore);
+        this.topBarToolStore = useStore(TopBarToolStore);
         useExternalListener(window, "click", this.onExternalClick);
         onWillStart(() => this.updateCellState());
         onWillUpdateProps(() => this.updateCellState());
+        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
@@ -70711,12 +71808,6 @@ class TopBar extends Component {
             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();
@@ -70726,19 +71817,10 @@ class TopBar extends Component {
             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
@@ -70750,16 +71832,14 @@ class TopBar extends Component {
         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) {
@@ -70772,6 +71852,26 @@ class TopBar extends Component {
     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() {
@@ -70794,6 +71894,7 @@ class WebClipboardWrapper {
                  * 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({
@@ -70825,14 +71926,20 @@ class WebClipboardWrapper {
         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";
@@ -70849,13 +71956,17 @@ class WebClipboardWrapper {
         }
     }
     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,
         });
@@ -71134,7 +72245,7 @@ class Spreadsheet extends Component {
             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);
@@ -71245,8 +72356,7 @@ class Spreadsheet extends Component {
         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;
@@ -73417,7 +74527,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(formula, value) {
+function addFormula(formula, value, formulaSpillRange) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
@@ -73425,10 +74535,17 @@ function addFormula(formula, value) {
     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) {
@@ -74418,7 +75535,7 @@ function addRows(construct, data, sheet) {
                 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;
                     }
@@ -74704,6 +75821,30 @@ function createWorksheets(data, construct) {
     `;
         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",
@@ -74712,6 +75853,10 @@ function createWorksheets(data, construct) {
         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;
 }
 /**
@@ -75628,6 +76773,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.3.0-alpha.1";
-__info__.date = "2025-02-25T06:00:14.885Z";
-__info__.hash = "be4d957";
+__info__.version = "18.3.0-alpha.3";
+__info__.date = "2025-03-07T10:41:05.411Z";
+__info__.hash = "f59f5f6";