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

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -162,6 +162,7 @@ const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
 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";
@@ -6847,19 +6848,17 @@ function getDefaultContextFont(fontSize, bold = false, italic = false) {
 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];
 }
@@ -7024,19 +7023,19 @@ function getContextFontSize(font) {
 }
 // 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;
 }
@@ -7250,6 +7249,63 @@ function parseOSClipboardContent(content, clipboardId) {
     };
     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;
@@ -9954,8 +10010,15 @@ function getDependencyContainer(env) {
 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;
@@ -9972,17 +10035,54 @@ class RendererStore {
             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 {
@@ -10006,7 +10106,7 @@ class SpreadsheetStore extends DisposableStore {
     }
     handle(cmd) { }
     finalize() { }
-    drawLayer(ctx, layer) { }
+    drawLayer(ctx, layer, timestamp) { }
 }
 
 const VOID_COMPOSER = {
@@ -23728,11 +23828,11 @@ function drawTitle(ctx, config) {
 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,
@@ -23745,7 +23845,7 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
     }
     // 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"));
     }
@@ -23885,7 +23985,7 @@ function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
     return inflectionValues;
 }
 function getGaugeColor(runtime) {
-    const gaugeValue = runtime.gaugeValue?.value;
+    const gaugeValue = getGaugeValue(runtime, "final");
     if (gaugeValue === undefined) {
         return GAUGE_BACKGROUND_COLOR;
     }
@@ -23973,6 +24073,11 @@ function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY
     };
     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
@@ -26327,6 +26432,365 @@ function createBarChartRuntime(chart, getters) {
     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 Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     static props = {
@@ -26334,16 +26798,101 @@ class GaugeChartComponent extends Component {
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("chartContainer");
+    animationStore;
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
     }
     setup() {
-        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;
+        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 {
@@ -32159,7 +32708,7 @@ class AbstractComposerStore extends SpreadsheetStore {
     }
     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),
@@ -36536,6 +37085,7 @@ css /* scss */ `
 // 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: [
@@ -36546,6 +37096,7 @@ const ARROW_DOWN = {
     ],
 };
 const ARROW_UP = {
+    name: "ARROW_UP",
     width: 448,
     height: 512,
     paths: [
@@ -36556,6 +37107,7 @@ const ARROW_UP = {
     ],
 };
 const ARROW_RIGHT = {
+    name: "ARROW_RIGHT",
     width: 448,
     height: 512,
     paths: [
@@ -36566,6 +37118,7 @@ const ARROW_RIGHT = {
     ],
 };
 const SMILE = {
+    name: "SMILE",
     width: 496,
     height: 512,
     paths: [
@@ -36576,6 +37129,7 @@ const SMILE = {
     ],
 };
 const MEH = {
+    name: "MEH",
     width: 496,
     height: 512,
     paths: [
@@ -36586,6 +37140,7 @@ const MEH = {
     ],
 };
 const FROWN = {
+    name: "FROWN",
     width: 496,
     height: 512,
     paths: [
@@ -36597,22 +37152,26 @@ const FROWN = {
 };
 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" }],
@@ -36620,6 +37179,7 @@ function getCaretDownSvg(color) {
 }
 function getHoveredCaretDownSvg(color) {
     return {
+        name: "CARET_DOWN",
         width: 512,
         height: 512,
         paths: [
@@ -36631,6 +37191,7 @@ function getHoveredCaretDownSvg(color) {
 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 }],
@@ -36638,6 +37199,7 @@ function getChipSvg(chipStyle) {
 }
 function getHoveredChipSvg(chipStyle) {
     return {
+        name: "CHIP",
         width: 512,
         height: 512,
         paths: [
@@ -36650,16 +37212,19 @@ function getHoveredChipSvg(chipStyle) {
     };
 }
 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: [
@@ -36672,6 +37237,7 @@ function getPivotIconSvg(isCollapsed, isHovered) {
         ? "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: [
@@ -36698,6 +37264,7 @@ function getDataFilterIcon(isActive, isHighContrast, isHovered) {
         colors.hoverBackgroundColor = "#fff";
     }
     return {
+        name: "DATA_FILTER_ICON",
         width: isActive ? 24 : 850,
         height: isActive ? 24 : 850,
         paths: [
@@ -40893,6 +41460,23 @@ migrationStepRegistry
         }
         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 || []) {
@@ -45959,15 +46543,16 @@ function useHoveredElement(ref) {
     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) {
@@ -45998,24 +46583,38 @@ class PaintFormatStore extends SpreadsheetStore {
     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();
         }
@@ -46062,12 +46661,8 @@ class HoveredTableStore extends SpreadsheetStore {
         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;
         }
@@ -46076,9 +46671,16 @@ class HoveredTableStore extends SpreadsheetStore {
         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);
+            }
         }
     }
 }
@@ -46326,7 +46928,10 @@ class GridOverlay extends Component {
         }
         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;
     }
@@ -47063,19 +47668,56 @@ class HeadersOverlay extends Component {
     }
 }
 
-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"];
@@ -47083,17 +47725,20 @@ class GridRenderer {
     // ---------------------------------------------------------------------------
     // 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);
@@ -47103,6 +47748,8 @@ class GridRenderer {
                     ctx.restore();
                 }
                 this.drawFrozenPanes(renderingContext);
+                this.preventNewAnimationsInNextFrame = false;
+                this.zonesWithPreventedAnimationsInNextFrame = [];
                 break;
             case "Headers":
                 if (!this.getters.isDashboard()) {
@@ -47126,6 +47773,8 @@ class GridRenderer {
         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);
@@ -47233,7 +47882,8 @@ class GridRenderer {
          * 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":
@@ -47281,6 +47931,7 @@ class GridRenderer {
             ctx.stroke();
             ctx.lineWidth = 1;
             ctx.setLineDash([]);
+            ctx.globalAlpha = 1;
         }
     }
     drawTexts(renderingContext, boxes) {
@@ -47289,6 +47940,7 @@ class GridRenderer {
         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
@@ -47319,6 +47971,7 @@ class GridRenderer {
                 if (box.clipRect) {
                     ctx.restore();
                 }
+                ctx.globalAlpha = 1;
             }
         }
     }
@@ -47335,11 +47988,13 @@ class GridRenderer {
                     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) {
@@ -47548,7 +48203,6 @@ class GridRenderer {
         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) {
@@ -47568,6 +48222,7 @@ class GridRenderer {
             center: iconsList.find((icon) => icon?.horizontalAlign === "center"),
         };
         const box = {
+            id: zoneToXc(zone),
             x,
             y,
             width,
@@ -47575,11 +48230,11 @@ class GridRenderer {
             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) {
@@ -47749,6 +48404,77 @@ class GridRenderer {
         }
         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) {
@@ -47783,10 +48509,7 @@ function useGridDrawing(refName, model, canvasSize) {
         // 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);
     }
 }
 
@@ -51654,6 +52377,9 @@ class ConditionalFormattingPanel extends Component {
                     this.switchToList();
                 }
             }
+            else if (!this.editedCF) {
+                this.switchToList();
+            }
         });
     }
     get conditionalFormats() {
@@ -54881,7 +55607,7 @@ class SpreadsheetPivot {
     }
     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";
         }
@@ -55489,7 +56215,7 @@ css /* scss */ `
 `;
 class SettingsPanel extends Component {
     static template = "o-spreadsheet-SettingsPanel";
-    static components = { Section, ValidationMessages };
+    static components = { Section, ValidationMessages, BadgeSelection };
     static props = { onCloseSidePanel: Function };
     loadedLocales = [];
     setup() {
@@ -56373,49 +57099,111 @@ class ScreenWidthStore {
 }
 
 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 {
@@ -56423,34 +57211,85 @@ class SidePanelStore extends SpreadsheetStore {
         }
     }
     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);
         }
     }
 }
@@ -56598,11 +57437,11 @@ class Grid extends Component {
             this.hoveredCell.clear();
         });
         this.cellPopovers = useStore(CellPopoverStore);
-        useEffect(() => {
-            if (!this.sidePanel.isOpen) {
+        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;
@@ -59694,7 +60533,7 @@ class DataValidationPlugin extends CorePlugin {
         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;
@@ -59704,9 +60543,12 @@ class DataValidationPlugin extends CorePlugin {
             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);
@@ -63114,7 +63956,7 @@ class PivotCorePlugin extends CorePlugin {
                 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;
             }
@@ -63185,10 +64027,7 @@ class PivotCorePlugin extends CorePlugin {
     // 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);
@@ -63277,7 +64116,6 @@ class PivotCorePlugin extends CorePlugin {
         }
     }
     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 */;
@@ -63291,26 +64129,6 @@ class PivotCorePlugin extends CorePlugin {
         }
         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
     // ---------------------------------------------------------------------
@@ -63392,9 +64210,7 @@ class SettingsPlugin extends CorePlugin {
         this.locale = data.settings?.locale ?? DEFAULT_LOCALE;
     }
     export(data) {
-        data.settings = {
-            locale: this.locale,
-        };
+        data.settings = { locale: this.locale };
     }
 }
 
@@ -66429,11 +67245,8 @@ class CellIconPlugin extends CoreViewPlugin {
         }
         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);
@@ -72266,49 +73079,17 @@ class ClipboardPlugin extends UIPlugin {
         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
@@ -75137,6 +75918,17 @@ clickableCellRegistry.add("link", {
         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,
 });
 
@@ -76848,12 +77640,13 @@ class ClickableCellsStore extends SpreadsheetStore {
             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;
@@ -77238,24 +78031,36 @@ css /* scss */ `
     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 {
@@ -77332,43 +78137,114 @@ css /* scss */ `
 `;
 class SidePanel extends 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 Component {
+    static template = "o-spreadsheet-SidePanels";
     static props = {};
+    static components = { SidePanel };
     sidePanelStore;
     spreadsheetRect = useSpreadsheetRect();
     setup() {
         this.sidePanelStore = useStore(SidePanelStore);
-        useEffect((isOpen) => {
-            if (!isOpen) {
+        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 Component {
@@ -78930,7 +79806,7 @@ class Spreadsheet extends Component {
         Grid,
         BottomBar,
         SmallBottomBar,
-        SidePanel,
+        SidePanels,
         SpreadsheetDashboard,
         HeaderGroupContainer,
         FullScreenChart,
@@ -78953,7 +79829,9 @@ class Spreadsheet extends Component {
         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);
     }
@@ -79037,7 +79915,7 @@ class Spreadsheet extends Component {
             this.checkViewportSize();
         });
         const resizeObserver = new ResizeObserver(() => {
-            this.sidePanel.changePanelSize(this.sidePanel.panelSize, this.spreadsheetRect.width);
+            this.sidePanel.changeSpreadsheetWidth(this.spreadsheetRect.width);
         });
     }
     bindModelEvents() {
@@ -80152,26 +81030,28 @@ class SelectionStreamProcessorImpl {
                 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)) {
@@ -80401,18 +81281,26 @@ class SelectionStreamProcessorImpl {
      * 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) {
@@ -83586,6 +84474,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";