@odoo/o-spreadsheet 17.1.0-alpha.5 → 17.1.0-alpha.7

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.1.0-alpha.5
- * @date 2023-12-05T09:51:40.034Z
- * @hash c2823eb
+ * @version 17.1.0-alpha.7
+ * @date 2024-01-12T13:45:00.505Z
+ * @hash cbce1ed
  */
 
 (function (exports, owl) {
@@ -329,13 +329,6 @@
   //------------------------------------------------------------------------------
   // Miscellaneous
   //------------------------------------------------------------------------------
-  /**
-   * Stringify an object, like JSON.stringify, except that the first level of keys
-   * is ordered.
-   */
-  function stringify(obj) {
-      return JSON.stringify(obj, Object.keys(obj).sort());
-  }
   /**
    * Remove quotes from a quoted string
    * ```js
@@ -558,7 +551,7 @@
    */
   function getItemId(item, itemsDic) {
       for (let [key, value] of Object.entries(itemsDic)) {
-          if (stringify(value) === stringify(item)) {
+          if (deepEquals(value, item)) {
               return parseInt(key, 10);
           }
       }
@@ -1208,16 +1201,84 @@
   // -----------------------------------------------------------------------------
   // Date Type
   // -----------------------------------------------------------------------------
+  /**
+   * A DateTime object that can be used to manipulate spreadsheet dates.
+   * Conceptually, a spreadsheet date is simply a number with a date format,
+   * and it is timezone-agnostic.
+   * This DateTime object consistently uses UTC time to represent a naive date and time.
+   */
+  class DateTime {
+      jsDate;
+      constructor(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+          this.jsDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds, 0));
+      }
+      static fromTimestamp(timestamp) {
+          const date = new Date(timestamp);
+          return new DateTime(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+      }
+      static now() {
+          const now = new Date();
+          return new DateTime(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+      }
+      toString() {
+          return this.jsDate.toString();
+      }
+      toLocaleDateString() {
+          return this.jsDate.toLocaleDateString();
+      }
+      getTime() {
+          return this.jsDate.getTime();
+      }
+      getFullYear() {
+          return this.jsDate.getUTCFullYear();
+      }
+      getMonth() {
+          return this.jsDate.getUTCMonth();
+      }
+      getDate() {
+          return this.jsDate.getUTCDate();
+      }
+      getDay() {
+          return this.jsDate.getUTCDay();
+      }
+      getHours() {
+          return this.jsDate.getUTCHours();
+      }
+      getMinutes() {
+          return this.jsDate.getUTCMinutes();
+      }
+      getSeconds() {
+          return this.jsDate.getUTCSeconds();
+      }
+      setFullYear(year) {
+          return this.jsDate.setUTCFullYear(year);
+      }
+      setMonth(month) {
+          return this.jsDate.setUTCMonth(month);
+      }
+      setDate(date) {
+          return this.jsDate.setUTCDate(date);
+      }
+      setHours(hours) {
+          return this.jsDate.setUTCHours(hours);
+      }
+      setMinutes(minutes) {
+          return this.jsDate.setUTCMinutes(minutes);
+      }
+      setSeconds(seconds) {
+          return this.jsDate.setUTCSeconds(seconds);
+      }
+  }
   // -----------------------------------------------------------------------------
   // Parsing
   // -----------------------------------------------------------------------------
-  const INITIAL_1900_DAY = new Date(1899, 11, 30);
+  const INITIAL_1900_DAY = new DateTime(1899, 11, 30);
   const MS_PER_DAY = 24 * 60 * 60 * 1000;
   const CURRENT_MILLENIAL = 2000; // note: don't forget to update this in 2999
-  const CURRENT_YEAR = new Date().getFullYear();
-  const CURRENT_MONTH = new Date().getMonth();
-  const INITIAL_JS_DAY = new Date(0);
-  const DATE_JS_1900_OFFSET = INITIAL_JS_DAY - INITIAL_1900_DAY;
+  const CURRENT_YEAR = DateTime.now().getFullYear();
+  const CURRENT_MONTH = DateTime.now().getMonth();
+  const INITIAL_JS_DAY = DateTime.fromTimestamp(0);
+  const DATE_JS_1900_OFFSET = INITIAL_JS_DAY.getTime() - INITIAL_1900_DAY.getTime();
   const mdyDateRegexp = /^\d{1,2}(\/|-|\s)\d{1,2}((\/|-|\s)\d{1,4})?$/;
   const ymdDateRegexp = /^\d{3,4}(\/|-|\s)\d{1,2}(\/|-|\s)\d{1,2}$/;
   const dateSeparatorsRegex = /\/|-|\s/;
@@ -1278,7 +1339,7 @@
           return {
               value: date.value + time.value,
               format: date.format + " " + (time.format === "hhhh:mm:ss" ? "hh:mm:ss" : time.format),
-              jsDate: new Date(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
+              jsDate: new DateTime(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
           };
       }
       return date || time;
@@ -1354,12 +1415,12 @@
       // month + 1: months are 0-indexed in JS
       const leadingZero = (monthStr?.length === 2 && month + 1 < 10) || (dayStr?.length === 2 && day < 10);
       const fullYear = yearStr?.length !== 2;
-      const jsDate = new Date(year, month, day);
+      const jsDate = new DateTime(year, month, day);
       if (jsDate.getMonth() !== month || jsDate.getDate() !== day) {
           // invalid date
           return null;
       }
-      const delta = jsDate - INITIAL_1900_DAY;
+      const delta = jsDate.getTime() - INITIAL_1900_DAY.getTime();
       const format = getFormatFromDateParts(parts, separator, leadingZero, fullYear);
       return {
           value: Math.round(delta / MS_PER_DAY),
@@ -1450,7 +1511,7 @@
           if (hours >= 24) {
               format = "hhhh:mm:ss";
           }
-          const jsDate = new Date(1899, 11, 30, hours, minutes, seconds);
+          const jsDate = new DateTime(1899, 11, 30, hours, minutes, seconds);
           return {
               value: hours / 24 + minutes / 1440 + seconds / 86400,
               format: format,
@@ -1464,7 +1525,7 @@
   // -----------------------------------------------------------------------------
   function numberToJsDate(value) {
       const truncValue = Math.trunc(value);
-      let date = new Date(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
+      let date = DateTime.fromTimestamp(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
       let time = value - truncValue;
       time = time < 0 ? 1 + time : time;
       const hours = Math.round(time * 24);
@@ -1484,7 +1545,7 @@
   }
   /** Return the number of days in the current month of the given date */
   function getDaysInMonth(date) {
-      return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+      return new DateTime(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   }
   function isLastDayOfMonth(date) {
       return getDaysInMonth(date) === date.getDate();
@@ -1502,7 +1563,7 @@
       const yStart = date.getFullYear();
       const mStart = date.getMonth();
       const dStart = date.getDate();
-      const jsDate = new Date(yStart, mStart + months);
+      const jsDate = new DateTime(yStart, mStart + months, 1);
       if (keepEndOfMonth && dStart === getDaysInMonth(date)) {
           jsDate.setDate(getDaysInMonth(jsDate));
       }
@@ -2061,6 +2122,8 @@
       CommandResult["NoChanges"] = "NoChanges";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
+  const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
+
   const DEFAULT_LOCALES = [
       {
           name: "English (US)",
@@ -2725,20 +2788,20 @@
   }
 
   function toCriterionDateNumber(dateValue) {
-      const today = new Date();
+      const today = DateTime.now();
       switch (dateValue) {
           case "today":
               return jsDateToNumber(today);
           case "yesterday":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 1)));
           case "tomorrow":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() + 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() + 1)));
           case "lastWeek":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() - 7)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 7)));
           case "lastMonth":
-              return jsDateToNumber(new Date(today.setMonth(today.getMonth() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setMonth(today.getMonth() - 1)));
           case "lastYear":
-              return jsDateToNumber(new Date(today.setFullYear(today.getFullYear() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setFullYear(today.getFullYear() - 1)));
       }
   }
   /** Get all the dates values of a criterion converted to numbers, converting date values such as "today" to actual dates  */
@@ -2824,6 +2887,9 @@
    * Formats a cell value with its format.
    */
   function formatValue(value, { format, locale }) {
+      if (format === PLAIN_TEXT_FORMAT) {
+          return toString(value) || "";
+      }
       switch (typeof value) {
           case "string":
               return value;
@@ -3096,7 +3162,7 @@
           .map((p) => {
           switch (p) {
               case "hhhh":
-                  const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY) / (60 * 60 * 1000));
+                  const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY.getTime()) / (60 * 60 * 1000));
                   return helapsedHours.toString();
               case "hh":
                   return hours.toString().padStart(2, "0");
@@ -4664,6 +4730,9 @@
 
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
+      static props = {
+          figure: Object,
+      };
       canvas = owl.useRef("graphContainer");
       chart;
       get background() {
@@ -4716,9 +4785,6 @@
           this.chart.update("active");
       }
   }
-  ChartJsComponent.props = {
-      figure: Object,
-  };
 
   /**
    * AbstractChart is the class from which every Chart should inherit.
@@ -5295,7 +5361,7 @@
           };
           baselineCell = getters.getEvaluatedCell(baselinePosition);
       }
-      const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
+      const { background, fontColor } = getters.getStyleOfSingleCellChart(chart.background, chart.keyValue);
       const locale = getters.getLocale();
       return {
           title: _t(chart.title),
@@ -5304,7 +5370,7 @@
           baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
           baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
           baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
-          fontColor: chartFontColor(background),
+          fontColor,
           background,
           baselineStyle: chart.baselineMode !== "percentage" && baseline
               ? getters.getCellStyle({
@@ -5569,6 +5635,9 @@
 
   class ScorecardChart extends owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
+      static props = {
+          figure: Object,
+      };
       canvas = owl.useRef("chartContainer");
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figure.id);
@@ -5586,9 +5655,6 @@
           drawScoreChart(config, canvas);
       }
   }
-  ScorecardChart.props = {
-      figure: Object,
-  };
 
   /**
    * Registry
@@ -5730,6 +5796,9 @@
   }
 
   function evaluateLiteral(content, localeFormat) {
+      if (localeFormat.format === PLAIN_TEXT_FORMAT) {
+          return textCell(content || "", localeFormat);
+      }
       return createEvaluatedCell(parseLiteral(content || "", localeFormat.locale), localeFormat);
   }
   function parseLiteral(content, locale) {
@@ -5764,6 +5833,9 @@
   }
   function _createEvaluatedCell(value, localeFormat) {
       try {
+          if (localeFormat.format === PLAIN_TEXT_FORMAT) {
+              return textCell(toString(value), localeFormat);
+          }
           for (const builder of builders) {
               const evaluateCell = builder(value, localeFormat);
               if (evaluateCell) {
@@ -6261,11 +6333,11 @@
   class ErrorToolTip extends owl.Component {
       static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
       static template = "o-spreadsheet-ErrorToolTip";
+      static props = {
+          errors: Array,
+          onClosed: { type: Function, optional: true },
+      };
   }
-  ErrorToolTip.props = {
-      errors: Array,
-      onClosed: { type: Function, optional: true },
-  };
   const ErrorToolTipPopoverBuilder = {
       onHover: (position, getters) => {
           const cell = getters.getEvaluatedCell(position);
@@ -6307,6 +6379,14 @@
 `;
   class FilterMenuValueItem extends owl.Component {
       static template = "o-spreadsheet-FilterMenuValueItem";
+      static props = {
+          value: String,
+          isChecked: Boolean,
+          isSelected: Boolean,
+          onMouseMove: Function,
+          onClick: Function,
+          scrolledTo: { type: String, optional: true },
+      };
       itemRef = owl.useRef("menuValueItem");
       setup() {
           owl.onWillPatch(() => {
@@ -6324,17 +6404,9 @@
           });
       }
   }
-  FilterMenuValueItem.props = {
-      value: String,
-      isChecked: Boolean,
-      isSelected: Boolean,
-      onMouseMove: Function,
-      onClick: Function,
-      scrolledTo: { type: String, optional: true },
-  };
 
   const FILTER_MENU_HEIGHT = 295;
-  const CSS$2 = css /* scss */ `
+  const CSS = css /* scss */ `
   .o-filter-menu {
     box-sizing: border-box;
     padding: 8px 16px;
@@ -6430,9 +6502,12 @@
   }
 `;
   class FilterMenu extends owl.Component {
-      static size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
       static template = "o-spreadsheet-FilterMenu";
-      static style = CSS$2;
+      static props = {
+          filterPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
+      static style = CSS;
       static components = { FilterMenuValueItem };
       state = owl.useState({
           values: [],
@@ -6584,10 +6659,6 @@
           this.props.onClosed?.();
       }
   }
-  FilterMenu.props = {
-      filterPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
   const FilterMenuPopoverBuilder = {
       onOpen: (position, getters) => {
           return {
@@ -6599,6 +6670,7 @@
       },
   };
 
+  const macRegex = /Mac/i;
   /**
    * Return true if the event was triggered from
    * a child element.
@@ -6650,7 +6722,7 @@
    */
   function keyboardEventToShortcutString(ev, mode = "key") {
       let keyDownString = "";
-      if (ev.ctrlKey && ev.key !== "Ctrl")
+      if (isCtrlKey(ev) && ev.key !== "Ctrl")
           keyDownString += "Ctrl+";
       if (ev.metaKey)
           keyDownString += "Ctrl+";
@@ -6663,7 +6735,15 @@
       return keyDownString;
   }
   function isMacOS() {
-      return navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+      return Boolean(macRegex.test(navigator.userAgent));
+  }
+  /**
+   * @param {KeyboardEvent | MouseEvent} ev
+   * @returns Returns true if the event was triggered with the "ctrl" modifier pressed.
+   * On Mac, this is the "meta" or "command" key.
+   */
+  function isCtrlKey(ev) {
+      return isMacOS() ? ev.metaKey : ev.ctrlKey;
   }
 
   /**
@@ -6780,6 +6860,19 @@
 `;
   class Popover extends owl.Component {
       static template = "o-spreadsheet-Popover";
+      static props = {
+          anchorRect: Object,
+          containerRect: { type: Object, optional: true },
+          positioning: { type: String, optional: true },
+          maxWidth: { type: Number, optional: true },
+          maxHeight: { type: Number, optional: true },
+          verticalOffset: { type: Number, optional: true },
+          onMouseWheel: { type: Function, optional: true },
+          onPopoverHidden: { type: Function, optional: true },
+          onPopoverMoved: { type: Function, optional: true },
+          zIndex: { type: Number, optional: true },
+          slots: Object,
+      };
       static defaultProps = {
           positioning: "BottomLeft",
           verticalOffset: 0,
@@ -6836,19 +6929,6 @@
           });
       }
   }
-  Popover.props = {
-      anchorRect: Object,
-      containerRect: { type: Object, optional: true },
-      positioning: { type: String, optional: true },
-      maxWidth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      verticalOffset: { type: Number, optional: true },
-      onMouseWheel: { type: Function, optional: true },
-      onPopoverHidden: { type: Function, optional: true },
-      onPopoverMoved: { type: Function, optional: true },
-      zIndex: { type: Number, optional: true },
-      slots: Object,
-  };
   class PopoverPositionContext {
       anchorRect;
       containerRect;
@@ -7030,6 +7110,15 @@
 `;
   class Menu extends owl.Component {
       static template = "o-spreadsheet-Menu";
+      static props = {
+          position: Object,
+          menuItems: Array,
+          depth: { type: Number, optional: true },
+          maxHeight: { type: Number, optional: true },
+          onClose: Function,
+          onMenuClicked: { type: Function, optional: true },
+          menuId: { type: String, optional: true },
+      };
       static components = { Menu, Popover };
       static defaultProps = {
           depth: 1,
@@ -7186,15 +7275,6 @@
           }
       }
   }
-  Menu.props = {
-      position: Object,
-      menuItems: Array,
-      depth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      onClose: Function,
-      onMenuClicked: { type: Function, optional: true },
-      menuId: { type: String, optional: true },
-  };
 
   const LINK_TOOLTIP_HEIGHT = 32;
   const LINK_TOOLTIP_WIDTH = 220;
@@ -7247,8 +7327,12 @@
   }
 `;
   class LinkDisplay extends owl.Component {
-      static components = { Menu };
       static template = "o-spreadsheet-LinkDisplay";
+      static props = {
+          cellPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
+      static components = { Menu };
       get cell() {
           const { col, row } = this.props.cellPosition;
           const sheetId = this.env.model.getters.getActiveSheetId();
@@ -7303,10 +7387,6 @@
           };
       },
   };
-  LinkDisplay.props = {
-      cellPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
 
   /**
    * Tokenizer
@@ -7940,6 +8020,10 @@
 `;
   class LinkEditor extends owl.Component {
       static template = "o-spreadsheet-LinkEditor";
+      static props = {
+          cellPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
       static components = { Menu };
       menuItems = linkMenuRegistry.getMenuItems();
       link = owl.useState(this.defaultState);
@@ -8037,10 +8121,6 @@
           };
       },
   };
-  LinkEditor.props = {
-      cellPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
 
   const cellPopoverRegistry = new Registry();
   cellPopoverRegistry
@@ -8323,6 +8403,7 @@
               labels: labels.map(truncateLabel),
               datasets: [],
           },
+          platform: undefined,
           plugins: [],
       };
   }
@@ -8902,7 +8983,7 @@
       });
       return {
           chartJsConfig: config,
-          background: getters.getBackgroundOfSingleCellChart(chart.background, dataRange),
+          background: getters.getStyleOfSingleCellChart(chart.background, dataRange).background,
       };
   }
 
@@ -8983,7 +9064,7 @@
       else if (format.includes("h") || format.includes("H")) {
           return "hour";
       }
-      else if (format.includes("D")) {
+      else if (format.includes("d")) {
           return "day";
       }
       else if (format.includes("M")) {
@@ -9495,6 +9576,27 @@
       const percentage = (dataset[dataIndex] / total) * 100;
       return percentage.toFixed(2);
   }
+  function filterNegativeValues(labels, datasets) {
+      const dataPointsIndexes = labels.reduce((indexes, label, i) => {
+          const shouldKeep = datasets.some((dataset) => {
+              const dataPoint = dataset.data[i];
+              return typeof dataPoint !== "number" || dataPoint >= 0;
+          });
+          if (shouldKeep) {
+              indexes.push(i);
+          }
+          return indexes;
+      }, []);
+      const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
+      const filteredDatasets = datasets.map((dataset) => ({
+          ...dataset,
+          data: dataPointsIndexes.map((i) => {
+              const dataPoint = dataset.data[i];
+              return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
+          }),
+      }));
+      return { labels: filteredLabels, dataSetsValues: filteredDatasets };
+  }
   function createPieChartRuntime(chart, getters) {
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
@@ -9508,6 +9610,7 @@
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
       }
+      ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
       const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
       const locale = getters.getLocale();
       const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale });
@@ -9605,6 +9708,10 @@
 `;
   class ChartFigure extends owl.Component {
       static template = "o-spreadsheet-ChartFigure";
+      static props = {
+          figure: Object,
+          onFigureDeleted: Function,
+      };
       static components = {};
       onDoubleClick() {
           this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
@@ -9622,13 +9729,13 @@
           return component;
       }
   }
-  ChartFigure.props = {
-      figure: Object,
-      onFigureDeleted: Function,
-  };
 
   class ImageFigure extends owl.Component {
       static template = "o-spreadsheet-ImageFigure";
+      static props = {
+          figure: Object,
+          onFigureDeleted: Function,
+      };
       static components = {};
       // ---------------------------------------------------------------------------
       // Getters
@@ -9640,10 +9747,6 @@
           return this.env.model.getters.getImagePath(this.figureId);
       }
   }
-  ImageFigure.props = {
-      figure: Object,
-      onFigureDeleted: Function,
-  };
 
   function centerFigurePosition(getters, size) {
       const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
@@ -10345,7 +10448,7 @@
   // Simple actions
   //------------------------------------------------------------------------------
   const PASTE_ACTION = async (env) => paste$1(env);
-  const PASTE_VALUE_ACTION = async (env) => paste$1(env, "onlyValue");
+  const PASTE_AS_VALUE_ACTION = async (env) => paste$1(env, "asValue");
   async function paste$1(env, pasteOption) {
       const spreadsheetClipboard = env.model.getters.getClipboardTextContent();
       const osClipboard = await env.clipboard.readText();
@@ -10358,7 +10461,7 @@
               else {
                   interactivePaste(env, target, pasteOption);
               }
-              if (env.model.getters.isCutOperation() && pasteOption !== "onlyValue") {
+              if (env.model.getters.isCutOperation() && pasteOption !== "asValue") {
                   await env.clipboard.write({ [ClipboardMIMEType.PlainText]: "" });
               }
               break;
@@ -10773,9 +10876,9 @@
       icon: "o-spreadsheet-Icon.PASTE",
   };
   const pasteSpecialValue = {
-      name: _t("Paste value only"),
+      name: _t("Paste as value"),
       description: "Ctrl+Shift+V",
-      execute: PASTE_VALUE_ACTION,
+      execute: PASTE_AS_VALUE_ACTION,
   };
   const pasteSpecialFormat = {
       name: _t("Paste format only"),
@@ -10931,6 +11034,9 @@
   function makeArg(str, description) {
       let parts = str.match(ARG_REGEXP);
       let name = parts[1].trim();
+      if (!name) {
+          throw new Error(`Function argument definition is missing a name: '${str}'.`);
+      }
       let types = [];
       let isOptional = false;
       let isRepeating = false;
@@ -14653,7 +14759,7 @@
           if (_year < 1900) {
               _year += 1900;
           }
-          const jsDate = new Date(_year, _month - 1, _day);
+          const jsDate = new DateTime(_year, _month - 1, _day);
           const result = jsDateToRoundNumber(jsDate);
           assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
           return result;
@@ -14696,7 +14802,7 @@
                   // See: https://support.microsoft.com/en-us/office/datedif-function-25dba1a4-2812-480b-84dd-8b32a451b35c
                   let days = jsEndDate.getDate() - jsStartDate.getDate();
                   if (days < 0) {
-                      const monthBeforeEndMonth = new Date(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
+                      const monthBeforeEndMonth = new DateTime(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
                       const daysInMonthBeforeEndMonth = getDaysInMonth(monthBeforeEndMonth);
                       days = daysInMonthBeforeEndMonth - Math.abs(days);
                   }
@@ -14705,7 +14811,7 @@
                   if (areTwoDatesWithinOneYear(_startDate, _endDate)) {
                       return getTimeDifferenceInWholeDays(jsStartDate, jsEndDate);
                   }
-                  const endDateWithinOneYear = new Date(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
+                  const endDateWithinOneYear = new DateTime(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
                   let days = getTimeDifferenceInWholeDays(jsStartDate, endDateWithinOneYear);
                   if (days < 0) {
                       endDateWithinOneYear.setFullYear(jsStartDate.getFullYear() + 1);
@@ -14822,7 +14928,7 @@
           const _months = Math.trunc(toNumber(months, this.locale));
           const yStart = _startDate.getFullYear();
           const mStart = _startDate.getMonth();
-          const jsDate = new Date(yStart, mStart + _months + 1, 0);
+          const jsDate = new DateTime(yStart, mStart + _months + 1, 0);
           return jsDateToRoundNumber(jsDate);
       },
       isExported: true,
@@ -14859,17 +14965,17 @@
           // The first week of the year is the week that contains the first
           // Thursday of the year.
           let firstThursday = 1;
-          while (new Date(y, 0, firstThursday).getDay() !== 4) {
+          while (new DateTime(y, 0, firstThursday).getDay() !== 4) {
               firstThursday += 1;
           }
-          const firstDayOfFirstWeek = new Date(y, 0, firstThursday - 3);
+          const firstDayOfFirstWeek = new DateTime(y, 0, firstThursday - 3);
           // The last week of the year is the week that contains the last Thursday of
           // the year.
           let lastThursday = 31;
-          while (new Date(y, 11, lastThursday).getDay() !== 4) {
+          while (new DateTime(y, 11, lastThursday).getDay() !== 4) {
               lastThursday -= 1;
           }
-          const lastDayOfLastWeek = new Date(y, 11, lastThursday + 3);
+          const lastDayOfLastWeek = new DateTime(y, 11, lastThursday + 3);
           // B - If our date > lastDayOfLastWeek then it's in the weeks of the year after
           // If our date < firstDayOfFirstWeek then it's in the weeks of the year before
           let offsetYear;
@@ -14895,17 +15001,17 @@
               case 1:
                   // firstDay is the 1st day of the 1st week of the year after
                   // firstDay = lastDayOfLastWeek + 1 Day
-                  firstDay = new Date(y, 11, lastThursday + 3 + 1);
+                  firstDay = new DateTime(y, 11, lastThursday + 3 + 1);
                   break;
               case -1:
                   // firstDay is the 1st day of the 1st week of the previous year.
                   // The first week of the previous year is the week that contains the
                   // first Thursday of the previous year.
                   let firstThursdayPreviousYear = 1;
-                  while (new Date(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
+                  while (new DateTime(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
                       firstThursdayPreviousYear += 1;
                   }
-                  firstDay = new Date(y - 1, 0, firstThursdayPreviousYear - 3);
+                  firstDay = new DateTime(y - 1, 0, firstThursdayPreviousYear - 3);
                   break;
           }
           const diff = (_date.getTime() - firstDay.getTime()) / MS_PER_DAY;
@@ -15040,8 +15146,8 @@
               });
           }
           const invertDate = _startDate.getTime() > _endDate.getTime();
-          const stopDate = new Date((invertDate ? _startDate : _endDate).getTime());
-          let stepDate = new Date((invertDate ? _endDate : _startDate).getTime());
+          const stopDate = DateTime.fromTimestamp((invertDate ? _startDate : _endDate).getTime());
+          let stepDate = DateTime.fromTimestamp((invertDate ? _endDate : _startDate).getTime());
           const timeStopDate = stopDate.getTime();
           let timeStepDate = stepDate.getTime();
           let netWorkingDay = 0;
@@ -15067,8 +15173,7 @@
           return getDateTimeFormat(this.locale);
       },
       compute: function () {
-          let today = new Date();
-          today.setMilliseconds(0);
+          let today = DateTime.now();
           const delta = today.getTime() - INITIAL_1900_DAY.getTime();
           const time = today.getHours() / 24 + today.getMinutes() / 1440 + today.getSeconds() / 86400;
           return Math.floor(delta / MS_PER_DAY) + time;
@@ -15142,8 +15247,8 @@
           return this.locale.dateFormat;
       },
       compute: function () {
-          const today = new Date();
-          const jsDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+          const today = DateTime.now();
+          const jsDate = new DateTime(today.getFullYear(), today.getMonth(), today.getDate());
           return jsDateToRoundNumber(jsDate);
       },
       isExported: true,
@@ -15198,10 +15303,10 @@
           }
           const y = _date.getFullYear();
           let dayStart = 1;
-          let startDayOfFirstWeek = new Date(y, 0, dayStart);
+          let startDayOfFirstWeek = new DateTime(y, 0, dayStart);
           while (startDayOfFirstWeek.getDay() !== startDayOfWeek) {
               dayStart += 1;
-              startDayOfFirstWeek = new Date(y, 0, dayStart);
+              startDayOfFirstWeek = new DateTime(y, 0, dayStart);
           }
           const dif = (_date.getTime() - startDayOfFirstWeek.getTime()) / MS_PER_DAY;
           if (dif < 0) {
@@ -15259,7 +15364,7 @@
                   timesHoliday.add(holiday.getTime());
               });
           }
-          let stepDate = new Date(_startDate.getTime());
+          let stepDate = DateTime.fromTimestamp(_startDate.getTime());
           let timeStepDate = stepDate.getTime();
           const unitDay = Math.sign(_numDays);
           let stepDay = Math.abs(_numDays);
@@ -15323,7 +15428,7 @@
           const _startDate = toJsDate(date, this.locale);
           const yStart = _startDate.getFullYear();
           const mStart = _startDate.getMonth();
-          const jsDate = new Date(yStart, mStart, 1);
+          const jsDate = new DateTime(yStart, mStart, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15365,7 +15470,7 @@
       compute: function (date) {
           const quarter = QUARTER.compute.bind(this)(date);
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, (quarter - 1) * 3, 1);
+          const jsDate = new DateTime(year, (quarter - 1) * 3, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15382,7 +15487,7 @@
       compute: function (date) {
           const quarter = QUARTER.compute.bind(this)(date);
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, quarter * 3, 0);
+          const jsDate = new DateTime(year, quarter * 3, 0);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15398,7 +15503,7 @@
       },
       compute: function (date) {
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, 0, 1);
+          const jsDate = new DateTime(year, 0, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15414,7 +15519,7 @@
       },
       compute: function (date) {
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year + 1, 0, 0);
+          const jsDate = new DateTime(year + 1, 0, 0);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15462,8 +15567,8 @@
   const DELTA = {
       description: _t("Compare two numeric values, returning 1 if they're equal."),
       args: [
-          arg(" (number)", _t("The first number to compare.")),
-          arg(` (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
+          arg("number1 (number)", _t("The first number to compare.")),
+          arg(`number2 (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
       ],
       returns: ["NUMBER"],
       compute: function (number1, number2 = DEFAULT_DELTA_ARG) {
@@ -15890,7 +15995,7 @@
   function assertSettlementLessThanOneYearBeforeMaturity(settlement, maturity, locale) {
       const startDate = toJsDate(settlement, locale);
       const endDate = toJsDate(maturity, locale);
-      const startDatePlusOneYear = new Date(startDate);
+      const startDatePlusOneYear = toJsDate(settlement, locale);
       startDatePlusOneYear.setFullYear(startDate.getFullYear() + 1);
       assert(() => endDate.getTime() <= startDatePlusOneYear.getTime(), _t("The settlement date (%s) must at most one year after the maturity date (%s).", settlement.toString(), maturity.toString()));
   }
@@ -16025,7 +16130,7 @@
           arg("salvage (number)", _t("The value of the asset at the end of depreciation.")),
           arg("period (number)", _t("The single period within life for which to calculate depreciation.")),
           arg("rate (number)", _t("The deprecation rate.")),
-          arg(" (number, optional)", _t("An indicator of what day count method to use.")),
+          arg("day_count_convention (number, optional)", _t("An indicator of what day count method to use.")),
       ],
       returns: ["NUMBER"],
       compute: function (cost, purchaseDate, firstPeriodEnd, salvage, period, rate, dayCountConvention = DEFAULT_DAY_COUNT_CONVENTION) {
@@ -19197,8 +19302,8 @@
       description: _t("A segment of a string."),
       args: [
           arg("text (string)", _t("The string to extract a segment from.")),
-          arg(" (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
-          arg(" (number)", _t("The length of the segment to extract.")),
+          arg("starting_at (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
+          arg("extract_length (number)", _t("The length of the segment to extract.")),
       ],
       returns: ["STRING"],
       compute: function (text, starting_at, extract_length) {
@@ -20014,6 +20119,11 @@
       execute: (env) => setFormatter(env, ""),
       isActive: (env) => isAutomaticFormatSelected(env),
   };
+  const formatNumberPlainText = {
+      name: _t("Plain text"),
+      execute: (env) => setFormatter(env, PLAIN_TEXT_FORMAT),
+      isActive: (env) => isFormatSelected(env, PLAIN_TEXT_FORMAT),
+  };
   const formatNumberNumber = createFormatActionSpec({
       name: _t("Number"),
       descriptionValue: 1000.12,
@@ -20373,6 +20483,7 @@
     formatNumberFullWeekDayAndMonth: formatNumberFullWeekDayAndMonth,
     formatNumberNumber: formatNumberNumber,
     formatNumberPercent: formatNumberPercent,
+    formatNumberPlainText: formatNumberPlainText,
     formatNumberShortMonth: formatNumberShortMonth,
     formatNumberShortWeekDay: formatNumberShortWeekDay,
     formatNumberTime: formatNumberTime,
@@ -20803,6 +20914,10 @@
       .add("format_number_automatic", {
       ...formatNumberAutomatic,
       sequence: 10,
+  })
+      .add("format_number_plain_text", {
+      ...formatNumberPlainText,
+      sequence: 15,
       separator: true,
   })
       .add("format_number_number", {
@@ -21401,10 +21516,10 @@
   function updateSelectionWithArrowKeys(ev, selection) {
       const direction = arrowMap[ev.key];
       if (ev.shiftKey) {
-          selection.resizeAnchorZone(direction, ev.ctrlKey ? "end" : 1);
+          selection.resizeAnchorZone(direction, isCtrlKey(ev) ? "end" : 1);
       }
       else {
-          selection.moveAnchorCell(direction, ev.ctrlKey ? "end" : 1);
+          selection.moveAnchorCell(direction, isCtrlKey(ev) ? "end" : 1);
       }
   }
 
@@ -21471,6 +21586,15 @@
    */
   class SelectionInput extends owl.Component {
       static template = "o-spreadsheet-SelectionInput";
+      static props = {
+          ranges: Function,
+          hasSingleRange: { type: Boolean, optional: true },
+          required: { type: Boolean, optional: true },
+          isInvalid: { type: Boolean, optional: true },
+          class: { type: String, optional: true },
+          onSelectionChanged: { type: Function, optional: true },
+          onSelectionConfirmed: { type: Function, optional: true },
+      };
       id = uuidGenerator$1.uuidv4();
       previousRanges = this.props.ranges() || [];
       originSheet = this.env.model.getters.getActiveSheetId();
@@ -21633,15 +21757,6 @@
           this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
       }
   }
-  SelectionInput.props = {
-      ranges: Function,
-      hasSingleRange: { type: Boolean, optional: true },
-      required: { type: Boolean, optional: true },
-      isInvalid: { type: Boolean, optional: true },
-      class: { type: String, optional: true },
-      onSelectionChanged: { type: Function, optional: true },
-      onSelectionConfirmed: { type: Function, optional: true },
-  };
 
   css /* scss */ `
   .o-validation-error,
@@ -21657,6 +21772,10 @@
 `;
   class ValidationMessages extends owl.Component {
       static template = "o-spreadsheet-ValidationMessages";
+      static props = {
+          messages: Array,
+          msgType: String,
+      };
       get divClasses() {
           if (this.props.msgType === "warning") {
               return "o-validation-warning text-warning";
@@ -21664,14 +21783,96 @@
           return "o-validation-error text-danger";
       }
   }
-  ValidationMessages.props = {
-      messages: Array,
-      msgType: String,
-  };
+
+  css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+  class Checkbox extends owl.Component {
+      static template = "o-spreadsheet.Checkbox";
+      static props = {
+          label: { type: String, optional: true },
+          value: { type: Boolean, optional: true },
+          className: { type: String, optional: true },
+          name: { type: String, optional: true },
+          onChange: Function,
+      };
+      static defaultProps = { value: false };
+      onChange(ev) {
+          const value = ev.target.checked;
+          this.props.onChange(value);
+      }
+  }
+
+  class Section extends owl.Component {
+      static template = "o_spreadsheet.Section";
+      static props = {
+          class: { type: String, optional: true },
+          slots: Object,
+      };
+  }
+
+  class ChartDataSeries extends owl.Component {
+      static template = "o-spreadsheet.ChartDataSeries";
+      static components = { SelectionInput, Section };
+      static props = {
+          ranges: Function,
+          hasSingleRange: { type: Boolean, optional: true },
+          onSelectionChanged: Function,
+          onSelectionConfirmed: Function,
+      };
+      get title() {
+          return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
+      }
+  }
+
+  class ChartErrorSection extends owl.Component {
+      static template = "o-spreadsheet.ChartErrorSection";
+      static components = { Section, ValidationMessages };
+      static props = { messages: { type: Array, element: String } };
+  }
+
+  class ChartLabelRange extends owl.Component {
+      static template = "o-spreadsheet.ChartLabelRange";
+      static components = { SelectionInput, Checkbox, Section };
+      static props = {
+          title: { type: String, optional: true },
+          range: Function,
+          isInvalid: Boolean,
+          required: { type: Boolean, optional: true },
+          onSelectionChanged: Function,
+          onSelectionConfirmed: Function,
+          options: { type: Array, optional: true },
+      };
+      static defaultProps = {
+          title: _t("Categories / Labels"),
+          options: [],
+          required: false,
+      };
+  }
 
   class LineBarPieConfigPanel extends owl.Component {
       static template = "o-spreadsheet-LineBarPieConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = {
+          SelectionInput,
+          ValidationMessages,
+          ChartDataSeries,
+          ChartLabelRange,
+          Section,
+          Checkbox,
+          ChartErrorSection,
+      };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           datasetDispatchResult: undefined,
           labelsDispatchResult: undefined,
@@ -21695,9 +21896,22 @@
       get isLabelInvalid() {
           return !!this.state.labelsDispatchResult?.isCancelledBecause("InvalidLabelRange" /* CommandResult.InvalidLabelRange */);
       }
-      onUpdateDataSetsHaveTitle(ev) {
+      get dataSetsHaveTitleLabel() {
+          return _t("Use row %s as headers", this.calculateHeaderPosition() || "");
+      }
+      getLabelRangeOptions() {
+          return [
+              {
+                  name: "aggregated",
+                  label: _t("Aggregate"),
+                  value: this.props.definition.aggregated,
+                  onChange: this.onUpdateAggregated.bind(this),
+              },
+          ];
+      }
+      onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
           this.props.updateChart(this.props.figureId, {
-              dataSetsHaveTitle: ev.target.checked,
+              dataSetsHaveTitle,
           });
       }
       /**
@@ -21737,9 +21951,9 @@
       getLabelRange() {
           return this.labelRange || "";
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
       calculateHeaderPosition() {
@@ -21759,23 +21973,20 @@
           return undefined;
       }
   }
-  LineBarPieConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class BarConfigPanel extends LineBarPieConfigPanel {
       static template = "o-spreadsheet-BarConfigPanel";
-      onUpdateStacked(ev) {
+      get stackedLabel() {
+          return _t("Stacked barchart");
+      }
+      onUpdateStacked(stacked) {
           this.props.updateChart(this.props.figureId, {
-              stacked: ev.target.checked,
+              stacked,
           });
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
   }
@@ -22103,6 +22314,12 @@
 `;
   class ColorPicker extends owl.Component {
       static template = "o-spreadsheet-ColorPicker";
+      static props = {
+          onColorPicked: Function,
+          currentColor: { type: String, optional: true },
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+      };
       static defaultProps = { currentColor: "" };
       static components = { Popover };
       COLORS = COLOR_PICKER_DEFAULTS;
@@ -22238,12 +22455,6 @@
           return isSameColor(color1, color2);
       }
   }
-  ColorPicker.props = {
-      onColorPicked: Function,
-      currentColor: { type: String, optional: true },
-      maxHeight: { type: Number, optional: true },
-      anchorRect: Object,
-  };
 
   css /* scss */ `
   .o-color-picker-widget {
@@ -22281,6 +22492,17 @@
 `;
   class ColorPickerWidget extends owl.Component {
       static template = "o-spreadsheet-ColorPickerWidget";
+      static props = {
+          currentColor: { type: String, optional: true },
+          toggleColorPicker: Function,
+          showColorPicker: Boolean,
+          onColorPicked: Function,
+          icon: String,
+          title: { type: String, optional: true },
+          disabled: { type: Boolean, optional: true },
+          dropdownMaxHeight: { type: Number, optional: true },
+          class: { type: String, optional: true },
+      };
       static components = { ColorPicker };
       colorPickerButtonRef = owl.useRef("colorPickerButton");
       get iconStyle() {
@@ -22299,44 +22521,55 @@
           };
       }
   }
-  ColorPickerWidget.props = {
-      currentColor: { type: String, optional: true },
-      toggleColorPicker: Function,
-      showColorPicker: Boolean,
-      onColorPicked: Function,
-      icon: String,
-      title: { type: String, optional: true },
-      disabled: { type: Boolean, optional: true },
-      dropdownMaxHeight: { type: Number, optional: true },
-      class: { type: String, optional: true },
-  };
 
-  class LineBarPieDesignPanel extends owl.Component {
-      static template = "o-spreadsheet-LineBarPieDesignPanel";
-      static components = { ColorPickerWidget };
-      state = owl.useState({
-          title: "",
-          fillColorTool: false,
-      });
-      onClick(ev) {
-          this.state.fillColorTool = false;
-      }
+  class ChartColor extends owl.Component {
+      static template = "o-spreadsheet.ChartColor";
+      static components = { ColorPickerWidget, Section };
+      static props = {
+          currentColor: { type: String, optional: true },
+          onColorPicked: Function,
+      };
+      state;
       setup() {
-          this.state.title = _t(this.props.definition.title);
-          owl.useExternalListener(window, "click", this.onClick);
+          this.state = owl.useState({ pickerOpened: false });
+          owl.useExternalListener(window, "click", this.closePicker);
       }
-      toggleColorPicker() {
-          this.state.fillColorTool = !this.state.fillColorTool;
+      closePicker() {
+          this.state.pickerOpened = false;
+      }
+      togglePicker() {
+          this.state.pickerOpened = !this.state.pickerOpened;
+      }
+  }
+
+  class ChartTitle extends owl.Component {
+      static template = "o-spreadsheet.ChartTitle";
+      static components = { ColorPickerWidget, Section };
+      static props = { title: String, update: Function };
+      updateTitle(ev) {
+          this.props.update(ev.target.value);
+      }
+  }
+
+  class LineBarPieDesignPanel extends owl.Component {
+      static template = "o-spreadsheet-LineBarPieDesignPanel";
+      static components = { ChartColor, ColorPickerWidget, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
+      get title() {
+          return _t(this.props.definition.title);
       }
       updateBackgroundColor(color) {
           this.props.updateChart(this.props.figureId, {
               background: color,
           });
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       updateSelect(attr, ev) {
           this.props.updateChart(this.props.figureId, {
@@ -22344,12 +22577,6 @@
           });
       }
   }
-  LineBarPieDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class BarChartDesignPanel extends LineBarPieDesignPanel {
       static template = "o-spreadsheet-BarChartDesignPanel";
@@ -22357,7 +22584,13 @@
 
   class GaugeChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = { SelectionInput, ChartErrorSection, ChartDataSeries };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           dataRangeDispatchResult: undefined,
       });
@@ -22384,12 +22617,6 @@
           return this.dataRange || "";
       }
   }
-  GaugeChartConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   css /* scss */ `
   .o-gauge-color-set {
@@ -22424,31 +22651,35 @@
 `;
   class GaugeChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartDesignPanel";
-      static components = { ColorPickerWidget, ValidationMessages };
+      static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
-          title: "",
           openedMenu: undefined,
           sectionRuleDispatchResult: undefined,
           sectionRule: deepCopy(this.props.definition.sectionRule),
       });
       setup() {
-          this.state.title = _t(this.props.definition.title);
           owl.useExternalListener(window, "click", this.closeMenus);
       }
+      get title() {
+          return _t(this.props.definition.title);
+      }
       get designErrorMessages() {
           const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
           return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
       }
       updateBackgroundColor(color) {
-          this.state.openedMenu = undefined;
           this.props.updateChart(this.props.figureId, {
               background: color,
           });
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       isRangeMinInvalid() {
           return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
@@ -22498,12 +22729,6 @@
           this.state.openedMenu = undefined;
       }
   }
-  GaugeChartDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class LineConfigPanel extends LineBarPieConfigPanel {
       static template = "o-spreadsheet-LineConfigPanel";
@@ -22514,24 +22739,42 @@
           }
           return false;
       }
-      onUpdateLabelsAsText(ev) {
+      get stackedLabel() {
+          return _t("Stacked linechart");
+      }
+      get cumulativeLabel() {
+          return _t("Cumulative data");
+      }
+      getLabelRangeOptions() {
+          const options = super.getLabelRangeOptions();
+          if (this.canTreatLabelsAsText) {
+              options.push({
+                  name: "labelsAsText",
+                  value: this.props.definition.labelsAsText,
+                  label: _t("Treat labels as text"),
+                  onChange: this.onUpdateLabelsAsText.bind(this),
+              });
+          }
+          return options;
+      }
+      onUpdateLabelsAsText(labelsAsText) {
           this.props.updateChart(this.props.figureId, {
-              labelsAsText: ev.target.checked,
+              labelsAsText,
           });
       }
-      onUpdateStacked(ev) {
+      onUpdateStacked(stacked) {
           this.props.updateChart(this.props.figureId, {
-              stacked: ev.target.checked,
+              stacked,
           });
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
-      onUpdateCumulative(ev) {
+      onUpdateCumulative(cumulative) {
           this.props.updateChart(this.props.figureId, {
-              cumulative: ev.target.checked,
+              cumulative,
           });
       }
   }
@@ -22542,7 +22785,13 @@
 
   class ScorecardChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-ScorecardChartConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = { SelectionInput, ValidationMessages, ChartErrorSection, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           keyValueDispatchResult: undefined,
           baselineDispatchResult: undefined,
@@ -22594,28 +22843,27 @@
           this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
       }
   }
-  ScorecardChartConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class ScorecardChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-ScorecardChartDesignPanel";
-      static components = { ColorPickerWidget };
+      static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
-          title: "",
           openedColorPicker: undefined,
       });
       setup() {
-          this.state.title = _t(this.props.definition.title);
           owl.useExternalListener(window, "click", this.closeMenus);
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      get title() {
+          return _t(this.props.definition.title);
+      }
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       translate(term) {
           return _t(term);
@@ -22649,12 +22897,6 @@
           this.state.openedColorPicker = undefined;
       }
   }
-  ScorecardChartDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   const chartSidePanelComponentRegistry = new Registry();
   chartSidePanelComponentRegistry
@@ -22705,6 +22947,8 @@
 `;
   class ChartPanel extends owl.Component {
       static template = "o-spreadsheet-ChartPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       state;
       get figureId() {
           return this.state.figureId;
@@ -22791,9 +23035,6 @@
           this.state.panel = panel;
       }
   }
-  ChartPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-spreadsheet {
@@ -22904,6 +23145,9 @@
 `;
   class IconPicker extends owl.Component {
       static template = "o-spreadsheet-IconPicker";
+      static props = {
+          onIconPicked: Function,
+      };
       icons = ICONS;
       iconSets = ICON_SETS;
       onIconClick(icon) {
@@ -22912,9 +23156,6 @@
           }
       }
   }
-  IconPicker.props = {
-      onIconPicked: Function,
-  };
 
   function useDragAndDropListItems() {
       let dndHelper;
@@ -23269,6 +23510,11 @@
 `;
   class ConditionalFormatPreviewList extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormatPreviewList";
+      static props = {
+          conditionalFormats: Array,
+          onPreviewClick: Function,
+          onAddConditionalFormat: Function,
+      };
       icons = ICONS;
       dragAndDrop = useDragAndDropListItems();
       cfListRef = owl.useRef("cfList");
@@ -23349,11 +23595,6 @@
           }
       }
   }
-  ConditionalFormatPreviewList.props = {
-      conditionalFormats: Array,
-      onPreviewClick: Function,
-      onAddConditionalFormat: Function,
-  };
 
   css /* scss */ `
   label {
@@ -23526,11 +23767,16 @@
 `;
   class ConditionalFormattingEditor extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingEditor";
+      static props = {
+          editedCf: { type: Object, optional: true },
+          onExitEdition: Function,
+      };
       static components = {
           SelectionInput,
           IconPicker,
           ColorPickerWidget,
           ConditionalFormatPreviewList,
+          Section,
       };
       icons = ICONS;
       cellIsOperators = CellIsOperators;
@@ -23790,13 +24036,13 @@
           this.state.rules.iconSet.icons[target] = icon;
       }
   }
-  ConditionalFormattingEditor.props = {
-      editedCf: { type: Object, optional: true },
-      onExitEdition: Function,
-  };
 
   class ConditionalFormattingPanel extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingPanel";
+      static props = {
+          selection: { type: Object, optional: true },
+          onCloseSidePanel: Function,
+      };
       static components = {
           ConditionalFormatPreviewList,
           ConditionalFormattingEditor,
@@ -23855,10 +24101,6 @@
           this.state.editedCf = cf;
       }
   }
-  ConditionalFormattingPanel.props = {
-      selection: { type: Object, optional: true },
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-custom-currency {
@@ -23869,6 +24111,8 @@
 `;
   class CustomCurrencyPanel extends owl.Component {
       static template = "o-spreadsheet-CustomCurrencyPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       availableCurrencies;
       state;
       setup() {
@@ -23991,9 +24235,6 @@
           return currency.name + (currency.code ? ` (${currency.code})` : "");
       }
   }
-  CustomCurrencyPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-find-and-replace {
@@ -24013,11 +24254,20 @@
         padding: 4px 0 4px 4px;
       }
     }
+
+    .o-matches-count div {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
   }
 `;
   class FindAndReplacePanel extends owl.Component {
       static template = "o-spreadsheet-FindAndReplacePanel";
-      static components = { SelectionInput };
+      static components = { SelectionInput, Section, Checkbox };
+      static props = {
+          onCloseSidePanel: Function,
+      };
       debounceTimeoutId;
       initialShowFormulaState = false;
       dataRange = "";
@@ -24092,19 +24342,16 @@
               this.replace();
           }
       }
-      searchFormulas(ev) {
-          const showFormula = ev.target.checked;
+      searchFormulas(showFormula) {
           this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
               show: showFormula,
           });
           this.updateSearch({ searchFormulas: showFormula });
       }
-      searchExactMatch(ev) {
-          const exactMatch = ev.target.checked;
+      searchExactMatch(exactMatch) {
           this.updateSearch({ exactMatch });
       }
-      searchMatchCase(ev) {
-          const matchCase = ev.target.checked;
+      searchMatchCase(matchCase) {
           this.updateSearch({ matchCase });
       }
       changeSearchScope(ev) {
@@ -24157,9 +24404,6 @@
           });
       }
   }
-  FindAndReplacePanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-more-formats-panel {
@@ -24191,13 +24435,13 @@
   ]);
   class MoreFormatsPanel extends owl.Component {
       static template = "o-spreadsheet-MoreFormatsPanel";
+      static props = {
+          onCloseSidePanel: Function,
+      };
       get dateFormatsActions() {
           return DATE_FORMAT_ACTIONS;
       }
   }
-  MoreFormatsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-checkbox-selection {
@@ -24206,7 +24450,7 @@
 `;
   class RemoveDuplicatesPanel extends owl.Component {
       static template = "o-spreadsheet-RemoveDuplicatesPanel";
-      static components = { ValidationMessages };
+      static components = { ValidationMessages, Section, Checkbox };
       state = owl.useState({
           hasHeader: false,
           columns: {},
@@ -24295,6 +24539,8 @@
 `;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       loadedLocales = [];
       setup() {
           owl.onWillStart(() => this.loadLocales());
@@ -24343,9 +24589,6 @@
           return this.loadedLocales;
       }
   }
-  SettingsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   const SplitToColumnsInteractiveContent = {
       SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
@@ -24441,7 +24684,7 @@
               return false;
           }
           if (["lastWeek", "lastMonth", "lastYear"].includes(criterion.dateValue)) {
-              const today = jsDateToRoundNumber(new Date());
+              const today = jsDateToRoundNumber(DateTime.now());
               return isDateBetween(dateValue, today, criterionValue);
           }
           return areDatesSameDay(dateValue, criterionValue);
@@ -24933,7 +25176,8 @@
   ];
   class SplitIntoColumnsPanel extends owl.Component {
       static template = "o-spreadsheet-SplitIntoColumnsPanel";
-      static components = { ValidationMessages };
+      static components = { ValidationMessages, Section, Checkbox };
+      static props = { onCloseSidePanel: Function };
       state = owl.useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
       setup() {
           owl.onWillUpdateProps(() => {
@@ -24955,10 +25199,8 @@
               return;
           this.state.customSeparator = ev.target.value;
       }
-      updateAddNewColumnsCheckbox(ev) {
-          if (!ev.target)
-              return;
-          this.state.addNewColumns = ev.target.checked;
+      updateAddNewColumnsCheckbox(addNewColumns) {
+          this.state.addNewColumns = addNewColumns;
       }
       confirm() {
           const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
@@ -25012,13 +25254,15 @@
           return !this.separatorValue || this.errorMessages.length > 0;
       }
   }
-  SplitIntoColumnsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   /** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
   class SelectMenu extends owl.Component {
       static template = "o-spreadsheet-SelectMenu";
+      static props = {
+          menuItems: Array,
+          selectedValue: String,
+          class: { type: String, optional: true },
+      };
       static components = { Menu };
       selectRef = owl.useRef("select");
       selectRect = useAbsoluteBoundingRect(this.selectRef);
@@ -25038,13 +25282,12 @@
           };
       }
   }
-  SelectMenu.props = {
-      menuItems: Array,
-      selectedValue: String,
-      class: { type: String, optional: true },
-  };
 
   class DataValidationCriterionForm extends owl.Component {
+      static props = {
+          criterion: Object,
+          onCriterionChanged: Function,
+      };
       setup() {
           owl.onMounted(() => {
               interactiveStopEdition(this.env);
@@ -25058,10 +25301,6 @@
           this.props.onCriterionChanged(filteredCriterion);
       }
   }
-  DataValidationCriterionForm.props = {
-      criterion: Object,
-      onCriterionChanged: Function,
-  };
 
   css /* scss */ `
   .o-dv-input {
@@ -25076,6 +25315,15 @@
 `;
   class DataValidationInput extends owl.Component {
       static template = "o-spreadsheet-DataValidationInput";
+      static props = {
+          value: { type: String, optional: true },
+          criterionType: String,
+          onValueChanged: Function,
+          onKeyDown: { type: Function, optional: true },
+          focused: { type: Boolean, optional: true },
+          onBlur: { type: Function, optional: true },
+          onFocus: { type: Function, optional: true },
+      };
       static defaultProps = {
           value: "",
           onKeyDown: () => { },
@@ -25114,15 +25362,6 @@
           return this.env.model.getters.getDataValidationInvalidCriterionValueMessage(this.props.criterionType, canonicalizeContent(this.props.value, this.env.model.getters.getLocale()));
       }
   }
-  DataValidationInput.props = {
-      value: { type: String, optional: true },
-      criterionType: String,
-      onValueChanged: Function,
-      onKeyDown: { type: Function, optional: true },
-      focused: { type: Boolean, optional: true },
-      onBlur: { type: Function, optional: true },
-      onFocus: { type: Function, optional: true },
-  };
 
   const DATES_VALUES = {
       today: _t("today"),
@@ -25458,7 +25697,11 @@
 `;
   class DataValidationEditor extends owl.Component {
       static template = "o-spreadsheet-DataValidationEditor";
-      static components = { SelectionInput, SelectMenu };
+      static components = { SelectionInput, SelectMenu, Section };
+      static props = {
+          rule: { type: Object, optional: true },
+          onExit: Function,
+      };
       state = owl.useState({ rule: this.defaultDataValidationRule });
       setup() {
           if (this.props.rule) {
@@ -25534,10 +25777,6 @@
           return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
       }
   }
-  DataValidationEditor.props = {
-      rule: { type: Object, optional: true },
-      onExit: Function,
-  };
 
   css /* scss */ `
   .o-sidePanel {
@@ -25567,6 +25806,10 @@
 `;
   class DataValidationPreview extends owl.Component {
       static template = "o-spreadsheet-DataValidationPreview";
+      static props = {
+          onClick: Function,
+          rule: Object,
+      };
       deleteDataValidation() {
           const sheetId = this.env.model.getters.getActiveSheetId();
           this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
@@ -25583,13 +25826,12 @@
               .getPreview(this.props.rule.criterion, this.env.model.getters);
       }
   }
-  DataValidationPreview.props = {
-      onClick: Function,
-      rule: Object,
-  };
 
   class DataValidationPanel extends owl.Component {
       static template = "o-spreadsheet-DataValidationPanel";
+      static props = {
+          onCloseSidePanel: Function,
+      };
       static components = { DataValidationPreview, DataValidationEditor };
       state = owl.useState({ mode: "list", activeRule: undefined });
       onPreviewClick(id) {
@@ -25619,9 +25861,6 @@
           return this.env.model.getters.getDataValidationRules(sheetId);
       }
   }
-  DataValidationPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   const sidePanelRegistry = new Registry();
   sidePanelRegistry.add("ConditionalFormatting", {
@@ -25753,6 +25992,13 @@
 `;
   class FigureComponent extends owl.Component {
       static template = "o-spreadsheet-FigureComponent";
+      static props = {
+          figure: Object,
+          style: { type: String, optional: true },
+          onFigureDeleted: { type: Function, optional: true },
+          onMouseDown: { type: Function, optional: true },
+          onClickAnchor: { type: Function, optional: true },
+      };
       static components = { Menu };
       static defaultProps = {
           onFigureDeleted: () => { },
@@ -25895,13 +26141,6 @@
               .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
       }
   }
-  FigureComponent.props = {
-      figure: Object,
-      style: { type: String, optional: true },
-      onFigureDeleted: { type: Function, optional: true },
-      onMouseDown: { type: Function, optional: true },
-      onClickAnchor: { type: Function, optional: true },
-  };
 
   const ToggleGroupInteractiveContent = {
       CannotHideAllRows: _t("Cannot hide all the rows of a sheet."),
@@ -26039,6 +26278,10 @@
 `;
   class Autofill extends owl.Component {
       static template = "o-spreadsheet-Autofill";
+      static props = {
+          position: Object,
+          isVisible: Boolean,
+      };
       state = owl.useState({
           position: { left: 0, top: 0 },
           handler: false,
@@ -26107,18 +26350,14 @@
           this.env.model.dispatch("AUTOFILL_AUTO");
       }
   }
-  Autofill.props = {
-      position: Object,
-      isVisible: Boolean,
-  };
   class TooltipComponent extends owl.Component {
+      static props = {
+          content: String,
+      };
       static template = owl.xml /* xml */ `
     <div t-esc="props.content"/>
   `;
   }
-  TooltipComponent.props = {
-      content: String,
-  };
 
   css /* scss */ `
   .o-client-tag {
@@ -26132,6 +26371,13 @@
 `;
   class ClientTag extends owl.Component {
       static template = "o-spreadsheet-ClientTag";
+      static props = {
+          active: Boolean,
+          name: String,
+          color: String,
+          col: Number,
+          row: Number,
+      };
       get tagStyle() {
           const { col, row, color } = this.props;
           const { height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
@@ -26149,13 +26395,6 @@
           });
       }
   }
-  ClientTag.props = {
-      active: Boolean,
-      name: String,
-      color: String,
-      col: Number,
-      row: Number,
-  };
 
   function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
       const pendingHtmlContent = [];
@@ -26195,14 +26434,14 @@
 `;
   class TextValueProvider extends owl.Component {
       static template = "o-spreadsheet-TextValueProvider";
+      static props = {
+          values: Array,
+          selectedIndex: { type: Number, optional: true },
+          getHtmlContent: Function,
+          onValueSelected: Function,
+          onValueHovered: Function,
+      };
   }
-  TextValueProvider.props = {
-      values: Array,
-      selectedIndex: { type: Number, optional: true },
-      getHtmlContent: Function,
-      onValueSelected: Function,
-      onValueHovered: Function,
-  };
 
   class ContentEditableHelper {
       // todo make el private and expose dedicated methods
@@ -26564,6 +26803,11 @@
 `;
   class FunctionDescriptionProvider extends owl.Component {
       static template = "o-spreadsheet-FunctionDescriptionProvider";
+      static props = {
+          functionName: String,
+          functionDescription: Object,
+          argToFocus: Number,
+      };
       assistantState = owl.useState({
           allowCellSelectionBehind: false,
       });
@@ -26588,11 +26832,6 @@
           }, 2000);
       }
   }
-  FunctionDescriptionProvider.props = {
-      functionName: String,
-      functionDescription: Object,
-      argToFocus: Number,
-  };
 
   const functions$2 = functionRegistry.content;
   const ASSISTANT_WIDTH = 300;
@@ -26658,6 +26897,16 @@
 `;
   class Composer extends owl.Component {
       static template = "o-spreadsheet-Composer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerContentFocused: Function,
+          inputStyle: { type: String, optional: true },
+          rect: { type: Object, optional: true },
+          delimitation: { type: Object, optional: true },
+          onComposerUnmounted: { type: Function, optional: true },
+      };
       static components = { TextValueProvider, FunctionDescriptionProvider };
       static defaultProps = {
           inputStyle: "",
@@ -27214,14 +27463,6 @@
           this.autoCompleteState.getHtmlContent = (value) => [{ value }];
       }
   }
-  Composer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerContentFocused: Function,
-      inputStyle: { type: String, optional: true },
-      rect: { type: Object, optional: true },
-      delimitation: { type: Object, optional: true },
-      onComposerUnmounted: { type: Function, optional: true },
-  };
 
   const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
   const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
@@ -27253,6 +27494,14 @@
    */
   class GridComposer extends owl.Component {
       static template = "o-spreadsheet-GridComposer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerUnmounted: Function,
+          onComposerContentFocused: Function,
+          gridDims: Object,
+      };
       static components = { Composer };
       gridComposerRef;
       zone;
@@ -27359,22 +27608,22 @@
           });
       }
   }
-  GridComposer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerUnmounted: Function,
-      onComposerContentFocused: Function,
-      gridDims: Object,
-  };
 
-  const CSS$1 = css /* scss */ `
+  css /* scss */ `
   .o-grid-cell-icon {
     width: ${GRID_ICON_EDGE_LENGTH}px;
     height: ${GRID_ICON_EDGE_LENGTH}px;
   }
 `;
   class GridCellIcon extends owl.Component {
-      static style = CSS$1;
       static template = "o-spreadsheet-GridCellIcon";
+      static props = {
+          cellPosition: Object,
+          horizontalAlign: { type: String, optional: true },
+          verticalAlign: { type: String, optional: true },
+          offset: { type: Object, optional: true },
+          slots: Object,
+      };
       get iconStyle() {
           const x = this.getIconHorizontalPosition();
           const y = this.getIconVerticalPosition();
@@ -27423,15 +27672,8 @@
           return !(rect.width === 0 || rect.height === 0);
       }
   }
-  GridCellIcon.props = {
-      cellPosition: Object,
-      horizontalAlign: { type: String, optional: true },
-      verticalAlign: { type: String, optional: true },
-      offset: { type: Object, optional: true },
-      slots: Object,
-  };
 
-  const CSS = css /* scss */ `
+  css /* scss */ `
   .o-filter-icon {
     color: ${FILTERS_COLOR};
     display: flex;
@@ -27446,8 +27688,10 @@
   }
 `;
   class FilterIcon extends owl.Component {
-      static style = CSS;
       static template = "o-spreadsheet-FilterIcon";
+      static props = {
+          cellPosition: Object,
+      };
       onClick() {
           const position = this.props.cellPosition;
           const activePopoverType = this.env.model.getters.getPersistentPopoverTypeAtPosition(position);
@@ -27466,12 +27710,12 @@
           return this.env.model.getters.isFilterActive(this.props.cellPosition);
       }
   }
-  FilterIcon.props = {
-      cellPosition: Object,
-  };
 
   class FilterIconsOverlay extends owl.Component {
       static template = "o-spreadsheet-FilterIconsOverlay";
+      static props = {
+          gridPosition: { type: Object, optional: true },
+      };
       static components = {
           GridCellIcon,
           FilterIcon,
@@ -27485,9 +27729,6 @@
           return headerPositions.map((position) => ({ sheetId, ...position }));
       }
   }
-  FilterIconsOverlay.props = {
-      gridPosition: { type: Object, optional: true },
-  };
 
   const CHECKBOX_WIDTH = 15;
   const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
@@ -27501,6 +27742,9 @@
 `;
   class DataValidationCheckbox extends owl.Component {
       static template = "o-spreadsheet-DataValidationCheckbox";
+      static props = {
+          cellPosition: Object,
+      };
       onCheckboxChange(ev) {
           const newValue = ev.target.checked;
           const { sheetId, col, row } = this.props.cellPosition;
@@ -27515,9 +27759,6 @@
           return !!cell?.isFormula;
       }
   }
-  DataValidationCheckbox.props = {
-      cellPosition: Object,
-  };
 
   const ICON_WIDTH = 13;
   css /* scss */ `
@@ -27540,18 +27781,19 @@
 `;
   class DataValidationListIcon extends owl.Component {
       static template = "o-spreadsheet-DataValidationListIcon";
+      static props = {
+          cellPosition: Object,
+      };
       onClick() {
           const { col, row } = this.props.cellPosition;
           this.env.model.selection.selectCell(col, row);
           this.env.startCellEdition();
       }
   }
-  DataValidationListIcon.props = {
-      cellPosition: Object,
-  };
 
   class DataValidationOverlay extends owl.Component {
       static template = "o-spreadsheet-DataValidationOverlay";
+      static props = {};
       static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
       get checkBoxCellPositions() {
           return this.env.model.getters.getDataValidationCheckBoxCellPositions();
@@ -27562,7 +27804,6 @@
               : this.env.model.getters.getDataValidationListCellsPositions();
       }
   }
-  DataValidationOverlay.props = {};
 
   /**
    * Transform a figure with coordinates from the model, to coordinates as they are shown on the screen,
@@ -27898,6 +28139,9 @@
    */
   class FiguresContainer extends owl.Component {
       static template = "o-spreadsheet-FiguresContainer";
+      static props = {
+          onFigureDeleted: Function,
+      };
       static components = { FigureComponent };
       dnd = owl.useState({
           draggedFigure: undefined,
@@ -28147,9 +28391,6 @@
           }
       }
   }
-  FiguresContainer.props = {
-      onFigureDeleted: Function,
-  };
 
   css /* scss */ `
   .o-grid-add-rows {
@@ -28168,6 +28409,9 @@
 `;
   class GridAddRowsFooter extends owl.Component {
       static template = "o-spreadsheet-GridAddRowsFooter";
+      static props = {
+          focusGrid: Function,
+      };
       static components = { ValidationMessages };
       inputRef = owl.useRef("inputRef");
       state = owl.useState({
@@ -28234,9 +28478,6 @@
           this.props.focusGrid();
       }
   }
-  GridAddRowsFooter.props = {
-      focusGrid: Function,
-  };
 
   /**
    * Manages an event listener on a ref. Useful for hooks that want to manage
@@ -28392,6 +28633,16 @@
   }
   class GridOverlay extends owl.Component {
       static template = "o-spreadsheet-GridOverlay";
+      static props = {
+          onCellHovered: { type: Function, optional: true },
+          onCellDoubleClicked: { type: Function, optional: true },
+          onCellClicked: { type: Function, optional: true },
+          onCellRightClicked: { type: Function, optional: true },
+          onGridResized: { type: Function, optional: true },
+          onFigureDeleted: { type: Function, optional: true },
+          onGridMoved: Function,
+          gridOverlayDimensions: String,
+      };
       static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
       static defaultProps = {
           onCellHovered: () => { },
@@ -28443,7 +28694,10 @@
               return;
           }
           const [col, row] = this.getCartesianCoordinates(ev);
-          this.props.onCellClicked(col, row, { shiftKey: ev.shiftKey, ctrlKey: ev.ctrlKey });
+          this.props.onCellClicked(col, row, {
+              expandZone: ev.shiftKey,
+              addZone: isCtrlKey(ev),
+          });
       }
       onDoubleClick(ev) {
           const [col, row] = this.getCartesianCoordinates(ev);
@@ -28462,19 +28716,15 @@
           return [colIndex, rowIndex];
       }
   }
-  GridOverlay.props = {
-      onCellHovered: { type: Function, optional: true },
-      onCellDoubleClicked: { type: Function, optional: true },
-      onCellClicked: { type: Function, optional: true },
-      onCellRightClicked: { type: Function, optional: true },
-      onGridResized: { type: Function, optional: true },
-      onFigureDeleted: { type: Function, optional: true },
-      onGridMoved: Function,
-      gridOverlayDimensions: String,
-  };
 
   class GridPopover extends owl.Component {
       static template = "o-spreadsheet-GridPopover";
+      static props = {
+          hoveredCell: Object,
+          onClosePopover: Function,
+          onMouseWheel: Function,
+          gridRect: Object,
+      };
       static components = { Popover };
       zIndex = ComponentsImportance.GridPopover;
       get cellPopover() {
@@ -28494,14 +28744,11 @@
           };
       }
   }
-  GridPopover.props = {
-      hoveredCell: Object,
-      onClosePopover: Function,
-      onMouseWheel: Function,
-      gridRect: Object,
-  };
 
   class AbstractResizer extends owl.Component {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       PADDING = 0;
       MAX_SIZE_MARGIN = 0;
       MIN_ELEMENT_SIZE = 0;
@@ -28673,7 +28920,7 @@
               this._increaseSelection(index);
           }
           else {
-              this._selectElement(index, ev.ctrlKey);
+              this._selectElement(index, isCtrlKey(ev));
           }
           this.lastSelectedElementIndex = index;
           const mouseMoveSelect = (col, row) => {
@@ -28758,10 +29005,10 @@
     }
   }
 `;
-  AbstractResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class ColResizer extends AbstractResizer {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-ColResizer";
       colResizerRef;
       setup() {
@@ -28830,8 +29077,8 @@
               this.env.raiseError(MergeErrorMessage);
           }
       }
-      _selectElement(index, ctrlKey) {
-          this.env.model.selection.selectColumn(index, ctrlKey ? "newAnchor" : "overrideSelection");
+      _selectElement(index, addDistinctHeader) {
+          this.env.model.selection.selectColumn(index, addDistinctHeader ? "newAnchor" : "overrideSelection");
       }
       _increaseSelection(index) {
           this.env.model.selection.selectColumn(index, "updateAnchor");
@@ -28923,10 +29170,10 @@
     }
   }
 `;
-  ColResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class RowResizer extends AbstractResizer {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-RowResizer";
       setup() {
           super.setup();
@@ -28995,8 +29242,8 @@
               this.env.raiseError(MergeErrorMessage);
           }
       }
-      _selectElement(index, ctrlKey) {
-          this.env.model.selection.selectRow(index, ctrlKey ? "newAnchor" : "overrideSelection");
+      _selectElement(index, addDistinctHeader) {
+          this.env.model.selection.selectRow(index, addDistinctHeader ? "newAnchor" : "overrideSelection");
       }
       _increaseSelection(index) {
           this.env.model.selection.selectRow(index, "updateAnchor");
@@ -29047,19 +29294,16 @@
     }
   }
 `;
-  RowResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class HeadersOverlay extends owl.Component {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-HeadersOverlay";
       static components = { ColResizer, RowResizer };
       selectAll() {
           this.env.model.selection.selectAll();
       }
   }
-  HeadersOverlay.props = {
-      onOpenContextMenu: Function,
-  };
 
   function useGridDrawing(refName, model, canvasSize) {
       const canvasRef = owl.useRef(refName);
@@ -29117,6 +29361,12 @@
 `;
   class Border extends owl.Component {
       static template = "o-spreadsheet-Border";
+      static props = {
+          zone: Object,
+          orientation: String,
+          isMoving: Boolean,
+          onMoveHighlight: Function,
+      };
       get style() {
           const isTop = ["n", "w", "e"].includes(this.props.orientation);
           const isLeft = ["n", "w", "s"].includes(this.props.orientation);
@@ -29145,12 +29395,6 @@
           this.props.onMoveHighlight(ev.clientX, ev.clientY);
       }
   }
-  Border.props = {
-      zone: Object,
-      orientation: String,
-      isMoving: Boolean,
-      onMoveHighlight: Function,
-  };
 
   css /* scss */ `
   .o-corner {
@@ -29177,6 +29421,13 @@
 `;
   class Corner extends owl.Component {
       static template = "o-spreadsheet-Corner";
+      static props = {
+          zone: Object,
+          color: String,
+          orientation: String,
+          isResizing: Boolean,
+          onResizeHighlight: Function,
+      };
       isTop = this.props.orientation[0] === "n";
       isLeft = this.props.orientation[1] === "w";
       get style() {
@@ -29205,13 +29456,6 @@
           this.props.onResizeHighlight(this.isLeft, this.isTop);
       }
   }
-  Corner.props = {
-      zone: Object,
-      color: String,
-      orientation: String,
-      isResizing: Boolean,
-      onResizeHighlight: Function,
-  };
 
   css /*SCSS*/ `
   .o-highlight {
@@ -29220,6 +29464,10 @@
 `;
   class Highlight extends owl.Component {
       static template = "o-spreadsheet-Highlight";
+      static props = {
+          zone: Object,
+          color: String,
+      };
       static components = {
           Corner,
           Border,
@@ -29303,10 +29551,6 @@
           dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
       }
   }
-  Highlight.props = {
-      zone: Object,
-      color: String,
-  };
 
   let ScrollBar$1 = class ScrollBar {
       direction;
@@ -29346,6 +29590,14 @@
   }
 `;
   class ScrollBar extends owl.Component {
+      static props = {
+          width: { type: Number, optional: true },
+          height: { type: Number, optional: true },
+          direction: String,
+          position: Object,
+          offset: Number,
+          onScroll: Function,
+      };
       static template = owl.xml /*xml*/ `
     <div
         t-attf-class="o-scrollbar {{props.direction}}"
@@ -29389,16 +29641,11 @@
           }
       }
   }
-  ScrollBar.props = {
-      width: { type: Number, optional: true },
-      height: { type: Number, optional: true },
-      direction: String,
-      position: Object,
-      offset: Number,
-      onScroll: Function,
-  };
 
   class HorizontalScrollBar extends owl.Component {
+      static props = {
+          leftOffset: { type: Number, optional: true },
+      };
       static components = { ScrollBar };
       static template = owl.xml /*xml*/ `
       <ScrollBar
@@ -29439,11 +29686,11 @@
           });
       }
   }
-  HorizontalScrollBar.props = {
-      leftOffset: { type: Number, optional: true },
-  };
 
   class VerticalScrollBar extends owl.Component {
+      static props = {
+          topOffset: { type: Number, optional: true },
+      };
       static components = { ScrollBar };
       static template = owl.xml /*xml*/ `
     <ScrollBar
@@ -29484,9 +29731,6 @@
           });
       }
   }
-  VerticalScrollBar.props = {
-      topOffset: { type: Number, optional: true },
-  };
 
   const registries$1 = {
       ROW: rowMenuRegistry,
@@ -29500,6 +29744,13 @@
   // -----------------------------------------------------------------------------
   class Grid extends owl.Component {
       static template = "o-spreadsheet-Grid";
+      static props = {
+          sidePanelIsOpen: Boolean,
+          exposeFocus: Function,
+          focusComposer: String,
+          onComposerContentFocused: Function,
+          onGridComposerCellFocused: Function,
+      };
       static components = {
           GridComposer,
           GridOverlay,
@@ -29689,7 +29940,7 @@
           "Ctrl+Shift+E": () => this.setHorizontalAlign("center"),
           "Ctrl+Shift+L": () => this.setHorizontalAlign("left"),
           "Ctrl+Shift+R": () => this.setHorizontalAlign("right"),
-          "Ctrl+Shift+V": () => PASTE_VALUE_ACTION(this.env),
+          "Ctrl+Shift+V": () => PASTE_AS_VALUE_ACTION(this.env),
           "Ctrl+Shift+<": () => this.clearFormatting(),
           "Ctrl+<": () => this.clearFormatting(),
           "Ctrl+Shift+ ": () => {
@@ -29797,17 +30048,17 @@
       // ---------------------------------------------------------------------------
       // Zone selection with mouse
       // ---------------------------------------------------------------------------
-      onCellClicked(col, row, { ctrlKey, shiftKey }) {
+      onCellClicked(col, row, { addZone, expandZone }) {
           if (this.env.model.getters.hasOpenedPopover()) {
               this.closeOpenedPopover();
           }
           if (this.env.model.getters.getEditionMode() === "editing") {
               interactiveStopEdition(this.env);
           }
-          if (shiftKey) {
+          if (expandZone) {
               this.env.model.selection.setAnchorCorner(col, row);
           }
-          else if (ctrlKey) {
+          else if (addZone) {
               this.env.model.selection.addCellToSelection(col, row);
           }
           else {
@@ -30104,13 +30355,6 @@
           }
       }
   }
-  Grid.props = {
-      sidePanelIsOpen: Boolean,
-      exposeFocus: Function,
-      focusComposer: String,
-      onComposerContentFocused: Function,
-      onGridComposerCellFocused: Function,
-  };
 
   /**
    * Represent a raw XML string
@@ -30610,7 +30854,7 @@
       46: "hhhh:mm:ss",
       47: "hhhh:mm:ss",
       48: undefined,
-      49: undefined,
+      49: PLAIN_TEXT_FORMAT,
   };
   /**
    * Mapping format index to format defined by default
@@ -31531,20 +31775,26 @@
           .filter(isDefined$1);
   }
   function convertFigure(figure, id, sheetData) {
-      const x1 = getColPosition(figure.anchors[0].col, sheetData) +
-          convertEMUToDotValue(figure.anchors[0].colOffset);
-      const x2 = getColPosition(figure.anchors[1].col, sheetData) +
-          convertEMUToDotValue(figure.anchors[1].colOffset);
-      const y1 = getRowPosition(figure.anchors[0].row, sheetData) +
-          convertEMUToDotValue(figure.anchors[0].rowOffset);
-      const y2 = getRowPosition(figure.anchors[1].row, sheetData) +
-          convertEMUToDotValue(figure.anchors[1].rowOffset);
+      let x1, y1;
+      let height, width;
+      if (figure.anchors.length === 1) {
+          // one cell anchor
+          ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+          width = convertEMUToDotValue(figure.figureSize.cx);
+          height = convertEMUToDotValue(figure.figureSize.cy);
+      }
+      else {
+          ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+          const { x: x2, y: y2 } = getPositionFromAnchor(figure.anchors[1], sheetData);
+          width = x2 - x1;
+          height = y2 - y1;
+      }
       const figureData = { id, x: x1, y: y1 };
       if (isChartData(figure.data)) {
           return {
               ...figureData,
-              width: x2 - x1,
-              height: y2 - y1,
+              width,
+              height,
               tag: "chart",
               data: convertChartData(figure.data),
           };
@@ -31610,6 +31860,12 @@
       const dataXC = zoneToXc(zone);
       return getFullReference(sheetName, dataXC);
   }
+  function getPositionFromAnchor(anchor, sheetData) {
+      return {
+          x: getColPosition(anchor.col, sheetData) + convertEMUToDotValue(anchor.colOffset),
+          y: getRowPosition(anchor.row, sheetData) + convertEMUToDotValue(anchor.rowOffset),
+      };
+  }
 
   /**
    * Match external reference (ex. '[1]Sheet 3'!$B$4)
@@ -32733,27 +32989,50 @@
       }
   }
 
+  const ONE_CELL_ANCHOR = "oneCellAnchor";
+  const TWO_CELL_ANCHOR = "twoCellAnchor";
   class XlsxFigureExtractor extends XlsxBaseExtractor {
       extractFigures() {
           return this.mapOnElements({ parent: this.rootFile.file.xml, query: "xdr:wsDr", children: true }, (figureElement) => {
               const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
-              if (anchorType !== "twoCellAnchor") {
-                  throw new Error("Only twoCellAnchor are supported for xlsx drawings.");
-              }
+              const anchors = this.extractFigureAnchorsByType(figureElement, anchorType);
               const chartElement = this.querySelector(figureElement, "c:chart");
               const imageElement = this.querySelector(figureElement, "a:blip");
               if (!chartElement && !imageElement) {
                   throw new Error("Only chart and image figures are currently supported.");
               }
               return {
-                  anchors: [
-                      this.extractFigureAnchor("xdr:from", figureElement),
-                      this.extractFigureAnchor("xdr:to", figureElement),
-                  ],
+                  anchors,
                   data: chartElement ? this.extractChart(chartElement) : this.extractImage(figureElement),
+                  figureSize: anchorType === ONE_CELL_ANCHOR
+                      ? this.extractFigureSizeFromSizeTag(figureElement, "xdr:ext")
+                      : undefined,
               };
           });
       }
+      extractFigureAnchorsByType(figureElement, anchorType) {
+          switch (anchorType) {
+              case ONE_CELL_ANCHOR:
+                  return [this.extractFigureAnchor("xdr:from", figureElement)];
+              case TWO_CELL_ANCHOR:
+                  return [
+                      this.extractFigureAnchor("xdr:from", figureElement),
+                      this.extractFigureAnchor("xdr:to", figureElement),
+                  ];
+              default:
+                  throw new Error(`${anchorType} is not supported for xlsx drawings. `);
+          }
+      }
+      extractFigureSizeFromSizeTag(figureElement, sizeTag) {
+          const sizeElement = this.querySelector(figureElement, sizeTag);
+          if (!sizeElement) {
+              throw new Error(`Missing size element '${sizeTag}'`);
+          }
+          return {
+              cx: this.extractAttr(sizeElement, "cx", { required: true }).asNum(),
+              cy: this.extractAttr(sizeElement, "cy", { required: true }).asNum(),
+          };
+      }
       extractFigureAnchor(anchorTag, figureElement) {
           const anchor = this.querySelector(figureElement, anchorTag);
           if (!anchor) {
@@ -32782,15 +33061,15 @@
           if (!image) {
               throw new Error("Unable to extract image");
           }
-          const shapePropertyElement = this.querySelector(figureElement, "a:xfrm");
           const extension = image.fileName.split(".").at(-1);
+          const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
+          const sizeElement = anchorType === TWO_CELL_ANCHOR ? this.querySelector(figureElement, "a:xfrm") : figureElement;
+          const sizeTag = anchorType === TWO_CELL_ANCHOR ? "a:ext" : "xdr:ext";
+          const size = this.extractFigureSizeFromSizeTag(sizeElement, sizeTag);
           return {
               imageSrc: image.imageSrc,
               mimetype: extension ? IMAGE_EXTENSION_TO_MIMETYPE_MAPPING[extension] : undefined,
-              size: {
-                  cx: this.extractChildAttr(shapePropertyElement, "a:ext", "cx", { required: true }).asNum(),
-                  cy: this.extractChildAttr(shapePropertyElement, "a:ext", "cy", { required: true }).asNum(),
-              },
+              size,
           };
       }
   }
@@ -34743,7 +35022,7 @@
            */
           function getBorderId(border) {
               for (let [key, value] of Object.entries(borders)) {
-                  if (stringify(value) === stringify(border)) {
+                  if (deepEquals(value, border)) {
                       return parseInt(key, 10);
                   }
               }
@@ -35914,7 +36193,9 @@
       }
       createLiteralCell(id, content, format, style) {
           const locale = this.getters.getLocale();
-          content = parseLiteral(content, locale).toString();
+          if (format !== PLAIN_TEXT_FORMAT) {
+              content = toString(parseLiteral(content, locale));
+          }
           return {
               id,
               content,
@@ -40061,56 +40342,758 @@
       }
   }
 
+  function quickselect(arr, k, left, right, compare) {
+      quickselectStep(arr, k, left || 0, right || (arr.length - 1), compare || defaultCompare);
+  }
+
+  function quickselectStep(arr, k, left, right, compare) {
+
+      while (right > left) {
+          if (right - left > 600) {
+              var n = right - left + 1;
+              var m = k - left + 1;
+              var z = Math.log(n);
+              var s = 0.5 * Math.exp(2 * z / 3);
+              var sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
+              var newLeft = Math.max(left, Math.floor(k - m * s / n + sd));
+              var newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));
+              quickselectStep(arr, k, newLeft, newRight, compare);
+          }
+
+          var t = arr[k];
+          var i = left;
+          var j = right;
+
+          swap(arr, left, k);
+          if (compare(arr[right], t) > 0) swap(arr, left, right);
+
+          while (i < j) {
+              swap(arr, i, j);
+              i++;
+              j--;
+              while (compare(arr[i], t) < 0) i++;
+              while (compare(arr[j], t) > 0) j--;
+          }
+
+          if (compare(arr[left], t) === 0) swap(arr, left, j);
+          else {
+              j++;
+              swap(arr, j, right);
+          }
+
+          if (j <= k) left = j + 1;
+          if (k <= j) right = j - 1;
+      }
+  }
+
+  function swap(arr, i, j) {
+      var tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+  }
+
+  function defaultCompare(a, b) {
+      return a < b ? -1 : a > b ? 1 : 0;
+  }
+
+  class RBush {
+      constructor(maxEntries = 9) {
+          // max entries in a node is 9 by default; min node fill is 40% for best performance
+          this._maxEntries = Math.max(4, maxEntries);
+          this._minEntries = Math.max(2, Math.ceil(this._maxEntries * 0.4));
+          this.clear();
+      }
+
+      all() {
+          return this._all(this.data, []);
+      }
+
+      search(bbox) {
+          let node = this.data;
+          const result = [];
+
+          if (!intersects(bbox, node)) return result;
+
+          const toBBox = this.toBBox;
+          const nodesToSearch = [];
+
+          while (node) {
+              for (let i = 0; i < node.children.length; i++) {
+                  const child = node.children[i];
+                  const childBBox = node.leaf ? toBBox(child) : child;
+
+                  if (intersects(bbox, childBBox)) {
+                      if (node.leaf) result.push(child);
+                      else if (contains(bbox, childBBox)) this._all(child, result);
+                      else nodesToSearch.push(child);
+                  }
+              }
+              node = nodesToSearch.pop();
+          }
+
+          return result;
+      }
+
+      collides(bbox) {
+          let node = this.data;
+
+          if (!intersects(bbox, node)) return false;
+
+          const nodesToSearch = [];
+          while (node) {
+              for (let i = 0; i < node.children.length; i++) {
+                  const child = node.children[i];
+                  const childBBox = node.leaf ? this.toBBox(child) : child;
+
+                  if (intersects(bbox, childBBox)) {
+                      if (node.leaf || contains(bbox, childBBox)) return true;
+                      nodesToSearch.push(child);
+                  }
+              }
+              node = nodesToSearch.pop();
+          }
+
+          return false;
+      }
+
+      load(data) {
+          if (!(data && data.length)) return this;
+
+          if (data.length < this._minEntries) {
+              for (let i = 0; i < data.length; i++) {
+                  this.insert(data[i]);
+              }
+              return this;
+          }
+
+          // recursively build the tree with the given data from scratch using OMT algorithm
+          let node = this._build(data.slice(), 0, data.length - 1, 0);
+
+          if (!this.data.children.length) {
+              // save as is if tree is empty
+              this.data = node;
+
+          } else if (this.data.height === node.height) {
+              // split root if trees have the same height
+              this._splitRoot(this.data, node);
+
+          } else {
+              if (this.data.height < node.height) {
+                  // swap trees if inserted one is bigger
+                  const tmpNode = this.data;
+                  this.data = node;
+                  node = tmpNode;
+              }
+
+              // insert the small tree into the large tree at appropriate level
+              this._insert(node, this.data.height - node.height - 1, true);
+          }
+
+          return this;
+      }
+
+      insert(item) {
+          if (item) this._insert(item, this.data.height - 1);
+          return this;
+      }
+
+      clear() {
+          this.data = createNode([]);
+          return this;
+      }
+
+      remove(item, equalsFn) {
+          if (!item) return this;
+
+          let node = this.data;
+          const bbox = this.toBBox(item);
+          const path = [];
+          const indexes = [];
+          let i, parent, goingUp;
+
+          // depth-first iterative tree traversal
+          while (node || path.length) {
+
+              if (!node) { // go up
+                  node = path.pop();
+                  parent = path[path.length - 1];
+                  i = indexes.pop();
+                  goingUp = true;
+              }
+
+              if (node.leaf) { // check current node
+                  const index = findItem(item, node.children, equalsFn);
+
+                  if (index !== -1) {
+                      // item found, remove the item and condense tree upwards
+                      node.children.splice(index, 1);
+                      path.push(node);
+                      this._condense(path);
+                      return this;
+                  }
+              }
+
+              if (!goingUp && !node.leaf && contains(node, bbox)) { // go down
+                  path.push(node);
+                  indexes.push(i);
+                  i = 0;
+                  parent = node;
+                  node = node.children[0];
+
+              } else if (parent) { // go right
+                  i++;
+                  node = parent.children[i];
+                  goingUp = false;
+
+              } else node = null; // nothing found
+          }
+
+          return this;
+      }
+
+      toBBox(item) { return item; }
+
+      compareMinX(a, b) { return a.minX - b.minX; }
+      compareMinY(a, b) { return a.minY - b.minY; }
+
+      toJSON() { return this.data; }
+
+      fromJSON(data) {
+          this.data = data;
+          return this;
+      }
+
+      _all(node, result) {
+          const nodesToSearch = [];
+          while (node) {
+              if (node.leaf) result.push(...node.children);
+              else nodesToSearch.push(...node.children);
+
+              node = nodesToSearch.pop();
+          }
+          return result;
+      }
+
+      _build(items, left, right, height) {
+
+          const N = right - left + 1;
+          let M = this._maxEntries;
+          let node;
+
+          if (N <= M) {
+              // reached leaf level; return leaf
+              node = createNode(items.slice(left, right + 1));
+              calcBBox(node, this.toBBox);
+              return node;
+          }
+
+          if (!height) {
+              // target height of the bulk-loaded tree
+              height = Math.ceil(Math.log(N) / Math.log(M));
+
+              // target number of root entries to maximize storage utilization
+              M = Math.ceil(N / Math.pow(M, height - 1));
+          }
+
+          node = createNode([]);
+          node.leaf = false;
+          node.height = height;
+
+          // split the items into M mostly square tiles
+
+          const N2 = Math.ceil(N / M);
+          const N1 = N2 * Math.ceil(Math.sqrt(M));
+
+          multiSelect(items, left, right, N1, this.compareMinX);
+
+          for (let i = left; i <= right; i += N1) {
+
+              const right2 = Math.min(i + N1 - 1, right);
+
+              multiSelect(items, i, right2, N2, this.compareMinY);
+
+              for (let j = i; j <= right2; j += N2) {
+
+                  const right3 = Math.min(j + N2 - 1, right2);
+
+                  // pack each entry recursively
+                  node.children.push(this._build(items, j, right3, height - 1));
+              }
+          }
+
+          calcBBox(node, this.toBBox);
+
+          return node;
+      }
+
+      _chooseSubtree(bbox, node, level, path) {
+          while (true) {
+              path.push(node);
+
+              if (node.leaf || path.length - 1 === level) break;
+
+              let minArea = Infinity;
+              let minEnlargement = Infinity;
+              let targetNode;
+
+              for (let i = 0; i < node.children.length; i++) {
+                  const child = node.children[i];
+                  const area = bboxArea(child);
+                  const enlargement = enlargedArea(bbox, child) - area;
+
+                  // choose entry with the least area enlargement
+                  if (enlargement < minEnlargement) {
+                      minEnlargement = enlargement;
+                      minArea = area < minArea ? area : minArea;
+                      targetNode = child;
+
+                  } else if (enlargement === minEnlargement) {
+                      // otherwise choose one with the smallest area
+                      if (area < minArea) {
+                          minArea = area;
+                          targetNode = child;
+                      }
+                  }
+              }
+
+              node = targetNode || node.children[0];
+          }
+
+          return node;
+      }
+
+      _insert(item, level, isNode) {
+          const bbox = isNode ? item : this.toBBox(item);
+          const insertPath = [];
+
+          // find the best node for accommodating the item, saving all nodes along the path too
+          const node = this._chooseSubtree(bbox, this.data, level, insertPath);
+
+          // put the item into the node
+          node.children.push(item);
+          extend(node, bbox);
+
+          // split on node overflow; propagate upwards if necessary
+          while (level >= 0) {
+              if (insertPath[level].children.length > this._maxEntries) {
+                  this._split(insertPath, level);
+                  level--;
+              } else break;
+          }
+
+          // adjust bboxes along the insertion path
+          this._adjustParentBBoxes(bbox, insertPath, level);
+      }
+
+      // split overflowed node into two
+      _split(insertPath, level) {
+          const node = insertPath[level];
+          const M = node.children.length;
+          const m = this._minEntries;
+
+          this._chooseSplitAxis(node, m, M);
+
+          const splitIndex = this._chooseSplitIndex(node, m, M);
+
+          const newNode = createNode(node.children.splice(splitIndex, node.children.length - splitIndex));
+          newNode.height = node.height;
+          newNode.leaf = node.leaf;
+
+          calcBBox(node, this.toBBox);
+          calcBBox(newNode, this.toBBox);
+
+          if (level) insertPath[level - 1].children.push(newNode);
+          else this._splitRoot(node, newNode);
+      }
+
+      _splitRoot(node, newNode) {
+          // split root node
+          this.data = createNode([node, newNode]);
+          this.data.height = node.height + 1;
+          this.data.leaf = false;
+          calcBBox(this.data, this.toBBox);
+      }
+
+      _chooseSplitIndex(node, m, M) {
+          let index;
+          let minOverlap = Infinity;
+          let minArea = Infinity;
+
+          for (let i = m; i <= M - m; i++) {
+              const bbox1 = distBBox(node, 0, i, this.toBBox);
+              const bbox2 = distBBox(node, i, M, this.toBBox);
+
+              const overlap = intersectionArea(bbox1, bbox2);
+              const area = bboxArea(bbox1) + bboxArea(bbox2);
+
+              // choose distribution with minimum overlap
+              if (overlap < minOverlap) {
+                  minOverlap = overlap;
+                  index = i;
+
+                  minArea = area < minArea ? area : minArea;
+
+              } else if (overlap === minOverlap) {
+                  // otherwise choose distribution with minimum area
+                  if (area < minArea) {
+                      minArea = area;
+                      index = i;
+                  }
+              }
+          }
+
+          return index || M - m;
+      }
+
+      // sorts node children by the best axis for split
+      _chooseSplitAxis(node, m, M) {
+          const compareMinX = node.leaf ? this.compareMinX : compareNodeMinX;
+          const compareMinY = node.leaf ? this.compareMinY : compareNodeMinY;
+          const xMargin = this._allDistMargin(node, m, M, compareMinX);
+          const yMargin = this._allDistMargin(node, m, M, compareMinY);
+
+          // if total distributions margin value is minimal for x, sort by minX,
+          // otherwise it's already sorted by minY
+          if (xMargin < yMargin) node.children.sort(compareMinX);
+      }
+
+      // total margin of all possible split distributions where each node is at least m full
+      _allDistMargin(node, m, M, compare) {
+          node.children.sort(compare);
+
+          const toBBox = this.toBBox;
+          const leftBBox = distBBox(node, 0, m, toBBox);
+          const rightBBox = distBBox(node, M - m, M, toBBox);
+          let margin = bboxMargin(leftBBox) + bboxMargin(rightBBox);
+
+          for (let i = m; i < M - m; i++) {
+              const child = node.children[i];
+              extend(leftBBox, node.leaf ? toBBox(child) : child);
+              margin += bboxMargin(leftBBox);
+          }
+
+          for (let i = M - m - 1; i >= m; i--) {
+              const child = node.children[i];
+              extend(rightBBox, node.leaf ? toBBox(child) : child);
+              margin += bboxMargin(rightBBox);
+          }
+
+          return margin;
+      }
+
+      _adjustParentBBoxes(bbox, path, level) {
+          // adjust bboxes along the given tree path
+          for (let i = level; i >= 0; i--) {
+              extend(path[i], bbox);
+          }
+      }
+
+      _condense(path) {
+          // go through the path, removing empty nodes and updating bboxes
+          for (let i = path.length - 1, siblings; i >= 0; i--) {
+              if (path[i].children.length === 0) {
+                  if (i > 0) {
+                      siblings = path[i - 1].children;
+                      siblings.splice(siblings.indexOf(path[i]), 1);
+
+                  } else this.clear();
+
+              } else calcBBox(path[i], this.toBBox);
+          }
+      }
+  }
+
+  function findItem(item, items, equalsFn) {
+      if (!equalsFn) return items.indexOf(item);
+
+      for (let i = 0; i < items.length; i++) {
+          if (equalsFn(item, items[i])) return i;
+      }
+      return -1;
+  }
+
+  // calculate node's bbox from bboxes of its children
+  function calcBBox(node, toBBox) {
+      distBBox(node, 0, node.children.length, toBBox, node);
+  }
+
+  // min bounding rectangle of node children from k to p-1
+  function distBBox(node, k, p, toBBox, destNode) {
+      if (!destNode) destNode = createNode(null);
+      destNode.minX = Infinity;
+      destNode.minY = Infinity;
+      destNode.maxX = -Infinity;
+      destNode.maxY = -Infinity;
+
+      for (let i = k; i < p; i++) {
+          const child = node.children[i];
+          extend(destNode, node.leaf ? toBBox(child) : child);
+      }
+
+      return destNode;
+  }
+
+  function extend(a, b) {
+      a.minX = Math.min(a.minX, b.minX);
+      a.minY = Math.min(a.minY, b.minY);
+      a.maxX = Math.max(a.maxX, b.maxX);
+      a.maxY = Math.max(a.maxY, b.maxY);
+      return a;
+  }
+
+  function compareNodeMinX(a, b) { return a.minX - b.minX; }
+  function compareNodeMinY(a, b) { return a.minY - b.minY; }
+
+  function bboxArea(a)   { return (a.maxX - a.minX) * (a.maxY - a.minY); }
+  function bboxMargin(a) { return (a.maxX - a.minX) + (a.maxY - a.minY); }
+
+  function enlargedArea(a, b) {
+      return (Math.max(b.maxX, a.maxX) - Math.min(b.minX, a.minX)) *
+             (Math.max(b.maxY, a.maxY) - Math.min(b.minY, a.minY));
+  }
+
+  function intersectionArea(a, b) {
+      const minX = Math.max(a.minX, b.minX);
+      const minY = Math.max(a.minY, b.minY);
+      const maxX = Math.min(a.maxX, b.maxX);
+      const maxY = Math.min(a.maxY, b.maxY);
+
+      return Math.max(0, maxX - minX) *
+             Math.max(0, maxY - minY);
+  }
+
+  function contains(a, b) {
+      return a.minX <= b.minX &&
+             a.minY <= b.minY &&
+             b.maxX <= a.maxX &&
+             b.maxY <= a.maxY;
+  }
+
+  function intersects(a, b) {
+      return b.minX <= a.maxX &&
+             b.minY <= a.maxY &&
+             b.maxX >= a.minX &&
+             b.maxY >= a.minY;
+  }
+
+  function createNode(children) {
+      return {
+          children,
+          height: 1,
+          leaf: true,
+          minX: Infinity,
+          minY: Infinity,
+          maxX: -Infinity,
+          maxY: -Infinity
+      };
+  }
+
+  // sort an array so that items come in groups of n unsorted items, with groups sorted between each other;
+  // combines selection algorithm with binary divide & conquer approach
+
+  function multiSelect(arr, left, right, n, compare) {
+      const stack = [left, right];
+
+      while (stack.length) {
+          right = stack.pop();
+          left = stack.pop();
+
+          if (right - left <= n) continue;
+
+          const mid = left + Math.ceil((right - left) / n / 2) * n;
+          quickselect(arr, mid, left, right, compare);
+
+          stack.push(left, mid, mid, right);
+      }
+  }
+
   /**
-   * This class is an implementation of a dependency Graph.
+   * R-Tree Data Structure
+   *
+   * R-Tree is a spatial data structure used for efficient indexing and querying
+   * of multi-dimensional objects, particularly in geometric and spatial applications.
+   *
+   * It organizes objects into a tree hierarchy, grouping nearby objects together
+   * in bounding boxes. Each node in the tree represents a bounding box that
+   * contains its child nodes or leaf objects. This hierarchical structure allows
+   * for faster spatial queries.
+   *
+   * @see https://en.wikipedia.org/wiki/R-tree
+   *
+   * Consider a 2D Space with four zones: A, B, C, D
+   * +--------------------------+
+   * |                          |
+   * |   +---+     +-------+    |
+   * |   | A |     |   B   |    |
+   * |   +---+     +-------+    |
+   * |                          |
+   * |                          |
+   * |          +---+           |
+   * |          | C |           |
+   * |          +---+           |
+   * |      +-----------+       |
+   * |      |     D     |       |
+   * |      +-----------+       |
+   * |                          |
+   * +--------------------------+
+   *
+   * It groups together zones that are spatially close into a minimum bounding box.
+   * For example, A and B are grouped together in rectangle R1, and C and D are grouped
+   * in R2.
+   *
+   * R0
+   * +--------------------------+
+   * |   R1                     |
+   * |   +-----------------+    |
+   * |   | A |     |   B   |    |
+   * |   +-----------------+    |
+   * |                          |
+   * |      R2                  |
+   * |      +---+---+---+       |
+   * |      |   | C |   |       |
+   * |      |   +---+   |       |
+   * |      +-----------+       |
+   * |      |     D     |       |
+   * |      +-----------+       |
+   * |                          |
+   * +--------------------------+
+   *
+   * The tree would look like this:
+   *          R0
+   *         /  \
+   *        /    \
+   *       R1     R2
+   *       |      |
+   *      A,B    C,D
+
+   * Choosing how to group the zones is crucial for the performance of the tree.
+   * Key considerations include avoiding excessive empty space coverage and minimizing overlap
+   * to reduce the number of subtrees processed during searches.
+   *
+   * Various heuristics exist for determining the optimal grouping strategy, such as "least enlargement"
+   * which prioritizes grouping nodes resulting in the smallest increase in bounding box size. In cases where
+   * the choice cannot be made based on this criterion due to the same enlargement for different groupings,
+   * we then evaluate "least area," aiming to minimize the overall area of bounding boxes.
+   *
+   * This implementation is tailored for spreadsheet use, indexing objects associated
+   * with a zone and a sheet.
+   *
+   * It uses the RBush library under the hood. One 2D RBush R-tree per sheet.
+   * @see https://github.com/mourner/rbush
+   */
+  class SpreadsheetRTree {
+      /**
+       * One 2D R-tree per sheet
+       */
+      rTrees = {};
+      /**
+       * Bulk-inserts the given items into the tree. Bulk insertion is usually ~2-3 times
+       * faster than inserting items one by one. After bulk loading (bulk insertion into
+       * an empty tree), subsequent query performance is also ~20-30% better.
+       */
+      constructor(items = []) {
+          const rangesPerSheet = {};
+          for (const item of items) {
+              const sheetId = item.boundingBox.sheetId;
+              if (!rangesPerSheet[sheetId]) {
+                  rangesPerSheet[sheetId] = [];
+              }
+              rangesPerSheet[sheetId].push(item);
+          }
+          for (const sheetId in rangesPerSheet) {
+              this.rTrees[sheetId] = new ZoneRBush();
+              this.rTrees[sheetId].load(rangesPerSheet[sheetId]); // bulk-insert
+          }
+      }
+      insert(item) {
+          const sheetId = item.boundingBox.sheetId;
+          if (!this.rTrees[sheetId]) {
+              this.rTrees[sheetId] = new ZoneRBush();
+          }
+          this.rTrees[sheetId].insert(item);
+      }
+      search({ zone, sheetId }) {
+          if (!this.rTrees[sheetId]) {
+              return [];
+          }
+          return this.rTrees[sheetId].search({
+              minX: zone.left,
+              minY: zone.top,
+              maxX: zone.right,
+              maxY: zone.bottom,
+          });
+      }
+      remove(item) {
+          const sheetId = item.boundingBox.sheetId;
+          if (!this.rTrees[sheetId]) {
+              return;
+          }
+          this.rTrees[sheetId].remove(item, deepEquals);
+      }
+  }
+  /**
+   * RBush extension to use zones as bounding boxes
+   */
+  class ZoneRBush extends RBush {
+      toBBox({ boundingBox }) {
+          const zone = boundingBox.zone;
+          return {
+              minX: zone.left,
+              minY: zone.top,
+              maxX: zone.right,
+              maxY: zone.bottom,
+          };
+      }
+      compareMinX(a, b) {
+          return a.boundingBox.zone.left - b.boundingBox.zone.left;
+      }
+      compareMinY(a, b) {
+          return a.boundingBox.zone.top - b.boundingBox.zone.top;
+      }
+  }
+
+  /**
+   * Implementation of a dependency Graph.
    * The graph is used to evaluate the cells in the correct
    * order, and should be updated each time a cell's content is modified
    *
+   * It uses an R-Tree data structure to efficiently find dependent cells.
    */
   class FormulaDependencyGraph {
-      /**
-       * Internal structure:
-       * - key: a cell position (encoded as an integer)
-       * - value: a set of cell positions that depends on the key
-       *
-       * Given
-       * - A1:"= B1 + SQRT(B2)"
-       * - C1:"= B1";
-       * - C2:"= C1"
-       *
-       * we will have something like:
-       * - B1 ---> (A1, C1)   meaning A1 and C1 depends on B1
-       * - B2 ---> (A1)       meaning A1 depends on B2
-       * - C1 ---> (C2)       meaning C2 depends on C1
-       */
-      inverseDependencies = new Map();
+      encoder;
       dependencies = new Map();
+      rTree;
+      constructor(encoder, data = []) {
+          this.encoder = encoder;
+          this.rTree = new SpreadsheetRTree(data);
+      }
       removeAllDependencies(formulaPositionId) {
-          const dependencies = this.dependencies.get(formulaPositionId);
-          if (!dependencies) {
+          const ranges = this.dependencies.get(formulaPositionId);
+          if (!ranges) {
               return;
           }
-          for (const dependency of dependencies) {
-              this.inverseDependencies.get(dependency)?.delete(formulaPositionId);
+          for (const range of ranges) {
+              this.rTree.remove(range);
           }
           this.dependencies.delete(formulaPositionId);
       }
       addDependencies(formulaPositionId, dependencies) {
-          for (const dependency of dependencies) {
-              const inverseDependencies = this.inverseDependencies.get(dependency);
-              if (inverseDependencies) {
-                  inverseDependencies.add(formulaPositionId);
-              }
-              else {
-                  this.inverseDependencies.set(dependency, new Set([formulaPositionId]));
-              }
+          const rTreeItems = dependencies.map(({ sheetId, zone }) => ({
+              data: formulaPositionId,
+              boundingBox: {
+                  zone,
+                  sheetId,
+              },
+          }));
+          for (const item of rTreeItems) {
+              this.rTree.insert(item);
           }
           const existingDependencies = this.dependencies.get(formulaPositionId);
           if (existingDependencies) {
-              existingDependencies.push(...dependencies);
+              existingDependencies.push(...rTreeItems);
           }
           else {
-              this.dependencies.set(formulaPositionId, dependencies);
+              this.dependencies.set(formulaPositionId, rTreeItems);
           }
       }
       /**
@@ -40118,20 +41101,20 @@
        * in the correct order they should be evaluated.
        * This is called a topological ordering (excluding cycles)
        */
-      getCellsDependingOn(positionIds) {
+      getCellsDependingOn(ranges) {
           const visited = new JetSet();
-          const queue = Array.from(positionIds).reverse();
+          const queue = Array.from(ranges).reverse();
           while (queue.length > 0) {
-              const node = queue.pop();
-              visited.add(node);
-              const adjacentNodes = this.inverseDependencies.get(node) || new Set();
-              for (const adjacentNode of adjacentNodes) {
-                  if (!visited.has(adjacentNode)) {
-                      queue.push(adjacentNode);
+              const range = queue.pop();
+              visited.add(...this.encoder.encodeBoundingBox(range));
+              const impactedPositionIds = this.rTree.search(range).map((dep) => dep.data);
+              for (const positionId of impactedPositionIds) {
+                  if (!visited.has(positionId)) {
+                      queue.push(this.encoder.decodeToBoundingBox(positionId));
                   }
               }
           }
-          visited.delete(...positionIds);
+          visited.delete(...ranges.flatMap((r) => this.encoder.encodeBoundingBox(r)));
           return visited;
       }
   }
@@ -40219,9 +41202,9 @@
       context;
       getters;
       compilationParams;
-      positionEncoder = new PositionBitsEncoder();
+      encoder = new PositionBitsEncoder();
       evaluatedCells = new Map();
-      formulaDependencies = lazy(new FormulaDependencyGraph());
+      formulaDependencies = lazy(new FormulaDependencyGraph(this.encoder));
       blockedArrayFormulas = new Set();
       spreadingRelations = new SpreadingRelation();
       constructor(context, getters) {
@@ -40230,23 +41213,23 @@
           this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
       }
       getEvaluatedCell(position) {
-          return (this.evaluatedCells.get(this.encodePosition(position)) ||
+          return (this.evaluatedCells.get(this.encoder.encode(position)) ||
               createEvaluatedCell("", { locale: this.getters.getLocale() }));
       }
       getSpreadPositionsOf(position) {
-          const positionId = this.encodePosition(position);
+          const positionId = this.encoder.encode(position);
           if (!this.spreadingRelations.isArrayFormula(positionId)) {
               return [];
           }
-          return Array.from(this.spreadingRelations.getArrayResultPositionIds(positionId)).map(this.decodePosition.bind(this));
+          return Array.from(this.spreadingRelations.getArrayResultPositionIds(positionId)).map((positionId) => this.encoder.decode(positionId));
       }
       getArrayFormulaSpreadingOn(position) {
-          const positionId = this.encodePosition(position);
+          const positionId = this.encoder.encode(position);
           const formulaPosition = this.getArrayFormulaSpreadingOnId(positionId);
-          return formulaPosition !== undefined ? this.decodePosition(formulaPosition) : undefined;
+          return formulaPosition !== undefined ? this.encoder.decode(formulaPosition) : undefined;
       }
       getEvaluatedPositions() {
-          return [...this.evaluatedCells.keys()].map(this.decodePosition.bind(this));
+          return [...this.evaluatedCells.keys()].map((p) => this.encoder.decode(p));
       }
       getArrayFormulaSpreadingOnId(positionId) {
           if (!this.spreadingRelations.hasArrayFormulaResult(positionId)) {
@@ -40256,7 +41239,7 @@
           return Array.from(arrayFormulas).find((positionId) => !this.blockedArrayFormulas.has(positionId));
       }
       updateDependencies(position) {
-          const positionId = this.encodePosition(position);
+          const positionId = this.encoder.encode(position);
           this.formulaDependencies().removeAllDependencies(positionId);
           const dependencies = this.getDirectDependencies(positionId);
           this.formulaDependencies().addDependencies(positionId, dependencies);
@@ -40266,12 +41249,12 @@
           this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
       }
       evaluateCells(positions) {
-          const cells = positions.map(this.encodePosition.bind(this));
+          const cells = positions.map((p) => this.encoder.encode(p));
           const cellsToCompute = new JetSet(cells);
-          const arrayFormulas = this.getArrayFormulasImpactedByChangesOf(cells);
+          const arrayFormulasPositionIds = this.getArrayFormulasImpactedByChangesOf(cells);
           cellsToCompute.add(...this.getCellsDependingOn(cells));
-          cellsToCompute.add(...arrayFormulas);
-          cellsToCompute.add(...this.getCellsDependingOn(arrayFormulas));
+          cellsToCompute.add(...arrayFormulasPositionIds);
+          cellsToCompute.add(...this.getCellsDependingOn(arrayFormulasPositionIds));
           this.evaluate(cellsToCompute);
       }
       getArrayFormulasImpactedByChangesOf(positionIds) {
@@ -40294,12 +41277,14 @@
           this.blockedArrayFormulas = new Set();
           this.spreadingRelations = new SpreadingRelation();
           this.formulaDependencies = lazy(() => {
-              const dependencyGraph = new FormulaDependencyGraph();
-              for (const positionId of this.getAllCells()) {
-                  const dependencies = this.getDirectDependencies(positionId);
-                  dependencyGraph.addDependencies(positionId, dependencies);
-              }
-              return dependencyGraph;
+              const dependencies = [...this.getAllCells()].flatMap((positionId) => this.getDirectDependencies(positionId).map((range) => ({
+                  data: positionId,
+                  boundingBox: {
+                      zone: range.zone,
+                      sheetId: range.sheetId,
+                  },
+              })));
+              return new FormulaDependencyGraph(this.encoder, dependencies);
           });
       }
       evaluateAllCells() {
@@ -40321,7 +41306,7 @@
           for (const sheetId of this.getters.getSheetIds()) {
               const cellIds = this.getters.getCells(sheetId);
               for (const cellId in cellIds) {
-                  positionIds.add(this.encodePosition(this.getters.getCellPosition(cellId)));
+                  positionIds.add(this.encoder.encode(this.getters.getCellPosition(cellId)));
               }
           }
           return positionIds;
@@ -40366,7 +41351,7 @@
           if (!this.blockedArrayFormulas.has(positionId)) {
               this.invalidateSpreading(positionId);
           }
-          const cellPosition = this.decodePosition(positionId);
+          const cellPosition = this.encoder.decode(positionId);
           const cell = this.getters.getCell(cellPosition);
           if (cell === undefined) {
               return createEvaluatedCell("", { locale: this.getters.getLocale() });
@@ -40389,7 +41374,7 @@
           }
       }
       computeAndSave(position) {
-          const positionId = this.encodePosition(position);
+          const positionId = this.encoder.encode(position);
           const evaluatedCell = this.computeCell(positionId);
           if (!this.evaluatedCells.has(positionId)) {
               this.setEvaluatedCell(positionId, evaluatedCell);
@@ -40444,15 +41429,15 @@
           throw new Error(_t("Result couldn't be automatically expanded. Please insert more columns and rows."));
       }
       updateSpreadRelation({ sheetId, col, row, }) {
-          const arrayFormulaPositionId = this.encodePosition({ sheetId, col, row });
+          const arrayFormulaPositionId = this.encoder.encode({ sheetId, col, row });
           return (i, j) => {
               const position = { sheetId, col: i + col, row: j + row };
-              const resultPositionId = this.encodePosition(position);
+              const resultPositionId = this.encoder.encode(position);
               this.spreadingRelations.addRelation({ resultPositionId, arrayFormulaPositionId });
           };
       }
       checkCollision({ sheetId, col, row }) {
-          const formulaPositionId = this.encodePosition({ sheetId, col, row });
+          const formulaPositionId = this.encoder.encode({ sheetId, col, row });
           return (i, j) => {
               const position = { sheetId: sheetId, col: i + col, row: j + row };
               const rawCell = this.getters.getCell(position);
@@ -40473,7 +41458,7 @@
                   format: format || matrixResult[i][j]?.format,
                   locale: this.getters.getLocale(),
               });
-              const positionId = this.encodePosition(position);
+              const positionId = this.encoder.encode(position);
               this.setEvaluatedCell(positionId, evaluatedCell);
               // check if formula dependencies present in the spread zone
               // if so, they need to be recomputed
@@ -40505,29 +41490,17 @@
           if (!cell?.isFormula) {
               return [];
           }
-          const dependencies = [];
-          for (const range of cell.compiledFormula.dependencies) {
-              if (range.invalidSheetName || range.invalidXc) {
-                  continue;
-              }
-              const sheetId = range.sheetId;
-              forEachPositionsInZone(range.zone, (col, row) => {
-                  dependencies.push(this.encodePosition({ sheetId, col, row }));
-              });
-          }
-          return dependencies;
+          return cell.compiledFormula.dependencies;
       }
       getCellsDependingOn(positionIds) {
-          return this.formulaDependencies().getCellsDependingOn(positionIds);
+          const ranges = [];
+          for (const positionId of positionIds) {
+              ranges.push(this.encoder.decodeToBoundingBox(positionId));
+          }
+          return this.formulaDependencies().getCellsDependingOn(ranges);
       }
       getCell(positionId) {
-          return this.getters.getCell(this.decodePosition(positionId));
-      }
-      encodePosition(position) {
-          return this.positionEncoder.encode(position);
-      }
-      decodePosition(positionId) {
-          return this.positionEncoder.decode(positionId);
+          return this.getters.getCell(this.encoder.decode(positionId));
       }
   }
   function forEachSpreadPositionInMatrix(nbColumns, nbRows, callback) {
@@ -40583,6 +41556,13 @@
       encode({ sheetId, col, row }) {
           return (this.encodeSheet(sheetId) << 42n) | (BigInt(col) << 21n) | BigInt(row);
       }
+      encodeBoundingBox({ sheetId, zone }) {
+          const positions = [];
+          forEachPositionsInZone(zone, (col, row) => {
+              positions.push(this.encode({ sheetId, col, row }));
+          });
+          return positions;
+      }
       decode(id) {
           // keep only the last 21 bits by AND-ing the bit sequence with 21 ones
           const row = Number(id & 2097151n);
@@ -40590,6 +41570,10 @@
           const sheetId = this.decodeSheet(id >> 42n);
           return { sheetId, col, row };
       }
+      decodeToBoundingBox(id) {
+          const { sheetId, col, row } = this.decode(id);
+          return { sheetId, zone: { left: col, top: row, right: col, bottom: row } };
+      }
       encodeSheet(sheetId) {
           const sheetKey = this.sheetMapping[sheetId];
           if (sheetKey === undefined) {
@@ -40772,7 +41756,12 @@
       // Getters
       // ---------------------------------------------------------------------------
       evaluateFormula(sheetId, formulaString) {
-          return this.evaluator.evaluateFormula(sheetId, formulaString);
+          try {
+              return this.evaluator.evaluateFormula(sheetId, formulaString);
+          }
+          catch (error) {
+              return error instanceof EvaluationError ? error.errorType : CellErrorType.GenericError;
+          }
       }
       /**
        * Return the value of each cell in the range as they are displayed in the grid.
@@ -41041,7 +42030,7 @@
   }
 
   class EvaluationChartPlugin extends UIPlugin {
-      static getters = ["getChartRuntime", "getBackgroundOfSingleCellChart"];
+      static getters = ["getChartRuntime", "getStyleOfSingleCellChart"];
       charts = {};
       createRuntimeChart = chartRuntimeFactory(this.getters);
       handle(cmd) {
@@ -41079,25 +42068,26 @@
           return this.charts[figureId];
       }
       /**
-       * Get the background color of a chart based on the color of the first cell of the main range
-       * of the chart. In order of priority, it will return :
-       *
-       *  - the chart background color if one is defined
-       *  - the fill color of the cell if one is defined
-       *  - the fill color of the cell from conditional formats if one is defined
-       *  - the default chart color if no other color is defined
+       * Get the background and textColor of a chart based on the color of the first cell of the main range of the chart.
        */
-      getBackgroundOfSingleCellChart(chartBackground, mainRange) {
+      getStyleOfSingleCellChart(chartBackground, mainRange) {
           if (chartBackground)
-              return chartBackground;
+              return { background: chartBackground, fontColor: chartFontColor(chartBackground) };
           if (!mainRange) {
-              return BACKGROUND_CHART_COLOR;
+              return {
+                  background: BACKGROUND_CHART_COLOR,
+                  fontColor: chartFontColor(BACKGROUND_CHART_COLOR),
+              };
           }
           const col = mainRange.zone.left;
           const row = mainRange.zone.top;
           const sheetId = mainRange.sheetId;
           const style = this.getters.getCellComputedStyle({ sheetId, col, row });
-          return style.fillColor || BACKGROUND_CHART_COLOR;
+          const background = style.fillColor || BACKGROUND_CHART_COLOR;
+          return {
+              background,
+              fontColor: style.textColor || chartFontColor(background),
+          };
       }
       exportForExcel(data) {
           for (const sheet of data.sheets) {
@@ -41208,45 +42198,40 @@
       getComputedStyles(sheetId) {
           const computedStyle = {};
           for (let cf of this.getters.getConditionalFormats(sheetId).reverse()) {
-              try {
-                  switch (cf.rule.type) {
-                      case "ColorScaleRule":
-                          for (let range of cf.ranges) {
-                              this.applyColorScale(sheetId, range, cf.rule, computedStyle);
-                          }
-                          break;
-                      case "CellIsRule":
-                          const formulas = cf.rule.values.map((value) => value.startsWith("=") ? compile(value) : undefined);
-                          for (let ref of cf.ranges) {
-                              const zone = this.getters.getRangeFromSheetXC(sheetId, ref).zone;
-                              for (let row = zone.top; row <= zone.bottom; row++) {
-                                  for (let col = zone.left; col <= zone.right; col++) {
-                                      const predicate = this.rulePredicate[cf.rule.type];
-                                      const target = { sheetId, col, row };
-                                      const values = cf.rule.values.map((value, i) => {
-                                          const compiledFormula = formulas[i];
-                                          if (compiledFormula) {
-                                              return this.getters.getTranslatedCellFormula(sheetId, col - zone.left, row - zone.top, {
-                                                  ...compiledFormula,
-                                                  dependencies: compiledFormula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)),
-                                              });
-                                          }
-                                          return value;
-                                      });
-                                      if (predicate && predicate(target, { ...cf.rule, values })) {
-                                          if (!computedStyle[col])
-                                              computedStyle[col] = [];
-                                          // we must combine all the properties of all the CF rules applied to the given cell
-                                          computedStyle[col][row] = Object.assign(computedStyle[col]?.[row] || {}, cf.rule.style);
+              switch (cf.rule.type) {
+                  case "ColorScaleRule":
+                      for (let range of cf.ranges) {
+                          this.applyColorScale(sheetId, range, cf.rule, computedStyle);
+                      }
+                      break;
+                  case "CellIsRule":
+                      const formulas = cf.rule.values.map((value) => value.startsWith("=") ? compile(value) : undefined);
+                      for (let ref of cf.ranges) {
+                          const zone = this.getters.getRangeFromSheetXC(sheetId, ref).zone;
+                          for (let row = zone.top; row <= zone.bottom; row++) {
+                              for (let col = zone.left; col <= zone.right; col++) {
+                                  const predicate = this.rulePredicate[cf.rule.type];
+                                  const target = { sheetId, col, row };
+                                  const values = cf.rule.values.map((value, i) => {
+                                      const compiledFormula = formulas[i];
+                                      if (compiledFormula) {
+                                          return this.getters.getTranslatedCellFormula(sheetId, col - zone.left, row - zone.top, {
+                                              ...compiledFormula,
+                                              dependencies: compiledFormula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)),
+                                          });
                                       }
+                                      return value;
+                                  });
+                                  if (predicate && predicate(target, { ...cf.rule, values })) {
+                                      if (!computedStyle[col])
+                                          computedStyle[col] = [];
+                                      // we must combine all the properties of all the CF rules applied to the given cell
+                                      computedStyle[col][row] = Object.assign(computedStyle[col]?.[row] || {}, cf.rule.style);
                                   }
                               }
                           }
-                          break;
-                  }
-              }
-              catch (_) {
-                  // we don't care about the errors within the evaluation of a rule
+                      }
+                      break;
               }
           }
           return computedStyle;
@@ -41857,11 +42842,6 @@
                       return "Success" /* CommandResult.Success */;
                   }
                   return "InvalidAutofillSelection" /* CommandResult.InvalidAutofillSelection */;
-              case "AUTOFILL_AUTO":
-                  const zone = this.getters.getSelectedZone();
-                  return zone.top === zone.bottom
-                      ? "Success" /* CommandResult.Success */
-                      : "CancelledForUnknownReason" /* CommandResult.CancelledForUnknownReason */;
           }
           return "Success" /* CommandResult.Success */;
       }
@@ -42018,7 +42998,7 @@
           let row = zone.bottom;
           if (col > 0) {
               let leftPosition = { sheetId, col: col - 1, row };
-              while (this.getters.getEvaluatedCell(leftPosition).type !== CellValueType.empty ||
+              while (this.getters.getCorrespondingFormulaCell(leftPosition) ||
                   this.getters.getCell(leftPosition)?.content) {
                   row += 1;
                   leftPosition = { sheetId, col: col - 1, row };
@@ -42028,7 +43008,7 @@
               col = zone.right;
               if (col <= this.getters.getNumberCols(sheetId)) {
                   let rightPosition = { sheetId, col: col + 1, row };
-                  while (this.getters.getEvaluatedCell(rightPosition).type !== CellValueType.empty ||
+                  while (this.getters.getCorrespondingFormulaCell(rightPosition) ||
                       this.getters.getCell(rightPosition)?.content) {
                       row += 1;
                       rightPosition = { sheetId, col: col + 1, row };
@@ -43623,7 +44603,7 @@
       isPasteAllowed(target, clipboardOption) {
           const sheetId = this.getters.getActiveSheetId();
           if (this.operation === "CUT" && clipboardOption?.pasteOption !== undefined) {
-              // cannot paste only format or only value if the previous operation is a CUT
+              // cannot paste only format or as value if the previous operation is a CUT
               return "WrongPasteOption" /* CommandResult.WrongPasteOption */;
           }
           if (target.length > 1) {
@@ -43805,7 +44785,7 @@
           // This condition is used to determine if we have to paste the CF or not.
           // We have to do it when the command handled is "PASTE", not "INSERT_CELL"
           // or "DELETE_CELL". So, the state should be the local state
-          const shouldPasteCF = clipboardOptions?.pasteOption !== "onlyValue" && clipboardOptions?.shouldPasteCF;
+          const shouldPasteCF = clipboardOptions?.pasteOption !== "asValue" && clipboardOptions?.shouldPasteCF;
           const shouldPasteDV = !clipboardOptions?.pasteOption;
           const sheetId = this.getters.getActiveSheetId();
           // first, add missing cols/rows if needed
@@ -43841,10 +44821,11 @@
       pasteCell(origin, target, operation, clipboardOption) {
           const { sheetId, col, row } = target;
           const targetCell = this.getters.getEvaluatedCell(target);
-          if (clipboardOption?.pasteOption === "onlyValue") {
+          const originFormat = origin.cell?.format ?? origin.evaluatedCell.format;
+          if (clipboardOption?.pasteOption === "asValue") {
               const locale = this.getters.getLocale();
               const content = formatValue(origin.evaluatedCell.value, { locale });
-              this.dispatch("UPDATE_CELL", { ...target, content });
+              this.dispatch("UPDATE_CELL", { ...target, content, format: originFormat });
               return;
           }
           const targetBorders = this.getters.getCellBorder(target);
@@ -43860,7 +44841,7 @@
               this.dispatch("UPDATE_CELL", {
                   ...target,
                   style: origin.cell?.style ?? null,
-                  format: origin.cell?.format ?? origin.evaluatedCell.format ?? targetCell.format,
+                  format: originFormat ?? targetCell.format,
               });
               return;
           }
@@ -50063,6 +51044,20 @@
 `;
   class RippleEffect extends owl.Component {
       static template = "o-spreadsheet-RippleEffect";
+      static props = {
+          x: String,
+          y: String,
+          color: String,
+          opacity: Number,
+          duration: Number,
+          width: Number,
+          height: Number,
+          offsetY: Number,
+          offsetX: Number,
+          allowOverflow: Boolean,
+          onAnimationEnd: Function,
+          style: String,
+      };
       rippleRef = owl.useRef("ripple");
       setup() {
           let animation = undefined;
@@ -50098,22 +51093,23 @@
           });
       }
   }
-  RippleEffect.props = {
-      x: String,
-      y: String,
-      color: String,
-      opacity: Number,
-      duration: Number,
-      width: Number,
-      height: Number,
-      offsetY: Number,
-      offsetX: Number,
-      allowOverflow: Boolean,
-      onAnimationEnd: Function,
-      style: String,
-  };
   class Ripple extends owl.Component {
       static template = "o-spreadsheet-Ripple";
+      static props = {
+          color: { type: String, optional: true },
+          opacity: { type: Number, optional: true },
+          duration: { type: Number, optional: true },
+          ignoreClickPosition: { type: Boolean, optional: true },
+          width: { type: Number, optional: true },
+          height: { type: Number, optional: true },
+          offsetY: { type: Number, optional: true },
+          offsetX: { type: Number, optional: true },
+          allowOverflow: { type: Boolean, optional: true },
+          enabled: { type: Boolean, optional: true },
+          onAnimationEnd: { type: Function, optional: true },
+          slots: Object,
+          class: { type: String, optional: true },
+      };
       static components = { RippleEffect };
       static defaultProps = {
           color: "#aaaaaa",
@@ -50199,21 +51195,6 @@
           };
       }
   }
-  Ripple.props = {
-      color: { type: String, optional: true },
-      opacity: { type: Number, optional: true },
-      duration: { type: Number, optional: true },
-      ignoreClickPosition: { type: Boolean, optional: true },
-      width: { type: Number, optional: true },
-      height: { type: Number, optional: true },
-      offsetY: { type: Number, optional: true },
-      offsetX: { type: Number, optional: true },
-      allowOverflow: { type: Boolean, optional: true },
-      enabled: { type: Boolean, optional: true },
-      onAnimationEnd: { type: Function, optional: true },
-      slots: Object,
-      class: { type: String, optional: true },
-  };
 
   function interactiveRenameSheet(env, sheetId, name, errorCallback) {
       const result = env.model.dispatch("RENAME_SHEET", { sheetId, name });
@@ -50271,6 +51252,12 @@
 `;
   class BottomBarSheet extends owl.Component {
       static template = "o-spreadsheet-BottomBarSheet";
+      static props = {
+          sheetId: String,
+          openContextMenu: Function,
+          style: { type: String, optional: true },
+          onMouseDown: { type: Function, optional: true },
+      };
       static components = { Ripple };
       static defaultProps = {
           onMouseDown: () => { },
@@ -50392,12 +51379,6 @@
           return this.env.model.getters.getSheetName(this.props.sheetId);
       }
   }
-  BottomBarSheet.props = {
-      sheetId: String,
-      openContextMenu: Function,
-      style: { type: String, optional: true },
-      onMouseDown: { type: Function, optional: true },
-  };
 
   // -----------------------------------------------------------------------------
   // SpreadSheet
@@ -50415,6 +51396,10 @@
 `;
   class BottomBarStatistic extends owl.Component {
       static template = "o-spreadsheet-BottomBarStatisic";
+      static props = {
+          openContextMenu: Function,
+          closeContextMenu: Function,
+      };
       static components = { Ripple };
       selectedStatisticFn = "";
       statisticFnResults = {};
@@ -50461,10 +51446,6 @@
           return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
       }
   }
-  BottomBarStatistic.props = {
-      openContextMenu: Function,
-      closeContextMenu: Function,
-  };
 
   // -----------------------------------------------------------------------------
   // SpreadSheet
@@ -50515,6 +51496,9 @@
 `;
   class BottomBar extends owl.Component {
       static template = "o-spreadsheet-BottomBar";
+      static props = {
+          onClick: Function,
+      };
       static components = { Menu, Ripple, BottomBarSheet, BottomBarStatistic };
       bottomBarRef = owl.useRef("bottomBar");
       sheetListRef = owl.useRef("sheetList");
@@ -50700,9 +51684,6 @@
           return this.sheetListRef.el.scrollWidth - this.sheetListRef.el.clientWidth;
       }
   }
-  BottomBar.props = {
-      onClick: Function,
-  };
 
   css /* scss */ `
   .o-dashboard-clickable-cell {
@@ -50713,6 +51694,7 @@
   let tKey = 1;
   class SpreadsheetDashboard extends owl.Component {
       static template = "o-spreadsheet-SpreadsheetDashboard";
+      static props = {};
       static components = {
           GridOverlay,
           GridPopover,
@@ -50831,7 +51813,6 @@
           return { ...this.canvasPosition, ...this.env.model.getters.getSheetViewDimensionWithHeaders() };
       }
   }
-  SpreadsheetDashboard.props = {};
 
   css /* scss */ `
   .o-header-group {
@@ -50859,6 +51840,11 @@
 `;
   class AbstractHeaderGroup extends owl.Component {
       static template = "o-spreadsheet-HeaderGroup";
+      static props = {
+          group: Object,
+          layerOffset: Number,
+          openContextMenu: Function,
+      };
       toggleGroup() {
           const sheetId = this.env.model.getters.getActiveSheetId();
           const { start, end } = this.props.group;
@@ -50895,11 +51881,6 @@
           this.props.openContextMenu(position, menuItems);
       }
   }
-  AbstractHeaderGroup.props = {
-      group: Object,
-      layerOffset: Number,
-      openContextMenu: Function,
-  };
   class RowGroup extends AbstractHeaderGroup {
       dimension = "ROW";
       get groupBorderStyle() {
@@ -51030,6 +52011,10 @@
 `;
   class HeaderGroupContainer extends owl.Component {
       static template = "o-spreadsheet-HeaderGroupContainer";
+      static props = {
+          dimension: String,
+          layers: Array,
+      };
       static components = { RowGroup, ColGroup, Menu };
       menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       getLayerOffset(layerIndex) {
@@ -51092,10 +52077,6 @@
           }
       }
   }
-  HeaderGroupContainer.props = {
-      dimension: String,
-      layers: Array,
-  };
 
   css /* scss */ `
   .o-sidePanel {
@@ -51206,14 +52187,6 @@
       text-align: left;
     }
 
-    .o-checkbox {
-      display: flex;
-      justify-items: center;
-      input {
-        margin-right: 5px;
-      }
-    }
-
     .o-inflection {
       table {
         table-layout: fixed;
@@ -51254,6 +52227,11 @@
 `;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
+      static props = {
+          component: String,
+          panelProps: { type: Object, optional: true },
+          onCloseSidePanel: Function,
+      };
       state;
       setup() {
           this.state = owl.useState({
@@ -51267,11 +52245,6 @@
               : this.state.panel.title;
       }
   }
-  SidePanel.props = {
-      component: String,
-      panelProps: { type: Object, optional: true },
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-menu-item-button {
@@ -51289,6 +52262,13 @@
 `;
   class ActionButton extends owl.Component {
       static template = "o-spreadsheet-ActionButton";
+      static props = {
+          action: Object,
+          hasTriangleDownIcon: { type: Boolean, optional: true },
+          selectedColor: { type: String, optional: true },
+          class: { type: String, optional: true },
+          onClick: { type: Function, optional: true },
+      };
       actionButton = createAction(this.props.action);
       setup() {
           owl.onWillUpdateProps((nextProps) => {
@@ -51331,13 +52311,6 @@
           return "";
       }
   }
-  ActionButton.props = {
-      action: Object,
-      hasTriangleDownIcon: { type: Boolean, optional: true },
-      selectedColor: { type: String, optional: true },
-      class: { type: String, optional: true },
-      onClick: { type: Function, optional: true },
-  };
 
   /**
    * List the available borders positions and the corresponding icons.
@@ -51434,6 +52407,17 @@
 `;
   class BorderEditor extends owl.Component {
       static template = "o-spreadsheet-BorderEditor";
+      static props = {
+          class: { type: String, optional: true },
+          currentBorderColor: { type: String, optional: false },
+          currentBorderStyle: { type: String, optional: false },
+          currentBorderPosition: { type: String, optional: true },
+          onBorderColorPicked: Function,
+          onBorderStylePicked: Function,
+          onBorderPositionPicked: Function,
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+      };
       static components = { ColorPickerWidget, Popover };
       BORDER_POSITIONS = BORDER_POSITIONS;
       lineStyleButtonRef = owl.useRef("lineStyleButton");
@@ -51489,20 +52473,16 @@
           };
       }
   }
-  BorderEditor.props = {
-      class: { type: String, optional: true },
-      currentBorderColor: { type: String, optional: false },
-      currentBorderStyle: { type: String, optional: false },
-      currentBorderPosition: { type: String, optional: true },
-      onBorderColorPicked: Function,
-      onBorderStylePicked: Function,
-      onBorderPositionPicked: Function,
-      maxHeight: { type: Number, optional: true },
-      anchorRect: Object,
-  };
 
   class BorderEditorWidget extends owl.Component {
       static template = "o-spreadsheet-BorderEditorWidget";
+      static props = {
+          toggleBorderEditor: Function,
+          showBorderEditor: Boolean,
+          disabled: { type: Boolean, optional: true },
+          dropdownMaxHeight: { type: Number, optional: true },
+          class: { type: String, optional: true },
+      };
       static components = { BorderEditor };
       borderEditorButtonRef = owl.useRef("borderEditorButton");
       state = owl.useState({
@@ -51547,13 +52527,6 @@
           });
       }
   }
-  BorderEditorWidget.props = {
-      toggleBorderEditor: Function,
-      showBorderEditor: Boolean,
-      disabled: { type: Boolean, optional: true },
-      dropdownMaxHeight: { type: Number, optional: true },
-      class: { type: String, optional: true },
-  };
 
   const COMPOSER_MAX_HEIGHT = 100;
   /* svg free of use from https://uxwing.com/formula-fx-icon/ */
@@ -51582,6 +52555,12 @@
 `;
   class TopBarComposer extends owl.Component {
       static template = "o-spreadsheet-TopBarComposer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerContentFocused: Function,
+      };
       static components = { Composer };
       get composerStyle() {
           const style = {
@@ -51604,10 +52583,6 @@
           });
       }
   }
-  TopBarComposer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerContentFocused: Function,
-  };
 
   css /* scss */ `
   .o-font-size-editor {
@@ -51636,6 +52611,11 @@
 `;
   class FontSizeEditor extends owl.Component {
       static template = "o-spreadsheet-FontSizeEditor";
+      static props = {
+          onToggle: Function,
+          dropdownStyle: String,
+          class: String,
+      };
       static components = {};
       fontSizes = FONT_SIZES;
       dropdown = owl.useState({ isOpen: false });
@@ -51692,14 +52672,12 @@
           }
       }
   }
-  FontSizeEditor.props = {
-      onToggle: Function,
-      dropdownStyle: String,
-      class: String,
-  };
 
   class PaintFormatButton extends owl.Component {
       static template = "o-spreadsheet-PaintFormatButton";
+      static props = {
+          class: { type: String, optional: true },
+      };
       get isActive() {
           return this.env.model.getters.isPaintingFormat();
       }
@@ -51715,9 +52693,6 @@
           }
       }
   }
-  PaintFormatButton.props = {
-      class: { type: String, optional: true },
-  };
 
   // -----------------------------------------------------------------------------
   // TopBar
@@ -51810,6 +52785,12 @@
 `;
   class TopBar extends owl.Component {
       static template = "o-spreadsheet-TopBar";
+      static props = {
+          onClick: Function,
+          focusComposer: String,
+          onComposerContentFocused: Function,
+          dropdownMaxHeight: Number,
+      };
       get dropdownStyle() {
           return `max-height:${this.props.dropdownMaxHeight}px`;
       }
@@ -51926,12 +52907,6 @@
           this.onClick();
       }
   }
-  TopBar.props = {
-      onClick: Function,
-      focusComposer: String,
-      onComposerContentFocused: Function,
-      dropdownMaxHeight: Number,
-  };
 
   function instantiateClipboard() {
       return new WebClipboardWrapper(navigator.clipboard);
@@ -52164,6 +53139,9 @@
 `;
   class Spreadsheet extends owl.Component {
       static template = "o-spreadsheet-Spreadsheet";
+      static props = {
+          model: Object,
+      };
       static components = {
           TopBar,
           Grid,
@@ -52308,7 +53286,7 @@
       }
       onKeydown(ev) {
           let keyDownString = "";
-          if (ev.ctrlKey || ev.metaKey) {
+          if (isCtrlKey(ev)) {
               keyDownString += "CTRL+";
           }
           keyDownString += ev.key.toUpperCase();
@@ -52376,9 +53354,6 @@
           return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
       }
   }
-  Spreadsheet.props = {
-      model: Object,
-  };
 
   class LocalTransportService {
       listeners = [];
@@ -55045,7 +56020,8 @@
                   }
                   else if (cell.content && cell.content !== "") {
                       const isTableHeader = isCellTableHeader(c, r, sheet);
-                      ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader));
+                      const isPlainText = !!(cell.format && data.formats[cell.format] === PLAIN_TEXT_FORMAT);
+                      ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader || isPlainText));
                   }
                   attributes.push(...additionalAttrs);
                   cellNodes.push(escapeXml /*xml*/ `
@@ -55974,6 +56950,7 @@
       colorToRGBA,
       positionToZone,
       isDefined: isDefined$1,
+      isMatrix,
       lazy,
       genericRepeat,
       createAction,
@@ -56058,9 +57035,9 @@
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.1.0-alpha.5";
-  __info__.date = "2023-12-05T09:51:40.034Z";
-  __info__.hash = "c2823eb";
+  __info__.version = "17.1.0-alpha.7";
+  __info__.date = "2024-01-12T13:45:00.505Z";
+  __info__.hash = "cbce1ed";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);