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

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 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
  */
 
 (function (exports, owl) {
@@ -2656,6 +2656,7 @@
       "SET_FORMULA_VISIBILITY",
       "UPDATE_FILTER",
       "UPDATE_CHART",
+      "UPDATE_CAROUSEL_ACTIVE_ITEM",
   ]);
   const coreTypes = new Set([
       /** CELLS */
@@ -2698,6 +2699,8 @@
       "CREATE_FIGURE",
       "DELETE_FIGURE",
       "UPDATE_FIGURE",
+      "CREATE_CAROUSEL",
+      "UPDATE_CAROUSEL",
       /** FORMATTING */
       "SET_FORMATTING",
       "CLEAR_FORMATTING",
@@ -2707,6 +2710,7 @@
       /** CHART */
       "CREATE_CHART",
       "UPDATE_CHART",
+      "DELETE_CHART",
       /** FILTERS */
       "CREATE_TABLE",
       "REMOVE_TABLE",
@@ -2901,6 +2905,7 @@
       CommandResult["InvalidColor"] = "InvalidColor";
       CommandResult["InvalidPivotDataSet"] = "InvalidPivotDataSet";
       CommandResult["InvalidPivotCustomField"] = "InvalidPivotCustomField";
+      CommandResult["MissingFigureArguments"] = "MissingFigureArguments";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   const availableConditionalFormatOperators = new Set([
@@ -9221,7 +9226,7 @@
               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}`);
           }
@@ -9257,6 +9262,7 @@
           }
           this.dispatch("CREATE_CHART", {
               figureId,
+              chartId: figureId,
               sheetId,
               definition: copy.getDefinition(),
               col,
@@ -22997,7 +23003,7 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
       static props = {
-          figureUI: Object,
+          chartId: String,
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("graphContainer");
@@ -23012,7 +23018,7 @@ stores.inject(MyMetaStore, storeInstance);
           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");
           }
@@ -23050,7 +23056,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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);
@@ -23062,7 +23068,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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);
@@ -23090,9 +23096,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       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;
       }
   }
 
@@ -23757,14 +23761,14 @@ stores.inject(MyMetaStore, storeInstance);
   class ScorecardChart extends owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
       static props = {
-          figureUI: Object,
+          chartId: String,
       };
       canvas = owl.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);
       }
@@ -27086,13 +27090,13 @@ stores.inject(MyMetaStore, storeInstance);
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       static props = {
-          figureUI: Object,
+          chartId: String,
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.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()) {
@@ -27140,9 +27144,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
       }
   }
   /**
@@ -29431,7 +29433,7 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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}`);
@@ -29782,6 +29784,8 @@ stores.inject(MyMetaStore, storeInstance);
       return {
           relsFiles: [],
           sharedStrings: [],
+          chartIds: [],
+          imageIds: [],
           // default Values that will always be part of the style sheet
           styles: [
               {
@@ -29859,6 +29863,10 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   function getChartMenuActions(figureId, onFigureDeleted, env) {
+      const chartId = env.model.getters.getChartIdFromFigureId(figureId);
+      if (!chartId) {
+          return [];
+      }
       const menuItemSpecs = [
           {
               id: "edit",
@@ -29881,8 +29889,8 @@ stores.inject(MyMetaStore, storeInstance);
               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);
@@ -29902,8 +29910,8 @@ stores.inject(MyMetaStore, storeInstance);
               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");
               },
@@ -29962,6 +29970,35 @@ stores.inject(MyMetaStore, storeInstance);
       ];
       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",
@@ -30010,6 +30047,103 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  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 owl.Component {
+      static template = "o-spreadsheet-CarouselFigure";
+      static props = {
+          figureUI: Object,
+          onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
+      };
+      static components = {};
+      setup() {
+          owl.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;
@@ -30794,9 +30928,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -30806,7 +30940,7 @@ stores.inject(MyMetaStore, storeInstance);
           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 = {
@@ -30816,7 +30950,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this.model.dispatch("UPDATE_CHART", {
               definition,
-              figureId,
+              chartId,
+              figureId: this.getters.getFigureIdFromChartId(chartId),
               sheetId: this.getters.getActiveSheetId(),
           });
       }
@@ -30837,17 +30972,17 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartDashboardMenu extends owl.Component {
       static template = "o-spreadsheet-ChartDashboardMenu";
       static components = { MenuPopover };
-      static props = { figureUI: Object };
+      static props = { chartId: String };
       fullScreenFigureStore;
       store;
       menuState = owl.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);
-          owl.onWillUpdateProps(({ figureUI }) => {
-              if (figureUI.id !== this.props.figureUI.id) {
-                  this.store.reset(figureUI.id);
+          owl.onWillUpdateProps(({ chartId }) => {
+              if (chartId !== this.props.chartId) {
+                  this.store.reset(chartId);
               }
           });
       }
@@ -30855,26 +30990,28 @@ stores.inject(MyMetaStore, storeInstance);
           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);
                   },
               };
           }
@@ -30883,7 +31020,7 @@ stores.inject(MyMetaStore, storeInstance);
               label: _t("Full Screen"),
               iconClass: "fa fa-expand",
               onClick: () => {
-                  this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                  this.fullScreenFigureStore.toggleFullScreenChart(figureId);
               },
           };
       }
@@ -30904,6 +31041,7 @@ stores.inject(MyMetaStore, storeInstance);
       static props = {
           figureUI: Object,
           onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
       };
       static components = { ChartDashboardMenu };
       onDoubleClick() {
@@ -30911,7 +31049,14 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -30928,6 +31073,7 @@ stores.inject(MyMetaStore, storeInstance);
       static props = {
           figureUI: Object,
           onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
       };
       static components = {};
       // ---------------------------------------------------------------------------
@@ -30954,6 +31100,10 @@ stores.inject(MyMetaStore, storeInstance);
       borderWidth: 0,
       menuBuilder: getImageMenuActions,
   });
+  figureRegistry.add("carousel", {
+      Component: CarouselFigure,
+      menuBuilder: getCarouselMenuActions,
+  });
 
   // -----------------------------------------------------------------------------
   // STYLE
@@ -30980,6 +31130,7 @@ stores.inject(MyMetaStore, storeInstance);
   .o-figure-wrapper {
     position: absolute;
     box-sizing: content-box;
+    pointer-events: auto;
 
     .o-fig-anchor {
       z-index: ${ComponentsImportance.FigureAnchor};
@@ -31038,6 +31189,7 @@ stores.inject(MyMetaStore, storeInstance);
       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 },
@@ -31050,6 +31202,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       menuState = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
       figureRef = owl.useRef("figure");
+      figureWrapperRef = owl.useRef("figureWrapper");
       menuButtonRef = owl.useRef("menuButton");
       borderWidth;
       get isSelected() {
@@ -31242,6 +31395,13 @@ stores.inject(MyMetaStore, storeInstance);
               .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 {
@@ -38774,16 +38934,15 @@ stores.inject(MyMetaStore, storeInstance);
       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;
   }
@@ -41178,6 +41337,8 @@ stores.inject(MyMetaStore, storeInstance);
               sheets: sheets,
               sharedStrings,
               externalBooks,
+              chartIds: [],
+              imageIds: [],
           };
       }
       buildXlsxFileStructure() {
@@ -41855,6 +42016,18 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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 || []) {
@@ -42108,7 +42281,12 @@ stores.inject(MyMetaStore, storeInstance);
           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;
+                  }
               }
           });
       }
@@ -42119,20 +42297,20 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
@@ -42705,6 +42883,7 @@ stores.inject(MyMetaStore, storeInstance);
       const result = env.model.dispatch("CREATE_CHART", {
           sheetId,
           figureId,
+          chartId: figureId,
           col,
           row,
           offset,
@@ -42716,6 +42895,26 @@ stores.inject(MyMetaStore, storeInstance);
           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
   //------------------------------------------------------------------------------
@@ -43967,6 +44166,12 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -48057,6 +48262,7 @@ stores.inject(MyMetaStore, storeInstance);
           horizontalSnap: undefined,
           verticalSnap: undefined,
           cancelDnd: undefined,
+          overlappingCarousel: undefined,
       });
       setup() {
           owl.onMounted(() => {
@@ -48079,6 +48285,7 @@ stores.inject(MyMetaStore, storeInstance);
                   this.dnd.draggedFigure = undefined;
                   this.dnd.horizontalSnap = undefined;
                   this.dnd.verticalSnap = undefined;
+                  this.dnd.overlappingCarousel = undefined;
                   this.dnd.cancelDnd = undefined;
               }
           });
@@ -48217,26 +48424,46 @@ stores.inject(MyMetaStore, storeInstance);
               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);
       }
@@ -48288,6 +48515,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.dnd.draggedFigure = undefined;
               this.dnd.horizontalSnap = undefined;
               this.dnd.verticalSnap = undefined;
+              this.dnd.overlappingCarousel = undefined;
           };
           this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
       }
@@ -48304,10 +48532,15 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -48354,6 +48587,20 @@ stores.inject(MyMetaStore, storeInstance);
               });
           }
       }
+      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 */ `
@@ -51036,6 +51283,226 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  function useAutofocus({ refName }) {
+      const ref = owl.useRef(refName);
+      owl.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 owl.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 = owl.useRef("input");
+      setup() {
+          owl.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 owl.Component {
+      static template = "o-spreadsheet-CarouselPanel";
+      static props = { onCloseSidePanel: Function, figureId: String };
+      static components = { TextInput };
+      dragAndDrop = useDragAndDropListItems();
+      previewListRef = owl.useRef("previewList");
+      setup() {
+          let lastCarouselItems = [...this.carouselItems];
+          owl.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 owl.Component {
       static template = "o-spreadsheet.ChartDataSeries";
       static components = { SelectionInput, Section };
@@ -51102,7 +51569,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartErrorSection,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -51160,7 +51627,7 @@ stores.inject(MyMetaStore, storeInstance);
           ];
       }
       onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               dataSetsHaveTitle,
           });
       }
@@ -51232,7 +51699,7 @@ stores.inject(MyMetaStore, storeInstance);
               return;
           }
           const labelRange = dataSets.length > 1 ? dataSets.shift().dataRange : "";
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               labelRange,
               dataSets,
           });
@@ -51249,7 +51716,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...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,
           });
       }
@@ -51261,7 +51728,7 @@ stores.inject(MyMetaStore, storeInstance);
               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,
           });
       }
@@ -51274,18 +51741,18 @@ stores.inject(MyMetaStore, storeInstance);
               ...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() {
@@ -51376,12 +51843,12 @@ stores.inject(MyMetaStore, storeInstance);
        */
       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,
           });
       }
@@ -51389,7 +51856,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.labelRange || "";
       }
       onUpdateAggregated(aggregated) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               aggregated,
           });
       }
@@ -51421,7 +51888,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
@@ -51481,7 +51949,7 @@ stores.inject(MyMetaStore, storeInstance);
               : this.chartTerms.StackedColumnChart;
       }
       onUpdateStacked(stacked) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               stacked,
           });
       }
@@ -51975,7 +52443,7 @@ stores.inject(MyMetaStore, storeInstance);
   class AxisDesignEditor extends owl.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 = owl.useState({ currentAxis: "x" });
       defaultFontSize = CHART_AXIS_TITLE_FONT_SIZE;
       get axisTitleStyle() {
@@ -52000,7 +52468,7 @@ stores.inject(MyMetaStore, storeInstance);
                   text,
               },
           };
-          this.props.updateChart(this.props.figureId, { axesDesign });
+          this.props.updateChart(this.props.chartId, { axesDesign });
       }
       updateAxisTitleStyle(style) {
           const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
@@ -52008,7 +52476,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...axesDesign[this.state.currentAxis],
               title: style,
           };
-          this.props.updateChart(this.props.figureId, { axesDesign });
+          this.props.updateChart(this.props.chartId, { axesDesign });
       }
   }
 
@@ -52061,7 +52529,7 @@ stores.inject(MyMetaStore, storeInstance);
           RadioSelection,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52085,17 +52553,17 @@ stores.inject(MyMetaStore, storeInstance);
           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 = "";
       }
   }
@@ -52106,13 +52574,13 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           });
       }
@@ -52126,7 +52594,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52134,7 +52602,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       state = owl.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 [];
           }
@@ -52153,7 +52621,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...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;
@@ -52173,7 +52641,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...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;
@@ -52191,7 +52659,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52207,7 +52675,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...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;
@@ -52233,7 +52701,7 @@ stores.inject(MyMetaStore, storeInstance);
                   display,
               },
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getTrendLineConfiguration(index) {
           const dataSets = this.props.definition.dataSets;
@@ -52274,7 +52742,7 @@ stores.inject(MyMetaStore, storeInstance);
           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() {
@@ -52316,7 +52784,7 @@ stores.inject(MyMetaStore, storeInstance);
                   ...config,
               },
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
   }
 
@@ -52326,7 +52794,7 @@ stores.inject(MyMetaStore, storeInstance);
           Checkbox,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52346,7 +52814,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartShowValues,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52370,7 +52838,7 @@ stores.inject(MyMetaStore, storeInstance);
           Checkbox,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52397,7 +52865,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...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;
@@ -52433,7 +52901,7 @@ stores.inject(MyMetaStore, storeInstance);
           ];
       }
       onUpdateCumulative(cumulative) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               cumulative,
           });
       }
@@ -52449,13 +52917,13 @@ stores.inject(MyMetaStore, storeInstance);
           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) => ({
@@ -52465,7 +52933,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 });
       }
   }
 
@@ -52473,7 +52941,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GaugeChartConfigPanel";
       static components = { ChartErrorSection, ChartDataSeries };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52491,12 +52959,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
           });
       }
@@ -52555,7 +53023,7 @@ stores.inject(MyMetaStore, storeInstance);
           StandaloneComposer,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -52596,7 +53064,7 @@ stores.inject(MyMetaStore, storeInstance);
       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) {
@@ -52659,9 +53127,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
       }
@@ -52671,13 +53139,13 @@ stores.inject(MyMetaStore, storeInstance);
       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();
@@ -52727,14 +53195,14 @@ stores.inject(MyMetaStore, storeInstance);
               : 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"
@@ -52783,7 +53251,7 @@ stores.inject(MyMetaStore, storeInstance);
   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);
           }
@@ -52808,17 +53276,17 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           });
       }
@@ -52855,13 +53323,13 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           });
@@ -52882,7 +53350,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartShowDataMarkers,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52892,14 +53360,14 @@ stores.inject(MyMetaStore, storeInstance);
   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,
           });
       }
@@ -52921,7 +53389,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-ScorecardChartConfigPanel";
       static components = { SelectionInput, ChartErrorSection, Section };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52947,12 +53415,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
           });
       }
@@ -52961,12 +53429,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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,
           });
       }
@@ -52974,7 +53442,7 @@ stores.inject(MyMetaStore, storeInstance);
           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 });
       }
   }
 
@@ -52989,7 +53457,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartTitle,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53006,7 +53474,7 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -53014,13 +53482,13 @@ stores.inject(MyMetaStore, storeInstance);
       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;
           }
       }
@@ -53039,22 +53507,22 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       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 });
       }
   }
 
@@ -53072,7 +53540,7 @@ stores.inject(MyMetaStore, storeInstance);
           PieHoleSize,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53085,18 +53553,18 @@ stores.inject(MyMetaStore, storeInstance);
           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,
           });
@@ -53110,7 +53578,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           onColorChanged: Function,
       };
@@ -53122,7 +53590,7 @@ stores.inject(MyMetaStore, storeInstance);
           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 || [];
       }
@@ -53143,7 +53611,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-TreeMapColorScale";
       static components = { RoundColorPicker };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           onColorChanged: Function,
       };
@@ -53185,7 +53653,7 @@ stores.inject(MyMetaStore, storeInstance);
           TreeMapColorScale,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53209,15 +53677,15 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 [
@@ -53241,23 +53709,23 @@ stores.inject(MyMetaStore, storeInstance);
           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 [
@@ -53278,7 +53746,7 @@ stores.inject(MyMetaStore, storeInstance);
               CHART_WATERFALL_SUBTOTAL_COLOR);
       }
       updateVerticalAxisPosition(value) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               verticalAxisPosition: value,
           });
       }
@@ -53380,7 +53848,7 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartTypePicker extends owl.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 = owl.useRef("popoverRef");
@@ -53405,14 +53873,14 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -53444,34 +53912,36 @@ stores.inject(MyMetaStore, storeInstance);
       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,
           };
       }
@@ -53512,15 +53982,15 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartPanel extends owl.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);
@@ -53540,45 +54010,49 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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.");
           }
@@ -53588,8 +54062,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return chartPanel;
       }
-      getChartDefinition(figureId) {
-          return this.env.model.getters.getChartDefinition(figureId);
+      getChartDefinition(chartId) {
+          return this.env.model.getters.getChartDefinition(chartId);
       }
   }
 
@@ -55591,103 +56065,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  function useAutofocus({ refName }) {
-      const ref = owl.useRef(refName);
-      owl.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 owl.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 = owl.useRef("input");
-      setup() {
-          owl.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 owl.Component {
       static template = "o-spreadsheet-PivotCustomGroupsCollapsible";
       static props = {
@@ -57802,11 +58179,12 @@ stores.inject(MyMetaStore, storeInstance);
       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", {
@@ -57894,6 +58272,17 @@ stores.inject(MyMetaStore, storeInstance);
           }
       },
   });
+  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"];
@@ -58855,7 +59244,7 @@ stores.inject(MyMetaStore, storeInstance);
           let lastFigureId = undefined;
           owl.onWillUpdateProps(() => {
               if (lastFigureId !== this.figureUI?.id) {
-                  animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+                  animationStore.enableAnimationForChart(this.chartId + "-fullscreen");
               }
               lastFigureId = this.figureUI?.id;
           });
@@ -58864,6 +59253,11 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -58875,9 +59269,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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}`);
@@ -60536,6 +60930,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getChartType",
           "getChartIds",
           "getChart",
+          "getFigureIdFromChartId",
           "getContextCreationChart",
       ];
       charts = {};
@@ -60543,7 +60938,11 @@ stores.inject(MyMetaStore, storeInstance);
       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);
           }
       }
       // ---------------------------------------------------------------------------
@@ -60552,9 +60951,11 @@ stores.inject(MyMetaStore, storeInstance);
       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 */;
           }
@@ -60562,37 +60963,61 @@ stores.inject(MyMetaStore, storeInstance);
       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)) {
@@ -60604,31 +61029,37 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // 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;
       }
@@ -60643,7 +61074,16 @@ stores.inject(MyMetaStore, storeInstance);
                       // 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 };
+                          }
                       }
                   }
               }
@@ -60657,13 +61097,23 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
                       }
@@ -60696,27 +61146,40 @@ stores.inject(MyMetaStore, storeInstance);
        * 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 */;
+      }
   }
 
   // -----------------------------------------------------------------------------
@@ -61570,6 +62033,23 @@ stores.inject(MyMetaStore, storeInstance);
                       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) {
@@ -61681,6 +62161,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -62108,7 +62591,9 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -64246,6 +64731,122 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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",
@@ -67201,7 +67802,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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":
@@ -67333,8 +67934,10 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -67345,15 +67948,15 @@ stores.inject(MyMetaStore, storeInstance);
                   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.
@@ -67388,8 +67991,14 @@ stores.inject(MyMetaStore, storeInstance);
                   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,
@@ -67397,12 +68006,11 @@ stores.inject(MyMetaStore, storeInstance);
                       });
                   }
                   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({
@@ -70536,7 +71144,9 @@ stores.inject(MyMetaStore, storeInstance);
   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);
@@ -70589,6 +71199,21 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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}~` };
@@ -72983,9 +73608,11 @@ stores.inject(MyMetaStore, storeInstance);
 
   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) {
@@ -76195,6 +76822,123 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 = {};
@@ -76326,6 +77070,7 @@ stores.inject(MyMetaStore, storeInstance);
       .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)
@@ -76358,7 +77103,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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)
@@ -77311,6 +78057,10 @@ stores.inject(MyMetaStore, storeInstance);
       .addChild("insert_chart", ["insert"], {
       ...insertChart,
       sequence: 50,
+  })
+      .addChild("insert_carousel", ["insert"], {
+      ...insertCarousel,
+      sequence: 51,
   })
       .addChild("insert_pivot", ["insert"], {
       ...insertPivot,
@@ -83693,7 +84443,7 @@ stores.inject(MyMetaStore, storeInstance);
       ];
   }
 
-  function createDrawing(drawingRelIds, sheet, figures) {
+  function createDrawing(drawingRelIds, sheet, figures, construct) {
       const namespaces = [
           ["xmlns:xdr", NAMESPACE.drawing],
           ["xmlns:r", RELATIONSHIP_NSR],
@@ -83704,7 +84454,7 @@ stores.inject(MyMetaStore, storeInstance);
       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]));
@@ -83766,10 +84516,10 @@ stores.inject(MyMetaStore, storeInstance);
           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}`],
@@ -84432,7 +85182,7 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -84466,7 +85216,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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*/ `
@@ -85449,6 +86199,7 @@ stores.inject(MyMetaStore, storeInstance);
       HIGHLIGHT_COLOR,
       PIVOT_TABLE_CONFIG,
       ChartTerms,
+      FIGURE_ID_SPLITTER,
   };
   const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
@@ -85503,9 +86254,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);