@antimatter-audio/antimatter-ui 10.15.2 → 10.16.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect, useRef, useReducer, useCallback, createContext, useContext, useState } from 'react';
+import React__default, { useRef, useReducer, useCallback, createContext, useContext, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
@@ -159,164 +159,6 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-function _array_like_to_array$h(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$g(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property$k(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 _iterable_to_array_limit$g(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$g() {
-    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$k(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$k(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
-}
-function _unsupported_iterable_to_array$h(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
-}
-function Button(param) {
-    var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.small
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Spacing.none
-    ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
-    var _React_useState = _sliced_to_array$g(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
-    var buttonState = Juce.getToggleState(id);
-    var isLocalhost = window.location.hostname === 'localhost';
-    // Update the local state when the ID changes
-    useEffect(function() {
-        setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
-    }, [
-        id
-    ]);
-    // Sets up listeners to handle changes on the backend
-    useEffect(function() {
-        if (!isLocalhost && !onClick) {
-            var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
-                setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
-            });
-            return function cleanup() {
-                buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.removeListener(valueListenerId);
-            };
-        } else {
-            return;
-        }
-    });
-    var handleMouseDown = function(e) {
-        if (!onClick) {
-            e.preventDefault();
-            if (type === ButtonType.momentary) {
-                setIsSelected(true);
-                buttonState.setValue(true);
-            } else {
-                setIsSelected(!isSelected);
-                buttonState.setValue(!isSelected);
-            }
-        }
-    };
-    var handleMouseUp = function() {
-        if (!onClick) {
-            setIsSelected(false);
-            buttonState.setValue(false);
-        }
-    };
-    React__default.useEffect(function() {
-        if (type === ButtonType.momentary && !onClick) {
-            window.addEventListener('mouseup', handleMouseUp);
-            return function() {
-                window.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-        return;
-    }, [
-        isSelected
-    ]);
-    var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
-    return /*#__PURE__*/ React__default.createElement("button", {
-        id: id,
-        onMouseDown: handleMouseDown,
-        disabled: disabled,
-        onClick: onClick && onClick,
-        style: _object_spread$k({
-            paddingTop: "var(--p-".concat(padding[0], ")"),
-            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
-            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            marginTop: "var(--p-".concat(margin[0], ")"),
-            marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
-            marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
-            marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
-        }, style),
-        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
-    }, size !== ButtonSize.xSmall && (text ? text : children));
-}
-Button.padding = Spacing;
-Button.margin = Spacing;
-Button.type = ButtonType;
-Button.size = ButtonSize;
-
-var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
-styleInject(css_248z$8);
-
 function useObservable(param) {
     var onFire = param.onFire;
     var observers = useRef([]);
@@ -357,30 +199,30 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$g(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+function _array_without_holes$2(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$h(arr);
 }
-function _iterable_to_array$1(iter) {
+function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _non_iterable_spread$1() {
+function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$1();
+function _to_consumable_array$2(arr) {
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$h(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$g(o, minLen) {
+function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -430,7 +272,7 @@ var getValidValueForInput = function(param) {
     // TODO: Clean up
     var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
     var splitValue = value.toString().matchAll(matchCriteria);
-    var splitValueArray = _to_consumable_array$1(splitValue);
+    var splitValueArray = _to_consumable_array$2(splitValue);
     var validValue = splitValueArray === null || splitValueArray === void 0 ? void 0 : (_splitValueArray_ = splitValueArray[0]) === null || _splitValueArray_ === void 0 ? void 0 : _splitValueArray_[0];
     var start = properties.start, end = properties.end;
     if (validValue !== null && validValue !== undefined) {
@@ -495,15 +337,47 @@ var randomizeValue = function(min, max) {
     return Math.random() * (max - min) + min;
 };
 
-function _array_like_to_array$f(arr, len) {
+function _array_like_to_array$g(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$f(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$j(obj, key, value) {
+function _array_without_holes$1(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+}
+function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator$4(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -516,7 +390,10 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$f(arr, i) {
+function _iterable_to_array$1(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit$g(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -540,10 +417,13 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+function _non_iterable_rest$g() {
     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$j(target) {
+function _non_iterable_spread$1() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -553,7 +433,7 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -577,16 +457,110 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
+function _sliced_to_array$g(arr, i) {
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
 }
-function _unsupported_iterable_to_array$f(o, minLen) {
+function _to_consumable_array$1(arr) {
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$1();
+}
+function _unsupported_iterable_to_array$g(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+}
+function _ts_generator$4(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
 }
 // Initial state
 var defaultGlobalStateValue = {
@@ -594,11 +568,18 @@ var defaultGlobalStateValue = {
         label: 'Antimatter Audio',
         value: 0
     },
+    // focusedItem: '',
     allParameters: [],
     automatableParamsList: [],
     automatableParamLabels: [],
     parameterTypes: [],
-    modSlots: {},
+    modSlotTargets: {},
+    modSlotIds: [],
+    modSlotPreview: {
+        slotId: '',
+        targetIndex: 0,
+        isEditable: false
+    },
     modSlotParams: [],
     modSlotParamLabels: [],
     defaultParamValues: [],
@@ -608,51 +589,107 @@ var defaultGlobalStateValue = {
 var reducer = function(state, action) {
     switch(action.type){
         case 'HIGHLIGHTED_ITEM_CHANGED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 highlightedItem: action.payload
             });
+        // case 'FOCUSED_ITEM_CHANGED':
+        //   return { ...state, focusedItem: action.payload };
         case 'ADVANCED_VIEW_TOGGLED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 advancedView: action.payload
             });
         case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 automatableParamsList: action.payload
             });
         case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 automatableParamLabels: action.payload
             });
         case 'PARAMETER_TYPES_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 parameterTypes: action.payload
             });
         case 'ALL_PARAMETERS_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 allParameters: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
             var _action_payload;
-            return _object_spread_props$4(_object_spread$j({}, state), {
-                modSlots: 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$j({}, acc), _define_property$j({}, val[0], val[1]));
+            return _object_spread_props$4(_object_spread$k({}, state), {
+                modSlotIds: action.payload.map(function(val) {
+                    return val[0];
+                }),
+                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_UPDATED':
+        case 'MOD_SLOT_TARGETS_UPDATED':
             var _action_payload1, _action_payload2;
-            return _object_spread_props$4(_object_spread$j({}, state), {
-                modSlots: _object_spread_props$4(_object_spread$j({}, state === null || state === void 0 ? void 0 : state.modSlots), _define_property$j({}, (_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]))
+            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]))
             });
+        case 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED':
+            {
+                return _object_spread_props$4(_object_spread$k({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                        targetIndex: action.payload
+                    })
+                });
+            }
+        case 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED':
+            {
+                return _object_spread_props$4(_object_spread$k({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                        slotId: action === null || action === void 0 ? void 0 : action.payload
+                    })
+                });
+            }
+        case 'SET_NEW_MOD_SLOT_PREVIEW':
+            {
+                var _state_modSlotIds_find;
+                return _object_spread_props$4(_object_spread$k({}, state), {
+                    modSlotPreview: {
+                        slotId: (_state_modSlotIds_find = state.modSlotIds.find(function(item) {
+                            return state.modSlotTargets[item] <= 0;
+                        })) !== null && _state_modSlotIds_find !== void 0 ? _state_modSlotIds_find : '',
+                        isEditable: false,
+                        targetIndex: 0
+                    }
+                });
+            }
+        case 'CLEAR_MOD_SLOT_PREVIEW':
+            {
+                return _object_spread_props$4(_object_spread$k({}, state), {
+                    modSlotPreview: {
+                        slotId: '',
+                        isEditable: false,
+                        targetIndex: 0
+                    }
+                });
+            }
+        case 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED':
+            {
+                return _object_spread_props$4(_object_spread$k({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                        isEditable: action === null || action === void 0 ? void 0 : action.payload
+                    })
+                });
+            }
         case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
-                modSlotParams: action === null || action === void 0 ? void 0 : action.payload
+            var modSlotNames = Object.keys(state.modSlotTargets);
+            return _object_spread_props$4(_object_spread$k({}, state), {
+                modSlotParams: action === null || action === void 0 ? void 0 : action.payload.reduce(function(acc, item, i) {
+                    acc[modSlotNames[i]] = item;
+                    return acc;
+                }, {})
             });
         case 'DEFAULT_PARAM_VALUES_RECEIVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 defaultParamValues: action === null || action === void 0 ? void 0 : action.payload
             });
         case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
-            return _object_spread_props$4(_object_spread$j({}, state), {
+            return _object_spread_props$4(_object_spread$k({}, state), {
                 modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
@@ -671,13 +708,16 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$f(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$g(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
             payload: highlightedItem
         });
     }, []);
+    // const focusedItemChanged = useCallback((focusedItem: string) => {
+    //   dispatch({ type: 'FOCUSED_ITEM_CHANGED', payload: focusedItem });
+    // }, []);
     var advancedViewToggled = useCallback(function(advancedView) {
         dispatch({
             type: 'ADVANCED_VIEW_TOGGLED',
@@ -687,7 +727,9 @@ function GlobalContextProvider(param) {
     var automatableParamsListReceived = useCallback(function(automatableParamsList) {
         dispatch({
             type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
-            payload: automatableParamsList
+            payload: [
+                'none'
+            ].concat(_to_consumable_array$1(automatableParamsList))
         });
     }, []);
     var allParametersReceived = useCallback(function(allParameters) {
@@ -720,9 +762,39 @@ function GlobalContextProvider(param) {
             payload: modSlots
         });
     }, []);
-    var modSlotUpdated = useCallback(function(modSlot) {
+    var modSlotPreviewTargetIndexUpdated = useCallback(function(targetIndex) {
+        dispatch({
+            type: 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED',
+            payload: targetIndex
+        });
+    }, []);
+    var modSlotPreviewIsEditableUpdated = useCallback(function(isEditable) {
         dispatch({
-            type: 'MOD_SLOT_UPDATED',
+            type: 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED',
+            payload: isEditable
+        });
+    }, []);
+    var modSlotPreviewSlotIdUpdated = useCallback(function(slotId) {
+        dispatch({
+            type: 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED',
+            payload: slotId
+        });
+    }, []);
+    var setNewModSlotPreview = useCallback(function() {
+        dispatch({
+            type: 'SET_NEW_MOD_SLOT_PREVIEW',
+            payload: null
+        });
+    }, []);
+    var clearModSlotPreview = useCallback(function() {
+        dispatch({
+            type: 'CLEAR_MOD_SLOT_PREVIEW',
+            payload: null
+        });
+    }, []);
+    var modSlotTargetUpdated = useCallback(function(modSlot) {
+        dispatch({
+            type: 'MOD_SLOT_TARGETS_UPDATED',
             payload: modSlot
         });
     }, []);
@@ -752,6 +824,74 @@ function GlobalContextProvider(param) {
                 skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.skew
             });
             sliderState.setNormalisedValue(normalisedDefaultValue);
+        // if(state?.modSlots)
+        }
+    };
+    var getDefaultParameter = function(id) {
+        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) {
+        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);
+            modSlotPreviewIsEditableUpdated(true);
+        }
+    };
+    var updateModSlotTargetAndResetPreview = function(value, id) {
+        var _state_modSlotPreview, _state_modSlotPreview1, _state_modSlotPreview2;
+        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 && ((_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.targetIndex)) {
+            var _state_modSlotPreview3;
+            modSlotTargetUpdated([
+                state.modSlotPreview.slotId,
+                state.modSlotPreview.targetIndex
+            ]);
+            rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex((_state_modSlotPreview3 = state.modSlotPreview) === null || _state_modSlotPreview3 === void 0 ? void 0 : _state_modSlotPreview3.targetIndex);
+            clearModSlotPreview();
+            setNewModSlotPreview();
+            refetchModSlots();
         }
     };
     var onFire = function() {
@@ -764,6 +904,12 @@ function GlobalContextProvider(param) {
     var value = {
         globalState: state,
         highlightedItemChanged: highlightedItemChanged,
+        // focusedItemChanged,
+        clearModSlotPreview: clearModSlotPreview,
+        setNewModSlotPreview: setNewModSlotPreview,
+        modSlotPreviewSlotIdUpdated: modSlotPreviewSlotIdUpdated,
+        modSlotPreviewTargetIndexUpdated: modSlotPreviewTargetIndexUpdated,
+        modSlotPreviewIsEditableUpdated: modSlotPreviewIsEditableUpdated,
         advancedViewToggled: advancedViewToggled,
         automatableParamsListReceived: automatableParamsListReceived,
         automatableParamLabelsReceived: automatableParamLabelsReceived,
@@ -771,10 +917,13 @@ function GlobalContextProvider(param) {
         allParametersReceived: allParametersReceived,
         defaultParamValuesReceived: defaultParamValuesReceived,
         setDefaultParameter: setDefaultParameter,
+        getDefaultParameter: getDefaultParameter,
         modSlotsReceived: modSlotsReceived,
-        modSlotUpdated: modSlotUpdated,
+        modSlotTargetUpdated: modSlotTargetUpdated,
         modSlotParamsListReceived: modSlotParamsListReceived,
         modSlotParamLabelsReceived: modSlotParamLabelsReceived,
+        addModSlotRowTargetAndMakeRowEditable: addModSlotRowTargetAndMakeRowEditable,
+        updateModSlotTargetAndResetPreview: updateModSlotTargetAndResetPreview,
         useRandom: useRandom
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
@@ -782,6 +931,166 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
+function _array_like_to_array$f(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$f(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property$j(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 _iterable_to_array_limit$f(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$f() {
+    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$j(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$j(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
+}
+function _unsupported_iterable_to_array$f(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
+}
+function Button(param) {
+    var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.small
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Spacing.none
+    ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
+    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;
+    // Update the local state when the ID changes
+    useEffect(function() {
+        setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
+    }, [
+        id
+    ]);
+    // Sets up listeners to handle changes on the backend
+    useEffect(function() {
+        if (!isLocalhost && !onClick) {
+            var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
+                setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
+            });
+            return function cleanup() {
+                buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.removeListener(valueListenerId);
+            };
+        } else {
+            return;
+        }
+    });
+    var handleMouseDown = function(e) {
+        addModSlotRowTargetAndMakeRowEditable(id);
+        if (!onClick) {
+            e.preventDefault();
+            if (type === ButtonType.momentary) {
+                setIsSelected(true);
+                buttonState.setValue(true);
+            } else {
+                setIsSelected(!isSelected);
+                buttonState.setValue(!isSelected);
+            }
+        }
+    };
+    var handleMouseUp = function() {
+        if (!onClick) {
+            setIsSelected(false);
+            buttonState.setValue(false);
+        }
+    };
+    React__default.useEffect(function() {
+        if (type === ButtonType.momentary && !onClick) {
+            window.addEventListener('mouseup', handleMouseUp);
+            return function() {
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return;
+    }, [
+        isSelected
+    ]);
+    var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
+    return /*#__PURE__*/ React__default.createElement("button", {
+        id: id,
+        onMouseDown: handleMouseDown,
+        disabled: disabled,
+        onClick: onClick && onClick,
+        style: _object_spread$j({
+            paddingTop: "var(--p-".concat(padding[0], ")"),
+            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            marginTop: "var(--p-".concat(margin[0], ")"),
+            marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
+        }, style),
+        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
+    }, size !== ButtonSize.xSmall && (text ? text : children));
+}
+Button.padding = Spacing;
+Button.margin = Spacing;
+Button.type = ButtonType;
+Button.size = ButtonSize;
+
+var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
+styleInject(css_248z$8);
+
 function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -829,12 +1138,12 @@ 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, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
+    var id = param.id, 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 setHighlightedItem = useGlobalContext().setHighlightedItem;
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, addModSlotRowTargetAndMakeRowEditable = _useGlobalContext.addModSlotRowTargetAndMakeRowEditable;
     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_;
@@ -842,22 +1151,24 @@ var useDropdown = function(param) {
     }) : choices;
     var prevIndex = useRef(null);
     var handleChange = function(value) {
-        var choiceIndex = choices.indexOf(value);
-        if (choiceIndex !== prevIndex.current) {
-            comboBoxState.setChoiceIndex(choiceIndex);
-            setIndex(choiceIndex);
-            onChange && onChange(choiceIndex);
-            // //@ts-expect-error
-            // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
-            if (displayValInHeader) {
-                setHighlightedItem && setHighlightedItem({
-                    label: label,
-                    value: value
-                });
+        if (!isDisabled) {
+            var choiceIndex = choices.indexOf(value);
+            if (choiceIndex !== prevIndex.current) {
+                comboBoxState.setChoiceIndex(choiceIndex);
+                setIndex(choiceIndex);
+                onChange && onChange(choiceIndex);
+                // //@ts-expect-error
+                // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
+                if (displayValInHeader) {
+                    highlightedItemChanged && highlightedItemChanged({
+                        label: label,
+                        value: value
+                    });
+                }
+                prevIndex.current = choiceIndex;
             }
-            prevIndex.current = choiceIndex;
+            return choices[choiceIndex];
         }
-        return choices[choiceIndex];
     };
     useEffect(function() {
         var comboBoxState = Juce.getComboBoxState(id);
@@ -868,7 +1179,6 @@ var useDropdown = function(param) {
     useEffect(function() {
         var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
             setIndex(comboBoxState.getChoiceIndex());
-            console.log(id, comboBoxState.getChoiceIndex(), 'IDDDIDIDIDIDIDIin dropdown');
         });
         var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
             setProperties(comboBoxState.properties);
@@ -881,13 +1191,16 @@ var useDropdown = function(param) {
         window
     ]);
     var onMouseEnter = function() {
-        if (displayValInHeader) {
-            setHighlightedItem && (setHighlightedItem === null || setHighlightedItem === void 0 ? void 0 : setHighlightedItem({
+        if (displayValInHeader && !isDisabled) {
+            highlightedItemChanged && (highlightedItemChanged === null || highlightedItemChanged === void 0 ? void 0 : highlightedItemChanged({
                 label: label,
                 value: choices === null || choices === void 0 ? void 0 : choices[index]
             }));
         }
     };
+    var onClick = function() {
+        addModSlotRowTargetAndMakeRowEditable(id);
+    };
     return {
         value: choices[index],
         index: index,
@@ -895,6 +1208,7 @@ var useDropdown = function(param) {
         choices: choices,
         filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
+        onClick: onClick,
         handleChange: handleChange
     };
 };
@@ -1156,7 +1470,7 @@ function Dropdown(param) {
         id: id,
         label: label,
         onChange: onChange
-    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange;
+    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange, onClick = _useDropdown.onClick;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         onMouseEnter: onMouseEnter,
@@ -1166,10 +1480,12 @@ function Dropdown(param) {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
-        className: classnames('Dropdown-button', className),
+        className: classnames('Combobox Dropdown-button', className),
         style: _object_spread$g({
             color: "".concat(color ? color : 'initial')
         }, style),
+        id: id,
+        onClick: onClick,
         "aria-label": "Assignee",
         onChange: function(value) {
             return console.log(value);
@@ -1492,12 +1808,15 @@ var useSlider = function(param) {
         end: 15000,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange; param.sliderElementRef;
+    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
     var clickListener = function clickListener(event) {
         var _event_target_closest;
         if (((_event_target_closest = event.target.closest('.Slider')) === null || _event_target_closest === void 0 ? void 0 : _event_target_closest.id) === id) {
             var _document_getElementById;
             setIsActive(true);
+            // Update the preview mod slot target selection in the mod matrix.
+            // This selection will be saved to the back end when a modifier is set for the target.
+            addModSlotRowTargetAndMakeRowEditable(id);
             (_document_getElementById = document.getElementById(id)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
             event.stopPropagation();
         } else {
@@ -1538,7 +1857,7 @@ var useSlider = function(param) {
     var normalisedValueRef = useRef(null);
     var sliderState = Juce.getSliderState(id);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter;
+    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 _useState2 = _sliced_to_array$c(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
     useEffect(function() {
         document.addEventListener('click', clickListener);
@@ -1549,7 +1868,9 @@ var useSlider = function(param) {
         };
     }, [
         window,
-        isActive
+        isActive,
+        automatableParamsList,
+        modSlotTargets
     ]);
     // Set the initial state
     //@ts-expect-error
@@ -1579,6 +1900,11 @@ var useSlider = function(param) {
             normalisedValueRef.current = mockInitialNormalisedValue;
         }
     }, []);
+    var changeHandler = useCallback(function(scaledValueFromState, sliderId) {
+        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), sliderId);
+    }, [
+        onChange
+    ]);
     // Update the local state from JUCE
     var updateLocalState = function(sliderState) {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
@@ -1586,7 +1912,7 @@ var useSlider = function(param) {
         var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
         normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
         setScaledValue(scaledValue);
-        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
+        changeHandler(scaledValueFromState, id);
         if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
             highlightedItemChanged({
                 label: label,
@@ -1616,7 +1942,8 @@ var useSlider = function(param) {
             };
         }
     }, [
-        window
+        window,
+        changeHandler
     ]);
     // Update JUCE state
     var setNormalisedState = function(newValue) {
@@ -1684,6 +2011,8 @@ var useSlider = function(param) {
             param.event;
             sliderState.sliderDragEnded();
         }
+    }, {
+        enabled: !isDisabled
     });
     var bindBarSliderDrag = function() {
         var drag = useDrag(function(param) {
@@ -1712,7 +2041,8 @@ var useSlider = function(param) {
                 sliderState.sliderDragEnded();
             }
         }, {
-            preventDefault: false
+            preventDefault: false,
+            enabled: !isDisabled
         });
         return drag();
     };
@@ -1763,6 +2093,8 @@ var useSlider = function(param) {
                 sliderState.sliderDragEnded();
             }
         }
+    }, {
+        enabled: !isDisabled
     });
     var setToDefaultState = function() {
         return setDefaultParameter(id);
@@ -2047,7 +2379,7 @@ function Slider(param) {
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
     }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
-        className: classnames('Slider-bar', 'relative')
+        className: classnames('Slider', 'Slider-bar', 'relative')
     }, drag()), {
         // onMouseEnter={onMouseEnter}
         id: id,
@@ -2321,13 +2653,15 @@ var Icons = /*#__PURE__*/ function(Icons) {
     return Icons;
 }({});
 var Undo = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
         stroke: color,
@@ -2343,13 +2677,15 @@ var Undo = function(param) {
     }));
 };
 var Redo = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M19.5 8C15.5 8 13 8 9 8C9 8 9 8 9 8C9 8 4 8 4 12.7059C4 18 9 18 9 18C12.4286 18 14.2857 18 17.7143 18",
         stroke: color,
@@ -2365,13 +2701,15 @@ var Redo = function(param) {
     }));
 };
 var Favorite = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         "stroke-width": "1.5",
         viewBox: "-7 -7 40 40",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z",
         stroke: color,
@@ -2380,13 +2718,15 @@ var Favorite = function(param) {
     }));
 };
 var Up = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         "fill-rule": "evenodd",
         "clip-rule": "evenodd",
@@ -2395,13 +2735,15 @@ var Up = function(param) {
     }));
 };
 var Down = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         "fill-rule": "evenodd",
         "clip-rule": "evenodd",
@@ -2410,13 +2752,15 @@ var Down = function(param) {
     }));
 };
 var Save = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         "stroke-width": "1.5",
         viewBox: "-7 -7 40 40",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z",
         stroke: color,
@@ -2432,13 +2776,15 @@ var Save = function(param) {
     }));
 };
 var Random = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
         viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M11.7 1.1732C11.8856 1.06603 12.1144 1.06603 12.3 1.17321L21.2263 6.3268C21.4119 6.43397 21.5263 6.63205 21.5263 6.84641V17.1536C21.5263 17.3679 21.4119 17.566 21.2263 17.6732L12.3 22.8268C12.1144 22.934 11.8856 22.934 11.7 22.8268L2.77372 17.6732C2.58808 17.566 2.47372 17.3679 2.47372 17.1536V6.84641C2.47372 6.63205 2.58808 6.43397 2.77372 6.32679L11.7 1.1732Z",
         stroke: color,
@@ -2489,15 +2835,15 @@ var Random = function(param) {
     }));
 };
 var Add = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        width: "24px",
-        height: "24px",
         "stroke-width": "1.5",
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        color: color
+        color: color,
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         d: "M6 12H12M18 12H12M12 12V6M12 12V18",
         stroke: color,
@@ -2507,15 +2853,15 @@ var Add = function(param) {
     }));
 };
 var Delete = function(param) {
-    var color = param.color;
+    var color = param.color, height = param.height;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        width: "24px",
-        height: "24px",
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         color: color,
-        "stroke-width": "1.5"
+        "stroke-width": "1.5",
+        height: height,
+        width: height
     }, /*#__PURE__*/ React__default.createElement("path", {
         "fill-rule": "evenodd",
         "clip-rule": "evenodd",
@@ -2552,7 +2898,7 @@ function Icon(param) {
             height: height
         }, style)
     }, /*#__PURE__*/ React__default.createElement(_$Icon, {
-        width: width,
+        height: width,
         color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
@@ -2608,7 +2954,7 @@ function IconButton(param) {
             height: height
         }, style)
     }, /*#__PURE__*/ React__default.createElement(Icon, {
-        width: width,
+        height: height,
         color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
@@ -3862,7 +4208,7 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n";
+var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  /* background: var(--bg-muted);\n  color: var(--color-gray-400); */\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n";
 styleInject(css_248z$1);
 
 var targetColors = [
@@ -3980,7 +4326,7 @@ var useCombobox = function(param) {
     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 _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlots = _useGlobalContext_globalState.modSlots;
+    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;
     //TODO: Filter choices for subsequent rows
     // const availableChoices = properties?.choices;
     useEffect(function() {
@@ -3991,6 +4337,14 @@ var useCombobox = function(param) {
     useEffect(function() {
         setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
     });
+    useEffect(function() {
+        if (modSlotPreview.slotId === id && modSlotPreview.targetIndex > 0) {
+            setValue(modSlotPreview.targetIndex);
+        }
+    }, [
+        modSlotTargets,
+        modSlotPreview
+    ]);
     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() {
@@ -4007,7 +4361,7 @@ var useCombobox = function(param) {
     }, [
         window
     ]);
-    var selectedChoices = (_Object_values = Object.values(modSlots)) === null || _Object_values === void 0 ? void 0 : _Object_values.filter(function(item) {
+    var selectedChoices = (_Object_values = Object.values(modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.filter(function(item) {
         return item > 0;
     });
     var selectedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item, i) {
@@ -4032,6 +4386,9 @@ var useCombobox = function(param) {
     };
     var onMouseEnter = function() {
     };
+    var onClick = function() {
+        addModSlotRowTargetAndMakeRowEditable(id);
+    };
     return {
         value: value,
         valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value],
@@ -4039,6 +4396,7 @@ var useCombobox = function(param) {
         choices: properties === null || properties === void 0 ? void 0 : properties.choices,
         filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
+        onClick: onClick,
         handleChange: handleChange
     };
 };
@@ -4131,8 +4489,8 @@ function ModMatrixComboboxCell(param) {
     useEffect(function() {
         if (target) {
             var sliderState = Juce.getSliderState(target);
-            var normalisedValue = sliderState.getNormalisedValue();
-            setTargetValue(normalisedValue);
+            var scaledValue = sliderState.scaledValue;
+            setTargetValue(scaledValue);
         }
     }, [
         target
@@ -4165,14 +4523,15 @@ function ModMatrixComboboxCell(param) {
         },
         autoFocus: true
     }), /*#__PURE__*/ React__default.createElement(ComboboxButton, {
-        className: "ModMatrixComboboxButton"
+        className: "ModMatrixComboboxButton",
+        id: rowId
     }, /*#__PURE__*/ React__default.createElement(Icon, {
         icon: Icon.icon.down,
         backgroundColor: "transparent",
         onClick: function(e) {
             return e.preventDefault();
         },
-        color: color,
+        color: 'var(--color-text)',
         width: "20px",
         height: "20px"
     }))), /*#__PURE__*/ React__default.createElement(ComboboxOptions, {
@@ -4224,12 +4583,16 @@ function _object_spread$3(target) {
     return target;
 }
 function ModMatrixToggleCell(param) {
-    var modifier = param.modifier, color = param.color, style = param.style;
+    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 _useGlobalContext = useGlobalContext(), getDefaultParameter = _useGlobalContext.getDefaultParameter, updateModSlotTargetAndResetPreview = _useGlobalContext.updateModSlotTargetAndResetPreview, modSlotPreview = _useGlobalContext.globalState.modSlotPreview;
+    var rowState = Juce.getComboBoxState(rowId);
     var _useDropdown = useDropdown({
-        id: modifier
+        id: modifier,
+        isDisabled: isDisabled,
+        onChange: updateModSlotTargetAndResetPreview
     }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement(Box, {
-        className: "ModMatrixCell ModMatrixToggleCell",
+        className: "ModMatrixCell ModMatrixToggleCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
@@ -4238,9 +4601,16 @@ function ModMatrixToggleCell(param) {
             pointerEvents: 'all'
         }, style),
         height: '2.5rem',
-        onClick: function() {
+        onClick: function(val) {
+            // Update the toggle state
             var newIndex = Math.abs(index - 1);
             handleChange(choices[newIndex]);
+            // Save the selected row target to JUCE
+            var defaultParameter = getDefaultParameter(modifier);
+            var isRowSet = rowState === null || rowState === void 0 ? void 0 : rowState.getChoiceIndex();
+            if (!isRowSet && newIndex !== defaultParameter && modSlotPreview.slotId === rowId) {
+                rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex(modSlotPreview.targetIndex);
+            }
         }
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flex: "1",
@@ -4302,17 +4672,19 @@ function _object_spread_props(target, source) {
     return target;
 }
 function ModMatrixCell(param) {
-    var modifier = param.modifier, color = param.color, style = param.style;
+    var modifier = param.modifier, isDisabled = param.isDisabled, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
+    var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotTargetAndResetPreview = _useGlobalContext.updateModSlotTargetAndResetPreview;
     var _useSlider = useSlider({
         id: modifier,
         displayValInHeader: false,
         orientation: Orientation.horizontal,
-        dragOrientation: Orientation.vertical
+        dragOrientation: Orientation.vertical,
+        onChange: updateModSlotTargetAndResetPreview,
+        isDisabled: isDisabled
     }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
-    var setDefaultParameter = useGlobalContext().setDefaultParameter;
     return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$2({
-        className: "ModMatrixCell",
+        className: "ModMatrixCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
@@ -4351,31 +4723,30 @@ function ModMatrixCell(param) {
 }
 
 function ModMatrixRow(param) {
-    var rowId = param.rowId, key = param.key, _param_isPreview = param.//   rowIndex,
-    isPreview, isPreview = _param_isPreview === void 0 ? false : _param_isPreview, setIsPreview = param.setIsPreview;
-    var _Object_keys, _modSlotParams_modSlotIndex;
-    //   const [rowTarget, setRowTarget] = useState<number>();
+    var rowId = param.rowId, key = param.key;
+    var _modSlotParams_rowId;
     //   const getModSlotsFunc = Juce.getNativeFunction('getModSlots');
-    var _useGlobalContext = useGlobalContext(), modSlotUpdated = _useGlobalContext.modSlotUpdated, setDefaultParameter = _useGlobalContext.setDefaultParameter, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParams = _useGlobalContext_globalState.modSlotParams, modSlots = _useGlobalContext_globalState.modSlots;
-    var modSlotIndex = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.indexOf(rowId);
+    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) {
-            modSlotUpdated([
-                rowId,
-                newTarget
-            ]);
+            // modSlotTargetUpdated([rowId, newTarget]);
+            if (rowId === modSlotPreview.slotId) {
+                modSlotPreviewTargetIndexUpdated(newTarget);
+                modSlotPreviewIsEditableUpdated(true);
+            }
         } else {
-            var _modSlotParams_modSlotIndex;
-            modSlotUpdated([
+            var _modSlotParams_rowId;
+            modSlotTargetUpdated([
                 rowId,
                 0
             ]);
-            modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex.forEach(function(item) {
+            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 (isPreview && newTarget) {
-            setIsPreview(false);
+            if (!modSlotPreview.slotId) {
+                setNewModSlotPreview();
+            }
         }
     };
     return /*#__PURE__*/ React__default.createElement(Box, {
@@ -4390,7 +4761,7 @@ function ModMatrixRow(param) {
             color: targetColors[0]
         }
     }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
-        target: modSlots[rowId],
+        target: modSlotTargets[rowId],
         handleTargetChange: handleTargetChange,
         rowId: rowId,
         color: targetColors[0],
@@ -4398,8 +4769,8 @@ function ModMatrixRow(param) {
             width: ComboboxCellWidth
         },
         key: rowId
-    })), modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex.map(function(item, i, arr) {
-        var _modSlotParams_modSlotIndex, _modSlotParams_modSlotIndex1;
+    })), modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_rowId = modSlotParams[rowId]) === null || _modSlotParams_rowId === void 0 ? void 0 : _modSlotParams_rowId.map(function(item, i, arr) {
+        var _modSlotParams_rowId, _modSlotParams_rowId1;
         return /*#__PURE__*/ React__default.createElement(Box, {
             className: "ModMatrixBodyCell",
             flexDirection: Box.flexDirection.column,
@@ -4408,11 +4779,15 @@ function ModMatrixRow(param) {
             },
             key: item
         }, i !== arr.length - 1 ? /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
-            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex[i],
-            color: targetColors[i + 1]
+            // rowId={rowId}
+            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_rowId = modSlotParams[rowId]) === null || _modSlotParams_rowId === void 0 ? void 0 : _modSlotParams_rowId[i],
+            color: targetColors[i + 1],
+            isDisabled: modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex
         }) : /*#__PURE__*/ React__default.createElement(ModMatrixToggleCell, {
-            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex1 = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex1 === void 0 ? void 0 : _modSlotParams_modSlotIndex1[i],
-            color: targetColors[i + 1]
+            rowId: rowId,
+            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_rowId1 = modSlotParams[rowId]) === null || _modSlotParams_rowId1 === void 0 ? void 0 : _modSlotParams_rowId1[i],
+            color: targetColors[i + 1],
+            isDisabled: modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex
         }));
     }));
 }
@@ -4626,12 +5001,48 @@ function _ts_generator$1(thisArg, body) {
 //
 function ModMatrix(param) {
     var className = param.className, style = param.style;
-    var _Object_keys, _Object_keys1, _Object_keys2;
-    var _useState = _sliced_to_array$5(useState(), 2), previewRowIsActive = _useState[0], setPreviewRowIsActive = _useState[1];
     var getAutomatableParamsListFunc = Juce.getNativeFunction('getAutomatableParamsList');
     var getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
     var getModSlotParamsFunc = Juce.getNativeFunction('getModSlotParams');
-    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlots = _useGlobalContext_globalState.modSlots;
+    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;
+    // Empty state preview row
+    useEffect(function() {
+        var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
+            return modSlotTargets[item] <= 0;
+        });
+        if ((unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) > 0 && modSlotPreview.slotId.length === 0) {
+            setNewModSlotPreview();
+        }
+    }, [
+        window,
+        modSlotIds,
+        modSlotPreview
+    ]);
+    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) {
+            if ((modSlotTargets === null || modSlotTargets === void 0 ? void 0 : modSlotTargets[item]) > 0) {
+                acc === null || acc === void 0 ? void 0 : acc.push(item);
+            }
+            return acc;
+        }, []).sort();
+        var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
+            return modSlotTargets[item] <= 0;
+        });
+        if (unassignedModSlots.length > 0) {
+            setDisplayedModSlots(_to_consumable_array(displayedSlots).concat([
+                modSlotPreview.slotId
+            ]));
+        } else {
+            setDisplayedModSlots(displayedSlots);
+        }
+    }, [
+        window,
+        modSlotTargets,
+        modSlotIds,
+        modSlotPreview
+    ]);
     var getAPVTSParams = function() {
         return _async_to_generator$1(function() {
             var automatableParamsList, modSlotsData, modSlotParams, e;
@@ -4692,37 +5103,9 @@ function ModMatrix(param) {
     }, [
         window
     ]);
-    useEffect(function() {
-        var _Object_keys;
-        var assignedModSlots = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.filter(function(item) {
-            return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0;
-        });
-        if (!assignedModSlots.length) {
-            setPreviewRowIsActive(true);
-        }
-    }, [
-        modSlots
-    ]);
     var headers = [
         'Target'
     ].concat(_to_consumable_array(modSlotParamLabels));
-    // [slot2, slot3] unassigned
-    // [slot1] assigned
-    var assignedModSlots = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.filter(function(item) {
-        return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0;
-    });
-    var unassignedModSlots = (_Object_keys1 = Object.keys(modSlots)) === null || _Object_keys1 === void 0 ? void 0 : _Object_keys1.filter(function(item) {
-        return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) === 0;
-    });
-    var displayedModSlots = (_Object_keys2 = Object.keys(modSlots)) === null || _Object_keys2 === void 0 ? void 0 : _Object_keys2.reduce(function(acc, item) {
-        if ((modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0 || previewRowIsActive && item === (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots[0])) {
-            return _to_consumable_array(acc).concat([
-                item
-            ]);
-        } else {
-            return _to_consumable_array(acc);
-        }
-    }, []);
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         padding: [
@@ -4757,31 +5140,9 @@ 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,
-            // rowIndex={i}
-            setIsPreview: setPreviewRowIsActive,
-            isPreview: previewRowIsActive && (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.indexOf(item)) === 0
+            key: item
         });
-    }) : null), /*#__PURE__*/ React__default.createElement(Box, {
-        justifyContent: Box.justifyContent.flexStart
-    }, /*#__PURE__*/ React__default.createElement(IconButton, {
-        id: "addModMatrixRow",
-        icon: IconButton.icon.add,
-        margin: [
-            IconButton.margin.small
-        ],
-        padding: [
-            IconButton.padding.small
-        ],
-        disabled: (assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.length) === 0 || (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) === 0,
-        // color="var(--color-gray-500)"
-        // backgroundColor="transparent"
-        onClick: function(e) {
-            if ((unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) > 0) {
-                setPreviewRowIsActive(true);
-            }
-        }
-    })));
+    }) : null));
 }
 
 var svgInnerMargin = 5;