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

package/dist/o_spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -10482,6 +10482,7 @@ function changeCFRuleLocale(rule, changeContentLocale) {
                 case "dateIsAfter":
                 case "dateIsOnOrAfter":
                 case "dateIsOnOrBefore":
+                case "top10":
                     rule.values = rule.values.map((v) => changeContentLocale(v));
                     return rule;
                 case "beginsWithText":
@@ -14631,6 +14632,7 @@ const DVTerms = {
         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."),
@@ -34019,6 +34021,7 @@ const CF_OPERATOR_TYPE_CONVERSION_MAP = {
     greaterThanOrEqual: "isGreaterOrEqualTo",
     lessThan: "isLessThan",
     lessThanOrEqual: "isLessOrEqualTo",
+    top10: "top10",
 };
 /** Conversion map CF types in XLSX <=> Cf types in o_spreadsheet */
 const CF_TYPE_CONVERSION_MAP = {
@@ -34559,6 +34562,7 @@ function convertConditionalFormats(xlsxCfs, dxfs, warningManager) {
         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;
@@ -34567,7 +34571,6 @@ function convertConditionalFormats(xlsxCfs, dxfs, warningManager) {
             case "containsErrors":
             case "notContainsErrors":
             case "duplicateValues":
-            case "top10":
             case "uniqueValues":
             case "timePeriod":
                 // Not supported
@@ -34618,6 +34621,18 @@ function convertConditionalFormats(xlsxCfs, dxfs, warningManager) {
                     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({
@@ -34628,6 +34643,7 @@ function convertConditionalFormats(xlsxCfs, dxfs, warningManager) {
                     type: "CellIsRule",
                     operator: operator,
                     values: values,
+                    ...cfAdditionalProperties,
                     style: convertStyle({ fontStyle: dxfs[rule.dxfId].font, fillStyle: dxfs[rule.dxfId].fill }, warningManager),
                 },
             });
@@ -34846,6 +34862,8 @@ function convertOperator(operator) {
             return "greaterThanOrEqual";
         case "dateIsOnOrBefore":
             return "lessThanOrEqual";
+        case "top10":
+            return "top10";
     }
 }
 // -------------------------------------
@@ -40629,15 +40647,20 @@ criterionEvaluatorRegistry.add("isValueInList", {
     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),
@@ -40714,6 +40737,67 @@ criterionEvaluatorRegistry.add("isNotEmpty", {
     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
@@ -40735,6 +40819,10 @@ function checkValueIsNumber(value) {
     const valueAsNumber = tryToNumber(value, DEFAULT_LOCALE);
     return valueAsNumber !== undefined;
 }
+function checkValueIsPositiveNumber(value) {
+    const valueAsNumber = tryToNumber(value, DEFAULT_LOCALE);
+    return valueAsNumber !== undefined && valueAsNumber > 0;
+}
 
 // -----------------------------------------------------------------------------
 // Constants
@@ -51109,6 +51197,10 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
                     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++) {
@@ -51121,7 +51213,7 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
                                     }
                                     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
@@ -51284,7 +51376,7 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
             }
         }
     }
-    getRuleResultForTarget(target, rule) {
+    getRuleResultForTarget(target, rule, preComputedCriterion) {
         const cell = this.getters.getEvaluatedCell(target);
         if (cell.type === CellValueType.error) {
             return false;
@@ -51301,11 +51393,12 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
             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);
     }
 }
 
@@ -51322,17 +51415,20 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         "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;
         }
     }
@@ -51475,7 +51571,15 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
             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);
@@ -57170,6 +57274,7 @@ class FilterEvaluationPlugin extends UIPlugin {
                 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);
@@ -57187,7 +57292,7 @@ class FilterEvaluationPlugin extends UIPlugin {
                 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);
                     }
                 }
@@ -61314,6 +61419,8 @@ function cellRuleFormula(ranges, rule) {
                 case undefined:
                     throw new Error("dateValue should be defined");
             }
+        case "top10":
+            return [];
     }
 }
 function cellRuleTypeAttributes(rule) {
@@ -61346,6 +61453,14 @@ function cellRuleTypeAttributes(rule) {
         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) {
@@ -64928,13 +65043,16 @@ function downloadFile(dataUrl, fileName) {
     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() {
@@ -65063,6 +65181,7 @@ const cfOperators = [
     "dateIsAfter",
     "dateIsOnOrBefore",
     "dateIsOnOrAfter",
+    "top10",
 ];
 const availableConditionalFormatOperators = new Set(cfOperators);
 
@@ -73034,6 +73153,26 @@ class SingleInputCriterionForm extends CriterionForm {
     }
 }
 
+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.
  *
@@ -74203,6 +74342,7 @@ const criterionCategoriesSequences = {
     text: 20,
     number: 30,
     date: 40,
+    relative: 45,
     misc: 50,
 };
 const criterionComponentRegistry = new Registry$1();
@@ -74380,6 +74520,12 @@ criterionComponentRegistry.add("isNotEmpty", {
     category: "misc",
     sequence: 6,
 });
+criterionComponentRegistry.add("top10", {
+    type: "top10",
+    component: Top10CriterionForm,
+    category: "relative",
+    sequence: 7,
+});
 function getCriterionMenuItems(callback, availableTypes) {
     const items = criterionComponentRegistry
         .getAll()
@@ -76010,7 +76156,17 @@ const FORMAT_PERCENT_ACTION = (env) => setFormatter(env, "0.00%");
 // 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();
@@ -77008,12 +77164,12 @@ const insertDropdown = {
         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: [],
@@ -77021,16 +77177,11 @@ const insertDropdown = {
                 },
             },
         });
-        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",
@@ -85482,210 +85633,36 @@ class IconPicker extends Component {
     }
 }
 
-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);
-    onMounted(() => {
-        store.register(highlightProvider);
-    });
-    let currentHighlights = highlightProvider.highlights;
-    useEffect((highlights) => {
-        if (!deepEquals(highlights, currentHighlights)) {
-            currentHighlights = highlights;
-            stores.trigger("store-updated");
-        }
-    }, () => [highlightProvider.highlights]);
-}
-
-class ConditionalFormatPreview extends Component {
-    static template = "o-spreadsheet-ConditionalFormatPreview";
-    icons = ICONS;
-    ref = 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 Component {
-    static template = "o-spreadsheet-ConditionalFormatPreviewList";
-    static props = {
-        conditionalFormats: Array,
-        onPreviewClick: Function,
-        onAddConditionalFormat: Function,
-    };
-    static components = { ConditionalFormatPreview };
-    icons = ICONS;
-    dragAndDrop = useDragAndDropListItems();
-    cfListRef = useRef("cfList");
-    setup() {
-        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 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 = 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;
         }
-        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;
@@ -85694,17 +85671,17 @@ class ConditionalFormattingEditor extends Component {
             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) {
@@ -85714,71 +85691,18 @@ class ConditionalFormattingEditor extends Component {
         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) {
@@ -85788,34 +85712,45 @@ class ConditionalFormattingEditor extends Component {
         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;
@@ -85823,18 +85758,6 @@ class ConditionalFormattingEditor extends Component {
         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 });
@@ -85848,62 +85771,10 @@ class ConditionalFormattingEditor extends Component {
         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);
@@ -85917,13 +85788,7 @@ class ConditionalFormattingEditor extends Component {
             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;
@@ -85946,23 +85811,20 @@ class ConditionalFormattingEditor extends Component {
         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;
@@ -85989,12 +85851,176 @@ class ConditionalFormattingEditor extends Component {
         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 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);
+        useEffect((sheetId, isCfRemoved) => {
+            if (this.activeSheetId !== sheetId || isCfRemoved) {
+                this.env.replaceSidePanel("ConditionalFormatting", `ConditionalFormattingEditor_${this.props.cf.id}`);
+            }
+        }, () => [this.env.model.getters.getActiveSheetId(), this.isEditedCfRemoved]);
+        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");
         }
@@ -86002,103 +86028,153 @@ class ConditionalFormattingEditor extends Component {
         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);
+    onMounted(() => {
+        store.register(highlightProvider);
+    });
+    let currentHighlights = highlightProvider.highlights;
+    useEffect((highlights) => {
+        if (!deepEquals(highlights, currentHighlights)) {
+            currentHighlights = highlights;
+            stores.trigger("store-updated");
+        }
+    }, () => [highlightProvider.highlights]);
+}
+
+class ConditionalFormatPreview extends Component {
+    static template = "o-spreadsheet-ConditionalFormatPreview";
+    static props = {
+        conditionalFormat: Object,
+        onMouseDown: Function,
+        class: String,
+    };
+    icons = ICONS;
+    ref = 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 Component {
-    static template = "o-spreadsheet-ConditionalFormattingPanel";
+class ConditionalFormatPreviewList extends Component {
+    static template = "o-spreadsheet-ConditionalFormatPreviewList";
     static props = {
-        selection: { type: Object, optional: true },
         onCloseSidePanel: Function,
     };
-    static components = {
-        ConditionalFormatPreviewList,
-        ConditionalFormattingEditor,
-        Section,
-    };
-    activeSheetId;
-    originalEditedCf = undefined;
-    state = 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);
-            }
-        }
-        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 = useRef("cfList");
     get conditionalFormats() {
         const cfs = this.env.model.getters.getConditionalFormats(this.env.model.getters.getActiveSheetId());
         return cfs.map((cf) => ({
@@ -86106,66 +86182,129 @@ class ConditionalFormattingPanel extends Component {
             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 Component {
+    static template = "o-spreadsheet-DataValidationPreview";
+    static props = {
+        rule: Object,
+    };
+    ref = 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 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 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 = useState({
         rule: this.defaultDataValidationRule,
         errors: [],
@@ -86174,12 +86313,13 @@ class DataValidationEditor extends Component {
     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) {
@@ -86196,16 +86336,16 @@ class DataValidationEditor extends Component {
         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 };
@@ -86237,7 +86377,7 @@ class DataValidationEditor extends Component {
             .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,
         };
@@ -86250,75 +86390,6 @@ class DataValidationEditor extends Component {
     }
 }
 
-class DataValidationPreview extends Component {
-    static template = "o-spreadsheet-DataValidationPreview";
-    static props = {
-        onClick: Function,
-        rule: Object,
-    };
-    ref = 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 Component {
-    static template = "o-spreadsheet-DataValidationPanel";
-    static props = {
-        onCloseSidePanel: Function,
-    };
-    static components = { DataValidationPreview, DataValidationEditor };
-    state = 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) {
@@ -89196,7 +89267,18 @@ class TableStyleEditorPanel extends Component {
 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"),
@@ -89233,6 +89315,13 @@ sidePanelRegistry.add("DataValidation", {
 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"),
@@ -97930,6 +98019,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DEFAULT_LOCALE, DEFAULT_LOCALES, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry$1 as Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, categories, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, createAutocompleteArgumentsProvider, findCellInNewZone, functionCache, getCaretDownSvg, getCaretUpSvg, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse$1 as parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";