@odoo/o-spreadsheet 16.3.0-alpha.2 → 16.3.0-alpha.4

package/dist/o-spreadsheet.iife.js

@@ -114,88 +114,89 @@
   const BACKGROUND_HEADER_FILTER_COLOR = "#E6F4EA";
   const BACKGROUND_HEADER_SELECTED_FILTER_COLOR = "#CEEAD6";
   const SEPARATOR_COLOR = "#E0E2E4";
-  // Color picker
+  const ICONS_COLOR = "#4A4F59";
+  // Color picker defaults as upper case HEX to match `toHex`helper
   const COLOR_PICKER_DEFAULTS = [
       "#000000",
       "#434343",
       "#666666",
       "#999999",
-      "#b7b7b7",
-      "#cccccc",
-      "#d9d9d9",
-      "#efefef",
-      "#f3f3f3",
-      "#ffffff",
+      "#B7B7B7",
+      "#CCCCCC",
+      "#D9D9D9",
+      "#EFEFEF",
+      "#F3F3F3",
+      "#FFFFFF",
       "#980000",
-      "#ff0000",
-      "#ff9900",
-      "#ffff00",
-      "#00ff00",
-      "#00ffff",
-      "#4a86e8",
-      "#0000ff",
-      "#9900ff",
-      "#ff00ff",
-      "#e6b8af",
-      "#f4cccc",
-      "#fce5cd",
-      "#fff2cc",
-      "#d9ead3",
-      "#d0e0e3",
-      "#c9daf8",
-      "#cfe2f3",
-      "#d9d2e9",
-      "#ead1dc",
-      "#dd7e6b",
-      "#ea9999",
-      "#f9cb9c",
-      "#ffe599",
-      "#b6d7a8",
-      "#a2c4c9",
-      "#a4c2f4",
-      "#9fc5e8",
-      "#b4a7d6",
-      "#d5a6bd",
-      "#cc4125",
-      "#e06666",
-      "#f6b26b",
-      "#ffd966",
-      "#93c47d",
-      "#76a5af",
-      "#6d9eeb",
-      "#6fa8dc",
-      "#8e7cc3",
-      "#c27ba0",
-      "#a61c00",
-      "#cc0000",
-      "#e69138",
-      "#f1c232",
-      "#6aa84f",
-      "#45818e",
-      "#3c78d8",
-      "#3d85c6",
-      "#674ea7",
-      "#a64d79",
-      "#85200c",
+      "#FF0000",
+      "#FF9900",
+      "#FFFF00",
+      "#00FF00",
+      "#00FFFF",
+      "#4A86E8",
+      "#0000FF",
+      "#9900FF",
+      "#FF00FF",
+      "#E6B8AF",
+      "#F4CCCC",
+      "#FCE5CD",
+      "#FFF2CC",
+      "#D9EAD3",
+      "#D0E0E3",
+      "#C9DAF8",
+      "#CFE2F3",
+      "#D9D2E9",
+      "#EAD1DC",
+      "#DD7E6B",
+      "#EA9999",
+      "#F9CB9C",
+      "#FFE599",
+      "#B6D7A8",
+      "#A2C4C9",
+      "#A4C2F4",
+      "#9FC5E8",
+      "#B4A7D6",
+      "#D5A6BD",
+      "#CC4125",
+      "#E06666",
+      "#F6B26B",
+      "#FFD966",
+      "#93C47D",
+      "#76A5AF",
+      "#6D9EEB",
+      "#6FA8DC",
+      "#8E7CC3",
+      "#C27BA0",
+      "#A61C00",
+      "#CC0000",
+      "#E69138",
+      "#F1C232",
+      "#6AA84F",
+      "#45818E",
+      "#3C78D8",
+      "#3D85C6",
+      "#674EA7",
+      "#A64D79",
+      "#85200C",
       "#990000",
-      "#b45f06",
-      "#bf9000",
-      "#38761d",
-      "#134f5c",
-      "#1155cc",
-      "#0b5394",
-      "#351c75",
-      "#741b47",
-      "#5b0f00",
+      "#B45F06",
+      "#BF9000",
+      "#38761D",
+      "#134F5C",
+      "#1155CC",
+      "#0B5394",
+      "#351C75",
+      "#741B47",
+      "#5B0F00",
       "#660000",
-      "#783f04",
-      "#7f6000",
-      "#274e13",
-      "#0c343d",
-      "#1c4587",
+      "#783F04",
+      "#7F6000",
+      "#274E13",
+      "#0C343D",
+      "#1C4587",
       "#073763",
-      "#20124d",
-      "#4c1130",
+      "#20124D",
+      "#4C1130",
   ];
   // Dimensions
   const MIN_ROW_HEIGHT = 10;
@@ -220,21 +221,23 @@
   const FILTER_ICON_EDGE_LENGTH = 17;
   // Menus
   const MENU_WIDTH = 250;
-  const MENU_VERTICAL_PADDING = 8;
-  const MENU_ITEM_HEIGHT = 28;
+  const MENU_VERTICAL_PADDING = 6;
+  const MENU_ITEM_HEIGHT = 26;
+  const MENU_ITEM_PADDING_HORIZONTAL = 13;
+  const MENU_ITEM_PADDING_VERTICAL = 4;
   const MENU_SEPARATOR_BORDER_WIDTH = 1;
   const MENU_SEPARATOR_PADDING = 5;
-  const MENU_SEPARATOR_HEIGHT = MENU_SEPARATOR_BORDER_WIDTH + 2 * MENU_SEPARATOR_PADDING;
   // Fonts
   const DEFAULT_FONT_WEIGHT = "400";
   const DEFAULT_FONT_SIZE = 10;
   const HEADER_FONT_SIZE = 11;
   const DEFAULT_FONT = "'Roboto', arial";
+  const DEFAULT_VERTICAL_ALIGN = "middle";
   // Borders
   const DEFAULT_BORDER_DESC = ["thin", "#000"];
   const DEFAULT_FILTER_BORDER_DESC = ["thin", FILTERS_COLOR];
   // DateTimeRegex
-  const DATETIME_FORMAT = /[ymd:]/;
+  const DATETIME_FORMAT = /[ymdhs:]/;
   // Ranges
   const INCORRECT_RANGE_STRING = CellErrorType.InvalidReference;
   // Max Number of history steps kept in memory
@@ -272,15 +275,22 @@
       ComponentsImportance[ComponentsImportance["Highlight"] = 5] = "Highlight";
       ComponentsImportance[ComponentsImportance["Figure"] = 10] = "Figure";
       ComponentsImportance[ComponentsImportance["ScrollBar"] = 15] = "ScrollBar";
-      ComponentsImportance[ComponentsImportance["Dropdown"] = 16] = "Dropdown";
+      ComponentsImportance[ComponentsImportance["GridPopover"] = 19] = "GridPopover";
       ComponentsImportance[ComponentsImportance["GridComposer"] = 20] = "GridComposer";
-      ComponentsImportance[ComponentsImportance["TopBarComposer"] = 21] = "TopBarComposer";
+      ComponentsImportance[ComponentsImportance["Dropdown"] = 21] = "Dropdown";
       ComponentsImportance[ComponentsImportance["IconPicker"] = 25] = "IconPicker";
-      ComponentsImportance[ComponentsImportance["Popover"] = 30] = "Popover";
+      ComponentsImportance[ComponentsImportance["TopBarComposer"] = 30] = "TopBarComposer";
+      ComponentsImportance[ComponentsImportance["Popover"] = 35] = "Popover";
       ComponentsImportance[ComponentsImportance["FigureAnchor"] = 1000] = "FigureAnchor";
       ComponentsImportance[ComponentsImportance["FigureSnapLine"] = 1001] = "FigureSnapLine";
   })(ComponentsImportance || (ComponentsImportance = {}));
-  const DEFAULT_SHEETVIEW_SIZE = 1000;
+  let DEFAULT_SHEETVIEW_SIZE = 0;
+  function getDefaultSheetViewSize() {
+      return DEFAULT_SHEETVIEW_SIZE;
+  }
+  function setDefaultSheetViewSize(size) {
+      DEFAULT_SHEETVIEW_SIZE = size;
+  }
   const MAXIMAL_FREEZABLE_RATIO = 0.85;
   const NEWLINE = "\n";
   const FONT_SIZES = [6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 36];
@@ -715,7 +725,7 @@
    * '\w' captures [0-9][a-z][A-Z] and _.
    * @param sheetName Name of the sheet
    */
-  function getComposerSheetName(sheetName) {
+  function getCanonicalSheetName(sheetName) {
       var _a;
       if (((_a = sheetName.match(/\w/g)) === null || _a === void 0 ? void 0 : _a.length) !== sheetName.length) {
           sheetName = `'${sheetName}'`;
@@ -736,8 +746,9 @@
           return DEFAULT_CELL_HEIGHT;
       }
       const fontSize = computeTextFontSizeInPixels(cell.style);
-      const multiLineText = cell.content.split(NEWLINE);
-      return computeTextLinesHeight(fontSize, multiLineText.length) + 2 * PADDING_AUTORESIZE_VERTICAL;
+      // the number of lines should be computed from the formula result, but it's not evaluated at this point
+      const numberOfLines = cell.isFormula ? 1 : cell.content.split(NEWLINE).length;
+      return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
   }
   function computeTextWidth(context, text, style) {
       context.save();
@@ -1089,6 +1100,8 @@
       return text;
   }
 
+  const RBA_REGEX = /rgba?\(|\s+|\)/gi;
+  const HEX_MATCH = /^#([A-F\d]{2}){3,4}$/g;
   const colors$1 = [
       "#eb6d00",
       "#0074d9",
@@ -1114,7 +1127,10 @@
   }
   /**
    * Converts any CSS color value to a standardized hex6 value.
-   * Accepts: hex3, hex6, hex8 and rgb (rgba is not supported)
+   * Accepts: hex3, hex6, hex8, rgb[1] and rgba[1].
+   *
+   * [1] under the form rgb(r, g, b, a?) or rgba(r, g, b, a?)
+   * with r,g,b ∈ [0, 255] and a ∈ [0, 1]
    *
    * toHex("#ABC")
    * >> "#AABBCC"
@@ -1125,27 +1141,31 @@
    * toHex("rgb(30, 80, 16)")
    * >> "#1E5010"
    *
+   *  * toHex("rgb(30, 80, 16, 0.5)")
+   * >> "#1E501080"
+   *
    */
   function toHex(color) {
-      if (color.includes("rgba")) {
-          throw new Error(`rgba() conversion currently not supported: ${color}`);
-      }
-      if (color.includes("rgb")) {
-          return rgbToHex6(color);
+      let hexColor = color;
+      if (color.startsWith("rgb")) {
+          hexColor = rgbaStringToHex(color);
       }
-      color = color.replace("#", "").toUpperCase();
-      if (color.length === 3 || color.length === 4) {
-          color = color.split("").reduce((acc, h) => acc + h + h, "");
+      else {
+          hexColor = color.replace("#", "").toUpperCase();
+          if (hexColor.length === 3 || hexColor.length === 4) {
+              hexColor = hexColor.split("").reduce((acc, h) => acc + h + h, "");
+          }
+          hexColor = `#${hexColor}`;
       }
-      if (color.replace(/[a-f0-9]/gi, "") !== "") {
-          throw new Error("invalid color");
+      if (!hexColor.match(HEX_MATCH)) {
+          throw new Error(`invalid color input: ${color}`);
       }
-      return "#" + color;
+      return hexColor;
   }
   function isColorValid(color) {
       try {
-          const { r, g, b, a } = colorToRGBA(color);
-          return (isColorValueValid(r) && isColorValueValid(g) && isColorValueValid(b) && isColorValueValid(a));
+          toHex(color);
+          return true;
       }
       catch (error) {
           return false;
@@ -1178,15 +1198,29 @@
   /**
    * Convert a CSS rgb color string to a standardized hex6 color value.
    *
-   * rgbToHex6("rgb(30, 80, 16)")
+   * rgbaStringToHex("rgb(30, 80, 16)")
    * >> "#1E5010"
+   *
+   * rgbaStringToHex("rgba(30, 80, 16, 0.5)")
+   * >> "#1E501080"
+   *
+   * DOES NOT SUPPORT NON INTEGER RGB VALUES
    */
-  function rgbToHex6(color) {
-      return ("#" +
-          concat(color
-              .slice(4, -1)
-              .split(",")
-              .map((valueString) => parseInt(valueString, 10).toString(16).padStart(2, "0"))).toUpperCase());
+  function rgbaStringToHex(color) {
+      const stringVals = color.replace(RBA_REGEX, "").split(",");
+      let alphaHex = 255;
+      if (stringVals.length !== 3 && stringVals.length !== 4) {
+          throw new Error("invalid color");
+      }
+      else if (stringVals.length === 4) {
+          const alpha = parseFloat(stringVals.pop() || "1");
+          alphaHex = Math.round((alpha || 1) * 255);
+      }
+      const vals = stringVals.map((val) => parseInt(val, 10));
+      if (alphaHex !== 255) {
+          vals.push(alphaHex);
+      }
+      return "#" + concat(vals.map((value) => value.toString(16).padStart(2, "0"))).toUpperCase();
   }
   /**
    * RGBA to HEX representation (#RRGGBBAA).
@@ -1208,7 +1242,7 @@
           a = "0" + a;
       if (a === "ff")
           a = "";
-      return "#" + r + g + b + a;
+      return ("#" + r + g + b + a).toUpperCase();
   }
   /**
    * Color string to RGBA representation
@@ -1329,6 +1363,9 @@
       s = +(s * 100).toFixed(1);
       l = +(l * 100).toFixed(1);
       return { a: rgba.a, h, s, l };
+  }
+  function isSameColor(color1, color2) {
+      return isColorValid(color1) && isColorValid(color2) && toHex(color1) === toHex(color2);
   }
 
   /** Reference of a cell (eg. A1, $B$5) */
@@ -1480,7 +1517,7 @@
    *   formula, commas are used to separate arguments
    * - it does not support % symbol, in formulas % is an operator
    */
-  const formulaNumberRegexp = /^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+/;
+  const formulaNumberRegexp = /(^-?\d+(\.?\d*(e\d+)?)?|^-?\.\d+)(?!\w|!)/;
   const pIntegerAndDecimals = "(\\d+(,\\d{3,})*(\\.\\d*)?)"; // pattern that match integer number with or without decimal digits
   const pOnlyDecimals = "(\\.\\d+)"; // pattern that match only expression with decimal digits
   const pScientificFormat = "(e(\\+|-)?\\d+)?"; // pattern that match scientific format between zero and one time (should be placed before pPercentFormat)
@@ -3089,6 +3126,7 @@
   const LINE_HEIGHT = 1.2;
   css /* scss */ `
   div.o-scorecard {
+    font-family: ${DEFAULT_FONT};
     user-select: none;
     background-color: white;
     display: flex;
@@ -5155,6 +5193,11 @@
               this.currentPosition = newPosition;
           });
       }
+      get popoverStyle() {
+          return cssPropertiesToCss({
+              "z-index": `${this.props.zIndex}`,
+          });
+      }
   }
   Popover.template = "o-spreadsheet-Popover";
   Popover.defaultProps = {
@@ -5163,6 +5206,7 @@
       onMouseWheel: () => { },
       onPopoverMoved: () => { },
       onPopoverHidden: () => { },
+      zIndex: ComponentsImportance.Popover,
   };
   Popover.props = {
       anchorRect: Object,
@@ -5174,6 +5218,7 @@
       onMouseWheel: { type: Function, optional: true },
       onPopoverHidden: { type: Function, optional: true },
       onPopoverMoved: { type: Function, optional: true },
+      zIndex: { type: Number, optional: true },
       slots: Object,
   };
   class PopoverPositionContext {
@@ -5317,7 +5362,7 @@
       align-items: center;
       box-sizing: border-box;
       height: ${MENU_ITEM_HEIGHT}px;
-      padding: 4px 16px;
+      padding: ${MENU_ITEM_PADDING_VERTICAL}px ${MENU_ITEM_PADDING_HORIZONTAL}px;
       cursor: pointer;
       user-select: none;
 
@@ -5331,11 +5376,18 @@
         display: flex;
         justify-content: space-between;
       }
+
       .o-menu-item-icon {
-        margin-top: auto;
-        margin-bottom: auto;
+        display: inline-block;
+        margin-right: calc(${MENU_ITEM_PADDING_HORIZONTAL}px * 3 / 5);
+        width: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
+        line-height: ${MENU_ITEM_HEIGHT - 2 * MENU_ITEM_PADDING_VERTICAL}px;
+
+        .o-icon {
+          color: ${ICONS_COLOR};
+        }
       }
-      .o-icon {
+      .o-menu-item-root {
         width: 10px;
       }
 
@@ -5376,24 +5428,30 @@
               }
           });
       }
-      get visibleMenuItems() {
-          return this.props.menuItems.filter((x) => x.isVisible(this.env));
+      get menuItemsAndSeparators() {
+          const menuItemsAndSeparators = [];
+          for (let i = 0; i < this.props.menuItems.length; i++) {
+              const menuItem = this.props.menuItems[i];
+              if (menuItem.isVisible(this.env)) {
+                  menuItemsAndSeparators.push(menuItem);
+              }
+              if (menuItem.separator &&
+                  i !== this.props.menuItems.length - 1 && // no separator at the end
+                  menuItemsAndSeparators[menuItemsAndSeparators.length - 1] !== "separator" // no double separator
+              ) {
+                  menuItemsAndSeparators.push("separator");
+              }
+          }
+          if (menuItemsAndSeparators.length === 1 && menuItemsAndSeparators[0] === "separator") {
+              return [];
+          }
+          return menuItemsAndSeparators;
       }
       get subMenuPosition() {
           const position = Object.assign({}, this.subMenu.position);
           position.y -= this.subMenu.scrollOffset || 0;
           return position;
       }
-      get menuHeight() {
-          const menuItems = this.visibleMenuItems;
-          let menuItemsHeight = this.getMenuItemsHeight(menuItems);
-          // We don't display separator at the end of a menu
-          if (menuItems[menuItems.length - 1].separator) {
-              menuItemsHeight -= MENU_SEPARATOR_HEIGHT;
-          }
-          const menuHeight = 2 * MENU_VERTICAL_PADDING + menuItemsHeight;
-          return this.props.maxHeight ? Math.min(menuHeight, this.props.maxHeight) : menuHeight;
-      }
       get popoverProps() {
           const isRoot = this.props.depth === 1;
           return {
@@ -5407,15 +5465,24 @@
               verticalOffset: isRoot ? 0 : MENU_VERTICAL_PADDING,
               onPopoverHidden: () => this.closeSubMenu(),
               onPopoverMoved: () => this.closeSubMenu(),
-              maxHeight: this.menuHeight,
           };
       }
+      get childrenHaveIcon() {
+          return this.props.menuItems.some((menuItem) => !menuItem.icon && !!menuItem.isActive);
+      }
+      getIconName(menu) {
+          var _a;
+          if ((_a = menu.isActive) === null || _a === void 0 ? void 0 : _a.call(menu, this.env)) {
+              return "o-spreadsheet-Icon.CHECK";
+          }
+          return "";
+      }
       getColor(menu) {
           return menu.textColor ? `color: ${menu.textColor}` : undefined;
       }
       async activateMenu(menu) {
           var _a, _b, _c;
-          const result = await ((_a = menu.action) === null || _a === void 0 ? void 0 : _a.call(menu, this.env));
+          const result = await ((_a = menu.execute) === null || _a === void 0 ? void 0 : _a.call(menu, this.env));
           this.close();
           (_c = (_b = this.props).onMenuClicked) === null || _c === void 0 ? void 0 : _c.call(_b, { detail: result });
       }
@@ -5423,14 +5490,6 @@
           this.closeSubMenu();
           this.props.onClose();
       }
-      /**
-       * Return the number of pixels between the top of the menu
-       * and the menu item at a given index.
-       */
-      subMenuVerticalPosition(menuIndex) {
-          const menusAbove = this.visibleMenuItems.slice(0, menuIndex);
-          return this.position.y + this.getMenuItemsHeight(menusAbove) + MENU_VERTICAL_PADDING;
-      }
       onExternalClick(ev) {
           // Don't close a root menu when clicked to open the submenus.
           const el = this.menuRef.el;
@@ -5440,15 +5499,11 @@
           ev.closedMenuId = this.props.menuId;
           this.close();
       }
-      getMenuItemsHeight(menuItems) {
-          const numberOfSeparators = menuItems.filter((m) => m.separator).length;
-          return MENU_ITEM_HEIGHT * menuItems.length + MENU_SEPARATOR_HEIGHT * numberOfSeparators;
-      }
       getName(menu) {
           return menu.name(this.env);
       }
       isRoot(menu) {
-          return !menu.action;
+          return !menu.execute;
       }
       isEnabled(menu) {
           if (menu.isEnabled(this.env)) {
@@ -5463,8 +5518,11 @@
        * If the given menu is not disabled, open it's submenu at the
        * correct position according to available surrounding space.
        */
-      openSubMenu(menu, menuIndex) {
-          const y = this.subMenuVerticalPosition(menuIndex);
+      openSubMenu(menu, menuIndex, ev) {
+          const parentMenuEl = ev.currentTarget;
+          if (!parentMenuEl)
+              return;
+          const y = parentMenuEl.getBoundingClientRect().top;
           this.subMenu.position = {
               x: this.position.x + this.props.depth * MENU_WIDTH,
               y: y - (this.subMenu.scrollOffset || 0),
@@ -5481,20 +5539,20 @@
           this.subMenu.isOpen = false;
           this.subMenu.parentMenu = undefined;
       }
-      onClickMenu(menu, menuIndex) {
+      onClickMenu(menu, menuIndex, ev) {
           if (this.isEnabled(menu)) {
               if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, menuIndex);
+                  this.openSubMenu(menu, menuIndex, ev);
               }
               else {
                   this.activateMenu(menu);
               }
           }
       }
-      onMouseOver(menu, position) {
-          if (menu.isEnabled(this.env)) {
+      onMouseOver(menu, position, ev) {
+          if (this.isEnabled(menu)) {
               if (this.isRoot(menu)) {
-                  this.openSubMenu(menu, position);
+                  this.openSubMenu(menu, position, ev);
               }
               else {
                   this.closeSubMenu();
@@ -5629,11 +5687,82 @@
       onClosed: { type: Function, optional: true },
   };
 
-  function createMenu(menuItems) {
-      return menuItems.map(createMenuItem).sort((a, b) => a.sequence - b.sequence);
+  const linkSheet = {
+      name: _lt("Link sheet"),
+      children: [
+          (env) => {
+              const sheets = env.model.getters
+                  .getSheetIds()
+                  .map((sheetId) => env.model.getters.getSheet(sheetId));
+              return sheets.map((sheet) => ({
+                  id: sheet.id,
+                  name: sheet.name,
+                  execute: () => markdownLink(sheet.name, buildSheetLink(sheet.id)),
+              }));
+          },
+      ],
+  };
+  const deleteSheet = {
+      name: _lt("Delete"),
+      isVisible: (env) => {
+          return env.model.getters.getSheetIds().length > 1;
+      },
+      execute: (env) => env.askConfirmation(_lt("Are you sure you want to delete this sheet ?"), () => {
+          env.model.dispatch("DELETE_SHEET", { sheetId: env.model.getters.getActiveSheetId() });
+      }),
+  };
+  const duplicateSheet = {
+      name: _lt("Duplicate"),
+      execute: (env) => {
+          const sheetIdFrom = env.model.getters.getActiveSheetId();
+          const sheetIdTo = env.model.uuidGenerator.uuidv4();
+          env.model.dispatch("DUPLICATE_SHEET", {
+              sheetId: sheetIdFrom,
+              sheetIdTo,
+          });
+          env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom, sheetIdTo });
+      },
+  };
+  const renameSheet = (args) => {
+      return {
+          name: _lt("Rename"),
+          execute: args.renameSheetCallback,
+      };
+  };
+  const sheetMoveRight = {
+      name: _lt("Move right"),
+      isVisible: (env) => {
+          const sheetId = env.model.getters.getActiveSheetId();
+          const sheetIds = env.model.getters.getVisibleSheetIds();
+          return sheetIds.indexOf(sheetId) !== sheetIds.length - 1;
+      },
+      execute: (env) => env.model.dispatch("MOVE_SHEET", {
+          sheetId: env.model.getters.getActiveSheetId(),
+          delta: 1,
+      }),
+  };
+  const sheetMoveLeft = {
+      name: _lt("Move left"),
+      isVisible: (env) => {
+          const sheetId = env.model.getters.getActiveSheetId();
+          return env.model.getters.getVisibleSheetIds()[0] !== sheetId;
+      },
+      execute: (env) => env.model.dispatch("MOVE_SHEET", {
+          sheetId: env.model.getters.getActiveSheetId(),
+          delta: -1,
+      }),
+  };
+  const hideSheet = {
+      name: _lt("Hide sheet"),
+      isVisible: (env) => env.model.getters.getVisibleSheetIds().length !== 1,
+      execute: (env) => env.model.dispatch("HIDE_SHEET", { sheetId: env.model.getters.getActiveSheetId() }),
+  };
+
+  function createActions(menuItems) {
+      return menuItems.map(createAction).sort((a, b) => a.sequence - b.sequence);
   }
   const uuidGenerator$1 = new UuidGenerator();
-  function createMenuItem(item) {
+  function createAction(item) {
       const name = item.name;
       const children = item.children;
       return {
@@ -5641,23 +5770,25 @@
           name: typeof name === "function" ? name : () => name,
           isVisible: item.isVisible ? item.isVisible : () => true,
           isEnabled: item.isEnabled ? item.isEnabled : () => true,
-          action: item.action,
+          isActive: item.isActive,
+          execute: item.execute,
           children: children
               ? (env) => {
                   return children
                       .map((child) => (typeof child === "function" ? child(env) : child))
                       .flat()
-                      .map(createMenuItem);
+                      .map(createAction);
               }
               : () => [],
           isReadonlyAllowed: item.isReadonlyAllowed || false,
           separator: item.separator || false,
-          icon: item.icon,
+          icon: item.icon || "",
           description: item.description || "",
           textColor: item.textColor,
           sequence: item.sequence || 0,
       };
-  }
+  }
+
   /**
    * The class Registry is extended in order to add the function addChild
    *
@@ -5704,7 +5835,7 @@
           return this;
       }
       getMenuItems() {
-          return createMenu(this.getAll());
+          return createActions(this.getAll());
       }
   }
 
@@ -5712,20 +5843,9 @@
   // Link Menu Registry
   //------------------------------------------------------------------------------
   const linkMenuRegistry = new MenuItemRegistry();
-  linkMenuRegistry
-      .add("sheet", {
-      name: _lt("Link sheet"),
+  linkMenuRegistry.add("sheet", {
+      ...linkSheet,
       sequence: 10,
-  })
-      .addChild("sheet_list", ["sheet"], (env) => {
-      const sheets = env.model.getters
-          .getSheetIds()
-          .map((sheetId) => env.model.getters.getSheet(sheetId));
-      return sheets.map((sheet) => ({
-          id: sheet.id,
-          name: sheet.name,
-          action: () => markdownLink(sheet.name, buildSheetLink(sheet.id)),
-      }));
   });
 
   const MENU_OFFSET_X = 320;
@@ -6071,8 +6191,8 @@
       const dataSets = [];
       for (const sheetXC of dataSetsString) {
           const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
-          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName } = dataRange;
-          if (invalidSheetName) {
+          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
+          if (invalidSheetName || invalidXc) {
               continue;
           }
           // It's a rectangle. We treat all columns (arbitrary) as different data series.
@@ -6097,14 +6217,8 @@
                       : undefined));
               }
           }
-          else if (zone.left === zone.right && zone.top === zone.bottom) {
-              // A single cell. If it's only the title, the dataset is not added.
-              if (!dataSetsHaveTitle) {
-                  dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
-              }
-          }
           else {
-              /* 1 row or 1 column */
+              /* 1 cell, 1 row or 1 column */
               dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
                   ? {
                       top: zone.top,
@@ -6158,6 +6272,18 @@
           range: getters.getRangeString(dataRange, "forceSheetReference"),
       };
   }
+  function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
+      if (!labelRange)
+          return undefined;
+      let zone = {
+          ...labelRange.zone,
+      };
+      if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
+          zone.top = zone.top + 1;
+      }
+      const range = labelRange.clone({ zone });
+      return getters.getRangeString(range, "forceSheetReference");
+  }
   /**
    * Transform a chart definition which supports dataSets (dataSets and LabelRange)
    * with an executed command
@@ -6242,6 +6368,20 @@
       }
       return 0 /* CommandResult.Success */;
   }
+  function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
+      if (!dataSetsHaveTitle)
+          return false;
+      if (!labelRange)
+          return false;
+      if (!dataset)
+          return true;
+      const datasetLength = getZoneArea(dataset.dataRange.zone);
+      const labelLength = getZoneArea(labelRange.zone);
+      if (labelLength < datasetLength) {
+          return false;
+      }
+      return true;
+  }
   // ---------------------------------------------------------------------------
   // Scorecard
   // ---------------------------------------------------------------------------
@@ -6369,18 +6509,6 @@
           [43 /* CommandResult.GaugeUpperInflectionPointNaN */]: _lt("The upper inflection point value must be a number"),
       },
   };
-  const NumberFormatTerms = {
-      Automatic: _lt("Automatic"),
-      Number: _lt("Number"),
-      Percent: _lt("Percent"),
-      Currency: _lt("Currency"),
-      CurrencyRounded: _lt("Currency rounded"),
-      Date: _lt("Date"),
-      Time: _lt("Time"),
-      DateTime: _lt("Date time"),
-      Duration: _lt("Duration"),
-      CustomCurrency: _lt("Custom currency"),
-  };
   const CustomCurrencyTerms = {
       Custom: _lt("Custom"),
   };
@@ -6611,6 +6739,7 @@
           this.legendPosition = definition.legendPosition;
           this.stacked = definition.stacked;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static transformDefinition(definition, executed) {
           return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -6678,11 +6807,13 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               dataSets,
+              labelRange,
           };
       }
       updateRanges(applyChange) {
@@ -6750,6 +6881,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
@@ -7172,6 +7308,7 @@
           this.labelsAsText = definition.labelsAsText;
           this.stacked = definition.stacked;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -7239,11 +7376,13 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               dataSets,
+              labelRange,
           };
       }
       copyForSheetId(sheetId) {
@@ -7381,6 +7520,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (axisType === "time") {
           ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
@@ -7439,6 +7583,7 @@
           this.background = definition.background;
           this.legendPosition = definition.legendPosition;
           this.aggregated = definition.aggregated;
+          this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
       }
       static transformDefinition(definition, executed) {
           return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -7502,12 +7647,14 @@
           const dataSets = this.dataSets
               .map((ds) => toExcelDataset(this.getters, ds))
               .filter((ds) => ds.range !== ""); // && range !== INCORRECT_RANGE_STRING ? show incorrect #ref ?
+          const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
           return {
               ...this.getDefinition(),
               backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
               fontColor: toXlsxHexColor(chartFontColor(this.background)),
               verticalAxisPosition: "left",
               dataSets,
+              labelRange,
           };
       }
       updateRanges(applyChange) {
@@ -7553,6 +7700,11 @@
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
       let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+      if (chart.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
       ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
@@ -7900,7 +8052,7 @@
               id: "edit",
               name: _lt("Edit"),
               sequence: 1,
-              action: () => {
+              execute: () => {
                   env.model.dispatch("SELECT_FIGURE", { id: figureId });
                   env.openSidePanel("ChartPanel");
               },
@@ -7909,7 +8061,7 @@
           getCutMenuItem(figureId, env),
           getDeleteMenuItem(figureId, onFigureDeleted, env),
       ];
-      return createMenu(menuItemSpecs);
+      return createActions(menuItemSpecs);
   }
   function getImageMenuRegistry(figureId, onFigureDeleted, env) {
       const menuItemSpecs = [
@@ -7919,7 +8071,7 @@
               id: "reset_size",
               name: _lt("Reset size"),
               sequence: 4,
-              action: () => {
+              execute: () => {
                   const size = env.model.getters.getImageSize(figureId);
                   const { height, width } = getMaxFigureSize(env.model.getters, size);
                   env.model.dispatch("UPDATE_FIGURE", {
@@ -7932,7 +8084,7 @@
           },
           getDeleteMenuItem(figureId, onFigureDeleted, env),
       ];
-      return createMenu(menuItemSpecs);
+      return createActions(menuItemSpecs);
   }
   function getCopyMenuItem(figureId, env) {
       return {
@@ -7940,7 +8092,7 @@
           name: _lt("Copy"),
           sequence: 2,
           description: "Ctrl+C",
-          action: async () => {
+          execute: async () => {
               env.model.dispatch("SELECT_FIGURE", { id: figureId });
               env.model.dispatch("COPY");
               await env.clipboard.write(env.model.getters.getClipboardContent());
@@ -7953,7 +8105,7 @@
           name: _lt("Cut"),
           sequence: 3,
           description: "Ctrl+X",
-          action: async () => {
+          execute: async () => {
               env.model.dispatch("SELECT_FIGURE", { id: figureId });
               env.model.dispatch("CUT");
               await env.clipboard.write(env.model.getters.getClipboardContent());
@@ -7965,7 +8117,7 @@
           id: "delete",
           name: _lt("Delete"),
           sequence: 10,
-          action: () => {
+          execute: () => {
               env.model.dispatch("DELETE_FIGURE", {
                   sheetId: env.model.getters.getActiveSheetId(),
                   id: figureId,
@@ -8072,6 +8224,22 @@
       ];
   }
 
+  const AddMergeInteractiveContent = {
+      MergeIsDestructive: _lt("Merging these cells will only preserve the top-leftmost value. Merge anyway?"),
+      MergeInFilter: _lt("You can't merge cells inside of an existing filter."),
+  };
+  function interactiveAddMerge(env, sheetId, target) {
+      const result = env.model.dispatch("ADD_MERGE", { sheetId, target });
+      if (result.isCancelledBecause(80 /* CommandResult.MergeInFilter */)) {
+          env.raiseError(AddMergeInteractiveContent.MergeInFilter);
+      }
+      else if (result.isCancelledBecause(3 /* CommandResult.MergeIsDestructive */)) {
+          env.askConfirmation(AddMergeInteractiveContent.MergeIsDestructive, () => {
+              env.model.dispatch("ADD_MERGE", { sheetId, target, force: true });
+          });
+      }
+  }
+
   /**
    * Create a function used to create a Chart based on the definition
    */
@@ -8188,7 +8356,6 @@
           labelRangeXc = zoneToXc({
               ...zone,
               right: zone.left,
-              top: dataSetsHaveTitle ? zone.top + 1 : zone.top,
           });
       }
       // Only display legend for several datasets.
@@ -8428,9 +8595,9 @@
       interactiveCut(env);
       await env.clipboard.write(env.model.getters.getClipboardContent());
   };
-  const PASTE_ACTION = async (env) => paste(env);
-  const PASTE_VALUE_ACTION = async (env) => paste(env, "onlyValue");
-  async function paste(env, pasteOption) {
+  const PASTE_ACTION = async (env) => paste$1(env);
+  const PASTE_VALUE_ACTION = async (env) => paste$1(env, "onlyValue");
+  async function paste$1(env, pasteOption) {
       const spreadsheetClipboard = env.model.getters.getClipboardTextContent();
       const osClipboard = await env.clipboard.readText();
       switch (osClipboard.status) {
@@ -8984,365 +9151,159 @@
       return env.model.getters.getSelectedZones().length === 1;
   };
 
-  //------------------------------------------------------------------------------
-  // Context Menu Registry
-  //------------------------------------------------------------------------------
-  const cellMenuRegistry = new MenuItemRegistry();
-  cellMenuRegistry
-      .add("cut", {
-      name: _lt("Cut"),
-      description: "Ctrl+X",
-      sequence: 10,
-      action: CUT_ACTION,
-  })
-      .add("copy", {
+  const undo = {
+      name: _lt("Undo"),
+      description: "Ctrl+Z",
+      execute: UNDO_ACTION,
+      isEnabled: (env) => env.model.getters.canUndo(),
+      icon: "o-spreadsheet-Icon.UNDO",
+  };
+  const redo = {
+      name: _lt("Redo"),
+      description: "Ctrl+Y",
+      execute: REDO_ACTION,
+      isEnabled: (env) => env.model.getters.canRedo(),
+      icon: "o-spreadsheet-Icon.REDO",
+  };
+  const copy = {
       name: _lt("Copy"),
       description: "Ctrl+C",
-      sequence: 20,
       isReadonlyAllowed: true,
-      action: COPY_ACTION,
-  })
-      .add("paste", {
-      name: _lt("Paste"),
-      description: "Ctrl+V",
-      sequence: 30,
-      action: PASTE_ACTION,
-  })
-      .add("paste_special", {
-      name: _lt("Paste special"),
-      sequence: 40,
-      separator: true,
-      isVisible: IS_NOT_CUT_OPERATION,
-  })
-      .addChild("paste_value_only", ["paste_special"], {
-      name: _lt("Paste values only"),
-      sequence: 10,
-      action: PASTE_VALUE_ACTION,
-  })
-      .addChild("paste_format_only", ["paste_special"], {
-      name: _lt("Paste format only"),
-      sequence: 20,
-      action: PASTE_FORMAT_ACTION,
-  })
-      .add("add_row_before", {
-      name: CELL_INSERT_ROWS_BEFORE_NAME,
-      sequence: 70,
-      action: INSERT_ROWS_BEFORE_ACTION,
-      isVisible: IS_ONLY_ONE_RANGE,
-  })
-      .add("add_column_before", {
-      name: CELL_INSERT_COLUMNS_BEFORE_NAME,
-      sequence: 90,
-      action: INSERT_COLUMNS_BEFORE_ACTION,
-      isVisible: IS_ONLY_ONE_RANGE,
-  })
-      .add("insert_cell", {
-      name: _lt("Insert cells"),
-      sequence: 100,
-      isVisible: IS_ONLY_ONE_RANGE,
-      separator: true,
-  })
-      .addChild("insert_cell_down", ["insert_cell"], {
-      name: _lt("Shift down"),
-      sequence: 10,
-      action: INSERT_CELL_SHIFT_DOWN,
-  })
-      .addChild("insert_cell_right", ["insert_cell"], {
-      name: _lt("Shift right"),
-      sequence: 20,
-      action: INSERT_CELL_SHIFT_RIGHT,
-  })
-      .add("delete_row", {
-      name: REMOVE_ROWS_NAME,
-      sequence: 110,
-      action: REMOVE_ROWS_ACTION,
-      isVisible: IS_ONLY_ONE_RANGE,
-  })
-      .add("delete_column", {
-      name: REMOVE_COLUMNS_NAME,
-      sequence: 120,
-      action: REMOVE_COLUMNS_ACTION,
-      isVisible: IS_ONLY_ONE_RANGE,
-  })
-      .add("delete_cell", {
-      name: _lt("Delete cells"),
-      sequence: 130,
-      isVisible: IS_ONLY_ONE_RANGE,
-  })
-      .addChild("delete_cell_up", ["delete_cell"], {
-      name: _lt("Shift up"),
-      sequence: 10,
-      action: DELETE_CELL_SHIFT_UP,
-  })
-      .addChild("delete_cell_down", ["delete_cell"], {
-      name: _lt("Shift left"),
-      sequence: 20,
-      action: DELETE_CELL_SHIFT_LEFT,
-  })
-      .add("insert_link", {
-      name: _lt("Insert link"),
-      separator: true,
-      sequence: 150,
-      action: INSERT_LINK,
-  });
-
-  const colMenuRegistry = new MenuItemRegistry();
-  colMenuRegistry
-      .add("cut", {
+      execute: COPY_ACTION,
+  };
+  const cut = {
       name: _lt("Cut"),
       description: "Ctrl+X",
-      sequence: 10,
-      action: CUT_ACTION,
-  })
-      .add("copy", {
-      name: _lt("Copy"),
-      description: "Ctrl+C",
-      sequence: 20,
-      isReadonlyAllowed: true,
-      action: COPY_ACTION,
-  })
-      .add("paste", {
+      execute: CUT_ACTION,
+  };
+  const paste = {
       name: _lt("Paste"),
       description: "Ctrl+V",
-      sequence: 30,
-      action: PASTE_ACTION,
-  })
-      .add("paste_special", {
+      execute: PASTE_ACTION,
+  };
+  const pasteSpecial = {
       name: _lt("Paste special"),
-      sequence: 40,
-      separator: true,
       isVisible: IS_NOT_CUT_OPERATION,
-  })
-      .addChild("paste_value_only", ["paste_special"], {
+  };
+  const pasteSpecialValue = {
       name: _lt("Paste value only"),
-      sequence: 10,
-      action: PASTE_VALUE_ACTION,
-  })
-      .addChild("paste_format_only", ["paste_special"], {
+      execute: PASTE_VALUE_ACTION,
+  };
+  const pasteSpecialFormat = {
       name: _lt("Paste format only"),
-      sequence: 20,
-      action: PASTE_FORMAT_ACTION,
-  })
-      .add("sort_columns", {
-      name: (env) => env.model.getters.getActiveCols().size > 1 ? _lt("Sort columns") : _lt("Sort column"),
-      sequence: 50,
+      execute: PASTE_FORMAT_ACTION,
+  };
+  const findAndReplace = {
+      name: _lt("Find and replace"),
+      description: "Ctrl+H",
+      isReadonlyAllowed: true,
+      execute: OPEN_FAR_SIDEPANEL_ACTION,
+  };
+  const deleteValues = {
+      name: _lt("Delete values"),
+      execute: DELETE_CONTENT_ACTION,
+  };
+  const deleteRows = {
+      name: REMOVE_ROWS_NAME,
+      execute: REMOVE_ROWS_ACTION,
+  };
+  const deleteRow = {
+      ...deleteRows,
       isVisible: IS_ONLY_ONE_RANGE,
-      separator: true,
-  })
-      .addChild("sort_ascending", ["sort_columns"], {
-      name: _lt("Ascending (A ⟶ Z)"),
-      sequence: 10,
-      action: SORT_CELLS_ASCENDING,
-  })
-      .addChild("sort_descending", ["sort_columns"], {
-      name: _lt("Descending (Z ⟶ A)"),
-      sequence: 20,
-      action: SORT_CELLS_DESCENDING,
-  })
-      .add("add_column_before", {
-      name: COLUMN_INSERT_COLUMNS_BEFORE_NAME,
-      sequence: 70,
-      action: INSERT_COLUMNS_BEFORE_ACTION,
-  })
-      .add("add_column_after", {
-      name: COLUMN_INSERT_COLUMNS_AFTER_NAME,
-      sequence: 80,
-      action: INSERT_COLUMNS_AFTER_ACTION,
-  })
-      .add("delete_column", {
+  };
+  const clearRows = {
+      name: DELETE_CONTENT_ROWS_NAME,
+      execute: DELETE_CONTENT_ROWS_ACTION,
+  };
+  const deleteCols = {
       name: REMOVE_COLUMNS_NAME,
-      sequence: 90,
-      action: REMOVE_COLUMNS_ACTION,
-  })
-      .add("clear_column", {
+      execute: REMOVE_COLUMNS_ACTION,
+  };
+  const deleteCol = {
+      ...deleteCols,
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const clearCols = {
       name: DELETE_CONTENT_COLUMNS_NAME,
-      sequence: 100,
-      action: DELETE_CONTENT_COLUMNS_ACTION,
-  })
-      .add("hide_columns", {
-      name: HIDE_COLUMNS_NAME,
-      sequence: 85,
-      action: HIDE_COLUMNS_ACTION,
-      isVisible: (env) => {
-          const sheetId = env.model.getters.getActiveSheetId();
-          const hiddenCols = env.model.getters.getHiddenColsGroups(sheetId).flat();
-          return (env.model.getters.getNumberCols(sheetId) >
-              hiddenCols.length + env.model.getters.getElementsFromSelection("COL").length);
-      },
-      separator: true,
-  })
-      .add("unhide_columns", {
-      name: _lt("Unhide columns"),
-      sequence: 86,
-      action: UNHIDE_COLUMNS_ACTION,
-      isVisible: (env) => {
-          const hiddenCols = env.model.getters
-              .getHiddenColsGroups(env.model.getters.getActiveSheetId())
-              .flat();
-          const currentCols = env.model.getters.getElementsFromSelection("COL");
-          return currentCols.some((col) => hiddenCols.includes(col));
-      },
-      separator: true,
-  })
-      .add("conditional_formatting", {
-      name: _lt("Conditional formatting"),
-      sequence: 110,
-      action: OPEN_CF_SIDEPANEL_ACTION,
-  });
+      execute: DELETE_CONTENT_COLUMNS_ACTION,
+  };
+  const deleteCells = {
+      name: _lt("Delete cells"),
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const deleteCellShiftUp = {
+      name: _lt("Delete cell and shift up"),
+      execute: DELETE_CELL_SHIFT_UP,
+  };
+  const deleteCellShiftLeft = {
+      name: _lt("Delete cell and shift left"),
+      execute: DELETE_CELL_SHIFT_LEFT,
+  };
+  const mergeCells = {
+      name: _lt("Merge cells"),
+      isEnabled: (env) => !cannotMerge(env),
+      isActive: (env) => isInMerge(env),
+      execute: (env) => toggleMerge(env),
+      icon: "o-spreadsheet-Icon.MERGE_CELL",
+  };
+  function cannotMerge(env) {
+      const zones = env.model.getters.getSelectedZones();
+      const { top, left, right, bottom } = env.model.getters.getSelectedZone();
+      const { sheetId } = env.model.getters.getActivePosition();
+      const { xSplit, ySplit } = env.model.getters.getPaneDivisions(sheetId);
+      return (zones.length > 1 ||
+          (top === bottom && left === right) ||
+          (left < xSplit && xSplit <= right) ||
+          (top < ySplit && ySplit <= bottom));
+  }
+  function isInMerge(env) {
+      if (!cannotMerge(env)) {
+          const zones = env.model.getters.getSelectedZones();
+          const { col, row, sheetId } = env.model.getters.getActivePosition();
+          const zone = env.model.getters.expandZone(sheetId, positionToZone({ col, row }));
+          return isEqual(zones[0], zone);
+      }
+      return false;
+  }
+  function toggleMerge(env) {
+      if (cannotMerge(env)) {
+          return;
+      }
+      const zones = env.model.getters.getSelectedZones();
+      const target = [zones[zones.length - 1]];
+      const sheetId = env.model.getters.getActiveSheetId();
+      if (isInMerge(env)) {
+          env.model.dispatch("REMOVE_MERGE", { sheetId, target });
+      }
+      else {
+          interactiveAddMerge(env, sheetId, target);
+      }
+  }
 
-  const rowMenuRegistry = new MenuItemRegistry();
-  rowMenuRegistry
-      .add("cut", {
-      name: _lt("Cut"),
-      sequence: 10,
-      description: "Ctrl+X",
-      action: CUT_ACTION,
-  })
-      .add("copy", {
-      name: _lt("Copy"),
-      description: "Ctrl+C",
-      sequence: 20,
-      isReadonlyAllowed: true,
-      action: COPY_ACTION,
-  })
-      .add("paste", {
-      name: _lt("Paste"),
-      description: "Ctrl+V",
-      sequence: 30,
-      action: PASTE_ACTION,
-  })
-      .add("paste_special", {
-      name: _lt("Paste special"),
-      sequence: 40,
-      separator: true,
-      isVisible: IS_NOT_CUT_OPERATION,
-  })
-      .addChild("paste_value_only", ["paste_special"], {
-      name: _lt("Paste value only"),
-      sequence: 10,
-      action: PASTE_VALUE_ACTION,
-  })
-      .addChild("paste_format_only", ["paste_special"], {
-      name: _lt("Paste format only"),
-      sequence: 20,
-      action: PASTE_FORMAT_ACTION,
-  })
-      .add("add_row_before", {
-      name: ROW_INSERT_ROWS_BEFORE_NAME,
-      sequence: 50,
-      action: INSERT_ROWS_BEFORE_ACTION,
-  })
-      .add("add_row_after", {
-      name: ROW_INSERT_ROWS_AFTER_NAME,
-      sequence: 60,
-      action: INSERT_ROWS_AFTER_ACTION,
-  })
-      .add("delete_row", {
-      name: REMOVE_ROWS_NAME,
-      sequence: 70,
-      action: REMOVE_ROWS_ACTION,
-  })
-      .add("clear_row", {
-      name: DELETE_CONTENT_ROWS_NAME,
-      sequence: 80,
-      action: DELETE_CONTENT_ROWS_ACTION,
-  })
-      .add("hide_rows", {
-      name: HIDE_ROWS_NAME,
-      sequence: 85,
-      action: HIDE_ROWS_ACTION,
-      isVisible: (env) => {
-          const sheetId = env.model.getters.getActiveSheetId();
-          const hiddenRows = env.model.getters.getHiddenRowsGroups(sheetId).flat();
-          return (env.model.getters.getNumberRows(sheetId) >
-              hiddenRows.length + env.model.getters.getElementsFromSelection("ROW").length);
-      },
-      separator: true,
-  })
-      .add("unhide_rows", {
-      name: _lt("Unhide rows"),
-      sequence: 86,
-      action: UNHIDE_ROWS_ACTION,
-      isVisible: (env) => {
-          const hiddenRows = env.model.getters
-              .getHiddenRowsGroups(env.model.getters.getActiveSheetId())
-              .flat();
-          const currentRows = env.model.getters.getElementsFromSelection("ROW");
-          return currentRows.some((col) => hiddenRows.includes(col));
-      },
-      separator: true,
-  })
-      .add("conditional_formatting", {
-      name: _lt("Conditional formatting"),
-      sequence: 90,
-      action: OPEN_CF_SIDEPANEL_ACTION,
+  var ACTION_EDIT = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    undo: undo,
+    redo: redo,
+    copy: copy,
+    cut: cut,
+    paste: paste,
+    pasteSpecial: pasteSpecial,
+    pasteSpecialValue: pasteSpecialValue,
+    pasteSpecialFormat: pasteSpecialFormat,
+    findAndReplace: findAndReplace,
+    deleteValues: deleteValues,
+    deleteRows: deleteRows,
+    deleteRow: deleteRow,
+    clearRows: clearRows,
+    deleteCols: deleteCols,
+    deleteCol: deleteCol,
+    clearCols: clearCols,
+    deleteCells: deleteCells,
+    deleteCellShiftUp: deleteCellShiftUp,
+    deleteCellShiftLeft: deleteCellShiftLeft,
+    mergeCells: mergeCells
   });
 
-  function getSheetMenuRegistry(args) {
-      const sheetMenuRegistry = new MenuItemRegistry();
-      sheetMenuRegistry
-          .add("delete", {
-          name: _lt("Delete"),
-          sequence: 10,
-          isVisible: (env) => {
-              return env.model.getters.getSheetIds().length > 1;
-          },
-          action: (env) => env.askConfirmation(_lt("Are you sure you want to delete this sheet ?"), () => {
-              env.model.dispatch("DELETE_SHEET", { sheetId: env.model.getters.getActiveSheetId() });
-          }),
-      })
-          .add("duplicate", {
-          name: _lt("Duplicate"),
-          sequence: 20,
-          action: (env) => {
-              const sheetIdFrom = env.model.getters.getActiveSheetId();
-              const sheetIdTo = env.model.uuidGenerator.uuidv4();
-              env.model.dispatch("DUPLICATE_SHEET", {
-                  sheetId: sheetIdFrom,
-                  sheetIdTo,
-              });
-              env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom, sheetIdTo });
-          },
-      })
-          .add("rename", {
-          name: _lt("Rename"),
-          sequence: 30,
-          action: () => args.renameSheetCallback(),
-      })
-          .add("move_right", {
-          name: _lt("Move right"),
-          sequence: 40,
-          isVisible: (env) => {
-              const sheetId = env.model.getters.getActiveSheetId();
-              const sheetIds = env.model.getters.getVisibleSheetIds();
-              return sheetIds.indexOf(sheetId) !== sheetIds.length - 1;
-          },
-          action: (env) => env.model.dispatch("MOVE_SHEET", {
-              sheetId: env.model.getters.getActiveSheetId(),
-              delta: 1,
-          }),
-      })
-          .add("move_left", {
-          name: _lt("Move left"),
-          sequence: 50,
-          isVisible: (env) => {
-              const sheetId = env.model.getters.getActiveSheetId();
-              return env.model.getters.getVisibleSheetIds()[0] !== sheetId;
-          },
-          action: (env) => env.model.dispatch("MOVE_SHEET", {
-              sheetId: env.model.getters.getActiveSheetId(),
-              delta: -1,
-          }),
-      })
-          .add("hide_sheet", {
-          name: _lt("Hide sheet"),
-          sequence: 60,
-          isVisible: (env) => env.model.getters.getVisibleSheetIds().length !== 1,
-          action: (env) => env.model.dispatch("HIDE_SHEET", { sheetId: env.model.getters.getActiveSheetId() }),
-      });
-      return sheetMenuRegistry;
-  }
-
   //------------------------------------------------------------------------------
   // Arg description DSL
   //------------------------------------------------------------------------------
@@ -15106,7 +15067,7 @@
               cellReference = rowPart + colPart;
           }
           if (sheet !== undefined) {
-              return `${getComposerSheetName(toString(sheet))}!${cellReference}`;
+              return `${getCanonicalSheetName(toString(sheet))}!${cellReference}`;
           }
           return cellReference;
       },
@@ -16103,6 +16064,593 @@
       }
   }
 
+  const rowInsertRowBefore = {
+      name: ROW_INSERT_ROWS_BEFORE_NAME,
+      execute: INSERT_ROWS_BEFORE_ACTION,
+  };
+  const topBarInsertRowsBefore = {
+      ...rowInsertRowBefore,
+      name: MENU_INSERT_ROWS_BEFORE_NAME,
+      isVisible: (env) => env.model.getters.getActiveCols().size === 0,
+  };
+  const cellInsertRowsBefore = {
+      ...rowInsertRowBefore,
+      name: CELL_INSERT_ROWS_BEFORE_NAME,
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const rowInsertRowsAfter = {
+      execute: INSERT_ROWS_AFTER_ACTION,
+      name: ROW_INSERT_ROWS_AFTER_NAME,
+  };
+  const topBarInsertRowsAfter = {
+      ...rowInsertRowsAfter,
+      name: MENU_INSERT_ROWS_AFTER_NAME,
+      isVisible: (env) => env.model.getters.getActiveCols().size === 0,
+  };
+  const colInsertColsBefore = {
+      name: COLUMN_INSERT_COLUMNS_BEFORE_NAME,
+      execute: INSERT_COLUMNS_BEFORE_ACTION,
+  };
+  const topBarInsertColsBefore = {
+      ...colInsertColsBefore,
+      name: MENU_INSERT_COLUMNS_BEFORE_NAME,
+      isVisible: (env) => env.model.getters.getActiveRows().size === 0,
+  };
+  const cellInsertColsBefore = {
+      ...colInsertColsBefore,
+      name: CELL_INSERT_COLUMNS_BEFORE_NAME,
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const colInsertColsAfter = {
+      name: COLUMN_INSERT_COLUMNS_AFTER_NAME,
+      execute: INSERT_COLUMNS_AFTER_ACTION,
+  };
+  const topBarInsertColsAfter = {
+      ...colInsertColsAfter,
+      name: MENU_INSERT_COLUMNS_AFTER_NAME,
+      execute: INSERT_COLUMNS_AFTER_ACTION,
+      isVisible: (env) => env.model.getters.getActiveRows().size === 0,
+  };
+  const insertCell = {
+      name: _lt("Insert cells"),
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const insertCellShiftDown = {
+      name: _lt("Insert cells and shift down"),
+      execute: INSERT_CELL_SHIFT_DOWN,
+  };
+  const insertCellShiftRight = {
+      name: _lt("Insert cells and shift right"),
+      execute: INSERT_CELL_SHIFT_RIGHT,
+  };
+  const insertChart = {
+      name: _lt("Chart"),
+      execute: CREATE_CHART,
+  };
+  const insertImage = {
+      name: _lt("Image"),
+      execute: CREATE_IMAGE,
+      isVisible: (env) => env.imageProvider !== undefined,
+  };
+  const insertFunction = {
+      name: _lt("Function"),
+  };
+  const insertFunctionSum = {
+      name: _lt("SUM"),
+      execute: (env) => env.startCellEdition(`=SUM(`),
+  };
+  const insertFunctionAverage = {
+      name: _lt("AVERAGE"),
+      execute: (env) => env.startCellEdition(`=AVERAGE(`),
+  };
+  const insertFunctionCount = {
+      name: _lt("COUNT"),
+      execute: (env) => env.startCellEdition(`=COUNT(`),
+  };
+  const insertFunctionMax = {
+      name: _lt("MAX"),
+      execute: (env) => env.startCellEdition(`=MAX(`),
+  };
+  const insertFunctionMin = {
+      name: _lt("MIN"),
+      execute: (env) => env.startCellEdition(`=MIN(`),
+  };
+  const categorieFunctionAll = {
+      name: _lt("All"),
+      children: allFunctionListMenuBuilder(),
+  };
+  function allFunctionListMenuBuilder() {
+      const fnNames = functionRegistry.getKeys();
+      return createFormulaFunctions(fnNames);
+  }
+  const categoriesFunctionListMenuBuilder = () => {
+      const functions = functionRegistry.content;
+      const categories = [...new Set(functionRegistry.getAll().map((fn) => fn.category))].filter(isDefined$1);
+      return categories.sort().map((category, i) => {
+          const functionsInCategory = Object.keys(functions).filter((key) => functions[key].category === category);
+          return {
+              name: category,
+              children: createFormulaFunctions(functionsInCategory),
+          };
+      });
+  };
+  const insertLink = {
+      name: _lt("Link"),
+      execute: INSERT_LINK,
+  };
+  const insertSheet = {
+      name: _lt("New sheet"),
+      execute: CREATE_SHEET_ACTION,
+  };
+  function createFormulaFunctions(fnNames) {
+      return fnNames.sort().map((fnName, i) => {
+          return {
+              name: fnName,
+              sequence: i * 10,
+              execute: (env) => env.startCellEdition(`=${fnName}(`),
+          };
+      });
+  }
+
+  //------------------------------------------------------------------------------
+  // Context Menu Registry
+  //------------------------------------------------------------------------------
+  const cellMenuRegistry = new MenuItemRegistry();
+  cellMenuRegistry
+      .add("cut", {
+      ...cut,
+      sequence: 10,
+  })
+      .add("copy", {
+      ...copy,
+      sequence: 20,
+  })
+      .add("paste", {
+      ...paste,
+      sequence: 30,
+  })
+      .add("paste_special", {
+      ...pasteSpecial,
+      sequence: 40,
+      separator: true,
+  })
+      .addChild("paste_value_only", ["paste_special"], {
+      ...pasteSpecialValue,
+      sequence: 10,
+  })
+      .addChild("paste_format_only", ["paste_special"], {
+      ...pasteSpecialFormat,
+      sequence: 20,
+  })
+      .add("add_row_before", {
+      ...cellInsertRowsBefore,
+      sequence: 70,
+  })
+      .add("add_column_before", {
+      ...cellInsertColsBefore,
+      sequence: 90,
+  })
+      .add("insert_cell", {
+      ...insertCell,
+      sequence: 100,
+      separator: true,
+  })
+      .addChild("insert_cell_down", ["insert_cell"], {
+      ...insertCellShiftDown,
+      name: _lt("Shift down"),
+      sequence: 10,
+  })
+      .addChild("insert_cell_right", ["insert_cell"], {
+      ...insertCellShiftRight,
+      name: _lt("Shift right"),
+      sequence: 20,
+  })
+      .add("delete_row", {
+      ...deleteRow,
+      sequence: 110,
+  })
+      .add("delete_column", {
+      ...deleteCol,
+      sequence: 120,
+  })
+      .add("delete_cell", {
+      ...deleteCells,
+      sequence: 130,
+  })
+      .addChild("delete_cell_up", ["delete_cell"], {
+      ...deleteCellShiftUp,
+      name: _lt("Shift up"),
+      sequence: 10,
+  })
+      .addChild("delete_cell_left", ["delete_cell"], {
+      ...deleteCellShiftLeft,
+      name: _lt("Shift left"),
+      sequence: 20,
+  })
+      .add("insert_link", {
+      ...insertLink,
+      name: _lt("Insert link"),
+      sequence: 150,
+      separator: true,
+  });
+
+  const sortRange = {
+      name: _lt("Sort range"),
+      isVisible: IS_ONLY_ONE_RANGE,
+  };
+  const sortAscending = {
+      name: _lt("Ascending (A ⟶ Z)"),
+      execute: SORT_CELLS_ASCENDING,
+  };
+  const sortDescending = {
+      name: _lt("Descending (Z ⟶ A)"),
+      execute: SORT_CELLS_DESCENDING,
+  };
+  const addDataFilter = {
+      name: _lt("Create filter"),
+      execute: FILTERS_CREATE_FILTER_TABLE,
+      isVisible: (env) => !SELECTION_CONTAINS_FILTER(env),
+      isEnabled: (env) => SELECTION_IS_CONTINUOUS(env),
+      icon: "o-spreadsheet-Icon.FILTER_ICON_INACTIVE",
+  };
+  const removeDataFilter = {
+      name: _lt("Remove filter"),
+      execute: FILTERS_REMOVE_FILTER_TABLE,
+      isVisible: SELECTION_CONTAINS_FILTER,
+      icon: "o-spreadsheet-Icon.FILTER_ICON_INACTIVE",
+  };
+
+  const formatNumberAutomatic = {
+      name: _lt("Automatic"),
+      execute: FORMAT_AUTOMATIC_ACTION,
+      isActive: (env) => isAutomaticFormatSelected(env),
+  };
+  const formatNumberNumber = {
+      name: _lt("Number"),
+      description: "1,000.12",
+      execute: FORMAT_NUMBER_ACTION,
+      isActive: (env) => isFormatSelected(env, "#,##0.00"),
+  };
+  const formatPercent = {
+      name: _lt("Format as percent"),
+      execute: FORMAT_PERCENT_ACTION,
+      icon: "o-spreadsheet-Icon.PERCENT",
+  };
+  const formatNumberPercent = {
+      name: _lt("Percent"),
+      description: "10.12%",
+      execute: FORMAT_PERCENT_ACTION,
+      isActive: (env) => isFormatSelected(env, "0.00%"),
+  };
+  const formatNumberCurrency = {
+      name: _lt("Currency"),
+      description: "$1,000.12",
+      execute: FORMAT_CURRENCY_ACTION,
+      isActive: (env) => isFormatSelected(env, "[$$]#,##0.00"),
+  };
+  const formatNumberCurrencyRounded = {
+      name: _lt("Currency rounded"),
+      description: "$1,000",
+      execute: FORMAT_CURRENCY_ROUNDED_ACTION,
+      isActive: (env) => isFormatSelected(env, "[$$]#,##0"),
+  };
+  const formatCustomCurrency = {
+      name: _lt("Custom currency"),
+      isVisible: (env) => env.loadCurrencies !== undefined,
+      execute: OPEN_CUSTOM_CURRENCY_SIDEPANEL_ACTION,
+  };
+  const formatNumberDate = {
+      name: _lt("Date"),
+      description: "9/26/2008",
+      execute: FORMAT_DATE_ACTION,
+      isActive: (env) => isFormatSelected(env, "m/d/yyyy"),
+  };
+  const formatNumberTime = {
+      name: _lt("Time"),
+      description: "10:43:00 PM",
+      execute: FORMAT_TIME_ACTION,
+      isActive: (env) => isFormatSelected(env, "hh:mm:ss a"),
+  };
+  const formatNumberDateTime = {
+      name: _lt("Date time"),
+      description: "9/26/2008 22:43:00",
+      execute: FORMAT_DATE_TIME_ACTION,
+      isActive: (env) => isFormatSelected(env, "m/d/yyyy hh:mm:ss"),
+  };
+  const formatNumberDuration = {
+      name: _lt("Duration"),
+      description: "27:51:38",
+      execute: FORMAT_DURATION_ACTION,
+      isActive: (env) => isFormatSelected(env, "hhhh:mm:ss"),
+  };
+  const incraseDecimalPlaces = {
+      name: _lt("Increase decimal places"),
+      icon: "o-spreadsheet-Icon.INCREASE_DECIMAL",
+      execute: (env) => env.model.dispatch("SET_DECIMAL", {
+          sheetId: env.model.getters.getActiveSheetId(),
+          target: env.model.getters.getSelectedZones(),
+          step: 1,
+      }),
+  };
+  const decraseDecimalPlaces = {
+      name: _lt("Decrease decimal places"),
+      icon: "o-spreadsheet-Icon.DECRASE_DECIMAL",
+      execute: (env) => env.model.dispatch("SET_DECIMAL", {
+          sheetId: env.model.getters.getActiveSheetId(),
+          target: env.model.getters.getSelectedZones(),
+          step: -1,
+      }),
+  };
+  const formatBold = {
+      name: _lt("Bold"),
+      description: "Ctrl+B",
+      execute: FORMAT_BOLD_ACTION,
+      icon: "o-spreadsheet-Icon.BOLD",
+      isActive: (env) => !!env.model.getters.getCurrentStyle().bold,
+  };
+  const formatItalic = {
+      name: _lt("Italic"),
+      description: "Ctrl+I",
+      execute: FORMAT_ITALIC_ACTION,
+      icon: "o-spreadsheet-Icon.ITALIC",
+      isActive: (env) => !!env.model.getters.getCurrentStyle().italic,
+  };
+  const formatUnderline = {
+      name: _lt("Underline"),
+      description: "Ctrl+U",
+      execute: FORMAT_UNDERLINE_ACTION,
+      icon: "o-spreadsheet-Icon.UNDERLINE",
+      isActive: (env) => !!env.model.getters.getCurrentStyle().underline,
+  };
+  const formatStrikethrough = {
+      name: _lt("Strikethrough"),
+      execute: FORMAT_STRIKETHROUGH_ACTION,
+      icon: "o-spreadsheet-Icon.STRIKE",
+      isActive: (env) => !!env.model.getters.getCurrentStyle().strikethrough,
+  };
+  const formatFontSize = {
+      name: _lt("Font size"),
+      children: fontSizeMenuBuilder(),
+  };
+  const formatAlignment = {
+      name: _lt("Alignment"),
+      icon: "o-spreadsheet-Icon.ALIGN_LEFT",
+  };
+  const formatAlignmentHorizontal = {
+      name: _lt("Horizontal align"),
+      icon: "o-spreadsheet-Icon.ALIGN_LEFT",
+  };
+  const formatAlignmentLeft = {
+      name: _lt("Left"),
+      execute: (env) => setStyle(env, { align: "left" }),
+      isActive: (env) => getHorizontalAlign(env) === "left",
+      icon: "o-spreadsheet-Icon.ALIGN_LEFT",
+  };
+  const formatAlignmentCenter = {
+      name: _lt("Center"),
+      execute: (env) => setStyle(env, { align: "center" }),
+      isActive: (env) => getHorizontalAlign(env) === "center",
+      icon: "o-spreadsheet-Icon.ALIGN_CENTER",
+  };
+  const formatAlignmentRight = {
+      name: _lt("Right"),
+      execute: (env) => setStyle(env, { align: "right" }),
+      isActive: (env) => getHorizontalAlign(env) === "right",
+      icon: "o-spreadsheet-Icon.ALIGN_RIGHT",
+  };
+  const formatAlignmentVertical = {
+      name: _lt("Vertical align"),
+      icon: "o-spreadsheet-Icon.ALIGN_MIDDLE",
+  };
+  const formatAlignmentTop = {
+      name: _lt("Top"),
+      execute: (env) => setStyle(env, { verticalAlign: "top" }),
+      isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "top",
+      icon: "o-spreadsheet-Icon.ALIGN_TOP",
+  };
+  const formatAlignmentMiddle = {
+      name: _lt("Middle"),
+      execute: (env) => setStyle(env, { verticalAlign: "middle" }),
+      isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "middle",
+      icon: "o-spreadsheet-Icon.ALIGN_MIDDLE",
+  };
+  const formatAlignmentBottom = {
+      name: _lt("Bottom"),
+      execute: (env) => setStyle(env, { verticalAlign: "bottom" }),
+      isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "bottom",
+      icon: "o-spreadsheet-Icon.ALIGN_BOTTOM",
+  };
+  const formatWrapping = {
+      name: _lt("Wrapping"),
+      icon: "o-spreadsheet-Icon.WRAPPING_OVERFLOW",
+  };
+  const formatWrappingOverflow = {
+      name: _lt("Overflow"),
+      execute: (env) => setStyle(env, { wrapping: "overflow" }),
+      isActive: (env) => (env.model.getters.getCurrentStyle().wrapping || "overflow") === "overflow",
+      icon: "o-spreadsheet-Icon.WRAPPING_OVERFLOW",
+  };
+  const formatWrappingWrap = {
+      name: _lt("Wrap"),
+      execute: (env) => setStyle(env, { wrapping: "wrap" }),
+      isActive: (env) => env.model.getters.getCurrentStyle().wrapping === "wrap",
+      icon: "o-spreadsheet-Icon.WRAPPING_WRAP",
+  };
+  const formatWrappingClip = {
+      name: _lt("Clip"),
+      execute: (env) => setStyle(env, { wrapping: "clip" }),
+      isActive: (env) => env.model.getters.getCurrentStyle().wrapping === "clip",
+      icon: "o-spreadsheet-Icon.WRAPPING_CLIP",
+  };
+  const textColor = {
+      name: _lt("Text Color"),
+      icon: "o-spreadsheet-Icon.TEXT_COLOR",
+  };
+  const fillColor = {
+      name: _lt("Fill Color"),
+      icon: "o-spreadsheet-Icon.FILL_COLOR",
+  };
+  const formatCF = {
+      name: _lt("Conditional formatting"),
+      execute: OPEN_CF_SIDEPANEL_ACTION,
+  };
+  const paintFormat = {
+      name: _lt("Paint Format"),
+      execute: (env) => env.model.dispatch("ACTIVATE_PAINT_FORMAT", {
+          target: env.model.getters.getSelectedZones(),
+      }),
+      icon: "o-spreadsheet-Icon.PAINT_FORMAT",
+      isActive: (env) => env.model.getters.isPaintingFormat(),
+  };
+  const clearFormat = {
+      name: _lt("Clear formatting"),
+      execute: FORMAT_CLEARFORMAT_ACTION,
+      icon: "o-spreadsheet-Icon.CLEAR_FORMAT",
+  };
+  const borders = {
+      name: _lt("Borders"),
+      icon: "o-spreadsheet-Icon.BORDERS",
+  };
+  const bordersAll = {
+      name: _lt("All borders"),
+      execute: (env) => setBorder(env, "all"),
+      icon: "o-spreadsheet-Icon.BORDERS",
+  };
+  const bordersInner = {
+      name: _lt("Inner borders"),
+      execute: (env) => setBorder(env, "hv"),
+      icon: "o-spreadsheet-Icon.BORDER_HV",
+  };
+  const bordersHorizontal = {
+      name: _lt("Horizontal borders"),
+      execute: (env) => setBorder(env, "h"),
+      icon: "o-spreadsheet-Icon.BORDER_H",
+  };
+  const bordersVertical = {
+      name: _lt("Vertical borders"),
+      execute: (env) => setBorder(env, "v"),
+      icon: "o-spreadsheet-Icon.BORDER_V",
+  };
+  const bordersExternal = {
+      name: _lt("External borders"),
+      execute: (env) => setBorder(env, "external"),
+      icon: "o-spreadsheet-Icon.BORDER_EXTERNAL",
+  };
+  const bordersLeft = {
+      name: _lt("Left borders"),
+      execute: (env) => setBorder(env, "left"),
+      icon: "o-spreadsheet-Icon.BORDER_LEFT",
+  };
+  const bordersTop = {
+      name: _lt("Top borders"),
+      execute: (env) => setBorder(env, "top"),
+      icon: "o-spreadsheet-Icon.BORDER_TOP",
+  };
+  const bordersRight = {
+      name: _lt("Right borders"),
+      execute: (env) => setBorder(env, "right"),
+      icon: "o-spreadsheet-Icon.BORDER_RIGHT",
+  };
+  const bordersBottom = {
+      name: _lt("Bottom borders"),
+      execute: (env) => setBorder(env, "bottom"),
+      icon: "o-spreadsheet-Icon.BORDER_BOTTOM",
+  };
+  const bordersClear = {
+      name: _lt("Clear borders"),
+      execute: (env) => setBorder(env, "clear"),
+      icon: "o-spreadsheet-Icon.BORDER_CLEAR",
+  };
+  function fontSizeMenuBuilder() {
+      return FONT_SIZES.map((fs) => {
+          return {
+              name: fs.toString(),
+              sequence: fs,
+              id: `font_size_${fs}`,
+              execute: (env) => setStyle(env, { fontSize: fs }),
+              isActive: (env) => isFontSizeSelected(env, fs),
+          };
+      });
+  }
+  function isAutomaticFormatSelected(env) {
+      const activeCell = env.model.getters.getActiveCell();
+      return !activeCell || !activeCell.format;
+  }
+  function isFormatSelected(env, format) {
+      const activeCell = env.model.getters.getActiveCell();
+      return activeCell && activeCell.format === format;
+  }
+  function isFontSizeSelected(env, fontSize) {
+      const currentFontSize = env.model.getters.getCurrentStyle().fontSize || DEFAULT_FONT_SIZE;
+      return currentFontSize === fontSize;
+  }
+  function setBorder(env, command) {
+      env.model.dispatch("SET_FORMATTING", {
+          sheetId: env.model.getters.getActiveSheetId(),
+          target: env.model.getters.getSelectedZones(),
+          border: command,
+      });
+  }
+  function getHorizontalAlign(env) {
+      const style = env.model.getters.getCurrentStyle();
+      if (style.align) {
+          return style.align;
+      }
+      const cell = env.model.getters.getActiveCell();
+      return cell.defaultAlign;
+  }
+
+  var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    formatNumberAutomatic: formatNumberAutomatic,
+    formatNumberNumber: formatNumberNumber,
+    formatPercent: formatPercent,
+    formatNumberPercent: formatNumberPercent,
+    formatNumberCurrency: formatNumberCurrency,
+    formatNumberCurrencyRounded: formatNumberCurrencyRounded,
+    formatCustomCurrency: formatCustomCurrency,
+    formatNumberDate: formatNumberDate,
+    formatNumberTime: formatNumberTime,
+    formatNumberDateTime: formatNumberDateTime,
+    formatNumberDuration: formatNumberDuration,
+    incraseDecimalPlaces: incraseDecimalPlaces,
+    decraseDecimalPlaces: decraseDecimalPlaces,
+    formatBold: formatBold,
+    formatItalic: formatItalic,
+    formatUnderline: formatUnderline,
+    formatStrikethrough: formatStrikethrough,
+    formatFontSize: formatFontSize,
+    formatAlignment: formatAlignment,
+    formatAlignmentHorizontal: formatAlignmentHorizontal,
+    formatAlignmentLeft: formatAlignmentLeft,
+    formatAlignmentCenter: formatAlignmentCenter,
+    formatAlignmentRight: formatAlignmentRight,
+    formatAlignmentVertical: formatAlignmentVertical,
+    formatAlignmentTop: formatAlignmentTop,
+    formatAlignmentMiddle: formatAlignmentMiddle,
+    formatAlignmentBottom: formatAlignmentBottom,
+    formatWrapping: formatWrapping,
+    formatWrappingOverflow: formatWrappingOverflow,
+    formatWrappingWrap: formatWrappingWrap,
+    formatWrappingClip: formatWrappingClip,
+    textColor: textColor,
+    fillColor: fillColor,
+    formatCF: formatCF,
+    paintFormat: paintFormat,
+    clearFormat: clearFormat,
+    borders: borders,
+    bordersAll: bordersAll,
+    bordersInner: bordersInner,
+    bordersHorizontal: bordersHorizontal,
+    bordersVertical: bordersVertical,
+    bordersExternal: bordersExternal,
+    bordersLeft: bordersLeft,
+    bordersTop: bordersTop,
+    bordersRight: bordersRight,
+    bordersBottom: bordersBottom,
+    bordersClear: bordersClear
+  });
+
   function interactiveFreezeColumnsRows(env, dimension, base) {
       const sheetId = env.model.getters.getActiveSheetId();
       const cmd = dimension === "COL" ? "FREEZE_COLUMNS" : "FREEZE_ROWS";
@@ -16112,524 +16660,740 @@
       }
   }
 
-  const topbarMenuRegistry = new MenuItemRegistry();
-  topbarMenuRegistry
-      .add("file", { name: _lt("File"), sequence: 10 })
-      .add("edit", { name: _lt("Edit"), sequence: 20 })
-      .add("view", { name: _lt("View"), sequence: 30 })
-      .add("insert", { name: _lt("Insert"), sequence: 40 })
-      .add("format", { name: _lt("Format"), sequence: 50 })
-      .add("data", { name: _lt("Data"), sequence: 60 })
-      .addChild("save", ["file"], {
-      name: _lt("Save"),
-      description: "Ctrl+S",
-      sequence: 10,
-      action: () => console.log("Not implemented"),
-  })
-      .addChild("undo", ["edit"], {
-      name: _lt("Undo"),
-      description: "Ctrl+Z",
+  const hideCols = {
+      name: HIDE_COLUMNS_NAME,
+      execute: HIDE_COLUMNS_ACTION,
+      isVisible: (env) => {
+          const sheetId = env.model.getters.getActiveSheetId();
+          const hiddenCols = env.model.getters.getHiddenColsGroups(sheetId).flat();
+          return (env.model.getters.getNumberCols(sheetId) >
+              hiddenCols.length + env.model.getters.getElementsFromSelection("COL").length);
+      },
+  };
+  const unhideCols = {
+      name: _lt("Unhide columns"),
+      execute: UNHIDE_COLUMNS_ACTION,
+      isVisible: (env) => {
+          const hiddenCols = env.model.getters
+              .getHiddenColsGroups(env.model.getters.getActiveSheetId())
+              .flat();
+          const currentCols = env.model.getters.getElementsFromSelection("COL");
+          return currentCols.some((col) => hiddenCols.includes(col));
+      },
+  };
+  const unhideAllCols = {
+      name: _lt("Unhide all columns"),
+      execute: UNHIDE_ALL_COLUMNS_ACTION,
+      isVisible: (env) => env.model.getters.getHiddenColsGroups(env.model.getters.getActiveSheetId()).length > 0,
+  };
+  const hideRows = {
+      name: HIDE_ROWS_NAME,
+      execute: HIDE_ROWS_ACTION,
+      isVisible: (env) => {
+          const sheetId = env.model.getters.getActiveSheetId();
+          const hiddenRows = env.model.getters.getHiddenRowsGroups(sheetId).flat();
+          return (env.model.getters.getNumberRows(sheetId) >
+              hiddenRows.length + env.model.getters.getElementsFromSelection("ROW").length);
+      },
+  };
+  const unhideRows = {
+      name: _lt("Unhide rows"),
+      execute: UNHIDE_ROWS_ACTION,
+      isVisible: (env) => {
+          const hiddenRows = env.model.getters
+              .getHiddenRowsGroups(env.model.getters.getActiveSheetId())
+              .flat();
+          const currentRows = env.model.getters.getElementsFromSelection("ROW");
+          return currentRows.some((col) => hiddenRows.includes(col));
+      },
+  };
+  const unhideAllRows = {
+      name: _lt("Unhide all rows"),
+      execute: UNHIDE_ALL_ROWS_ACTION,
+      isVisible: (env) => env.model.getters.getHiddenRowsGroups(env.model.getters.getActiveSheetId()).length > 0,
+  };
+  const unFreezePane = {
+      name: _lt("Unfreeze"),
+      isVisible: (env) => {
+          const { xSplit, ySplit } = env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId());
+          return xSplit + ySplit > 0;
+      },
+      execute: (env) => env.model.dispatch("UNFREEZE_COLUMNS_ROWS", {
+          sheetId: env.model.getters.getActiveSheetId(),
+      }),
+  };
+  const freezePane = {
+      name: _lt("Freeze"),
+  };
+  const unFreezeRows = {
+      name: _lt("No rows"),
+      execute: (env) => env.model.dispatch("UNFREEZE_ROWS", {
+          sheetId: env.model.getters.getActiveSheetId(),
+      }),
+      isReadonlyAllowed: true,
+      isVisible: (env) => !!env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId()).ySplit,
+  };
+  const freezeFirstRow = {
+      name: _lt("1 row"),
+      execute: (env) => interactiveFreezeColumnsRows(env, "ROW", 1),
+      isReadonlyAllowed: true,
+  };
+  const freezeSecondRow = {
+      name: _lt("2 rows"),
+      execute: (env) => interactiveFreezeColumnsRows(env, "ROW", 2),
+      isReadonlyAllowed: true,
+  };
+  const freezeCurrentRow = {
+      name: _lt("Up to current row"),
+      execute: (env) => {
+          const { bottom } = env.model.getters.getSelectedZone();
+          interactiveFreezeColumnsRows(env, "ROW", bottom + 1);
+      },
+      isReadonlyAllowed: true,
+  };
+  const unFreezeCols = {
+      name: _lt("No columns"),
+      execute: (env) => env.model.dispatch("UNFREEZE_COLUMNS", {
+          sheetId: env.model.getters.getActiveSheetId(),
+      }),
+      isReadonlyAllowed: true,
+      isVisible: (env) => !!env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId()).xSplit,
+  };
+  const freezeFirstCol = {
+      name: _lt("1 column"),
+      execute: (env) => interactiveFreezeColumnsRows(env, "COL", 1),
+      isReadonlyAllowed: true,
+  };
+  const freezeSecondCol = {
+      name: _lt("2 columns"),
+      execute: (env) => interactiveFreezeColumnsRows(env, "COL", 2),
+      isReadonlyAllowed: true,
+  };
+  const freezeCurrentCol = {
+      name: _lt("Up to current column"),
+      execute: (env) => {
+          const { right } = env.model.getters.getSelectedZone();
+          interactiveFreezeColumnsRows(env, "COL", right + 1);
+      },
+      isReadonlyAllowed: true,
+  };
+  const viewGridlines = {
+      name: (env) => env.model.getters.getGridLinesVisibility(env.model.getters.getActiveSheetId())
+          ? _lt("Hide gridlines")
+          : _lt("Show gridlines"),
+      execute: SET_GRID_LINES_VISIBILITY_ACTION,
+  };
+  const viewFormulas = {
+      name: (env) => env.model.getters.shouldShowFormulas() ? _lt("Hide formulas") : _lt("Show formulas"),
+      execute: SET_FORMULA_VISIBILITY_ACTION,
+      isReadonlyAllowed: true,
+  };
+  const createRemoveFilter = {
+      name: (env) => selectionContainsFilter(env) ? _lt("Remove selected filters") : _lt("Create filter"),
+      isActive: (env) => selectionContainsFilter(env),
+      isEnabled: (env) => !cannotCreateFilter(env),
+      execute: (env) => createRemoveFilterAction(env),
+      icon: "o-spreadsheet-Icon.FILTER_ICON_INACTIVE",
+  };
+  function selectionContainsFilter(env) {
+      const sheetId = env.model.getters.getActiveSheetId();
+      const selectedZones = env.model.getters.getSelectedZones();
+      return env.model.getters.doesZonesContainFilter(sheetId, selectedZones);
+  }
+  function cannotCreateFilter(env) {
+      return !areZonesContinuous(...env.model.getters.getSelectedZones());
+  }
+  function createRemoveFilterAction(env) {
+      if (selectionContainsFilter(env)) {
+          env.model.dispatch("REMOVE_FILTER_TABLE", {
+              sheetId: env.model.getters.getActiveSheetId(),
+              target: env.model.getters.getSelectedZones(),
+          });
+          return;
+      }
+      if (cannotCreateFilter(env)) {
+          return;
+      }
+      env.model.selection.selectTableAroundSelection();
+      const sheetId = env.model.getters.getActiveSheetId();
+      const selection = env.model.getters.getSelectedZones();
+      interactiveAddFilter(env, sheetId, selection);
+  }
+
+  var ACTION_VIEW = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    hideCols: hideCols,
+    unhideCols: unhideCols,
+    unhideAllCols: unhideAllCols,
+    hideRows: hideRows,
+    unhideRows: unhideRows,
+    unhideAllRows: unhideAllRows,
+    unFreezePane: unFreezePane,
+    freezePane: freezePane,
+    unFreezeRows: unFreezeRows,
+    freezeFirstRow: freezeFirstRow,
+    freezeSecondRow: freezeSecondRow,
+    freezeCurrentRow: freezeCurrentRow,
+    unFreezeCols: unFreezeCols,
+    freezeFirstCol: freezeFirstCol,
+    freezeSecondCol: freezeSecondCol,
+    freezeCurrentCol: freezeCurrentCol,
+    viewGridlines: viewGridlines,
+    viewFormulas: viewFormulas,
+    createRemoveFilter: createRemoveFilter
+  });
+
+  const colMenuRegistry = new MenuItemRegistry();
+  colMenuRegistry
+      .add("cut", {
+      ...cut,
       sequence: 10,
-      action: UNDO_ACTION,
   })
-      .addChild("redo", ["edit"], {
-      name: _lt("Redo"),
-      description: "Ctrl+Y",
+      .add("copy", {
+      ...copy,
       sequence: 20,
-      action: REDO_ACTION,
-      separator: true,
   })
-      .addChild("copy", ["edit"], {
-      name: _lt("Copy"),
-      description: "Ctrl+C",
+      .add("paste", {
+      ...paste,
       sequence: 30,
-      isReadonlyAllowed: true,
-      action: COPY_ACTION,
   })
-      .addChild("cut", ["edit"], {
-      name: _lt("Cut"),
-      description: "Ctrl+X",
+      .add("paste_special", {
+      ...pasteSpecial,
       sequence: 40,
-      action: CUT_ACTION,
+      separator: true,
   })
-      .addChild("paste", ["edit"], {
-      name: _lt("Paste"),
-      description: "Ctrl+V",
-      sequence: 50,
-      action: PASTE_ACTION,
+      .addChild("paste_value_only", ["paste_special"], {
+      ...pasteSpecialValue,
+      sequence: 10,
   })
-      .addChild("paste_special", ["edit"], {
-      name: _lt("Paste special"),
-      sequence: 60,
+      .addChild("paste_format_only", ["paste_special"], {
+      ...pasteSpecialFormat,
+      sequence: 20,
+  })
+      .add("sort_columns", {
+      ...sortRange,
+      name: (env) => env.model.getters.getActiveCols().size > 1 ? _lt("Sort columns") : _lt("Sort column"),
+      sequence: 50,
       separator: true,
-      isVisible: IS_NOT_CUT_OPERATION,
   })
-      .addChild("paste_special_value", ["edit", "paste_special"], {
-      name: _lt("Paste value only"),
+      .addChild("sort_ascending", ["sort_columns"], {
+      ...sortAscending,
       sequence: 10,
-      action: PASTE_VALUE_ACTION,
   })
-      .addChild("paste_special_format", ["edit", "paste_special"], {
-      name: _lt("Paste format only"),
+      .addChild("sort_descending", ["sort_columns"], {
+      ...sortDescending,
       sequence: 20,
-      action: PASTE_FORMAT_ACTION,
   })
-      .addChild("sort_range", ["data"], {
-      name: _lt("Sort range"),
-      sequence: 20,
-      isVisible: IS_ONLY_ONE_RANGE,
+      .add("add_column_before", {
+      ...colInsertColsBefore,
+      sequence: 70,
+  })
+      .add("add_column_after", {
+      ...colInsertColsAfter,
+      sequence: 80,
+  })
+      .add("delete_column", {
+      ...deleteCols,
+      sequence: 90,
+  })
+      .add("clear_column", {
+      ...clearCols,
+      sequence: 100,
+  })
+      .add("hide_columns", {
+      ...hideCols,
+      sequence: 85,
       separator: true,
   })
-      .addChild("sort_ascending", ["data", "sort_range"], {
-      name: _lt("Ascending (A ⟶ Z)"),
+      .add("unhide_columns", {
+      ...unhideCols,
+      sequence: 86,
+      separator: true,
+  })
+      .add("conditional_formatting", {
+      ...formatCF,
+      sequence: 110,
+  });
+
+  const numberFormatMenuRegistry = new MenuItemRegistry();
+  numberFormatMenuRegistry
+      .add("format_number_automatic", {
+      ...formatNumberAutomatic,
       sequence: 10,
-      action: SORT_CELLS_ASCENDING,
+      separator: true,
   })
-      .addChild("sort_descending", ["data", "sort_range"], {
-      name: _lt("Descending (Z ⟶ A)"),
+      .add("format_number_number", {
+      ...formatNumberNumber,
       sequence: 20,
-      action: SORT_CELLS_DESCENDING,
   })
-      .addChild("find_and_replace", ["edit"], {
-      name: _lt("Find and replace"),
-      description: "Ctrl+H",
-      sequence: 65,
-      isReadonlyAllowed: true,
-      action: OPEN_FAR_SIDEPANEL_ACTION,
+      .add("format_number_percent", {
+      ...formatNumberPercent,
+      sequence: 30,
       separator: true,
   })
-      .addChild("edit_delete_cell_values", ["edit"], {
-      name: _lt("Delete values"),
-      sequence: 70,
-      action: DELETE_CONTENT_ACTION,
+      .add("format_number_currency", {
+      ...formatNumberCurrency,
+      sequence: 40,
   })
-      .addChild("edit_delete_row", ["edit"], {
-      name: REMOVE_ROWS_NAME,
-      sequence: 80,
-      action: REMOVE_ROWS_ACTION,
+      .add("format_number_currency_rounded", {
+      ...formatNumberCurrencyRounded,
+      sequence: 50,
   })
-      .addChild("edit_delete_column", ["edit"], {
-      name: REMOVE_COLUMNS_NAME,
-      sequence: 90,
-      action: REMOVE_COLUMNS_ACTION,
+      .add("format_custom_currency", {
+      ...formatCustomCurrency,
+      sequence: 60,
+      separator: true,
   })
-      .addChild("edit_delete_cell_shift_up", ["edit"], {
-      name: _lt("Delete cell and shift up"),
-      sequence: 93,
-      action: DELETE_CELL_SHIFT_UP,
+      .add("format_number_date", {
+      ...formatNumberDate,
+      sequence: 70,
   })
-      .addChild("edit_delete_cell_shift_left", ["edit"], {
-      name: _lt("Delete cell and shift left"),
-      sequence: 97,
-      action: DELETE_CELL_SHIFT_LEFT,
+      .add("format_number_time", {
+      ...formatNumberTime,
+      sequence: 80,
   })
-      .addChild("edit_unhide_columns", ["edit"], {
-      name: _lt("Unhide all columns"),
-      sequence: 100,
-      action: UNHIDE_ALL_COLUMNS_ACTION,
-      isVisible: (env) => env.model.getters.getHiddenColsGroups(env.model.getters.getActiveSheetId()).length > 0,
+      .add("format_number_date_time", {
+      ...formatNumberDateTime,
+      sequence: 90,
   })
-      .addChild("edit_unhide_rows", ["edit"], {
-      name: _lt("Unhide all rows"),
+      .add("format_number_duration", {
+      ...formatNumberDuration,
       sequence: 100,
-      action: UNHIDE_ALL_ROWS_ACTION,
-      isVisible: (env) => env.model.getters.getHiddenRowsGroups(env.model.getters.getActiveSheetId()).length > 0,
-  })
-      .addChild("insert_row_before", ["insert"], {
-      name: MENU_INSERT_ROWS_BEFORE_NAME,
+      separator: true,
+  });
+  const formatNumberMenuItemSpec = {
+      name: _lt("More formats"),
+      icon: "o-spreadsheet-Icon.NUMBER_FORMATS",
+      children: [() => numberFormatMenuRegistry.getAll()],
+  };
+
+  const rowMenuRegistry = new MenuItemRegistry();
+  rowMenuRegistry
+      .add("cut", {
+      ...cut,
       sequence: 10,
-      action: INSERT_ROWS_BEFORE_ACTION,
-      isVisible: (env) => env.model.getters.getActiveCols().size === 0,
   })
-      .addChild("insert_row_after", ["insert"], {
-      name: MENU_INSERT_ROWS_AFTER_NAME,
+      .add("copy", {
+      ...copy,
       sequence: 20,
-      action: INSERT_ROWS_AFTER_ACTION,
-      isVisible: (env) => env.model.getters.getActiveCols().size === 0,
-      separator: true,
   })
-      .addChild("insert_column_before", ["insert"], {
-      name: MENU_INSERT_COLUMNS_BEFORE_NAME,
+      .add("paste", {
+      ...paste,
       sequence: 30,
-      action: INSERT_COLUMNS_BEFORE_ACTION,
-      isVisible: (env) => env.model.getters.getActiveRows().size === 0,
   })
-      .addChild("insert_column_after", ["insert"], {
-      name: MENU_INSERT_COLUMNS_AFTER_NAME,
+      .add("paste_special", {
+      ...pasteSpecial,
       sequence: 40,
-      action: INSERT_COLUMNS_AFTER_ACTION,
-      isVisible: (env) => env.model.getters.getActiveRows().size === 0,
       separator: true,
   })
-      .addChild("insert_insert_cell_shift_down", ["insert"], {
-      name: _lt("Insert cells and shift down"),
-      sequence: 43,
-      action: INSERT_CELL_SHIFT_DOWN,
+      .addChild("paste_value_only", ["paste_special"], {
+      ...pasteSpecialValue,
+      sequence: 10,
   })
-      .addChild("insert_insert_cell_shift_right", ["insert"], {
-      name: _lt("Insert cells and shift right"),
-      sequence: 47,
-      action: INSERT_CELL_SHIFT_RIGHT,
-      separator: true,
+      .addChild("paste_format_only", ["paste_special"], {
+      ...pasteSpecialFormat,
+      sequence: 20,
   })
-      .addChild("insert_chart", ["insert"], {
-      name: _lt("Chart"),
+      .add("add_row_before", {
+      ...rowInsertRowBefore,
       sequence: 50,
-      action: CREATE_CHART,
-  })
-      .addChild("insert_image", ["insert"], {
-      name: _lt("Image"),
-      sequence: 55,
-      action: CREATE_IMAGE,
-      isVisible: (env) => env.imageProvider !== undefined,
   })
-      .addChild("insert_function", ["insert"], {
-      name: _lt("Function"),
+      .add("add_row_after", {
+      ...rowInsertRowsAfter,
       sequence: 60,
   })
-      .addChild("insert_function_sum", ["insert", "insert_function"], {
-      name: _lt("SUM"),
-      action: (env) => env.startCellEdition(`=SUM(`),
-      sequence: 0,
+      .add("delete_row", {
+      ...deleteRows,
+      sequence: 70,
   })
-      .addChild("insert_function_average", ["insert", "insert_function"], {
-      name: _lt("AVERAGE"),
-      action: (env) => env.startCellEdition(`=AVERAGE(`),
+      .add("clear_row", {
+      ...clearRows,
+      sequence: 80,
+  })
+      .add("hide_rows", {
+      ...hideRows,
+      sequence: 85,
+      separator: true,
+  })
+      .add("unhide_rows", {
+      ...unhideRows,
+      sequence: 86,
+      separator: true,
+  })
+      .add("conditional_formatting", {
+      ...formatCF,
+      sequence: 90,
+  });
+
+  function getSheetMenuRegistry(args) {
+      const sheetMenuRegistry = new MenuItemRegistry();
+      sheetMenuRegistry
+          .add("delete", {
+          ...deleteSheet,
+          sequence: 10,
+      })
+          .add("duplicate", {
+          ...duplicateSheet,
+          sequence: 20,
+      })
+          .add("rename", {
+          ...renameSheet(args),
+          sequence: 30,
+      })
+          .add("move_right", {
+          ...sheetMoveRight,
+          sequence: 40,
+      })
+          .add("move_left", {
+          ...sheetMoveLeft,
+          sequence: 50,
+      })
+          .add("hide_sheet", {
+          ...hideSheet,
+          sequence: 60,
+      });
+      return sheetMenuRegistry;
+  }
+
+  const topbarMenuRegistry = new MenuItemRegistry();
+  topbarMenuRegistry
+      // ---------------------------------------------------------------------
+      // FILE MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("file", {
+      name: _lt("File"),
       sequence: 10,
   })
-      .addChild("insert_function_count", ["insert", "insert_function"], {
-      name: _lt("COUNT"),
-      action: (env) => env.startCellEdition(`=COUNT(`),
+      // ---------------------------------------------------------------------
+      // EDIT MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("edit", {
+      name: _lt("Edit"),
       sequence: 20,
   })
-      .addChild("insert_function_max", ["insert", "insert_function"], {
-      name: _lt("MAX"),
-      action: (env) => env.startCellEdition(`=MAX(`),
+      .addChild("undo", ["edit"], {
+      ...undo,
+      sequence: 10,
+  })
+      .addChild("redo", ["edit"], {
+      ...redo,
+      sequence: 20,
+      separator: true,
+  })
+      .addChild("copy", ["edit"], {
+      ...copy,
       sequence: 30,
   })
-      .addChild("insert_function_min", ["insert", "insert_function"], {
-      name: _lt("MIN"),
-      action: (env) => env.startCellEdition(`=MIN(`),
+      .addChild("cut", ["edit"], {
+      ...cut,
       sequence: 40,
-      separator: true,
   })
-      .addChild("categorie_function_all", ["insert", "insert_function"], {
-      name: _lt("All"),
+      .addChild("paste", ["edit"], {
+      ...paste,
       sequence: 50,
   })
-      .addChild("all_function_list", ["insert", "insert_function", "categorie_function_all"], () => {
-      const fnNames = functionRegistry.getKeys();
-      return createFormulaFunctionMenuItems(fnNames);
+      .addChild("paste_special", ["edit"], {
+      ...pasteSpecial,
+      sequence: 60,
+      separator: true,
   })
-      .addChild("categories_function_list", ["insert", "insert_function"], () => {
-      const functions = functionRegistry.content;
-      const categories = [...new Set(functionRegistry.getAll().map((fn) => fn.category))].filter(isDefined$1);
-      return categories.sort().map((category, i) => {
-          const functionsInCategory = Object.keys(functions).filter((key) => functions[key].category === category);
-          return {
-              name: category,
-              sequence: 60 + i * 10,
-              children: createFormulaFunctionMenuItems(functionsInCategory),
-          };
-      });
+      .addChild("paste_special_value", ["edit", "paste_special"], {
+      ...pasteSpecialValue,
+      sequence: 10,
   })
-      .addChild("insert_link", ["insert"], {
-      name: _lt("Link"),
+      .addChild("paste_special_format", ["edit", "paste_special"], {
+      ...pasteSpecialFormat,
+      sequence: 20,
+  })
+      .addChild("find_and_replace", ["edit"], {
+      ...findAndReplace,
+      sequence: 65,
       separator: true,
+  })
+      .addChild("edit_delete_cell_values", ["edit"], {
+      ...deleteValues,
       sequence: 70,
-      action: INSERT_LINK,
   })
-      .addChild("insert_sheet", ["insert"], {
-      name: _lt("New sheet"),
+      .addChild("edit_delete_row", ["edit"], {
+      ...deleteRows,
       sequence: 80,
-      action: CREATE_SHEET_ACTION,
-      separator: true,
+  })
+      .addChild("edit_delete_column", ["edit"], {
+      ...deleteCols,
+      sequence: 90,
+  })
+      .addChild("edit_delete_cell_shift_up", ["edit"], {
+      ...deleteCellShiftUp,
+      sequence: 93,
+  })
+      .addChild("edit_delete_cell_shift_left", ["edit"], {
+      ...deleteCellShiftLeft,
+      sequence: 97,
+  })
+      .addChild("edit_unhide_columns", ["edit"], {
+      ...unhideAllCols,
+      sequence: 100,
+  })
+      .addChild("edit_unhide_rows", ["edit"], {
+      ...unhideAllRows,
+      sequence: 100,
+  })
+      // ---------------------------------------------------------------------
+      // VIEW MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("view", {
+      name: _lt("View"),
+      sequence: 30,
   })
       .addChild("unfreeze_panes", ["view"], {
-      name: _lt("Unfreeze"),
+      ...unFreezePane,
       sequence: 4,
-      isVisible: (env) => {
-          const { xSplit, ySplit } = env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId());
-          return xSplit + ySplit > 0;
-      },
-      action: (env) => env.model.dispatch("UNFREEZE_COLUMNS_ROWS", {
-          sheetId: env.model.getters.getActiveSheetId(),
-      }),
   })
       .addChild("freeze_panes", ["view"], {
-      name: _lt("Freeze"),
+      ...freezePane,
       sequence: 5,
       separator: true,
   })
       .addChild("unfreeze_rows", ["view", "freeze_panes"], {
-      name: _lt("No rows"),
-      action: (env) => env.model.dispatch("UNFREEZE_ROWS", {
-          sheetId: env.model.getters.getActiveSheetId(),
-      }),
-      isReadonlyAllowed: true,
+      ...unFreezeRows,
       sequence: 5,
-      isVisible: (env) => !!env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId()).ySplit,
   })
       .addChild("freeze_first_row", ["view", "freeze_panes"], {
-      name: _lt("1 row"),
-      action: (env) => interactiveFreezeColumnsRows(env, "ROW", 1),
-      isReadonlyAllowed: true,
+      ...freezeFirstRow,
       sequence: 10,
   })
       .addChild("freeze_second_row", ["view", "freeze_panes"], {
-      name: _lt("2 rows"),
-      action: (env) => interactiveFreezeColumnsRows(env, "ROW", 2),
-      isReadonlyAllowed: true,
+      ...freezeSecondRow,
       sequence: 15,
   })
       .addChild("freeze_current_row", ["view", "freeze_panes"], {
-      name: _lt("Up to current row"),
-      action: (env) => {
-          const { bottom } = env.model.getters.getSelectedZone();
-          interactiveFreezeColumnsRows(env, "ROW", bottom + 1);
-      },
-      isReadonlyAllowed: true,
+      ...freezeCurrentRow,
       sequence: 20,
       separator: true,
   })
       .addChild("unfreeze_columns", ["view", "freeze_panes"], {
-      name: _lt("No columns"),
-      action: (env) => env.model.dispatch("UNFREEZE_COLUMNS", {
-          sheetId: env.model.getters.getActiveSheetId(),
-      }),
-      isReadonlyAllowed: true,
+      ...unFreezeCols,
       sequence: 25,
-      isVisible: (env) => !!env.model.getters.getPaneDivisions(env.model.getters.getActiveSheetId()).xSplit,
   })
       .addChild("freeze_first_col", ["view", "freeze_panes"], {
-      name: _lt("1 column"),
-      action: (env) => interactiveFreezeColumnsRows(env, "COL", 1),
-      isReadonlyAllowed: true,
+      ...freezeFirstCol,
       sequence: 30,
   })
       .addChild("freeze_second_col", ["view", "freeze_panes"], {
-      name: _lt("2 columns"),
-      action: (env) => interactiveFreezeColumnsRows(env, "COL", 2),
-      isReadonlyAllowed: true,
+      ...freezeSecondCol,
       sequence: 35,
   })
       .addChild("freeze_current_col", ["view", "freeze_panes"], {
-      name: _lt("Up to current column"),
-      action: (env) => {
-          const { right } = env.model.getters.getSelectedZone();
-          interactiveFreezeColumnsRows(env, "COL", right + 1);
-      },
-      isReadonlyAllowed: true,
+      ...freezeCurrentCol,
       sequence: 40,
   })
       .addChild("view_gridlines", ["view"], {
-      name: (env) => env.model.getters.getGridLinesVisibility(env.model.getters.getActiveSheetId())
-          ? _lt("Hide gridlines")
-          : _lt("Show gridlines"),
-      action: SET_GRID_LINES_VISIBILITY_ACTION,
+      ...viewGridlines,
       sequence: 10,
   })
       .addChild("view_formulas", ["view"], {
-      name: (env) => env.model.getters.shouldShowFormulas() ? _lt("Hide formulas") : _lt("Show formulas"),
-      action: SET_FORMULA_VISIBILITY_ACTION,
-      isReadonlyAllowed: true,
+      ...viewFormulas,
       sequence: 15,
   })
-      .addChild("format_number", ["format"], {
-      name: _lt("Numbers"),
-      sequence: 10,
-      separator: true,
+      // ---------------------------------------------------------------------
+      // INSERT MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("insert", {
+      name: _lt("Insert"),
+      sequence: 40,
   })
-      .addChild("format_number_automatic", ["format", "format_number"], {
-      name: NumberFormatTerms.Automatic,
+      .addChild("insert_row_before", ["insert"], {
+      ...topBarInsertRowsBefore,
       sequence: 10,
-      separator: true,
-      action: FORMAT_AUTOMATIC_ACTION,
   })
-      .addChild("format_number_number", ["format", "format_number"], {
-      name: NumberFormatTerms.Number,
-      description: "1,000.12",
+      .addChild("insert_row_after", ["insert"], {
+      ...topBarInsertRowsAfter,
       sequence: 20,
-      action: FORMAT_NUMBER_ACTION,
+      separator: true,
   })
-      .addChild("format_number_percent", ["format", "format_number"], {
-      name: NumberFormatTerms.Percent,
-      description: "10.12%",
+      .addChild("insert_column_before", ["insert"], {
+      ...topBarInsertColsBefore,
       sequence: 30,
-      separator: true,
-      action: FORMAT_PERCENT_ACTION,
   })
-      .addChild("format_number_currency", ["format", "format_number"], {
-      name: NumberFormatTerms.Currency,
-      description: "$1,000.12",
-      sequence: 37,
-      action: FORMAT_CURRENCY_ACTION,
+      .addChild("insert_column_after", ["insert"], {
+      ...topBarInsertColsAfter,
+      sequence: 40,
+      separator: true,
   })
-      .addChild("format_number_currency_rounded", ["format", "format_number"], {
-      name: NumberFormatTerms.CurrencyRounded,
-      description: "$1,000",
-      sequence: 38,
-      action: FORMAT_CURRENCY_ROUNDED_ACTION,
+      .addChild("insert_insert_cell_shift_down", ["insert"], {
+      ...insertCellShiftDown,
+      sequence: 43,
   })
-      .addChild("format_custom_currency", ["format", "format_number"], {
-      name: NumberFormatTerms.CustomCurrency,
-      sequence: 39,
+      .addChild("insert_insert_cell_shift_right", ["insert"], {
+      ...insertCellShiftRight,
+      sequence: 47,
       separator: true,
-      isVisible: (env) => env.loadCurrencies !== undefined,
-      action: OPEN_CUSTOM_CURRENCY_SIDEPANEL_ACTION,
   })
-      .addChild("format_number_date", ["format", "format_number"], {
-      name: NumberFormatTerms.Date,
-      description: "9/26/2008",
-      sequence: 40,
-      action: FORMAT_DATE_ACTION,
-  })
-      .addChild("format_number_time", ["format", "format_number"], {
-      name: NumberFormatTerms.Time,
-      description: "10:43:00 PM",
+      .addChild("insert_chart", ["insert"], {
+      ...insertChart,
       sequence: 50,
-      action: FORMAT_TIME_ACTION,
   })
-      .addChild("format_number_date_time", ["format", "format_number"], {
-      name: NumberFormatTerms.DateTime,
-      description: "9/26/2008 22:43:00",
+      .addChild("insert_image", ["insert"], {
+      ...insertImage,
+      sequence: 55,
+  })
+      .addChild("insert_function", ["insert"], {
+      ...insertFunction,
       sequence: 60,
-      action: FORMAT_DATE_TIME_ACTION,
   })
-      .addChild("format_number_duration", ["format", "format_number"], {
-      name: NumberFormatTerms.Duration,
-      description: "27:51:38",
+      .addChild("insert_function_sum", ["insert", "insert_function"], {
+      ...insertFunctionSum,
+      sequence: 0,
+  })
+      .addChild("insert_function_average", ["insert", "insert_function"], {
+      ...insertFunctionAverage,
+      sequence: 10,
+  })
+      .addChild("insert_function_count", ["insert", "insert_function"], {
+      ...insertFunctionCount,
+      sequence: 20,
+  })
+      .addChild("insert_function_max", ["insert", "insert_function"], {
+      ...insertFunctionMax,
+      sequence: 30,
+  })
+      .addChild("insert_function_min", ["insert", "insert_function"], {
+      ...insertFunctionMin,
+      sequence: 40,
+      separator: true,
+  })
+      .addChild("categorie_function_all", ["insert", "insert_function"], {
+      ...categorieFunctionAll,
+      sequence: 50,
+  })
+      .addChild("categories_function_list", ["insert", "insert_function"], categoriesFunctionListMenuBuilder)
+      .addChild("insert_link", ["insert"], {
+      ...insertLink,
+      separator: true,
       sequence: 70,
+  })
+      .addChild("insert_sheet", ["insert"], {
+      ...insertSheet,
+      sequence: 80,
+      separator: true,
+  })
+      // ---------------------------------------------------------------------
+      // FORMAT MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("format", { name: _lt("Format"), sequence: 50 })
+      .addChild("format_number", ["format"], {
+      ...formatNumberMenuItemSpec,
+      name: _lt("Number"),
+      sequence: 10,
       separator: true,
-      action: FORMAT_DURATION_ACTION,
   })
       .addChild("format_bold", ["format"], {
-      name: _lt("Bold"),
+      ...formatBold,
       sequence: 20,
-      description: "Ctrl+B",
-      action: FORMAT_BOLD_ACTION,
   })
       .addChild("format_italic", ["format"], {
-      name: _lt("Italic"),
+      ...formatItalic,
       sequence: 30,
-      description: "Ctrl+I",
-      action: FORMAT_ITALIC_ACTION,
   })
       .addChild("format_underline", ["format"], {
-      name: _lt("Underline"),
-      description: "Ctrl+U",
+      ...formatUnderline,
       sequence: 40,
-      action: FORMAT_UNDERLINE_ACTION,
   })
       .addChild("format_strikethrough", ["format"], {
-      name: _lt("Strikethrough"),
+      ...formatStrikethrough,
       sequence: 50,
-      action: FORMAT_STRIKETHROUGH_ACTION,
       separator: true,
   })
       .addChild("format_font_size", ["format"], {
-      name: _lt("Font size"),
+      ...formatFontSize,
       sequence: 60,
       separator: true,
   })
       .addChild("format_alignment", ["format"], {
-      name: _lt("Alignment"),
+      ...formatAlignment,
       sequence: 70,
   })
       .addChild("format_alignment_left", ["format", "format_alignment"], {
-      name: "Left",
+      ...formatAlignmentLeft,
       sequence: 10,
-      action: (env) => setStyle(env, { align: "left" }),
   })
       .addChild("format_alignment_center", ["format", "format_alignment"], {
-      name: "Center",
+      ...formatAlignmentCenter,
       sequence: 20,
-      action: (env) => setStyle(env, { align: "center" }),
   })
       .addChild("format_alignment_right", ["format", "format_alignment"], {
-      name: "Right",
+      ...formatAlignmentRight,
       sequence: 30,
-      action: (env) => setStyle(env, { align: "right" }),
       separator: true,
   })
       .addChild("format_alignment_top", ["format", "format_alignment"], {
-      name: "Top",
+      ...formatAlignmentTop,
       sequence: 40,
-      action: (env) => setStyle(env, { verticalAlign: "top" }),
   })
       .addChild("format_alignment_middle", ["format", "format_alignment"], {
-      name: "Middle",
+      ...formatAlignmentMiddle,
       sequence: 50,
-      action: (env) => setStyle(env, { verticalAlign: "middle" }),
   })
       .addChild("format_alignment_bottom", ["format", "format_alignment"], {
-      name: "Bottom",
+      ...formatAlignmentBottom,
       sequence: 60,
-      action: (env) => setStyle(env, { verticalAlign: "bottom" }),
       separator: true,
   })
       .addChild("format_wrapping", ["format"], {
-      name: _lt("Wrapping"),
+      ...formatWrapping,
       sequence: 80,
       separator: true,
   })
       .addChild("format_wrapping_overflow", ["format", "format_wrapping"], {
-      name: _lt("Overflow"),
+      ...formatWrappingOverflow,
       sequence: 10,
-      action: (env) => setStyle(env, { wrapping: "overflow" }),
   })
       .addChild("format_wrapping_wrap", ["format", "format_wrapping"], {
-      name: _lt("Wrap"),
+      ...formatWrappingWrap,
       sequence: 20,
-      action: (env) => setStyle(env, { wrapping: "wrap" }),
   })
       .addChild("format_wrapping_clip", ["format", "format_wrapping"], {
-      name: _lt("Clip"),
+      ...formatWrappingClip,
       sequence: 30,
-      action: (env) => setStyle(env, { wrapping: "clip" }),
   })
       .addChild("format_cf", ["format"], {
-      name: _lt("Conditional formatting"),
+      ...formatCF,
       sequence: 90,
-      action: OPEN_CF_SIDEPANEL_ACTION,
       separator: true,
   })
       .addChild("format_clearFormat", ["format"], {
-      name: _lt("Clear formatting"),
+      ...clearFormat,
       sequence: 100,
-      action: FORMAT_CLEARFORMAT_ACTION,
       separator: true,
+  })
+      // ---------------------------------------------------------------------
+      // DATA MENU ITEMS
+      // ---------------------------------------------------------------------
+      .add("data", {
+      name: _lt("Data"),
+      sequence: 60,
+  })
+      .addChild("sort_range", ["data"], {
+      ...sortRange,
+      sequence: 20,
+      separator: true,
+  })
+      .addChild("sort_ascending", ["data", "sort_range"], {
+      ...sortAscending,
+      sequence: 10,
+  })
+      .addChild("sort_descending", ["data", "sort_range"], {
+      ...sortDescending,
+      sequence: 20,
   })
       .addChild("add_data_filter", ["data"], {
-      name: _lt("Create filter"),
+      ...addDataFilter,
       sequence: 10,
-      action: FILTERS_CREATE_FILTER_TABLE,
-      isVisible: (env) => !SELECTION_CONTAINS_FILTER(env),
-      isEnabled: (env) => SELECTION_IS_CONTINUOUS(env),
   })
       .addChild("remove_data_filter", ["data"], {
-      name: _lt("Remove filter"),
+      ...removeDataFilter,
       sequence: 10,
-      action: FILTERS_REMOVE_FILTER_TABLE,
-      isVisible: SELECTION_CONTAINS_FILTER,
-  });
-  // Font-sizes
-  for (let fs of FONT_SIZES) {
-      topbarMenuRegistry.addChild(`format_font_size_${fs}`, ["format", "format_font_size"], {
-          name: fs.toString(),
-          sequence: fs,
-          action: (env) => setStyle(env, { fontSize: fs }),
-      });
-  }
-  function createFormulaFunctionMenuItems(fnNames) {
-      return fnNames.sort().map((fnName, i) => {
-          return {
-              name: fnName,
-              sequence: i * 10,
-              action: (env) => env.startCellEdition(`=${fnName}(`),
-          };
-      });
-  }
+  });
 
   class OTRegistry extends Registry {
       /**
@@ -16931,6 +17695,22 @@
               aggregated: ev.target.checked,
           });
       }
+      calculateHeaderPosition() {
+          if (this.isDatasetInvalid || this.isLabelInvalid) {
+              return undefined;
+          }
+          const getters = this.env.model.getters;
+          const sheetId = getters.getActiveSheetId();
+          const labelRange = createRange(getters, sheetId, this.labelRange);
+          const dataSets = createDataSets(getters, this.dataSeriesRanges, sheetId, this.props.definition.dataSetsHaveTitle);
+          if (dataSets.length) {
+              return dataSets[0].dataRange.zone.top + 1;
+          }
+          else if (labelRange) {
+              return labelRange.zone.top + 1;
+          }
+          return undefined;
+      }
   }
   LineBarPieConfigPanel.template = "o-spreadsheet-LineBarPieConfigPanel";
   LineBarPieConfigPanel.components = { SelectionInput };
@@ -17178,6 +17958,9 @@
               top,
           });
       }
+      isSameColor(color1, color2) {
+          return isSameColor(color1, color2);
+      }
   }
   ColorPicker.template = "o-spreadsheet-ColorPicker";
   ColorPicker.defaultProps = {
@@ -17193,8 +17976,9 @@
 
   css /* scss */ `
   .o-color-picker-widget {
-    display: inline-block;
+    display: flex;
     position: relative;
+    align-items: center;
 
     .o-color-picker-button-style {
       display: flex;
@@ -17210,6 +17994,7 @@
     }
 
     .o-color-picker-button {
+      height: 30px;
       > span {
         border-bottom: 4px solid;
         height: 16px;
@@ -19419,6 +20204,8 @@
                       start = 0;
                   if (end > textLength)
                       end = textLength;
+                  if (start > textLength)
+                      start = textLength;
               }
               let startNode = this.findChildAtCharacterIndex(start);
               let endNode = this.findChildAtCharacterIndex(end);
@@ -19688,6 +20475,7 @@
       padding-right: 2px;
 
       box-sizing: border-box;
+      font-family: ${DEFAULT_FONT};
 
       caret-color: black;
       padding-left: 3px;
@@ -20130,7 +20918,7 @@
           const highlights = this.env.model.getters.getHighlights();
           const refSheet = sheetName
               ? this.env.model.getters.getSheetIdByName(sheetName)
-              : this.env.model.getters.getEditionSheet();
+              : this.env.model.getters.getCurrentEditedCell().sheetId;
           const highlight = highlights.find((highlight) => {
               if (highlight.sheetId !== refSheet)
                   return false;
@@ -20291,7 +21079,7 @@
       get cellReference() {
           const { col, row, sheetId } = this.env.model.getters.getCurrentEditedCell();
           const prefixSheet = sheetId !== this.env.model.getters.getActiveSheetId();
-          return `${prefixSheet ? getComposerSheetName(this.env.model.getters.getSheetName(sheetId)) + "!" : ""}${toXC(col, row)}`;
+          return `${prefixSheet ? getCanonicalSheetName(this.env.model.getters.getSheetName(sheetId)) + "!" : ""}${toXC(col, row)}`;
       }
       get cellReferenceStyle() {
           const { x: left, y: top } = this.rect;
@@ -20476,15 +21264,18 @@
       return { x, y };
   }
 
-  function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, initialFigure, { x: viewportX, y: viewportY }, { scrollX, scrollY }) {
+  function dragFigureForMove({ x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, initialFigure, { x: viewportX, y: viewportY }, { maxX, maxY }, { scrollX, scrollY }) {
       const minX = viewportX ? 0 : -scrollX;
       const minY = viewportY ? 0 : -scrollY;
-      let deltaX = mouseX - mouseInitialX;
-      const newX = Math.max(initialFigure.x + deltaX, minX);
-      let deltaY = mouseY - mouseInitialY;
-      const newY = Math.max(initialFigure.y + deltaY, minY);
+      const deltaX = mouseX - mouseInitialX;
+      const newX = clamp(initialFigure.x + deltaX, minX, maxX - initialFigure.width - scrollX);
+      const deltaY = mouseY - mouseInitialY;
+      const newY = clamp(initialFigure.y + deltaY, minY, maxY - initialFigure.height - scrollY);
       return { ...initialFigure, x: newX, y: newY };
   }
+  function clamp(value, min, max) {
+      return Math.min(Math.max(value, min), max);
+  }
   function dragFigureForResize(initialFigure, dirX, dirY, { x: mouseX, y: mouseY }, { x: mouseInitialX, y: mouseInitialY }, keepRatio, minFigSize) {
       let { x, y, width, height } = initialFigure;
       if (keepRatio && dirX != 0 && dirY != 0) {
@@ -20883,12 +21674,16 @@
           }
           const sheetId = this.env.model.getters.getActiveSheetId();
           const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+          const maxDimensions = {
+              maxX: this.env.model.getters.getColDimensions(sheetId, this.env.model.getters.getNumberCols(sheetId) - 1).end,
+              maxY: this.env.model.getters.getRowDimensions(sheetId, this.env.model.getters.getNumberRows(sheetId) - 1).end,
+          };
           const { x, y } = internalFigureToScreen(this.env.model.getters, figure);
           const initialFig = { ...figure, x, y };
           const onMouseMove = (ev) => {
               const getters = this.env.model.getters;
               const currentMousePosition = { x: ev.clientX, y: ev.clientY };
-              const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFig, this.env.model.getters.getMainViewportCoordinates(), getters.getActiveSheetScrollInfo());
+              const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFig, this.env.model.getters.getMainViewportCoordinates(), maxDimensions, getters.getActiveSheetScrollInfo());
               const otherFigures = this.getOtherFigures(figure.id);
               const internalDragged = screenFigureToInternal(getters, draggedFigure);
               const snapResult = snapForMove(getters, internalDragged, otherFigures);
@@ -21218,6 +22013,10 @@
   };
 
   class GridPopover extends owl.Component {
+      constructor() {
+          super(...arguments);
+          this.zIndex = ComponentsImportance.GridPopover;
+      }
       get cellPopover() {
           const popover = this.env.model.getters.getCellPopover(this.props.hoveredCell);
           if (!popover.isOpen) {
@@ -22582,6 +23381,10 @@
           }
       }
       onInput(ev) {
+          // the user meant to paste in the sheet, not open the composer with the pasted content
+          if (!ev.isComposing && ev.inputType === "insertFromPaste") {
+              return;
+          }
           if (ev.data) {
               // if the user types a character on the grid, it means he wants to start composing the selected cell with that
               // character
@@ -23430,68 +24233,7 @@
       });
   }
 
-  function convertBorders(data, warningManager) {
-      const borderArray = data.borders.map((border) => {
-          addBorderWarnings(border, warningManager);
-          const b = {
-              top: convertBorderDescr$1(border.top, warningManager),
-              bottom: convertBorderDescr$1(border.bottom, warningManager),
-              left: convertBorderDescr$1(border.left, warningManager),
-              right: convertBorderDescr$1(border.right, warningManager),
-          };
-          Object.keys(b).forEach((key) => b[key] === undefined && delete b[key]);
-          return b;
-      });
-      return arrayToObject(borderArray, 1);
-  }
-  function convertBorderDescr$1(borderDescr, warningManager) {
-      if (!borderDescr)
-          return undefined;
-      addBorderDescrWarnings(borderDescr, warningManager);
-      const style = BORDER_STYLE_CONVERSION_MAP[borderDescr.style];
-      return style ? [style, convertColor(borderDescr.color)] : undefined;
-  }
-  function convertStyles(data, warningManager) {
-      const stylesArray = data.styles.map((style) => {
-          return convertStyle({
-              fontStyle: data.fonts[style.fontId],
-              fillStyle: data.fills[style.fillId],
-              alignment: style.alignment,
-          }, warningManager);
-      });
-      return arrayToObject(stylesArray, 1);
-  }
-  function convertStyle(styleStruct, warningManager) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-      addStyleWarnings(styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.fontStyle, styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.fillStyle, warningManager);
-      addHorizontalAlignmentWarnings((_a = styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.alignment) === null || _a === void 0 ? void 0 : _a.horizontal, warningManager);
-      addVerticalAlignmentWarnings((_b = styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.alignment) === null || _b === void 0 ? void 0 : _b.vertical, warningManager);
-      return {
-          bold: (_c = styleStruct.fontStyle) === null || _c === void 0 ? void 0 : _c.bold,
-          italic: (_d = styleStruct.fontStyle) === null || _d === void 0 ? void 0 : _d.italic,
-          strikethrough: (_e = styleStruct.fontStyle) === null || _e === void 0 ? void 0 : _e.strike,
-          underline: (_f = styleStruct.fontStyle) === null || _f === void 0 ? void 0 : _f.underline,
-          align: ((_g = styleStruct.alignment) === null || _g === void 0 ? void 0 : _g.horizontal)
-              ? H_ALIGNMENT_CONVERSION_MAP[styleStruct.alignment.horizontal]
-              : undefined,
-          // In xlsx fills, bgColor is the color of the fill, and fgColor is the color of the pattern above the background, except in solid fills
-          fillColor: ((_h = styleStruct.fillStyle) === null || _h === void 0 ? void 0 : _h.patternType) === "solid"
-              ? convertColor((_j = styleStruct.fillStyle) === null || _j === void 0 ? void 0 : _j.fgColor)
-              : convertColor((_k = styleStruct.fillStyle) === null || _k === void 0 ? void 0 : _k.bgColor),
-          textColor: convertColor((_l = styleStruct.fontStyle) === null || _l === void 0 ? void 0 : _l.color),
-          fontSize: (_m = styleStruct.fontStyle) === null || _m === void 0 ? void 0 : _m.size,
-      };
-  }
-  function convertFormats(data, warningManager) {
-      const formats = [];
-      for (let style of data.styles) {
-          const format = convertXlsxFormat(style.numFmtId, data.numFmts, warningManager);
-          if (format) {
-              formats[style.numFmtId] = format;
-          }
-      }
-      return arrayToObject(formats, 1);
-  }
+  const XLSX_DATE_FORMAT_REGEX = /^(yy|yyyy|m{1,5}|d{1,4}|h{1,2}|s{1,2}|am\/pm|a\/m|\s|-|\/|\.|:)+$/i;
   /**
    * Convert excel format to o_spreadsheet format
    *
@@ -23516,17 +24258,107 @@
                   throw new Error("Multiple escaped blocks in format");
               }
               convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
-              convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore with of next char for align purposes. Not supported ATM
+              convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore width of next char for align purposes. Not supported ATM
               convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
               convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
-              formatValue(0, convertedFormat);
-              return convertedFormat;
+              convertedFormat = convertedFormat.replace(/\\./g, (match) => match[1]); // unescape other characters
+              if (isXlsxDateFormat(convertedFormat)) {
+                  convertedFormat = convertDateFormat$1(convertedFormat);
+              }
+              if (isFormatSupported(convertedFormat)) {
+                  return convertedFormat;
+              }
           }
           catch (e) { }
       }
       warningManager.generateNotSupportedWarning(WarningTypes.NumFmtIdNotSupported, format || `nmFmtId ${numFmtId}`);
       return undefined;
   }
+  function isFormatSupported(format) {
+      try {
+          formatValue(0, format);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  function isXlsxDateFormat(format) {
+      return format.match(XLSX_DATE_FORMAT_REGEX) !== null;
+  }
+  function convertDateFormat$1(format) {
+      // Some of these aren't defined neither in the OpenXML spec not the Xlsx extension of OpenXML,
+      // but can still occur and are supported by Excel/Google sheets
+      format = format.toLowerCase();
+      format = format.replace(/mmmmm/g, "mmm");
+      format = format.replace(/am\/pm|a\/m/g, "a");
+      format = format.replace(/hhhh/g, "hh");
+      format = format.replace(/\bh\b/g, "hh");
+      return format;
+  }
+
+  function convertBorders(data, warningManager) {
+      const borderArray = data.borders.map((border) => {
+          addBorderWarnings(border, warningManager);
+          const b = {
+              top: convertBorderDescr$1(border.top, warningManager),
+              bottom: convertBorderDescr$1(border.bottom, warningManager),
+              left: convertBorderDescr$1(border.left, warningManager),
+              right: convertBorderDescr$1(border.right, warningManager),
+          };
+          Object.keys(b).forEach((key) => b[key] === undefined && delete b[key]);
+          return b;
+      });
+      return arrayToObject(borderArray, 1);
+  }
+  function convertBorderDescr$1(borderDescr, warningManager) {
+      if (!borderDescr)
+          return undefined;
+      addBorderDescrWarnings(borderDescr, warningManager);
+      const style = BORDER_STYLE_CONVERSION_MAP[borderDescr.style];
+      return style ? [style, convertColor(borderDescr.color)] : undefined;
+  }
+  function convertStyles(data, warningManager) {
+      const stylesArray = data.styles.map((style) => {
+          return convertStyle({
+              fontStyle: data.fonts[style.fontId],
+              fillStyle: data.fills[style.fillId],
+              alignment: style.alignment,
+          }, warningManager);
+      });
+      return arrayToObject(stylesArray, 1);
+  }
+  function convertStyle(styleStruct, warningManager) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+      addStyleWarnings(styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.fontStyle, styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.fillStyle, warningManager);
+      addHorizontalAlignmentWarnings((_a = styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.alignment) === null || _a === void 0 ? void 0 : _a.horizontal, warningManager);
+      addVerticalAlignmentWarnings((_b = styleStruct === null || styleStruct === void 0 ? void 0 : styleStruct.alignment) === null || _b === void 0 ? void 0 : _b.vertical, warningManager);
+      return {
+          bold: (_c = styleStruct.fontStyle) === null || _c === void 0 ? void 0 : _c.bold,
+          italic: (_d = styleStruct.fontStyle) === null || _d === void 0 ? void 0 : _d.italic,
+          strikethrough: (_e = styleStruct.fontStyle) === null || _e === void 0 ? void 0 : _e.strike,
+          underline: (_f = styleStruct.fontStyle) === null || _f === void 0 ? void 0 : _f.underline,
+          align: ((_g = styleStruct.alignment) === null || _g === void 0 ? void 0 : _g.horizontal)
+              ? H_ALIGNMENT_CONVERSION_MAP[styleStruct.alignment.horizontal]
+              : undefined,
+          // In xlsx fills, bgColor is the color of the fill, and fgColor is the color of the pattern above the background, except in solid fills
+          fillColor: ((_h = styleStruct.fillStyle) === null || _h === void 0 ? void 0 : _h.patternType) === "solid"
+              ? convertColor((_j = styleStruct.fillStyle) === null || _j === void 0 ? void 0 : _j.fgColor)
+              : convertColor((_k = styleStruct.fillStyle) === null || _k === void 0 ? void 0 : _k.bgColor),
+          textColor: convertColor((_l = styleStruct.fontStyle) === null || _l === void 0 ? void 0 : _l.color),
+          fontSize: (_m = styleStruct.fontStyle) === null || _m === void 0 ? void 0 : _m.size,
+      };
+  }
+  function convertFormats(data, warningManager) {
+      const formats = [];
+      for (let style of data.styles) {
+          const format = convertXlsxFormat(style.numFmtId, data.numFmts, warningManager);
+          if (format) {
+              formats[style.numFmtId] = format;
+          }
+      }
+      return arrayToObject(formats, 1);
+  }
   // ---------------------------------------------------------------------------
   // Warnings
   // ---------------------------------------------------------------------------
@@ -24081,16 +24913,18 @@
       };
   }
   function convertChartData(chartData) {
-      var _a;
-      const labelRange = (_a = chartData.dataSets[0].label) === null || _a === void 0 ? void 0 : _a.replace(/\$/g, "");
-      let dataSets = chartData.dataSets.map((data) => data.range.replace(/\$/g, ""));
+      const dataSetsHaveTitle = chartData.dataSets[0].label !== undefined;
+      const labelRange = chartData.labelRange
+          ? convertExcelRangeToSheetXC(chartData.labelRange, dataSetsHaveTitle)
+          : undefined;
+      let dataSets = chartData.dataSets.map((data) => convertExcelRangeToSheetXC(data.range, dataSetsHaveTitle));
       // For doughnut charts, in chartJS first dataset = outer dataset, in excel first dataset = inner dataset
       if (chartData.type === "pie") {
           dataSets.reverse();
       }
       return {
           dataSets,
-          dataSetsHaveTitle: false,
+          dataSetsHaveTitle,
           labelRange,
           title: chartData.title || "",
           type: chartData.type,
@@ -24101,6 +24935,28 @@
           aggregated: false,
           labelsAsText: false,
       };
+  }
+  function convertExcelRangeToSheetXC(range, dataSetsHaveTitle) {
+      let { sheetName, xc } = splitReference(range);
+      if (sheetName) {
+          sheetName = getCanonicalSheetName(sheetName) + "!";
+      }
+      else {
+          sheetName = "";
+      }
+      let zone = toUnboundedZone(xc);
+      if (dataSetsHaveTitle && zone.bottom !== undefined && zone.right !== undefined) {
+          const height = zone.bottom - zone.top + 1;
+          const width = zone.right - zone.left + 1;
+          if (height === 1) {
+              zone = { ...zone, left: zone.left - 1 };
+          }
+          else if (width === 1) {
+              zone = { ...zone, top: zone.top - 1 };
+          }
+      }
+      const dataXC = zoneToXc(zone);
+      return sheetName + dataXC;
   }
 
   /**
@@ -25168,6 +26024,7 @@
                   title: chartTitle,
                   type: CHART_TYPE_CONVERSION_MAP[chartType],
                   dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`)),
+                  labelRange: this.extractChildTextContent(rootChartElement, "c:ser c:cat c:f"),
                   backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                       default: "ffffff",
                   }).asString(),
@@ -25187,7 +26044,7 @@
       extractChartDatasets(chartElement) {
           return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
               return {
-                  label: this.extractChildTextContent(chartDataElement, "c:cat c:f"),
+                  label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
                   range: this.extractChildTextContent(chartDataElement, "c:val c:f", { required: true }),
               };
           });
@@ -29104,6 +29961,39 @@
               case "DELETE_FIGURE":
                   this.removeFigure(cmd.id, cmd.sheetId);
                   break;
+              case "REMOVE_COLUMNS_ROWS":
+                  this.onRowColDelete(cmd.sheetId, cmd.dimension);
+          }
+      }
+      onRowColDelete(sheetId, dimension) {
+          dimension === "ROW" ? this.onRowDeletion(sheetId) : this.onColDeletion(sheetId);
+      }
+      onRowDeletion(sheetId) {
+          const numHeader = this.getters.getNumberRows(sheetId);
+          let gridHeight = 0;
+          for (let i = 0; i < numHeader; i++) {
+              gridHeight += this.getters.getRowSize(sheetId, i);
+          }
+          const figures = this.getters.getFigures(sheetId);
+          for (const figure of figures) {
+              const newY = Math.min(figure.y, gridHeight - figure.height);
+              if (newY !== figure.y) {
+                  this.dispatch("UPDATE_FIGURE", { sheetId, id: figure.id, y: newY });
+              }
+          }
+      }
+      onColDeletion(sheetId) {
+          const numHeader = this.getters.getNumberCols(sheetId);
+          let gridWidth = 0;
+          for (let i = 0; i < numHeader; i++) {
+              gridWidth += this.getters.getColSize(sheetId, i);
+          }
+          const figures = this.getters.getFigures(sheetId);
+          for (const figure of figures) {
+              const newX = Math.min(figure.x, gridWidth - figure.width);
+              if (newX !== figure.x) {
+                  this.dispatch("UPDATE_FIGURE", { sheetId, id: figure.id, x: newX });
+              }
           }
       }
       updateFigure(sheetId, figure) {
@@ -30774,7 +31664,7 @@
                   sheetName = rangeImpl.invalidSheetName;
               }
               else {
-                  sheetName = getComposerSheetName(this.getters.getSheetName(rangeImpl.sheetId));
+                  sheetName = getCanonicalSheetName(this.getters.getSheetName(rangeImpl.sheetId));
               }
           }
           if (prefixSheet && !sheetName) {
@@ -31825,9 +32715,7 @@
               // remove duplicates first to check validity on a reduced
               // set of colors, then normalize to HEX and remove duplicates
               // again
-              [...new Set([...usedColors, ...this.customColors])]
-                  .filter(isColorValid)
-                  .map((c) => toHex(c).toLowerCase())),
+              [...new Set([...usedColors, ...this.customColors])].filter(isColorValid).map(toHex)),
           ]).filter((color) => !COLOR_PICKER_DEFAULTS.includes(color));
       }
       getColorsFromCells(cells) {
@@ -31888,7 +32776,7 @@
           return [...chartsColors];
       }
       tryToAddColor(color) {
-          const formattedColor = toHex(color).toLowerCase();
+          const formattedColor = toHex(color);
           if (color && !COLOR_PICKER_DEFAULTS.includes(formattedColor)) {
               this.customColors.add(formattedColor);
           }
@@ -32903,8 +33791,8 @@
           this.getters = getters;
           this.sheetId = sheetId;
           this.boundaries = boundaries;
-          this.width = sizeInGrid.width;
-          this.height = sizeInGrid.height;
+          this.viewportWidth = sizeInGrid.width;
+          this.viewportHeight = sizeInGrid.height;
           this.offsetScrollbarX = offsets.x;
           this.offsetScrollbarY = offsets.y;
           this.canScrollVertically = options.canScrollVertically;
@@ -32915,6 +33803,10 @@
           this.adjustViewportOffsetY();
       }
       // PUBLIC
+      /** Returns the maximum size (in Pixels) of the viewport relative to its allocated client size
+       * When the viewport grid size is smaller than its client width (resp. height), it will return
+       * the client width (resp. height).
+       */
       getMaxSize() {
           const lastCol = this.getters.findLastVisibleColRowIndex(this.sheetId, "COL", {
               first: this.boundaries.left,
@@ -32926,20 +33818,24 @@
           });
           const { end: lastColEnd, size: lastColSize } = this.getters.getColDimensions(this.sheetId, lastCol);
           const { end: lastRowEnd, size: lastRowSize } = this.getters.getRowDimensions(this.sheetId, lastRow);
-          const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.width, 0);
+          const leftColIndex = this.searchHeaderIndex("COL", lastColEnd - this.viewportWidth, 0);
           const leftColSize = this.getters.getColSize(this.sheetId, leftColIndex);
-          const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.height, 0);
+          const leftRowIndex = this.searchHeaderIndex("ROW", lastRowEnd - this.viewportHeight, 0);
           const topRowSize = this.getters.getRowSize(this.sheetId, leftRowIndex);
-          const width = lastColEnd -
-              this.offsetCorrectionX +
-              (this.canScrollHorizontally
-                  ? Math.max(DEFAULT_CELL_WIDTH, Math.min(leftColSize, this.width - lastColSize))
-                  : 0);
-          const height = lastRowEnd -
-              this.offsetCorrectionY +
-              (this.canScrollVertically
-                  ? Math.max(DEFAULT_CELL_HEIGHT + 5, Math.min(topRowSize, this.height - lastRowSize))
-                  : 0);
+          let width = lastColEnd - this.offsetCorrectionX;
+          if (this.canScrollHorizontally) {
+              width += Math.max(DEFAULT_CELL_WIDTH, // leave some minimal space to let the user know they scrolled all the way
+              Math.min(leftColSize, this.viewportWidth - lastColSize) // Add pixels that allows the snapping at maximum horizontal scroll
+              );
+              width = Math.max(width, this.viewportWidth); // if the viewport grid size is smaller than its client width, return client width
+          }
+          let height = lastRowEnd - this.offsetCorrectionY;
+          if (this.canScrollVertically) {
+              height += Math.max(DEFAULT_CELL_HEIGHT + 5, // leave some space to let the user know they scrolled all the way
+              Math.min(topRowSize, this.viewportHeight - lastRowSize) // Add pixels that allows the snapping at maximum vertical scroll
+              );
+              height = Math.max(height, this.viewportHeight); // if the viewport grid size is smaller than its client height, return client height
+          }
           return { width, height };
       }
       /**
@@ -32948,7 +33844,7 @@
        * It returns -1 if no column is found.
        */
       getColIndex(x, absolute = false) {
-          if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.width) {
+          if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
               return -1;
           }
           return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left, absolute);
@@ -32959,7 +33855,7 @@
        * It returns -1 if no row is found.
        */
       getRowIndex(y, absolute = false) {
-          if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.height) {
+          if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
               return -1;
           }
           return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top, absolute);
@@ -32983,48 +33879,66 @@
               this.adjustPositionY(row);
           }
       }
-      adjustPositionX(col) {
+      adjustPositionX(targetCol) {
           const sheetId = this.sheetId;
-          const { start, end } = this.getters.getColDimensions(sheetId, col);
-          while (end > this.offsetX + this.offsetCorrectionX + this.width &&
-              this.offsetX + this.offsetCorrectionX < start) {
-              this.offsetX = this.getters.getColDimensions(sheetId, this.left).end - this.offsetCorrectionX;
-              this.offsetScrollbarX = this.offsetX;
-              this.adjustViewportZoneX();
-          }
-          while (col < this.left) {
-              let leftCol;
-              for (leftCol = this.left; leftCol >= 0; leftCol--) {
-                  if (!this.getters.isColHidden(sheetId, leftCol)) {
+          const { end } = this.getters.getColDimensions(sheetId, targetCol);
+          const maxCol = this.getters.getNumberCols(sheetId);
+          if (this.offsetX + this.offsetCorrectionX + this.viewportWidth < end) {
+              for (let col = this.left; this.offsetX + this.offsetCorrectionX + this.viewportWidth < end; col++) {
+                  if (col > maxCol) {
+                      break;
+                  }
+                  if (this.getters.isColHidden(sheetId, col)) {
+                      continue;
+                  }
+                  this.offsetX = this.getters.getColDimensions(sheetId, col).end - this.offsetCorrectionX;
+                  this.offsetScrollbarX = this.offsetX;
+                  this.adjustViewportZoneX();
+              }
+          }
+          else if (this.left > targetCol) {
+              for (let col = this.left; col >= targetCol; col--) {
+                  if (col < 0) {
                       break;
                   }
+                  if (this.getters.isColHidden(sheetId, col)) {
+                      continue;
+                  }
+                  this.offsetX = this.getters.getColDimensions(sheetId, col).start - this.offsetCorrectionX;
+                  this.offsetScrollbarX = this.offsetX;
+                  this.adjustViewportZoneX();
               }
-              this.offsetX =
-                  this.getters.getColDimensions(sheetId, leftCol - 1).start - this.offsetCorrectionX;
-              this.offsetScrollbarX = this.offsetX;
-              this.adjustViewportZoneX();
           }
       }
-      adjustPositionY(row) {
+      adjustPositionY(targetRow) {
           const sheetId = this.sheetId;
-          while (this.getters.getRowDimensions(sheetId, row).end >
-              this.offsetY + this.height + this.offsetCorrectionY &&
-              this.offsetY + this.offsetCorrectionY < this.getters.getRowDimensions(sheetId, row).start) {
-              this.offsetY = this.getters.getRowDimensions(sheetId, this.top).end - this.offsetCorrectionY;
-              this.offsetScrollbarY = this.offsetY;
-              this.adjustViewportZoneY();
-          }
-          while (row < this.top) {
-              let topRow;
-              for (topRow = this.top; topRow >= 0; topRow--) {
-                  if (!this.getters.isRowHidden(sheetId, topRow)) {
+          const { end } = this.getters.getRowDimensions(sheetId, targetRow);
+          const maxRow = this.getters.getNumberRows(sheetId);
+          if (this.offsetY + this.viewportHeight + this.offsetCorrectionY < end) {
+              for (let row = this.top; this.offsetY + this.viewportHeight + this.offsetCorrectionY < end; row++) {
+                  if (row > maxRow) {
+                      break;
+                  }
+                  if (this.getters.isRowHidden(sheetId, row)) {
+                      continue;
+                  }
+                  this.offsetY = this.getters.getRowDimensions(sheetId, row).end - this.offsetCorrectionY;
+                  this.offsetScrollbarY = this.offsetY;
+                  this.adjustViewportZoneY();
+              }
+          }
+          else if (this.top > targetRow) {
+              for (let row = this.top; row >= targetRow; row--) {
+                  if (row < 0) {
                       break;
                   }
+                  if (this.getters.isRowHidden(sheetId, row)) {
+                      continue;
+                  }
+                  this.offsetY = this.getters.getRowDimensions(sheetId, row).start - this.offsetCorrectionY;
+                  this.offsetScrollbarY = this.offsetY;
+                  this.adjustViewportZoneY();
               }
-              this.offsetY =
-                  this.getters.getRowDimensions(sheetId, topRow - 1).start - this.offsetCorrectionY;
-              this.offsetScrollbarY = this.offsetY;
-              this.adjustViewportZoneY();
           }
       }
       setViewportOffset(offsetX, offsetY) {
@@ -33046,8 +33960,8 @@
               const x = this.getters.getColRowOffset("COL", this.zone.left, targetZone.left) +
                   this.offsetCorrectionX;
               const y = this.getters.getColRowOffset("ROW", this.zone.top, targetZone.top) + this.offsetCorrectionY;
-              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.width);
-              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.height);
+              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
+              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
               return {
                   x,
                   y,
@@ -33110,12 +34024,12 @@
       adjustViewportOffsetX() {
           if (this.canScrollHorizontally) {
               const { width: viewportWidth } = this.getMaxSize();
-              if (this.width + this.offsetScrollbarX > viewportWidth) {
-                  this.offsetScrollbarX = Math.max(0, viewportWidth - this.width);
+              if (this.viewportWidth + this.offsetScrollbarX > viewportWidth) {
+                  this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
               }
           }
           this.left = this.getColIndex(this.offsetScrollbarX, true);
-          this.right = this.getColIndex(this.offsetScrollbarX + this.width, true);
+          this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth, true);
           if (this.right === -1) {
               this.right = this.boundaries.right;
           }
@@ -33127,12 +34041,12 @@
       adjustViewportOffsetY() {
           if (this.canScrollVertically) {
               const { height: paneHeight } = this.getMaxSize();
-              if (this.height + this.offsetScrollbarY > paneHeight) {
-                  this.offsetScrollbarY = Math.max(0, paneHeight - this.height);
+              if (this.viewportHeight + this.offsetScrollbarY > paneHeight) {
+                  this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
               }
           }
           this.top = this.getRowIndex(this.offsetScrollbarY, true);
-          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.width, true);
+          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportWidth, true);
           if (this.bottom === -1) {
               this.bottom = this.boundaries.bottom;
           }
@@ -33143,7 +34057,7 @@
       adjustViewportZoneX() {
           const sheetId = this.sheetId;
           this.left = this.searchHeaderIndex("COL", this.offsetScrollbarX, this.boundaries.left);
-          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.width, this.left));
+          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.viewportWidth, this.left));
           if (this.right === -1) {
               this.right = this.getters.getNumberCols(sheetId) - 1;
           }
@@ -33156,7 +34070,7 @@
       adjustViewportZoneY() {
           const sheetId = this.sheetId;
           this.top = this.searchHeaderIndex("ROW", this.offsetScrollbarY, this.boundaries.top);
-          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.height, this.top));
+          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.viewportHeight, this.top));
           if (this.bottom === -1) {
               this.bottom = this.getters.getNumberRows(sheetId) - 1;
           }
@@ -33217,8 +34131,8 @@
            * In the absence of a component (standalone model), is it mandatory to set reasonable default values
            * to ensure the correct operation of this plugin.
            */
-          this.sheetViewWidth = DEFAULT_SHEETVIEW_SIZE;
-          this.sheetViewHeight = DEFAULT_SHEETVIEW_SIZE;
+          this.sheetViewWidth = getDefaultSheetViewSize();
+          this.sheetViewHeight = getDefaultSheetViewSize();
           this.gridOffsetX = 0;
           this.gridOffsetY = 0;
           this.sheetsWithDirtyViewports = new Set();
@@ -33419,8 +34333,7 @@
           return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => !this.getters.isHeaderHidden(sheetId, "ROW", row));
       }
       /**
-       * Return the main viewport maximum size. That is the zone dimension
-       * with some bottom and right padding.
+       * Return the main viewport maximum size relative to the client size.
        */
       getMainViewportRect() {
           const sheetId = this.getters.getActiveSheetId();
@@ -33436,8 +34349,8 @@
           const { width, height } = this.getMainViewportRect();
           const viewport = this.getMainInternalViewport(sheetId);
           return {
-              maxOffsetX: Math.max(0, width - viewport.width + 1),
-              maxOffsetY: Math.max(0, height - viewport.height + 1),
+              maxOffsetX: Math.max(0, width - viewport.viewportWidth + 1),
+              maxOffsetY: Math.max(0, height - viewport.viewportHeight + 1),
           };
       }
       getColRowOffsetInViewport(dimension, referenceIndex, index) {
@@ -35657,7 +36570,7 @@
           const inputSheetId = this.activeSheet;
           const sheetId = this.getters.getActiveSheetId();
           const sheetName = this.getters.getSheetName(sheetId);
-          this.add([sheetId === inputSheetId ? xc : `${getComposerSheetName(sheetName)}!${xc}`]);
+          this.add([sheetId === inputSheetId ? xc : `${getCanonicalSheetName(sheetName)}!${xc}`]);
       }
       handle(cmd) {
           switch (cmd.type) {
@@ -37904,13 +38817,19 @@
        */
       paste(target) {
           const sheetId = this.getters.getActiveSheetId();
+          const { width, height } = this.copiedFigure;
+          const numCols = this.getters.getNumberCols(sheetId);
+          const numRows = this.getters.getNumberRows(sheetId);
+          const targetX = this.getters.getColDimensions(sheetId, target[0].left).start;
+          const targetY = this.getters.getRowDimensions(sheetId, target[0].top).start;
+          const maxX = this.getters.getColDimensions(sheetId, numCols - 1).end;
+          const maxY = this.getters.getRowDimensions(sheetId, numRows - 1).end;
           const position = {
-              x: this.getters.getColDimensions(sheetId, target[0].left).start,
-              y: this.getters.getRowDimensions(sheetId, target[0].top).start,
+              x: maxX < width ? 0 : Math.min(targetX, maxX - width),
+              y: maxY < height ? 0 : Math.min(targetY, maxY - height),
           };
-          const size = { height: this.copiedFigure.height, width: this.copiedFigure.width };
           const newId = new UuidGenerator().uuidv4();
-          this.copiedFigureContent.paste(sheetId, newId, position, size);
+          this.copiedFigureContent.paste(sheetId, newId, position, { height, width });
           if (this.operation === "CUT") {
               this.dispatch("DELETE_FIGURE", {
                   sheetId: this.copiedFigureContent.sheetId,
@@ -38276,7 +39195,7 @@
           return token;
       const { xc, sheetName } = splitReference(token.value);
       const [left, right] = xc.split(":");
-      const sheetRef = sheetName ? `${getComposerSheetName(sheetName)}!` : "";
+      const sheetRef = sheetName ? `${getCanonicalSheetName(sheetName)}!` : "";
       const updatedLeft = getTokenNextReferenceType(left);
       const updatedRight = right ? `:${getTokenNextReferenceType(right)}` : "";
       return { ...token, value: sheetRef + updatedLeft + updatedRight };
@@ -38535,9 +39454,6 @@
           }
           return this.currentContent;
       }
-      getEditionSheet() {
-          return this.sheetId;
-      }
       getComposerSelection() {
           return {
               start: this.selectionStart,
@@ -38821,8 +39737,8 @@
       getZoneReference(zone, fixedParts = [{ colFixed: false, rowFixed: false }]) {
           const sheetId = this.getters.getActiveSheetId();
           let selectedXc = this.getters.zoneToXC(sheetId, zone, fixedParts);
-          if (this.getters.getEditionSheet() !== this.getters.getActiveSheetId()) {
-              const sheetName = getComposerSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
+          if (this.getters.getCurrentEditedCell().sheetId !== this.getters.getActiveSheetId()) {
+              const sheetName = getCanonicalSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
               selectedXc = `${sheetName}!${selectedXc}`;
           }
           return selectedXc;
@@ -38836,7 +39752,7 @@
               _fixedParts.pop();
           }
           const newRange = range.clone({ parts: _fixedParts });
-          return this.getters.getSelectionRangeString(newRange, this.getters.getEditionSheet());
+          return this.getters.getSelectionRangeString(newRange, this.getters.getCurrentEditedCell().sheetId);
       }
       /**
        * Replace the current selection by a new text.
@@ -38869,7 +39785,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return;
           }
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           const XCs = this.getReferencedRanges().map((range) => this.getters.getRangeString(range, editionSheetId));
           const colorsToKeep = {};
           for (const xc of XCs) {
@@ -38898,7 +39814,7 @@
           if (!this.currentContent.startsWith("=") || this.mode === "inactive") {
               return [];
           }
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           const rangeColor = (rangeString) => {
               const colorIndex = this.colorIndexByRange[rangeString];
               return colors$1[colorIndex % colors$1.length];
@@ -38916,7 +39832,7 @@
        * Return ranges currently referenced in the composer
        */
       getReferencedRanges() {
-          const editionSheetId = this.getters.getEditionSheet();
+          const editionSheetId = this.getters.getCurrentEditedCell().sheetId;
           return this.currentTokens
               .filter((token) => token.type === "REFERENCE")
               .map((token) => this.getters.getRangeFromSheetXC(editionSheetId, token.value));
@@ -38975,7 +39891,6 @@
       "isSelectingForComposer",
       "showSelectionIndicator",
       "getCurrentContent",
-      "getEditionSheet",
       "getComposerSelection",
       "getCurrentTokens",
       "getTokenAtCursor",
@@ -39648,7 +40563,7 @@
   const clickableCellRegistry = new Registry();
   clickableCellRegistry.add("link", {
       condition: (position, env) => !!env.model.getters.getEvaluatedCell(position).link,
-      action: (position, env) => openLink(env.model.getters.getEvaluatedCell(position).link, env),
+      execute: (position, env) => openLink(env.model.getters.getEvaluatedCell(position).link, env),
       sequence: 5,
   });
 
@@ -40105,7 +41020,7 @@
                   name: this.getComposedFnName(fnName, fnValue),
                   sequence: i,
                   isReadonlyAllowed: true,
-                  action: () => {
+                  execute: () => {
                       this.selectedStatisticFn = fnName;
                   },
               });
@@ -40273,10 +41188,6 @@
     font-size: 15px;
     border-top: 1px solid lightgrey;
 
-    .o-add-sheet.disabled {
-      cursor: not-allowed;
-    }
-
     .o-sheet-item {
       cursor: pointer;
       &:hover {
@@ -40298,10 +41209,6 @@
     .o-bottom-bar-arrows {
       .o-bottom-bar-arrow {
         cursor: pointer;
-        &.o-disabled {
-          opacity: 0.4;
-          cursor: default;
-        }
         &:hover:not([class*="o-disabled"]) {
           .o-icon {
             opacity: 0.9;
@@ -40386,7 +41293,7 @@
                   sequence: i,
                   isReadonlyAllowed: true,
                   textColor: sheet.isVisible ? undefined : "grey",
-                  action: (env) => {
+                  execute: (env) => {
                       env.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom: from, sheetIdTo: sheetId });
                   },
               });
@@ -40643,7 +41550,7 @@
       getClickableAction(position) {
           for (const items of clickableCellRegistry.getAll().sort((a, b) => a.sequence - b.sequence)) {
               if (items.condition(position, this.env)) {
-                  return items.action;
+                  return items.execute;
               }
           }
           return false;
@@ -40871,21 +41778,66 @@
       onCloseSidePanel: Function,
   };
 
-  const AddMergeInteractiveContent = {
-      MergeIsDestructive: _lt("Merging these cells will only preserve the top-leftmost value. Merge anyway?"),
-      MergeInFilter: _lt("You can't merge cells inside of an existing filter."),
-  };
-  function interactiveAddMerge(env, sheetId, target) {
-      const result = env.model.dispatch("ADD_MERGE", { sheetId, target });
-      if (result.isCancelledBecause(80 /* CommandResult.MergeInFilter */)) {
-          env.raiseError(AddMergeInteractiveContent.MergeInFilter);
+  css /* scss */ `
+  .o-menu-item-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px;
+    padding: 0px 3px;
+    border-radius: 2px;
+    min-width: 20px;
+  }
+  .o-disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;
+  class ActionButton extends owl.Component {
+      constructor() {
+          super(...arguments);
+          this.actionButton = createAction(this.props.action);
       }
-      else if (result.isCancelledBecause(3 /* CommandResult.MergeIsDestructive */)) {
-          env.askConfirmation(AddMergeInteractiveContent.MergeIsDestructive, () => {
-              env.model.dispatch("ADD_MERGE", { sheetId, target, force: true });
-          });
+      setup() {
+          owl.onWillUpdateProps(() => (this.actionButton = createAction(this.props.action)));
       }
-  }
+      get isVisible() {
+          return this.actionButton.isVisible(this.env);
+      }
+      get isEnabled() {
+          return this.actionButton.isEnabled(this.env);
+      }
+      get isActive() {
+          var _a, _b;
+          return (_b = (_a = this.actionButton).isActive) === null || _b === void 0 ? void 0 : _b.call(_a, this.env);
+      }
+      get title() {
+          const name = this.actionButton.name(this.env);
+          const description = this.actionButton.description;
+          return name + (description ? ` (${description})` : "");
+      }
+      get iconTitle() {
+          return this.actionButton.icon;
+      }
+      onClick(ev) {
+          var _a, _b, _c, _d;
+          if (this.isEnabled) {
+              (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, ev);
+              (_d = (_c = this.actionButton).execute) === null || _d === void 0 ? void 0 : _d.call(_c, this.env);
+          }
+      }
+      get buttonStyle() {
+          if (this.props.selectedColor) {
+              return cssPropertiesToCss({
+                  "border-bottom": `4px solid ${this.props.selectedColor}`,
+                  height: "16px",
+                  "margin-top": "2px",
+              });
+          }
+          return "";
+      }
+  }
+  ActionButton.template = "o-spreadsheet-ActionButton";
 
   const COMPOSER_MAX_HEIGHT = 100;
   css /* scss */ `
@@ -40947,6 +41899,14 @@
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;
     }
+
+    .o-text-options > div {
+      line-height: 26px;
+      padding: 3px 12px;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
   }
 `;
   class FontSizeEditor extends owl.Component {
@@ -41015,41 +41975,6 @@
       dropdownStyle: String,
   };
 
-  const FORMATS = [
-      { name: "automatic", text: NumberFormatTerms.Automatic },
-      { name: "number", text: NumberFormatTerms.Number, description: "1,000.12", value: "#,##0.00" },
-      { name: "percent", text: NumberFormatTerms.Percent, description: "10.12%", value: "0.00%" },
-      {
-          name: "currency",
-          text: NumberFormatTerms.Currency,
-          description: "$1,000.12",
-          value: "[$$]#,##0.00",
-      },
-      {
-          name: "currency_rounded",
-          text: NumberFormatTerms.CurrencyRounded,
-          description: "$1,000",
-          value: "[$$]#,##0",
-      },
-      { name: "date", text: NumberFormatTerms.Date, description: "9/26/2008", value: "m/d/yyyy" },
-      { name: "time", text: NumberFormatTerms.Time, description: "10:43:00 PM", value: "hh:mm:ss a" },
-      {
-          name: "datetime",
-          text: NumberFormatTerms.DateTime,
-          description: "9/26/2008 22:43:00",
-          value: "m/d/yyyy hh:mm:ss",
-      },
-      {
-          name: "duration",
-          text: NumberFormatTerms.Duration,
-          description: "27:51:38",
-          value: "hhhh:mm:ss",
-      },
-  ];
-  const CUSTOM_FORMATS = [
-      { name: "custom_currency", text: NumberFormatTerms.CustomCurrency, sidePanel: "CustomCurrency" },
-  ];
-  const ICONS_COLOR = "#4A4F59";
   // If we ever change these colors, make sure the filter tool stays green to match the icon in the grid
   const ACTIVE_BG_COLOR = BACKGROUND_HEADER_FILTER_COLOR;
   const ACTIVE_FONT_COLOR = FILTERS_COLOR;
@@ -41114,23 +42039,10 @@
 
       /* Toolbar */
       .o-toolbar-tools {
-        .o-tool {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin: 2px;
-          padding: 0px 3px;
-          border-radius: 2px;
-          min-width: 20px;
-        }
-
-        .o-filter-tool {
-          margin-right: 8px;
-        }
-
-        .o-border-dropdown {
-          padding: 4px;
-        }
+        display: flex;
+        flex-shrink: 0;
+        margin: 0px 6px 0px 16px;
+        cursor: default;
 
         .o-divider {
           display: inline-block;
@@ -41139,69 +42051,33 @@
           margin: 0 6px;
         }
 
-        .o-disabled {
-          opacity: 0.6;
-          cursor: default;
-        }
-
         .o-dropdown {
           position: relative;
           display: flex;
           align-items: center;
 
-          .o-dropdown-button {
+          > span {
             height: 30px;
           }
 
-          .o-text-options > div {
-            line-height: 26px;
-            padding: 3px 12px;
-            &:hover {
-              background-color: rgba(0, 0, 0, 0.08);
-            }
-          }
-
           .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;
-              margin: 1px;
 
-              .o-line-item {
+              > span {
                 padding: 4px;
-                width: 18px;
-                height: 18px;
               }
             }
-
-            &.o-format-tool {
-              padding: 5px 0;
-              width: 250px;
-              font-size: 12px;
-              > div {
-                padding: 0 20px;
-                white-space: nowrap;
-
-                &.o-dropdown-active:before {
-                  content: "✓";
-                  font-weight: bold;
-                  position: absolute;
-                  left: 5px;
-                }
-              }
-            }
-
-            .o-dropdown-align-item {
-              padding: 7px 10px;
-            }
           }
         }
       }
@@ -41211,24 +42087,20 @@
   class TopBar extends owl.Component {
       constructor() {
           super(...arguments);
-          this.commonFormats = FORMATS;
-          this.customFormats = CUSTOM_FORMATS;
-          this.currentFormatName = "automatic";
-          this.style = {};
           this.state = owl.useState({
               menuState: { isOpen: false, position: null, menuItems: [] },
               activeTool: "",
+              fillColor: "#ffffff",
+              textColor: "#000000",
           });
           this.isSelectingMenu = false;
           this.openedEl = null;
-          this.inMerge = false;
-          this.cannotMerge = false;
-          this.undoTool = false;
-          this.redoTool = false;
-          this.paintFormatTool = false;
-          this.fillColor = "#ffffff";
-          this.textColor = "#000000";
           this.menus = [];
+          this.EDIT = ACTION_EDIT;
+          this.FORMAT = ACTION_FORMAT;
+          this.VIEW = ACTION_VIEW;
+          this.formatNumberMenuItemSpec = formatNumberMenuItemSpec;
+          this.isntToolbarMenu = false;
       }
       get dropdownStyle() {
           return `max-height:${this.props.dropdownMaxHeight}px`;
@@ -41258,28 +42130,8 @@
           this.props.onClick();
           this.closeMenus();
       }
-      toggleStyle(style) {
-          setStyle(this.env, { [style]: !this.style[style] });
-      }
-      toggleFormat(formatName) {
-          const formatter = FORMATS.find((f) => f.name === formatName);
-          const value = (formatter && formatter.value) || "";
-          setFormatter(this.env, value);
-      }
-      toggleHorizontalAlign(align) {
-          setStyle(this.env, { align });
-          this.onClick();
-      }
-      toggleVerticalAlign(verticalAlign) {
-          setStyle(this.env, { verticalAlign });
-          this.onClick();
-      }
-      toggleTextWrapping(wrapping) {
-          setStyle(this.env, { wrapping });
-          this.onClick();
-      }
       onMenuMouseOver(menu, ev) {
-          if (this.isSelectingMenu) {
+          if (this.isSelectingMenu && this.isntToolbarMenu) {
               this.openMenu(menu, ev);
           }
       }
@@ -41290,15 +42142,27 @@
           this.openedEl = isOpen ? null : ev.target;
       }
       toggleContextMenu(menu, ev) {
-          if (this.state.menuState.isOpen) {
+          if (this.state.menuState.isOpen && this.isntToolbarMenu) {
+              this.closeMenus();
+          }
+          else {
+              this.openMenu(menu, ev);
+              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) {
-          const { left, top, height } = ev.target.getBoundingClientRect();
+          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.children(this.env);
@@ -41315,134 +42179,28 @@
           this.openedEl = null;
       }
       updateCellState() {
-          const zones = this.env.model.getters.getSelectedZones();
-          const { col, row, sheetId } = this.env.model.getters.getActivePosition();
-          this.inMerge = false;
-          const { top, left, right, bottom } = this.env.model.getters.getSelectedZone();
-          const { xSplit, ySplit } = this.env.model.getters.getPaneDivisions(sheetId);
-          this.cannotMerge =
-              zones.length > 1 ||
-                  (top === bottom && left === right) ||
-                  (left < xSplit && xSplit <= right) ||
-                  (top < ySplit && ySplit <= bottom);
-          if (!this.cannotMerge) {
-              const zone = this.env.model.getters.expandZone(sheetId, positionToZone({ col, row }));
-              this.inMerge = isEqual(zones[0], zone);
-          }
-          this.undoTool = this.env.model.getters.canUndo();
-          this.redoTool = this.env.model.getters.canRedo();
-          this.paintFormatTool = this.env.model.getters.isPaintingFormat();
-          const cell = this.env.model.getters.getActiveCell();
-          if (cell.format) {
-              const currentFormat = this.commonFormats.find((f) => f.value === cell.format);
-              this.currentFormatName = currentFormat ? currentFormat.name : "";
-          }
-          else {
-              this.currentFormatName = "automatic";
-          }
-          this.style = { ...this.env.model.getters.getCurrentStyle() };
-          this.style.align = this.style.align || cell.defaultAlign;
-          this.fillColor = this.style.fillColor || "#ffffff";
-          this.textColor = this.style.textColor || "#000000";
+          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) {
           return menu.name(this.env);
       }
-      toggleMerge() {
-          if (this.cannotMerge) {
-              return;
-          }
-          const zones = this.env.model.getters.getSelectedZones();
-          const target = [zones[zones.length - 1]];
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          if (this.inMerge) {
-              this.env.model.dispatch("REMOVE_MERGE", { sheetId, target });
-          }
-          else {
-              interactiveAddMerge(this.env, sheetId, target);
-          }
-      }
       setColor(target, color) {
           setStyle(this.env, { [target]: color });
           this.onClick();
       }
-      setBorder(command) {
-          this.env.model.dispatch("SET_FORMATTING", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              target: this.env.model.getters.getSelectedZones(),
-              border: command,
-          });
-          this.onClick();
-      }
-      setFormat(format, custom) {
-          if (!custom) {
-              this.toggleFormat(format);
-          }
-          else {
-              this.openCustomFormatSidePanel(format);
-          }
-          this.onClick();
-      }
-      openCustomFormatSidePanel(custom) {
-          const customFormatter = CUSTOM_FORMATS.find((c) => c.name === custom);
-          const sidePanel = (customFormatter && customFormatter.sidePanel) || "";
-          this.env.openSidePanel(sidePanel);
-      }
-      setDecimal(step) {
-          this.env.model.dispatch("SET_DECIMAL", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              target: this.env.model.getters.getSelectedZones(),
-              step: step,
-          });
-      }
-      paintFormat() {
-          this.env.model.dispatch("ACTIVATE_PAINT_FORMAT", {
-              target: this.env.model.getters.getSelectedZones(),
-          });
-      }
-      clearFormatting() {
-          this.env.model.dispatch("CLEAR_FORMATTING", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              target: this.env.model.getters.getSelectedZones(),
-          });
-      }
-      doAction(action) {
-          action(this.env);
-          this.closeMenus();
-      }
-      undo() {
-          this.env.model.dispatch("REQUEST_UNDO");
-      }
-      redo() {
-          this.env.model.dispatch("REQUEST_REDO");
-      }
-      get selectionContainsFilter() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const selectedZones = this.env.model.getters.getSelectedZones();
-          return this.env.model.getters.doesZonesContainFilter(sheetId, selectedZones);
-      }
-      get cannotCreateFilter() {
-          return !areZonesContinuous(...this.env.model.getters.getSelectedZones());
-      }
-      createFilter() {
-          if (this.cannotCreateFilter) {
-              return;
-          }
-          this.env.model.selection.selectTableAroundSelection();
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const selection = this.env.model.getters.getSelectedZones();
-          interactiveAddFilter(this.env, sheetId, selection);
-      }
-      removeFilter() {
-          this.env.model.dispatch("REMOVE_FILTER_TABLE", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              target: this.env.model.getters.getSelectedZones(),
-          });
-      }
   }
   TopBar.template = "o-spreadsheet-TopBar";
-  TopBar.components = { ColorPickerWidget, Menu, TopBarComposer, FontSizeEditor };
+  TopBar.components = {
+      ColorPickerWidget,
+      ColorPicker,
+      Menu,
+      TopBarComposer,
+      FontSizeEditor,
+      ActionButton,
+  };
   TopBar.props = {
       onClick: Function,
       focusComposer: String,
@@ -41518,10 +42276,12 @@
     button {
       color: #333;
     }
-
-    * {
-      font-family: "Roboto", "RobotoDraft", Helvetica, Arial, sans-serif;
+    .o-disabled {
+      opacity: 0.4;
+      pointer: default;
+      pointer-events: none;
     }
+
     &,
     *,
     *:before,
@@ -41550,6 +42310,10 @@
     height: ${CF_ICON_EDGE_LENGTH}px;
     vertical-align: sub;
   }
+
+  .o-text-icon {
+    vertical-align: middle;
+  }
 `;
   // -----------------------------------------------------------------------------
   // GRID STYLE
@@ -44890,6 +45654,13 @@
            * Internal status of the model. Important for command handling coordination
            */
           this.status = 0 /* Status.Ready */;
+          /**
+           * Check if a command can be dispatched, and returns a DispatchResult object with the possible
+           * reasons the dispatch failed.
+           */
+          this.canDispatch = (type, payload) => {
+              return this.checkDispatchAllowed({ ...payload, type });
+          };
           /**
            * The dispatch method is the only entry point to manipulate data in the model.
            * This is through this method that commands are dispatched most of the time
@@ -45033,7 +45804,10 @@
           owl.markRaw(this);
       }
       get handlers() {
-          return [this.range, ...this.corePlugins, ...this.allUIPlugins, this.history];
+          return [...this.coreHandlers, ...this.allUIPlugins, this.history];
+      }
+      get coreHandlers() {
+          return [this.range, ...this.corePlugins];
       }
       get allUIPlugins() {
           return [...this.statefulUIPlugins, ...this.coreViewsPlugins, ...this.featurePlugins];
@@ -45161,6 +45935,16 @@
        * Check if the given command is allowed by all the plugins and the history.
        */
       checkDispatchAllowed(command) {
+          if (isCoreCommand(command)) {
+              return this.checkDispatchAllowedCoreCommand(command);
+          }
+          return this.checkDispatchAllowedLocalCommand(command);
+      }
+      checkDispatchAllowedCoreCommand(command) {
+          const results = this.coreHandlers.map((handler) => handler.allowDispatch(command));
+          return new DispatchResult(results.flat());
+      }
+      checkDispatchAllowedLocalCommand(command) {
           const results = this.handlers.map((handler) => handler.allowDispatch(command));
           return new DispatchResult(results.flat());
       }
@@ -45301,6 +46085,7 @@
       inverseCommandRegistry,
       urlRegistry,
       cellPopoverRegistry,
+      numberFormatMenuRegistry,
   };
   const helpers = {
       arg,
@@ -45385,15 +46170,16 @@
   exports.parse = parse;
   exports.readonlyAllowedCommands = readonlyAllowedCommands;
   exports.registries = registries;
+  exports.setDefaultSheetViewSize = setDefaultSheetViewSize;
   exports.setTranslationMethod = setTranslationMethod;
   exports.tokenize = tokenize;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __info__.version = '16.3.0-alpha.2';
-  __info__.date = '2023-03-23T11:36:58.645Z';
-  __info__.hash = '59f25bb';
+  __info__.version = '16.3.0-alpha.4';
+  __info__.date = '2023-04-14T12:49:16.671Z';
+  __info__.hash = '6824b8a';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);