@antimatter-audio/antimatter-ui 10.16.5 → 10.17.0

package/dist/index.js

@@ -615,19 +615,22 @@ var reducer = function(state, action) {
                 allParameters: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
-            var _action_payload;
             return _object_spread_props$4(_object_spread$k({}, state), {
                 modSlotIds: action.payload.map(function(val) {
                     return val[0];
-                }),
+                })
+            });
+        case 'MOD_SLOT_ROW_TARGETS_RECEIVED':
+            var _action_payload;
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 modSlotTargets: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.reduce(function(acc, val) {
                     return _object_spread_props$4(_object_spread$k({}, acc), _define_property$k({}, val[0], val[1]));
                 }, {})
             });
-        case 'MOD_SLOT_TARGETS_UPDATED':
+        case 'MOD_SLOT_ROW_TARGET_UPDATED':
             var _action_payload1, _action_payload2;
             return _object_spread_props$4(_object_spread$k({}, state), {
-                modSlotTargets: _object_spread_props$4(_object_spread$k({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$k({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1[0], action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2[1]))
+                modSlotTargets: _object_spread_props$4(_object_spread$k({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$k({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
             });
         case 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED':
             {
@@ -762,6 +765,18 @@ function GlobalContextProvider(param) {
             payload: modSlots
         });
     }, []);
+    var modSlotRowTargetsReceived = useCallback(function(modSlots) {
+        dispatch({
+            type: 'MOD_SLOT_ROW_TARGETS_RECEIVED',
+            payload: modSlots
+        });
+    }, []);
+    var modSlotRowTargetUpdated = useCallback(function(modSlot) {
+        dispatch({
+            type: 'MOD_SLOT_ROW_TARGET_UPDATED',
+            payload: modSlot
+        });
+    }, []);
     var modSlotPreviewTargetIndexUpdated = useCallback(function(targetIndex) {
         dispatch({
             type: 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED',
@@ -792,12 +807,6 @@ function GlobalContextProvider(param) {
             payload: null
         });
     }, []);
-    var modSlotTargetUpdated = useCallback(function(modSlot) {
-        dispatch({
-            type: 'MOD_SLOT_TARGETS_UPDATED',
-            payload: modSlot
-        });
-    }, []);
     var modSlotParamsListReceived = useCallback(function(modSlotParams) {
         dispatch({
             type: 'MOD_SLOT_PARAMS_LIST_RECEIVED',
@@ -834,69 +843,104 @@ function GlobalContextProvider(param) {
         var paramIndex = state === null || state === void 0 ? void 0 : state.allParameters.indexOf(id);
         return state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
     };
-    var addModSlotRowTargetAndMakeRowEditable = function(id) {
+    // const setModSlotTarget = (newTarget: number, rowId: string) => {
+    //   const comboBoxState = Juce.getComboBoxState(rowId);
+    //   comboBoxState?.setChoiceIndex(newTarget);
+    // };
+    var refetchModSlots = function() {
+        return _async_to_generator$4(function() {
+            var getAllModSlotsFunc, modSlotsData, e;
+            return _ts_generator$4(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
+                        return [
+                            4,
+                            getAllModSlotsFunc()
+                        ];
+                    case 1:
+                        modSlotsData = _state.sent();
+                        modSlotRowTargetsReceived(modSlotsData || []);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        e = _state.sent();
+                        console.log(e);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var setModSlotRowTargetAsPreview = function(param) {
+        var paramIndex = param.paramIndex, paramId = param.paramId;
         var _Object_values;
-        var parameterIndex = state.automatableParamsList.indexOf(id);
-        if (!((_Object_values = Object.values(state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.includes(parameterIndex))) {
-            modSlotPreviewTargetIndexUpdated(parameterIndex);
+        // Setting a row target for a preview row enables the preview row to be interactive.
+        // This row target will not be saved to Juce until a user sets a new value for one of the inputs in the row.
+        // This function only stores the target in local state and does NOT save anything to the Juce state.
+        var targetIndex = paramId ? state.automatableParamsList.indexOf(paramId) : paramIndex;
+        if (!((_Object_values = Object.values(state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.includes(targetIndex))) {
+            setNewModSlotPreview();
+            modSlotPreviewTargetIndexUpdated(targetIndex);
             modSlotPreviewIsEditableUpdated(true);
         }
     };
-    var updateModSlotTargetAndResetPreview = function(value, id, rowId) {
-        var _state_modSlotPreview, _state_modSlotPreview1, _state_modSlotPreview2, _state_modSlotPreview3;
-        var rowState = Juce.getComboBoxState((_state_modSlotPreview = state.modSlotPreview) === null || _state_modSlotPreview === void 0 ? void 0 : _state_modSlotPreview.slotId);
-        var defaultParameter = getDefaultParameter(id);
-        var refetchModSlots = function() {
-            return _async_to_generator$4(function() {
-                var getAllModSlotsFunc, modSlotsData, e;
-                return _ts_generator$4(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            _state.trys.push([
-                                0,
-                                2,
-                                ,
-                                3
-                            ]);
-                            getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
-                            return [
-                                4,
-                                getAllModSlotsFunc()
-                            ];
-                        case 1:
-                            modSlotsData = _state.sent();
-                            modSlotsReceived(modSlotsData || []);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 2:
-                            e = _state.sent();
-                            console.log(e);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 3:
-                            return [
-                                2
-                            ];
-                    }
-                });
-            })();
-        };
-        if (defaultParameter !== null && defaultParameter !== undefined && value !== defaultParameter && rowId === ((_state_modSlotPreview1 = state.modSlotPreview) === null || _state_modSlotPreview1 === void 0 ? void 0 : _state_modSlotPreview1.slotId) && ((_state_modSlotPreview2 = state.modSlotPreview) === null || _state_modSlotPreview2 === void 0 ? void 0 : _state_modSlotPreview2.slotId) && ((_state_modSlotPreview3 = state.modSlotPreview) === null || _state_modSlotPreview3 === void 0 ? void 0 : _state_modSlotPreview3.targetIndex)) {
-            var _state_modSlotPreview4;
-            modSlotTargetUpdated([
-                state.modSlotPreview.slotId,
-                state.modSlotPreview.targetIndex
-            ]);
-            rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex((_state_modSlotPreview4 = state.modSlotPreview) === null || _state_modSlotPreview4 === void 0 ? void 0 : _state_modSlotPreview4.targetIndex);
+    var saveModSlotPreviewRowTargetToBackend = function(value, rowId) {
+        var _state_modSlotPreview, _state_modSlotPreview1;
+        var rowState = Juce.getComboBoxState(rowId);
+        // If the row is a preview row, setting a target will remove the row's preview status.
+        // In this scenario, we want to clear the current row's preview status and set a new preview row (if there is an unassigned mod slot available)
+        var defaultParameter = getDefaultParameter(rowId);
+        if (((_state_modSlotPreview = state.modSlotPreview) === null || _state_modSlotPreview === void 0 ? void 0 : _state_modSlotPreview.slotId) && ((_state_modSlotPreview1 = state.modSlotPreview) === null || _state_modSlotPreview1 === void 0 ? void 0 : _state_modSlotPreview1.targetIndex) && defaultParameter !== null && defaultParameter !== undefined && value !== defaultParameter) {
+            var _state_modSlotPreview2;
+            modSlotRowTargetUpdated({
+                id: state.modSlotPreview.slotId,
+                value: state.modSlotPreview.targetIndex
+            });
+            rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex((_state_modSlotPreview2 = state.modSlotPreview) === null || _state_modSlotPreview2 === void 0 ? void 0 : _state_modSlotPreview2.targetIndex);
             clearModSlotPreview();
             setNewModSlotPreview();
             refetchModSlots();
         }
     };
+    var updateModSlotRowTarget = function(value, rowId) {
+        // An index of 0 = 'none' in the mod slot target list.
+        // If the new row target value is 0, the user is deleting the row's target.
+        // Clear all of the values that have been set for that target on the front end and in JUCE.
+        console.log(value, state.modSlotPreview, rowId, 'value, state.modSlotPreview, rowId,in context');
+        var rowState = Juce.getComboBoxState(rowId);
+        rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex(value);
+        if (rowId === state.modSlotPreview.slotId) {
+            clearModSlotPreview();
+        }
+        if (value === 0) {
+            var _state_modSlotParams_rowId, _state_modSlotParams;
+            state === null || state === void 0 ? void 0 : (_state_modSlotParams = state.modSlotParams) === null || _state_modSlotParams === void 0 ? void 0 : (_state_modSlotParams_rowId = _state_modSlotParams[rowId]) === null || _state_modSlotParams_rowId === void 0 ? void 0 : _state_modSlotParams_rowId.forEach(function(item) {
+                setDefaultParameter(item);
+            });
+            clearModSlotPreview();
+            setNewModSlotPreview();
+        }
+        modSlotRowTargetUpdated({
+            id: rowId,
+            value: value
+        });
+        refetchModSlots();
+    };
     var onFire = function() {
         //@ts-expect-error
         window.__JUCE__.backend.emitEvent('setRandom', {});
@@ -922,11 +966,13 @@ function GlobalContextProvider(param) {
         setDefaultParameter: setDefaultParameter,
         getDefaultParameter: getDefaultParameter,
         modSlotsReceived: modSlotsReceived,
-        modSlotTargetUpdated: modSlotTargetUpdated,
+        modSlotRowTargetsReceived: modSlotRowTargetsReceived,
+        // setModSlotTarget,
         modSlotParamsListReceived: modSlotParamsListReceived,
         modSlotParamLabelsReceived: modSlotParamLabelsReceived,
-        addModSlotRowTargetAndMakeRowEditable: addModSlotRowTargetAndMakeRowEditable,
-        updateModSlotTargetAndResetPreview: updateModSlotTargetAndResetPreview,
+        setModSlotRowTargetAsPreview: setModSlotRowTargetAsPreview,
+        saveModSlotPreviewRowTargetToBackend: saveModSlotPreviewRowTargetToBackend,
+        updateModSlotRowTarget: updateModSlotRowTarget,
         useRandom: useRandom
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
@@ -1017,7 +1063,7 @@ function Button(param) {
     var _React_useState = _sliced_to_array$f(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
-    var addModSlotRowTargetAndMakeRowEditable = useGlobalContext().addModSlotRowTargetAndMakeRowEditable;
+    var setModSlotRowTargetAsPreview = useGlobalContext().setModSlotRowTargetAsPreview;
     // Update the local state when the ID changes
     useEffect(function() {
         setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
@@ -1038,7 +1084,10 @@ function Button(param) {
         }
     });
     var handleMouseDown = function(e) {
-        addModSlotRowTargetAndMakeRowEditable(id);
+        // TODO: handle this in a callback?
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
         if (!onClick) {
             e.preventDefault();
             if (type === ButtonType.momentary) {
@@ -1141,12 +1190,13 @@ function _unsupported_iterable_to_array$e(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 var useDropdown = function(param) {
-    var id = param.id, rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
+    var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
+    rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
     var _useState = _sliced_to_array$e(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array$e(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, addModSlotRowTargetAndMakeRowEditable = _useGlobalContext.addModSlotRowTargetAndMakeRowEditable;
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview;
     var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
     var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
         var _item_;
@@ -1159,8 +1209,9 @@ var useDropdown = function(param) {
             if (choiceIndex !== prevIndex.current) {
                 comboBoxState.setChoiceIndex(choiceIndex);
                 setIndex(choiceIndex);
+                // TODO: Is there a better way to do this?
                 if (rowId) {
-                    onChange && onChange(choiceIndex, id, rowId);
+                    onChange && onChange(choiceIndex, rowId);
                 } else {
                     onChange && onChange(choiceIndex, id);
                 }
@@ -1206,7 +1257,9 @@ var useDropdown = function(param) {
         }
     };
     var onClick = function() {
-        addModSlotRowTargetAndMakeRowEditable(id);
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
     };
     return {
         value: choices[index],
@@ -1862,8 +1915,10 @@ var useSlider = function(param) {
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     var sliderState = Juce.getSliderState(id);
+    var prevValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, addModSlotRowTargetAndMakeRowEditable = _useGlobalContext.addModSlotRowTargetAndMakeRowEditable, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamsList = _useGlobalContext_globalState.automatableParamsList, modSlotTargets = _useGlobalContext_globalState.modSlotTargets;
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.// setModSlotRowTarget,
+    globalState, automatableParamsList = _useGlobalContext_globalState.automatableParamsList, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
     var _useState2 = _sliced_to_array$c(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
     useEffect(function() {
         document.addEventListener('click', clickListener);
@@ -1906,33 +1961,35 @@ var useSlider = function(param) {
             normalisedValueRef.current = mockInitialNormalisedValue;
         }
     }, []);
-    var changeHandler = useCallback(function(scaledValueFromState, sliderId) {
-        if (rowId) {
-            onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), sliderId, rowId);
+    // TODO: take out mod slot logic
+    var changeHandler = function(scaledValueFromState, sliderId) {
+        if (rowId === modSlotPreview.targetIndex) {
+            onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), rowId);
         } else {
             onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), sliderId);
         }
-    }, [
-        onChange
-    ]);
+    };
     // Update the local state from JUCE
-    var updateLocalState = function(sliderState) {
+    var updateLocalState = function() {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
         var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
         var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
         normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
-        setScaledValue(scaledValue);
-        changeHandler(scaledValueFromState, id);
-        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            highlightedItemChanged({
-                label: label,
-                value: scaledValue
-            });
+        if (scaledValue !== prevValueRef.current) {
+            setScaledValue(scaledValue);
+            rowId && changeHandler(scaledValueFromState, rowId);
+            if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+                highlightedItemChanged({
+                    label: label,
+                    value: scaledValue
+                });
+            }
+            prevValueRef.current = scaledValue;
         }
     };
     // Update the local state when the ID changes
     useEffect(function() {
-        updateLocalState(sliderState);
+        updateLocalState();
     }, [
         id
     ]);
@@ -1941,7 +1998,7 @@ var useSlider = function(param) {
     useEffect(function() {
         if (!isLocalhost) {
             var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function() {
-                updateLocalState(sliderState);
+                updateLocalState();
             });
             var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
                 return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
@@ -2006,7 +2063,11 @@ var useSlider = function(param) {
     var bindDrag = useGesture({
         onMouseDown: function(param) {
             param.event;
-            addModSlotRowTargetAndMakeRowEditable(id);
+            if (id !== modSlotPreview.rowId) {
+                setModSlotRowTargetAsPreview({
+                    paramId: id
+                });
+            }
             if (!dragInProgress) {
                 sliderState.sliderDragStarted(id);
                 dragInProgress = true;
@@ -4233,57 +4294,7 @@ var targetColors = [
     '#cb4d62'
 ];
 var ComboboxCellWidth = '217px';
-
-function _define_property$5(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$5(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function SingleBarViz(param) {
-    var _param_background = param.background, background = _param_background === void 0 ? 'var(--color-brand)' : _param_background, _param_height = param.height, height = _param_height === void 0 ? '6px' : _param_height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, value = param.value, className = param.className, style = param.style;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        className: className,
-        style: {
-            width: '100%',
-            height: height,
-            background: 'var(--color-gray-600)',
-            position: 'relative'
-        }
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$5({
-            position: 'absolute',
-            background: background
-        }, getBarTransformStyles({
-            polarity: polarity,
-            orientation: orientation,
-            normalisedValue: value || 0
-        }), style)
-    }));
-}
-SingleBarViz.polarity = Polarity;
+var DeleteButtonCellWidth = '50px';
 
 function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -4332,12 +4343,13 @@ function _unsupported_iterable_to_array$7(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 var useCombobox = function(param) {
-    var id = param.id, filter = param.filter, onChange = param.onChange;
+    var id = param.id, filter = param.filter;
     var _Object_values;
     var comboBoxState = Juce.getComboBoxState(id);
     var _useState = _sliced_to_array$7(useState(0), 2), value = _useState[0], setValue = _useState[1];
     var _useState1 = _sliced_to_array$7(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var addModSlotRowTargetAndMakeRowEditable = _useGlobalContext.addModSlotRowTargetAndMakeRowEditable, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
+    var prevValue = useRef(null);
+    var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
     //TODO: Filter choices for subsequent rows
     // const availableChoices = properties?.choices;
     useEffect(function() {
@@ -4349,7 +4361,7 @@ var useCombobox = function(param) {
         setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
     });
     useEffect(function() {
-        if (modSlotPreview.slotId === id && modSlotPreview.targetIndex > 0) {
+        if (modSlotPreview.slotId === id) {
             setValue(modSlotPreview.targetIndex);
         }
     }, [
@@ -4359,7 +4371,9 @@ var useCombobox = function(param) {
     useEffect(function() {
         var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
         var valueListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.addListener(function() {
-            setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+            if ((comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex()) !== prevValue) {
+                setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+            }
         });
         var propertiesListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.addListener(function() {
             setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
@@ -4385,20 +4399,30 @@ var useCombobox = function(param) {
         var _item_toLowerCase;
         return item === null || item === void 0 ? void 0 : (_item_toLowerCase = item.toLowerCase()) === null || _item_toLowerCase === void 0 ? void 0 : _item_toLowerCase.includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
     }) : displayedLabels;
-    var prevValue = useRef(null);
-    var handleChange = function(newValue) {
-        if (newValue !== prevValue.current) {
-            var juceIndex = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.indexOf(newValue);
-            comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(juceIndex);
-            setValue(newValue);
-            onChange && onChange(juceIndex);
-            prevValue.current = juceIndex;
-        }
-    };
+    // const prevValue = useRef<string | null>(null);
+    // const handleChange = (newValue: number) => {
+    //   if (newValue !== prevValue.current) {
+    //     // const juceIndex = automatableParamLabels?.indexOf(newValue);
+    //     // comboBoxState?.setChoiceIndex(newValue);s
+    //     setValue(newValue);
+    //     // onChange && onChange(newValue);
+    //     // //@ts-expect-error
+    //     // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
+    //     if (displayValInHeader) {
+    //       highlightedItemChanged({
+    //         label,
+    //         value: automatableParamLabels?.[newValue],
+    //       });
+    //     }
+    //     prevValue.current = newValue;
+    //   }
+    // };
     var onMouseEnter = function() {
     };
     var onClick = function() {
-        addModSlotRowTargetAndMakeRowEditable(id);
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
     };
     return {
         value: value,
@@ -4407,8 +4431,7 @@ var useCombobox = function(param) {
         choices: properties === null || properties === void 0 ? void 0 : properties.choices,
         filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
-        onClick: onClick,
-        handleChange: handleChange
+        onClick: onClick
     };
 };
 
@@ -4420,7 +4443,7 @@ function _array_like_to_array$6(arr, len) {
 function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4460,7 +4483,7 @@ function _iterable_to_array_limit$6(arr, i) {
 function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$4(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4470,7 +4493,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -4487,31 +4510,38 @@ function _unsupported_iterable_to_array$6(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
-    var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, key = param.key, color = param.color, style = param.style;
-    var _SingleBarViz_polarity;
-    var _useState = _sliced_to_array$6(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
-    var _useState1 = _sliced_to_array$6(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
+    var rowId = param.rowId, key = param.key, color = param.color, style = param.style;
+    var _useState = _sliced_to_array$6(useState(''), 2), filterString = _useState[0], setFilterString = _useState[1];
+    var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, clearModSlotPreview = _useGlobalContext.clearModSlotPreview, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotPreview = _useGlobalContext_globalState.modSlotPreview, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
-        filter: filterString,
-        onChange: handleTargetChange
-    }), value = _useCombobox.value, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
-    useEffect(function() {
-        if (target) {
-            var sliderState = Juce.getSliderState(target);
-            var scaledValue = sliderState.scaledValue;
-            setTargetValue(scaledValue);
+        filter: filterString}), value = _useCombobox.value, filteredChoices = _useCombobox.filteredChoices;
+    var previewValue = modSlotPreview.slotId === rowId ? modSlotPreview.targetIndex : null;
+    var onChange = function(newValue) {
+        // TODO: 'juceIndex' is needed here because the 'value' from the combobox is the string label.
+        // Refactor the combobox so that the 'value' is the index number corresponding to the parameter's index in JUCE?
+        // console.log(newValue, 'NV');
+        var juceIndex = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.indexOf(newValue);
+        // handleChange(juceIndex);
+        if (rowId === modSlotPreview.slotId) {
+            if (juceIndex > 0) {
+                setModSlotRowTargetAsPreview({
+                    paramIndex: juceIndex
+                });
+            } else {
+                clearModSlotPreview();
+                setNewModSlotPreview();
+            }
+        } else {
+            updateModSlotRowTarget(juceIndex, rowId);
         }
-    }, [
-        target
-    ]);
+    };
     return /*#__PURE__*/ React__default.createElement(Box, {
         key: key,
         className: "ModMatrixCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexEnd,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$4({
+        style: _object_spread$5({
             color: color
         }, style),
         padding: [
@@ -4521,8 +4551,8 @@ function ModMatrixComboboxCell(param) {
         alignItems: Box.alignItems.flexStart,
         height: '2.5rem'
     }, /*#__PURE__*/ React__default.createElement(Combobox, {
-        value: value,
-        onChange: handleChange
+        value: value || previewValue,
+        onChange: onChange
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
         displayValue: function(item) {
             return value ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value] : '';
@@ -4555,17 +4585,10 @@ function ModMatrixComboboxCell(param) {
             key: item,
             value: item
         }, /*#__PURE__*/ React__default.createElement(Label, null, item));
-    }))), /*#__PURE__*/ React__default.createElement(SingleBarViz, {
-        value: targetValue,
-        polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.unipolar,
-        background: color,
-        style: {
-            alignSelf: 'flex-end'
-        }
-    }));
+    }))));
 }
 
-function _define_property$3(obj, key, value) {
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4578,7 +4601,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$3(target) {
+function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4588,7 +4611,7 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
@@ -4597,20 +4620,20 @@ function _object_spread$3(target) {
 function ModMatrixToggleCell(param) {
     var modifier = param.modifier, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, rowId = param.rowId, color = param.color, style = param.style;
     var // getDefaultParameter,
-    updateModSlotTargetAndResetPreview = useGlobalContext().updateModSlotTargetAndResetPreview;
+    saveModSlotPreviewRowTargetToBackend = useGlobalContext().saveModSlotPreviewRowTargetToBackend;
     // const rowState = Juce.getComboBoxState(rowId);
     var _useDropdown = useDropdown({
         id: modifier,
         rowId: rowId,
         isDisabled: isDisabled,
-        onChange: updateModSlotTargetAndResetPreview
+        onChange: saveModSlotPreviewRowTargetToBackend
     }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixCell ModMatrixToggleCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$3({
+        style: _object_spread$4({
             color: color,
             pointerEvents: 'all'
         }, style),
@@ -4634,6 +4657,57 @@ function ModMatrixToggleCell(param) {
     }, Object.keys(Polarity)[index] || '0')));
 }
 
+function _define_property$3(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$3(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$3(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function SingleBarViz(param) {
+    var _param_background = param.background, background = _param_background === void 0 ? 'var(--color-brand)' : _param_background, _param_height = param.height, height = _param_height === void 0 ? '6px' : _param_height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, value = param.value, className = param.className, style = param.style;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        className: className,
+        style: {
+            width: '100%',
+            height: height,
+            background: 'var(--color-gray-600)',
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: _object_spread$3({
+            position: 'absolute',
+            background: background
+        }, getBarTransformStyles({
+            polarity: polarity,
+            orientation: orientation,
+            normalisedValue: value || 0
+        }), style)
+    }));
+}
+SingleBarViz.polarity = Polarity;
+
 function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -4684,14 +4758,14 @@ function _object_spread_props(target, source) {
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
-    var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotTargetAndResetPreview = _useGlobalContext.updateModSlotTargetAndResetPreview;
+    var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, saveModSlotPreviewRowTargetToBackend = _useGlobalContext.saveModSlotPreviewRowTargetToBackend;
     var _useSlider = useSlider({
         id: modifier,
         rowId: rowId,
         displayValInHeader: false,
         orientation: Orientation.horizontal,
         dragOrientation: Orientation.vertical,
-        onChange: updateModSlotTargetAndResetPreview,
+        onChange: saveModSlotPreviewRowTargetToBackend,
         isDisabled: isDisabled
     }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
     return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$2({
@@ -4736,30 +4810,7 @@ function ModMatrixCell(param) {
 function ModMatrixRow(param) {
     var rowId = param.rowId, key = param.key;
     var _modSlotParams_rowId;
-    //   const getModSlotsFunc = Juce.getNativeFunction('getModSlots');
-    var _useGlobalContext = useGlobalContext(), // modSlotTargetUpdated,
-    setDefaultParameter = _useGlobalContext.setDefaultParameter, modSlotPreviewIsEditableUpdated = _useGlobalContext.modSlotPreviewIsEditableUpdated, modSlotPreviewTargetIndexUpdated = _useGlobalContext.modSlotPreviewTargetIndexUpdated, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, modSlotTargetUpdated = _useGlobalContext.modSlotTargetUpdated, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParams = _useGlobalContext_globalState.modSlotParams, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
-    var handleTargetChange = function(newTarget) {
-        if (newTarget > 0) {
-            // modSlotTargetUpdated([rowId, newTarget]);
-            if (rowId === modSlotPreview.slotId) {
-                modSlotPreviewTargetIndexUpdated(newTarget);
-                modSlotPreviewIsEditableUpdated(true);
-            }
-        } else {
-            var _modSlotParams_rowId;
-            modSlotTargetUpdated([
-                rowId,
-                0
-            ]);
-            modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_rowId = modSlotParams[rowId]) === null || _modSlotParams_rowId === void 0 ? void 0 : _modSlotParams_rowId.forEach(function(item) {
-                setDefaultParameter(item);
-            });
-            if (!modSlotPreview.slotId) {
-                setNewModSlotPreview();
-            }
-        }
-    };
+    var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParams = _useGlobalContext_globalState.modSlotParams, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyRow",
         gap: Box.gap.medium,
@@ -4770,10 +4821,10 @@ function ModMatrixRow(param) {
         flexDirection: Box.flexDirection.column,
         style: {
             color: targetColors[0]
-        }
+        },
+        flex: "3"
     }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
-        target: modSlotTargets[rowId],
-        handleTargetChange: handleTargetChange,
+        // target={modSlotTargets[rowId]}
         rowId: rowId,
         color: targetColors[0],
         style: {
@@ -4788,7 +4839,8 @@ function ModMatrixRow(param) {
             style: {
                 color: targetColors[i + 1]
             },
-            key: item
+            key: item,
+            flex: "2"
         }, i !== arr.length - 1 ? /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
             rowId: rowId,
             modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_rowId = modSlotParams[rowId]) === null || _modSlotParams_rowId === void 0 ? void 0 : _modSlotParams_rowId[i],
@@ -4800,7 +4852,18 @@ function ModMatrixRow(param) {
             color: targetColors[i + 1],
             isDisabled: modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex
         }));
-    }));
+    }), /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "0 0 ".concat(DeleteButtonCellWidth)
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        backgroundColor: "transparent",
+        id: "delete-row",
+        icon: Icon.icon.delete,
+        width: "20px",
+        disabled: modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex,
+        onClick: function() {
+            return updateModSlotRowTarget(0, rowId);
+        }
+    })));
 }
 
 function _array_like_to_array$5(arr, len) {
@@ -5016,7 +5079,7 @@ function ModMatrix(param) {
     var getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
     var getModSlotParamsFunc = Juce.getNativeFunction('getModSlotParams');
     var _useState = _sliced_to_array$5(useState([]), 2), displayedModSlots = _useState[0], setDisplayedModSlots = _useState[1];
-    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotIds = _useGlobalContext_globalState.modSlotIds, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
+    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, modSlotRowTargetsReceived = _useGlobalContext.modSlotRowTargetsReceived, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotIds = _useGlobalContext_globalState.modSlotIds, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
     // Empty state preview row
     useEffect(function() {
         var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
@@ -5030,6 +5093,10 @@ function ModMatrix(param) {
         modSlotIds,
         modSlotPreview
     ]);
+    // console.log(
+    //   modSlotTargets,
+    //   'modSlotTargetsmodSlotTargetsmodSlotTargetsmodSlotTargets',
+    // );
     useEffect(function() {
         var _Object_keys;
         var displayedSlots = (_Object_keys = Object.keys(modSlotTargets)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.reduce(function(acc, item) {
@@ -5037,11 +5104,12 @@ function ModMatrix(param) {
                 acc === null || acc === void 0 ? void 0 : acc.push(item);
             }
             return acc;
-        }, []).sort();
+        }, []);
+        // .sort();
         var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
             return modSlotTargets[item] <= 0;
         });
-        if (unassignedModSlots.length > 0) {
+        if (unassignedModSlots.length > 0 && modSlotPreview.slotId) {
             setDisplayedModSlots(_to_consumable_array(displayedSlots).concat([
                 modSlotPreview.slotId
             ]));
@@ -5088,6 +5156,7 @@ function ModMatrix(param) {
                         automatableParamsListReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[0]);
                         automatableParamLabelsReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[1]);
                         modSlotsReceived(modSlotsData || []);
+                        modSlotRowTargetsReceived(modSlotsData || []);
                         modSlotParamsListReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[0]);
                         modSlotParamLabelsReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[1]);
                         return [
@@ -5116,7 +5185,9 @@ function ModMatrix(param) {
     ]);
     var headers = [
         'Target'
-    ].concat(_to_consumable_array(modSlotParamLabels));
+    ].concat(_to_consumable_array(modSlotParamLabels), [
+        ''
+    ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         padding: [
@@ -5135,7 +5206,7 @@ function ModMatrix(param) {
         return /*#__PURE__*/ React__default.createElement(Box, {
             style: {
                 color: targetColors[i],
-                flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : 'initial'
+                flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : i === headers.length - 1 ? "0 0 ".concat(DeleteButtonCellWidth) : '2'
             },
             key: item,
             className: "ModMatrixHeaderCell",
@@ -5151,7 +5222,7 @@ function ModMatrix(param) {
     }, (displayedModSlots === null || displayedModSlots === void 0 ? void 0 : displayedModSlots.length) ? displayedModSlots === null || displayedModSlots === void 0 ? void 0 : displayedModSlots.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
             rowId: item,
-            key: item
+            key: "".concat(item + i)
         });
     }) : null));
 }