@antimatter-audio/antimatter-ui 10.2.0 → 10.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext, useMemo } from 'react';
+import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext } 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';
@@ -218,7 +218,7 @@ function _array_like_to_array$c(arr, len) {
 function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$i(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -258,7 +258,7 @@ function _iterable_to_array_limit$c(arr, i) {
 function _non_iterable_rest$c() {
     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$i(target) {
+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);
@@ -268,7 +268,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
@@ -347,7 +347,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$i({
+        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], ")"),
@@ -416,7 +416,7 @@ function _array_like_to_array$b(arr, len) {
 function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$h(obj, key, value) {
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -456,7 +456,7 @@ function _iterable_to_array_limit$b(arr, i) {
 function _non_iterable_rest$b() {
     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$h(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -466,7 +466,7 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$h(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
@@ -507,9 +507,9 @@ var defaultGlobalStateValue = {
         label: 'Antimatter Audio',
         value: 0
     },
-    automatableParams: [],
+    automatableParamsList: [],
     automatableParamLabels: [],
-    modSlots: [],
+    modSlots: {},
     modSlotParams: [],
     modSlotParamLabels: [],
     advancedView: false
@@ -517,33 +517,41 @@ var defaultGlobalStateValue = {
 // Reducer function to handle state updates
 var reducer = function(state, action) {
     switch(action.type){
-        case 'SET_HIGHLIGHTED_ITEM':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'HIGHLIGHTED_ITEM_CHANGED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
                 highlightedItem: action.payload
             });
-        case 'TOGGLE_ADVANCED_VIEW':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'ADVANCED_VIEW_TOGGLED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
                 advancedView: action.payload
             });
-        case 'SET_AUTOMATABLE_PARAMS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                automatableParams: action.payload
+        case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                automatableParamsList: action.payload
             });
-        case 'SET_AUTOMATABLE_PARAM_LABELS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
                 automatableParamLabels: action.payload
             });
-        case 'SET_MOD_SLOTS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlots: action.payload
+        case 'MOD_SLOTS_RECEIVED':
+            var _action_payload;
+            return _object_spread_props$3(_object_spread$i({}, 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$3(_object_spread$i({}, acc), _define_property$i({}, val[0], val[1]));
+                }, {})
+            });
+        case 'MOD_SLOT_UPDATED':
+            var _action_payload1, _action_payload2;
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlots: _object_spread_props$3(_object_spread$i({}, state === null || state === void 0 ? void 0 : state.modSlots), _define_property$i({}, (_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 'SET_MOD_SLOT_PARAMS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlotParams: action.payload
+        case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotParams: action === null || action === void 0 ? void 0 : action.payload
             });
-        case 'SET_MOD_SLOT_PARAM_LABELS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlotParamLabels: action.payload
+        case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
             return state;
@@ -562,45 +570,51 @@ function useGlobalContext(selector) {
 function GlobalContextProvider(param) {
     var children = param.children;
     var _useReducer = _sliced_to_array$b(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
-    var setHighlightedItem = useCallback(function(highlightedItem) {
+    var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
-            type: 'SET_HIGHLIGHTED_ITEM',
+            type: 'HIGHLIGHTED_ITEM_CHANGED',
             payload: highlightedItem
         });
     }, []);
-    var setAdvancedView = useCallback(function(advancedView) {
+    var advancedViewToggled = useCallback(function(advancedView) {
         dispatch({
-            type: 'TOGGLE_ADVANCED_VIEW',
+            type: 'ADVANCED_VIEW_TOGGLED',
             payload: advancedView
         });
     }, []);
-    var setAutomatableParams = useCallback(function(automatableParams) {
+    var automatableParamsListReceived = useCallback(function(automatableParamsList) {
         dispatch({
-            type: 'SET_AUTOMATABLE_PARAMS',
-            payload: automatableParams
+            type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
+            payload: automatableParamsList
         });
     }, []);
-    var setAutomatableParamLabels = useCallback(function(automatableParamLabels) {
+    var automatableParamLabelsReceived = useCallback(function(automatableParamLabels) {
         dispatch({
-            type: 'SET_AUTOMATABLE_PARAM_LABELS',
+            type: 'AUTOMATABLE_PARAM_LABELS_RECEIVED',
             payload: automatableParamLabels
         });
     }, []);
-    var setModSlots = useCallback(function(modSlots) {
+    var modSlotsReceived = useCallback(function(modSlots) {
         dispatch({
-            type: 'SET_MOD_SLOTS',
+            type: 'MOD_SLOTS_RECEIVED',
             payload: modSlots
         });
     }, []);
-    var setModSlotParams = useCallback(function(modSlotParams) {
+    var modSlotUpdated = useCallback(function(modSlot) {
+        dispatch({
+            type: 'MOD_SLOT_UPDATED',
+            payload: modSlot
+        });
+    }, []);
+    var modSlotParamsListReceived = useCallback(function(modSlotParams) {
         dispatch({
-            type: 'SET_MOD_SLOT_PARAMS',
+            type: 'MOD_SLOT_PARAMS_LIST_RECEIVED',
             payload: modSlotParams
         });
     }, []);
-    var setModSlotParamLabels = useCallback(function(modSlotParamLables) {
+    var modSlotParamLabelsReceived = useCallback(function(modSlotParamLables) {
         dispatch({
-            type: 'SET_MOD_SLOT_PARAM_LABELS',
+            type: 'MOD_SLOT_PARAM_LABELS_RECIEVED',
             payload: modSlotParamLables
         });
     }, []);
@@ -613,13 +627,14 @@ function GlobalContextProvider(param) {
     });
     var value = {
         globalState: state,
-        setHighlightedItem: setHighlightedItem,
-        setAdvancedView: setAdvancedView,
-        setAutomatableParams: setAutomatableParams,
-        setAutomatableParamLabels: setAutomatableParamLabels,
-        setModSlots: setModSlots,
-        setModSlotParams: setModSlotParams,
-        setModSlotParamLabels: setModSlotParamLabels,
+        highlightedItemChanged: highlightedItemChanged,
+        advancedViewToggled: advancedViewToggled,
+        automatableParamsListReceived: automatableParamsListReceived,
+        automatableParamLabelsReceived: automatableParamLabelsReceived,
+        modSlotsReceived: modSlotsReceived,
+        modSlotUpdated: modSlotUpdated,
+        modSlotParamsListReceived: modSlotParamsListReceived,
+        modSlotParamLabelsReceived: modSlotParamLabelsReceived,
         useRandom: useRandom
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
@@ -673,7 +688,7 @@ function _unsupported_iterable_to_array$a(o, minLen) {
     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$a(o, minLen);
 }
-var useCombobox = function(param) {
+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 _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
@@ -687,21 +702,19 @@ var useCombobox = function(param) {
     }) : choices;
     var prevIndex = useRef(null);
     var handleChange = function(value) {
-        var index = choices === null || choices === void 0 ? void 0 : choices.indexOf(value);
-        // const index = 0;
-        if (index !== prevIndex.current) {
-            comboBoxState.setChoiceIndex(index);
+        if (value !== prevIndex.current) {
+            comboBoxState.setChoiceIndex(value);
             setValue(value);
-            onChange && onChange(index);
+            onChange && onChange(value);
             // //@ts-expect-error
             // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
             if (displayValInHeader) {
                 setHighlightedItem({
                     label: label,
-                    value: choices === null || choices === void 0 ? void 0 : choices[index]
+                    value: choices === null || choices === void 0 ? void 0 : choices[value]
                 });
             }
-            prevIndex.current = index;
+            prevIndex.current = value;
         }
     };
     useEffect(function() {
@@ -744,17 +757,12 @@ var useCombobox = function(param) {
 };
 
 function Dropdown(param) {
-    var _param_items = param.items, items = _param_items === void 0 ? [
-        'Mock Item 1',
-        'Mock Item 2',
-        'Mock Item 3'
-    ] : _param_items, label = param.label, className = param.className, onChange = param.onChange, id = param.id, style = param.style;
-    var _useCombobox = useCombobox({
+    var label = param.label, className = param.className, onChange = param.onChange, id = param.id, style = param.style;
+    var _useDropdown = useDropdown({
         id: id,
         label: label,
-        items: items,
         onChange: onChange
-    }), value = _useCombobox.value, choices = _useCombobox.choices, onMouseEnter = _useCombobox.onMouseEnter, handleChange = _useCombobox.handleChange;
+    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement("div", {
         onMouseEnter: onMouseEnter
     }, /*#__PURE__*/ React__default.createElement(Listbox, {
@@ -767,11 +775,11 @@ function Dropdown(param) {
         onChange: function(value) {
             return console.log(value);
         }
-    }, choices[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
+    }, value), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
         anchor: "bottom",
         portal: false,
         className: "Dropdown-items z-10"
-    }, choices.map(function(item, i) {
+    }, choices === null || choices === void 0 ? void 0 : choices.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ListboxOption, {
             className: classnames('Dropdown-item'),
             key: item,
@@ -863,7 +871,7 @@ function _array_like_to_array$9(arr, len) {
 function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$g(obj, key, value) {
+function _define_property$h(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -903,7 +911,7 @@ function _iterable_to_array_limit$9(arr, i) {
 function _non_iterable_rest$9() {
     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$g(target) {
+function _object_spread$h(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -913,7 +921,7 @@ function _object_spread$g(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
+            _define_property$h(target, key, source[key]);
         });
     }
     return target;
@@ -1045,7 +1053,7 @@ function Input(param) {
         id: id,
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$g({
+        style: _object_spread$h({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
             color: hasError ? 'red' : textColor,
@@ -1184,7 +1192,7 @@ var useSlider = function(param) {
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, setHighlightedItem = _useGlobalContext.setHighlightedItem;
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged;
     // Set the initial state
     //@ts-expect-error
     useEffect(function() {
@@ -1248,7 +1256,7 @@ var useSlider = function(param) {
         setScaledValue(scaledValue);
         onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
         if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            setHighlightedItem({
+            highlightedItemChanged({
                 label: label,
                 value: scaledValue
             });
@@ -1358,21 +1366,12 @@ var useSlider = function(param) {
     };
     var onMouseEnter = function() {
         if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            setHighlightedItem({
+            highlightedItemChanged({
                 label: label,
                 value: scaledValue
             });
         }
     };
-    // TODO: Refactor
-    // const onChangeStarted = () => sliderState.sliderDragStarted();
-    // const onChangeCommitted = () => sliderState.sliderDragEnded();
-    // useEffect(() => {
-    //   console.log(
-    //     normalisedValueRef.current,
-    //     'normalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.current',
-    //   );
-    // }, [normalisedValueRef.current]);
     return {
         setNormalisedState: setNormalisedState,
         setScaledState: setScaledState,
@@ -1415,7 +1414,7 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
-function _define_property$f(obj, key, value) {
+function _define_property$g(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1428,7 +1427,7 @@ function _define_property$f(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$f(target) {
+function _object_spread$g(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1438,7 +1437,7 @@ function _object_spread$f(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$f(target, key, source[key]);
+            _define_property$g(target, key, source[key]);
         });
     }
     return target;
@@ -1521,13 +1520,13 @@ function Box(_param) {
     ]);
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$f({
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$g({
         // id="globalValues"
         key: key,
         className: className,
         onClick: onClick
     }, rest), {
-        style: _object_spread$f({
+        style: _object_spread$g({
             flexWrap: flexWrap,
             display: display,
             gap: "var(--gap-".concat(gap, ")"),
@@ -1558,7 +1557,7 @@ Box.padding = Spacing;
 Box.flexWrap = FlexWrap;
 Box.tag = LayoutTags;
 
-function _define_property$e(obj, key, value) {
+function _define_property$f(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1571,7 +1570,7 @@ function _define_property$e(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$e(target) {
+function _object_spread$f(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1581,7 +1580,7 @@ function _object_spread$e(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$e(target, key, source[key]);
+            _define_property$f(target, key, source[key]);
         });
     }
     return target;
@@ -1594,7 +1593,7 @@ function Label(param) {
     return /*#__PURE__*/ React.createElement("label", {
         id: id,
         htmlFor: htmlFor,
-        style: _object_spread$e({
+        style: _object_spread$f({
             fontSize: "var(--text-".concat(fontSize),
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
@@ -1612,7 +1611,7 @@ Label.fontSize = FontSizes;
 var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
 styleInject(css_248z$6);
 
-function _define_property$d(obj, key, value) {
+function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1625,7 +1624,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$d(target) {
+function _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1635,7 +1634,7 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$e(target, key, source[key]);
         });
     }
     return target;
@@ -1679,11 +1678,11 @@ function RotarySlider(param) {
         flexDirection: Box.flexDirection.column
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$e({
         className: classnames('RotarySlider', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$d({
+        style: _object_spread$e({
             touchAction: 'none'
         }, style)
     }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
@@ -1693,7 +1692,7 @@ function RotarySlider(param) {
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-Indicator'),
-        style: _object_spread$d({
+        style: _object_spread$e({
             backgroundColor: color
         }, style)
     })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
@@ -1706,7 +1705,7 @@ function RotarySlider(param) {
 }
 RotarySlider.sliderPolarity = Polarity;
 
-function _define_property$c(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1719,7 +1718,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$c(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1729,7 +1728,7 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -1775,11 +1774,11 @@ function Slider(param) {
         className: classnames(className)
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$c({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$d({
         className: classnames('Slider-bar', 'relative')
     }, bindBarSliderDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$c({
+        style: _object_spread$d({
             touchAction: 'none',
             backgroundColor: 'var(--bg-input)',
             minWidth: sliderOrientation === Orientation.horizontal ? '100px' : '20px',
@@ -1788,7 +1787,7 @@ function Slider(param) {
     }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-input')}
-        style: _object_spread$c({
+        style: _object_spread$d({
             position: 'absolute',
             backgroundColor: color,
             pointerEvents: 'none'
@@ -1835,7 +1834,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$b(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1848,7 +1847,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$b(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1858,7 +1857,7 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -1871,7 +1870,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$b({
+        style: _object_spread$c({
             fontSize: "var(--text-".concat(fontSize),
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
@@ -1972,7 +1971,7 @@ var useIndicator = function(param) {
     };
 };
 
-function _define_property$a(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1985,7 +1984,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$a(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1995,7 +1994,7 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -2012,7 +2011,7 @@ function IndicatorLight(param) {
     }, /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: classnames('IndicatorLight', 'bg-input', className),
-        style: _object_spread$a({
+        style: _object_spread$b({
             width: '12px',
             height: '12px',
             background: isActive ? color : ''
@@ -2025,7 +2024,7 @@ function IndicatorLight(param) {
 var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\nsvg {\n  height: 100%;\n  width: 100%;\n}\n";
 styleInject(css_248z$5);
 
-function _define_property$9(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2038,7 +2037,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2048,7 +2047,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -2292,7 +2291,7 @@ function Icon(param) {
         className: "Icon ".concat(className),
         onClick: onClick,
         padding: padding,
-        style: _object_spread$9({
+        style: _object_spread$a({
             width: width,
             height: height
         }, style)
@@ -2305,7 +2304,7 @@ Icon.icon = Icons;
 Icon.padding = Spacing;
 Icon.margin = Spacing;
 
-function _define_property$8(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2318,7 +2317,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2328,7 +2327,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -2347,7 +2346,7 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
-        style: _object_spread$8({
+        style: _object_spread$9({
             backgroundColor: backgroundColor,
             width: width,
             height: height
@@ -2361,7 +2360,7 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _define_property$7(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2374,7 +2373,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2384,7 +2383,7 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
@@ -2396,7 +2395,7 @@ function KeyValueDisplayScreen(param) {
         // justifyContent={Box.justifyContent.flexStart}
         alignItems: Box.alignItems.flexStart,
         gap: Box.gap.small,
-        style: _object_spread$7({}, style),
+        style: _object_spread$8({}, style),
         padding: [
             Box.padding.small,
             Box.padding.none,
@@ -2509,7 +2508,7 @@ function _array_like_to_array$6(arr, len) {
 function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$6(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2549,7 +2548,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$6(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2559,7 +2558,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -2595,7 +2594,7 @@ function Oscilloscope(param) {
     }, []);
     return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
-        style: _object_spread$6({
+        style: _object_spread$7({
             height: height
         }, style),
         className: classnames('Oscilloscope', className)
@@ -3106,7 +3105,7 @@ function _async_to_generator$2(fn) {
         });
     };
 }
-function _define_property$5(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3146,7 +3145,7 @@ function _iterable_to_array_limit$4(arr, i) {
 function _non_iterable_rest$4() {
     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$5(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3156,7 +3155,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
@@ -3275,7 +3274,7 @@ function ModuleHeader(param) {
     var isLocalhost = window.location.hostname === 'localhost';
     var _useState = _sliced_to_array$4(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
     var _useState1 = _sliced_to_array$4(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, setAdvancedView = _useGlobalContext.setAdvancedView;
+    var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, advancedViewToggled = _useGlobalContext.advancedViewToggled;
     var handleUndo = function() {
         undo();
     };
@@ -3302,7 +3301,7 @@ function ModuleHeader(param) {
                         case 1:
                             advancedViewStatus = _state.sent();
                             setAdvancedViewFunc(!advancedViewStatus);
-                            setAdvancedView(!advancedViewStatus);
+                            advancedViewToggled(!advancedViewStatus);
                             return [
                                 3,
                                 3
@@ -3352,7 +3351,7 @@ function ModuleHeader(param) {
                                 ];
                             case 1:
                                 advancedViewStatus = _state.sent();
-                                setAdvancedView(advancedViewStatus);
+                                advancedViewToggled(advancedViewStatus);
                                 return [
                                     3,
                                     3
@@ -3441,7 +3440,7 @@ function ModuleHeader(param) {
             Box.padding.large
         ],
         className: classnames('ModuleHeader', className),
-        style: _object_spread$5({}, style)
+        style: _object_spread$6({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
@@ -3513,7 +3512,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.ModMatrixComboboxCell {\n  background: #252429;\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}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\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  cursor: grab;\n}\n\n.ModMatrixCell:active {\n  cursor: grabbing;\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 = [
@@ -3523,11 +3522,12 @@ var targetColors = [
     '#ce5847',
     '#d98368',
     '#E0859D',
-    '#4DA1CB'
+    '#4DA1CB',
+    '#cb4d62'
 ];
 var ComboboxCellWidth = '217px';
 
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3540,7 +3540,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-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);
@@ -3550,7 +3550,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;
@@ -3566,7 +3566,7 @@ function SingleBarViz(param) {
             position: 'relative'
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$4({
+        style: _object_spread$5({
             position: 'absolute',
             background: background
         }, getBarTransformStyles({
@@ -3586,7 +3586,122 @@ function _array_like_to_array$3(arr, len) {
 function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$3(obj, key, value) {
+function _iterable_to_array_limit$3(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$3() {
+    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 _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+}
+function _unsupported_iterable_to_array$3(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$3(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$3(o, minLen);
+}
+var useCombobox = function(param) {
+    var id = param.id, filter = param.filter, onChange = param.onChange;
+    var _Object_values;
+    var comboBoxState = Juce.getComboBoxState(id);
+    var _useState = _sliced_to_array$3(useState(0), 2), value = _useState[0], setValue = _useState[1];
+    var _useState1 = _sliced_to_array$3(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;
+    //TODO: Filter choices for subsequent rows
+    // const availableChoices = properties?.choices;
+    useEffect(function() {
+        setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+    }, [
+        id
+    ]);
+    useEffect(function() {
+        setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
+    });
+    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());
+        });
+        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);
+        });
+        return function cleanup() {
+            var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.removeListener(valueListenerId);
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.removeListener(propertiesListenerId);
+        };
+    }, [
+        window
+    ]);
+    var selectedChoices = (_Object_values = Object.values(modSlots)) === 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) {
+        return selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices.includes(i);
+    });
+    var displayedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item) {
+        return !(selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.includes(item)) || item === automatableParamLabels[value];
+    });
+    var filteredChoices = filter && (filter === null || filter === void 0 ? void 0 : filter.length) > 1 ? displayedLabels === null || displayedLabels === void 0 ? void 0 : displayedLabels.filter(function(item) {
+        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;
+        }
+    };
+    var onMouseEnter = function() {
+    };
+    return {
+        value: value,
+        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value],
+        setValue: setValue,
+        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
+        filteredChoices: filteredChoices,
+        onMouseEnter: onMouseEnter,
+        handleChange: handleChange
+    };
+};
+
+function _array_like_to_array$2(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$2(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3599,7 +3714,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3623,10 +3738,10 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$2() {
     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$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);
@@ -3636,34 +3751,33 @@ 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;
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2(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$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
-    var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, color = param.color, style = param.style;
-    var _useState = _sliced_to_array$3(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
-    var _useState1 = _sliced_to_array$3(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
-    var globalState = useGlobalContext().globalState;
+    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$2(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
+    var _useState1 = _sliced_to_array$2(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
+    var _useGlobalContext = useGlobalContext(), automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
-        items: globalState === null || globalState === void 0 ? void 0 : globalState.automatableParams,
         filter: filterString,
-        displayValInHeader: false,
         onChange: handleTargetChange
-    }), value = _useCombobox.value, choices = _useCombobox.choices, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
+    }), value = _useCombobox.value, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
     useEffect(function() {
         if (target) {
             var sliderState = Juce.getSliderState(target);
@@ -3673,17 +3787,12 @@ function ModMatrixComboboxCell(param) {
     }, [
         target
     ]);
-    // useEffect(() => {
-    //   console.log(
-    //     globalState?.automatableParams,
-    //     'globalState?.automatableParams',
-    //   );
-    // });
     return /*#__PURE__*/ React__default.createElement(Box, {
+        key: key,
         className: "ModMatrixCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexEnd,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$3({
+        style: _object_spread$4({
             color: color
         }, style),
         padding: [
@@ -3696,13 +3805,15 @@ function ModMatrixComboboxCell(param) {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
-        displayValue: function() {
-            var _globalState_automatableParamLabels;
-            return globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[value];
+        displayValue: function(item) {
+            return value ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value] : '';
         },
+        placeholder: "Select a target...",
         onChange: function(e) {
-            return setFilterString(e.target.value);
-        }
+            var _e_target;
+            setFilterString(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.value);
+        },
+        autoFocus: true
     }), /*#__PURE__*/ React__default.createElement(ComboboxButton, {
         className: "ModMatrixComboboxButton"
     }, /*#__PURE__*/ React__default.createElement(Icon, {
@@ -3719,20 +3830,14 @@ function ModMatrixComboboxCell(param) {
         //   anchor="bottom"
         transition: true
     }, filteredChoices === null || filteredChoices === void 0 ? void 0 : filteredChoices.map(function(item) {
-        var _globalState_automatableParamLabels;
-        return(//   <Box
-        //     padding={[Box.padding.medium, Box.padding.large]}
-        //     justifyContent={Box.justifyContent.flexStart}
-        //     className="ModMatrixComboboxItemContainer"
-        //   >
-        /*#__PURE__*/ React__default.createElement(ComboboxOption, {
+        return /*#__PURE__*/ React__default.createElement(ComboboxOption, {
             className: "ModMatrixComboboxItem",
             key: item,
             value: item
-        }, /*#__PURE__*/ React__default.createElement(Label, null, item ? globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[choices === null || choices === void 0 ? void 0 : choices.indexOf(item)] : '')));
+        }, /*#__PURE__*/ React__default.createElement(Label, null, item));
     }))), /*#__PURE__*/ React__default.createElement(SingleBarViz, {
         value: targetValue,
-        polarity: SingleBarViz.polarity.linear,
+        polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.linear,
         background: color,
         style: {
             alignSelf: 'flex-end'
@@ -3740,6 +3845,65 @@ function ModMatrixComboboxCell(param) {
     }));
 }
 
+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 ModMatrixToggleCell(param) {
+    var modifier = param.modifier, color = param.color, style = param.style;
+    var _useDropdown = useDropdown({
+        id: modifier
+    }), value = _useDropdown.value, handleChange = _useDropdown.handleChange;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixCell ModMatrixToggleCell",
+        justifyContent: Box.justifyContent.flexEnd,
+        alignItems: Box.alignItems.flexStart,
+        flexDirection: Box.flexDirection.column,
+        style: _object_spread$3({
+            color: color,
+            pointerEvents: 'all'
+        }, style),
+        height: '2.5rem',
+        onClick: function() {
+            var newValue = Math.abs(value - 1);
+            handleChange(newValue);
+        }
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "1",
+        style: {
+            pointerEvents: 'none'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        style: {
+            pointerEvents: 'none'
+        }
+    }, Object.keys(Polarity)[value] || '0')));
+}
+
 function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -3769,7 +3933,8 @@ function _object_spread$2(target) {
     return target;
 }
 function ModMatrixCell(param) {
-    param.target; var modifier = param.modifier; param.value; var color = param.color, style = param.style;
+    var modifier = param.modifier, color = param.color, style = param.style;
+    var _SingleBarViz_polarity;
     var _useSlider = useSlider({
         id: modifier,
         displayValInHeader: false
@@ -3797,73 +3962,52 @@ function ModMatrixCell(param) {
         }
     }, /*#__PURE__*/ React__default.createElement(SingleBarViz, {
         value: (modifier === null || modifier === void 0 ? void 0 : modifier.value) || 0,
-        polarity: SingleBarViz.polarity.linear,
+        polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.linear,
         background: color,
         style: _object_spread$2({
             alignSelf: 'flex-end',
             pointerEvents: 'none'
         }, getBarTransformStyles({
-            orientation: Orientation.horizontal,
-            polarity: Polarity.linear,
-            value: parseFloat(scaledNormalisedValue.toFixed(2))
+            orientation: Orientation === null || Orientation === void 0 ? void 0 : Orientation.horizontal,
+            polarity: Polarity === null || Polarity === void 0 ? void 0 : Polarity.linear,
+            value: parseFloat(scaledNormalisedValue === null || scaledNormalisedValue === void 0 ? void 0 : scaledNormalisedValue.toFixed(2))
         }))
     })));
 }
 
-function _array_like_to_array$2(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$2(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$2(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;
+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>();
+    //   const getModSlotsFunc = Juce.getNativeFunction('getModSlots');
+    var _useGlobalContext = useGlobalContext(), modSlotUpdated = _useGlobalContext.modSlotUpdated, _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 handleTargetChange = function(newTarget) {
+        if (newTarget > 0) {
+            modSlotUpdated([
+                rowId,
+                newTarget
+            ]);
+        } else {
+            var _modSlotParams_modSlotIndex;
+            modSlotUpdated([
+                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) {
+                var sliderState = Juce.getSliderState(item);
+                sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(0);
+            });
         }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
+        if (isPreview && newTarget) {
+            setIsPreview(false);
         }
-    }
-    return _arr;
-}
-function _non_iterable_rest$2() {
-    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 _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
-}
-function _unsupported_iterable_to_array$2(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(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$2(o, minLen);
-}
-function ModMatrixRow(param) {
-    var rowId = param.rowId, rowIndex = param.rowIndex; param.isPreview;
-    var _globalState_modSlotParams_rowIndex;
-    var _useState = _sliced_to_array$2(useState(), 2), rowTarget = _useState[0], setRowTarget = _useState[1];
-    var globalState = useGlobalContext().globalState;
+    };
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyRow",
-        gap: Box.gap.medium
+        gap: Box.gap.medium,
+        key: key
     }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexStart,
@@ -3872,24 +4016,28 @@ function ModMatrixRow(param) {
             color: targetColors[0]
         }
     }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
-        target: rowTarget,
-        handleTargetChange: setRowTarget,
+        target: modSlots[rowId],
+        handleTargetChange: handleTargetChange,
         rowId: rowId,
         color: targetColors[0],
         style: {
             width: ComboboxCellWidth
-        }
-    })), globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = globalState.modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex.map(function(item, i) {
-        var _globalState_modSlotParams_rowIndex, _globalState_modSlotParams;
+        },
+        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;
         return /*#__PURE__*/ React__default.createElement(Box, {
             className: "ModMatrixBodyCell",
             flexDirection: Box.flexDirection.column,
             style: {
                 color: targetColors[i + 1]
-            }
-        }, /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
-            target: rowTarget,
-            modifier: globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams = globalState.modSlotParams) === null || _globalState_modSlotParams === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = _globalState_modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex[i],
+            },
+            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]
+        }) : /*#__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]
         }));
     }));
@@ -4101,77 +4249,105 @@ function _ts_generator$1(thisArg, body) {
         };
     }
 }
-function ModuleFooter$1(param) {
+//
+function ModMatrix(param) {
     var className = param.className, style = param.style;
-    var _useState = _sliced_to_array$1(useState(), 2), previewRowId = _useState[0], setPreviewRowId = _useState[1];
-    var getAllAPVTSParamsFunc = Juce.getNativeFunction('getAllAPVTSParams');
-    var _useGlobalContext = useGlobalContext(), setAutomatableParams = _useGlobalContext.setAutomatableParams, setAutomatableParamLabels = _useGlobalContext.setAutomatableParamLabels, setModSlots = _useGlobalContext.setModSlots, setModSlotParams = _useGlobalContext.setModSlotParams, setModSlotParamLabels = _useGlobalContext.setModSlotParamLabels, globalState = _useGlobalContext.globalState;
-    var assignedModSlots = useMemo(function() {
-        var _globalState_modSlots;
-        return globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : _globalState_modSlots.filter(function(item) {
-            return (item === null || item === void 0 ? void 0 : item[1]) !== 0;
-        });
-    }, [
-        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
-    ]);
+    var _Object_keys, _Object_keys1, _Object_keys2;
+    var _useState = _sliced_to_array$1(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 getAPVTSParams = function() {
+        return _async_to_generator$1(function() {
+            var automatableParamsList, modSlotsData, modSlotParams, e;
+            return _ts_generator$1(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            4,
+                            ,
+                            5
+                        ]);
+                        return [
+                            4,
+                            getAutomatableParamsListFunc()
+                        ];
+                    case 1:
+                        automatableParamsList = _state.sent();
+                        return [
+                            4,
+                            getAllModSlotsFunc()
+                        ];
+                    case 2:
+                        modSlotsData = _state.sent();
+                        return [
+                            4,
+                            getModSlotParamsFunc()
+                        ];
+                    case 3:
+                        modSlotParams = _state.sent();
+                        automatableParamsListReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[0]);
+                        automatableParamLabelsReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[1]);
+                        modSlotsReceived(modSlotsData || []);
+                        modSlotParamsListReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[0]);
+                        modSlotParamLabelsReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[1]);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 4:
+                        e = _state.sent();
+                        console.log(e);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 5:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
     useEffect(function() {
-        var getAPVTSParams = function() {
-            return _async_to_generator$1(function() {
-                var params, e;
-                return _ts_generator$1(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            _state.trys.push([
-                                0,
-                                2,
-                                ,
-                                3
-                            ]);
-                            return [
-                                4,
-                                getAllAPVTSParamsFunc()
-                            ];
-                        case 1:
-                            params = _state.sent();
-                            setAutomatableParams(params === null || params === void 0 ? void 0 : params[0]);
-                            setAutomatableParamLabels(params === null || params === void 0 ? void 0 : params[1]);
-                            setModSlots(params === null || params === void 0 ? void 0 : params[2]);
-                            setModSlotParams(params === null || params === void 0 ? void 0 : params[3]);
-                            setModSlotParamLabels(params === null || params === void 0 ? void 0 : params[4]);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 2:
-                            e = _state.sent();
-                            console.log(e);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 3:
-                            return [
-                                2
-                            ];
-                    }
-                });
-            })();
-        };
         getAPVTSParams();
     }, [
         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) {
-            var _globalState_modSlots_, _globalState_modSlots;
-            setPreviewRowId(globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : (_globalState_modSlots_ = _globalState_modSlots[0]) === null || _globalState_modSlots_ === void 0 ? void 0 : _globalState_modSlots_[0]);
+            setPreviewRowIsActive(true);
         }
     }, [
-        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
+        modSlots
     ]);
     var headers = [
         'Target'
-    ].concat(_to_consumable_array(globalState === null || globalState === void 0 ? void 0 : globalState.modSlotParamLabels));
+    ].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: [
@@ -4186,12 +4362,13 @@ function ModuleFooter$1(param) {
     }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixHeader",
         gap: Box.gap.medium
-    }, headers.map(function(item, i) {
+    }, headers === null || headers === void 0 ? void 0 : headers.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(Box, {
             style: {
                 color: targetColors[i],
                 flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : 'initial'
             },
+            key: item,
             className: "ModMatrixHeaderCell",
             padding: [
                 Box.padding.medium,
@@ -4202,19 +4379,15 @@ function ModuleFooter$1(param) {
         className: "ModMatrixBody",
         gap: Box.gap.medium,
         flexDirection: Box.flexDirection.column
-    }, (assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.length) ? assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.map(function(item, i) {
+    }, (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,
-            rowIndex: i
+            key: item,
+            // rowIndex={i}
+            setIsPreview: setPreviewRowIsActive,
+            isPreview: previewRowIsActive && (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.indexOf(item)) === 0
         });
-    }) : null, previewRowId ? /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
-        rowId: previewRowId,
-        rowIndex: 0,
-        // onChange={(item: any) =>
-        //   setAssignedRowIds([...assignedRowIds, item])
-        // }
-        isPreview: true
-    }) : ''), /*#__PURE__*/ React__default.createElement(Box, {
+    }) : null), /*#__PURE__*/ React__default.createElement(Box, {
         justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "addModMatrixRow",
@@ -4225,13 +4398,18 @@ function ModuleFooter$1(param) {
         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) {}
+        onClick: function(e) {
+            if ((unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) > 0) {
+                setPreviewRowIsActive(true);
+            }
+        }
     })));
 }
 
-var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
+var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n  overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
 styleInject(css_248z);
 
 function _array_like_to_array(arr, len) {
@@ -4437,7 +4615,7 @@ var FooterTabs = /*#__PURE__*/ function(FooterTabs) {
     return FooterTabs;
 }({});
 var ModMatrixTab = function() {
-    return /*#__PURE__*/ React__default.createElement(ModuleFooter$1, null);
+    return /*#__PURE__*/ React__default.createElement(ModMatrix, null);
 };
 var InputModTab = function() {
     return /*#__PURE__*/ React__default.createElement(Box, null, "InputModTab");