@odoo/o-spreadsheet 18.2.0-alpha.4 → 18.2.0-alpha.6

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.2.0-alpha.4
- * @date 2025-01-29T06:30:12.773Z
- * @hash 6838c26
+ * @version 18.2.0-alpha.6
+ * @date 2025-02-05T06:50:47.008Z
+ * @hash dae9ab2
  */
 
 (function (exports, owl) {
@@ -3360,11 +3360,11 @@
    * number from the point of view of the isNumber function.
    */
   function parseNumber(str, locale) {
+      // remove invaluable characters
+      str = str.replace(getInvaluableSymbolsRegexp(locale), "");
       if (locale.decimalSeparator !== ".") {
           str = str.replace(locale.decimalSeparator, ".");
       }
-      // remove invaluable characters
-      str = str.replace(getInvaluableSymbolsRegexp(locale), "");
       let n = Number(str);
       if (isNaN(n) && str.includes("%")) {
           n = Number(str.split("%")[0]);
@@ -18633,19 +18633,20 @@ stores.inject(MyMetaStore, storeInstance);
       description: _t("Horizontal lookup"),
       args: [
           arg("search_key (string, number, boolean)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
-          arg("range (range)", _t("The range to consider for the search. The first row in the range is searched for the key specified in search_key.")),
+          arg("range (any, range)", _t("The range to consider for the search. The first row in the range is searched for the key specified in search_key.")),
           arg("index (number)", _t("The row index of the value to be returned, where the first row in range is numbered 1.")),
           arg(`is_sorted (boolean, default=${DEFAULT_IS_SORTED})`, _t("Indicates whether the row to be searched (the first row of the specified range) is sorted, in which case the closest match for search_key will be returned.")),
       ],
       compute: function (searchKey, range, index, isSorted = { value: DEFAULT_IS_SORTED }) {
           const _index = Math.trunc(toNumber(index?.value, this.locale));
-          assert(() => 1 <= _index && _index <= range[0].length, _t("[[FUNCTION_NAME]] evaluates to an out of bounds range."));
+          const _range = toMatrix(range);
+          assert(() => 1 <= _index && _index <= _range[0].length, _t("[[FUNCTION_NAME]] evaluates to an out of bounds range."));
           const getValueFromRange = (range, index) => range[index][0].value;
           const _isSorted = toBoolean(isSorted.value);
           const colIndex = _isSorted
-              ? dichotomicSearch(range, searchKey, "nextSmaller", "asc", range.length, getValueFromRange)
-              : linearSearch(range, searchKey, "wildcard", range.length, getValueFromRange);
-          const col = range[colIndex];
+              ? dichotomicSearch(_range, searchKey, "nextSmaller", "asc", _range.length, getValueFromRange)
+              : linearSearch(_range, searchKey, "wildcard", _range.length, getValueFromRange);
+          const col = _range[colIndex];
           if (col === undefined) {
               return valueNotAvailable(searchKey);
           }
@@ -18737,35 +18738,37 @@ stores.inject(MyMetaStore, storeInstance);
       description: _t("Look up a value."),
       args: [
           arg("search_key (string, number, boolean)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
-          arg("search_array (range)", _t("One method of using this function is to provide a single sorted row or column search_array to look through for the search_key with a second argument result_range. The other way is to combine these two arguments into one search_array where the first row or column is searched and a value is returned from the last row or column in the array. If search_key is not found, a non-exact match may be returned.")),
-          arg("result_range (range, optional)", _t("The range from which to return a result. The value returned corresponds to the location where search_key is found in search_range. This range must be only a single row or column and should not be used if using the search_result_array method.")),
+          arg("search_array (any, range)", _t("One method of using this function is to provide a single sorted row or column search_array to look through for the search_key with a second argument result_range. The other way is to combine these two arguments into one search_array where the first row or column is searched and a value is returned from the last row or column in the array. If search_key is not found, a non-exact match may be returned.")),
+          arg("result_range (any, range, optional)", _t("The range from which to return a result. The value returned corresponds to the location where search_key is found in search_range. This range must be only a single row or column and should not be used if using the search_result_array method.")),
       ],
       compute: function (searchKey, searchArray, resultRange) {
-          let nbCol = searchArray.length;
-          let nbRow = searchArray[0].length;
+          const _searchArray = toMatrix(searchArray);
+          const _resultRange = toMatrix(resultRange);
+          let nbCol = _searchArray.length;
+          let nbRow = _searchArray[0].length;
           const verticalSearch = nbRow >= nbCol;
           const getElement = verticalSearch
               ? (range, index) => range[0][index].value
               : (range, index) => range[index][0].value;
           const rangeLength = verticalSearch ? nbRow : nbCol;
-          const index = dichotomicSearch(searchArray, searchKey, "nextSmaller", "asc", rangeLength, getElement);
+          const index = dichotomicSearch(_searchArray, searchKey, "nextSmaller", "asc", rangeLength, getElement);
           if (index === -1 ||
-              (verticalSearch && searchArray[0][index] === undefined) ||
-              (!verticalSearch && searchArray[index][nbRow - 1] === undefined)) {
+              (verticalSearch && _searchArray[0][index] === undefined) ||
+              (!verticalSearch && _searchArray[index][nbRow - 1] === undefined)) {
               return valueNotAvailable(searchKey);
           }
-          if (resultRange === undefined) {
-              return verticalSearch ? searchArray[nbCol - 1][index] : searchArray[index][nbRow - 1];
+          if (_resultRange[0].length === 0) {
+              return verticalSearch ? _searchArray[nbCol - 1][index] : _searchArray[index][nbRow - 1];
           }
-          nbCol = resultRange.length;
-          nbRow = resultRange[0].length;
+          nbCol = _resultRange.length;
+          nbRow = _resultRange[0].length;
           assert(() => nbCol === 1 || nbRow === 1, _t("The result_range must be a single row or a single column."));
           if (nbCol > 1) {
               assert(() => index <= nbCol - 1, _t("[[FUNCTION_NAME]] evaluates to an out of range row value %s.", (index + 1).toString()));
-              return resultRange[index][0];
+              return _resultRange[index][0];
           }
           assert(() => index <= nbRow - 1, _t("[[FUNCTION_NAME]] evaluates to an out of range column value %s.", (index + 1).toString()));
-          return resultRange[0][index];
+          return _resultRange[0][index];
       },
       isExported: true,
   };
@@ -18782,28 +18785,29 @@ stores.inject(MyMetaStore, storeInstance);
       ],
       compute: function (searchKey, range, searchType = { value: DEFAULT_SEARCH_TYPE }) {
           let _searchType = toNumber(searchType, this.locale);
-          const nbCol = range.length;
-          const nbRow = range[0].length;
+          const _range = toMatrix(range);
+          const nbCol = _range.length;
+          const nbRow = _range[0].length;
           assert(() => nbCol === 1 || nbRow === 1, _t("The range must be a single row or a single column."));
           let index = -1;
           const getElement = nbCol === 1
-              ? (range, index) => range[0][index].value
-              : (range, index) => range[index][0].value;
-          const rangeLen = nbCol === 1 ? range[0].length : range.length;
+              ? (_range, index) => _range[0][index].value
+              : (_range, index) => _range[index][0].value;
+          const rangeLen = nbCol === 1 ? _range[0].length : _range.length;
           _searchType = Math.sign(_searchType);
           switch (_searchType) {
               case 1:
-                  index = dichotomicSearch(range, searchKey, "nextSmaller", "asc", rangeLen, getElement);
+                  index = dichotomicSearch(_range, searchKey, "nextSmaller", "asc", rangeLen, getElement);
                   break;
               case 0:
-                  index = linearSearch(range, searchKey, "wildcard", rangeLen, getElement);
+                  index = linearSearch(_range, searchKey, "wildcard", rangeLen, getElement);
                   break;
               case -1:
-                  index = dichotomicSearch(range, searchKey, "nextGreater", "desc", rangeLen, getElement);
+                  index = dichotomicSearch(_range, searchKey, "nextGreater", "desc", rangeLen, getElement);
                   break;
           }
-          if ((nbCol === 1 && range[0][index] === undefined) ||
-              (nbCol !== 1 && range[index] === undefined)) {
+          if ((nbCol === 1 && _range[0][index] === undefined) ||
+              (nbCol !== 1 && _range[index] === undefined)) {
               return valueNotAvailable(searchKey);
           }
           return index + 1;
@@ -18858,13 +18862,14 @@ stores.inject(MyMetaStore, storeInstance);
       ],
       compute: function (searchKey, range, index, isSorted = { value: DEFAULT_IS_SORTED }) {
           const _index = Math.trunc(toNumber(index?.value, this.locale));
-          assert(() => 1 <= _index && _index <= range.length, _t("[[FUNCTION_NAME]] evaluates to an out of bounds range."));
+          const _range = toMatrix(range);
+          assert(() => 1 <= _index && _index <= _range.length, _t("[[FUNCTION_NAME]] evaluates to an out of bounds range."));
           const getValueFromRange = (range, index) => range[0][index].value;
           const _isSorted = toBoolean(isSorted.value);
           const rowIndex = _isSorted
-              ? dichotomicSearch(range, searchKey, "nextSmaller", "asc", range[0].length, getValueFromRange)
-              : linearSearch(range, searchKey, "wildcard", range[0].length, getValueFromRange);
-          const value = range[_index - 1][rowIndex];
+              ? dichotomicSearch(_range, searchKey, "nextSmaller", "asc", _range[0].length, getValueFromRange)
+              : linearSearch(_range, searchKey, "wildcard", _range[0].length, getValueFromRange);
+          const value = _range[_index - 1][rowIndex];
           if (value === undefined) {
               return valueNotAvailable(searchKey);
           }
@@ -18901,27 +18906,29 @@ stores.inject(MyMetaStore, storeInstance);
       compute: function (searchKey, lookupRange, returnRange, defaultValue, matchMode = { value: DEFAULT_MATCH_MODE }, searchMode = { value: DEFAULT_SEARCH_MODE }) {
           const _matchMode = Math.trunc(toNumber(matchMode.value, this.locale));
           const _searchMode = Math.trunc(toNumber(searchMode.value, this.locale));
-          assert(() => lookupRange.length === 1 || lookupRange[0].length === 1, _t("lookup_range should be either a single row or single column."));
+          const _lookupRange = toMatrix(lookupRange);
+          const _returnRange = toMatrix(returnRange);
+          assert(() => _lookupRange.length === 1 || _lookupRange[0].length === 1, _t("lookup_range should be either a single row or single column."));
           assert(() => [-1, 1, -2, 2].includes(_searchMode), _t("search_mode should be a value in [-1, 1, -2, 2]."));
           assert(() => [-1, 0, 1, 2].includes(_matchMode), _t("match_mode should be a value in [-1, 0, 1, 2]."));
-          const lookupDirection = lookupRange.length === 1 ? "col" : "row";
+          const lookupDirection = _lookupRange.length === 1 ? "col" : "row";
           assert(() => !(_matchMode === 2 && [-2, 2].includes(_searchMode)), _t("the search and match mode combination is not supported for XLOOKUP evaluation."));
           assert(() => lookupDirection === "col"
-              ? returnRange[0].length === lookupRange[0].length
-              : returnRange.length === lookupRange.length, _t("return_range should have the same dimensions as lookup_range."));
+              ? _returnRange[0].length === _lookupRange[0].length
+              : _returnRange.length === _lookupRange.length, _t("return_range should have the same dimensions as lookup_range."));
           const getElement = lookupDirection === "col"
               ? (range, index) => range[0][index].value
               : (range, index) => range[index][0].value;
-          const rangeLen = lookupDirection === "col" ? lookupRange[0].length : lookupRange.length;
+          const rangeLen = lookupDirection === "col" ? _lookupRange[0].length : _lookupRange.length;
           const mode = MATCH_MODE[_matchMode];
           const reverseSearch = _searchMode === -1;
           const index = _searchMode === 2 || _searchMode === -2
-              ? dichotomicSearch(lookupRange, searchKey, mode, _searchMode === 2 ? "asc" : "desc", rangeLen, getElement)
-              : linearSearch(lookupRange, searchKey, mode, rangeLen, getElement, reverseSearch);
+              ? dichotomicSearch(_lookupRange, searchKey, mode, _searchMode === 2 ? "asc" : "desc", rangeLen, getElement)
+              : linearSearch(_lookupRange, searchKey, mode, rangeLen, getElement, reverseSearch);
           if (index !== -1) {
               return lookupDirection === "col"
-                  ? returnRange.map((col) => [col[index]])
-                  : [returnRange[index]];
+                  ? _returnRange.map((col) => [col[index]])
+                  : [_returnRange[index]];
           }
           if (defaultValue === undefined) {
               return valueNotAvailable(searchKey);
@@ -28457,11 +28464,7 @@ stores.inject(MyMetaStore, storeInstance);
       if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
           return [];
       }
-      const labelMin = Math.min(...labels);
-      const labelMax = Math.max(...labels);
-      const labelRange = labelMax - labelMin;
-      const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
-      const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
+      const { normalizedLabels, normalizedNewLabels } = normalizeLabels(labels, newLabels, config);
       try {
           switch (config.type) {
               case "polynomial": {
@@ -28506,6 +28509,30 @@ stores.inject(MyMetaStore, storeInstance);
           return newLabels.map((x) => ({ x, y: NaN }));
       }
   }
+  function normalizeLabels(labels, newLabels, config) {
+      let normalizedLabels = [];
+      let normalizedNewLabels = [];
+      if (config.type === "logarithmic") {
+          // Logarithmic trends in charts are used to visualize proportional growth or
+          // relative changes. Therefore, we change the normalization technique for
+          // logarithmic trend lines for a better fit. The method used here is Max Absolute
+          // Scaling. This Technique is ideal for data spanning several orders of magnitude,
+          // as it balances differences between small and large values by compressing larger
+          // values while preserving proportionality and ensuring all values are scaled relative
+          // to the largest magnitude.
+          const labelMax = Math.max(...labels.map(Math.abs));
+          normalizedLabels = labels.map((l) => l / labelMax);
+          normalizedNewLabels = newLabels.map((l) => l / labelMax);
+      }
+      else {
+          const labelMax = Math.max(...labels);
+          const labelMin = Math.min(...labels);
+          const labelRange = labelMax - labelMin;
+          normalizedLabels = labels.map((l) => (l - labelMax) / labelRange);
+          normalizedNewLabels = newLabels.map((l) => (l - labelMax) / labelRange);
+      }
+      return { normalizedLabels, normalizedNewLabels };
+  }
   function getChartAxisType(chart, labelRange, getters) {
       if (isDateChart(chart, labelRange, getters) && isLuxonTimeAdapterInstalled()) {
           return "time";
@@ -32537,36 +32564,58 @@ stores.inject(MyMetaStore, storeInstance);
       static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
       static template = "o-spreadsheet-ErrorToolTip";
       static props = {
-          errors: Array,
+          cellPosition: Object,
           onClosed: { type: Function, optional: true },
       };
+      get dataValidationErrorMessage() {
+          return this.env.model.getters.getInvalidDataValidationMessage(this.props.cellPosition);
+      }
+      get evaluationError() {
+          const cell = this.env.model.getters.getEvaluatedCell(this.props.cellPosition);
+          if (cell.message) {
+              return cell;
+          }
+          return undefined;
+      }
+      get errorOriginPositionString() {
+          const evaluationError = this.evaluationError;
+          const position = evaluationError?.errorOriginPosition;
+          if (!position || deepEquals(position, this.props.cellPosition)) {
+              return "";
+          }
+          const sheetId = position.sheetId;
+          return this.env.model.getters.getRangeString(this.env.model.getters.getRangeFromZone(sheetId, positionToZone(position)), this.env.model.getters.getActiveSheetId());
+      }
+      selectCell() {
+          const position = this.evaluationError?.errorOriginPosition;
+          if (!position) {
+              return;
+          }
+          const activeSheetId = this.env.model.getters.getActiveSheetId();
+          if (position.sheetId !== activeSheetId) {
+              this.env.model.dispatch("ACTIVATE_SHEET", {
+                  sheetIdFrom: activeSheetId,
+                  sheetIdTo: position.sheetId,
+              });
+          }
+          this.env.model.selection.selectCell(position.col, position.row);
+      }
   }
   const ErrorToolTipPopoverBuilder = {
       onHover: (position, getters) => {
           const cell = getters.getEvaluatedCell(position);
-          const errors = [];
-          if (cell.type === CellValueType.error && !!cell.message) {
-              errors.push({
-                  title: _t("Error"),
-                  message: cell.message,
-              });
-          }
-          const validationErrorMessage = getters.getInvalidDataValidationMessage(position);
-          if (validationErrorMessage) {
-              errors.push({
-                  title: _t("Invalid"),
-                  message: validationErrorMessage,
-              });
-          }
-          if (!errors.length) {
-              return { isOpen: false };
+          if ((cell.type === CellValueType.error && !!cell.message) ||
+              getters.getInvalidDataValidationMessage(position)) {
+              return {
+                  isOpen: true,
+                  props: {
+                      cellPosition: position,
+                  },
+                  Component: ErrorToolTip,
+                  cellCorner: "TopRight",
+              };
           }
-          return {
-              isOpen: true,
-              props: { errors: errors },
-              Component: ErrorToolTip,
-              cellCorner: "TopRight",
-          };
+          return { isOpen: false };
       },
   };
 
@@ -33130,6 +33179,100 @@ stores.inject(MyMetaStore, storeInstance);
   function getOpenedMenus() {
       return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
   }
+  function getCurrentSelection(el) {
+      let { startElement, endElement, startSelectionOffset, endSelectionOffset } = getStartAndEndSelection(el);
+      let startSizeBefore = findSelectionIndex(el, startElement, startSelectionOffset);
+      let endSizeBefore = findSelectionIndex(el, endElement, endSelectionOffset);
+      return {
+          start: startSizeBefore,
+          end: endSizeBefore,
+      };
+  }
+  function getStartAndEndSelection(el) {
+      const selection = document.getSelection();
+      return {
+          startElement: selection.anchorNode || el,
+          startSelectionOffset: selection.anchorOffset,
+          endElement: selection.focusNode || el,
+          endSelectionOffset: selection.focusOffset,
+      };
+  }
+  /**
+   * Computes the text 'index' inside this.el based on the currently selected node and its offset.
+   * The selected node is either a Text node or an Element node.
+   *
+   * case 1 -Text node:
+   * the offset is the number of characters from the start of the node. We have to add this offset to the
+   * content length of all previous nodes.
+   *
+   * case 2 - Element node:
+   * the offset is the number of child nodes before the selected node. We have to add the content length of
+   * all the nodes prior to the selected node as well as the content of the child node before the offset.
+   *
+   * See the MDN documentation for more details.
+   * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
+   * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
+   *
+   */
+  function findSelectionIndex(el, nodeToFind, nodeOffset) {
+      let usedCharacters = 0;
+      let it = iterateChildren(el);
+      let current = it.next();
+      let isFirstParagraph = true;
+      while (!current.done && current.value !== nodeToFind) {
+          if (!current.value.hasChildNodes()) {
+              if (current.value.textContent) {
+                  usedCharacters += current.value.textContent.length;
+              }
+          }
+          // One new paragraph = one new line character, except for the first paragraph
+          if (current.value.nodeName === "P" ||
+              (current.value.nodeName === "DIV" && current.value !== el) // On paste, the HTML may contain <div> instead of <p>
+          ) {
+              if (isFirstParagraph) {
+                  isFirstParagraph = false;
+              }
+              else {
+                  usedCharacters++;
+              }
+          }
+          current = it.next();
+      }
+      if (current.value !== nodeToFind) {
+          /** This situation can happen if the code is called while the selection is not currently on the element.
+           * In this case, we return 0 because we don't know the size of the text before the selection.
+           *
+           * A known occurrence is triggered since the introduction of commit d4663158 (PR #2038).
+           */
+          return 0;
+      }
+      else {
+          if (!current.value.hasChildNodes()) {
+              usedCharacters += nodeOffset;
+          }
+          else {
+              const children = [...current.value.childNodes].slice(0, nodeOffset);
+              usedCharacters += children.reduce((acc, child, index) => {
+                  if (child.textContent !== null) {
+                      // need to account for paragraph nodes that implicitly add a new line
+                      // except for the last paragraph
+                      let chars = child.textContent.length;
+                      if (child.nodeName === "P" && index !== children.length - 1) {
+                          chars++;
+                      }
+                      return acc + chars;
+                  }
+                  else {
+                      return acc;
+                  }
+              }, 0);
+          }
+      }
+      if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
+          usedCharacters++;
+      }
+      return usedCharacters;
+  }
   const letterRegex = /^[a-zA-Z]$/;
   /**
    * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
@@ -37057,7 +37200,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
           let { top, left, bottom, right } = getters.getActiveMainViewport();
-          let { scrollX, scrollY } = getters.getActiveSheetDOMScrollInfo();
+          let { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
           const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
           let canEdgeScroll = false;
           let timeoutDelay = MAX_DELAY;
@@ -40337,6 +40480,10 @@ stores.inject(MyMetaStore, storeInstance);
           if (currentStart === start && currentEnd === end) {
               return;
           }
+          if (selection.rangeCount === 0) {
+              const range = document.createRange();
+              selection.addRange(range);
+          }
           const currentRange = selection.getRangeAt(0);
           let range;
           if (this.el.contains(currentRange.startContainer)) {
@@ -40499,7 +40646,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (!focusedNode || !this.el.contains(focusedNode))
               return;
           const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
-          element?.scrollIntoView({ block: "nearest" });
+          element?.scrollIntoView?.({ block: "nearest" });
       }
       /**
        * remove the current selection of the user
@@ -40519,100 +40666,7 @@ stores.inject(MyMetaStore, storeInstance);
        * finds the indexes of the current selection.
        * */
       getCurrentSelection() {
-          let { startElement, endElement, startSelectionOffset, endSelectionOffset } = this.getStartAndEndSelection();
-          let startSizeBefore = this.findSelectionIndex(startElement, startSelectionOffset);
-          let endSizeBefore = this.findSelectionIndex(endElement, endSelectionOffset);
-          return {
-              start: startSizeBefore,
-              end: endSizeBefore,
-          };
-      }
-      /**
-       * Computes the text 'index' inside this.el based on the currently selected node and its offset.
-       * The selected node is either a Text node or an Element node.
-       *
-       * case 1 -Text node:
-       * the offset is the number of characters from the start of the node. We have to add this offset to the
-       * content length of all previous nodes.
-       *
-       * case 2 - Element node:
-       * the offset is the number of child nodes before the selected node. We have to add the content length of
-       * all the bnodes prior to the selected node as well as the content of the child node before the offset.
-       *
-       * See the MDN documentation for more details.
-       * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
-       * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
-       *
-       */
-      findSelectionIndex(nodeToFind, nodeOffset) {
-          let usedCharacters = 0;
-          let it = iterateChildren(this.el);
-          let current = it.next();
-          let isFirstParagraph = true;
-          while (!current.done && current.value !== nodeToFind) {
-              if (!current.value.hasChildNodes()) {
-                  if (current.value.textContent) {
-                      usedCharacters += current.value.textContent.length;
-                  }
-              }
-              // One new paragraph = one new line character, except for the first paragraph
-              if (current.value.nodeName === "P" ||
-                  (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
-              ) {
-                  if (isFirstParagraph) {
-                      isFirstParagraph = false;
-                  }
-                  else {
-                      usedCharacters++;
-                  }
-              }
-              current = it.next();
-          }
-          if (current.value !== nodeToFind) {
-              /** This situation can happen if the code is called while the selection is not currently on the ContentEditableHelper.
-               * In this case, we return 0 because we don't know the size of the text before the selection.
-               *
-               * A known occurence is triggered since the introduction of commit d4663158 (PR #2038).
-               *
-               * FIXME: find a way to test eventhough the selection API is not available in jsDOM.
-               */
-              return 0;
-          }
-          else {
-              if (!current.value.hasChildNodes()) {
-                  usedCharacters += nodeOffset;
-              }
-              else {
-                  const children = [...current.value.childNodes].slice(0, nodeOffset);
-                  usedCharacters += children.reduce((acc, child, index) => {
-                      if (child.textContent !== null) {
-                          // need to account for paragraph nodes that implicitely add a new line
-                          // except for the last paragraph
-                          let chars = child.textContent.length;
-                          if (child.nodeName === "P" && index !== children.length - 1) {
-                              chars++;
-                          }
-                          return acc + chars;
-                      }
-                      else {
-                          return acc;
-                      }
-                  }, 0);
-              }
-          }
-          if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
-              usedCharacters++;
-          }
-          return usedCharacters;
-      }
-      getStartAndEndSelection() {
-          const selection = document.getSelection();
-          return {
-              startElement: selection.anchorNode || this.el,
-              startSelectionOffset: selection.anchorOffset,
-              endElement: selection.focusNode || this.el,
-              endSelectionOffset: selection.focusOffset,
-          };
+          return getCurrentSelection(this.el);
       }
       getText() {
           let text = "";
@@ -40876,6 +40930,12 @@ stores.inject(MyMetaStore, storeInstance);
               }
               this.contentHelper.updateEl(el);
           });
+          this.env.model.selection.observe(this, {
+              handleEvent: () => this.autoCompleteState.hide(),
+          });
+          owl.onWillUnmount(() => {
+              this.env.model.selection.detachObserver(this);
+          });
           owl.useEffect(() => {
               this.processContent();
               if (document.activeElement === this.contentHelper.el &&
@@ -41313,6 +41373,16 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return providersDefinitions;
       }
+      /**
+       * Replace the current reference selected by the new one.
+       * */
+      getZoneReference(zone) {
+          const res = super.getZoneReference(zone);
+          if (this.args().defaultStatic) {
+              return setXcToFixedReferenceType(res, "colrow");
+          }
+          return res;
+      }
       getComposerContent() {
           if (this.editionMode === "inactive") {
               // References in the content might not be linked to the current active sheet
@@ -41378,6 +41448,7 @@ stores.inject(MyMetaStore, storeInstance);
       static props = {
           composerContent: { type: String, optional: true },
           defaultRangeSheetId: { type: String, optional: true },
+          defaultStatic: { type: Boolean, optional: true },
           onConfirm: Function,
           contextualAutocomplete: { type: Object, optional: true },
           placeholder: { type: String, optional: true },
@@ -41388,6 +41459,7 @@ stores.inject(MyMetaStore, storeInstance);
       static components = { Composer };
       static defaultProps = {
           composerContent: "",
+          defaultStatic: false,
       };
       composerFocusStore;
       standaloneComposerStore;
@@ -41398,6 +41470,7 @@ stores.inject(MyMetaStore, storeInstance);
           const standaloneComposerStore = useLocalStore(StandaloneComposerStore, () => ({
               onConfirm: this.props.onConfirm,
               content: this.props.composerContent,
+              defaultStatic: this.props.defaultStatic ?? false,
               contextualAutocomplete: this.props.contextualAutocomplete,
               defaultRangeSheetId: this.props.defaultRangeSheetId,
               getContextualColoredSymbolToken: this.props.getContextualColoredSymbolToken,
@@ -42133,6 +42206,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
               composerContent: this.state.rules.cellIs.values[valueIndex],
               placeholder: _t("Value or formula"),
+              defaultStatic: true,
               invalid: isInvalid,
               class: "o-sidePanel-composer",
               defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
@@ -42151,6 +42225,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
               composerContent: threshold.value || "",
               placeholder: _t("Formula"),
+              defaultStatic: true,
               invalid: isInvalid,
               class: "o-sidePanel-composer",
               defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
@@ -42166,6 +42241,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
               composerContent: inflection.value || "",
               placeholder: _t("Formula"),
+              defaultStatic: true,
               invalid: isInvalid,
               class: "o-sidePanel-composer",
               defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
@@ -49215,7 +49291,7 @@ stores.inject(MyMetaStore, storeInstance);
               axisStartEndPositions.push({ x: axis.position, y: figure.y + figure.height });
               break;
       }
-      return axisStartEndPositions.some(getters.isPositionVisible);
+      return axisStartEndPositions.some(getters.isPixelPositionVisible);
   }
   /**
    * Get a snap line for the given figure, if the figure can snap to any other figure
@@ -49774,7 +49850,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
           this.props.focusGrid();
           // After adding new rows, scroll down to the new last row
-          const { scrollX } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+          const { scrollX } = this.env.model.getters.getActiveSheetScrollInfo();
           const { end } = this.env.model.getters.getRowDimensions(activeSheetId, rowNumber + quantity - 1);
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
               offsetX: scrollX,
@@ -50032,7 +50108,7 @@ stores.inject(MyMetaStore, storeInstance);
               resizeObserver.disconnect();
           });
           useTouchMove(this.gridOverlay, this.props.onGridMoved, () => {
-              const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+              const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
               return scrollY > 0;
           });
           this.cellPopovers = useStore(CellPopoverStore);
@@ -50686,17 +50762,6 @@ stores.inject(MyMetaStore, storeInstance);
       get renderingLayers() {
           return ["Background", "Headers"];
       }
-      /**
-       * Get the offset of a header (see getColRowOffsetInViewport), adjusted with the header
-       * size (HEADER_HEIGHT and HEADER_WIDTH)
-       */
-      getHeaderOffset(dimension, start, index) {
-          let size = this.getters.getColRowOffsetInViewport(dimension, start, index);
-          if (!this.getters.isDashboard()) {
-              size += dimension === "ROW" ? HEADER_HEIGHT : HEADER_WIDTH;
-          }
-          return size;
-      }
       // ---------------------------------------------------------------------------
       // Grid rendering
       // ---------------------------------------------------------------------------
@@ -50704,11 +50769,10 @@ stores.inject(MyMetaStore, storeInstance);
           switch (layer) {
               case "Background":
                   this.drawGlobalBackground(renderingContext);
-                  for (const zone of this.getters.getAllActiveViewportsZones()) {
+                  for (const { zone, rect } of this.getters.getAllActiveViewportsZonesAndRect()) {
                       const { ctx } = renderingContext;
                       ctx.save();
                       ctx.beginPath();
-                      const rect = this.getters.getVisibleRect(zone);
                       ctx.rect(rect.x, rect.y, rect.width, rect.height);
                       ctx.clip();
                       const boxes = this.getGridBoxes(zone);
@@ -50984,10 +51048,8 @@ stores.inject(MyMetaStore, storeInstance);
           const { ctx, thinLineWidth } = renderingContext;
           const visibleCols = this.getters.getSheetViewVisibleCols();
           const left = visibleCols[0];
-          const right = visibleCols[visibleCols.length - 1];
           const visibleRows = this.getters.getSheetViewVisibleRows();
           const top = visibleRows[0];
-          const bottom = visibleRows[visibleRows.length - 1];
           const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
           const selection = this.getters.getSelectedZones();
           const selectedCols = getZonesCols(selection);
@@ -51003,7 +51065,7 @@ stores.inject(MyMetaStore, storeInstance);
           ctx.lineWidth = thinLineWidth;
           ctx.strokeStyle = "#333";
           // Columns headers background
-          for (let col = left; col <= right; col++) {
+          for (const col of visibleCols) {
               const colZone = { left: col, right: col, top: 0, bottom: numberOfRows - 1 };
               const { x, width } = this.getters.getVisibleRect(colZone);
               const isColActive = activeCols.has(col);
@@ -51020,7 +51082,7 @@ stores.inject(MyMetaStore, storeInstance);
               ctx.fillRect(x, 0, width, HEADER_HEIGHT);
           }
           // Rows headers background
-          for (let row = top; row <= bottom; row++) {
+          for (const row of visibleRows) {
               const rowZone = { top: row, bottom: row, left: 0, right: numberOfCols - 1 };
               const { y, height } = this.getters.getVisibleRect(rowZone);
               const isRowActive = activeRows.has(row);
@@ -51044,27 +51106,41 @@ stores.inject(MyMetaStore, storeInstance);
           ctx.lineTo(width, HEADER_HEIGHT);
           ctx.strokeStyle = HEADER_BORDER_COLOR;
           ctx.stroke();
-          ctx.beginPath();
           // column text + separator
-          for (const i of visibleCols) {
-              const colSize = this.getters.getColSize(sheetId, i);
-              const colName = numberToLetters(i);
-              ctx.fillStyle = activeCols.has(i) ? "#fff" : TEXT_HEADER_COLOR;
-              let colStart = this.getHeaderOffset("COL", left, i);
+          for (const col of visibleCols) {
+              const colName = numberToLetters(col);
+              ctx.fillStyle = activeCols.has(col) ? "#fff" : TEXT_HEADER_COLOR;
+              const zone = { left: col, right: col, top: top, bottom: top };
+              const { x: colStart, width: colSize } = this.getters.getRect(zone);
+              const { x, width } = this.getters.getVisibleRect(zone);
+              ctx.save();
+              ctx.beginPath();
+              ctx.rect(x, 0, width, HEADER_HEIGHT);
+              ctx.clip();
               ctx.fillText(colName, colStart + colSize / 2, HEADER_HEIGHT / 2);
+              ctx.restore();
+              ctx.beginPath();
               ctx.moveTo(colStart + colSize, 0);
               ctx.lineTo(colStart + colSize, HEADER_HEIGHT);
+              ctx.stroke();
           }
           // row text + separator
-          for (const i of visibleRows) {
-              const rowSize = this.getters.getRowSize(sheetId, i);
-              ctx.fillStyle = activeRows.has(i) ? "#fff" : TEXT_HEADER_COLOR;
-              let rowStart = this.getHeaderOffset("ROW", top, i);
-              ctx.fillText(String(i + 1), HEADER_WIDTH / 2, rowStart + rowSize / 2);
+          for (const row of visibleRows) {
+              ctx.fillStyle = activeRows.has(row) ? "#fff" : TEXT_HEADER_COLOR;
+              const zone = { top: row, bottom: row, left: left, right: left };
+              const { y: rowStart, height: rowSize } = this.getters.getRect(zone);
+              const { y, height } = this.getters.getVisibleRect(zone);
+              ctx.save();
+              ctx.beginPath();
+              ctx.rect(0, y, HEADER_WIDTH, height);
+              ctx.clip();
+              ctx.fillText(String(row + 1), HEADER_WIDTH / 2, rowStart + rowSize / 2);
+              ctx.restore();
+              ctx.beginPath();
               ctx.moveTo(0, rowStart + rowSize);
               ctx.lineTo(HEADER_WIDTH, rowStart + rowSize);
+              ctx.stroke();
           }
-          ctx.stroke();
       }
       drawFrozenPanesHeaders(renderingContext) {
           const { ctx, thinLineWidth } = renderingContext;
@@ -51242,8 +51318,8 @@ stores.inject(MyMetaStore, storeInstance);
                   previousColIndex = col;
               }
               else {
-                  nextColIndex = this.findNextEmptyCol(col, right, row);
-                  previousColIndex = this.findPreviousEmptyCol(col, left, row);
+                  nextColIndex = box.border?.right ? zone.right : this.findNextEmptyCol(col, right, row);
+                  previousColIndex = box.border?.left ? zone.left : this.findPreviousEmptyCol(col, left, row);
                   box.isOverflow = true;
               }
               switch (align) {
@@ -51367,6 +51443,9 @@ stores.inject(MyMetaStore, storeInstance);
           canvas.width = width * dpr;
           canvas.height = height * dpr;
           canvas.setAttribute("style", `width:${width}px;height:${height}px;`);
+          if (width === 0 || height === 0) {
+              return;
+          }
           // Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…)
           // are the edges of the squares. If you draw a one-unit-wide line between whole-number
           // coordinates, it will overlap opposite sides of the pixel square, and the resulting
@@ -51710,7 +51789,7 @@ stores.inject(MyMetaStore, storeInstance);
           leftOffset: 0,
       };
       get offset() {
-          return this.env.model.getters.getActiveSheetDOMScrollInfo().scrollX;
+          return this.env.model.getters.getActiveSheetScrollInfo().scrollX;
       }
       get width() {
           return this.env.model.getters.getMainViewportRect().width;
@@ -51729,7 +51808,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       onScroll(offset) {
-          const { scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+          const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
               offsetX: offset,
               offsetY: scrollY, // offsetY is the same
@@ -51755,7 +51834,7 @@ stores.inject(MyMetaStore, storeInstance);
           topOffset: 0,
       };
       get offset() {
-          return this.env.model.getters.getActiveSheetDOMScrollInfo().scrollY;
+          return this.env.model.getters.getActiveSheetScrollInfo().scrollY;
       }
       get height() {
           return this.env.model.getters.getMainViewportRect().height;
@@ -51774,7 +51853,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       onScroll(offset) {
-          const { scrollX } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+          const { scrollX } = this.env.model.getters.getActiveSheetScrollInfo();
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
               offsetX: scrollX, // offsetX is the same
               offsetY: offset,
@@ -52245,7 +52324,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       moveCanvas(deltaX, deltaY) {
-          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
               offsetX: scrollX + deltaX,
               offsetY: scrollY + deltaY,
@@ -52716,7 +52795,7 @@ stores.inject(MyMetaStore, storeInstance);
                       // map and slice preserve empty values and do not set `undefined` instead
                       const bordersCopy = borders
                           .slice()
-                          .map((col) => col?.slice().map((border) => ({ ...border })));
+                          .map((col) => col?.slice().map((border) => deepCopy(border)));
                       this.history.update("borders", cmd.sheetIdTo, bordersCopy);
                   }
                   break;
@@ -52746,32 +52825,12 @@ stores.inject(MyMetaStore, storeInstance);
                   const elements = [...cmd.elements].sort((a, b) => b - a);
                   for (const group of groupConsecutive(elements)) {
                       if (cmd.dimension === "COL") {
-                          if (group[0] >= this.getters.getNumberCols(cmd.sheetId)) {
-                              for (let row = 0; row < this.getters.getNumberRows(cmd.sheetId); row++) {
-                                  this.history.update("borders", cmd.sheetId, group[0] + 1, row, "vertical", undefined);
-                              }
-                          }
-                          if (group[group.length - 1] === 0) {
-                              for (let row = 0; row < this.getters.getNumberRows(cmd.sheetId); row++) {
-                                  this.history.update("borders", cmd.sheetId, 0, row, "vertical", undefined);
-                              }
-                          }
-                          const zone = this.getters.getColsZone(cmd.sheetId, group[group.length - 1] + 1, group[0]);
+                          const zone = this.getters.getColsZone(cmd.sheetId, group[group.length - 1], group[0]);
                           this.clearInsideBorders(cmd.sheetId, [zone]);
                           this.shiftBordersHorizontally(cmd.sheetId, group[0] + 1, -group.length);
                       }
                       else {
-                          if (group[0] >= this.getters.getNumberRows(cmd.sheetId)) {
-                              for (let col = 0; col < this.getters.getNumberCols(cmd.sheetId); col++) {
-                                  this.history.update("borders", cmd.sheetId, col, group[0] + 1, "horizontal", undefined);
-                              }
-                          }
-                          if (group[group.length - 1] === 0) {
-                              for (let col = 0; col < this.getters.getNumberCols(cmd.sheetId); col++) {
-                                  this.history.update("borders", cmd.sheetId, col, 0, "horizontal", undefined);
-                              }
-                          }
-                          const zone = this.getters.getRowsZone(cmd.sheetId, group[group.length - 1] + 1, group[0]);
+                          const zone = this.getters.getRowsZone(cmd.sheetId, group[group.length - 1], group[0]);
                           this.clearInsideBorders(cmd.sheetId, [zone]);
                           this.shiftBordersVertically(cmd.sheetId, group[0] + 1, -group.length);
                       }
@@ -52796,16 +52855,12 @@ stores.inject(MyMetaStore, storeInstance);
           let colLeftOfInsertion;
           let colRightOfInsertion;
           if (cmd.position === "before") {
-              this.shiftBordersHorizontally(cmd.sheetId, cmd.base, cmd.quantity, {
-                  moveFirstLeftBorder: true,
-              });
+              this.shiftBordersHorizontally(cmd.sheetId, cmd.base, cmd.quantity);
               colLeftOfInsertion = cmd.base - 1;
               colRightOfInsertion = cmd.base + cmd.quantity;
           }
           else {
-              this.shiftBordersHorizontally(cmd.sheetId, cmd.base + 1, cmd.quantity, {
-                  moveFirstLeftBorder: false,
-              });
+              this.shiftBordersHorizontally(cmd.sheetId, cmd.base + 1, cmd.quantity);
               colLeftOfInsertion = cmd.base;
               colRightOfInsertion = cmd.base + cmd.quantity + 1;
           }
@@ -52820,16 +52875,12 @@ stores.inject(MyMetaStore, storeInstance);
           let rowAboveInsertion;
           let rowBelowInsertion;
           if (cmd.position === "before") {
-              this.shiftBordersVertically(cmd.sheetId, cmd.base, cmd.quantity, {
-                  moveFirstTopBorder: true,
-              });
+              this.shiftBordersVertically(cmd.sheetId, cmd.base, cmd.quantity);
               rowAboveInsertion = cmd.base - 1;
               rowBelowInsertion = cmd.base + cmd.quantity;
           }
           else {
-              this.shiftBordersVertically(cmd.sheetId, cmd.base + 1, cmd.quantity, {
-                  moveFirstTopBorder: false,
-              });
+              this.shiftBordersVertically(cmd.sheetId, cmd.base + 1, cmd.quantity);
               rowAboveInsertion = cmd.base;
               rowBelowInsertion = cmd.base + cmd.quantity + 1;
           }
@@ -52839,16 +52890,8 @@ stores.inject(MyMetaStore, storeInstance);
       // Getters
       // ---------------------------------------------------------------------------
       getCellBorder({ sheetId, col, row }) {
-          const border = {
-              top: this.borders[sheetId]?.[col]?.[row]?.horizontal,
-              bottom: this.borders[sheetId]?.[col]?.[row + 1]?.horizontal,
-              left: this.borders[sheetId]?.[col]?.[row]?.vertical,
-              right: this.borders[sheetId]?.[col + 1]?.[row]?.vertical,
-          };
-          if (!border.bottom && !border.left && !border.right && !border.top) {
-              return null;
-          }
-          return border;
+          const border = this.borders[sheetId]?.[col]?.[row];
+          return border?.top || border?.bottom || border?.left || border?.right ? deepCopy(border) : null;
       }
       getBordersColors(sheetId) {
           const colors = [];
@@ -52856,11 +52899,13 @@ stores.inject(MyMetaStore, storeInstance);
           if (sheetBorders) {
               for (const borders of sheetBorders.filter(isDefined)) {
                   for (const cellBorder of borders) {
-                      if (cellBorder?.horizontal) {
-                          colors.push(cellBorder.horizontal.color);
-                      }
-                      if (cellBorder?.vertical) {
-                          colors.push(cellBorder.vertical.color);
+                      if (cellBorder) {
+                          for (const direction of ["top", "bottom", "left", "right"]) {
+                              const color = cellBorder[direction]?.color;
+                              if (color) {
+                                  colors.push(color);
+                              }
+                          }
                       }
                   }
               }
@@ -52913,7 +52958,7 @@ stores.inject(MyMetaStore, storeInstance);
       getCommonSides(border1, border2) {
           const commonBorder = {};
           for (let side of ["top", "bottom", "left", "right"]) {
-              if (border1[side] && border1[side] === border2[side]) {
+              if (border1[side] && deepEquals(border1[side], border2[side])) {
                   commonBorder[side] = border1[side];
               }
           }
@@ -52958,23 +53003,15 @@ stores.inject(MyMetaStore, storeInstance);
        * @param start starting column (included)
        * @param delta how much borders will be moved (negative if moved to the left)
        */
-      shiftBordersHorizontally(sheetId, start, delta, { moveFirstLeftBorder } = {}) {
+      shiftBordersHorizontally(sheetId, start, delta) {
           const borders = this.borders[sheetId];
           if (!borders)
               return;
-          if (delta < 0) {
-              this.moveBordersOfColumn(sheetId, start, delta, "vertical", {
-                  destructive: false,
-              });
-          }
           this.getColumnsWithBorders(sheetId)
               .filter((col) => col >= start)
               .sort((a, b) => (delta < 0 ? a - b : b - a)) // start by the end when moving up
               .forEach((col) => {
-              if ((col === start && moveFirstLeftBorder) || col !== start) {
-                  this.moveBordersOfColumn(sheetId, col, delta, "vertical");
-              }
-              this.moveBordersOfColumn(sheetId, col, delta, "horizontal");
+              this.moveBordersOfColumn(sheetId, col, delta);
           });
       }
       /**
@@ -52983,12 +53020,12 @@ stores.inject(MyMetaStore, storeInstance);
        * @param start starting row (included)
        * @param delta how much borders will be moved (negative if moved to the above)
        */
-      shiftBordersVertically(sheetId, start, delta, { moveFirstTopBorder } = {}) {
+      shiftBordersVertically(sheetId, start, delta) {
           const borders = this.borders[sheetId];
           if (!borders)
               return;
           if (delta < 0) {
-              this.moveBordersOfRow(sheetId, start, delta, "horizontal", {
+              this.moveBordersOfRow(sheetId, start, delta, {
                   destructive: false,
               });
           }
@@ -52996,10 +53033,7 @@ stores.inject(MyMetaStore, storeInstance);
               .filter((row) => row >= start)
               .sort((a, b) => (delta < 0 ? a - b : b - a)) // start by the end when moving up
               .forEach((row) => {
-              if ((row === start && moveFirstTopBorder) || row !== start) {
-                  this.moveBordersOfRow(sheetId, row, delta, "horizontal");
-              }
-              this.moveBordersOfRow(sheetId, row, delta, "vertical");
+              this.moveBordersOfRow(sheetId, row, delta);
           });
       }
       /**
@@ -53013,15 +53047,15 @@ stores.inject(MyMetaStore, storeInstance);
        * argument `destructive` is given false, the target border is preserved if
        * the moved border is empty
        */
-      moveBordersOfRow(sheetId, row, delta, borderDirection, { destructive } = { destructive: true }) {
+      moveBordersOfRow(sheetId, row, delta, { destructive } = { destructive: true }) {
           const borders = this.borders[sheetId];
           if (!borders)
               return;
           this.getColumnsWithBorders(sheetId).forEach((col) => {
-              const targetBorder = borders[col]?.[row + delta]?.[borderDirection];
-              const movedBorder = borders[col]?.[row]?.[borderDirection];
-              this.history.update("borders", sheetId, col, row + delta, borderDirection, destructive ? movedBorder : movedBorder || targetBorder);
-              this.history.update("borders", sheetId, col, row, borderDirection, undefined);
+              const targetBorder = borders[col]?.[row + delta];
+              const movedBorder = borders[col]?.[row];
+              this.history.update("borders", sheetId, col, row + delta, destructive ? movedBorder : movedBorder || targetBorder);
+              this.history.update("borders", sheetId, col, row, undefined);
           });
       }
       /**
@@ -53035,15 +53069,17 @@ stores.inject(MyMetaStore, storeInstance);
        * argument `destructive` is given false, the target border is preserved if
        * the moved border is empty
        */
-      moveBordersOfColumn(sheetId, col, delta, borderDirection, { destructive } = { destructive: true }) {
+      moveBordersOfColumn(sheetId, col, delta, { destructive } = { destructive: true }) {
           const borders = this.borders[sheetId];
           if (!borders)
               return;
           this.getRowsRange(sheetId).forEach((row) => {
-              const targetBorder = borders[col + delta]?.[row]?.[borderDirection];
-              const movedBorder = borders[col]?.[row]?.[borderDirection];
-              this.history.update("borders", sheetId, col + delta, row, borderDirection, destructive ? movedBorder : movedBorder || targetBorder);
-              this.history.update("borders", sheetId, col, row, borderDirection, undefined);
+              const targetBorder = borders[col + delta]?.[row];
+              const movedBorder = borders[col]?.[row];
+              this.history.update("borders", sheetId, col + delta, row, destructive ? movedBorder : movedBorder || targetBorder);
+              if (destructive) {
+                  this.history.update("borders", sheetId, col, row, undefined);
+              }
           });
       }
       /**
@@ -53051,33 +53087,69 @@ stores.inject(MyMetaStore, storeInstance);
        * It overrides the current border if override === true.
        */
       setBorder(sheetId, col, row, border, override = true) {
-          if (override || !this.borders?.[sheetId]?.[col]?.[row]?.vertical) {
-              this.history.update("borders", sheetId, col, row, "vertical", border?.left);
+          const maxCol = this.getters.getNumberCols(sheetId) - 1;
+          const maxRow = this.getters.getNumberRows(sheetId) - 1;
+          if (override || !this.borders[sheetId]?.[col]?.[row]?.left) {
+              this.history.update("borders", sheetId, col, row, "left", border?.left);
+              if (border?.left &&
+                  col > 0 &&
+                  !deepEquals(this.getCellBorder({ sheetId, col: col - 1, row })?.right, border?.left)) {
+                  this.history.update("borders", sheetId, col - 1, row, "right", undefined);
+              }
           }
-          if (override || !this.borders?.[sheetId]?.[col]?.[row]?.horizontal) {
-              this.history.update("borders", sheetId, col, row, "horizontal", border?.top);
+          if (override || !this.borders[sheetId]?.[col]?.[row]?.top) {
+              this.history.update("borders", sheetId, col, row, "top", border?.top);
+              if (border?.top &&
+                  row > 0 &&
+                  !deepEquals(this.getCellBorder({ sheetId, col, row: row - 1 })?.bottom, border?.top)) {
+                  this.history.update("borders", sheetId, col, row - 1, "bottom", undefined);
+              }
           }
-          if (override || !this.borders?.[sheetId]?.[col + 1]?.[row]?.vertical) {
-              this.history.update("borders", sheetId, col + 1, row, "vertical", border?.right);
+          if (override || !this.borders[sheetId]?.[col]?.[row]?.right) {
+              this.history.update("borders", sheetId, col, row, "right", border?.right);
+              if (border?.right &&
+                  col < maxCol &&
+                  !deepEquals(this.getCellBorder({ sheetId, col: col + 1, row })?.left, border?.right)) {
+                  this.history.update("borders", sheetId, col + 1, row, "left", undefined);
+              }
           }
-          if (override || !this.borders?.[sheetId]?.[col]?.[row + 1]?.horizontal) {
-              this.history.update("borders", sheetId, col, row + 1, "horizontal", border?.bottom);
+          if (override || !this.borders[sheetId]?.[col]?.[row]?.bottom) {
+              this.history.update("borders", sheetId, col, row, "bottom", border?.bottom);
+              if (border?.bottom &&
+                  row < maxRow &&
+                  !deepEquals(this.getCellBorder({ sheetId, col, row: row + 1 })?.top, border?.bottom)) {
+                  this.history.update("borders", sheetId, col, row + 1, "top", undefined);
+              }
           }
       }
       /**
        * Remove the borders of a zone
        */
-      clearBorders(sheetId, zones) {
+      clearBorders(sheetId, zones, eraseBoundaries = false) {
+          const maxCol = this.getters.getNumberCols(sheetId) - 1;
+          const maxRow = this.getters.getNumberRows(sheetId) - 1;
           for (let zone of recomputeZones(zones)) {
               for (let row = zone.top; row <= zone.bottom; row++) {
-                  this.history.update("borders", sheetId, zone.right + 1, row, "vertical", undefined);
+                  if (eraseBoundaries) {
+                      if (zone.left > 0) {
+                          this.history.update("borders", sheetId, zone.left - 1, row, "right", undefined);
+                      }
+                      if (zone.right < maxCol) {
+                          this.history.update("borders", sheetId, zone.right + 1, row, "left", undefined);
+                      }
+                  }
                   for (let col = zone.left; col <= zone.right; col++) {
                       this.history.update("borders", sheetId, col, row, undefined);
+                      if (eraseBoundaries) {
+                          if (zone.top > 0) {
+                              this.history.update("borders", sheetId, col, zone.top - 1, "bottom", undefined);
+                          }
+                          if (zone.bottom < maxRow) {
+                              this.history.update("borders", sheetId, col, zone.bottom + 1, "top", undefined);
+                          }
+                      }
                   }
               }
-              for (let col = zone.left; col <= zone.right; col++) {
-                  this.history.update("borders", sheetId, col, zone.bottom + 1, "horizontal", undefined);
-              }
           }
       }
       /**
@@ -53107,41 +53179,63 @@ stores.inject(MyMetaStore, storeInstance);
        */
       setBorders(sheetId, zones, position, border) {
           if (position === "clear") {
-              return this.clearBorders(sheetId, zones);
+              return this.clearBorders(sheetId, zones, true);
           }
           for (let zone of recomputeZones(zones)) {
-              if (position === "h" || position === "hv" || position === "all") {
-                  for (let row = zone.top + 1; row <= zone.bottom; row++) {
+              if (position === "all") {
+                  for (let row = zone.top; row <= zone.bottom; row++) {
                       for (let col = zone.left; col <= zone.right; col++) {
-                          this.addBorder(sheetId, col, row, { top: border });
+                          this.addBorder(sheetId, col, row, {
+                              top: border,
+                              right: border,
+                              bottom: border,
+                              left: border,
+                          });
                       }
                   }
               }
-              if (position === "v" || position === "hv" || position === "all") {
+              if (position === "h" || position === "hv") {
+                  if (zone.top === zone.bottom) {
+                      continue;
+                  }
+                  for (let col = zone.left; col <= zone.right; col++) {
+                      this.addBorder(sheetId, col, zone.top, { bottom: border });
+                      for (let row = zone.top + 1; row < zone.bottom; row++) {
+                          this.addBorder(sheetId, col, row, { top: border, bottom: border });
+                      }
+                      this.addBorder(sheetId, col, zone.bottom, { top: border });
+                  }
+              }
+              if (position === "v" || position === "hv") {
+                  if (zone.left === zone.right) {
+                      continue;
+                  }
                   for (let row = zone.top; row <= zone.bottom; row++) {
-                      for (let col = zone.left + 1; col <= zone.right; col++) {
-                          this.addBorder(sheetId, col, row, { left: border });
+                      this.addBorder(sheetId, zone.left, row, { right: border });
+                      for (let col = zone.left + 1; col < zone.right; col++) {
+                          this.addBorder(sheetId, col, row, { left: border, right: border });
                       }
+                      this.addBorder(sheetId, zone.right, row, { left: border });
                   }
               }
-              if (position === "left" || position === "all" || position === "external") {
+              if (position === "left" || position === "external") {
                   for (let row = zone.top; row <= zone.bottom; row++) {
                       this.addBorder(sheetId, zone.left, row, { left: border });
                   }
               }
-              if (position === "right" || position === "all" || position === "external") {
+              if (position === "right" || position === "external") {
                   for (let row = zone.top; row <= zone.bottom; row++) {
-                      this.addBorder(sheetId, zone.right + 1, row, { left: border });
+                      this.addBorder(sheetId, zone.right, row, { right: border });
                   }
               }
-              if (position === "top" || position === "all" || position === "external") {
+              if (position === "top" || position === "external") {
                   for (let col = zone.left; col <= zone.right; col++) {
                       this.addBorder(sheetId, col, zone.top, { top: border });
                   }
               }
-              if (position === "bottom" || position === "all" || position === "external") {
+              if (position === "bottom" || position === "external") {
                   for (let col = zone.left; col <= zone.right; col++) {
-                      this.addBorder(sheetId, col, zone.bottom + 1, { top: border });
+                      this.addBorder(sheetId, col, zone.bottom, { bottom: border });
                   }
               }
           }
@@ -59886,7 +59980,11 @@ stores.inject(MyMetaStore, storeInstance);
       computeFormulaCell(formulaPosition, cellData) {
           const formulaReturn = updateEvalContextAndExecute(cellData.compiledFormula, this.compilationParams, formulaPosition.sheetId, this.buildSafeGetSymbolValue(), formulaPosition);
           if (!isMatrix(formulaReturn)) {
-              return createEvaluatedCell(nullValueToZeroValue(formulaReturn), this.getters.getLocale(), cellData);
+              const evaluatedCell = createEvaluatedCell(nullValueToZeroValue(formulaReturn), this.getters.getLocale(), cellData);
+              if (evaluatedCell.type === CellValueType.error) {
+                  evaluatedCell.errorOriginPosition = formulaReturn.errorOriginPosition ?? formulaPosition;
+              }
+              return evaluatedCell;
           }
           this.assertSheetHasEnoughSpaceToSpreadFormulaResult(formulaPosition, formulaReturn);
           const nbColumns = formulaReturn.length;
@@ -59959,6 +60057,9 @@ stores.inject(MyMetaStore, storeInstance);
               const position = { sheetId, col: i + col, row: j + row };
               const cell = this.getters.getCell(position);
               const evaluatedCell = createEvaluatedCell(nullValueToZeroValue(matrixResult[i][j]), this.getters.getLocale(), cell);
+              if (evaluatedCell.type === CellValueType.error) {
+                  evaluatedCell.errorOriginPosition = matrixResult[i][j].errorOriginPosition ?? position;
+              }
               this.evaluatedCells.set(position, evaluatedCell);
           };
           return spreadValues;
@@ -61517,7 +61618,7 @@ stores.inject(MyMetaStore, storeInstance);
                       const symbolIndex = rowDomain.findIndex((row) => row.field === symbolName);
                       return this.getPivotHeaderValueAndFormat(rowDomain.slice(0, symbolIndex + 1));
                   }
-                  return this._getPivotCellValueAndFormat(symbolName, domain);
+                  return this.getPivotCellValueAndFormat(symbolName, domain);
               };
               const result = this.getters.evaluateCompiledFormula(measure.computedBy.sheetId, formula, getSymbolValue);
               if (isMatrix(result)) {
@@ -64703,14 +64804,12 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   break;
               case "AUTORESIZE_ROWS":
-                  for (let row of cmd.rows) {
-                      this.dispatch("RESIZE_COLUMNS_ROWS", {
-                          elements: [row],
-                          dimension: "ROW",
-                          size: null,
-                          sheetId: cmd.sheetId,
-                      });
-                  }
+                  this.dispatch("RESIZE_COLUMNS_ROWS", {
+                      elements: cmd.rows,
+                      dimension: "ROW",
+                      size: null,
+                      sheetId: cmd.sheetId,
+                  });
                   break;
           }
       }
@@ -67106,8 +67205,6 @@ stores.inject(MyMetaStore, storeInstance);
       right;
       offsetX;
       offsetY;
-      offsetScrollbarX;
-      offsetScrollbarY;
       canScrollVertically;
       canScrollHorizontally;
       viewportWidth;
@@ -67118,10 +67215,17 @@ stores.inject(MyMetaStore, storeInstance);
           this.getters = getters;
           this.sheetId = sheetId;
           this.boundaries = boundaries;
-          this.viewportWidth = sizeInGrid.width;
-          this.viewportHeight = sizeInGrid.height;
-          this.offsetScrollbarX = offsets.x;
-          this.offsetScrollbarY = offsets.y;
+          if (sizeInGrid.width < 0 || sizeInGrid.height < 0) {
+              throw new Error("Viewport size cannot be negative");
+          }
+          this.viewportWidth = sizeInGrid.height && sizeInGrid.width;
+          this.viewportHeight = sizeInGrid.width && sizeInGrid.height;
+          this.top = boundaries.top;
+          this.bottom = boundaries.bottom;
+          this.left = boundaries.left;
+          this.right = boundaries.right;
+          this.offsetX = offsets.x;
+          this.offsetY = offsets.y;
           this.canScrollVertically = options.canScrollVertically;
           this.canScrollHorizontally = options.canScrollHorizontally;
           this.offsetCorrectionX = this.getters.getColDimensions(this.sheetId, this.boundaries.left).start;
@@ -67162,9 +67266,9 @@ stores.inject(MyMetaStore, storeInstance);
               Math.min(topRowSize, this.viewportHeight - lastRowSize) // Add pixels that allows the snapping at maximum vertical scroll
               );
               height = Math.max(height, this.viewportHeight); // if the viewport grid size is smaller than its client height, return client height
-          }
-          if (lastRowEnd + FOOTER_HEIGHT > height && !this.getters.isReadonly()) {
-              height += FOOTER_HEIGHT;
+              if (lastRowEnd + FOOTER_HEIGHT > height && !this.getters.isReadonly()) {
+                  height += FOOTER_HEIGHT;
+              }
           }
           return { width, height };
       }
@@ -67177,7 +67281,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
               return -1;
           }
-          return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left);
+          return this.searchHeaderIndex("COL", x - this.offsetCorrectionX + this.snapCorrection.x, this.left);
       }
       /**
        * Return the index of a row given an offset y, based on the pane top
@@ -67188,7 +67292,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
               return -1;
           }
-          return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top);
+          return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY + this.snapCorrection.y, this.top);
       }
       /**
        * This function will make sure that the provided cell position (or current selected position) is part of
@@ -67208,55 +67312,29 @@ stores.inject(MyMetaStore, storeInstance);
       }
       adjustPositionX(targetCol) {
           const sheetId = this.sheetId;
-          const { end } = this.getters.getColDimensions(sheetId, targetCol);
-          if (this.offsetX + this.offsetCorrectionX + this.viewportWidth < end) {
-              const maxCol = this.getters.getNumberCols(sheetId);
-              let finalTarget = targetCol;
-              while (this.getters.isColHidden(sheetId, finalTarget) && finalTarget < maxCol) {
-                  finalTarget++;
-              }
-              const finalTargetEnd = this.getters.getColDimensions(sheetId, finalTarget).end;
-              const startIndex = this.searchHeaderIndex("COL", finalTargetEnd - this.viewportWidth - this.offsetCorrectionX, this.boundaries.left);
-              this.offsetScrollbarX =
-                  this.getters.getColDimensions(sheetId, startIndex).end - this.offsetCorrectionX;
-          }
-          else if (this.left > targetCol) {
-              let finalTarget = targetCol;
-              while (this.getters.isColHidden(sheetId, finalTarget) && finalTarget > 0) {
-                  finalTarget--;
-              }
-              this.offsetScrollbarX =
-                  this.getters.getColDimensions(sheetId, finalTarget).start - this.offsetCorrectionX;
+          const { start, end } = this.getters.getColDimensions(sheetId, targetCol);
+          if (this.offsetX + this.viewportWidth + this.offsetCorrectionX < end) {
+              this.offsetX = end - this.viewportWidth;
+          }
+          else if (this.offsetX + this.offsetCorrectionX > start) {
+              this.offsetX = start - this.offsetCorrectionX;
           }
           this.adjustViewportZoneX();
       }
       adjustPositionY(targetRow) {
           const sheetId = this.sheetId;
-          const { end } = this.getters.getRowDimensions(sheetId, targetRow);
+          const { start, end } = this.getters.getRowDimensions(sheetId, targetRow);
           if (this.offsetY + this.viewportHeight + this.offsetCorrectionY < end) {
-              const maxRow = this.getters.getNumberRows(sheetId);
-              let finalTarget = targetRow;
-              while (this.getters.isRowHidden(sheetId, finalTarget) && finalTarget < maxRow) {
-                  finalTarget++;
-              }
-              const finalTargetEnd = this.getters.getRowDimensions(sheetId, finalTarget).end;
-              const startIndex = this.searchHeaderIndex("ROW", finalTargetEnd - this.viewportHeight - this.offsetCorrectionY, this.boundaries.top);
-              this.offsetScrollbarY =
-                  this.getters.getRowDimensions(sheetId, startIndex).end - this.offsetCorrectionY;
+              this.offsetY = end - this.viewportHeight;
           }
-          else if (this.top > targetRow) {
-              let finalTarget = targetRow;
-              while (this.getters.isRowHidden(sheetId, finalTarget) && finalTarget > 0) {
-                  finalTarget--;
-              }
-              this.offsetScrollbarY =
-                  this.getters.getRowDimensions(sheetId, finalTarget).start - this.offsetCorrectionY;
+          else if (this.offsetY + this.offsetCorrectionY > start) {
+              this.offsetY = start - this.offsetCorrectionY;
           }
           this.adjustViewportZoneY();
       }
       willNewOffsetScrollViewport(offsetX, offsetY) {
-          return ((this.canScrollHorizontally && this.offsetScrollbarX !== offsetX) ||
-              (this.canScrollVertically && this.offsetScrollbarY !== offsetY));
+          return ((this.canScrollHorizontally && this.offsetX !== offsetX) ||
+              (this.canScrollVertically && this.offsetY !== offsetY));
       }
       setViewportOffset(offsetX, offsetY) {
           this.setViewportOffsetX(offsetX);
@@ -67273,11 +67351,19 @@ stores.inject(MyMetaStore, storeInstance);
        */
       getVisibleRect(zone) {
           const targetZone = intersection(zone, this);
+          const scrollDeltaX = this.snapCorrection.x;
+          const scrollDeltaY = this.snapCorrection.y;
           if (targetZone) {
-              const x = this.getters.getColRowOffset("COL", this.left, targetZone.left) + this.offsetCorrectionX;
-              const y = this.getters.getColRowOffset("ROW", this.top, targetZone.top) + this.offsetCorrectionY;
-              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
-              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
+              const x = this.getters.getColRowOffset("COL", this.left, targetZone.left) +
+                  this.offsetCorrectionX -
+                  (this.left !== targetZone.left ? scrollDeltaX : 0);
+              const y = this.getters.getColRowOffset("ROW", this.top, targetZone.top) +
+                  this.offsetCorrectionY -
+                  (this.top !== targetZone.top ? scrollDeltaY : 0);
+              const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1) -
+                  (this.left === targetZone.left ? scrollDeltaX : 0), this.viewportWidth);
+              const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1) -
+                  (this.top === targetZone.top ? scrollDeltaY : 0), this.viewportHeight);
               return { x, y, width, height };
           }
           return undefined;
@@ -67289,12 +67375,14 @@ stores.inject(MyMetaStore, storeInstance);
        */
       getFullRect(zone) {
           const targetZone = intersection(zone, this);
+          const scrollDeltaX = this.snapCorrection.x;
+          const scrollDeltaY = this.snapCorrection.y;
           if (targetZone) {
               const x = this.getters.getColRowOffset("COL", this.left, zone.left) + this.offsetCorrectionX;
               const y = this.getters.getColRowOffset("ROW", this.top, zone.top) + this.offsetCorrectionY;
               const width = this.getters.getColRowOffset("COL", zone.left, zone.right + 1);
               const height = this.getters.getColRowOffset("ROW", zone.top, zone.bottom + 1);
-              return { x, y, width, height };
+              return { x: x - scrollDeltaX, y: y - scrollDeltaY, width, height };
           }
           return undefined;
       }
@@ -67305,6 +67393,9 @@ stores.inject(MyMetaStore, storeInstance);
               !this.getters.isRowHidden(this.sheetId, row));
       }
       searchHeaderIndex(dimension, position, startIndex = 0) {
+          if (this.viewportWidth <= 0 || this.viewportHeight <= 0) {
+              return -1;
+          }
           const sheetId = this.sheetId;
           const headers = this.getters.getNumberHeaders(sheetId, dimension);
           // using a binary search:
@@ -67330,36 +67421,36 @@ stores.inject(MyMetaStore, storeInstance);
           if (!this.canScrollHorizontally) {
               return;
           }
-          this.offsetScrollbarX = offsetX;
+          this.offsetX = offsetX;
           this.adjustViewportZoneX();
       }
       setViewportOffsetY(offsetY) {
           if (!this.canScrollVertically) {
               return;
           }
-          this.offsetScrollbarY = offsetY;
+          this.offsetY = offsetY;
           this.adjustViewportZoneY();
       }
       /** Corrects the viewport's horizontal offset based on the current structure
-       *  To make sure that at least on column is visible inside the viewport.
+       *  To make sure that at least one column is visible inside the viewport.
        */
       adjustViewportOffsetX() {
           if (this.canScrollHorizontally) {
               const { width: viewportWidth } = this.getMaxSize();
-              if (this.viewportWidth + this.offsetScrollbarX > viewportWidth) {
-                  this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
+              if (this.viewportWidth + this.offsetX > viewportWidth) {
+                  this.offsetX = Math.max(0, viewportWidth - this.viewportWidth);
               }
           }
           this.adjustViewportZoneX();
       }
       /** Corrects the viewport's vertical offset based on the current structure
-       *  To make sure that at least on row is visible inside the viewport.
+       *  To make sure that at least one row is visible inside the viewport.
        */
       adjustViewportOffsetY() {
           if (this.canScrollVertically) {
               const { height: paneHeight } = this.getMaxSize();
-              if (this.viewportHeight + this.offsetScrollbarY > paneHeight) {
-                  this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
+              if (this.viewportHeight + this.offsetY > paneHeight) {
+                  this.offsetY = Math.max(0, paneHeight - this.viewportHeight);
               }
           }
           this.adjustViewportZoneY();
@@ -67367,34 +67458,47 @@ stores.inject(MyMetaStore, storeInstance);
       /** Updates the pane zone and snapped offset based on its horizontal
        * offset (will find Left) and its width (will find Right) */
       adjustViewportZoneX() {
-          const sheetId = this.sheetId;
-          this.left = this.searchHeaderIndex("COL", this.offsetScrollbarX, this.boundaries.left);
-          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", this.viewportWidth, this.left));
+          this.left = this.searchHeaderIndex("COL", this.offsetX, this.boundaries.left);
+          this.right = Math.min(this.boundaries.right, this.searchHeaderIndex("COL", 
+          // if we hit the border of two cells, we want to match the previous
+          Math.max(this.viewportWidth + this.snapCorrection.x - 0.1), this.left));
+          if (!this.viewportWidth) {
+              return;
+          }
           if (this.left === -1) {
               this.left = this.boundaries.left;
           }
           if (this.right === -1) {
-              this.right = this.getters.getNumberCols(sheetId) - 1;
+              this.right = this.boundaries.right;
           }
-          this.offsetX =
-              this.getters.getColDimensions(sheetId, this.left).start -
-                  this.getters.getColDimensions(sheetId, this.boundaries.left).start;
       }
       /** Updates the pane zone and snapped offset based on its vertical
        * offset (will find Top) and its width (will find Bottom) */
       adjustViewportZoneY() {
-          const sheetId = this.sheetId;
-          this.top = this.searchHeaderIndex("ROW", this.offsetScrollbarY, this.boundaries.top);
-          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", this.viewportHeight, this.top));
+          this.top = this.searchHeaderIndex("ROW", this.offsetY, this.boundaries.top);
+          this.bottom = Math.min(this.boundaries.bottom, this.searchHeaderIndex("ROW", 
+          // if we hit the border of two cells, we want to match the previous
+          Math.max(this.viewportHeight + this.snapCorrection.y - 0.1, 0), this.top));
+          if (!this.viewportHeight) {
+              return;
+          }
           if (this.top === -1) {
               this.top = this.boundaries.top;
           }
           if (this.bottom === -1) {
-              this.bottom = this.getters.getNumberRows(sheetId) - 1;
+              this.bottom = this.boundaries.bottom;
           }
-          this.offsetY =
-              this.getters.getRowDimensions(sheetId, this.top).start -
-                  this.getters.getRowDimensions(sheetId, this.boundaries.top).start;
+      }
+      /** represents the part of the header on the topLeft that could be partially
+       * hidden due to the scroll
+       * */
+      get snapCorrection() {
+          return {
+              x: Math.abs(this.offsetX -
+                  this.getters.getColRowOffset("COL", this.boundaries.left, Math.max(0, this.left))),
+              y: Math.abs(this.offsetY -
+                  this.getters.getColRowOffset("ROW", this.boundaries.top, Math.max(0, this.top))),
+          };
       }
   }
 
@@ -67457,14 +67561,13 @@ stores.inject(MyMetaStore, storeInstance);
           "getColRowOffsetInViewport",
           "getMainViewportCoordinates",
           "getActiveSheetScrollInfo",
-          "getActiveSheetDOMScrollInfo",
           "getSheetViewVisibleCols",
           "getSheetViewVisibleRows",
           "getFrozenSheetViewRatio",
-          "isPositionVisible",
+          "isPixelPositionVisible",
           "getColDimensionsInViewport",
           "getRowDimensionsInViewport",
-          "getAllActiveViewportsZones",
+          "getAllActiveViewportsZonesAndRect",
           "getRect",
       ];
       viewports = {};
@@ -67667,8 +67770,8 @@ stores.inject(MyMetaStore, storeInstance);
           return this.getMainViewport(sheetId);
       }
       /**
-       * Return the scroll info of the active sheet, ie. the offset between the viewport left/top side and
-       * the grid left/top side, snapped to the columns/rows.
+       * Return the DOM scroll info of the active sheet, ie. the offset between the viewport left/top side and
+       * the grid left/top side, corresponding to the scroll of the scrollbars and not snapped to the grid.
        */
       getActiveSheetScrollInfo() {
           const sheetId = this.getters.getActiveSheetId();
@@ -67678,28 +67781,16 @@ stores.inject(MyMetaStore, storeInstance);
               scrollY: viewport.offsetY,
           };
       }
-      /**
-       * Return the DOM scroll info of the active sheet, ie. the offset between the viewport left/top side and
-       * the grid left/top side, corresponding to the scroll of the scrollbars and not snapped to the grid.
-       */
-      getActiveSheetDOMScrollInfo() {
-          const sheetId = this.getters.getActiveSheetId();
-          const viewport = this.getMainInternalViewport(sheetId);
-          return {
-              scrollX: viewport.offsetScrollbarX,
-              scrollY: viewport.offsetScrollbarY,
-          };
-      }
       getSheetViewVisibleCols() {
           const sheetId = this.getters.getActiveSheetId();
           const viewports = this.getSubViewports(sheetId);
           //TODO ake another commit to eimprove this
-          return [...new Set(viewports.map((v) => range(v.left, v.right + 1)).flat())].filter((col) => !this.getters.isHeaderHidden(sheetId, "COL", col));
+          return [...new Set(viewports.map((v) => range(v.left, v.right + 1)).flat())].filter((col) => col >= 0 && !this.getters.isHeaderHidden(sheetId, "COL", col));
       }
       getSheetViewVisibleRows() {
           const sheetId = this.getters.getActiveSheetId();
           const viewports = this.getSubViewports(sheetId);
-          return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => !this.getters.isHeaderHidden(sheetId, "ROW", row));
+          return [...new Set(viewports.map((v) => range(v.top, v.bottom + 1)).flat())].filter((row) => row >= 0 && !this.getters.isHeaderHidden(sheetId, "ROW", row));
       }
       /**
        * Get the positions of all the cells that are visible in the viewport, taking merges into account.
@@ -67742,19 +67833,19 @@ stores.inject(MyMetaStore, storeInstance);
               maxOffsetY: Math.max(0, height - viewport.viewportHeight + 1),
           };
       }
-      getColRowOffsetInViewport(dimension, referenceIndex, index) {
-          const sheetId = this.getters.getActiveSheetId();
-          const visibleCols = this.getters.getSheetViewVisibleCols();
-          const visibleRows = this.getters.getSheetViewVisibleRows();
-          if (index < referenceIndex) {
-              return -this.getColRowOffsetInViewport(dimension, index, referenceIndex);
+      getColRowOffsetInViewport(dimension, referenceHeaderIndex, targetHeaderIndex) {
+          if (targetHeaderIndex < referenceHeaderIndex) {
+              return -this.getColRowOffsetInViewport(dimension, targetHeaderIndex, referenceHeaderIndex);
           }
+          const sheetId = this.getters.getActiveSheetId();
+          const visibleHeaders = dimension === "COL"
+              ? this.getters.getSheetViewVisibleCols()
+              : this.getters.getSheetViewVisibleRows();
+          const startIndex = visibleHeaders.findIndex((header) => referenceHeaderIndex >= header);
+          const endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+          const relevantIndexes = visibleHeaders.slice(startIndex, endIndex);
           let offset = 0;
-          const visibleIndexes = dimension === "COL" ? visibleCols : visibleRows;
-          for (let i = referenceIndex; i < index; i++) {
-              if (!visibleIndexes.includes(i)) {
-                  continue;
-              }
+          for (const i of relevantIndexes) {
               offset += this.getters.getHeaderSize(sheetId, dimension, i);
           }
           return offset;
@@ -67801,7 +67892,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return { canEdgeScroll, direction, delay };
       }
-      getEdgeScrollRow(y, previousY, tartingY) {
+      getEdgeScrollRow(y, previousY, startingY) {
           let canEdgeScroll = false;
           let direction = 0;
           let delay = 0;
@@ -67822,7 +67913,7 @@ stores.inject(MyMetaStore, storeInstance);
               delay = scrollDelay(y - height);
               direction = 1;
           }
-          else if (y < offsetCorrectionY && tartingY >= offsetCorrectionY && currentOffsetY > 0) {
+          else if (y < offsetCorrectionY && startingY >= offsetCorrectionY && currentOffsetY > 0) {
               // 2
               canEdgeScroll = true;
               delay = scrollDelay(offsetCorrectionY - y);
@@ -67848,13 +67939,7 @@ stores.inject(MyMetaStore, storeInstance);
        */
       getVisibleRectWithoutHeaders(zone) {
           const sheetId = this.getters.getActiveSheetId();
-          const viewportRects = this.getSubViewports(sheetId)
-              .map((viewport) => viewport.getVisibleRect(zone))
-              .filter(isDefined);
-          if (viewportRects.length === 0) {
-              return { x: 0, y: 0, width: 0, height: 0 };
-          }
-          return this.recomposeRect(viewportRects);
+          return this.mapViewportsToRect(sheetId, (viewport) => viewport.getVisibleRect(zone));
       }
       /**
        * Computes the actual size and position (:Rect) of the zone on the canvas
@@ -67862,13 +67947,7 @@ stores.inject(MyMetaStore, storeInstance);
        */
       getRect(zone) {
           const sheetId = this.getters.getActiveSheetId();
-          const viewportRects = this.getSubViewports(sheetId)
-              .map((viewport) => viewport.getFullRect(zone))
-              .filter(isDefined);
-          if (viewportRects.length === 0) {
-              return { x: 0, y: 0, width: 0, height: 0 };
-          }
-          const rect = this.recomposeRect(viewportRects);
+          const rect = this.mapViewportsToRect(sheetId, (viewport) => viewport.getFullRect(zone));
           return { ...rect, x: rect.x + this.gridOffsetX, y: rect.y + this.gridOffsetY };
       }
       /**
@@ -67888,34 +67967,43 @@ stores.inject(MyMetaStore, storeInstance);
        * column of the current viewport
        */
       getColDimensionsInViewport(sheetId, col) {
-          const left = largeMin(this.getters.getSheetViewVisibleCols());
-          const start = this.getters.getColRowOffsetInViewport("COL", left, col);
-          const size = this.getters.getColSize(sheetId, col);
-          const isColHidden = this.getters.isColHidden(sheetId, col);
-          return {
-              start,
-              size: size,
-              end: start + (isColHidden ? 0 : size),
+          const zone = {
+              left: col,
+              right: col,
+              top: 0,
+              bottom: this.getters.getNumberRows(sheetId) - 1,
           };
+          const { x, width } = this.getVisibleRect(zone);
+          const start = x - this.gridOffsetX;
+          return { start, size: width, end: start + width };
       }
       /**
        * Returns the size, start and end coordinates of a row relative to the top row
        * of the current viewport
        */
       getRowDimensionsInViewport(sheetId, row) {
-          const top = largeMin(this.getters.getSheetViewVisibleRows());
-          const start = this.getters.getColRowOffsetInViewport("ROW", top, row);
-          const size = this.getters.getRowSize(sheetId, row);
-          const isRowHidden = this.getters.isRowHidden(sheetId, row);
-          return {
-              start,
-              size: size,
-              end: start + (isRowHidden ? 0 : size),
+          const zone = {
+              left: 0,
+              right: this.getters.getNumberCols(sheetId) - 1,
+              top: row,
+              bottom: row,
           };
+          const { y, height } = this.getVisibleRect(zone);
+          const start = y - this.gridOffsetY;
+          return { start, size: height, end: start + height };
       }
-      getAllActiveViewportsZones() {
+      getAllActiveViewportsZonesAndRect() {
           const sheetId = this.getters.getActiveSheetId();
-          return this.getSubViewports(sheetId);
+          return this.getSubViewports(sheetId).map((viewport) => {
+              return {
+                  zone: viewport,
+                  rect: {
+                      x: viewport.offsetCorrectionX + this.gridOffsetX,
+                      y: viewport.offsetCorrectionY + this.gridOffsetY,
+                      ...viewport.getMaxSize(),
+                  },
+              };
+          });
       }
       // ---------------------------------------------------------------------------
       // Private
@@ -67974,12 +68062,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       /** gets rid of deprecated sheetIds */
       cleanViewports() {
-          const sheetIds = this.getters.getSheetIds();
-          for (let sheetId of Object.keys(this.viewports)) {
-              if (!sheetIds.includes(sheetId)) {
-                  delete this.viewports[sheetId];
-              }
+          const newViewport = {};
+          for (const sheetId of this.getters.getSheetIds()) {
+              newViewport[sheetId] = this.viewports[sheetId];
           }
+          this.viewports = newViewport;
       }
       resizeSheetView(height, width, gridOffsetX = 0, gridOffsetY = 0) {
           this.sheetViewHeight = height;
@@ -67989,7 +68076,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.recomputeViewports();
       }
       recomputeViewports() {
-          for (let sheetId of Object.keys(this.viewports)) {
+          for (const sheetId of this.getters.getSheetIds()) {
               this.resetViewports(sheetId);
           }
       }
@@ -68000,8 +68087,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getViewportOffset(sheetId) {
           return {
-              x: this.viewports[sheetId]?.bottomRight.offsetScrollbarX || 0,
-              y: this.viewports[sheetId]?.bottomRight.offsetScrollbarY || 0,
+              x: this.viewports[sheetId]?.bottomRight.offsetX || 0,
+              y: this.viewports[sheetId]?.bottomRight.offsetY || 0,
           };
       }
       resetViewports(sheetId) {
@@ -68011,8 +68098,10 @@ stores.inject(MyMetaStore, storeInstance);
           const { xSplit, ySplit } = this.getters.getPaneDivisions(sheetId);
           const nCols = this.getters.getNumberCols(sheetId);
           const nRows = this.getters.getNumberRows(sheetId);
-          const colOffset = this.getters.getColRowOffset("COL", 0, xSplit, sheetId);
-          const rowOffset = this.getters.getColRowOffset("ROW", 0, ySplit, sheetId);
+          const colOffset = Math.min(this.getters.getColRowOffset("COL", 0, xSplit, sheetId), this.sheetViewWidth);
+          const rowOffset = Math.min(this.getters.getColRowOffset("ROW", 0, ySplit, sheetId), this.sheetViewHeight);
+          const unfrozenWidth = Math.max(this.sheetViewWidth - colOffset, 0);
+          const unfrozenHeight = Math.max(this.sheetViewHeight - rowOffset, 0);
           const { xRatio, yRatio } = this.getFrozenSheetViewRatio(sheetId);
           const canScrollHorizontally = xRatio < 1.0;
           const canScrollVertically = yRatio < 1.0;
@@ -68023,14 +68112,14 @@ stores.inject(MyMetaStore, storeInstance);
                   new InternalViewport(this.getters, sheetId, { left: 0, right: xSplit - 1, top: 0, bottom: ySplit - 1 }, { width: colOffset, height: rowOffset }, { canScrollHorizontally: false, canScrollVertically: false }, { x: 0, y: 0 })) ||
                   undefined,
               topRight: (ySplit &&
-                  new InternalViewport(this.getters, sheetId, { left: xSplit, right: nCols - 1, top: 0, bottom: ySplit - 1 }, { width: this.sheetViewWidth - colOffset, height: rowOffset }, { canScrollHorizontally, canScrollVertically: false }, { x: canScrollHorizontally ? previousOffset.x : 0, y: 0 })) ||
+                  new InternalViewport(this.getters, sheetId, { left: xSplit, right: nCols - 1, top: 0, bottom: ySplit - 1 }, { width: unfrozenWidth, height: rowOffset }, { canScrollHorizontally, canScrollVertically: false }, { x: canScrollHorizontally ? previousOffset.x : 0, y: 0 })) ||
                   undefined,
               bottomLeft: (xSplit &&
-                  new InternalViewport(this.getters, sheetId, { left: 0, right: xSplit - 1, top: ySplit, bottom: nRows - 1 }, { width: colOffset, height: this.sheetViewHeight - rowOffset }, { canScrollHorizontally: false, canScrollVertically }, { x: 0, y: canScrollVertically ? previousOffset.y : 0 })) ||
+                  new InternalViewport(this.getters, sheetId, { left: 0, right: xSplit - 1, top: ySplit, bottom: nRows - 1 }, { width: colOffset, height: unfrozenHeight }, { canScrollHorizontally: false, canScrollVertically }, { x: 0, y: canScrollVertically ? previousOffset.y : 0 })) ||
                   undefined,
               bottomRight: new InternalViewport(this.getters, sheetId, { left: xSplit, right: nCols - 1, top: ySplit, bottom: nRows - 1 }, {
-                  width: this.sheetViewWidth - colOffset,
-                  height: this.sheetViewHeight - rowOffset,
+                  width: unfrozenWidth,
+                  height: unfrozenHeight,
               }, { canScrollHorizontally, canScrollVertically }, {
                   x: canScrollHorizontally ? previousOffset.x : 0,
                   y: canScrollVertically ? previousOffset.y : 0,
@@ -68085,7 +68174,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return result;
       }
-      isPositionVisible(position) {
+      isPixelPositionVisible(position) {
           const { scrollX, scrollY } = this.getters.getActiveSheetScrollInfo();
           const { x: mainViewportX, y: mainViewportY } = this.getters.getMainViewportCoordinates();
           const { width, height } = this.getters.getSheetViewDimension();
@@ -68107,12 +68196,26 @@ stores.inject(MyMetaStore, storeInstance);
           const height = this.sheetViewHeight + this.gridOffsetY;
           return { xRatio: offsetCorrectionX / width, yRatio: offsetCorrectionY / height };
       }
-      recomposeRect(viewportRects) {
-          const x = Math.min(...viewportRects.map((rect) => rect.x));
-          const y = Math.min(...viewportRects.map((rect) => rect.y));
-          const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
-          const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
-          return { x, y, width, height };
+      mapViewportsToRect(sheetId, rectCallBack) {
+          let x = Infinity;
+          let y = Infinity;
+          let width = 0;
+          let height = 0;
+          let hasViewports = false;
+          for (const viewport of this.getSubViewports(sheetId)) {
+              const rect = rectCallBack(viewport);
+              if (rect) {
+                  hasViewports = true;
+                  x = Math.min(x, rect.x);
+                  y = Math.min(y, rect.y);
+                  width = Math.max(width, rect.x + rect.width);
+                  height = Math.max(height, rect.y + rect.height);
+              }
+          }
+          if (!hasViewports) {
+              return { x: 0, y: 0, width: 0, height: 0 };
+          }
+          return { x, y, width: width - x, height: height - y };
       }
   }
 
@@ -69287,7 +69390,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       moveCanvas(deltaX, deltaY) {
-          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetDOMScrollInfo();
+          const { scrollX, scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
           this.env.model.dispatch("SET_VIEWPORT_OFFSET", {
               offsetX: scrollX + deltaX,
               offsetY: scrollY + deltaY,
@@ -70480,12 +70583,8 @@ stores.inject(MyMetaStore, storeInstance);
   .o-spreadsheet {
     position: relative;
     display: grid;
-    color: ${TEXT_BODY};
     font-size: 14px;
 
-    input {
-      background-color: white;
-    }
     .text-muted {
       color: ${TEXT_BODY_MUTED} !important;
     }
@@ -71732,6 +71831,9 @@ stores.inject(MyMetaStore, storeInstance);
       observe(owner, callbacks) {
           this.observers.set(owner, { owner, callbacks });
       }
+      detachObserver(owner) {
+          this.observers.delete(owner);
+      }
       /**
        * Capture the stream for yourself
        */
@@ -71824,6 +71926,9 @@ stores.inject(MyMetaStore, storeInstance);
       observe(owner, callbacks) {
           this.stream.observe(owner, callbacks);
       }
+      detachObserver(owner) {
+          this.stream.detachObserver(owner);
+      }
       release(owner) {
           if (this.stream.isListening(owner)) {
               this.stream.release(owner);
@@ -75273,9 +75378,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.2.0-alpha.4";
-  __info__.date = "2025-01-29T06:30:12.773Z";
-  __info__.hash = "6838c26";
+  __info__.version = "18.2.0-alpha.6";
+  __info__.date = "2025-02-05T06:50:47.008Z";
+  __info__.hash = "dae9ab2";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);