@odoo/o-spreadsheet 19.1.2 → 19.2.0-alpha.2

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 19.1.2
- * @date 2026-01-07T16:21:36.757Z
- * @hash febc3e9
+ * @version 19.2.0-alpha.2
+ * @date 2026-01-07T16:21:35.251Z
+ * @hash ac2fa3e
  */
 
 (function (exports, owl) {
@@ -10483,6 +10483,7 @@
                   case "dateIsAfter":
                   case "dateIsOnOrAfter":
                   case "dateIsOnOrBefore":
+                  case "top10":
                       rule.values = rule.values.map((v) => changeContentLocale(v));
                       return rule;
                   case "beginsWithText":
@@ -14632,6 +14633,7 @@
           dateValue: _t("The value must be a date"),
           validRange: _t("The value must be a valid range"),
           validFormula: _t("The formula must be valid"),
+          positiveNumber: _t("The value must be a positive number"),
       },
       Errors: {
           ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid."),
@@ -34020,6 +34022,7 @@ stores.inject(MyMetaStore, storeInstance);
       greaterThanOrEqual: "isGreaterOrEqualTo",
       lessThan: "isLessThan",
       lessThanOrEqual: "isLessOrEqualTo",
+      top10: "top10",
   };
   /** Conversion map CF types in XLSX <=> Cf types in o_spreadsheet */
   const CF_TYPE_CONVERSION_MAP = {
@@ -34560,6 +34563,7 @@ stores.inject(MyMetaStore, storeInstance);
           const rule = cf.cfRules[0];
           let operator;
           const values = [];
+          const cfAdditionalProperties = {};
           if (rule.dxfId === undefined &&
               !(rule.type === "colorScale" || rule.type === "iconSet" || rule.type === "dataBar"))
               continue;
@@ -34568,7 +34572,6 @@ stores.inject(MyMetaStore, storeInstance);
               case "containsErrors":
               case "notContainsErrors":
               case "duplicateValues":
-              case "top10":
               case "uniqueValues":
               case "timePeriod":
                   // Not supported
@@ -34619,6 +34622,18 @@ stores.inject(MyMetaStore, storeInstance);
                       values.push(prefixFormulaWithEqual(rule.formula[1]));
                   }
                   break;
+              case "top10":
+                  if (rule.rank === undefined)
+                      continue;
+                  operator = CF_OPERATOR_TYPE_CONVERSION_MAP[rule.type];
+                  values.push(rule.rank.toString());
+                  if (rule.percent) {
+                      cfAdditionalProperties.isPercent = true;
+                  }
+                  if (rule.bottom) {
+                      cfAdditionalProperties.isBottom = true;
+                  }
+                  break;
           }
           if (operator && rule.dxfId !== undefined) {
               cfs.push({
@@ -34629,6 +34644,7 @@ stores.inject(MyMetaStore, storeInstance);
                       type: "CellIsRule",
                       operator: operator,
                       values: values,
+                      ...cfAdditionalProperties,
                       style: convertStyle({ fontStyle: dxfs[rule.dxfId].font, fillStyle: dxfs[rule.dxfId].fill }, warningManager),
                   },
               });
@@ -34847,6 +34863,8 @@ stores.inject(MyMetaStore, storeInstance);
               return "greaterThanOrEqual";
           case "dateIsOnOrBefore":
               return "lessThanOrEqual";
+          case "top10":
+              return "top10";
       }
   }
   // -------------------------------------
@@ -40630,15 +40648,20 @@ stores.inject(MyMetaStore, storeInstance);
       getPreview: (criterion) => _t("Value one of: %s", criterion.values.join(", ")),
   });
   criterionEvaluatorRegistry.add("isValueInRange", {
-      type: "isValueInList",
-      isValueValid: (value, criterion, getters, sheetId) => {
+      type: "isValueInRange",
+      preComputeCriterion: (criterion, criterionRanges, getters) => {
+          if (criterionRanges.length === 0) {
+              return new Set();
+          }
+          const sheetId = criterionRanges[0].sheetId;
+          const criterionValues = getters.getDataValidationRangeValues(sheetId, criterion);
+          return new Set(criterionValues.map((value) => value.value.toString().toLowerCase()));
+      },
+      isValueValid: (value, criterion, valuesSet) => {
           if (!value) {
               return false;
           }
-          const criterionValues = getters.getDataValidationRangeValues(sheetId, criterion);
-          return criterionValues
-              .map((value) => value.value.toLowerCase())
-              .includes(value.toString().toLowerCase());
+          return valuesSet.has(value.toString().toLowerCase());
       },
       getErrorString: (criterion) => _t("The value must be a value in the range %s", String(criterion.values[0])),
       isCriterionValueValid: (value) => rangeReference.test(value),
@@ -40715,6 +40738,67 @@ stores.inject(MyMetaStore, storeInstance);
       name: _t("Is not empty"),
       getPreview: () => _t("Is not empty"),
   });
+  criterionEvaluatorRegistry.add("top10", {
+      type: "top10",
+      preComputeCriterion: (criterion, criterionRanges, getters) => {
+          let value = tryToNumber(criterion.values[0], DEFAULT_LOCALE);
+          if (value === undefined || value <= 0) {
+              return undefined;
+          }
+          const numberValues = [];
+          for (const range of criterionRanges) {
+              for (const value of getters.getRangeValues(range)) {
+                  if (typeof value === "number") {
+                      numberValues.push(value);
+                  }
+              }
+          }
+          const sortedValues = numberValues.sort((a, b) => a - b);
+          if (criterion.isPercent) {
+              value = clip(value, 1, 100);
+          }
+          let index = 0;
+          if (criterion.isBottom && !criterion.isPercent) {
+              index = value - 1;
+          }
+          else if (criterion.isBottom && criterion.isPercent) {
+              index = Math.floor((sortedValues.length * value) / 100) - 1;
+          }
+          else if (!criterion.isBottom && criterion.isPercent) {
+              index = sortedValues.length - Math.floor((sortedValues.length * value) / 100);
+          }
+          else {
+              index = sortedValues.length - value;
+          }
+          index = clip(index, 0, sortedValues.length - 1);
+          return sortedValues[index];
+      },
+      isValueValid: (value, criterion, threshold) => {
+          if (typeof value !== "number" || threshold === undefined) {
+              return false;
+          }
+          return criterion.isBottom ? value <= threshold : value >= threshold;
+      },
+      getErrorString: (criterion) => {
+          const args = {
+              value: String(criterion.values[0]),
+              percentSymbol: criterion.isPercent ? "%" : "",
+          };
+          return criterion.isBottom
+              ? _t("The value must be in bottom %(value)s%(percentSymbol)s", args)
+              : _t("The value must be in top %(value)s%(percentSymbol)s", args);
+      },
+      isCriterionValueValid: (value) => checkValueIsPositiveNumber(value),
+      criterionValueErrorString: DVTerms.CriterionError.positiveNumber,
+      numberOfValues: () => 1,
+      name: _t("Is in Top/Bottom ranking"),
+      getPreview: (criterion) => {
+          const args = { value: criterion.values[0], percentSymbol: criterion.isPercent ? "%" : "" };
+          return criterion.isBottom
+              ? _t("Value is in bottom %(value)s%(percentSymbol)s", args)
+              : _t("Value is in top %(value)s%(percentSymbol)s", args);
+      },
+  });
   function getNumberCriterionlocalizedValues(criterion, locale) {
       return criterion.values.map((value) => {
           return value !== undefined
@@ -40736,6 +40820,10 @@ stores.inject(MyMetaStore, storeInstance);
       const valueAsNumber = tryToNumber(value, DEFAULT_LOCALE);
       return valueAsNumber !== undefined;
   }
+  function checkValueIsPositiveNumber(value) {
+      const valueAsNumber = tryToNumber(value, DEFAULT_LOCALE);
+      return valueAsNumber !== undefined && valueAsNumber > 0;
+  }
 
   // -----------------------------------------------------------------------------
   // Constants
@@ -51110,6 +51198,10 @@ stores.inject(MyMetaStore, storeInstance);
                       break;
                   case "CellIsRule":
                       const formulas = cf.rule.values.map((value) => value.startsWith("=") ? compile(value) : undefined);
+                      const evaluator = criterionEvaluatorRegistry.get(cf.rule.operator);
+                      const criterion = { ...cf.rule, type: cf.rule.operator };
+                      const ranges = cf.ranges.map((xc) => this.getters.getRangeFromSheetXC(sheetId, xc));
+                      const preComputedCriterion = evaluator.preComputeCriterion?.(criterion, ranges, this.getters);
                       for (const ref of cf.ranges) {
                           const zone = this.getters.getRangeFromSheetXC(sheetId, ref).zone;
                           for (let row = zone.top; row <= zone.bottom; row++) {
@@ -51122,7 +51214,7 @@ stores.inject(MyMetaStore, storeInstance);
                                       }
                                       return value;
                                   });
-                                  if (this.getRuleResultForTarget(target, { ...cf.rule, values })) {
+                                  if (this.getRuleResultForTarget(target, { ...cf.rule, values }, preComputedCriterion)) {
                                       if (!computedStyle[col])
                                           computedStyle[col] = [];
                                       // we must combine all the properties of all the CF rules applied to the given cell
@@ -51285,7 +51377,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
       }
-      getRuleResultForTarget(target, rule) {
+      getRuleResultForTarget(target, rule, preComputedCriterion) {
           const cell = this.getters.getEvaluatedCell(target);
           if (cell.type === CellValueType.error) {
               return false;
@@ -51302,11 +51394,12 @@ stores.inject(MyMetaStore, storeInstance);
               return false;
           }
           const evaluatedCriterion = {
+              ...rule,
               type: rule.operator,
               values: evaluatedCriterionValues.map(toScalar),
               dateValue: rule.dateValue || "exactDate",
           };
-          return evaluator.isValueValid(cell.value ?? "", evaluatedCriterion, this.getters, sheetId);
+          return evaluator.isValueValid(cell.value ?? "", evaluatedCriterion, preComputedCriterion);
       }
   }
 
@@ -51323,17 +51416,20 @@ stores.inject(MyMetaStore, storeInstance);
           "isDataValidationInvalid",
       ];
       validationResults = {};
+      criterionPreComputeResult = {};
       handle(cmd) {
           if (invalidateEvaluationCommands.has(cmd.type) ||
               cmd.type === "EVALUATE_CELLS" ||
               (cmd.type === "UPDATE_CELL" && ("content" in cmd || "format" in cmd))) {
               this.validationResults = {};
+              this.criterionPreComputeResult = {};
               return;
           }
           switch (cmd.type) {
               case "ADD_DATA_VALIDATION_RULE":
               case "REMOVE_DATA_VALIDATION_RULE":
                   delete this.validationResults[cmd.sheetId];
+                  delete this.criterionPreComputeResult[cmd.sheetId];
                   break;
           }
       }
@@ -51476,7 +51572,15 @@ stores.inject(MyMetaStore, storeInstance);
               return undefined;
           }
           const evaluatedCriterion = { ...criterion, values: evaluatedCriterionValues.map(toScalar) };
-          if (evaluator.isValueValid(cellValue, evaluatedCriterion, this.getters, sheetId)) {
+          if (!this.criterionPreComputeResult[sheetId]) {
+              this.criterionPreComputeResult[sheetId] = {};
+          }
+          let preComputedCriterion = this.criterionPreComputeResult[sheetId][rule.id];
+          if (preComputedCriterion === undefined) {
+              preComputedCriterion = evaluator.preComputeCriterion?.(rule.criterion, rule.ranges, this.getters);
+              this.criterionPreComputeResult[sheetId][rule.id] = preComputedCriterion;
+          }
+          if (evaluator.isValueValid(cellValue, evaluatedCriterion, preComputedCriterion)) {
               return undefined;
           }
           return evaluator.getErrorString(evaluatedCriterion, this.getters, sheetId);
@@ -57171,6 +57275,7 @@ stores.inject(MyMetaStore, storeInstance);
                   if (filterValue.type === "none")
                       continue;
                   const evaluator = criterionEvaluatorRegistry.get(filterValue.type);
+                  const preComputedCriterion = evaluator.preComputeCriterion?.(filterValue, [filter.filteredRange], this.getters);
                   const evaluatedCriterionValues = filterValue.values.map((value) => {
                       if (!value.startsWith("=")) {
                           return parseLiteral(value, DEFAULT_LOCALE);
@@ -57188,7 +57293,7 @@ stores.inject(MyMetaStore, storeInstance);
                   for (let row = filteredZone.top; row <= filteredZone.bottom; row++) {
                       const position = { sheetId, col: filter.col, row };
                       const value = this.getters.getEvaluatedCell(position).value ?? "";
-                      if (!evaluator.isValueValid(value, evaluatedCriterion, this.getters, sheetId)) {
+                      if (!evaluator.isValueValid(value, evaluatedCriterion, preComputedCriterion)) {
                           hiddenRows.add(row);
                       }
                   }
@@ -61315,6 +61420,8 @@ stores.inject(MyMetaStore, storeInstance);
                   case undefined:
                       throw new Error("dateValue should be defined");
               }
+          case "top10":
+              return [];
       }
   }
   function cellRuleTypeAttributes(rule) {
@@ -61347,6 +61454,14 @@ stores.inject(MyMetaStore, storeInstance);
           case "dateIs":
           case "customFormula":
               return [["type", "expression"]];
+          case "top10": {
+              return [
+                  ["type", "top10"],
+                  ["rank", rule.values[0]],
+                  ["percent", rule.isPercent ? "1" : "0"],
+                  ["bottom", rule.isBottom ? "1" : "0"],
+              ];
+          }
       }
   }
   function addDataBarRule(cf, rule) {
@@ -64929,13 +65044,16 @@ stores.inject(MyMetaStore, storeInstance);
       document.body.removeChild(a);
   }
   /**
-   * Detects if the current browser is Firefox
+   * Detects the current browser brand and subsequent rendering engine
    */
   function isBrowserFirefox() {
       return /Firefox/i.test(navigator.userAgent);
   }
+  function isBrowserChrome() {
+      return /Chrome/i.test(navigator.userAgent);
+  }
   function isBrowserSafari() {
-      return /Safari/i.test(navigator.userAgent);
+      return !isBrowserChrome() && /Safari/i.test(navigator.userAgent);
   }
   // Mobile detection
   function maxTouchPoints() {
@@ -65064,6 +65182,7 @@ stores.inject(MyMetaStore, storeInstance);
       "dateIsAfter",
       "dateIsOnOrBefore",
       "dateIsOnOrAfter",
+      "top10",
   ];
   const availableConditionalFormatOperators = new Set(cfOperators);
 
@@ -73035,6 +73154,26 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class Top10CriterionForm extends CriterionForm {
+      static template = "o-spreadsheet-Top10CriterionForm";
+      static components = { CriterionInput };
+      onValueChanged(value) {
+          const criterion = deepCopy(this.props.criterion);
+          criterion.values[0] = value;
+          this.updateCriterion(criterion);
+      }
+      updateIsBottom(ev) {
+          const criterion = deepCopy(this.props.criterion);
+          criterion.isBottom = ev.target.value === "bottom";
+          this.updateCriterion(criterion);
+      }
+      updateIsPercent(ev) {
+          const criterion = deepCopy(this.props.criterion);
+          criterion.isPercent = ev.target.value === "percent";
+          this.updateCriterion(criterion);
+      }
+  }
+
   /**
    * Start listening to pointer events and apply the given callbacks.
    *
@@ -74204,6 +74343,7 @@ stores.inject(MyMetaStore, storeInstance);
       text: 20,
       number: 30,
       date: 40,
+      relative: 45,
       misc: 50,
   };
   const criterionComponentRegistry = new Registry$1();
@@ -74381,6 +74521,12 @@ stores.inject(MyMetaStore, storeInstance);
       category: "misc",
       sequence: 6,
   });
+  criterionComponentRegistry.add("top10", {
+      type: "top10",
+      component: Top10CriterionForm,
+      category: "relative",
+      sequence: 7,
+  });
   function getCriterionMenuItems(callback, availableTypes) {
       const items = criterionComponentRegistry
           .getAll()
@@ -76011,7 +76157,17 @@ stores.inject(MyMetaStore, storeInstance);
   // Side panel
   //------------------------------------------------------------------------------
   const OPEN_CF_SIDEPANEL_ACTION = (env) => {
-      env.openSidePanel("ConditionalFormatting", { selection: env.model.getters.getSelectedZones() });
+      const sheetId = env.model.getters.getActiveSheetId();
+      const zones = env.model.getters.getSelectedZones();
+      const rules = env.model.getters.getConditionalFormats(sheetId);
+      const ruleIds = env.model.getters.getRulesSelection(sheetId, zones);
+      if (ruleIds.length === 1) {
+          return env.openSidePanel("ConditionalFormattingEditor", {
+              cf: rules.find((r) => r.id === ruleIds[0]),
+              isNewCf: false,
+          });
+      }
+      return env.openSidePanel("ConditionalFormatting");
   };
   const INSERT_LINK = (env) => {
       const { col, row } = env.model.getters.getActivePosition();
@@ -77009,12 +77165,12 @@ stores.inject(MyMetaStore, storeInstance);
           const zones = env.model.getters.getSelectedZones();
           const sheetId = env.model.getters.getActiveSheetId();
           const ranges = zones.map((zone) => env.model.getters.getRangeDataFromZone(sheetId, zone));
-          const ruleID = env.model.uuidGenerator.smallUuid();
+          const ruleId = env.model.uuidGenerator.smallUuid();
           env.model.dispatch("ADD_DATA_VALIDATION_RULE", {
               ranges,
               sheetId,
               rule: {
-                  id: ruleID,
+                  id: ruleId,
                   criterion: {
                       type: "isValueInList",
                       values: [],
@@ -77022,16 +77178,11 @@ stores.inject(MyMetaStore, storeInstance);
                   },
               },
           });
-          const rule = env.model.getters.getDataValidationRule(sheetId, ruleID);
+          const rule = env.model.getters.getDataValidationRule(sheetId, ruleId);
           if (!rule) {
               return;
           }
-          env.openSidePanel("DataValidationEditor", {
-              rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
-              onExit: () => {
-                  env.replaceSidePanel("DataValidation", "DataValidationEditor");
-              },
-          });
+          env.openSidePanel("DataValidationEditor", { ruleId });
       },
       isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.INSERT_DROPDOWN",
@@ -85483,210 +85634,36 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  function useHighlightsOnHover(ref, highlightProvider) {
-      const hoverState = useHoveredElement(ref);
-      useHighlights({
-          get highlights() {
-              return hoverState.hovered ? highlightProvider.highlights : [];
-          },
-      });
-  }
-  function useHighlights(highlightProvider) {
-      const stores = useStoreProvider();
-      const store = useLocalStore(HighlightStore);
-      owl.onMounted(() => {
-          store.register(highlightProvider);
-      });
-      let currentHighlights = highlightProvider.highlights;
-      owl.useEffect((highlights) => {
-          if (!deepEquals(highlights, currentHighlights)) {
-              currentHighlights = highlights;
-              stores.trigger("store-updated");
-          }
-      }, () => [highlightProvider.highlights]);
-  }
-
-  class ConditionalFormatPreview extends owl.Component {
-      static template = "o-spreadsheet-ConditionalFormatPreview";
-      icons = ICONS;
-      ref = owl.useRef("cfPreview");
-      setup() {
-          useHighlightsOnHover(this.ref, this);
-      }
-      getPreviewImageStyle() {
-          const rule = this.props.conditionalFormat.rule;
-          if (rule.type === "CellIsRule") {
-              return cssPropertiesToCss(cellStyleToCss(rule.style));
-          }
-          else if (rule.type === "ColorScaleRule") {
-              const minColor = colorNumberToHex(rule.minimum.color);
-              const midColor = rule.midpoint ? colorNumberToHex(rule.midpoint.color) : null;
-              const maxColor = colorNumberToHex(rule.maximum.color);
-              const baseString = "background-image: linear-gradient(to right, ";
-              return midColor
-                  ? baseString + minColor + ", " + midColor + ", " + maxColor + ")"
-                  : baseString + minColor + ", " + maxColor + ")";
-          }
-          else if (rule.type === "DataBarRule") {
-              const barColor = colorNumberToHex(rule.color);
-              const gradient = `background-image: linear-gradient(to right, ${barColor} 50%, white 50%)`;
-              return `${gradient}; color: ${TEXT_BODY};`;
-          }
-          return "";
-      }
-      getDescription() {
-          const cf = this.props.conditionalFormat;
-          switch (cf.rule.type) {
-              case "CellIsRule":
-                  return criterionEvaluatorRegistry
-                      .get(cf.rule.operator)
-                      .getPreview({ ...cf.rule, type: cf.rule.operator }, this.env.model.getters);
-              case "ColorScaleRule":
-                  return CfTerms.ColorScale;
-              case "IconSetRule":
-                  return CfTerms.IconSet;
-              case "DataBarRule":
-                  return CfTerms.DataBar;
-          }
-      }
-      deleteConditionalFormat() {
-          this.env.model.dispatch("REMOVE_CONDITIONAL_FORMAT", {
-              id: this.props.conditionalFormat.id,
-              sheetId: this.env.model.getters.getActiveSheetId(),
-          });
-      }
-      onMouseDown(event) {
-          this.props.onMouseDown(event);
-      }
-      get highlights() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          return this.props.conditionalFormat.ranges.map((range) => ({
-              range: this.env.model.getters.getRangeFromSheetXC(sheetId, range),
-              color: HIGHLIGHT_COLOR,
-              fillAlpha: 0.06,
-          }));
-      }
-  }
-  ConditionalFormatPreview.props = {
-      conditionalFormat: Object,
-      onPreviewClick: Function,
-      onMouseDown: Function,
-      class: String,
-  };
-
-  class ConditionalFormatPreviewList extends owl.Component {
-      static template = "o-spreadsheet-ConditionalFormatPreviewList";
-      static props = {
-          conditionalFormats: Array,
-          onPreviewClick: Function,
-          onAddConditionalFormat: Function,
-      };
-      static components = { ConditionalFormatPreview };
-      icons = ICONS;
-      dragAndDrop = useDragAndDropListItems();
-      cfListRef = owl.useRef("cfList");
-      setup() {
-          owl.onWillUpdateProps((nextProps) => {
-              if (!deepEquals(this.props.conditionalFormats, nextProps.conditionalFormats)) {
-                  this.dragAndDrop.cancel();
-              }
-          });
-      }
-      getPreviewDivStyle(cf) {
-          return this.dragAndDrop.itemsStyle[cf.id] || "";
-      }
-      onPreviewMouseDown(cf, event) {
-          if (event.button !== 0)
-              return;
-          const previewRects = Array.from(this.cfListRef.el.children).map((previewEl) => getBoundingRectAsPOJO(previewEl));
-          const items = this.props.conditionalFormats.map((cf, index) => ({
-              id: cf.id,
-              size: previewRects[index].height,
-              position: previewRects[index].y,
-          }));
-          this.dragAndDrop.start("vertical", {
-              draggedItemId: cf.id,
-              initialMousePosition: event.clientY,
-              items: items,
-              scrollableContainerEl: this.cfListRef.el,
-              onDragEnd: (cfId, finalIndex) => this.onDragEnd(cfId, finalIndex),
-          });
-      }
-      onDragEnd(cfId, finalIndex) {
-          const originalIndex = this.props.conditionalFormats.findIndex((sheet) => sheet.id === cfId);
-          const delta = originalIndex - finalIndex;
-          if (delta !== 0) {
-              this.env.model.dispatch("CHANGE_CONDITIONAL_FORMAT_PRIORITY", {
-                  cfId,
-                  delta,
-                  sheetId: this.env.model.getters.getActiveSheetId(),
-              });
-          }
-      }
-  }
-
-  class ConditionalFormattingEditor extends owl.Component {
-      static template = "o-spreadsheet-ConditionalFormattingEditor";
-      static props = {
-          editedCf: Object,
-          onCancel: Function,
-          onExit: Function,
-          isNewCf: Boolean,
-      };
-      static components = {
-          SelectionInput,
-          IconPicker,
-          ColorPickerWidget,
-          ConditionalFormatPreviewList,
-          Section,
-          RoundColorPicker,
-          StandaloneComposer,
-          BadgeSelection,
-          ValidationMessages,
-          SelectMenu,
-      };
+  class ConditionalFormattingEditorStore extends SpreadsheetStore {
+      mutators = ["updateConditionalFormat", "closeMenus"];
       icons = ICONS;
       iconSets = ICON_SETS;
-      getTextDecoration = getTextDecoration;
-      colorNumberToHex = colorNumberToHex;
       state;
-      setup() {
+      cfId;
+      constructor(get, cf, isNewCf) {
+          super(get);
+          this.cfId = cf.id;
           this.state = owl.useState({
               errors: [],
-              currentCFType: this.props.editedCf.rule.type,
-              ranges: this.props.editedCf.ranges,
+              currentCFType: cf.rule.type,
+              ranges: cf.ranges,
               rules: this.getDefaultRules(),
-              hasEditedCf: this.props.isNewCf,
+              hasEditedCf: isNewCf,
           });
-          switch (this.props.editedCf.rule.type) {
+          switch (cf.rule.type) {
               case "CellIsRule":
-                  this.state.rules.cellIs = this.props.editedCf.rule;
+                  this.state.rules.cellIs = cf.rule;
                   break;
               case "ColorScaleRule":
-                  this.state.rules.colorScale = this.props.editedCf.rule;
+                  this.state.rules.colorScale = cf.rule;
                   break;
               case "IconSetRule":
-                  this.state.rules.iconSet = this.props.editedCf.rule;
+                  this.state.rules.iconSet = cf.rule;
                   break;
               case "DataBarRule":
-                  this.state.rules.dataBar = this.props.editedCf.rule;
+                  this.state.rules.dataBar = cf.rule;
                   break;
           }
-          owl.useExternalListener(window, "click", this.closeMenus);
-      }
-      get isRangeValid() {
-          return this.state.errors.includes("EmptyRange" /* CommandResult.EmptyRange */);
-      }
-      get errorMessages() {
-          return this.state.errors.map((error) => CfTerms.Errors[error] || CfTerms.Errors.Unexpected);
-      }
-      get cfTypesValues() {
-          return [
-              { value: "CellIsRule", label: _t("Single color") },
-              { value: "ColorScaleRule", label: _t("Color scale") },
-              { value: "IconSetRule", label: _t("Icon set") },
-              { value: "DataBarRule", label: _t("Data bar") },
-          ];
       }
       updateConditionalFormat(newCf) {
           const ranges = newCf.ranges || this.state.ranges;
@@ -85695,17 +85672,17 @@ stores.inject(MyMetaStore, storeInstance);
               if (!newCf.suppressErrors) {
                   this.state.errors = ["InvalidRange" /* CommandResult.InvalidRange */];
               }
-              return ["InvalidRange" /* CommandResult.InvalidRange */];
+              return;
           }
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const locale = this.env.model.getters.getLocale();
+          const sheetId = this.model.getters.getActiveSheetId();
+          const locale = this.model.getters.getLocale();
           const rule = newCf.rule || this.getEditedRule(this.state.currentCFType);
-          const result = this.env.model.dispatch("ADD_CONDITIONAL_FORMAT", {
+          const result = this.model.dispatch("ADD_CONDITIONAL_FORMAT", {
               cf: {
+                  id: this.cfId,
                   rule: canonicalizeCFRule(rule, locale),
-                  id: this.props.editedCf.id,
               },
-              ranges: ranges.map((xc) => this.env.model.getters.getRangeDataFromXc(sheetId, xc)),
+              ranges: ranges.map((xc) => this.model.getters.getRangeDataFromXc(sheetId, xc)),
               sheetId,
           });
           if (result.isSuccessful) {
@@ -85715,71 +85692,18 @@ stores.inject(MyMetaStore, storeInstance);
           if (!newCf.suppressErrors) {
               this.state.errors = reasons;
           }
-          return reasons;
       }
-      getEditedRule(ruleType) {
-          switch (ruleType) {
-              case "CellIsRule":
-                  return this.state.rules.cellIs;
-              case "ColorScaleRule":
-                  return this.state.rules.colorScale;
-              case "IconSetRule":
-                  return this.state.rules.iconSet;
-              case "DataBarRule":
-                  return this.state.rules.dataBar;
-          }
+      get isRangeValid() {
+          return this.state.errors.includes("EmptyRange" /* CommandResult.EmptyRange */);
       }
-      onSave() {
-          const result = this.updateConditionalFormat({});
-          if (result.length === 0) {
-              this.props.onExit();
-          }
+      get errorMessages() {
+          return this.state.errors.map((error) => CfTerms.Errors[error] || CfTerms.Errors.Unexpected);
       }
-      onCancel() {
-          if (this.state.hasEditedCf) {
-              this.props.onCancel();
-          }
-          else {
-              this.props.onExit();
-          }
+      onRangeUpdate(ranges) {
+          this.state.ranges = ranges;
       }
-      getDefaultRules() {
-          return {
-              cellIs: {
-                  type: "CellIsRule",
-                  operator: "isNotEmpty",
-                  values: [],
-                  style: { fillColor: "#b6d7a8" },
-              },
-              colorScale: {
-                  type: "ColorScaleRule",
-                  minimum: { type: "value", color: hexaToInt("EFF7FF") },
-                  midpoint: undefined,
-                  maximum: { type: "value", color: 0x6aa84f },
-              },
-              iconSet: {
-                  type: "IconSetRule",
-                  icons: {
-                      upper: "arrowGood",
-                      middle: "arrowNeutral",
-                      lower: "arrowBad",
-                  },
-                  upperInflectionPoint: {
-                      type: "percentage",
-                      value: "66",
-                      operator: "gt",
-                  },
-                  lowerInflectionPoint: {
-                      type: "percentage",
-                      value: "33",
-                      operator: "gt",
-                  },
-              },
-              dataBar: {
-                  type: "DataBarRule",
-                  color: 0xd9ead3,
-              },
-          };
+      onRangeConfirmed() {
+          this.updateConditionalFormat({ ranges: this.state.ranges });
       }
       changeRuleType(ruleType) {
           if (this.state.currentCFType === ruleType) {
@@ -85789,34 +85713,45 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.currentCFType = ruleType;
           this.updateConditionalFormat({ rule: this.getEditedRule(ruleType), suppressErrors: true });
       }
-      onRangeUpdate(ranges) {
-          this.state.ranges = ranges;
-      }
-      onRangeConfirmed() {
-          this.updateConditionalFormat({ ranges: this.state.ranges });
-      }
-      /*****************************************************************************
-       * Common
-       ****************************************************************************/
-      toggleMenu(menu) {
-          const isSelected = this.state.openedMenu === menu;
-          this.closeMenus();
-          if (!isSelected) {
-              this.state.openedMenu = menu;
+      getEditedRule(ruleType) {
+          switch (ruleType) {
+              case "CellIsRule":
+                  return this.state.rules.cellIs;
+              case "ColorScaleRule":
+                  return this.state.rules.colorScale;
+              case "IconSetRule":
+                  return this.state.rules.iconSet;
+              case "DataBarRule":
+                  return this.state.rules.dataBar;
           }
       }
-      closeMenus() {
-          this.state.openedMenu = undefined;
-      }
       /*****************************************************************************
        * Cell Is Rule
        ****************************************************************************/
-      get isValue1Invalid() {
-          return (this.state.errors.includes("FirstArgMissing" /* CommandResult.FirstArgMissing */) ||
-              this.state.errors.includes("ValueCellIsInvalidFormula" /* CommandResult.ValueCellIsInvalidFormula */));
+      get cfCriterionMenuItems() {
+          return getCriterionMenuItems((type) => this.editOperator(type), availableConditionalFormatOperators);
       }
-      get isValue2Invalid() {
-          return this.state.errors.includes("SecondArgMissing" /* CommandResult.SecondArgMissing */);
+      get selectedCriterionName() {
+          return criterionEvaluatorRegistry.get(this.state.rules.cellIs.operator).name;
+      }
+      get criterionComponent() {
+          return criterionComponentRegistry.get(this.state.rules.cellIs.operator).component;
+      }
+      get genericCriterion() {
+          return {
+              ...this.state.rules.cellIs,
+              type: this.state.rules.cellIs.operator,
+          };
+      }
+      onRuleValuesChanged(criterion) {
+          const newRule = {
+              ...criterion,
+              operator: criterion.type,
+              type: "CellIsRule",
+              style: this.state.rules.cellIs.style,
+          };
+          this.state.rules.cellIs = newRule;
+          this.updateConditionalFormat({ rule: newRule });
       }
       toggleStyle(tool) {
           const style = this.state.rules.cellIs.style;
@@ -85824,18 +85759,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.updateConditionalFormat({ rule: this.state.rules.cellIs });
           this.closeMenus();
       }
-      onKeydown(event) {
-          if (event.key === "F4") {
-              const target = event.target;
-              const update = cycleFixedReference({ start: target.selectionStart ?? 0, end: target.selectionEnd ?? 0 }, target.value, this.env.model.getters.getLocale());
-              if (!update) {
-                  return;
-              }
-              target.value = update.content;
-              target.setSelectionRange(update.selection.start, update.selection.end);
-              target.dispatchEvent(new Event("input"));
-          }
-      }
       setColor(target, color) {
           this.state.rules.cellIs.style[target] = color;
           this.updateConditionalFormat({ rule: this.state.rules.cellIs });
@@ -85849,62 +85772,10 @@ stores.inject(MyMetaStore, storeInstance);
           this.updateConditionalFormat({ rule: this.state.rules.cellIs, suppressErrors: true });
           this.closeMenus();
       }
-      get cfCriterionMenuItems() {
-          return getCriterionMenuItems((type) => this.editOperator(type), availableConditionalFormatOperators);
-      }
-      get selectedCriterionName() {
-          return criterionEvaluatorRegistry.get(this.state.rules.cellIs.operator).name;
-      }
-      get criterionComponent() {
-          return criterionComponentRegistry.get(this.state.rules.cellIs.operator).component;
-      }
-      get genericCriterion() {
-          return {
-              type: this.state.rules.cellIs.operator,
-              values: this.state.rules.cellIs.values,
-              dateValue: this.state.rules.cellIs.dateValue,
-          };
-      }
-      onRuleValuesChanged(rule) {
-          this.state.rules.cellIs.values = rule.values;
-          this.state.rules.cellIs.dateValue = rule.dateValue;
-          this.updateConditionalFormat({
-              rule: { ...this.state.rules.cellIs, values: rule.values, dateValue: rule.dateValue },
-          });
-      }
       /*****************************************************************************
        * Color Scale Rule
        ****************************************************************************/
-      isValueInvalid(threshold) {
-          switch (threshold) {
-              case "minimum":
-                  return (this.state.errors.includes("MinInvalidFormula" /* CommandResult.MinInvalidFormula */) ||
-                      this.state.errors.includes("MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */) ||
-                      this.state.errors.includes("MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */) ||
-                      this.state.errors.includes("MinNaN" /* CommandResult.MinNaN */));
-              case "midpoint":
-                  return (this.state.errors.includes("MidInvalidFormula" /* CommandResult.MidInvalidFormula */) ||
-                      this.state.errors.includes("MidNaN" /* CommandResult.MidNaN */) ||
-                      this.state.errors.includes("MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */));
-              case "maximum":
-                  return (this.state.errors.includes("MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */) ||
-                      this.state.errors.includes("MaxNaN" /* CommandResult.MaxNaN */));
-              default:
-                  return false;
-          }
-      }
-      setColorScaleColor(target, color) {
-          if (!isColorValid(color)) {
-              return;
-          }
-          const point = this.state.rules.colorScale[target];
-          if (point) {
-              point.color = colorToNumber(color);
-          }
-          this.updateConditionalFormat({ rule: this.state.rules.colorScale });
-          this.closeMenus();
-      }
-      getColorScalePreviewStyle() {
+      get previewGradient() {
           const rule = this.state.rules.colorScale;
           const minColor = colorNumberToHex(rule.minimum.color);
           const midColor = colorNumberToHex(rule.midpoint?.color || DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
@@ -85918,13 +85789,7 @@ stores.inject(MyMetaStore, storeInstance);
               color: "#000",
           });
       }
-      getThresholdColor(threshold) {
-          return threshold
-              ? colorNumberToHex(threshold.color)
-              : colorNumberToHex(DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
-      }
-      onMidpointChange(ev) {
-          const type = ev.target.value;
+      onMidpointChange(type) {
           const rule = this.state.rules.colorScale;
           if (type === "none") {
               rule.midpoint = undefined;
@@ -85947,23 +85812,20 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.rules.colorScale[threshold].value = value;
           this.updateConditionalFormat({ rule: this.state.rules.colorScale });
       }
+      setColorScaleColor(target, color) {
+          if (!isColorValid(color)) {
+              return;
+          }
+          const point = this.state.rules.colorScale[target];
+          if (point) {
+              point.color = colorToNumber(color);
+          }
+          this.updateConditionalFormat({ rule: this.state.rules.colorScale });
+          this.closeMenus();
+      }
       /*****************************************************************************
        * Icon Set
        ****************************************************************************/
-      isInflectionPointInvalid(inflectionPoint) {
-          switch (inflectionPoint) {
-              case "lowerInflectionPoint":
-                  return (this.state.errors.includes("ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */) ||
-                      this.state.errors.includes("ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */) ||
-                      this.state.errors.includes("LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */));
-              case "upperInflectionPoint":
-                  return (this.state.errors.includes("ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */) ||
-                      this.state.errors.includes("ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */) ||
-                      this.state.errors.includes("LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */));
-              default:
-                  return true;
-          }
-      }
       reverseIcons() {
           const icons = this.state.rules.iconSet.icons;
           const upper = icons.upper;
@@ -85990,12 +85852,176 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.rules.iconSet[inflectionPoint].value = value;
           this.updateConditionalFormat({ rule: this.state.rules.iconSet });
       }
-      setInflectionType(inflectionPoint, type, ev) {
+      setInflectionType(inflectionPoint, type) {
           this.state.rules.iconSet[inflectionPoint].type = type;
           this.updateConditionalFormat({ rule: this.state.rules.iconSet, suppressErrors: true });
       }
+      /*****************************************************************************
+       * DataBar
+       ****************************************************************************/
+      get rangeValues() {
+          return [this.state.rules.dataBar.rangeValues || ""];
+      }
+      updateDataBarColor(color) {
+          if (!isColorValid(color)) {
+              return;
+          }
+          this.state.rules.dataBar.color = Number.parseInt(color.slice(1), 16);
+          this.updateConditionalFormat({ rule: this.state.rules.dataBar });
+      }
+      onDataBarRangeUpdate(ranges) {
+          this.state.rules.dataBar.rangeValues = ranges[0];
+      }
+      onDataBarRangeChange() {
+          this.updateConditionalFormat({ rule: this.state.rules.dataBar });
+      }
+      /*****************************************************************************
+       * Common
+       ****************************************************************************/
+      toggleMenu(menu) {
+          const isSelected = this.state.openedMenu === menu;
+          this.closeMenus();
+          if (!isSelected) {
+              this.state.openedMenu = menu;
+          }
+      }
+      closeMenus() {
+          this.state.openedMenu = undefined;
+      }
+      getDefaultRules() {
+          return {
+              cellIs: {
+                  type: "CellIsRule",
+                  operator: "isNotEmpty",
+                  values: [],
+                  style: { fillColor: "#b6d7a8" },
+              },
+              colorScale: {
+                  type: "ColorScaleRule",
+                  minimum: { type: "value", color: hexaToInt("EFF7FF") },
+                  midpoint: undefined,
+                  maximum: { type: "value", color: 0x6aa84f },
+              },
+              iconSet: {
+                  type: "IconSetRule",
+                  icons: {
+                      upper: "arrowGood",
+                      middle: "arrowNeutral",
+                      lower: "arrowBad",
+                  },
+                  upperInflectionPoint: {
+                      type: "percentage",
+                      value: "66",
+                      operator: "gt",
+                  },
+                  lowerInflectionPoint: {
+                      type: "percentage",
+                      value: "33",
+                      operator: "gt",
+                  },
+              },
+              dataBar: {
+                  type: "DataBarRule",
+                  color: 0xd9ead3,
+              },
+          };
+      }
+  }
+
+  class ConditionalFormattingEditor extends owl.Component {
+      static template = "o-spreadsheet-ConditionalFormattingEditor";
+      static components = {
+          SelectionInput,
+          IconPicker,
+          ColorPickerWidget,
+          Section,
+          RoundColorPicker,
+          StandaloneComposer,
+          BadgeSelection,
+          ValidationMessages,
+          SelectMenu,
+      };
+      static props = { cf: Object, isNewCf: Boolean, onCloseSidePanel: Function };
+      getTextDecoration = getTextDecoration;
+      colorNumberToHex = colorNumberToHex;
+      activeSheetId;
+      store;
+      setup() {
+          this.activeSheetId = this.env.model.getters.getActiveSheetId();
+          this.store = useLocalStore(ConditionalFormattingEditorStore, deepCopy(this.props.cf), this.props.isNewCf);
+          owl.useEffect((sheetId, isCfRemoved) => {
+              if (this.activeSheetId !== sheetId || isCfRemoved) {
+                  this.env.replaceSidePanel("ConditionalFormatting", `ConditionalFormattingEditor_${this.props.cf.id}`);
+              }
+          }, () => [this.env.model.getters.getActiveSheetId(), this.isEditedCfRemoved]);
+          owl.useExternalListener(window, "click", () => this.store.closeMenus());
+      }
+      get isEditedCfRemoved() {
+          return !Boolean(this.env.model.getters
+              .getConditionalFormats(this.activeSheetId)
+              .find((cf) => cf.id === this.props.cf.id));
+      }
+      get cfTypesValues() {
+          return [
+              { value: "CellIsRule", label: _t("Single color") },
+              { value: "ColorScaleRule", label: _t("Color scale") },
+              { value: "IconSetRule", label: _t("Icon set") },
+              { value: "DataBarRule", label: _t("Data bar") },
+          ];
+      }
+      onSave() {
+          this.store.updateConditionalFormat({});
+          const isSuccessful = this.store.state.errors.length === 0;
+          if (isSuccessful) {
+              this.env.replaceSidePanel("ConditionalFormatting", `ConditionalFormattingEditor_${this.props.cf.id}`);
+          }
+      }
+      onCancel() {
+          if (this.store.state.hasEditedCf) {
+              if (this.props.isNewCf) {
+                  this.env.model.dispatch("REMOVE_CONDITIONAL_FORMAT", {
+                      sheetId: this.activeSheetId,
+                      id: this.props.cf.id,
+                  });
+              }
+              else {
+                  this.env.model.dispatch("ADD_CONDITIONAL_FORMAT", {
+                      cf: this.props.cf,
+                      ranges: this.props.cf.ranges.map((range) => this.env.model.getters.getRangeDataFromXc(this.activeSheetId, range)),
+                      sheetId: this.activeSheetId,
+                  });
+              }
+          }
+          this.env.replaceSidePanel("ConditionalFormatting", `ConditionalFormattingEditor_${this.props.cf.id}`);
+      }
+      /*****************************************************************************
+       * Color Scale Rule
+       ****************************************************************************/
+      getThresholdColor(threshold) {
+          return threshold
+              ? colorNumberToHex(threshold.color)
+              : colorNumberToHex(DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
+      }
+      isValueInvalid(threshold) {
+          const errors = this.store.state.errors;
+          switch (threshold) {
+              case "minimum":
+                  return (errors.includes("MinInvalidFormula" /* CommandResult.MinInvalidFormula */) ||
+                      errors.includes("MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */) ||
+                      errors.includes("MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */) ||
+                      errors.includes("MinNaN" /* CommandResult.MinNaN */));
+              case "midpoint":
+                  return (errors.includes("MidInvalidFormula" /* CommandResult.MidInvalidFormula */) ||
+                      errors.includes("MidNaN" /* CommandResult.MidNaN */) ||
+                      errors.includes("MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */));
+              case "maximum":
+                  return (errors.includes("MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */) || errors.includes("MaxNaN" /* CommandResult.MaxNaN */));
+              default:
+                  return false;
+          }
+      }
       getColorScaleComposerProps(thresholdType) {
-          const threshold = this.state.rules.colorScale[thresholdType];
+          const threshold = this.store.state.rules.colorScale[thresholdType];
           if (!threshold) {
               throw new Error("Threshold not found");
           }
@@ -86003,103 +86029,153 @@ stores.inject(MyMetaStore, storeInstance);
           return {
               onConfirm: (str) => {
                   threshold.value = str;
-                  this.updateConditionalFormat({ rule: this.state.rules.colorScale });
+                  this.store.updateConditionalFormat({ rule: this.store.state.rules.colorScale });
               },
               composerContent: threshold.value || "",
               placeholder: _t("Formula"),
               defaultStatic: true,
               invalid: isInvalid,
               class: "o-sidePanel-composer",
-              defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
+              defaultRangeSheetId: this.activeSheetId,
           };
       }
+      /*****************************************************************************
+       * Icon Set
+       ****************************************************************************/
+      isInflectionPointInvalid(inflectionPoint) {
+          const errors = this.store.state.errors;
+          switch (inflectionPoint) {
+              case "lowerInflectionPoint":
+                  return (errors.includes("ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */) ||
+                      errors.includes("ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */) ||
+                      errors.includes("LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */));
+              case "upperInflectionPoint":
+                  return (errors.includes("ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */) ||
+                      errors.includes("ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */) ||
+                      errors.includes("LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */));
+              default:
+                  return true;
+          }
+      }
       getColorIconSetComposerProps(inflectionPoint) {
-          const inflection = this.state.rules.iconSet[inflectionPoint];
+          const inflection = this.store.state.rules.iconSet[inflectionPoint];
           const isInvalid = this.isInflectionPointInvalid(inflectionPoint);
           return {
               onConfirm: (str) => {
                   inflection.value = str;
-                  this.updateConditionalFormat({ rule: this.state.rules.iconSet });
+                  this.store.updateConditionalFormat({ rule: this.store.state.rules.iconSet });
               },
               composerContent: inflection.value || "",
               placeholder: _t("Formula"),
               defaultStatic: true,
               invalid: isInvalid,
               class: "o-sidePanel-composer",
-              defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
+              defaultRangeSheetId: this.activeSheetId,
           };
       }
-      /*****************************************************************************
-       * DataBar
-       ****************************************************************************/
-      getRangeValues() {
-          return [this.state.rules.dataBar.rangeValues || ""];
+  }
+
+  function useHighlightsOnHover(ref, highlightProvider) {
+      const hoverState = useHoveredElement(ref);
+      useHighlights({
+          get highlights() {
+              return hoverState.hovered ? highlightProvider.highlights : [];
+          },
+      });
+  }
+  function useHighlights(highlightProvider) {
+      const stores = useStoreProvider();
+      const store = useLocalStore(HighlightStore);
+      owl.onMounted(() => {
+          store.register(highlightProvider);
+      });
+      let currentHighlights = highlightProvider.highlights;
+      owl.useEffect((highlights) => {
+          if (!deepEquals(highlights, currentHighlights)) {
+              currentHighlights = highlights;
+              stores.trigger("store-updated");
+          }
+      }, () => [highlightProvider.highlights]);
+  }
+
+  class ConditionalFormatPreview extends owl.Component {
+      static template = "o-spreadsheet-ConditionalFormatPreview";
+      static props = {
+          conditionalFormat: Object,
+          onMouseDown: Function,
+          class: String,
+      };
+      icons = ICONS;
+      ref = owl.useRef("cfPreview");
+      setup() {
+          useHighlightsOnHover(this.ref, this);
       }
-      updateDataBarColor(color) {
-          if (!isColorValid(color)) {
-              return;
+      get previewImageStyle() {
+          const rule = this.props.conditionalFormat.rule;
+          if (rule.type === "CellIsRule") {
+              return cssPropertiesToCss(cellStyleToCss(rule.style));
           }
-          this.state.rules.dataBar.color = Number.parseInt(color.slice(1), 16);
-          this.updateConditionalFormat({ rule: this.state.rules.dataBar });
+          else if (rule.type === "ColorScaleRule") {
+              const minColor = colorNumberToHex(rule.minimum.color);
+              const midColor = rule.midpoint ? colorNumberToHex(rule.midpoint.color) : null;
+              const maxColor = colorNumberToHex(rule.maximum.color);
+              const baseString = "background-image: linear-gradient(to right, ";
+              return midColor
+                  ? baseString + minColor + ", " + midColor + ", " + maxColor + ")"
+                  : baseString + minColor + ", " + maxColor + ")";
+          }
+          else if (rule.type === "DataBarRule") {
+              const barColor = colorNumberToHex(rule.color);
+              const gradient = `background-image: linear-gradient(to right, ${barColor} 50%, white 50%)`;
+              return `${gradient}; color: ${TEXT_BODY};`;
+          }
+          return "";
       }
-      onDataBarRangeUpdate(ranges) {
-          this.state.rules.dataBar.rangeValues = ranges[0];
+      get description() {
+          const cf = this.props.conditionalFormat;
+          switch (cf.rule.type) {
+              case "CellIsRule":
+                  return criterionEvaluatorRegistry
+                      .get(cf.rule.operator)
+                      .getPreview({ ...cf.rule, type: cf.rule.operator }, this.env.model.getters);
+              case "ColorScaleRule":
+                  return CfTerms.ColorScale;
+              case "IconSetRule":
+                  return CfTerms.IconSet;
+              case "DataBarRule":
+                  return CfTerms.DataBar;
+          }
       }
-      onDataBarRangeChange() {
-          this.updateConditionalFormat({ rule: this.state.rules.dataBar });
+      get highlights() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          return this.props.conditionalFormat.ranges.map((range) => ({
+              range: this.env.model.getters.getRangeFromSheetXC(sheetId, range),
+              color: HIGHLIGHT_COLOR,
+              fillAlpha: 0.06,
+          }));
+      }
+      editConditionalFormat() {
+          this.env.replaceSidePanel("ConditionalFormattingEditor", "ConditionalFormatting", {
+              cf: this.props.conditionalFormat,
+              isNewCf: false,
+          });
+      }
+      deleteConditionalFormat() {
+          this.env.model.dispatch("REMOVE_CONDITIONAL_FORMAT", {
+              id: this.props.conditionalFormat.id,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+          });
       }
   }
 
-  class ConditionalFormattingPanel extends owl.Component {
-      static template = "o-spreadsheet-ConditionalFormattingPanel";
+  class ConditionalFormatPreviewList extends owl.Component {
+      static template = "o-spreadsheet-ConditionalFormatPreviewList";
       static props = {
-          selection: { type: Object, optional: true },
           onCloseSidePanel: Function,
       };
-      static components = {
-          ConditionalFormatPreviewList,
-          ConditionalFormattingEditor,
-          Section,
-      };
-      activeSheetId;
-      originalEditedCf = undefined;
-      state = owl.useState({
-          mode: "list",
-      });
-      setup() {
-          this.activeSheetId = this.env.model.getters.getActiveSheetId();
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const rules = this.env.model.getters.getRulesSelection(sheetId, this.props.selection || []);
-          if (rules.length === 1) {
-              const cf = this.conditionalFormats.find((c) => c.id === rules[0]);
-              if (cf) {
-                  this.editConditionalFormat(cf);
-              }
-          }
-          owl.onWillUpdateProps((nextProps) => {
-              const newActiveSheetId = this.env.model.getters.getActiveSheetId();
-              if (newActiveSheetId !== this.activeSheetId) {
-                  this.activeSheetId = newActiveSheetId;
-                  this.switchToList();
-              }
-              else if (nextProps.selection !== this.props.selection) {
-                  const sheetId = this.env.model.getters.getActiveSheetId();
-                  const rules = this.env.model.getters.getRulesSelection(sheetId, nextProps.selection || []);
-                  if (rules.length === 1) {
-                      const cf = this.conditionalFormats.find((c) => c.id === rules[0]);
-                      if (cf) {
-                          this.editConditionalFormat(cf);
-                      }
-                  }
-                  else {
-                      this.switchToList();
-                  }
-              }
-              else if (!this.editedCF) {
-                  this.switchToList();
-              }
-          });
-      }
+      static components = { ConditionalFormatPreview };
+      dragAndDrop = useDragAndDropListItems();
+      cfListRef = owl.useRef("cfList");
       get conditionalFormats() {
           const cfs = this.env.model.getters.getConditionalFormats(this.env.model.getters.getActiveSheetId());
           return cfs.map((cf) => ({
@@ -86107,66 +86183,129 @@ stores.inject(MyMetaStore, storeInstance);
               rule: localizeCFRule(cf.rule, this.env.model.getters.getLocale()),
           }));
       }
-      switchToList() {
-          this.state.mode = "list";
-          this.state.editedCfId = undefined;
-          this.originalEditedCf = undefined;
+      getPreviewDivStyle(cf) {
+          return this.dragAndDrop.itemsStyle[cf.id] || "";
+      }
+      onPreviewMouseDown(cf, event) {
+          if (event.button !== 0)
+              return;
+          const previewRects = Array.from(this.cfListRef.el.children).map((previewEl) => getBoundingRectAsPOJO(previewEl));
+          const items = this.conditionalFormats.map((cf, index) => ({
+              id: cf.id,
+              size: previewRects[index].height,
+              position: previewRects[index].y,
+          }));
+          this.dragAndDrop.start("vertical", {
+              draggedItemId: cf.id,
+              initialMousePosition: event.clientY,
+              items: items,
+              scrollableContainerEl: this.cfListRef.el,
+              onDragEnd: (cfId, finalIndex) => this.onDragEnd(cfId, finalIndex),
+          });
       }
-      addConditionalFormat() {
-          const cfId = this.env.model.uuidGenerator.smallUuid();
+      onAddConditionalFormat() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const zones = this.env.model.getters.getSelectedZones();
+          const cf = {
+              id: this.env.model.uuidGenerator.smallUuid(),
+              rule: {
+                  type: "CellIsRule",
+                  operator: "isNotEmpty",
+                  style: { fillColor: "#b6d7a8" },
+                  values: [],
+              },
+          };
           this.env.model.dispatch("ADD_CONDITIONAL_FORMAT", {
-              sheetId: this.activeSheetId,
-              ranges: this.env.model.getters
-                  .getSelectedZones()
-                  .map((zone) => this.env.model.getters.getRangeDataFromZone(this.activeSheetId, zone)),
+              cf,
+              ranges: zones.map((zone) => this.env.model.getters.getRangeDataFromZone(sheetId, zone)),
+              sheetId,
+          });
+          return this.env.replaceSidePanel("ConditionalFormattingEditor", "ConditionalFormatting", {
               cf: {
-                  id: cfId,
-                  rule: {
-                      type: "CellIsRule",
-                      operator: "isNotEmpty",
-                      style: { fillColor: "#b6d7a8" },
-                      values: [],
-                  },
+                  ...cf,
+                  ranges: zones.map((zone) => zoneToXc(this.env.model.getters.getUnboundedZone(sheetId, zone))),
               },
+              isNewCf: true,
           });
-          this.state.editedCfId = cfId;
-          this.state.mode = "edit";
-          this.originalEditedCf = undefined;
       }
-      editConditionalFormat(cf) {
-          this.state.mode = "edit";
-          this.state.editedCfId = cf.id;
-          this.originalEditedCf = cf;
-      }
-      cancelEdition() {
-          if (this.originalEditedCf) {
-              this.env.model.dispatch("ADD_CONDITIONAL_FORMAT", {
-                  sheetId: this.activeSheetId,
-                  ranges: this.originalEditedCf.ranges.map((range) => this.env.model.getters.getRangeDataFromXc(this.activeSheetId, range)),
-                  cf: this.originalEditedCf,
-              });
-          }
-          else if (this.state.editedCfId) {
-              this.env.model.dispatch("REMOVE_CONDITIONAL_FORMAT", {
-                  sheetId: this.activeSheetId,
-                  id: this.state.editedCfId,
+      onDragEnd(cfId, finalIndex) {
+          const originalIndex = this.conditionalFormats.findIndex((sheet) => sheet.id === cfId);
+          const delta = originalIndex - finalIndex;
+          if (delta !== 0) {
+              this.env.model.dispatch("CHANGE_CONDITIONAL_FORMAT_PRIORITY", {
+                  cfId,
+                  delta,
+                  sheetId: this.env.model.getters.getActiveSheetId(),
               });
           }
-          this.switchToList();
       }
-      get editedCF() {
-          return this.conditionalFormats.find((cf) => cf.id === this.state.editedCfId);
+  }
+
+  class DataValidationPreview extends owl.Component {
+      static template = "o-spreadsheet-DataValidationPreview";
+      static props = {
+          rule: Object,
+      };
+      ref = owl.useRef("dvPreview");
+      setup() {
+          useHighlightsOnHover(this.ref, this);
+      }
+      onPreviewClick() {
+          this.env.replaceSidePanel("DataValidationEditor", "DataValidation", {
+              ruleId: this.props.rule.id,
+          });
+      }
+      deleteDataValidation() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
+      }
+      get highlights() {
+          return this.props.rule.ranges.map((range) => ({
+              range,
+              color: HIGHLIGHT_COLOR,
+              fillAlpha: 0.06,
+          }));
+      }
+      get rangesString() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          return this.props.rule.ranges
+              .map((range) => this.env.model.getters.getRangeString(range, sheetId))
+              .join(", ");
+      }
+      get descriptionString() {
+          return criterionEvaluatorRegistry
+              .get(this.props.rule.criterion.type)
+              .getPreview(this.props.rule.criterion, this.env.model.getters);
+      }
+  }
+
+  class DataValidationPanel extends owl.Component {
+      static template = "o-spreadsheet-DataValidationPanel";
+      static props = {
+          onCloseSidePanel: Function,
+      };
+      static components = { DataValidationPreview };
+      addDataValidationRule() {
+          this.env.replaceSidePanel("DataValidationEditor", "DataValidation", {
+              ruleId: this.env.model.uuidGenerator.smallUuid(),
+          });
+      }
+      localizeDVRule(rule) {
+          if (!rule)
+              return rule;
+          const locale = this.env.model.getters.getLocale();
+          return localizeDataValidationRule(rule, locale);
+      }
+      get validationRules() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          return this.env.model.getters.getDataValidationRules(sheetId);
       }
   }
 
   class DataValidationEditor extends owl.Component {
       static template = "o-spreadsheet-DataValidationEditor";
       static components = { SelectionInput, SelectMenu, Section, ValidationMessages };
-      static props = {
-          rule: { type: Object, optional: true },
-          onExit: Function,
-          onCloseSidePanel: { type: Function, optional: true },
-      };
+      static props = { ruleId: String, onCloseSidePanel: Function };
       state = owl.useState({
           rule: this.defaultDataValidationRule,
           errors: [],
@@ -86175,12 +86314,13 @@ stores.inject(MyMetaStore, storeInstance);
       editingSheetId;
       setup() {
           this.editingSheetId = this.env.model.getters.getActiveSheetId();
-          if (this.props.rule) {
+          const rule = this.env.model.getters.getDataValidationRule(this.editingSheetId, this.props.ruleId);
+          if (rule) {
+              const locale = this.env.model.getters.getLocale();
               this.state.rule = {
-                  ...this.props.rule,
-                  ranges: this.props.rule.ranges.map((range) => this.env.model.getters.getRangeString(range, this.editingSheetId)),
+                  ...localizeDataValidationRule(rule, locale),
+                  ranges: rule.ranges.map((range) => this.env.model.getters.getRangeString(range, this.editingSheetId)),
               };
-              this.state.rule.criterion.type = this.props.rule.criterion.type;
           }
       }
       onCriterionTypeChanged(type) {
@@ -86197,16 +86337,16 @@ stores.inject(MyMetaStore, storeInstance);
           const isBlocking = ev.target.value;
           this.state.rule.isBlocking = isBlocking === "true";
       }
+      onCancel() {
+          this.env.replaceSidePanel("DataValidation", `DataValidationEditor_${this.props.ruleId}`);
+      }
       onSave() {
-          if (this.state.rule) {
-              const result = this.env.model.dispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload);
-              if (!result.isSuccessful) {
-                  this.state.errors = result.reasons;
-              }
-              else {
-                  this.props.onExit();
-              }
+          const result = this.env.model.dispatch("ADD_DATA_VALIDATION_RULE", this.dispatchPayload);
+          if (!result.isSuccessful) {
+              this.state.errors = result.reasons;
+              return;
           }
+          this.env.replaceSidePanel("DataValidation", `DataValidationEditor_${this.props.ruleId}`);
       }
       get dispatchPayload() {
           const rule = { ...this.state.rule, ranges: undefined };
@@ -86238,7 +86378,7 @@ stores.inject(MyMetaStore, storeInstance);
               .getSelectedZones()
               .map((zone) => zoneToXc(this.env.model.getters.getUnboundedZone(sheetId, zone)));
           return {
-              id: this.env.model.uuidGenerator.smallUuid(),
+              id: this.props.ruleId,
               criterion: { type: "containsText", values: [""] },
               ranges,
           };
@@ -86251,75 +86391,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class DataValidationPreview extends owl.Component {
-      static template = "o-spreadsheet-DataValidationPreview";
-      static props = {
-          onClick: Function,
-          rule: Object,
-      };
-      ref = owl.useRef("dvPreview");
-      setup() {
-          useHighlightsOnHover(this.ref, this);
-      }
-      deleteDataValidation() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
-      }
-      get highlights() {
-          return this.props.rule.ranges.map((range) => ({
-              range,
-              color: HIGHLIGHT_COLOR,
-              fillAlpha: 0.06,
-          }));
-      }
-      get rangesString() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          return this.props.rule.ranges
-              .map((range) => this.env.model.getters.getRangeString(range, sheetId))
-              .join(", ");
-      }
-      get descriptionString() {
-          return criterionEvaluatorRegistry
-              .get(this.props.rule.criterion.type)
-              .getPreview(this.props.rule.criterion, this.env.model.getters);
-      }
-  }
-
-  class DataValidationPanel extends owl.Component {
-      static template = "o-spreadsheet-DataValidationPanel";
-      static props = {
-          onCloseSidePanel: Function,
-      };
-      static components = { DataValidationPreview, DataValidationEditor };
-      state = owl.useState({ mode: "list", activeRule: undefined });
-      onPreviewClick(id) {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          const rule = this.env.model.getters.getDataValidationRule(sheetId, id);
-          if (rule) {
-              this.state.mode = "edit";
-              this.state.activeRule = rule;
-          }
-      }
-      addDataValidationRule() {
-          this.state.mode = "edit";
-          this.state.activeRule = undefined;
-      }
-      onExitEditMode() {
-          this.state.mode = "list";
-          this.state.activeRule = undefined;
-      }
-      localizeDVRule(rule) {
-          if (!rule)
-              return rule;
-          const locale = this.env.model.getters.getLocale();
-          return localizeDataValidationRule(rule, locale);
-      }
-      get validationRules() {
-          const sheetId = this.env.model.getters.getActiveSheetId();
-          return this.env.model.getters.getDataValidationRules(sheetId);
-      }
-  }
-
   const FIND_AND_REPLACE_HIGHLIGHT_COLOR = "#8B008B";
   var Direction;
   (function (Direction) {
@@ -89197,7 +89268,18 @@ stores.inject(MyMetaStore, storeInstance);
   const sidePanelRegistry = new Registry$1();
   sidePanelRegistry.add("ConditionalFormatting", {
       title: _t("Conditional formatting"),
-      Body: ConditionalFormattingPanel,
+      Body: ConditionalFormatPreviewList,
+  });
+  sidePanelRegistry.add("ConditionalFormattingEditor", {
+      title: _t("Conditional formatting"),
+      Body: ConditionalFormattingEditor,
+      computeState: (getters, props) => {
+          return {
+              isOpen: true,
+              props,
+              key: `ConditionalFormattingEditor_${props.cf.id}`,
+          };
+      },
   });
   sidePanelRegistry.add("ChartPanel", {
       title: _t("Chart"),
@@ -89234,6 +89316,13 @@ stores.inject(MyMetaStore, storeInstance);
   sidePanelRegistry.add("DataValidationEditor", {
       title: _t("Data validation"),
       Body: DataValidationEditor,
+      computeState: (getters, props) => {
+          return {
+              isOpen: true,
+              props,
+              key: `DataValidationEditor_${props.ruleId}`,
+          };
+      },
   });
   sidePanelRegistry.add("MoreFormats", {
       title: _t("More formats"),
@@ -97985,9 +98074,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "19.1.2";
-  __info__.date = "2026-01-07T16:21:36.757Z";
-  __info__.hash = "febc3e9";
+  __info__.version = "19.2.0-alpha.2";
+  __info__.date = "2026-01-07T16:21:35.251Z";
+  __info__.hash = "ac2fa3e";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);