@odoo/o-spreadsheet 18.4.0-alpha.9 → 18.4.1

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.4.0-alpha.9
- * @date 2025-06-19T18:23:22.025Z
- * @hash 6d4d685
+ * @version 18.4.1
+ * @date 2025-06-27T09:13:01.303Z
+ * @hash 5cecc0e
  */
 
 (function (exports, owl) {
@@ -163,6 +163,7 @@
   const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
   const COMPOSER_ASSISTANT_COLOR = "#9B359B";
   const COLOR_TRANSPARENT = "#00000000";
+  const TABLE_HOVER_BACKGROUND_COLOR = "#017E8414";
   const CHART_WATERFALL_POSITIVE_COLOR = "#4EA7F2";
   const CHART_WATERFALL_NEGATIVE_COLOR = "#EA6175";
   const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
@@ -6848,19 +6849,17 @@
   const textWidthCache = {};
   function computeTextWidth(context, text, style, fontUnit = "pt") {
       const font = computeTextFont(style, fontUnit);
-      context.save();
-      context.font = font;
-      const width = computeCachedTextWidth(context, text);
-      context.restore();
-      return width;
+      return computeCachedTextWidth(context, text, font);
   }
-  function computeCachedTextWidth(context, text) {
-      const font = context.font;
+  function computeCachedTextWidth(context, text, font) {
       if (!textWidthCache[font]) {
           textWidthCache[font] = {};
       }
       if (textWidthCache[font][text] === undefined) {
+          const oldFont = context.font;
+          context.font = font;
           textWidthCache[font][text] = context.measureText(text).width;
+          context.font = oldFont;
       }
       return textWidthCache[font][text];
   }
@@ -7025,19 +7024,19 @@
   }
   // Inspired from https://stackoverflow.com/a/10511598
   function clipTextWithEllipsis(ctx, text, maxWidth) {
-      let width = computeCachedTextWidth(ctx, text);
+      let width = computeCachedTextWidth(ctx, text, ctx.font);
       if (width <= maxWidth) {
           return text;
       }
       const ellipsis = "…";
-      const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis);
+      const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
       if (width <= ellipsisWidth) {
           return text;
       }
       let len = text.length;
       while (width >= maxWidth - ellipsisWidth && len-- > 0) {
           text = text.substring(0, len);
-          width = computeCachedTextWidth(ctx, text);
+          width = computeCachedTextWidth(ctx, text, ctx.font);
       }
       return text + ellipsis;
   }
@@ -7251,6 +7250,63 @@
       };
       return osClipboardContent;
   }
+  /**
+   * Applies each clipboard handler to paste its corresponding data into the target.
+   */
+  const applyClipboardHandlersPaste = (handlers, copiedData, target, options) => {
+      handlers.forEach(({ handlerName, handler }) => {
+          const data = copiedData[handlerName];
+          if (data) {
+              handler.paste(target, data, options);
+          }
+      });
+  };
+  /**
+   * Returns the paste target based on clipboard handlers.
+   * Also includes the full affected zone and the list of pasted zones for selection.
+   */
+  function getPasteTargetFromHandlers(sheetId, zones, copiedData, handlers, options) {
+      let zone = undefined;
+      const selectedZones = [];
+      const target = {
+          sheetId,
+          zones,
+      };
+      for (const { handlerName, handler } of handlers) {
+          const handlerData = copiedData[handlerName];
+          if (!handlerData) {
+              continue;
+          }
+          const currentTarget = handler.getPasteTarget(sheetId, zones, handlerData, options);
+          if (currentTarget.figureId) {
+              target.figureId = currentTarget.figureId;
+          }
+          for (const targetZone of currentTarget.zones) {
+              selectedZones.push(targetZone);
+              if (zone === undefined) {
+                  zone = targetZone;
+                  continue;
+              }
+              zone = union(zone, targetZone);
+          }
+      }
+      return {
+          target,
+          zone,
+          selectedZones,
+      };
+  }
+  /**
+   * Updates the selection after a paste operation.
+   */
+  const selectPastedZone = (selection, sourceZones, pastedZones) => {
+      const anchorCell = {
+          col: sourceZones[0].left,
+          row: sourceZones[0].top,
+      };
+      selection.getBackToDefault();
+      selection.selectZone({ cell: anchorCell, zone: union(...pastedZones) }, { scrollIntoView: false });
+  };
 
   class ClipboardHandler {
       getters;
@@ -9955,8 +10011,15 @@ stores.inject(MyMetaStore, storeInstance);
   const ModelStore = createAbstractStore("Model");
 
   class RendererStore {
-      mutators = ["register", "unRegister", "drawLayer"];
+      mutators = ["register", "unRegister", "draw", "startAnimation", "stopAnimation"];
       renderers = {};
+      model;
+      context = undefined;
+      animationFrameId = null;
+      registeredAnimations = new Set();
+      constructor(get) {
+          this.model = get(ModelStore);
+      }
       register(renderer) {
           if (!renderer.renderingLayers.length) {
               return;
@@ -9973,17 +10036,54 @@ stores.inject(MyMetaStore, storeInstance);
               this.renderers[layer] = this.renderers[layer].filter((r) => r !== renderer);
           }
       }
-      drawLayer(context, layer) {
+      drawLayer(context, layer, timeStamp) {
           const renderers = this.renderers[layer];
           if (renderers) {
               for (const renderer of renderers) {
                   context.ctx.save();
-                  renderer.drawLayer(context, layer);
+                  renderer.drawLayer(context, layer, timeStamp);
                   context.ctx.restore();
               }
           }
           return "noStateChange";
       }
+      draw(context, timestamp) {
+          context = context || this.context;
+          if (!context) {
+              throw new Error("Rendering context is not defined");
+          }
+          this.context = context;
+          for (const layer of OrderedLayers()) {
+              this.model.drawLayer(context, layer);
+              this.drawLayer(context, layer, timestamp);
+          }
+          return "noStateChange";
+      }
+      startAnimation(animationId) {
+          this.registeredAnimations.add(animationId);
+          if (!this.animationFrameId) {
+              const animationCallback = (timestamp) => {
+                  this.animationFrameId = requestAnimationFrame(animationCallback);
+                  this.draw(undefined, timestamp);
+              };
+              this.animationFrameId = requestAnimationFrame(animationCallback);
+          }
+          return "noStateChange";
+      }
+      stopAnimation(animationId) {
+          this.registeredAnimations.delete(animationId);
+          if (this.registeredAnimations.size === 0 && this.animationFrameId !== null) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+          return "noStateChange";
+      }
+      dispose() {
+          if (this.animationFrameId) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+      }
   }
 
   class SpreadsheetStore extends DisposableStore {
@@ -10007,7 +10107,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       handle(cmd) { }
       finalize() { }
-      drawLayer(ctx, layer) { }
+      drawLayer(ctx, layer, timestamp) { }
   }
 
   const VOID_COMPOSER = {
@@ -23729,11 +23829,11 @@ stores.inject(MyMetaStore, storeInstance);
   function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
       const maxValue = runtime.maxValue;
       const minValue = runtime.minValue;
-      const gaugeValue = runtime.gaugeValue;
+      const gaugeValue = getGaugeValue(runtime, "animated");
       const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
       const gaugeArcWidth = gaugeRect.width / 6;
       const gaugePercentage = gaugeValue
-          ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
+          ? (gaugeValue - minValue.value) / (maxValue.value - minValue.value)
           : 0;
       const gaugeValuePosition = {
           x: boundingRect.width / 2,
@@ -23746,7 +23846,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       // Scale down the font size if the text is too long
       const maxTextWidth = gaugeRect.width / 2;
-      const gaugeLabel = gaugeValue?.label || "-";
+      const gaugeLabel = runtime.gaugeValue?.label || "-";
       if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
           gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
       }
@@ -23886,7 +23986,7 @@ stores.inject(MyMetaStore, storeInstance);
       return inflectionValues;
   }
   function getGaugeColor(runtime) {
-      const gaugeValue = runtime.gaugeValue?.value;
+      const gaugeValue = getGaugeValue(runtime, "final");
       if (gaugeValue === undefined) {
           return GAUGE_BACKGROUND_COLOR;
       }
@@ -23974,6 +24074,11 @@ stores.inject(MyMetaStore, storeInstance);
       };
       return { bottomLeft, bottomRight, topRight, topLeft };
   }
+  function getGaugeValue(runtime, mode) {
+      return mode === "animated" && runtime.animationValue !== undefined
+          ? runtime.animationValue
+          : runtime.gaugeValue?.value;
+  }
 
   const CHART_COMMON_OPTIONS = {
       // https://www.chartjs.org/docs/latest/general/responsive.html
@@ -26328,6 +26433,365 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  const cellAnimationRegistry = new Registry();
+  cellAnimationRegistry.add("animatedBackgroundColorChange", {
+      id: "animatedBackgroundColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.style?.fillColor !== newBox?.style?.fillColor;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const colorScale = getColorScale([
+              { value: 0, color: oldBox.style.fillColor || "#ffffff" },
+              { value: 1, color: newBox.style.fillColor || "#ffffff" },
+          ]);
+          animatedBox.style.fillColor = colorScale(EASING_FN[this.easingFn](progress));
+      },
+  });
+  cellAnimationRegistry.add("animatedTextColorChange", {
+      id: "animatedTextColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.style?.textColor !== newBox?.style?.textColor;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const colorScale = getColorScale([
+              { value: 0, color: oldBox.style.textColor || "#000000" },
+              { value: 1, color: newBox.style.textColor || "#000000" },
+          ]);
+          animatedBox.style.textColor = colorScale(EASING_FN[this.easingFn](progress));
+      },
+  });
+  cellAnimationRegistry.add("animatedDataBar", {
+      id: "animatedDataBar",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.dataBarFill?.percentage !== newBox?.dataBarFill?.percentage;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const startingPercentage = oldBox?.dataBarFill?.percentage || 0;
+          const endingPercentage = newBox?.dataBarFill?.percentage || 0;
+          const value = EASING_FN[this.easingFn](progress);
+          const percentage = startingPercentage + (endingPercentage - startingPercentage) * value;
+          animatedBox.dataBarFill = {
+              color: newBox.dataBarFill?.color || oldBox.dataBarFill?.color || "#ffffff",
+              percentage: percentage,
+          };
+      },
+  });
+  cellAnimationRegistry.add("textFadeIn", {
+      id: "textFadeIn",
+      easingFn: "easeInCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          return Boolean(!oldText && newText);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          animatedBox.textOpacity = EASING_FN[this.easingFn](progress);
+      },
+  });
+  cellAnimationRegistry.add("textFadeOut", {
+      id: "textFadeOut",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          return Boolean(oldText && !newText);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const textOpacity = 1 - EASING_FN[this.easingFn](progress);
+          const style = { ...oldBox.style };
+          delete style.fillColor;
+          animatedBox.textOpacity = textOpacity;
+          animatedBox.content = oldBox.content;
+          animatedBox.clipRect = oldBox.clipRect;
+          Object.assign(animatedBox.style, style);
+      },
+  });
+  cellAnimationRegistry.add("iconFadeIn", {
+      id: "iconFadeIn",
+      easingFn: "easeInCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((!oldBox?.icons?.left && newBox?.icons?.left) ||
+              (!oldBox?.icons?.right && newBox?.icons?.right) ||
+              (!oldBox?.icons?.center && newBox?.icons?.center));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const iconOpacity = EASING_FN[this.easingFn](progress);
+          if (animatedBox.icons.left && newBox.icons.left && !oldBox.icons.left) {
+              animatedBox.icons.left.opacity = iconOpacity;
+          }
+          if (animatedBox.icons.right && newBox.icons.right && !oldBox.icons.right) {
+              animatedBox.icons.right.opacity = iconOpacity;
+          }
+          if (animatedBox.icons.center && newBox.icons.center && !oldBox.icons.center) {
+              animatedBox.icons.center.opacity = iconOpacity;
+          }
+      },
+  });
+  cellAnimationRegistry.add("iconFadeOut", {
+      id: "iconFadeOut",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((oldBox?.icons?.left && !newBox?.icons?.left) ||
+              (oldBox?.icons?.right && !newBox?.icons?.right) ||
+              (oldBox?.icons?.center && !newBox?.icons?.center));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const iconOpacity = 1 - EASING_FN[this.easingFn](progress);
+          if (!animatedBox.icons) {
+              animatedBox.icons = {};
+          }
+          if (oldBox.icons.left && !newBox.icons.left) {
+              animatedBox.icons.left = { ...oldBox.icons.left, opacity: iconOpacity };
+          }
+          if (oldBox.icons.right && !newBox.icons.right) {
+              animatedBox.icons.right = { ...oldBox.icons.right, opacity: iconOpacity };
+          }
+          if (oldBox.icons.center && !newBox.icons.center) {
+              animatedBox.icons.center = { ...oldBox.icons.center, opacity: iconOpacity };
+          }
+      },
+  });
+  cellAnimationRegistry.add("textChange", {
+      id: "textChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          // Note: here, we also animate changes to icons layout (margins/size change, or icon appearing/disappearing)
+          // because a change to the icon layout will impact where the text is positioned.
+          return Boolean(oldText && newText && (oldText !== newText || hasIconLayoutChange(newBox, oldBox)));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const value = EASING_FN[this.easingFn](progress);
+          const slideInY = newBox.y + (value - 1) * newBox.height;
+          const slideOutY = newBox.y + value * newBox.height;
+          const iconLayoutChange = hasIconLayoutChange(newBox, oldBox);
+          const slideInBox = {
+              id: newBox.id + "-text-slide-in",
+              x: newBox.x,
+              y: slideInY,
+              width: newBox.width,
+              height: newBox.height,
+              style: { ...newBox.style },
+              skipCellGridLines: true,
+              content: newBox.content ? { ...newBox.content } : undefined,
+              clipRect: newBox.clipRect || {
+                  ...newBox,
+                  // large width to avoid clipping the text it it didn't have a clipRect before,
+                  // we mainly want to clip the Y for the animation
+                  x: Math.max(0, newBox.x - (newBox.content?.width || 0)),
+                  width: newBox.width + (newBox.content?.width || 0) * 2,
+              },
+              icons: iconLayoutChange
+                  ? addClipRectToIcons(newBox.icons, newBox)
+                  : makeIconsEmpty(newBox.icons),
+          };
+          const slideOutBox = {
+              id: oldBox.id + "-text-slide-out",
+              x: newBox.x,
+              y: slideOutY,
+              width: newBox.width,
+              height: newBox.height,
+              style: { ...oldBox.style },
+              skipCellGridLines: true,
+              content: oldBox.content ? { ...oldBox.content } : undefined,
+              clipRect: oldBox.clipRect || {
+                  ...newBox,
+                  x: Math.max(0, newBox.x - (oldBox.content?.width || 0)),
+                  width: newBox.width + (oldBox.content?.width || 0) * 2,
+              },
+              icons: iconLayoutChange
+                  ? addClipRectToIcons(oldBox.icons, newBox)
+                  : makeIconsEmpty(oldBox.icons),
+          };
+          if (newBox.content && oldBox.content && slideInBox.content && slideOutBox.content) {
+              const slideInContentY = newBox.content.y + (value - 1) * newBox.height;
+              const slideOutContentY = newBox.content.y + value * newBox.height;
+              slideInBox.content.y = slideInContentY;
+              slideOutBox.content.y = slideOutContentY;
+          }
+          slideOutBox.style.fillColor = slideInBox.style.fillColor = undefined;
+          animatedBox.content = undefined;
+          animatedBox.icons = iconLayoutChange ? {} : animatedBox.icons;
+          return { newBoxes: [slideInBox, slideOutBox] };
+      },
+  });
+  cellAnimationRegistry.add("borderFadeIn", {
+      id: "borderFadeIn",
+      easingFn: "easeInCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((!oldBox?.border?.bottom && newBox?.border?.bottom) ||
+              (!oldBox?.border?.top && newBox?.border?.top) ||
+              (!oldBox?.border?.left && newBox?.border?.left) ||
+              (!oldBox?.border?.right && newBox?.border?.right));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const borderOpacity = EASING_FN[this.easingFn](progress);
+          if (animatedBox.border?.top && newBox.border?.top && !oldBox.border?.top) {
+              animatedBox.border.top.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.bottom && newBox.border?.bottom && !oldBox.border?.bottom) {
+              animatedBox.border.bottom.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.left && newBox.border?.left && !oldBox.border?.left) {
+              animatedBox.border.left.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.right && newBox.border?.right && !oldBox.border?.right) {
+              animatedBox.border.right.opacity = borderOpacity;
+          }
+      },
+  });
+  cellAnimationRegistry.add("borderFadeOut", {
+      id: "borderFadeOut",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((oldBox?.border?.bottom && !newBox?.border?.bottom) ||
+              (oldBox?.border?.top && !newBox?.border?.top) ||
+              (oldBox?.border?.left && !newBox?.border?.left) ||
+              (oldBox?.border?.right && !newBox?.border?.right));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const borderOpacity = 1 - EASING_FN[this.easingFn](progress);
+          if (!animatedBox.border) {
+              animatedBox.border = {};
+          }
+          if (oldBox.border?.top && !newBox.border?.top) {
+              animatedBox.border.top = { ...oldBox.border.top, opacity: borderOpacity };
+          }
+          if (oldBox.border?.bottom && !newBox.border?.bottom) {
+              animatedBox.border.bottom = { ...oldBox.border.bottom, opacity: borderOpacity };
+          }
+          if (oldBox.border?.left && !newBox.border?.left) {
+              animatedBox.border.left = { ...oldBox.border.left, opacity: borderOpacity };
+          }
+          if (oldBox.border?.right && !newBox.border?.right) {
+              animatedBox.border.right = { ...oldBox.border.right, opacity: borderOpacity };
+          }
+      },
+  });
+  cellAnimationRegistry.add("borderColorChange", {
+      id: "borderColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldBorder = oldBox?.border;
+          const newBorder = newBox?.border;
+          if (!oldBorder || !newBorder) {
+              return false;
+          }
+          return Boolean(oldBorder.bottom?.color !== newBorder.bottom?.color ||
+              oldBorder.top?.color !== newBorder.top?.color ||
+              oldBorder.left?.color !== newBorder.left?.color ||
+              oldBorder.right?.color !== newBorder.right?.color);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const animateBorderColor = (side) => {
+              const oldBorder = oldBox?.border?.[side];
+              const newBorder = newBox?.border?.[side];
+              const animatedBorder = animatedBox.border?.[side];
+              if (oldBorder && newBorder && animatedBorder) {
+                  const colorScale = getColorScale([
+                      { value: 0, color: oldBorder.color || "#000000" },
+                      { value: 1, color: newBorder.color || "#000000" },
+                  ]);
+                  animatedBorder.color = colorScale(EASING_FN[this.easingFn](progress));
+              }
+          };
+          animateBorderColor("top");
+          animateBorderColor("bottom");
+          animateBorderColor("left");
+          animateBorderColor("right");
+      },
+  });
+  cellAnimationRegistry.add("iconChange", {
+      id: "iconChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return (!hasIconLayoutChange(newBox, oldBox) &&
+              Boolean(oldBox?.icons?.center?.svg?.name !== newBox?.icons?.center?.svg?.name ||
+                  oldBox?.icons?.left?.svg?.name !== newBox?.icons?.left?.svg?.name ||
+                  oldBox?.icons?.right?.svg?.name !== newBox?.icons?.right?.svg?.name));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const value = EASING_FN[this.easingFn](progress);
+          const slideInY = newBox.y + (value - 1) * newBox.height;
+          const slideOutY = newBox.y + value * newBox.height;
+          const newBoxes = [];
+          const animateIconChange = (side) => {
+              const oldIcon = oldBox.icons?.[side];
+              const newIcon = newBox.icons?.[side];
+              const slideInBox = {
+                  id: `${newBox.id}-icon-${side}-slide-in`,
+                  style: { verticalAlign: newBox.style.verticalAlign },
+                  x: newBox.x,
+                  y: slideInY,
+                  width: newBox.width,
+                  height: newBox.height,
+                  skipCellGridLines: true,
+                  icons: { [side]: { ...newIcon, clipRect: newBox } },
+              };
+              const slideOutBox = {
+                  id: `${newBox.id}-icon-${side}-slide-out`,
+                  style: { verticalAlign: oldBox.style.verticalAlign },
+                  x: newBox.x,
+                  y: slideOutY,
+                  width: newBox.width,
+                  height: newBox.height,
+                  skipCellGridLines: true,
+                  icons: { [side]: { ...oldIcon, clipRect: newBox } },
+              };
+              animatedBox.icons[side] = makeIconsEmpty(newBox.icons)[side];
+              newBoxes.push(slideInBox, slideOutBox);
+          };
+          animateIconChange("left");
+          animateIconChange("right");
+          animateIconChange("center");
+          return { newBoxes };
+      },
+  });
+  const EASING_FN = {
+      linear: (t) => t,
+      easeInCubic: (t) => t * t * t,
+      easeOutCubic: (t) => (t -= 1) * t * t + 1,
+      easeInOutCubic: (t) => ((t /= 0.5) < 1 ? 0.5 * t * t * t : 0.5 * ((t -= 2) * t * t + 2)),
+      easeOutQuart: (t) => -((t -= 1) * t * t * t - 1),
+  };
+  function makeIconsEmpty(icons) {
+      return {
+          left: icons.left ? { ...icons.left, svg: undefined } : undefined,
+          right: icons.right ? { ...icons.right, svg: undefined } : undefined,
+          center: icons.center ? { ...icons.center, svg: undefined } : undefined,
+      };
+  }
+  function addClipRectToIcons(icons, clipRect) {
+      return {
+          left: icons.left ? { ...icons.left, clipRect } : undefined,
+          right: icons.right ? { ...icons.right, clipRect } : undefined,
+          center: icons.center ? { ...icons.center, clipRect } : undefined,
+      };
+  }
+  /**
+   *  Check if the icons have appeared, disappeared or changed margin/size/align. Those changes affect where the text is positioned.
+   */
+  function hasIconLayoutChange(newBox, oldBox) {
+      const hasLayoutChange = (newIcon, oldIcon) => {
+          if (oldIcon && newIcon) {
+              return !!(newIcon.horizontalAlign !== oldIcon.horizontalAlign ||
+                  newIcon.size !== oldIcon.size ||
+                  newIcon.margin !== oldIcon.margin ||
+                  (newIcon.svg && !oldIcon.svg) ||
+                  (!newIcon.svg && oldIcon.svg));
+          }
+          return !!((newIcon && !oldIcon) || (!newIcon && oldIcon));
+      };
+      return (hasLayoutChange(newBox?.icons.left, oldBox?.icons.left) ||
+          hasLayoutChange(newBox?.icons.right, oldBox?.icons.right) ||
+          hasLayoutChange(newBox?.icons.center, oldBox?.icons.center));
+  }
+
+  const ANIMATION_DURATION = 1000;
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       static props = {
@@ -26335,16 +26799,101 @@ stores.inject(MyMetaStore, storeInstance);
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("chartContainer");
+      animationStore;
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
       }
       setup() {
-          owl.useEffect(() => drawGaugeChart(this.canvas.el, this.runtime), () => {
-              const canvas = this.canvas.el;
-              const rect = canvas.getBoundingClientRect();
+          if (this.env.model.getters.isDashboard()) {
+              this.animationStore = useStore(ChartAnimationStore);
+          }
+          let animation = null;
+          let lastRuntime = undefined;
+          owl.useEffect(() => {
+              if (this.env.isDashboard() &&
+                  lastRuntime === undefined && // first render
+                  this.animationStore?.animationPlayed[this.animationFigureId] !== "gauge") {
+                  animation = this.drawGaugeWithAnimation();
+                  this.animationStore?.disableAnimationForChart(this.animationFigureId, "gauge");
+              }
+              else if (this.env.isDashboard() &&
+                  lastRuntime !== undefined && // not first render
+                  !deepEquals(this.runtime, lastRuntime)) {
+                  animation = this.drawGaugeWithAnimation();
+                  this.animationStore?.disableAnimationForChart(this.animationFigureId, "gauge");
+              }
+              else {
+                  drawGaugeChart(this.canvasEl, this.runtime);
+              }
+              lastRuntime = this.runtime;
+              return () => animation?.stop();
+          }, () => {
+              const rect = this.canvasEl.getBoundingClientRect();
               return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
           });
       }
+      drawGaugeWithAnimation() {
+          drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue: 0 });
+          const gaugeValue = this.runtime.gaugeValue?.value || 0;
+          const upperBound = this.runtime.maxValue.value;
+          const finalValue = Math.sign(gaugeValue) * Math.min(Math.abs(gaugeValue), Math.abs(upperBound));
+          if (finalValue === 0) {
+              return null;
+          }
+          const lowerBound = this.runtime.minValue.value;
+          const animation = new Animation(lowerBound, finalValue, ANIMATION_DURATION, (animationValue) => drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue }));
+          animation.start();
+          return animation;
+      }
+      get canvasEl() {
+          return this.canvas.el;
+      }
+      get animationFigureId() {
+          return this.props.isFullScreen
+              ? this.props.figureUI.id + "-fullscreen"
+              : this.props.figureUI.id;
+      }
+  }
+  /**
+   * Animation interpolating values using the ease-out quartic curve function (chartJS default easing)
+   */
+  class Animation {
+      startValue;
+      endValue;
+      duration;
+      callback;
+      startTime = undefined;
+      animationFrameId = null;
+      constructor(startValue, endValue, duration, callback) {
+          this.startValue = startValue;
+          this.endValue = endValue;
+          this.duration = duration;
+          this.callback = callback;
+      }
+      start() {
+          this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+      }
+      stop() {
+          if (this.animationFrameId) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+      }
+      animate(timestamp) {
+          if (!this.startTime) {
+              this.startTime = timestamp;
+          }
+          const elapsed = timestamp - this.startTime;
+          const progress = Math.min(elapsed / this.duration, 1);
+          const currentValue = this.startValue + (this.endValue - this.startValue) * EASING_FN.easeOutQuart(progress);
+          this.callback(currentValue);
+          if (progress < 1) {
+              this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+          }
+          else {
+              this.stop();
+          }
+      }
   }
 
   class ComboChart extends AbstractChart {
@@ -32160,7 +32709,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       captureSelection(zone, col, row) {
           this.model.selection.capture(this, {
-              cell: { col: col || zone.left, row: row || zone.right },
+              cell: { col: col ?? zone.left, row: row ?? zone.right },
               zone,
           }, {
               handleEvent: this.handleEvent.bind(this),
@@ -36537,6 +37086,7 @@ stores.inject(MyMetaStore, storeInstance);
   // We need here the svg of the icons that we need to convert to images for the renderer
   // -----------------------------------------------------------------------------
   const ARROW_DOWN = {
+      name: "ARROW_DOWN",
       width: 448,
       height: 512,
       paths: [
@@ -36547,6 +37097,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const ARROW_UP = {
+      name: "ARROW_UP",
       width: 448,
       height: 512,
       paths: [
@@ -36557,6 +37108,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const ARROW_RIGHT = {
+      name: "ARROW_RIGHT",
       width: 448,
       height: 512,
       paths: [
@@ -36567,6 +37119,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const SMILE = {
+      name: "SMILE",
       width: 496,
       height: 512,
       paths: [
@@ -36577,6 +37130,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const MEH = {
+      name: "MEH",
       width: 496,
       height: 512,
       paths: [
@@ -36587,6 +37141,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const FROWN = {
+      name: "FROWN",
       width: 496,
       height: 512,
       paths: [
@@ -36598,22 +37153,26 @@ stores.inject(MyMetaStore, storeInstance);
   };
   const DOT_PATH = "M256 9 a247 247 0 1 0.1 0 0";
   const GREEN_DOT = {
+      name: "GREEN_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#6AA84F", path: DOT_PATH }],
   };
   const YELLOW_DOT = {
+      name: "YELLOW_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#F0AD4E", path: DOT_PATH }],
   };
   const RED_DOT = {
+      name: "RED_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#E06666", path: DOT_PATH }],
   };
   function getCaretDownSvg(color) {
       return {
+          name: "CARET_DOWN",
           width: 512,
           height: 512,
           paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
@@ -36621,6 +37180,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function getHoveredCaretDownSvg(color) {
       return {
+          name: "CARET_DOWN",
           width: 512,
           height: 512,
           paths: [
@@ -36632,6 +37192,7 @@ stores.inject(MyMetaStore, storeInstance);
   const CHIP_CARET_DOWN_PATH = "M40 185 h270 l-135 128";
   function getChipSvg(chipStyle) {
       return {
+          name: "CHIP",
           width: 512,
           height: 512,
           paths: [{ fillColor: chipStyle.textColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH }],
@@ -36639,6 +37200,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function getHoveredChipSvg(chipStyle) {
       return {
+          name: "CHIP",
           width: 512,
           height: 512,
           paths: [
@@ -36651,16 +37213,19 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
   const CHECKBOX_UNCHECKED = {
+      name: "CHECKBOX_UNCHECKED",
       width: 512,
       height: 512,
       paths: [{ fillColor: GRAY_300, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
   };
   const CHECKBOX_UNCHECKED_HOVERED = {
+      name: "CHECKBOX_UNCHECKED",
       width: 512,
       height: 512,
       paths: [{ fillColor: ACTION_COLOR, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
   };
   const CHECKBOX_CHECKED = {
+      name: "CHECKBOX_CHECKED",
       width: 512,
       height: 512,
       paths: [
@@ -36673,6 +37238,7 @@ stores.inject(MyMetaStore, storeInstance);
           ? "M149,235 h213 v43 h-213 M235,149 h43 v213 h-43" // +
           : "M149,235 h213 v43 h-213"; // -
       return {
+          name: "PIVOT_ICON",
           width: 512,
           height: 512,
           paths: [
@@ -36699,6 +37265,7 @@ stores.inject(MyMetaStore, storeInstance);
           colors.hoverBackgroundColor = "#fff";
       }
       return {
+          name: "DATA_FILTER_ICON",
           width: isActive ? 24 : 850,
           height: isActive ? 24 : 850,
           paths: [
@@ -40894,6 +41461,23 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return data;
       },
+  })
+      .add("18.4.3", {
+      migrate(data) {
+          if (!data.pivots) {
+              return data;
+          }
+          for (const pivotId in data.pivots) {
+              const pivot = data.pivots[pivotId];
+              if (pivot.sortedColumn) {
+                  const measure = pivot.measures.find((measure) => measure.fieldName === pivot.sortedColumn?.measure);
+                  if (measure) {
+                      pivot.sortedColumn.measure = measure.id;
+                  }
+              }
+          }
+          return data;
+      },
   });
   function fixOverlappingFilters(data) {
       for (const sheet of data.sheets || []) {
@@ -45960,15 +46544,16 @@ stores.inject(MyMetaStore, storeInstance);
       return state;
   }
 
+  const PAINT_FORMAT_HANDLER_KEYS = [
+      "cell",
+      "border",
+      "table",
+      "conditionalFormat",
+      "merge",
+  ];
   class PaintFormatStore extends SpreadsheetStore {
       mutators = ["activate", "cancel", "pasteFormat"];
       highlightStore = this.get(HighlightStore);
-      clipboardHandlers = [
-          new CellClipboardHandler(this.getters, this.model.dispatch),
-          new BorderClipboardHandler(this.getters, this.model.dispatch),
-          new TableClipboardHandler(this.getters, this.model.dispatch),
-          new ConditionalFormatClipboardHandler(this.getters, this.model.dispatch),
-      ];
       status = "inactive";
       copiedData;
       constructor(get) {
@@ -45999,24 +46584,38 @@ stores.inject(MyMetaStore, storeInstance);
       get isActive() {
           return this.status !== "inactive";
       }
+      get clipboardHandlers() {
+          return PAINT_FORMAT_HANDLER_KEYS.map((handlerName) => {
+              const HandlerClass = clipboardHandlersRegistries.cellHandlers.get(handlerName);
+              return {
+                  handlerName,
+                  handler: new HandlerClass(this.getters, this.model.dispatch),
+              };
+          });
+      }
       copyFormats() {
           const sheetId = this.getters.getActiveSheetId();
           const zones = this.getters.getSelectedZones();
-          const copiedData = {};
-          for (const handler of this.clipboardHandlers) {
-              Object.assign(copiedData, handler.copy(getClipboardDataPositions(sheetId, zones), false));
+          const copiedData = { zones, sheetId };
+          for (const { handlerName, handler } of this.clipboardHandlers) {
+              const handlerResult = handler.copy(getClipboardDataPositions(sheetId, zones), false);
+              if (handlerResult !== undefined) {
+                  copiedData[handlerName] = handlerResult;
+              }
           }
           return copiedData;
       }
       paintFormat(sheetId, target) {
-          if (this.copiedData) {
-              for (const handler of this.clipboardHandlers) {
-                  handler.paste({ zones: target, sheetId }, this.copiedData, {
-                      isCutOperation: false,
-                      pasteOption: "onlyFormat",
-                  });
-              }
+          if (!this.copiedData) {
+              return;
           }
+          const options = {
+              isCutOperation: false,
+              pasteOption: "onlyFormat",
+          };
+          const { target: pasteTarget, selectedZones } = getPasteTargetFromHandlers(sheetId, target, this.copiedData, this.clipboardHandlers, options);
+          applyClipboardHandlersPaste(this.clipboardHandlers, this.copiedData, pasteTarget, options);
+          selectPastedZone(this.model.selection, target, selectedZones);
           if (this.status === "oneOff") {
               this.cancel();
           }
@@ -46063,12 +46662,8 @@ stores.inject(MyMetaStore, storeInstance);
           this.row = undefined;
       }
       computeOverlay() {
-          if (!this.getters.isDashboard()) {
-              return;
-          }
           this.overlayColors = new PositionMap();
-          const col = this.col;
-          const row = this.row;
+          const { col, row } = this;
           if (col === undefined || row === undefined) {
               return;
           }
@@ -46077,9 +46672,16 @@ stores.inject(MyMetaStore, storeInstance);
           if (!table) {
               return;
           }
-          const { left, right } = table.range.zone;
-          for (let c = left; c <= right; c++) {
-              this.overlayColors.set({ sheetId, col: c, row }, setColorAlpha("#017E84", 0.08));
+          const { left, right, top } = table.range.zone;
+          const isTableHeader = row < top + table.config.numberOfHeaders;
+          const doesTableRowHaveContent = range(left, right + 1).some((col) => {
+              return (!this.getters.isColHidden(sheetId, col) &&
+                  this.getters.getEvaluatedCell({ sheetId, col, row }).formattedValue);
+          });
+          if (!isTableHeader && doesTableRowHaveContent) {
+              for (let col = left; col <= right; col++) {
+                  this.overlayColors.set({ sheetId, col, row }, TABLE_HOVER_BACKGROUND_COLOR);
+              }
           }
       }
   }
@@ -46327,7 +46929,10 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const icons = this.env.model.getters.getCellIcons(position);
           const icon = icons.find((icon) => {
-              return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon));
+              const merge = this.env.model.getters.getMerge(position);
+              const zone = merge || positionToZone(position);
+              const cellRect = this.env.model.getters.getRect(zone);
+              return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon, cellRect));
           });
           return icon?.onClick ? icon : undefined;
       }
@@ -47064,19 +47669,56 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class GridRenderer {
-      getters;
-      renderer;
+  const CELL_ANIMATION_DURATION = 200;
+  class GridRenderer extends SpreadsheetStore {
       fingerprints;
       hoveredTables;
       hoveredIcon;
+      lastRenderBoxes = new Map();
+      preventNewAnimationsInNextFrame = false;
+      zonesWithPreventedAnimationsInNextFrame = [];
+      animations = new Map();
       constructor(get) {
+          super(get);
           this.getters = get(ModelStore).getters;
-          this.renderer = get(RendererStore);
           this.fingerprints = get(FormulaFingerprintStore);
           this.hoveredTables = get(HoveredTableStore);
           this.hoveredIcon = get(HoveredIconStore);
-          this.renderer.register(this);
+      }
+      handle(cmd) {
+          switch (cmd.type) {
+              case "START":
+              case "ACTIVATE_SHEET":
+              case "ADD_COLUMNS_ROWS":
+              case "REMOVE_COLUMNS_ROWS":
+                  this.animations.clear();
+                  this.preventNewAnimationsInNextFrame = true;
+                  break;
+              case "RESIZE_COLUMNS_ROWS":
+                  this.preventNewAnimationsInNextFrame = true;
+                  break;
+              case "REDO":
+                  this.zonesWithPreventedAnimationsInNextFrame = [];
+                  break;
+              case "UNDO":
+                  for (const command of cmd.commands) {
+                      if (command.type === "ADD_COLUMNS_ROWS" ||
+                          command.type === "REMOVE_COLUMNS_ROWS" ||
+                          command.type === "RESIZE_COLUMNS_ROWS") {
+                          this.animations.clear();
+                          this.preventNewAnimationsInNextFrame = true;
+                          break;
+                      }
+                  }
+                  break;
+              case "PASTE":
+                  this.zonesWithPreventedAnimationsInNextFrame.push(...this.getters.getSelectedZones());
+                  break;
+              case "UPDATE_CELL":
+                  const zones = this.getters.getCommandZones(cmd);
+                  this.zonesWithPreventedAnimationsInNextFrame.push(...zones);
+                  break;
+          }
       }
       get renderingLayers() {
           return ["Background", "Headers"];
@@ -47084,17 +47726,20 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // Grid rendering
       // ---------------------------------------------------------------------------
-      drawLayer(renderingContext, layer) {
+      drawLayer(renderingContext, layer, timeStamp) {
           switch (layer) {
               case "Background":
                   this.drawGlobalBackground(renderingContext);
+                  const oldBoxes = this.lastRenderBoxes;
+                  this.lastRenderBoxes = new Map();
                   for (const { zone, rect } of this.getters.getAllActiveViewportsZonesAndRect()) {
                       const { ctx } = renderingContext;
                       ctx.save();
                       ctx.beginPath();
                       ctx.rect(rect.x, rect.y, rect.width, rect.height);
                       ctx.clip();
-                      const boxes = this.getGridBoxes(zone);
+                      const boxesWithoutAnimations = this.getGridBoxes(zone);
+                      const boxes = this.getBoxesWithAnimations(boxesWithoutAnimations, oldBoxes, timeStamp);
                       this.drawBackground(renderingContext, boxes);
                       this.drawOverflowingCellBackground(renderingContext, boxes);
                       this.drawCellBackground(renderingContext, boxes);
@@ -47104,6 +47749,8 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.restore();
                   }
                   this.drawFrozenPanes(renderingContext);
+                  this.preventNewAnimationsInNextFrame = false;
+                  this.zonesWithPreventedAnimationsInNextFrame = [];
                   break;
               case "Headers":
                   if (!this.getters.isDashboard()) {
@@ -47127,6 +47774,8 @@ stores.inject(MyMetaStore, storeInstance);
           const inset = areGridLinesVisible ? 0.1 * thinLineWidth : 0;
           if (areGridLinesVisible) {
               for (const box of boxes) {
+                  if (box.skipCellGridLines)
+                      continue;
                   ctx.strokeStyle = CELL_BORDER_COLOR;
                   ctx.lineWidth = thinLineWidth;
                   ctx.strokeRect(box.x + inset, box.y + inset, box.width - 2 * inset, box.height - 2 * inset);
@@ -47234,7 +47883,8 @@ stores.inject(MyMetaStore, storeInstance);
            * each line and adding 1 pixel to the end of each line (depending on the direction of the
            * line).
            */
-          function drawBorder({ style, color }, x1, y1, x2, y2) {
+          function drawBorder({ color, style, opacity }, x1, y1, x2, y2) {
+              ctx.globalAlpha = opacity ?? 1;
               ctx.strokeStyle = color;
               switch (style) {
                   case "medium":
@@ -47282,6 +47932,7 @@ stores.inject(MyMetaStore, storeInstance);
               ctx.stroke();
               ctx.lineWidth = 1;
               ctx.setLineDash([]);
+              ctx.globalAlpha = 1;
           }
       }
       drawTexts(renderingContext, boxes) {
@@ -47290,6 +47941,7 @@ stores.inject(MyMetaStore, storeInstance);
           let currentFont;
           for (const box of boxes) {
               if (box.content) {
+                  ctx.globalAlpha = box.textOpacity ?? 1;
                   const style = box.style || {};
                   const align = box.content.align || "left";
                   // compute font and textColor
@@ -47320,6 +47972,7 @@ stores.inject(MyMetaStore, storeInstance);
                   if (box.clipRect) {
                       ctx.restore();
                   }
+                  ctx.globalAlpha = 1;
               }
           }
       }
@@ -47336,11 +47989,13 @@ stores.inject(MyMetaStore, storeInstance);
                       continue;
                   }
                   ctx.save();
+                  ctx.globalAlpha = icon.opacity ?? 1;
                   ctx.beginPath();
-                  ctx.rect(box.x, box.y, box.width, box.height);
+                  const clipRect = icon.clipRect || box;
+                  ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
                   ctx.clip();
                   const iconSize = icon.size;
-                  const { x, y } = this.getters.getCellIconRect(icon);
+                  const { x, y } = this.getters.getCellIconRect(icon, box);
                   ctx.translate(x, y);
                   ctx.scale(iconSize / svg.width, iconSize / svg.height);
                   for (const path of svg.paths) {
@@ -47549,7 +48204,6 @@ stores.inject(MyMetaStore, storeInstance);
           const cell = this.getters.getEvaluatedCell(position);
           const showFormula = this.getters.shouldShowFormulas();
           const { x, y, width, height } = this.getters.getRect(zone);
-          const { verticalAlign } = this.getters.getCellStyle(position);
           const chipStyle = this.getters.getDataValidationChipStyle(position);
           let style = this.getters.getCellComputedStyle(position);
           if (this.fingerprints.isEnabled) {
@@ -47569,6 +48223,7 @@ stores.inject(MyMetaStore, storeInstance);
               center: iconsList.find((icon) => icon?.horizontalAlign === "center"),
           };
           const box = {
+              id: zoneToXc(zone),
               x,
               y,
               width,
@@ -47576,11 +48231,11 @@ stores.inject(MyMetaStore, storeInstance);
               border: this.getters.getCellComputedBorder(position) || undefined,
               style,
               dataBarFill,
-              verticalAlign,
               overlayColor: this.hoveredTables.overlayColors.get(position),
               isError: (cell.type === CellValueType.error && !!cell.message) ||
                   this.getters.isDataValidationInvalid(position),
               icons: cellIcons,
+              disabledAnimation: this.zonesWithPreventedAnimationsInNextFrame.some((z) => isZoneInside(zone, z) || overlap(zone, z)),
           };
           const fontSizePX = computeTextFontSizeInPixels(box.style);
           if (cell.type === CellValueType.empty || box.icons.center) {
@@ -47750,6 +48405,77 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return boxes;
       }
+      getBoxesWithAnimations(boxes, oldBoxes, timeStamp) {
+          this.updateAnimationsProgress(timeStamp);
+          this.addNewAnimations(boxes, oldBoxes, timeStamp);
+          if (this.animations.size > 0) {
+              this.renderer.startAnimation("grid_renderer_animation");
+              return this.updateBoxesWithAnimations(boxes);
+          }
+          else {
+              this.renderer.stopAnimation("grid_renderer_animation");
+              return boxes;
+          }
+      }
+      updateBoxesWithAnimations(boxes) {
+          const boxesWithAnimations = [];
+          for (const box of boxes) {
+              const animation = this.animations.get(box.id);
+              if (!animation) {
+                  boxesWithAnimations.push(box);
+                  continue;
+              }
+              const animatedBox = deepCopy(box);
+              boxesWithAnimations.push(animatedBox);
+              for (const animationId of animation.animationTypes) {
+                  const animationItem = cellAnimationRegistry.get(animationId);
+                  const newBoxes = animationItem.updateAnimation(animation.progress, animatedBox, animation.oldBox, box);
+                  if (newBoxes) {
+                      boxesWithAnimations.push(...newBoxes.newBoxes);
+                  }
+              }
+          }
+          return boxesWithAnimations;
+      }
+      updateAnimationsProgress(timeStamp) {
+          if (timeStamp === undefined) {
+              return;
+          }
+          for (const boxId of this.animations.keys()) {
+              const animation = this.animations.get(boxId);
+              if (animation.startTime === undefined) {
+                  animation.startTime = timeStamp;
+                  continue;
+              }
+              const elapsedTime = timeStamp - animation.startTime;
+              const progress = Math.min(1, elapsedTime / CELL_ANIMATION_DURATION);
+              if (progress >= 1) {
+                  this.animations.delete(boxId);
+              }
+              animation.progress = progress;
+          }
+      }
+      addNewAnimations(boxes, oldBoxes, timeStamp) {
+          for (const box of boxes) {
+              this.lastRenderBoxes.set(box.id, box);
+              const oldBox = oldBoxes.get(box.id);
+              if (this.preventNewAnimationsInNextFrame || !oldBox || box.disabledAnimation) {
+                  continue;
+              }
+              const animationTypes = [];
+              for (const animationItem of cellAnimationRegistry.getAll()) {
+                  if (animationItem.hasAnimation(oldBox, box)) {
+                      animationTypes.push(animationItem.id);
+                  }
+              }
+              const animation = animationTypes.length > 0
+                  ? { animationTypes, oldBox, progress: 0, startTime: timeStamp }
+                  : undefined;
+              if (animation) {
+                  this.animations.set(box.id, animation);
+              }
+          }
+      }
   }
 
   function useGridDrawing(refName, model, canvasSize) {
@@ -47784,10 +48510,7 @@ stores.inject(MyMetaStore, storeInstance);
           // http://diveintohtml5.info/canvas.html#pixel-madness
           ctx.translate(-CANVAS_SHIFT, -CANVAS_SHIFT);
           ctx.scale(dpr, dpr);
-          for (const layer of OrderedLayers()) {
-              model.drawLayer(renderingContext, layer);
-              rendererStore.drawLayer(renderingContext, layer);
-          }
+          rendererStore.draw(renderingContext);
       }
   }
 
@@ -51655,6 +52378,9 @@ stores.inject(MyMetaStore, storeInstance);
                       this.switchToList();
                   }
               }
+              else if (!this.editedCF) {
+                  this.switchToList();
+              }
           });
       }
       get conditionalFormats() {
@@ -54882,7 +55608,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getTypeFromZone(sheetId, zone) {
           const cells = this.getters.getEvaluatedCellsInZone(sheetId, zone);
-          const nonEmptyCells = cells.filter((cell) => cell.type !== CellValueType.empty);
+          const nonEmptyCells = cells.filter((cell) => !(cell.type === CellValueType.empty || cell.value === ""));
           if (nonEmptyCells.length === 0) {
               return "integer";
           }
@@ -55490,7 +56216,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
-      static components = { Section, ValidationMessages };
+      static components = { Section, ValidationMessages, BadgeSelection };
       static props = { onCloseSidePanel: Function };
       loadedLocales = [];
       setup() {
@@ -56374,49 +57100,111 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const DEFAULT_SIDE_PANEL_SIZE = 350;
+  const COLLAPSED_SIDE_PANEL_SIZE = 45;
   const MIN_SHEET_VIEW_WIDTH = 150;
   class SidePanelStore extends SpreadsheetStore {
-      mutators = ["open", "toggle", "close", "changePanelSize", "resetPanelSize"];
-      initialPanelProps = {};
-      componentTag = "";
-      panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      mutators = [
+          "open",
+          "toggle",
+          "close",
+          "changePanelSize",
+          "resetPanelSize",
+          "togglePinPanel",
+          "closeMainPanel",
+          "changeSpreadsheetWidth",
+          "toggleCollapsePanel",
+      ];
+      mainPanel = undefined;
+      secondaryPanel;
+      availableWidth = 0;
       screenWidthStore = this.get(ScreenWidthStore);
-      get isOpen() {
-          if (!this.componentTag) {
-              return false;
-          }
-          return this.computeState(this.componentTag, this.initialPanelProps).isOpen;
+      get isMainPanelOpen() {
+          return this.mainPanel && this.mainPanel.componentTag
+              ? this.computeState(this.mainPanel).isOpen
+              : false;
+      }
+      get isSecondaryPanelOpen() {
+          return this.secondaryPanel && this.secondaryPanel.componentTag
+              ? this.computeState(this.secondaryPanel).isOpen
+              : false;
       }
-      get panelProps() {
-          const state = this.computeState(this.componentTag, this.initialPanelProps);
+      get mainPanelProps() {
+          return this.mainPanel ? this.getPanelProps(this.mainPanel) : undefined;
+      }
+      get mainPanelKey() {
+          return this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
+      }
+      get secondaryPanelProps() {
+          return this.secondaryPanel ? this.getPanelProps(this.secondaryPanel) : undefined;
+      }
+      get secondaryPanelKey() {
+          return this.secondaryPanel ? this.getPanelKey(this.secondaryPanel) : undefined;
+      }
+      get totalPanelSize() {
+          return (this.mainPanel?.size || 0) + (this.secondaryPanel?.size ?? 0);
+      }
+      getPanelProps(panelInfo) {
+          const state = this.computeState(panelInfo);
           if (state.isOpen) {
               return state.props ?? {};
           }
           return {};
       }
-      get panelKey() {
-          const state = this.computeState(this.componentTag, this.initialPanelProps);
+      getPanelKey(panelInfo) {
+          const state = this.computeState(panelInfo);
           if (state.isOpen) {
               return state.key;
           }
           return undefined;
       }
-      open(componentTag, panelProps = {}) {
+      open(componentTag, initialPanelProps = {}) {
           if (this.screenWidthStore.isSmall) {
               return;
           }
-          const state = this.computeState(componentTag, panelProps);
+          const newPanelInfo = { initialPanelProps, componentTag, size: DEFAULT_SIDE_PANEL_SIZE };
+          const state = this.computeState(newPanelInfo);
           if (!state.isOpen) {
               return;
           }
-          if (this.isOpen && componentTag !== this.componentTag) {
-              this.initialPanelProps?.onCloseSidePanel?.();
+          const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
+          if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+              this._openPanel("mainPanel", newPanelInfo, state);
+              return;
+          }
+          // Try to open secondary panel if main panel is pinned
+          const nonCollapsedPanelSize = this.mainPanel.isCollapsed
+              ? DEFAULT_SIDE_PANEL_SIZE
+              : this.mainPanel.size;
+          if (!this.secondaryPanel &&
+              nonCollapsedPanelSize + DEFAULT_SIDE_PANEL_SIZE > this.availableWidth) {
+              this.get(NotificationStore).notifyUser({
+                  sticky: false,
+                  type: "warning",
+                  text: _t("The window is too small to display multiple side panels."),
+              });
+              return;
+          }
+          this._openPanel("secondaryPanel", newPanelInfo, state);
+      }
+      _openPanel(panel, newPanel, state) {
+          const currentPanel = this[panel];
+          if (currentPanel && newPanel.componentTag !== currentPanel.componentTag) {
+              currentPanel.initialPanelProps?.onCloseSidePanel?.();
+          }
+          this[panel] = {
+              initialPanelProps: state.props ?? {},
+              componentTag: newPanel.componentTag,
+              size: currentPanel?.size || DEFAULT_SIDE_PANEL_SIZE,
+              isCollapsed: currentPanel?.isCollapsed || false,
+              isPinned: currentPanel && "isPinned" in currentPanel ? currentPanel.isPinned : false,
+          };
+          if (this[panel].isCollapsed) {
+              this.toggleCollapsePanel(panel);
           }
-          this.componentTag = componentTag;
-          this.initialPanelProps = state.props ?? {};
       }
       toggle(componentTag, panelProps) {
-          if (this.isOpen && componentTag === this.componentTag) {
+          const panel = this.mainPanel?.isPinned ? this.secondaryPanel : this.mainPanel;
+          if (panel && componentTag === panel.componentTag) {
               this.close();
           }
           else {
@@ -56424,34 +57212,85 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       close() {
-          this.initialPanelProps.onCloseSidePanel?.();
-          this.initialPanelProps = {};
-          this.componentTag = "";
+          if (this.mainPanel?.isPinned) {
+              if (this.secondaryPanel) {
+                  this.secondaryPanel.initialPanelProps.onCloseSidePanel?.();
+                  this.secondaryPanel = undefined;
+              }
+              return;
+          }
+          this.mainPanel?.initialPanelProps.onCloseSidePanel?.();
+          this.mainPanel = undefined;
       }
-      changePanelSize(size, spreadsheetElWidth) {
-          if (size < DEFAULT_SIDE_PANEL_SIZE) {
-              this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      closeMainPanel() {
+          this.mainPanel?.initialPanelProps.onCloseSidePanel?.();
+          this.mainPanel = this.secondaryPanel || undefined;
+          this.secondaryPanel = undefined;
+      }
+      changePanelSize(panel, size) {
+          const panelInfo = this[panel];
+          if (!panelInfo || ("isCollapsed" in panelInfo && panelInfo.isCollapsed)) {
+              return;
           }
-          else if (size > spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH) {
-              this.panelSize = Math.max(spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH, DEFAULT_SIDE_PANEL_SIZE);
+          size = Math.max(size, DEFAULT_SIDE_PANEL_SIZE);
+          let otherPanelSize = panel === "mainPanel" ? this.secondaryPanel?.size || 0 : this.mainPanel?.size || 0;
+          if (size > this.availableWidth - otherPanelSize) {
+              if (panel === "mainPanel" && this.secondaryPanel) {
+                  // reduce the secondary panel size to fit the main panel
+                  this.secondaryPanel.size = Math.max(this.availableWidth - size, DEFAULT_SIDE_PANEL_SIZE);
+                  otherPanelSize = this.secondaryPanel.size;
+              }
+              size = Math.max(this.availableWidth - otherPanelSize, DEFAULT_SIDE_PANEL_SIZE);
           }
-          else {
-              this.panelSize = size;
+          panelInfo.size = size;
+      }
+      resetPanelSize(panel) {
+          const panelInfo = this[panel];
+          if (!panelInfo) {
+              return;
           }
+          panelInfo.size = DEFAULT_SIDE_PANEL_SIZE;
       }
-      resetPanelSize() {
-          this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      togglePinPanel() {
+          if (!this.mainPanel) {
+              return;
+          }
+          this.mainPanel.isPinned = !this.mainPanel.isPinned;
+          if (!this.mainPanel.isPinned && this.secondaryPanel) {
+              this.secondaryPanel?.initialPanelProps.onCloseSidePanel?.();
+              this.mainPanel = this.secondaryPanel;
+              this.secondaryPanel = undefined;
+          }
       }
-      computeState(componentTag, panelProps) {
-          const customComputeState = sidePanelRegistry.get(componentTag).computeState;
-          if (!customComputeState) {
-              return {
-                  isOpen: true,
-                  props: panelProps,
-              };
+      toggleCollapsePanel(panel) {
+          const panelInfo = this[panel];
+          if (!panelInfo) {
+              return;
+          }
+          if (panelInfo.isCollapsed) {
+              panelInfo.isCollapsed = false;
+              this.changePanelSize(panel, DEFAULT_SIDE_PANEL_SIZE);
           }
           else {
-              return customComputeState(this.getters, panelProps);
+              panelInfo.isCollapsed = true;
+              panelInfo.size = COLLAPSED_SIDE_PANEL_SIZE;
+          }
+      }
+      computeState({ componentTag, initialPanelProps }) {
+          const customComputeState = sidePanelRegistry.get(componentTag).computeState;
+          const state = customComputeState
+              ? customComputeState(this.getters, initialPanelProps)
+              : { isOpen: true, props: initialPanelProps };
+          return state.isOpen ? { ...state, key: state.key || componentTag } : state;
+      }
+      changeSpreadsheetWidth(width) {
+          this.availableWidth = width - MIN_SHEET_VIEW_WIDTH;
+          if (this.secondaryPanel && width - this.totalPanelSize < MIN_SHEET_VIEW_WIDTH) {
+              this.secondaryPanel?.initialPanelProps.onCloseSidePanel?.();
+              this.secondaryPanel = undefined;
+          }
+          if (this.mainPanel && width - this.totalPanelSize < MIN_SHEET_VIEW_WIDTH) {
+              this.mainPanel.size = Math.max(width - MIN_SHEET_VIEW_WIDTH, DEFAULT_SIDE_PANEL_SIZE);
           }
       }
   }
@@ -56599,11 +57438,11 @@ stores.inject(MyMetaStore, storeInstance);
               this.hoveredCell.clear();
           });
           this.cellPopovers = useStore(CellPopoverStore);
-          owl.useEffect(() => {
-              if (!this.sidePanel.isOpen) {
+          owl.useEffect((isMainPanelOpen, isSecondaryPanelOpen) => {
+              if (!isMainPanelOpen && !isSecondaryPanelOpen) {
                   this.DOMFocusableElementStore.focus();
               }
-          }, () => [this.sidePanel.isOpen]);
+          }, () => [this.sidePanel.isMainPanelOpen, this.sidePanel.isSecondaryPanelOpen]);
           useTouchScroll(this.gridRef, this.moveCanvas.bind(this), () => {
               const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
               return scrollY > 0;
@@ -59695,7 +60534,7 @@ stores.inject(MyMetaStore, storeInstance);
           else if (newRule.criterion.type === "isValueInList") {
               newRule.criterion.values = Array.from(new Set(newRule.criterion.values));
           }
-          const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules);
+          const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules, newRule.id);
           const ruleIndex = adaptedRules.findIndex((rule) => rule.id === newRule.id);
           if (ruleIndex !== -1) {
               adaptedRules[ruleIndex] = newRule;
@@ -59705,9 +60544,12 @@ stores.inject(MyMetaStore, storeInstance);
               this.history.update("rules", sheetId, [...adaptedRules, newRule]);
           }
       }
-      removeRangesFromRules(sheetId, ranges, rules) {
+      removeRangesFromRules(sheetId, ranges, rules, editingRuleId) {
           rules = deepCopy(rules);
           for (const rule of rules) {
+              if (rule.id === editingRuleId) {
+                  continue; // Skip the rule being edited to preserve its place in the list
+              }
               rule.ranges = this.getters.recomputeRanges(rule.ranges, ranges);
           }
           return rules.filter((rule) => rule.ranges.length > 0);
@@ -63115,7 +63957,7 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               }
               case "UPDATE_PIVOT": {
-                  this.history.update("pivots", cmd.pivotId, "definition", this.repairSortedColumn(deepCopy(cmd.pivot)));
+                  this.history.update("pivots", cmd.pivotId, "definition", deepCopy(cmd.pivot));
                   this.compileCalculatedMeasures(cmd.pivot.measures);
                   break;
               }
@@ -63186,10 +64028,7 @@ stores.inject(MyMetaStore, storeInstance);
       // Private
       // -------------------------------------------------------------------------
       addPivot(pivotId, pivot, formulaId = this.nextFormulaId.toString()) {
-          this.history.update("pivots", pivotId, {
-              definition: this.repairSortedColumn(deepCopy(pivot)),
-              formulaId,
-          });
+          this.history.update("pivots", pivotId, { definition: deepCopy(pivot), formulaId });
           this.compileCalculatedMeasures(pivot.measures);
           this.history.update("formulaIds", formulaId, pivotId);
           this.history.update("nextFormulaId", this.nextFormulaId + 1);
@@ -63278,7 +64117,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       checkSortedColumnInMeasures(definition) {
-          definition = this.repairSortedColumn(definition);
           const measures = definition.measures.map((measure) => measure.id);
           if (definition.sortedColumn && !measures.includes(definition.sortedColumn.measure)) {
               return "InvalidDefinition" /* CommandResult.InvalidDefinition */;
@@ -63292,26 +64130,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return "Success" /* CommandResult.Success */;
       }
-      repairSortedColumn(definition) {
-          if (definition.sortedColumn) {
-              // Fix for an upgrade issue: the sortedColumn measure was not updated
-              // from using fieldName to using id. If the sortedColumn measure matches
-              // a measure fieldName in the definition, update it to use the measure's id instead
-              // of its fieldName.
-              // TODO: add an upgrade step to fix this in master and remove this code
-              const sortedMeasure = definition.measures.find((measure) => measure.fieldName === definition.sortedColumn?.measure);
-              if (sortedMeasure) {
-                  return {
-                      ...definition,
-                      sortedColumn: {
-                          ...definition.sortedColumn,
-                          measure: sortedMeasure.id,
-                      },
-                  };
-              }
-          }
-          return definition;
-      }
       // ---------------------------------------------------------------------
       // Import/Export
       // ---------------------------------------------------------------------
@@ -63393,9 +64211,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.locale = data.settings?.locale ?? DEFAULT_LOCALE;
       }
       export(data) {
-          data.settings = {
-              locale: this.locale,
-          };
+          data.settings = { locale: this.locale };
       }
   }
 
@@ -66430,11 +67246,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return this.cellIconsCache[position.sheetId][position.col][position.row];
       }
-      getCellIconRect(icon) {
+      getCellIconRect(icon, cellRect) {
           const cellPosition = icon.position;
-          const merge = this.getters.getMerge(cellPosition);
-          const zone = merge || positionToZone(cellPosition);
-          const cellRect = this.getters.getRect(zone);
           const cell = this.getters.getCell(cellPosition);
           const x = this.getIconHorizontalPosition(cellRect, icon.horizontalAlign, icon);
           const y = this.getters.computeTextYCoordinate(cellRect, icon.size, cell?.style?.verticalAlign);
@@ -72267,49 +73080,17 @@ stores.inject(MyMetaStore, storeInstance);
           if (!copiedData) {
               return;
           }
-          let zone = undefined;
-          const selectedZones = [];
           const sheetId = this.getters.getActiveSheetId();
-          const target = {
-              sheetId,
-              zones,
-          };
           const handlers = this.selectClipboardHandlers(copiedData);
-          for (const { handlerName, handler } of handlers) {
-              const handlerData = copiedData[handlerName];
-              if (!handlerData) {
-                  continue;
-              }
-              const currentTarget = handler.getPasteTarget(sheetId, zones, handlerData, options);
-              if (currentTarget.figureId) {
-                  target.figureId = currentTarget.figureId;
-              }
-              for (const targetZone of currentTarget.zones) {
-                  selectedZones.push(targetZone);
-                  if (zone === undefined) {
-                      zone = targetZone;
-                      continue;
-                  }
-                  zone = union(zone, targetZone);
-              }
-          }
+          const { target, zone, selectedZones } = getPasteTargetFromHandlers(sheetId, zones, copiedData, handlers, options);
           if (zone !== undefined) {
-              this.addMissingDimensions(this.getters.getActiveSheetId(), zone.right - zone.left + 1, zone.bottom - zone.top + 1, zone.left, zone.top);
+              this.addMissingDimensions(sheetId, zone.right - zone.left + 1, zone.bottom - zone.top + 1, zone.left, zone.top);
           }
-          handlers.forEach(({ handlerName, handler }) => {
-              const handlerData = copiedData[handlerName];
-              if (handlerData) {
-                  handler.paste(target, handlerData, options);
-              }
-          });
+          applyClipboardHandlersPaste(handlers, copiedData, target, options);
           if (!options?.selectTarget) {
               return;
           }
-          const selection = zones[0];
-          const col = selection.left;
-          const row = selection.top;
-          this.selection.getBackToDefault();
-          this.selection.selectZone({ cell: { col, row }, zone: union(...selectedZones) }, { scrollIntoView: false });
+          selectPastedZone(this.selection, zones, selectedZones);
       }
       /**
        * Add columns and/or rows to ensure that col + width and row + height are still
@@ -75138,6 +75919,17 @@ stores.inject(MyMetaStore, storeInstance);
           return !!getters.getEvaluatedCell(position).link;
       },
       execute: (position, env, isMiddleClick) => openLink(env.model.getters.getEvaluatedCell(position).link, env, isMiddleClick),
+      title: (position, getters) => {
+          const link = getters.getEvaluatedCell(position).link;
+          if (!link)
+              return "";
+          if (link.isExternal) {
+              return _t("Go to url: %(url)s", { url: link.url });
+          }
+          else {
+              return _t("Go to %(label)s", { label: link.label });
+          }
+      },
       sequence: 5,
   });
 
@@ -76849,12 +77641,13 @@ stores.inject(MyMetaStore, storeInstance);
               if (!item) {
                   continue;
               }
+              const title = typeof item.title === "function" ? item.title(position, getters) : item.title;
               const zone = getters.expandZone(sheetId, positionToZone(position));
               cells.push({
                   coordinates: getters.getVisibleRect(zone),
                   position,
                   action: item.execute,
-                  title: item.title || "",
+                  title: title || "",
               });
           }
           return cells;
@@ -77239,24 +78032,36 @@ stores.inject(MyMetaStore, storeInstance);
     user-select: none;
     color: ${TEXT_BODY};
 
+    &.collapsed {
+      padding: 8px;
+      cursor: pointer;
+
+      .o-sidePanelTitle {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+      }
+    }
+
     .o-sidePanelTitle {
       line-height: 20px;
       font-size: 16px;
     }
 
     .o-sidePanelHeader {
-      padding: 8px 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      padding: 8px;
       border-bottom: 1px solid ${GRAY_300};
+    }
 
-      .o-sidePanelClose {
-        padding: 5px 10px;
-        cursor: pointer;
-        &:hover {
-          background-color: WhiteSmoke;
-        }
+    .o-sidePanelAction {
+      padding: 5px 10px;
+      cursor: pointer;
+
+      &.active {
+        background-color: ${BUTTON_ACTIVE_BG};
+      }
+
+      &:hover {
+        background-color: ${BUTTON_HOVER_BG};
       }
     }
     .o-sidePanelBody-container {
@@ -77333,43 +78138,114 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
+      static props = {
+          panelContent: Object,
+          panelProps: Object,
+          onCloseSidePanel: Function,
+          onStartHandleDrag: Function,
+          onResetPanelSize: Function,
+          isPinned: { type: Boolean, optional: true },
+          onTogglePinPanel: { type: Function, optional: true },
+          onToggleCollapsePanel: { type: Function, optional: true },
+          isCollapsed: { type: Boolean, optional: true },
+      };
+      spreadsheetRect = useSpreadsheetRect();
+      getTitle() {
+          const panel = this.props.panelContent;
+          return typeof panel.title === "function"
+              ? panel.title(this.env, this.props.panelProps)
+              : panel.title;
+      }
+      get pinInfoMessage() {
+          return _t("Pin this panel to allow to open another side panel beside it.");
+      }
+  }
+
+  class SidePanels extends owl.Component {
+      static template = "o-spreadsheet-SidePanels";
       static props = {};
+      static components = { SidePanel };
       sidePanelStore;
       spreadsheetRect = useSpreadsheetRect();
       setup() {
           this.sidePanelStore = useStore(SidePanelStore);
-          owl.useEffect((isOpen) => {
-              if (!isOpen) {
+          owl.useEffect(() => {
+              if (this.sidePanelStore.mainPanel && !this.sidePanelStore.isMainPanelOpen) {
+                  this.sidePanelStore.closeMainPanel();
+              }
+              if (this.sidePanelStore.secondaryPanel && !this.sidePanelStore.isSecondaryPanelOpen) {
                   this.sidePanelStore.close();
               }
-          }, () => [this.sidePanelStore.isOpen]);
-      }
-      get panel() {
-          return sidePanelRegistry.get(this.sidePanelStore.componentTag);
-      }
-      close() {
-          this.sidePanelStore.close();
+          }, () => [this.sidePanelStore.isMainPanelOpen, this.sidePanelStore.isSecondaryPanelOpen]);
       }
-      getTitle() {
-          const panel = this.panel;
-          return typeof panel.title === "function"
-              ? panel.title(this.env, this.sidePanelStore.panelProps)
-              : panel.title;
-      }
-      startHandleDrag(ev) {
+      startHandleDrag(panel, ev) {
           const startingCursor = document.body.style.cursor;
-          const startSize = this.sidePanelStore.panelSize;
+          const panelInfo = panel === "mainPanel" ? this.sidePanelStore.mainPanel : this.sidePanelStore.secondaryPanel;
+          if (!panelInfo) {
+              return;
+          }
+          const startSize = panelInfo.size;
           const startPosition = ev.clientX;
           const onMouseMove = (ev) => {
               document.body.style.cursor = "col-resize";
               const newSize = startSize + startPosition - ev.clientX;
-              this.sidePanelStore.changePanelSize(newSize, this.spreadsheetRect.width);
+              this.sidePanelStore.changePanelSize(panel, newSize);
           };
           const cleanUp = () => {
               document.body.style.cursor = startingCursor;
           };
           startDnd(onMouseMove, cleanUp);
       }
+      get mainPanelProps() {
+          const panelProps = this.sidePanelStore.mainPanelProps;
+          if (!this.sidePanelStore.mainPanel || !panelProps) {
+              return undefined;
+          }
+          return {
+              panelContent: sidePanelRegistry.get(this.sidePanelStore.mainPanel.componentTag),
+              panelProps,
+              onCloseSidePanel: () => this.sidePanelStore.closeMainPanel(),
+              onTogglePinPanel: () => this.sidePanelStore.togglePinPanel(),
+              onStartHandleDrag: (ev) => this.startHandleDrag("mainPanel", ev),
+              onResetPanelSize: () => this.sidePanelStore.resetPanelSize("mainPanel"),
+              isPinned: this.sidePanelStore.mainPanel?.isPinned,
+              onToggleCollapsePanel: () => this.sidePanelStore.toggleCollapsePanel("mainPanel"),
+              isCollapsed: this.sidePanelStore.mainPanel?.isCollapsed,
+          };
+      }
+      get secondaryPanelProps() {
+          const panelProps = this.sidePanelStore.secondaryPanelProps;
+          if (!this.sidePanelStore.secondaryPanel || !panelProps) {
+              return undefined;
+          }
+          return {
+              panelContent: sidePanelRegistry.get(this.sidePanelStore.secondaryPanel.componentTag),
+              panelProps,
+              onCloseSidePanel: () => this.sidePanelStore.close(),
+              onStartHandleDrag: (ev) => this.startHandleDrag("secondaryPanel", ev),
+              onResetPanelSize: () => this.sidePanelStore.resetPanelSize("secondaryPanel"),
+              onToggleCollapsePanel: () => this.sidePanelStore.toggleCollapsePanel("secondaryPanel"),
+              isCollapsed: this.sidePanelStore.secondaryPanel?.isCollapsed,
+          };
+      }
+      get panelList() {
+          return [
+              {
+                  key: this.sidePanelStore.secondaryPanelKey,
+                  props: this.secondaryPanelProps,
+                  style: this.sidePanelStore.secondaryPanel
+                      ? cssPropertiesToCss({ width: `${this.sidePanelStore.secondaryPanel.size}px` })
+                      : "",
+              },
+              {
+                  key: this.sidePanelStore.mainPanelKey,
+                  props: this.mainPanelProps,
+                  style: this.sidePanelStore.mainPanel
+                      ? cssPropertiesToCss({ width: `${this.sidePanelStore.mainPanel.size}px` })
+                      : "",
+              },
+          ].filter((panel) => panel.key && panel.props);
+      }
   }
 
   class RibbonMenu extends owl.Component {
@@ -78931,7 +79807,7 @@ stores.inject(MyMetaStore, storeInstance);
           Grid,
           BottomBar,
           SmallBottomBar,
-          SidePanel,
+          SidePanels,
           SpreadsheetDashboard,
           HeaderGroupContainer,
           FullScreenChart,
@@ -78954,7 +79830,9 @@ stores.inject(MyMetaStore, storeInstance);
           else {
               properties["grid-template-rows"] = `min-content auto min-content`;
           }
-          const columnWidth = this.sidePanel.isOpen ? `${this.sidePanel.panelSize}px` : "auto";
+          const columnWidth = this.sidePanel.mainPanel
+              ? `${this.sidePanel.totalPanelSize || DEFAULT_SIDE_PANEL_SIZE}px`
+              : "auto";
           properties["grid-template-columns"] = `auto ${columnWidth}`;
           return cssPropertiesToCss(properties);
       }
@@ -79038,7 +79916,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.checkViewportSize();
           });
           const resizeObserver = new ResizeObserver(() => {
-              this.sidePanel.changePanelSize(this.sidePanel.panelSize, this.spreadsheetRect.width);
+              this.sidePanel.changeSpreadsheetWidth(this.spreadsheetRect.width);
           });
       }
       bindModelEvents() {
@@ -80153,26 +81031,28 @@ stores.inject(MyMetaStore, storeInstance);
                   bottom: Math.min(this.getters.getNumberRows(sheetId) - 1, bottom),
               };
           };
-          const { col: refCol, row: refRow } = this.getReferencePosition();
+          const { cell: refCell, zone: refZone } = this.getReferenceAnchor();
+          const { col: refCol, row: refRow } = refCell;
           // check if we can shrink selection
           let n = 0;
           while (result !== null) {
               n++;
               if (deltaCol < 0) {
                   const newRight = this.getNextAvailableCol(deltaCol, right - (n - 1), refRow);
-                  result = refCol <= right - n ? expand({ top, left, bottom, right: newRight }) : null;
+                  result = refZone.right <= right - n ? expand({ top, left, bottom, right: newRight }) : null;
               }
               if (deltaCol > 0) {
                   const newLeft = this.getNextAvailableCol(deltaCol, left + (n - 1), refRow);
-                  result = left + n <= refCol ? expand({ top, left: newLeft, bottom, right }) : null;
+                  result = left + n <= refZone.left ? expand({ top, left: newLeft, bottom, right }) : null;
               }
               if (deltaRow < 0) {
                   const newBottom = this.getNextAvailableRow(deltaRow, refCol, bottom - (n - 1));
-                  result = refRow <= bottom - n ? expand({ top, left, bottom: newBottom, right }) : null;
+                  result =
+                      refZone.bottom <= bottom - n ? expand({ top, left, bottom: newBottom, right }) : null;
               }
               if (deltaRow > 0) {
                   const newTop = this.getNextAvailableRow(deltaRow, refCol, top + (n - 1));
-                  result = top + n <= refRow ? expand({ top: newTop, left, bottom, right }) : null;
+                  result = top + n <= refZone.top ? expand({ top: newTop, left, bottom, right }) : null;
               }
               result = result ? reorderZone(result) : result;
               if (result && !isEqual(result, anchor.zone)) {
@@ -80402,18 +81282,26 @@ stores.inject(MyMetaStore, storeInstance);
        * If the anchor is hidden, browses from left to right and top to bottom to
        * find a visible cell.
        */
-      getReferencePosition() {
+      getReferenceAnchor() {
           const sheetId = this.getters.getActiveSheetId();
           const anchor = this.anchor;
           const { left, right, top, bottom } = anchor.zone;
           const { col: anchorCol, row: anchorRow } = anchor.cell;
+          const col = this.getters.isColHidden(sheetId, anchorCol)
+              ? this.getters.findVisibleHeader(sheetId, "COL", left, right) || anchorCol
+              : anchorCol;
+          const row = this.getters.isRowHidden(sheetId, anchorRow)
+              ? this.getters.findVisibleHeader(sheetId, "ROW", top, bottom) || anchorRow
+              : anchorRow;
+          const zone = this.getters.expandZone(sheetId, {
+              left: col,
+              right: col,
+              top: row,
+              bottom: row,
+          });
           return {
-              col: this.getters.isColHidden(sheetId, anchorCol)
-                  ? this.getters.findVisibleHeader(sheetId, "COL", left, right) || anchorCol
-                  : anchorCol,
-              row: this.getters.isRowHidden(sheetId, anchorRow)
-                  ? this.getters.findVisibleHeader(sheetId, "ROW", top, bottom) || anchorRow
-                  : anchorRow,
+              cell: { col, row },
+              zone,
           };
       }
       deltaToTarget(position, direction, step) {
@@ -83635,9 +84523,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.4.0-alpha.9";
-  __info__.date = "2025-06-19T18:23:22.025Z";
-  __info__.hash = "6d4d685";
+  __info__.version = "18.4.1";
+  __info__.date = "2025-06-27T09:13:01.303Z";
+  __info__.hash = "5cecc0e";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);