@odoo/o-spreadsheet 18.5.0-alpha.6 → 18.5.0-alpha.7

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.5.0-alpha.6
- * @date 2025-08-05T06:27:49.505Z
- * @hash 67e091f
+ * @version 18.5.0-alpha.7
+ * @date 2025-08-08T11:00:44.117Z
+ * @hash 1019d55
  */
 
 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';
@@ -2655,6 +2655,7 @@ const readonlyAllowedCommands = new Set([
     "SET_FORMULA_VISIBILITY",
     "UPDATE_FILTER",
     "UPDATE_CHART",
+    "UPDATE_CAROUSEL_ACTIVE_ITEM",
 ]);
 const coreTypes = new Set([
     /** CELLS */
@@ -2697,6 +2698,8 @@ const coreTypes = new Set([
     "CREATE_FIGURE",
     "DELETE_FIGURE",
     "UPDATE_FIGURE",
+    "CREATE_CAROUSEL",
+    "UPDATE_CAROUSEL",
     /** FORMATTING */
     "SET_FORMATTING",
     "CLEAR_FORMATTING",
@@ -2706,6 +2709,7 @@ const coreTypes = new Set([
     /** CHART */
     "CREATE_CHART",
     "UPDATE_CHART",
+    "DELETE_CHART",
     /** FILTERS */
     "CREATE_TABLE",
     "REMOVE_TABLE",
@@ -2900,6 +2904,7 @@ var CommandResult;
     CommandResult["InvalidColor"] = "InvalidColor";
     CommandResult["InvalidPivotDataSet"] = "InvalidPivotDataSet";
     CommandResult["InvalidPivotCustomField"] = "InvalidPivotCustomField";
+    CommandResult["MissingFigureArguments"] = "MissingFigureArguments";
 })(CommandResult || (CommandResult = {}));
 
 const availableConditionalFormatOperators = new Set([
@@ -9220,7 +9225,7 @@ class ChartClipboardHandler extends AbstractFigureClipboardHandler {
             return;
         }
         const copiedFigure = { ...figure };
-        const chart = this.getters.getChart(data.figureId);
+        const chart = this.getters.getChartFromFigureId(data.figureId);
         if (!chart) {
             throw new Error(`No chart for the given id: ${data.figureId}`);
         }
@@ -9256,6 +9261,7 @@ class ChartClipboardHandler extends AbstractFigureClipboardHandler {
         }
         this.dispatch("CREATE_CHART", {
             figureId,
+            chartId: figureId,
             sheetId,
             definition: copy.getDefinition(),
             col,
@@ -22996,7 +23002,7 @@ chartJsExtensionRegistry.add("sunburstHoverPlugin", {
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
-        figureUI: Object,
+        chartId: String,
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("graphContainer");
@@ -23011,7 +23017,7 @@ class ChartJsComponent extends Component {
         return `background-color: ${this.background}`;
     }
     get chartRuntime() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
         if (!("chartJsConfig" in runtime)) {
             throw new Error("Unsupported chart runtime");
         }
@@ -23049,7 +23055,7 @@ class ChartJsComponent extends Component {
     }
     createChart(chartData) {
         if (this.env.model.getters.isDashboard() && this.animationStore) {
-            const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+            const chartType = this.env.model.getters.getChart(this.props.chartId)?.type;
             if (chartType && this.animationStore.animationPlayed[this.animationFigureId] !== chartType) {
                 chartData = this.enableAnimationInChartData(chartData);
                 this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
@@ -23061,7 +23067,7 @@ class ChartJsComponent extends Component {
     }
     updateChartJs(chartData) {
         if (this.env.model.getters.isDashboard()) {
-            const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+            const chartType = this.env.model.getters.getChart(this.props.chartId)?.type;
             if (chartType && this.hasChartDataChanged() && this.animationStore) {
                 chartData = this.enableAnimationInChartData(chartData);
                 this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
@@ -23089,9 +23095,7 @@ class ChartJsComponent extends Component {
         };
     }
     get animationFigureId() {
-        return this.props.isFullScreen
-            ? this.props.figureUI.id + "-fullscreen"
-            : this.props.figureUI.id;
+        return this.props.isFullScreen ? this.props.chartId + "-fullscreen" : this.props.chartId;
     }
 }
 
@@ -23756,14 +23760,14 @@ class ScorecardChartConfigBuilder {
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
-        figureUI: Object,
+        chartId: String,
     };
     canvas = useRef("chartContainer");
     get runtime() {
-        return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+        return this.env.model.getters.getChartRuntime(this.props.chartId);
     }
     get title() {
-        const title = this.env.model.getters.getChartDefinition(this.props.figureUI.id).title.text ?? "";
+        const title = this.env.model.getters.getChartDefinition(this.props.chartId).title.text ?? "";
         // chart titles are extracted from .json files and they are translated at runtime here
         return _t(title);
     }
@@ -27085,13 +27089,13 @@ const ANIMATION_DURATION = 1000;
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     static props = {
-        figureUI: Object,
+        chartId: String,
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("chartContainer");
     animationStore;
     get runtime() {
-        return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+        return this.env.model.getters.getChartRuntime(this.props.chartId);
     }
     setup() {
         if (this.env.model.getters.isDashboard()) {
@@ -27139,9 +27143,7 @@ class GaugeChartComponent extends Component {
         return this.canvas.el;
     }
     get animationFigureId() {
-        return this.props.isFullScreen
-            ? this.props.figureUI.id + "-fullscreen"
-            : this.props.figureUI.id;
+        return this.props.isFullScreen ? this.props.chartId + "-fullscreen" : this.props.chartId;
     }
 }
 /**
@@ -29430,7 +29432,7 @@ chartSubtypeRegistry
  */
 function chartFactory(getters) {
     const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-    function createChart(id, definition, sheetId) {
+    function createChart(figureId, definition, sheetId) {
         const builder = builders.find((builder) => builder.match(definition.type));
         if (!builder) {
             throw new Error(`No builder for this chart: ${definition.type}`);
@@ -29781,6 +29783,8 @@ function getDefaultXLSXStructure(data) {
     return {
         relsFiles: [],
         sharedStrings: [],
+        chartIds: [],
+        imageIds: [],
         // default Values that will always be part of the style sheet
         styles: [
             {
@@ -29858,6 +29862,10 @@ function escapeQueryNameSpaces(query) {
 }
 
 function getChartMenuActions(figureId, onFigureDeleted, env) {
+    const chartId = env.model.getters.getChartIdFromFigureId(figureId);
+    if (!chartId) {
+        return [];
+    }
     const menuItemSpecs = [
         {
             id: "edit",
@@ -29880,8 +29888,8 @@ function getChartMenuActions(figureId, onFigureDeleted, env) {
             execute: async () => {
                 const figureSheetId = env.model.getters.getFigureSheetId(figureId);
                 const figure = env.model.getters.getFigure(figureSheetId, figureId);
-                const chartType = env.model.getters.getChartType(figureId);
-                const runtime = env.model.getters.getChartRuntime(figureId);
+                const chartType = env.model.getters.getChartType(chartId);
+                const runtime = env.model.getters.getChartRuntime(chartId);
                 const imageUrl = chartToImageUrl(runtime, figure, chartType);
                 const innerHTML = `<img src="${xmlEscape(imageUrl)}" />`;
                 const blob = await chartToImageFile(runtime, figure, chartType);
@@ -29901,8 +29909,8 @@ function getChartMenuActions(figureId, onFigureDeleted, env) {
             execute: async () => {
                 const figureSheetId = env.model.getters.getFigureSheetId(figureId);
                 const figure = env.model.getters.getFigure(figureSheetId, figureId);
-                const chartType = env.model.getters.getChartType(figureId);
-                const runtime = env.model.getters.getChartRuntime(figureId);
+                const chartType = env.model.getters.getChartType(chartId);
+                const runtime = env.model.getters.getChartRuntime(chartId);
                 const url = chartToImageUrl(runtime, figure, chartType);
                 downloadFile(url, "chart");
             },
@@ -29961,6 +29969,35 @@ function getImageMenuActions(figureId, onFigureDeleted, env) {
     ];
     return createActions(menuItemSpecs);
 }
+function getCarouselMenuActions(figureId, onFigureDeleted, env) {
+    const menuItemSpecs = [
+        {
+            id: "edit_carousel",
+            name: _t("Edit carousel"),
+            sequence: 1,
+            execute: () => {
+                env.model.dispatch("SELECT_FIGURE", { figureId });
+                env.openSidePanel("CarouselPanel", { figureId });
+            },
+            icon: "o-spreadsheet-Icon.EDIT",
+            isEnabled: (env) => !env.isSmall,
+        },
+        {
+            id: "edit_chart",
+            name: _t("Edit chart"),
+            sequence: 1,
+            execute: () => {
+                env.model.dispatch("SELECT_FIGURE", { figureId });
+                env.openSidePanel("ChartPanel", {});
+            },
+            icon: "o-spreadsheet-Icon.EDIT",
+            isEnabled: (env) => !env.isSmall,
+            isVisible: (env) => env.model.getters.getSelectedCarouselItem(figureId)?.type === "chart",
+        },
+        getDeleteMenuItem(figureId, onFigureDeleted, env),
+    ];
+    return createActions(menuItemSpecs).filter((action) => env.model.getters.isReadonly() ? action.isReadonlyAllowed : true);
+}
 function getCopyMenuItem(figureId, env, copiedNotificationMessage) {
     return {
         id: "copy",
@@ -30009,6 +30046,103 @@ function getDeleteMenuItem(figureId, onFigureDeleted, env) {
     };
 }
 
+const CAROUSEL_DEFAULT_CHART_DEFINITION = {
+    type: "bar",
+    title: {},
+    stacked: false,
+    dataSetsHaveTitle: false,
+    dataSets: [],
+    legendPosition: "top",
+};
+function getCarouselItemPreview(getters, item) {
+    if (item.type === "carouselDataView") {
+        return "o-spreadsheet-Icon.LIST";
+    }
+    const definition = getters.getChartDefinition(item.chartId);
+    const matchedChart = chartSubtypeRegistry.getAll().find((c) => c.matcher?.(definition)) ||
+        chartSubtypeRegistry.get(definition.type);
+    return matchedChart.preview;
+}
+function getCarouselItemTitle(getters, item) {
+    if (item.title) {
+        return item.title;
+    }
+    if (item.type === "carouselDataView") {
+        return _t("Data");
+    }
+    const definition = getters.getChartDefinition(item.chartId);
+    const matchedChart = chartSubtypeRegistry.getAll().find((c) => c.matcher?.(definition)) ||
+        chartSubtypeRegistry.get(definition.type);
+    return matchedChart.displayName;
+}
+
+class CarouselFigure extends Component {
+    static template = "o-spreadsheet-CarouselFigure";
+    static props = {
+        figureUI: Object,
+        onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
+    };
+    static components = {};
+    setup() {
+        useEffect(() => {
+            if (this.selectedCarouselItem?.type === "carouselDataView") {
+                this.props.editFigureStyle?.({ "pointer-events": "none" });
+            }
+            else {
+                this.props.editFigureStyle?.({ "pointer-events": "auto" });
+            }
+        });
+    }
+    get carousel() {
+        return this.env.model.getters.getCarousel(this.props.figureUI.id);
+    }
+    get selectedCarouselItem() {
+        return this.env.model.getters.getSelectedCarouselItem(this.props.figureUI.id);
+    }
+    get chartComponent() {
+        const selectedItem = this.selectedCarouselItem;
+        if (selectedItem?.type !== "chart") {
+            throw new Error("Selected item is not a chart");
+        }
+        const type = this.env.model.getters.getChartType(selectedItem.chartId);
+        const component = chartComponentRegistry.get(type);
+        if (!component) {
+            throw new Error(`Component is not defined for type ${type}`);
+        }
+        return component;
+    }
+    onCarouselDoubleClick() {
+        this.env.model.dispatch("SELECT_FIGURE", { figureId: this.props.figureUI.id });
+        this.env.openSidePanel("CarouselPanel", { figureId: this.props.figureUI.id });
+    }
+    isItemSelected(item) {
+        const selectedItem = this.selectedCarouselItem;
+        return deepEquals(selectedItem, item);
+    }
+    getItemTitle(item) {
+        return getCarouselItemTitle(this.env.model.getters, item);
+    }
+    onCarouselTabClick(item) {
+        this.env.model.dispatch("UPDATE_CAROUSEL_ACTIVE_ITEM", {
+            figureId: this.props.figureUI.id,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            item,
+        });
+        if (item.type === "carouselDataView" &&
+            this.env.model.getters.getSelectedFigureId() === this.props.figureUI.id) {
+            this.env.model.dispatch("SELECT_FIGURE", { figureId: null });
+        }
+    }
+    get headerStyle() {
+        const cssProperties = {};
+        if (this.selectedCarouselItem?.type === "carouselDataView") {
+            cssProperties["background-color"] = "#ffffff";
+        }
+        return cssPropertiesToCss(cssProperties);
+    }
+}
+
 class FullScreenChartStore extends SpreadsheetStore {
     mutators = ["toggleFullScreenChart"];
     fullScreenFigure = undefined;
@@ -30793,9 +30927,9 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         this.originalChartDefinition = this.getters.getChartDefinition(chartId);
     }
     updateType(type) {
-        const figureId = this.chartId;
-        const currentDefinition = this.getters.getChartDefinition(figureId);
-        if (currentDefinition.type === type) {
+        const chartId = this.chartId;
+        const currentDefinition = this.getters.getChartDefinition(chartId);
+        if (currentDefinition?.type === type) {
             return;
         }
         let definition;
@@ -30805,7 +30939,7 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         else {
             const newChartInfo = chartSubtypeRegistry.get(type);
             const ChartClass = chartRegistry.get(newChartInfo.chartType);
-            const chartCreationContext = this.getters.getContextCreationChart(figureId);
+            const chartCreationContext = this.getters.getContextCreationChart(chartId);
             if (!chartCreationContext)
                 return;
             definition = {
@@ -30815,7 +30949,8 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         }
         this.model.dispatch("UPDATE_CHART", {
             definition,
-            figureId,
+            chartId,
+            figureId: this.getters.getFigureIdFromChartId(chartId),
             sheetId: this.getters.getActiveSheetId(),
         });
     }
@@ -30836,17 +30971,17 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
 class ChartDashboardMenu extends Component {
     static template = "o-spreadsheet-ChartDashboardMenu";
     static components = { MenuPopover };
-    static props = { figureUI: Object };
+    static props = { chartId: String };
     fullScreenFigureStore;
     store;
     menuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
     setup() {
         super.setup();
-        this.store = useLocalStore(ChartDashboardMenuStore, this.props.figureUI.id);
+        this.store = useLocalStore(ChartDashboardMenuStore, this.props.chartId);
         this.fullScreenFigureStore = useStore(FullScreenChartStore);
-        onWillUpdateProps(({ figureUI }) => {
-            if (figureUI.id !== this.props.figureUI.id) {
-                this.store.reset(figureUI.id);
+        onWillUpdateProps(({ chartId }) => {
+            if (chartId !== this.props.chartId) {
+                this.store.reset(chartId);
             }
         });
     }
@@ -30854,26 +30989,28 @@ class ChartDashboardMenu extends Component {
         return [this.fullScreenMenuItem, ...this.store.changeChartTypeMenuItems].filter(isDefined);
     }
     get backgroundColor() {
-        const color = this.env.model.getters.getChartDefinition(this.props.figureUI.id).background;
+        const color = this.env.model.getters.getChartDefinition(this.props.chartId).background;
         return "background-color: " + (color || BACKGROUND_CHART_COLOR);
     }
     openContextMenu(ev) {
         this.menuState.isOpen = true;
         this.menuState.anchorRect = { x: ev.clientX, y: ev.clientY, width: 0, height: 0 };
-        this.menuState.menuItems = getChartMenuActions(this.props.figureUI.id, () => { }, this.env);
+        const figureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
+        this.menuState.menuItems = getChartMenuActions(figureId, () => { }, this.env);
     }
     get fullScreenMenuItem() {
-        const definition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
+        const definition = this.env.model.getters.getChartDefinition(this.props.chartId);
+        const figureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
         if (definition.type === "scorecard") {
             return undefined;
         }
-        if (this.props.figureUI.id === this.fullScreenFigureStore.fullScreenFigure?.id) {
+        if (this.props.chartId === this.fullScreenFigureStore.fullScreenFigure?.id) {
             return {
                 id: "fullScreenChart",
                 label: _t("Exit Full Screen"),
                 iconClass: "fa fa-compress",
                 onClick: () => {
-                    this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                    this.fullScreenFigureStore.toggleFullScreenChart(figureId);
                 },
             };
         }
@@ -30882,7 +31019,7 @@ class ChartDashboardMenu extends Component {
             label: _t("Full Screen"),
             iconClass: "fa fa-expand",
             onClick: () => {
-                this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                this.fullScreenFigureStore.toggleFullScreenChart(figureId);
             },
         };
     }
@@ -30903,6 +31040,7 @@ class ChartFigure extends Component {
     static props = {
         figureUI: Object,
         onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
     };
     static components = { ChartDashboardMenu };
     onDoubleClick() {
@@ -30910,7 +31048,14 @@ class ChartFigure extends Component {
         this.env.openSidePanel("ChartPanel");
     }
     get chartType() {
-        return this.env.model.getters.getChartType(this.props.figureUI.id);
+        return this.env.model.getters.getChartType(this.chartId);
+    }
+    get chartId() {
+        const chartId = this.env.model.getters.getChartIdFromFigureId(this.props.figureUI.id);
+        if (!chartId) {
+            throw new Error(`No chart found for figure ID: ${this.props.figureUI.id}`);
+        }
+        return chartId;
     }
     get chartComponent() {
         const type = this.chartType;
@@ -30927,6 +31072,7 @@ class ImageFigure extends Component {
     static props = {
         figureUI: Object,
         onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
     };
     static components = {};
     // ---------------------------------------------------------------------------
@@ -30953,6 +31099,10 @@ figureRegistry.add("image", {
     borderWidth: 0,
     menuBuilder: getImageMenuActions,
 });
+figureRegistry.add("carousel", {
+    Component: CarouselFigure,
+    menuBuilder: getCarouselMenuActions,
+});
 
 // -----------------------------------------------------------------------------
 // STYLE
@@ -30979,6 +31129,7 @@ css /*SCSS*/ `
   .o-figure-wrapper {
     position: absolute;
     box-sizing: content-box;
+    pointer-events: auto;
 
     .o-fig-anchor {
       z-index: ${ComponentsImportance.FigureAnchor};
@@ -31037,6 +31188,7 @@ class FigureComponent extends Component {
     static props = {
         figureUI: Object,
         style: { type: String, optional: true },
+        class: { type: String, optional: true },
         onFigureDeleted: { type: Function, optional: true },
         onMouseDown: { type: Function, optional: true },
         onClickAnchor: { type: Function, optional: true },
@@ -31049,6 +31201,7 @@ class FigureComponent extends Component {
     };
     menuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
     figureRef = useRef("figure");
+    figureWrapperRef = useRef("figureWrapper");
     menuButtonRef = useRef("menuButton");
     borderWidth;
     get isSelected() {
@@ -31241,6 +31394,13 @@ class FigureComponent extends Component {
             .get(this.props.figureUI.tag)
             .menuBuilder(this.props.figureUI.id, this.props.onFigureDeleted, this.env);
     }
+    editWrapperStyle(properties) {
+        if (this.figureWrapperRef.el) {
+            for (const property in properties) {
+                this.figureWrapperRef.el.style.setProperty(property, properties[property] || null);
+            }
+        }
+    }
 }
 
 class DelayedHoveredCellStore extends SpreadsheetStore {
@@ -38773,16 +38933,15 @@ function pushElement(property, propertyList) {
     reverseLookup.set(canonical, maxId);
     return maxId;
 }
-const chartIds = [];
 /**
  * Convert a chart o-spreadsheet id to a xlsx id which
  * are unsigned integers (starting from 1).
  */
-function convertChartId(chartId) {
-    const xlsxId = chartIds.findIndex((id) => id === chartId);
+function convertChartId(chartId, construct) {
+    const xlsxId = construct.chartIds.findIndex((id) => id === chartId);
     if (xlsxId === -1) {
-        chartIds.push(chartId);
-        return chartIds.length;
+        construct.chartIds.push(chartId);
+        return construct.chartIds.length;
     }
     return xlsxId + 1;
 }
@@ -41177,6 +41336,8 @@ class XlsxReader {
             sheets: sheets,
             sharedStrings,
             externalBooks,
+            chartIds: [],
+            imageIds: [],
         };
     }
     buildXlsxFileStructure() {
@@ -41854,6 +42015,18 @@ migrationStepRegistry
         }
         return data;
     },
+})
+    .add("18.5.1", {
+    migrate(data) {
+        for (const sheet of data.sheets || []) {
+            for (const figure of sheet.figures || []) {
+                if (figure.tag === "chart") {
+                    figure.data.chartId = figure.id;
+                }
+            }
+        }
+        return data;
+    },
 });
 function fixOverlappingFilters(data) {
     for (const sheet of data.sheets || []) {
@@ -42107,7 +42280,12 @@ function fixChartDefinitions(data, initialMessages) {
         sheet.figures?.forEach((figure) => {
             if (figure.tag === "chart") {
                 // chart definition
-                map[figure.id] = figure.data;
+                if (data.version && compareVersions(String(data.version), "18.5.1") <= 0) {
+                    map[figure.data.chartId] = figure.data;
+                }
+                else {
+                    map[figure.id] = figure.data;
+                }
             }
         });
     }
@@ -42118,20 +42296,20 @@ function fixChartDefinitions(data, initialMessages) {
                 let command = cmd;
                 switch (cmd.type) {
                     case "CREATE_CHART":
-                        map[cmd.figureId] = cmd.definition;
+                        map[cmd.chartId] = cmd.definition;
                         break;
                     case "UPDATE_CHART":
-                        if (!map[cmd.figureId]) {
+                        if (!map[cmd.chartId]) {
                             /** the chart does not exist on the map, it might have been created after a duplicate sheet.
                              * We don't have access to the definition, so we skip the command.
                              */
-                            console.log(`Fix chart definition: chart with id ${cmd.figureId} not found.`);
+                            console.log(`Fix chart definition: chart with id ${cmd.chartId} not found.`);
                             continue;
                         }
-                        const definition = map[cmd.figureId];
+                        const definition = map[cmd.chartId];
                         const newDefinition = { ...definition, ...cmd.definition };
                         command = { ...cmd, definition: newDefinition };
-                        map[cmd.figureId] = newDefinition;
+                        map[cmd.chartId] = newDefinition;
                         break;
                 }
                 commands.push(command);
@@ -42704,6 +42882,7 @@ const CREATE_CHART = (env) => {
     const result = env.model.dispatch("CREATE_CHART", {
         sheetId,
         figureId,
+        chartId: figureId,
         col,
         row,
         offset,
@@ -42715,6 +42894,26 @@ const CREATE_CHART = (env) => {
         env.openSidePanel("ChartPanel");
     }
 };
+const CREATE_CAROUSEL = (env) => {
+    const getters = env.model.getters;
+    const figureId = env.model.uuidGenerator.smallUuid();
+    const sheetId = getters.getActiveSheetId();
+    const size = { width: DEFAULT_FIGURE_WIDTH, height: DEFAULT_FIGURE_HEIGHT };
+    const { col, row, offset } = centerFigurePosition(getters, size);
+    const result = env.model.dispatch("CREATE_CAROUSEL", {
+        sheetId,
+        figureId,
+        col,
+        row,
+        offset,
+        size,
+        definition: { items: [] },
+    });
+    if (result.isSuccessful) {
+        env.model.dispatch("SELECT_FIGURE", { figureId });
+        env.openSidePanel("CarouselPanel", { figureId });
+    }
+};
 //------------------------------------------------------------------------------
 // Pivots
 //------------------------------------------------------------------------------
@@ -43966,6 +44165,12 @@ const insertChart = {
     isEnabled: (env) => !env.isSmall,
     icon: "o-spreadsheet-Icon.INSERT_CHART",
 };
+const insertCarousel = {
+    name: _t("Carousel"),
+    execute: CREATE_CAROUSEL,
+    isEnabled: (env) => !env.isSmall,
+    icon: "o-spreadsheet-Icon.CAROUSEL",
+};
 const insertPivot = {
     name: _t("Pivot table"),
     execute: CREATE_PIVOT,
@@ -48056,6 +48261,7 @@ class FiguresContainer extends Component {
         horizontalSnap: undefined,
         verticalSnap: undefined,
         cancelDnd: undefined,
+        overlappingCarousel: undefined,
     });
     setup() {
         onMounted(() => {
@@ -48078,6 +48284,7 @@ class FiguresContainer extends Component {
                 this.dnd.draggedFigure = undefined;
                 this.dnd.horizontalSnap = undefined;
                 this.dnd.verticalSnap = undefined;
+                this.dnd.overlappingCarousel = undefined;
                 this.dnd.cancelDnd = undefined;
             }
         });
@@ -48216,26 +48423,46 @@ class FiguresContainer extends Component {
             const currentMousePosition = { x: ev.clientX, y: ev.clientY };
             const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigure, maxDimensions, initialScrollPosition, getters.getActiveSheetScrollInfo());
             const otherFigures = this.getOtherFigures(initialFigure.id);
-            const snapResult = snapForMove(getters, draggedFigure, otherFigures);
-            this.dnd.draggedFigure = snapResult.snappedFigure;
-            this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
-            this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+            const overlappingCarousel = this.getCarouselOverlappingChart(draggedFigure, otherFigures);
+            this.dnd.overlappingCarousel = overlappingCarousel;
+            if (!overlappingCarousel) {
+                const snapResult = snapForMove(getters, draggedFigure, otherFigures);
+                this.dnd.draggedFigure = snapResult.snappedFigure;
+                this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
+                this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+            }
+            else {
+                this.dnd.draggedFigure = draggedFigure;
+                this.dnd.horizontalSnap = undefined;
+                this.dnd.verticalSnap = undefined;
+            }
         };
         const onMouseUp = (ev) => {
             if (!this.dnd.draggedFigure) {
                 return;
             }
             const { col, row, offset } = this.env.model.getters.getPositionAnchorOffset(this.dnd.draggedFigure);
+            if (!this.dnd.overlappingCarousel) {
+                this.env.model.dispatch("UPDATE_FIGURE", {
+                    sheetId,
+                    figureId: figureUI.id,
+                    offset,
+                    col,
+                    row,
+                });
+            }
+            else {
+                this.env.model.dispatch("ADD_FIGURE_CHART_TO_CAROUSEL", {
+                    sheetId,
+                    carouselFigureId: this.dnd.overlappingCarousel.id,
+                    chartFigureId: figureUI.id,
+                });
+                this.props.onFigureDeleted();
+            }
             this.dnd.draggedFigure = undefined;
             this.dnd.horizontalSnap = undefined;
             this.dnd.verticalSnap = undefined;
-            this.env.model.dispatch("UPDATE_FIGURE", {
-                sheetId,
-                figureId: figureUI.id,
-                offset,
-                col,
-                row,
-            });
+            this.dnd.overlappingCarousel = undefined;
         };
         this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
     }
@@ -48287,6 +48514,7 @@ class FiguresContainer extends Component {
             this.dnd.draggedFigure = undefined;
             this.dnd.horizontalSnap = undefined;
             this.dnd.verticalSnap = undefined;
+            this.dnd.overlappingCarousel = undefined;
         };
         this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
     }
@@ -48303,10 +48531,15 @@ class FiguresContainer extends Component {
         if (figureUI.id !== this.dnd.draggedFigure?.id)
             return "";
         return cssPropertiesToCss({
-            opacity: "0.9",
+            opacity: this.dnd.overlappingCarousel?.id ? "0.6" : "0.9",
             cursor: "grabbing",
         });
     }
+    getFigureClass(figureUI) {
+        if (figureUI.id !== this.dnd.overlappingCarousel?.id)
+            return "";
+        return "o-add-to-carousel";
+    }
     getSnap(snapLine) {
         if (!snapLine || !this.dnd.draggedFigure)
             return undefined;
@@ -48353,6 +48586,20 @@ class FiguresContainer extends Component {
             });
         }
     }
+    getCarouselOverlappingChart(figureUI, otherFigures) {
+        if (figureUI.tag !== "chart") {
+            return undefined;
+        }
+        const minimumOverlap = 20; // Minimum overlap in pixels to consider a carousel overlapping
+        const carousels = otherFigures.filter((f) => f.tag === "carousel");
+        return carousels.find((carousel) => {
+            const xOverlap = Math.max(0, Math.min(figureUI.x + figureUI.width, carousel.x + carousel.width) -
+                Math.max(figureUI.x, carousel.x));
+            const yOverlap = Math.max(0, Math.min(figureUI.y + figureUI.height, carousel.y + carousel.height) -
+                Math.max(figureUI.y, carousel.y));
+            return xOverlap >= minimumOverlap && yOverlap >= minimumOverlap;
+        });
+    }
 }
 
 css /* scss */ `
@@ -51035,6 +51282,226 @@ class Selection extends Component {
     }
 }
 
+function useAutofocus({ refName }) {
+    const ref = useRef(refName);
+    useEffect((el) => {
+        el?.focus();
+    }, () => [ref.el]);
+}
+
+css /* scss */ `
+  .o-spreadsheet {
+    .os-input {
+      border-width: 0 0 1px 0;
+      border-color: transparent;
+      outline: none;
+      text-overflow: ellipsis;
+      color: ${TEXT_BODY};
+    }
+    .os-input:hover,
+    .os-input:focus {
+      border-color: ${GRAY_300};
+    }
+  }
+`;
+class TextInput extends Component {
+    static template = "o-spreadsheet-TextInput";
+    static props = {
+        value: String,
+        onChange: Function,
+        class: {
+            type: String,
+            optional: true,
+        },
+        id: {
+            type: String,
+            optional: true,
+        },
+        placeholder: {
+            type: String,
+            optional: true,
+        },
+        autofocus: {
+            type: Boolean,
+            optional: true,
+        },
+    };
+    inputRef = useRef("input");
+    setup() {
+        useExternalListener(window, "click", (ev) => {
+            if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
+                this.save();
+            }
+        }, { capture: true });
+        if (this.props.autofocus) {
+            useAutofocus({ refName: "input" });
+        }
+    }
+    onKeyDown(ev) {
+        switch (ev.key) {
+            case "Enter":
+                this.save();
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Escape":
+                if (this.inputRef.el) {
+                    this.inputRef.el.value = this.props.value;
+                    this.inputRef.el.blur();
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+        }
+    }
+    save() {
+        const currentValue = (this.inputRef.el?.value || "").trim();
+        if (currentValue !== this.props.value) {
+            this.props.onChange(currentValue);
+        }
+        this.inputRef.el?.blur();
+    }
+    onMouseDown(ev) {
+        // Stop the event if the input is not focused, we handle everything in onMouseUp
+        if (ev.target !== document.activeElement) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+    onMouseUp(ev) {
+        const target = ev.target;
+        if (target !== document.activeElement) {
+            target.focus();
+            target.select();
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+}
+
+class CarouselPanel extends Component {
+    static template = "o-spreadsheet-CarouselPanel";
+    static props = { onCloseSidePanel: Function, figureId: String };
+    static components = { TextInput };
+    dragAndDrop = useDragAndDropListItems();
+    previewListRef = useRef("previewList");
+    setup() {
+        let lastCarouselItems = [...this.carouselItems];
+        onWillUpdateProps(() => {
+            if (!deepEquals(this.carouselItems, lastCarouselItems)) {
+                this.dragAndDrop.cancel();
+            }
+            lastCarouselItems = [...this.carouselItems];
+        });
+    }
+    get carouselItems() {
+        return this.env.model.getters.getCarousel(this.props.figureId).items;
+    }
+    getPreviewDivStyle(item) {
+        return this.dragAndDrop.itemsStyle[this.getItemId(item)] || "";
+    }
+    getItemId(item) {
+        return item.type === "chart" ? item.chartId : "transparent-carousel";
+    }
+    addNewChartToCarousel() {
+        this.env.model.dispatch("ADD_NEW_CHART_TO_CAROUSEL", {
+            figureId: this.props.figureId,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+        });
+    }
+    get hasDataView() {
+        return this.carouselItems.some((item) => item.type === "carouselDataView");
+    }
+    addDataViewToCarousel() {
+        const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+        this.env.model.dispatch("UPDATE_CAROUSEL", {
+            figureId: this.props.figureId,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            definition: { items: [...carousel.items, { type: "carouselDataView" }] },
+        });
+    }
+    activateCarouselItem(item) {
+        this.env.model.dispatch("UPDATE_CAROUSEL_ACTIVE_ITEM", {
+            figureId: this.props.figureId,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            item,
+        });
+    }
+    editCarouselItem(item) {
+        if (item.type === "chart") {
+            this.activateCarouselItem(item);
+            this.env.model.dispatch("SELECT_FIGURE", { figureId: this.props.figureId });
+            this.env.openSidePanel("ChartPanel", { chartId: item.chartId });
+        }
+    }
+    renameCarouselItem(item, newName) {
+        const trimmedName = newName.trim();
+        if (!trimmedName || trimmedName === this.getItemTitle(item).toString()) {
+            return;
+        }
+        const items = [...this.carouselItems];
+        const itemIndex = this.carouselItems.findIndex((itm) => deepEquals(itm, item));
+        if (itemIndex !== -1) {
+            items[itemIndex] = { ...item, title: trimmedName };
+            this.env.model.dispatch("UPDATE_CAROUSEL", {
+                figureId: this.props.figureId,
+                sheetId: this.env.model.getters.getActiveSheetId(),
+                definition: { items },
+            });
+        }
+    }
+    deleteCarouselItem(item) {
+        const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+        const items = carousel.items.filter((itm) => !deepEquals(itm, item));
+        this.env.model.dispatch("UPDATE_CAROUSEL", {
+            figureId: this.props.figureId,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            definition: { items },
+        });
+    }
+    onDragHandleMouseDown(item, event) {
+        if (event.button !== 0)
+            return;
+        const previewRects = Array.from(this.previewListRef.el.children).map((previewEl) => getBoundingRectAsPOJO(previewEl));
+        const items = this.carouselItems.map((item, index) => ({
+            id: this.getItemId(item),
+            size: previewRects[index].height,
+            position: previewRects[index].y,
+        }));
+        this.dragAndDrop.start("vertical", {
+            draggedItemId: this.getItemId(item),
+            initialMousePosition: event.clientY,
+            items: items,
+            scrollableContainerEl: this.previewListRef.el,
+            onDragEnd: (itemId, finalIndex) => this.onDragEnd(item, finalIndex),
+        });
+    }
+    onDragEnd(item, finalIndex) {
+        const originalIndex = this.carouselItems.findIndex((itm) => deepEquals(itm, item));
+        if (originalIndex === -1 || originalIndex === finalIndex) {
+            return;
+        }
+        const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+        const items = [...carousel.items];
+        items.splice(originalIndex, 1);
+        items.splice(finalIndex, 0, item);
+        this.env.model.dispatch("UPDATE_CAROUSEL", {
+            figureId: this.props.figureId,
+            sheetId: this.env.model.getters.getActiveSheetId(),
+            definition: { items },
+        });
+    }
+    getItemTitle(item) {
+        return getCarouselItemTitle(this.env.model.getters, item);
+    }
+    getItemPreview(item) {
+        return getCarouselItemPreview(this.env.model.getters, item);
+    }
+    get carouselAddChartInfoMessage() {
+        return _t("Add a chart to the carousel. You can also add a chart by dragging and dropping it over the carousel figure.");
+    }
+}
+
 class ChartDataSeries extends Component {
     static template = "o-spreadsheet.ChartDataSeries";
     static components = { SelectionInput, Section };
@@ -51101,7 +51568,7 @@ class GenericChartConfigPanel extends Component {
         ChartErrorSection,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -51159,7 +51626,7 @@ class GenericChartConfigPanel extends Component {
         ];
     }
     onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             dataSetsHaveTitle,
         });
     }
@@ -51231,7 +51698,7 @@ class GenericChartConfigPanel extends Component {
             return;
         }
         const labelRange = dataSets.length > 1 ? dataSets.shift().dataRange : "";
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             labelRange,
             dataSets,
         });
@@ -51248,7 +51715,7 @@ class GenericChartConfigPanel extends Component {
             ...this.dataSets?.[i],
             dataRange,
         }));
-        this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+        this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.chartId, {
             dataSets: this.dataSets,
         });
     }
@@ -51260,7 +51727,7 @@ class GenericChartConfigPanel extends Component {
             backgroundColor: colors[i],
             ...this.dataSets[i],
         }));
-        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
             dataSets: this.dataSets,
         });
     }
@@ -51273,18 +51740,18 @@ class GenericChartConfigPanel extends Component {
             ...ds,
         }))
             .filter((_, i) => i !== index);
-        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
             dataSets: this.dataSets,
         });
     }
     onDataSeriesConfirmed() {
         this.dataSets = this.splitRanges;
         this.datasetOrientation = this.computeDatasetOrientation();
-        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
             dataSets: this.dataSets,
         });
         if (this.state.datasetDispatchResult.isSuccessful) {
-            this.dataSets = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+            this.dataSets = this.env.model.getters.getChartDefinition(this.props.chartId).dataSets;
         }
     }
     get splitRanges() {
@@ -51375,12 +51842,12 @@ class GenericChartConfigPanel extends Component {
      */
     onLabelRangeChanged(ranges) {
         this.labelRange = ranges[0];
-        this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+        this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.chartId, {
             labelRange: this.labelRange,
         });
     }
     onLabelRangeConfirmed() {
-        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.labelsDispatchResult = this.props.updateChart(this.props.chartId, {
             labelRange: this.labelRange,
         });
     }
@@ -51388,7 +51855,7 @@ class GenericChartConfigPanel extends Component {
         return this.labelRange || "";
     }
     onUpdateAggregated(aggregated) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             aggregated,
         });
     }
@@ -51420,7 +51887,8 @@ class GenericChartConfigPanel extends Component {
         }
         const zonesBySheetName = {};
         const transposedDatasets = [];
-        const figureSheetId = getters.getFigureSheetId(this.props.figureId);
+        const figureId = getters.getFigureIdFromChartId(this.props.chartId);
+        const figureSheetId = getters.getFigureSheetId(figureId);
         let name = getters.getActiveSheet().name;
         if (figureSheetId) {
             name = getters.getSheet(figureSheetId).name;
@@ -51480,7 +51948,7 @@ class BarConfigPanel extends GenericChartConfigPanel {
             : this.chartTerms.StackedColumnChart;
     }
     onUpdateStacked(stacked) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             stacked,
         });
     }
@@ -51974,7 +52442,7 @@ class ChartTitle extends Component {
 class AxisDesignEditor extends Component {
     static template = "o-spreadsheet-AxisDesignEditor";
     static components = { Section, ChartTitle, BadgeSelection };
-    static props = { figureId: String, definition: Object, updateChart: Function, axesList: Array };
+    static props = { chartId: String, definition: Object, updateChart: Function, axesList: Array };
     state = useState({ currentAxis: "x" });
     defaultFontSize = CHART_AXIS_TITLE_FONT_SIZE;
     get axisTitleStyle() {
@@ -51999,7 +52467,7 @@ class AxisDesignEditor extends Component {
                 text,
             },
         };
-        this.props.updateChart(this.props.figureId, { axesDesign });
+        this.props.updateChart(this.props.chartId, { axesDesign });
     }
     updateAxisTitleStyle(style) {
         const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
@@ -52007,7 +52475,7 @@ class AxisDesignEditor extends Component {
             ...axesDesign[this.state.currentAxis],
             title: style,
         };
-        this.props.updateChart(this.props.figureId, { axesDesign });
+        this.props.updateChart(this.props.chartId, { axesDesign });
     }
 }
 
@@ -52060,7 +52528,7 @@ class GeneralDesignEditor extends Component {
         RadioSelection,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52084,17 +52552,17 @@ class GeneralDesignEditor extends Component {
         this.state.activeTool = isOpen ? "" : tool;
     }
     updateBackgroundColor(color) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             background: color,
         });
     }
     updateTitle(newTitle) {
         const title = { ...this.title, text: newTitle };
-        this.props.updateChart(this.props.figureId, { title });
+        this.props.updateChart(this.props.chartId, { title });
     }
     updateChartTitleStyle(style) {
         const title = { ...this.title, ...style };
-        this.props.updateChart(this.props.figureId, { title });
+        this.props.updateChart(this.props.chartId, { title });
         this.state.activeTool = "";
     }
 }
@@ -52105,13 +52573,13 @@ class ChartLegend extends Component {
         Section,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
     };
     updateLegendPosition(ev) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             legendPosition: ev.target.value,
         });
     }
@@ -52125,7 +52593,7 @@ class SeriesDesignEditor extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52133,7 +52601,7 @@ class SeriesDesignEditor extends Component {
     };
     state = useState({ index: 0 });
     getDataSeries() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
         if (!runtime || !("chartJsConfig" in runtime)) {
             return [];
         }
@@ -52152,7 +52620,7 @@ class SeriesDesignEditor extends Component {
             ...dataSets[this.state.index],
             backgroundColor: color,
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getDataSeriesColor() {
         const dataSets = this.props.definition.dataSets;
@@ -52172,7 +52640,7 @@ class SeriesDesignEditor extends Component {
             ...dataSets[this.state.index],
             label,
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getDataSeriesLabel() {
         const dataSets = this.props.definition.dataSets;
@@ -52190,7 +52658,7 @@ class SeriesWithAxisDesignEditor extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52206,7 +52674,7 @@ class SeriesWithAxisDesignEditor extends Component {
             ...dataSets[index],
             yAxisId: axis === "left" ? "y" : "y1",
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getDataSerieAxis(index) {
         const dataSets = this.props.definition.dataSets;
@@ -52232,7 +52700,7 @@ class SeriesWithAxisDesignEditor extends Component {
                 display,
             },
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getTrendLineConfiguration(index) {
         const dataSets = this.props.definition.dataSets;
@@ -52273,7 +52741,7 @@ class SeriesWithAxisDesignEditor extends Component {
         this.updateTrendLineValue(index, { order: parseInt(element.value) });
     }
     getMaxPolynomialDegree(index) {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
         return Math.min(10, runtime.chartJsConfig.data.datasets[index].data.length - 1);
     }
     get defaultWindowSize() {
@@ -52315,7 +52783,7 @@ class SeriesWithAxisDesignEditor extends Component {
                 ...config,
             },
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
 }
 
@@ -52325,7 +52793,7 @@ class ChartShowValues extends Component {
         Checkbox,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52345,7 +52813,7 @@ class ChartWithAxisDesignPanel extends Component {
         ChartShowValues,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52369,7 +52837,7 @@ class ChartShowDataMarkers extends Component {
         Checkbox,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52396,7 +52864,7 @@ class ComboChartDesignPanel extends ChartWithAxisDesignPanel {
             ...dataSets[index],
             type,
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getDataSeriesType(index) {
         const dataSets = this.props.definition.dataSets;
@@ -52432,7 +52900,7 @@ class FunnelChartConfigPanel extends GenericChartConfigPanel {
         ];
     }
     onUpdateCumulative(cumulative) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             cumulative,
         });
     }
@@ -52448,13 +52916,13 @@ class FunnelChartDesignPanel extends Component {
         Section,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
     };
     getFunnelColorItems() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
         const labels = (runtime.chartJsConfig.data.labels || []);
         const colors = getFunnelLabelColors(labels, this.props.definition.funnelColors);
         return labels.map((label, index) => ({
@@ -52464,7 +52932,7 @@ class FunnelChartDesignPanel extends Component {
     }
     updateFunnelItemColor(index, color) {
         const funnelColors = replaceItemAtIndex(this.props.definition.funnelColors || [], color, index);
-        this.props.updateChart(this.props.figureId, { funnelColors });
+        this.props.updateChart(this.props.chartId, { funnelColors });
     }
 }
 
@@ -52472,7 +52940,7 @@ class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
     static components = { ChartErrorSection, ChartDataSeries };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52490,12 +52958,12 @@ class GaugeChartConfigPanel extends Component {
     }
     onDataRangeChanged(ranges) {
         this.dataRange = ranges[0];
-        this.state.dataRangeDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+        this.state.dataRangeDispatchResult = this.props.canUpdateChart(this.props.chartId, {
             dataRange: this.dataRange,
         });
     }
     updateDataRange() {
-        this.state.dataRangeDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.dataRangeDispatchResult = this.props.updateChart(this.props.chartId, {
             dataRange: this.dataRange,
         });
     }
@@ -52554,7 +53022,7 @@ class GaugeChartDesignPanel extends Component {
         StandaloneComposer,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -52595,7 +53063,7 @@ class GaugeChartDesignPanel extends Component {
     updateSectionRule(sectionRule) {
         this.state.sectionRuleCancelledReasons = [];
         this.state.sectionRuleCancelledReasons.push(...this.checkSectionRuleFormulasAreValid(this.state.sectionRule));
-        const dispatchResult = this.props.updateChart(this.props.figureId, {
+        const dispatchResult = this.props.updateChart(this.props.chartId, {
             sectionRule,
         });
         if (dispatchResult.isSuccessful) {
@@ -52658,9 +53126,9 @@ class GaugeChartDesignPanel extends Component {
         return tryToNumber(toScalar(evaluatedValue), locale) !== undefined;
     }
     get sheetId() {
-        const chart = this.env.model.getters.getChart(this.props.figureId);
+        const chart = this.env.model.getters.getChart(this.props.chartId);
         if (!chart) {
-            throw new Error("Chart not found with id " + this.props.figureId);
+            throw new Error("Chart not found with id " + this.props.chartId);
         }
         return chart.sheetId;
     }
@@ -52670,13 +53138,13 @@ class GeoChartRegionSelectSection extends Component {
     static template = "o-spreadsheet-GeoChartRegionSelectSection";
     static components = { Section };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
     };
     updateSelectedRegion(ev) {
         const value = ev.target.value;
-        this.props.updateChart(this.props.figureId, { region: value });
+        this.props.updateChart(this.props.chartId, { region: value });
     }
     get availableRegions() {
         return this.env.model.getters.getGeoChartAvailableRegions();
@@ -52726,14 +53194,14 @@ class GeoChartDesignPanel extends ChartWithAxisDesignPanel {
             : this.updateColorScale(value);
     }
     updateColorScale(colorScale) {
-        this.props.updateChart(this.props.figureId, { colorScale });
+        this.props.updateChart(this.props.chartId, { colorScale });
     }
     updateMissingValueColor(color) {
-        this.props.updateChart(this.props.figureId, { missingValueColor: color });
+        this.props.updateChart(this.props.chartId, { missingValueColor: color });
     }
     updateLegendPosition(ev) {
         const value = ev.target.value;
-        this.props.updateChart(this.props.figureId, { legendPosition: value });
+        this.props.updateChart(this.props.chartId, { legendPosition: value });
     }
     get selectedColorScale() {
         return typeof this.props.definition.colorScale === "object"
@@ -52782,7 +53250,7 @@ class HierarchicalChartConfigPanel extends GenericChartConfigPanel {
 class LineConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-LineConfigPanel";
     get canTreatLabelsAsText() {
-        const chart = this.env.model.getters.getChart(this.props.figureId);
+        const chart = this.env.model.getters.getChart(this.props.chartId);
         if (chart && chart instanceof LineChart) {
             return canChartParseLabels(chart.getDefinition(), chart.dataSets, chart.labelRange, this.env.model.getters);
         }
@@ -52807,17 +53275,17 @@ class LineConfigPanel extends GenericChartConfigPanel {
         return options;
     }
     onUpdateLabelsAsText(labelsAsText) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             labelsAsText,
         });
     }
     onUpdateStacked(stacked) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             stacked,
         });
     }
     onUpdateCumulative(cumulative) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             cumulative,
         });
     }
@@ -52854,13 +53322,13 @@ class PieChartDesignPanel extends Component {
         PieHoleSize,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
     };
     onPieHoleSizeChange(pieHolePercentage) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             ...this.props.definition,
             pieHolePercentage,
         });
@@ -52881,7 +53349,7 @@ class RadarChartDesignPanel extends Component {
         ChartShowDataMarkers,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52891,14 +53359,14 @@ class RadarChartDesignPanel extends Component {
 class ScatterConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-ScatterConfigPanel";
     get canTreatLabelsAsText() {
-        const chart = this.env.model.getters.getChart(this.props.figureId);
+        const chart = this.env.model.getters.getChart(this.props.chartId);
         if (chart && chart instanceof ScatterChart) {
             return canChartParseLabels(chart.getDefinition(), chart.dataSets, chart.labelRange, this.env.model.getters);
         }
         return false;
     }
     onUpdateLabelsAsText(labelsAsText) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             labelsAsText,
         });
     }
@@ -52920,7 +53388,7 @@ class ScorecardChartConfigPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartConfigPanel";
     static components = { SelectionInput, ChartErrorSection, Section };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52946,12 +53414,12 @@ class ScorecardChartConfigPanel extends Component {
     }
     onKeyValueRangeChanged(ranges) {
         this.keyValue = ranges[0];
-        this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+        this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.chartId, {
             keyValue: this.keyValue,
         });
     }
     updateKeyValueRange() {
-        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.keyValueDispatchResult = this.props.updateChart(this.props.chartId, {
             keyValue: this.keyValue,
         });
     }
@@ -52960,12 +53428,12 @@ class ScorecardChartConfigPanel extends Component {
     }
     onBaselineRangeChanged(ranges) {
         this.baseline = ranges[0];
-        this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+        this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.chartId, {
             baseline: this.baseline,
         });
     }
     updateBaselineRange() {
-        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
+        this.state.baselineDispatchResult = this.props.updateChart(this.props.chartId, {
             baseline: this.baseline,
         });
     }
@@ -52973,7 +53441,7 @@ class ScorecardChartConfigPanel extends Component {
         return this.baseline || "";
     }
     updateBaselineMode(ev) {
-        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
+        this.props.updateChart(this.props.chartId, { baselineMode: ev.target.value });
     }
 }
 
@@ -52988,7 +53456,7 @@ class ScorecardChartDesignPanel extends Component {
         ChartTitle,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53005,7 +53473,7 @@ class ScorecardChartDesignPanel extends Component {
         return SCORECARD_CHART_TITLE_FONT_SIZE;
     }
     updateHumanizeNumbers(humanize) {
-        this.props.updateChart(this.props.figureId, { humanize });
+        this.props.updateChart(this.props.chartId, { humanize });
     }
     translate(term) {
         return _t(term);
@@ -53013,13 +53481,13 @@ class ScorecardChartDesignPanel extends Component {
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
-                this.props.updateChart(this.props.figureId, { background: color });
+                this.props.updateChart(this.props.chartId, { background: color });
                 break;
             case "baselineColorDown":
-                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
+                this.props.updateChart(this.props.chartId, { baselineColorDown: color });
                 break;
             case "baselineColorUp":
-                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
+                this.props.updateChart(this.props.chartId, { baselineColorUp: color });
                 break;
         }
     }
@@ -53038,22 +53506,22 @@ class ScorecardChartDesignPanel extends Component {
         };
     }
     setKeyText(text) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             keyDescr: { ...this.props.definition.keyDescr, text },
         });
     }
     updateKeyStyle(style) {
         const keyDescr = { ...this.keyStyle, ...style };
-        this.props.updateChart(this.props.figureId, { keyDescr });
+        this.props.updateChart(this.props.chartId, { keyDescr });
     }
     setBaselineText(text) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             baselineDescr: { ...this.props.definition.baselineDescr, text },
         });
     }
     updateBaselineStyle(style) {
         const baselineDescr = { ...this.baselineStyle, ...style };
-        this.props.updateChart(this.props.figureId, { baselineDescr });
+        this.props.updateChart(this.props.chartId, { baselineDescr });
     }
 }
 
@@ -53071,7 +53539,7 @@ class SunburstChartDesignPanel extends Component {
         PieHoleSize,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53084,18 +53552,18 @@ class SunburstChartDesignPanel extends Component {
         return this.props.definition.showLabels ?? SunburstChartDefaults.showLabels;
     }
     get groupColors() {
-        const figureId = this.props.figureId;
-        const runtime = this.env.model.getters.getChartRuntime(figureId);
+        const chartId = this.props.chartId;
+        const runtime = this.env.model.getters.getChartRuntime(chartId);
         const dataset = runtime.chartJsConfig.data.datasets[0];
         return dataset?.groupColors || [];
     }
     onGroupColorChanged(index, color) {
         const colors = deepCopy(this.props.definition.groupColors) ?? [];
         colors[index] = color;
-        this.props.updateChart(this.props.figureId, { groupColors: colors });
+        this.props.updateChart(this.props.chartId, { groupColors: colors });
     }
     onPieHoleSizeChange(pieHolePercentage) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             ...this.props.definition,
             pieHolePercentage,
         });
@@ -53109,7 +53577,7 @@ class TreeMapCategoryColors extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         onColorChanged: Function,
     };
@@ -53121,7 +53589,7 @@ class TreeMapCategoryColors extends Component {
         return coloringOptions;
     }
     getTreeGroupAndColors() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
         const config = runtime.chartJsConfig;
         return config.data.datasets[0]?.groupColors || [];
     }
@@ -53142,7 +53610,7 @@ class TreeMapColorScale extends Component {
     static template = "o-spreadsheet-TreeMapColorScale";
     static components = { RoundColorPicker };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         onColorChanged: Function,
     };
@@ -53184,7 +53652,7 @@ class TreeMapChartDesignPanel extends Component {
         TreeMapColorScale,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53208,15 +53676,15 @@ class TreeMapChartDesignPanel extends Component {
     }
     changeColoringOption(option) {
         const coloringOptions = option === "categoryColor" ? this.savedColors.categoryColors : this.savedColors.colorScale;
-        this.props.updateChart(this.props.figureId, { coloringOptions });
+        this.props.updateChart(this.props.chartId, { coloringOptions });
     }
     onCategoryColorChange(coloringOptions) {
         this.savedColors.categoryColors = coloringOptions;
-        this.props.updateChart(this.props.figureId, { coloringOptions });
+        this.props.updateChart(this.props.chartId, { coloringOptions });
     }
     onColorScaleChange(coloringOptions) {
         this.savedColors.colorScale = coloringOptions;
-        this.props.updateChart(this.props.figureId, { coloringOptions });
+        this.props.updateChart(this.props.chartId, { coloringOptions });
     }
     get coloringOptionChoices() {
         return [
@@ -53240,23 +53708,23 @@ class WaterfallChartDesignPanel extends Component {
         ChartLegend,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
     };
     axisChoices = CHART_AXIS_CHOICES;
     onUpdateShowSubTotals(showSubTotals) {
-        this.props.updateChart(this.props.figureId, { showSubTotals });
+        this.props.updateChart(this.props.chartId, { showSubTotals });
     }
     onUpdateShowConnectorLines(showConnectorLines) {
-        this.props.updateChart(this.props.figureId, { showConnectorLines });
+        this.props.updateChart(this.props.chartId, { showConnectorLines });
     }
     onUpdateFirstValueAsSubtotal(firstValueAsSubtotal) {
-        this.props.updateChart(this.props.figureId, { firstValueAsSubtotal });
+        this.props.updateChart(this.props.chartId, { firstValueAsSubtotal });
     }
     updateColor(colorName, color) {
-        this.props.updateChart(this.props.figureId, { [colorName]: color });
+        this.props.updateChart(this.props.chartId, { [colorName]: color });
     }
     get axesList() {
         return [
@@ -53277,7 +53745,7 @@ class WaterfallChartDesignPanel extends Component {
             CHART_WATERFALL_SUBTOTAL_COLOR);
     }
     updateVerticalAxisPosition(value) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             verticalAxisPosition: value,
         });
     }
@@ -53379,7 +53847,7 @@ css /* scss */ `
 class ChartTypePicker extends Component {
     static template = "o-spreadsheet-ChartTypePicker";
     static components = { Section, Popover };
-    static props = { figureId: String, chartPanelStore: Object };
+    static props = { chartId: String, chartPanelStore: Object };
     categories = chartCategories;
     chartTypeByCategories = {};
     popoverRef = useRef("popoverRef");
@@ -53404,14 +53872,14 @@ class ChartTypePicker extends Component {
         this.closePopover();
     }
     onTypeChange(type) {
-        this.props.chartPanelStore.changeChartType(this.props.figureId, type);
+        this.props.chartPanelStore.changeChartType(this.props.chartId, type);
         this.closePopover();
     }
-    getChartDefinition(figureId) {
-        return this.env.model.getters.getChartDefinition(figureId);
+    getChartDefinition(chartId) {
+        return this.env.model.getters.getChartDefinition(chartId);
     }
     getSelectedChartSubtypeProperties() {
-        const definition = this.getChartDefinition(this.props.figureId);
+        const definition = this.getChartDefinition(this.props.chartId);
         const matchedChart = chartSubtypeRegistry
             .getAll()
             .find((c) => c.matcher?.(definition) || false);
@@ -53443,34 +53911,36 @@ class MainChartPanelStore extends SpreadsheetStore {
     activatePanel(panel) {
         this.panel = panel;
     }
-    changeChartType(figureId, newDisplayType) {
-        const currentCreationContext = this.getters.getContextCreationChart(figureId);
-        const savedCreationContext = this.creationContexts[figureId] || {};
+    changeChartType(chartId, newDisplayType) {
+        const currentCreationContext = this.getters.getContextCreationChart(chartId);
+        const savedCreationContext = this.creationContexts[chartId] || {};
         let newRanges = currentCreationContext?.range;
         if (newRanges?.every((range, i) => deepEquals(range, savedCreationContext.range?.[i]))) {
             newRanges = Object.assign([], savedCreationContext.range, currentCreationContext?.range);
         }
-        this.creationContexts[figureId] = {
+        this.creationContexts[chartId] = {
             ...savedCreationContext,
             ...currentCreationContext,
             range: newRanges,
         };
+        const figureId = this.getters.getFigureIdFromChartId(chartId);
         const sheetId = this.getters.getFigureSheetId(figureId);
         if (!sheetId) {
             return;
         }
-        const definition = this.getChartDefinitionFromContextCreation(figureId, newDisplayType);
+        const definition = this.getChartDefinitionFromContextCreation(chartId, newDisplayType);
         this.model.dispatch("UPDATE_CHART", {
             definition,
+            chartId,
             figureId,
             sheetId,
         });
     }
-    getChartDefinitionFromContextCreation(figureId, newDisplayType) {
+    getChartDefinitionFromContextCreation(chartId, newDisplayType) {
         const newChartInfo = chartSubtypeRegistry.get(newDisplayType);
         const ChartClass = chartRegistry.get(newChartInfo.chartType);
         return {
-            ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[figureId]),
+            ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[chartId]),
             ...newChartInfo.subtypeDefinition,
         };
     }
@@ -53511,15 +53981,15 @@ css /* scss */ `
 class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
     static components = { Section, ChartTypePicker };
-    static props = { onCloseSidePanel: Function, figureId: String };
+    static props = { onCloseSidePanel: Function, chartId: String };
     panelContentRef;
     scrollPositions = {
         configuration: 0,
         design: 0,
     };
     store;
-    get figureId() {
-        return this.props.figureId;
+    get chartId() {
+        return this.props.chartId;
     }
     setup() {
         this.store = useLocalStore(MainChartPanelStore);
@@ -53539,45 +54009,49 @@ class ChartPanel extends Component {
         }
         this.store.activatePanel(panel);
     }
-    updateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId) {
+    updateChart(chartId, updateDefinition) {
+        const figureId = this.env.model.getters.getFigureIdFromChartId(chartId);
+        if (chartId !== this.chartId) {
             return;
         }
         const definition = {
-            ...this.getChartDefinition(this.figureId),
+            ...this.getChartDefinition(this.chartId),
             ...updateDefinition,
         };
         return this.env.model.dispatch("UPDATE_CHART", {
             definition,
+            chartId,
             figureId,
             sheetId: this.env.model.getters.getFigureSheetId(figureId),
         });
     }
-    canUpdateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
+    canUpdateChart(chartId, updateDefinition) {
+        const figureId = this.env.model.getters.getFigureIdFromChartId(chartId);
+        if (chartId !== this.chartId || !this.env.model.getters.isChartDefined(chartId)) {
             return;
         }
         const definition = {
-            ...this.getChartDefinition(this.figureId),
+            ...this.getChartDefinition(this.chartId),
             ...updateDefinition,
         };
         return this.env.model.canDispatch("UPDATE_CHART", {
             definition,
+            chartId,
             figureId,
             sheetId: this.env.model.getters.getFigureSheetId(figureId),
         });
     }
     onTypeChange(type) {
-        if (!this.figureId) {
+        if (!this.chartId) {
             return;
         }
-        this.store.changeChartType(this.figureId, type);
+        this.store.changeChartType(this.chartId, type);
     }
     get chartPanel() {
-        if (!this.figureId) {
+        if (!this.chartId) {
             throw new Error("Chart not defined.");
         }
-        const type = this.env.model.getters.getChartType(this.figureId);
+        const type = this.env.model.getters.getChartType(this.chartId);
         if (!type) {
             throw new Error("Chart not defined.");
         }
@@ -53587,8 +54061,8 @@ class ChartPanel extends Component {
         }
         return chartPanel;
     }
-    getChartDefinition(figureId) {
-        return this.env.model.getters.getChartDefinition(figureId);
+    getChartDefinition(chartId) {
+        return this.env.model.getters.getChartDefinition(chartId);
     }
 }
 
@@ -55590,103 +56064,6 @@ class PivotDeferUpdate extends Component {
     }
 }
 
-function useAutofocus({ refName }) {
-    const ref = useRef(refName);
-    useEffect((el) => {
-        el?.focus();
-    }, () => [ref.el]);
-}
-
-css /* scss */ `
-  .o-spreadsheet {
-    .os-input {
-      border-width: 0 0 1px 0;
-      border-color: transparent;
-      outline: none;
-      text-overflow: ellipsis;
-      color: ${TEXT_BODY};
-    }
-    .os-input:hover,
-    .os-input:focus {
-      border-color: ${GRAY_300};
-    }
-  }
-`;
-class TextInput extends Component {
-    static template = "o-spreadsheet-TextInput";
-    static props = {
-        value: String,
-        onChange: Function,
-        class: {
-            type: String,
-            optional: true,
-        },
-        id: {
-            type: String,
-            optional: true,
-        },
-        placeholder: {
-            type: String,
-            optional: true,
-        },
-        autofocus: {
-            type: Boolean,
-            optional: true,
-        },
-    };
-    inputRef = useRef("input");
-    setup() {
-        useExternalListener(window, "click", (ev) => {
-            if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
-                this.save();
-            }
-        }, { capture: true });
-        if (this.props.autofocus) {
-            useAutofocus({ refName: "input" });
-        }
-    }
-    onKeyDown(ev) {
-        switch (ev.key) {
-            case "Enter":
-                this.save();
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Escape":
-                if (this.inputRef.el) {
-                    this.inputRef.el.value = this.props.value;
-                    this.inputRef.el.blur();
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-        }
-    }
-    save() {
-        const currentValue = (this.inputRef.el?.value || "").trim();
-        if (currentValue !== this.props.value) {
-            this.props.onChange(currentValue);
-        }
-        this.inputRef.el?.blur();
-    }
-    onMouseDown(ev) {
-        // Stop the event if the input is not focused, we handle everything in onMouseUp
-        if (ev.target !== document.activeElement) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-    onMouseUp(ev) {
-        const target = ev.target;
-        if (target !== document.activeElement) {
-            target.focus();
-            target.select();
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-}
-
 class PivotCustomGroupsCollapsible extends Component {
     static template = "o-spreadsheet-PivotCustomGroupsCollapsible";
     static props = {
@@ -57801,11 +58178,12 @@ sidePanelRegistry.add("ChartPanel", {
     title: _t("Chart"),
     Body: ChartPanel,
     computeState: (getters, initialProps) => {
-        const figureId = getters.getSelectedFigureId() ?? initialProps.figureId;
-        if (!getters.isChartDefined(figureId)) {
+        const figureId = getters.getSelectedFigureId();
+        const chartId = figureId ? getters.getChartIdFromFigureId(figureId) : initialProps.chartId;
+        if (!chartId || !getters.isChartDefined(chartId)) {
             return { isOpen: false };
         }
-        return { isOpen: true, props: { figureId } };
+        return { isOpen: true, props: { chartId } };
     },
 });
 sidePanelRegistry.add("FindAndReplace", {
@@ -57893,6 +58271,17 @@ sidePanelRegistry.add("PivotMeasureDisplayPanel", {
         }
     },
 });
+sidePanelRegistry.add("CarouselPanel", {
+    title: _t("Carousel"),
+    Body: CarouselPanel,
+    computeState: (getters, initialProps) => {
+        const figureId = initialProps.figureId || getters.getSelectedFigureId();
+        if (!figureId || !getters.doesCarouselExist(figureId)) {
+            return { isOpen: false };
+        }
+        return { isOpen: true, props: { figureId } };
+    },
+});
 
 class ScreenWidthStore {
     mutators = ["setSmallThreshhold"];
@@ -58854,7 +59243,7 @@ class FullScreenChart extends Component {
         let lastFigureId = undefined;
         onWillUpdateProps(() => {
             if (lastFigureId !== this.figureUI?.id) {
-                animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+                animationStore.enableAnimationForChart(this.chartId + "-fullscreen");
             }
             lastFigureId = this.figureUI?.id;
         });
@@ -58863,6 +59252,11 @@ class FullScreenChart extends Component {
     get figureUI() {
         return this.fullScreenChartStore.fullScreenFigure;
     }
+    get chartId() {
+        if (!this.figureUI)
+            return undefined;
+        return this.env.model.getters.getChartIdFromFigureId(this.figureUI?.id);
+    }
     exitFullScreen() {
         if (this.figureUI) {
             this.fullScreenChartStore.toggleFullScreenChart(this.figureUI.id);
@@ -58874,9 +59268,9 @@ class FullScreenChart extends Component {
         }
     }
     get chartComponent() {
-        if (!this.figureUI)
+        if (!this.chartId)
             return undefined;
-        const type = this.env.model.getters.getChartType(this.figureUI.id);
+        const type = this.env.model.getters.getChartType(this.chartId);
         const component = chartComponentRegistry.get(type);
         if (!component) {
             throw new Error(`Component is not defined for type ${type}`);
@@ -60535,6 +60929,7 @@ class ChartPlugin extends CorePlugin {
         "getChartType",
         "getChartIds",
         "getChart",
+        "getFigureIdFromChartId",
         "getContextCreationChart",
     ];
     charts = {};
@@ -60542,7 +60937,11 @@ class ChartPlugin extends CorePlugin {
     validateChartDefinition = (cmd) => validateChartDefinition(this, cmd.definition);
     adaptRanges(applyChange) {
         for (const [chartId, chart] of Object.entries(this.charts)) {
-            this.history.update("charts", chartId, chart?.updateRanges(applyChange));
+            if (!chart) {
+                continue;
+            }
+            const newChart = chart.chart.updateRanges(applyChange);
+            this.history.update("charts", chartId, newChart ? { figureId: chart.figureId, chart: newChart } : undefined);
         }
     }
     // ---------------------------------------------------------------------------
@@ -60551,9 +60950,11 @@ class ChartPlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "CREATE_CHART":
-                return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartDuplicate));
+                return this.checkValidations(cmd, this.chainValidations(this.checkFigureArguments, this.validateChartDefinition, this.checkChartDuplicate));
             case "UPDATE_CHART":
                 return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartExists, this.checkChartChanged));
+            case "DELETE_CHART":
+                return this.checkChartExists(cmd);
             default:
                 return "Success" /* CommandResult.Success */;
         }
@@ -60561,37 +60962,61 @@ class ChartPlugin extends CorePlugin {
     handle(cmd) {
         switch (cmd.type) {
             case "CREATE_CHART":
-                this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
-                this.addChart(cmd.figureId, cmd.definition);
+                const { col, row, offset, size, sheetId, figureId } = cmd;
+                // If figure position is not defined, it means that the figure already exist (see allowDispatch)
+                if (!this.getters.getFigure(sheetId, figureId) &&
+                    offset !== undefined &&
+                    col !== undefined &&
+                    row !== undefined) {
+                    this.addFigure(figureId, sheetId, col, row, offset, size);
+                }
+                this.addChart(cmd.figureId, cmd.chartId, cmd.definition);
                 break;
             case "UPDATE_CHART": {
-                this.addChart(cmd.figureId, cmd.definition);
+                this.addChart(cmd.figureId, cmd.chartId, cmd.definition);
                 break;
             }
             case "DUPLICATE_SHEET": {
-                const sheetFiguresFrom = this.getters.getFigures(cmd.sheetId);
-                for (const fig of sheetFiguresFrom) {
-                    if (fig.tag === "chart") {
-                        const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
-                        const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
-                        const chart = this.charts[fig.id]?.duplicateInDuplicatedSheet(cmd.sheetIdTo);
-                        if (chart) {
-                            this.dispatch("CREATE_CHART", {
-                                figureId: duplicatedFigureId,
-                                col: fig.col,
-                                row: fig.row,
-                                offset: fig.offset,
-                                size: { width: fig.width, height: fig.height },
-                                definition: chart.getDefinition(),
-                                sheetId: cmd.sheetIdTo,
-                            });
-                        }
+                for (const chartId of this.getChartIds(cmd.sheetId)) {
+                    const { chart, figureId } = this.charts[chartId] || {};
+                    if (!chart || !figureId) {
+                        continue;
+                    }
+                    const fig = this.getters.getFigure(cmd.sheetId, figureId);
+                    if (!fig) {
+                        continue;
+                    }
+                    const figureIdBase = figureId.split(FIGURE_ID_SPLITTER).pop();
+                    const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                    const chartIdBase = chartId.split(FIGURE_ID_SPLITTER).pop();
+                    const duplicatedChartId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${chartIdBase}`;
+                    const newChart = chart.duplicateInDuplicatedSheet(cmd.sheetIdTo);
+                    if (newChart) {
+                        this.dispatch("CREATE_CHART", {
+                            figureId: duplicatedFigureId,
+                            chartId: duplicatedChartId,
+                            col: fig.col,
+                            row: fig.row,
+                            offset: fig.offset,
+                            size: { width: fig.width, height: fig.height },
+                            definition: newChart.getDefinition(),
+                            sheetId: cmd.sheetIdTo,
+                        });
                     }
                 }
                 break;
             }
             case "DELETE_FIGURE":
-                this.history.update("charts", cmd.figureId, undefined);
+                for (const chartId in this.charts) {
+                    if (this.charts[chartId]?.figureId === cmd.figureId) {
+                        this.dispatch("DELETE_CHART", { chartId, sheetId: cmd.sheetId });
+                    }
+                }
+                break;
+            case "DELETE_CHART":
+                if (this.isChartDefined(cmd.chartId)) {
+                    this.history.update("charts", cmd.chartId, undefined);
+                }
                 break;
             case "DELETE_SHEET":
                 for (const id of this.getChartIds(cmd.sheetId)) {
@@ -60603,31 +61028,37 @@ class ChartPlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
-    getContextCreationChart(figureId) {
-        return this.charts[figureId]?.getContextCreation();
+    getContextCreationChart(chartId) {
+        return this.charts[chartId]?.chart.getContextCreation();
     }
-    getChart(figureId) {
-        return this.charts[figureId];
+    getChart(chartId) {
+        return this.charts[chartId]?.chart;
     }
-    getChartType(figureId) {
-        const type = this.charts[figureId]?.type;
+    getFigureIdFromChartId(chartId) {
+        if (!this.charts[chartId]) {
+            throw new Error(`Chart with id ${chartId} does not exist.`);
+        }
+        return this.charts[chartId].figureId;
+    }
+    getChartType(chartId) {
+        const type = this.charts[chartId]?.chart.type;
         if (!type) {
             throw new Error("Chart not defined.");
         }
         return type;
     }
-    isChartDefined(figureId) {
-        return figureId in this.charts && this.charts !== undefined;
+    isChartDefined(chartId) {
+        return chartId in this.charts && this.charts !== undefined;
     }
     getChartIds(sheetId) {
         return Object.entries(this.charts)
-            .filter(([, chart]) => chart?.sheetId === sheetId)
+            .filter(([, chart]) => chart?.chart.sheetId === sheetId)
             .map(([id]) => id);
     }
-    getChartDefinition(figureId) {
-        const definition = this.charts[figureId]?.getDefinition();
+    getChartDefinition(chartId) {
+        const definition = this.charts[chartId]?.chart.getDefinition();
         if (!definition) {
-            throw new Error(`There is no chart with the given figureId: ${figureId}`);
+            throw new Error(`There is no chart with the given id: ${chartId}`);
         }
         return definition;
     }
@@ -60642,7 +61073,16 @@ class ChartPlugin extends CorePlugin {
                     // figure data should be external IMO => chart should be in sheet.chart
                     // instead of in figure.data
                     if (figure.tag === "chart") {
-                        this.charts[figure.id] = this.createChart(figure.id, figure.data, sheet.id);
+                        const chartId = figure.data.chartId;
+                        const chart = this.createChart(figure.id, figure.data, sheet.id);
+                        this.charts[chartId] = { chart, figureId: figure.id };
+                    }
+                    else if (figure.tag === "carousel") {
+                        for (const chartId in figure.data.chartDefinitions || {}) {
+                            const chartDefinition = figure.data.chartDefinitions[chartId];
+                            const chart = this.createChart(figure.id, chartDefinition, sheet.id);
+                            this.charts[chartId] = { chart, figureId: figure.id };
+                        }
                     }
                 }
             }
@@ -60656,13 +61096,23 @@ class ChartPlugin extends CorePlugin {
                 const figures = [];
                 for (const sheetFigure of sheetFigures) {
                     const figure = sheetFigure;
-                    if (figure && figure.tag === "chart") {
-                        const data = this.charts[figure.id]?.getDefinition();
+                    const chartId = Object.keys(this.charts).find((chartId) => this.charts[chartId]?.figureId === sheetFigure.id);
+                    if (figure && figure.tag === "chart" && chartId) {
+                        const data = this.charts[chartId]?.chart.getDefinition();
                         if (data) {
-                            figure.data = data;
+                            figure.data = { ...data, chartId };
                             figures.push(figure);
                         }
                     }
+                    else if (figure && figure.tag === "carousel") {
+                        const chartIds = Object.keys(this.charts).filter((chartId) => this.charts[chartId]?.figureId === sheetFigure.id);
+                        const data = {};
+                        for (const chartId of chartIds) {
+                            data[chartId] = this.charts[chartId]?.chart.getDefinition();
+                        }
+                        figure.data = { chartDefinitions: data };
+                        figures.push(figure);
+                    }
                     else {
                         figures.push(figure);
                     }
@@ -60695,27 +61145,40 @@ class ChartPlugin extends CorePlugin {
      * Add a chart in the local state. If a chart already exists, this chart is
      * replaced
      */
-    addChart(id, definition) {
-        const sheetId = this.getters.getFigureSheetId(id);
+    addChart(figureId, chartId, definition) {
+        const sheetId = this.getters.getFigureSheetId(figureId);
         if (sheetId) {
-            this.history.update("charts", id, this.createChart(id, definition, sheetId));
+            const chart = this.createChart(figureId, definition, sheetId);
+            this.history.update("charts", chartId, { figureId, chart });
         }
     }
     checkChartDuplicate(cmd) {
-        return this.getters.getFigureSheetId(cmd.figureId)
+        return this.isChartDefined(cmd.chartId)
             ? "DuplicatedChartId" /* CommandResult.DuplicatedChartId */
             : "Success" /* CommandResult.Success */;
     }
     checkChartExists(cmd) {
-        return this.isChartDefined(cmd.figureId)
+        return this.isChartDefined(cmd.chartId)
             ? "Success" /* CommandResult.Success */
             : "ChartDoesNotExist" /* CommandResult.ChartDoesNotExist */;
     }
     checkChartChanged(cmd) {
-        return deepEquals(this.getChartDefinition(cmd.figureId), cmd.definition)
+        if (cmd.figureId !== this.charts[cmd.chartId]?.figureId) {
+            return "Success" /* CommandResult.Success */;
+        }
+        return deepEquals(this.getChartDefinition(cmd.chartId), cmd.definition)
             ? "NoChanges" /* CommandResult.NoChanges */
             : "Success" /* CommandResult.Success */;
     }
+    /** If the command would create a new figure, there need to be a position & offset defined in the command */
+    checkFigureArguments(cmd) {
+        if (this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+            return "Success" /* CommandResult.Success */;
+        }
+        return cmd.offset !== undefined && cmd.col !== undefined && cmd.row !== undefined
+            ? "Success" /* CommandResult.Success */
+            : "MissingFigureArguments" /* CommandResult.MissingFigureArguments */;
+    }
 }
 
 // -----------------------------------------------------------------------------
@@ -61569,6 +62032,23 @@ class FigurePlugin extends CorePlugin {
                     this.onRowRemove(cmd.sheetId);
                 }
                 break;
+            case "DUPLICATE_SHEET": {
+                for (const figureId in this.figures[cmd.sheetId]) {
+                    const fig = this.figures[cmd.sheetId]?.[figureId];
+                    if (!fig) {
+                        continue;
+                    }
+                    const figureIdBase = figureId.split(FIGURE_ID_SPLITTER).pop();
+                    const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                    this.dispatch("CREATE_FIGURE", {
+                        figureId: duplicatedFigureId,
+                        ...fig,
+                        size: { width: fig.width, height: fig.height },
+                        sheetId: cmd.sheetIdTo,
+                    });
+                }
+                break;
+            }
         }
     }
     onColRemove(sheetId) {
@@ -61680,6 +62160,9 @@ class FigurePlugin extends CorePlugin {
         const figure = { ...this.getFigure(sheetId, figureId), ...update };
         for (const [key, value] of Object.entries(update)) {
             switch (key) {
+                case "tag":
+                    this.history.update("figures", sheetId, figure.id, key, value);
+                    break;
                 case "offset":
                     this.history.update("figures", sheetId, figure.id, key, value);
                     break;
@@ -62107,7 +62590,9 @@ class ImagePlugin extends CorePlugin {
     handle(cmd) {
         switch (cmd.type) {
             case "CREATE_IMAGE":
-                this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
+                if (!this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                    this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
+                }
                 this.history.update("images", cmd.sheetId, cmd.figureId, cmd.definition);
                 this.syncedImages.add(cmd.definition.path);
                 break;
@@ -64245,6 +64730,122 @@ class TablePlugin extends CorePlugin {
     }
 }
 
+class CarouselPlugin extends CorePlugin {
+    static getters = ["getCarousel", "doesCarouselExist"];
+    carousels = {};
+    allowDispatch(cmd) {
+        switch (cmd.type) {
+            case "CREATE_CAROUSEL": {
+                if (this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                    return "DuplicatedFigureId" /* CommandResult.DuplicatedFigureId */;
+                }
+                return "Success" /* CommandResult.Success */;
+            }
+            case "UPDATE_CAROUSEL": {
+                if (!this.carousels[cmd.sheetId]?.[cmd.figureId]) {
+                    return "InvalidFigureId" /* CommandResult.InvalidFigureId */;
+                }
+                return "Success" /* CommandResult.Success */;
+            }
+        }
+        return "Success" /* CommandResult.Success */;
+    }
+    handle(cmd) {
+        switch (cmd.type) {
+            case "CREATE_CAROUSEL":
+                if (!this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                    this.dispatch("CREATE_FIGURE", { ...cmd, tag: "carousel" });
+                }
+                this.history.update("carousels", cmd.sheetId, cmd.figureId, cmd.definition);
+                break;
+            case "UPDATE_CAROUSEL":
+                this.removeDeletedCharts(cmd, this.getters.getCarousel(cmd.figureId).items);
+                this.history.update("carousels", cmd.sheetId, cmd.figureId, cmd.definition);
+                break;
+            case "DUPLICATE_SHEET": {
+                const sheetFiguresFrom = this.getters.getFigures(cmd.sheetId);
+                for (const fig of sheetFiguresFrom) {
+                    if (fig.tag === "carousel") {
+                        const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
+                        const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                        const carousel = this.getCarousel(fig.id);
+                        if (carousel) {
+                            const size = { width: fig.width, height: fig.height };
+                            this.dispatch("CREATE_CAROUSEL", {
+                                sheetId: cmd.sheetIdTo,
+                                figureId: duplicatedFigureId,
+                                offset: fig.offset,
+                                col: fig.col,
+                                row: fig.row,
+                                size,
+                                definition: {
+                                    items: carousel.items.map((item) => {
+                                        if (item.type === "carouselDataView") {
+                                            return { type: "carouselDataView" };
+                                        }
+                                        const chartIdBase = item.chartId.split(FIGURE_ID_SPLITTER).pop();
+                                        const newChartId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${chartIdBase}`;
+                                        return { type: "chart", chartId: newChartId };
+                                    }),
+                                },
+                            });
+                        }
+                    }
+                }
+                break;
+            }
+            case "DELETE_FIGURE":
+                this.history.update("carousels", cmd.sheetId, cmd.figureId, undefined);
+                break;
+            case "DELETE_SHEET":
+                this.history.update("carousels", cmd.sheetId, undefined);
+                break;
+        }
+    }
+    doesCarouselExist(figureId) {
+        for (const sheetId in this.carousels) {
+            if (this.carousels[sheetId]?.[figureId]) {
+                return true;
+            }
+        }
+        throw false;
+    }
+    getCarousel(figureId) {
+        for (const sheetId in this.carousels) {
+            if (this.carousels[sheetId]?.[figureId]) {
+                return this.carousels[sheetId][figureId];
+            }
+        }
+        throw new Error(`There is no carousel with the given figureId: ${figureId}`);
+    }
+    removeDeletedCharts(cmd, oldItems) {
+        const newChartIds = new Set(cmd.definition.items.filter((item) => item.type === "chart").map((item) => item.chartId));
+        for (const item of oldItems) {
+            if (item.type === "chart" && !newChartIds.has(item.chartId)) {
+                this.dispatch("DELETE_CHART", { chartId: item.chartId, sheetId: cmd.sheetId });
+            }
+        }
+    }
+    import(data) {
+        for (const sheet of data.sheets) {
+            const carousels = (sheet.figures || []).filter((figure) => figure.tag === "carousel");
+            for (const carousel of carousels) {
+                this.history.update("carousels", sheet.id, carousel.id, { items: carousel.data.items });
+            }
+        }
+    }
+    export(data) {
+        for (const sheet of data.sheets) {
+            const carousels = sheet.figures.filter((figure) => figure.tag === "carousel");
+            for (const carousel of carousels) {
+                if (this.carousels[sheet.id]?.[carousel.id]) {
+                    carousel.data = { ...carousel.data, ...this.carousels[sheet.id]?.[carousel.id] };
+                }
+            }
+        }
+    }
+}
+
 class HeaderGroupingPlugin extends CorePlugin {
     static getters = [
         "getHeaderGroups",
@@ -67200,7 +67801,7 @@ class CustomColorsPlugin extends CoreViewPlugin {
                 break;
             case "UPDATE_CHART":
             case "CREATE_CHART":
-                this.tryToAddColors(this.getChartColors(cmd.figureId));
+                this.tryToAddColors(this.getChartColors(cmd.chartId));
                 break;
             case "UPDATE_CELL":
             case "ADD_CONDITIONAL_FORMAT":
@@ -67332,8 +67933,10 @@ class EvaluationChartPlugin extends CoreViewPlugin {
         switch (cmd.type) {
             case "UPDATE_CHART":
             case "CREATE_CHART":
-            case "DELETE_FIGURE":
-                this.charts[cmd.figureId] = undefined;
+                this.charts[cmd.chartId] = undefined;
+                break;
+            case "DELETE_CHART":
+                this.charts[cmd.chartId] = undefined;
                 break;
             case "DELETE_SHEET":
                 for (const chartId in this.charts) {
@@ -67344,15 +67947,15 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                 break;
         }
     }
-    getChartRuntime(figureId) {
-        if (!this.charts[figureId]) {
-            const chart = this.getters.getChart(figureId);
+    getChartRuntime(chartId) {
+        if (!this.charts[chartId]) {
+            const chart = this.getters.getChart(chartId);
             if (!chart) {
-                throw new Error(`No chart for the given id: ${figureId}`);
+                throw new Error(`No chart for the given id: ${chartId}`);
             }
-            this.charts[figureId] = this.createRuntimeChart(chart);
+            this.charts[chartId] = this.createRuntimeChart(chart);
         }
-        return this.charts[figureId];
+        return this.charts[chartId];
     }
     /**
      * Get the background and textColor of a chart based on the color of the first cell of the main range of the chart.
@@ -67387,8 +67990,14 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                 if (!figure || figure.tag !== "chart") {
                     continue;
                 }
-                const figureId = figure.id;
-                const figureData = this.getters.getChart(figureId)?.getDefinitionForExcel(this.getters);
+                const chartId = this.getters
+                    .getChartIds(sheet.id)
+                    .find((chartId) => this.getters.getFigureIdFromChartId(chartId) === figure.id);
+                if (!chartId) {
+                    continue;
+                }
+                const chart = this.getters.getChart(chartId);
+                const figureData = chart?.getDefinitionForExcel(this.getters);
                 if (figureData) {
                     figures.push({
                         ...figure,
@@ -67396,12 +68005,11 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                     });
                 }
                 else {
-                    const chart = this.getters.getChart(figureId);
                     if (!chart) {
                         continue;
                     }
-                    const type = this.getters.getChartType(figureId);
-                    const runtime = this.getters.getChartRuntime(figureId);
+                    const type = this.getters.getChartType(chartId);
+                    const runtime = this.getters.getChartRuntime(chartId);
                     const img = chartToImageUrl(runtime, figure, type);
                     if (img) {
                         sheet.images.push({
@@ -70535,7 +71143,9 @@ const specificRangeTransformRegistry = new SpecificRangeTransformRegistry();
 otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["ADD_COLUMNS_ROWS"], addHeadersTransformation);
 otRegistry.addTransformation("REMOVE_COLUMNS_ROWS", ["ADD_COLUMNS_ROWS"], addHeadersTransformation);
 otRegistry.addTransformation("DELETE_SHEET", ["MOVE_RANGES"], transformTargetSheetId);
-otRegistry.addTransformation("DELETE_FIGURE", ["UPDATE_FIGURE", "UPDATE_CHART"], updateChartFigure);
+otRegistry.addTransformation("DELETE_FIGURE", ["UPDATE_FIGURE", "UPDATE_CHART", "UPDATE_CAROUSEL"], updateChartFigure);
+otRegistry.addTransformation("DELETE_CHART", ["UPDATE_CHART"], updateChartOnChartDelete);
+otRegistry.addTransformation("DELETE_CHART", ["UPDATE_CAROUSEL"], updateCarouselOnChartDelete);
 otRegistry.addTransformation("CREATE_SHEET", ["CREATE_SHEET"], createSheetTransformation);
 otRegistry.addTransformation("ADD_MERGE", ["ADD_MERGE", "REMOVE_MERGE"], mergeTransformation);
 otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["FREEZE_COLUMNS", "FREEZE_ROWS"], freezeTransformation);
@@ -70588,6 +71198,21 @@ function updateChartFigure(toTransform, executed) {
     }
     return toTransform;
 }
+function updateChartOnChartDelete(toTransform, executed) {
+    if (toTransform.chartId === executed.chartId) {
+        return undefined;
+    }
+    return toTransform;
+}
+function updateCarouselOnChartDelete(toTransform, executed) {
+    return {
+        ...toTransform,
+        definition: {
+            ...toTransform.definition,
+            items: toTransform.definition.items.filter((item) => !(item.type === "chart" && item.chartId === executed.chartId)),
+        },
+    };
+}
 function createSheetTransformation(toTransform, executed) {
     if (toTransform.sheetId === executed.sheetId) {
         toTransform = { ...toTransform, sheetId: `${toTransform.sheetId}~` };
@@ -72982,9 +73607,11 @@ function repeatRangeDependantCommand(getters, command) {
 
 const uuidGenerator = new UuidGenerator();
 function repeatCreateChartCommand(getters, cmd) {
+    const id = uuidGenerator.smallUuid();
     return {
         ...repeatSheetDependantCommand(getters, cmd),
-        figureId: uuidGenerator.smallUuid(),
+        figureId: id,
+        chartId: id,
     };
 }
 function repeatCreateImageCommand(getters, cmd) {
@@ -76194,6 +76821,123 @@ class SheetViewPlugin extends UIPlugin {
     }
 }
 
+class CarouselUIPlugin extends UIPlugin {
+    static getters = [
+        "getSelectedCarouselItem",
+        "getChartFromFigureId",
+        "getChartIdFromFigureId",
+    ];
+    uuidGenerator = new UuidGenerator();
+    carouselStates = {};
+    handle(cmd) {
+        switch (cmd.type) {
+            case "ADD_NEW_CHART_TO_CAROUSEL":
+                this.addNewChartToCarousel(cmd.figureId, cmd.sheetId);
+                break;
+            case "ADD_FIGURE_CHART_TO_CAROUSEL":
+                this.addFigureChartToCarousel(cmd.carouselFigureId, cmd.chartFigureId, cmd.sheetId);
+                break;
+            case "UPDATE_CAROUSEL_ACTIVE_ITEM":
+                this.carouselStates[cmd.figureId] = cmd.item;
+                break;
+            case "DELETE_FIGURE":
+                delete this.carouselStates[cmd.figureId];
+                break;
+            case "UPDATE_CAROUSEL":
+                this.fixWrongCarouselState(cmd.figureId);
+                break;
+            case "DELETE_CHART":
+            case "UNDO":
+            case "REDO":
+            case "DELETE_SHEET":
+                for (const figureId in this.carouselStates) {
+                    this.fixWrongCarouselState(figureId);
+                }
+                break;
+        }
+    }
+    getSelectedCarouselItem(figureId) {
+        const carousel = this.getters.getCarousel(figureId);
+        if (!carousel.items.length) {
+            return undefined;
+        }
+        return this.carouselStates[figureId] ? this.carouselStates[figureId] : carousel.items[0];
+    }
+    getChartFromFigureId(figureId) {
+        const sheetId = this.getters.getFigureSheetId(figureId);
+        if (!sheetId) {
+            return undefined;
+        }
+        const chartId = this.getChartIdFromFigureId(figureId);
+        return chartId ? this.getters.getChart(chartId) : undefined;
+    }
+    getChartIdFromFigureId(figureId) {
+        const sheetId = this.getters.getFigureSheetId(figureId);
+        if (!sheetId) {
+            return undefined;
+        }
+        const figure = this.getters.getFigure(sheetId, figureId);
+        if (!figure || (figure.tag !== "chart" && figure.tag !== "carousel")) {
+            return undefined;
+        }
+        if (figure.tag === "carousel") {
+            const carouselItem = this.getSelectedCarouselItem(figureId);
+            return carouselItem?.type === "chart" ? carouselItem.chartId : undefined;
+        }
+        return this.getters
+            .getChartIds(sheetId)
+            .find((chartId) => this.getters.getFigureIdFromChartId(chartId) === figureId);
+    }
+    fixWrongCarouselState(figureId) {
+        if (!this.getters.doesCarouselExist(figureId)) {
+            delete this.carouselStates[figureId];
+            return;
+        }
+        const carousel = this.getters.getCarousel(figureId);
+        if (!carousel) {
+            delete this.carouselStates[figureId];
+            return;
+        }
+        if (!this.carouselStates[figureId]) {
+            this.carouselStates[figureId] = carousel.items[0];
+        }
+        else if (carousel.items.length === 0) {
+            delete this.carouselStates[figureId];
+        }
+        else if (!carousel.items.some((item) => deepEquals(item, this.carouselStates[figureId]))) {
+            this.carouselStates[figureId] = carousel.items[0];
+        }
+    }
+    addNewChartToCarousel(figureId, sheetId) {
+        const carousel = this.getters.getCarousel(figureId);
+        const chartId = this.uuidGenerator.smallUuid();
+        this.dispatch("CREATE_CHART", {
+            chartId,
+            figureId,
+            sheetId,
+            definition: CAROUSEL_DEFAULT_CHART_DEFINITION,
+        });
+        const definition = { items: [...carousel.items, { type: "chart", chartId }] };
+        this.dispatch("UPDATE_CAROUSEL", { sheetId, figureId, definition });
+    }
+    addFigureChartToCarousel(figureId, chartFigureId, sheetId) {
+        const chartId = this.getChartIdFromFigureId(chartFigureId);
+        if (!chartId) {
+            return;
+        }
+        const carousel = this.getters.getCarousel(figureId);
+        const definition = { items: [...carousel.items, { type: "chart", chartId }] };
+        this.dispatch("UPDATE_CAROUSEL", { sheetId, figureId, definition });
+        this.dispatch("UPDATE_CHART", {
+            sheetId,
+            chartId,
+            figureId,
+            definition: this.getters.getChartDefinition(chartId),
+        });
+        this.dispatch("DELETE_FIGURE", { sheetId, figureId: chartFigureId });
+    }
+}
+
 class HeaderPositionsUIPlugin extends UIPlugin {
     static getters = ["getColDimensions", "getRowDimensions", "getColRowOffset"];
     headerPositions = {};
@@ -76325,6 +77069,7 @@ const corePluginRegistry = new Registry()
     .add("conditional formatting", ConditionalFormatPlugin)
     .add("figures", FigurePlugin)
     .add("chart", ChartPlugin)
+    .add("carousel", CarouselPlugin)
     .add("image", ImagePlugin)
     .add("pivot_core", PivotCorePlugin)
     .add("spreadsheet_pivot_core", SpreadsheetPivotCorePlugin)
@@ -76357,7 +77102,8 @@ const statefulUIPluginRegistry = new Registry()
     .add("table_computed_style", TableComputedStylePlugin)
     .add("header_positions", HeaderPositionsUIPlugin)
     .add("viewport", SheetViewPlugin)
-    .add("clipboard", ClipboardPlugin);
+    .add("clipboard", ClipboardPlugin)
+    .add("carousel_ui", CarouselUIPlugin);
 // Plugins which have a derived state from core data
 const coreViewsPluginRegistry = new Registry()
     .add("evaluation", EvaluationPlugin)
@@ -77310,6 +78056,10 @@ topbarMenuRegistry
     .addChild("insert_chart", ["insert"], {
     ...insertChart,
     sequence: 50,
+})
+    .addChild("insert_carousel", ["insert"], {
+    ...insertCarousel,
+    sequence: 51,
 })
     .addChild("insert_pivot", ["insert"], {
     ...insertPivot,
@@ -83692,7 +84442,7 @@ function commonDataValidationAttributes(dvRule) {
     ];
 }
 
-function createDrawing(drawingRelIds, sheet, figures) {
+function createDrawing(drawingRelIds, sheet, figures, construct) {
     const namespaces = [
         ["xmlns:xdr", NAMESPACE.drawing],
         ["xmlns:r", RELATIONSHIP_NSR],
@@ -83703,7 +84453,7 @@ function createDrawing(drawingRelIds, sheet, figures) {
     for (const [figureIndex, figure] of Object.entries(figures)) {
         switch (figure?.tag) {
             case "chart":
-                figuresNodes.push(createChartDrawing(figure, sheet, drawingRelIds[figureIndex]));
+                figuresNodes.push(createChartDrawing(figure, sheet, drawingRelIds[figureIndex], construct));
                 break;
             case "image":
                 figuresNodes.push(createImageDrawing(figure, sheet, drawingRelIds[figureIndex]));
@@ -83765,10 +84515,10 @@ function figureCoordinates(headers, anchor, offset) {
         offset: convertDotValueToEMU(offset - currentPosition + FIGURE_BORDER_WIDTH),
     };
 }
-function createChartDrawing(figure, sheet, chartRelId) {
+function createChartDrawing(figure, sheet, chartRelId, construct) {
     // position
     const { from, to } = convertFigureData(figure, sheet);
-    const chartId = convertChartId(figure.id);
+    const chartId = convertChartId(figure.id, construct);
     const cNvPrAttrs = [
         ["id", chartId],
         ["name", `Chart ${chartId}`],
@@ -84431,7 +85181,7 @@ function createWorksheets(data, construct) {
         let drawingNode = escapeXml ``;
         const drawingRelIds = [];
         for (const chart of sheet.charts) {
-            const xlsxChartId = convertChartId(chart.id);
+            const xlsxChartId = convertChartId(chart.id, construct);
             const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
                 target: `../charts/chart${xlsxChartId}.xml`,
                 type: XLSX_RELATION_TYPE.chart,
@@ -84465,7 +85215,7 @@ function createWorksheets(data, construct) {
                 target: `../drawings/drawing${sheetIndex}.xml`,
                 type: XLSX_RELATION_TYPE.drawing,
             });
-            files.push(createXMLFile(createDrawing(drawingRelIds, sheet, drawings), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
+            files.push(createXMLFile(createDrawing(drawingRelIds, sheet, drawings, construct), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
             drawingNode = escapeXml /*xml*/ `<drawing r:id="${drawingRelId}" />`;
         }
         const sheetXml = escapeXml /*xml*/ `
@@ -85448,12 +86198,13 @@ const constants = {
     HIGHLIGHT_COLOR,
     PIVOT_TABLE_CONFIG,
     ChartTerms,
+    FIGURE_ID_SPLITTER,
 };
 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.5.0-alpha.6";
-__info__.date = "2025-08-05T06:27:49.505Z";
-__info__.hash = "67e091f";
+__info__.version = "18.5.0-alpha.7";
+__info__.date = "2025-08-08T11:00:44.117Z";
+__info__.hash = "1019d55";