@antimatter-audio/antimatter-ui 10.14.1 → 10.15.0

package/dist/index.js

@@ -159,12 +159,12 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-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_with_holes$f(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$k(obj, key, value) {
@@ -180,7 +180,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$f(arr, i) {
+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 = [];
@@ -204,7 +204,7 @@ 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$k(target) {
@@ -222,16 +222,16 @@ function _object_spread$k(target) {
     }
     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$g(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$h(arr, i) || _non_iterable_rest$g();
 }
-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);
 }
 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 ? [
@@ -239,7 +239,7 @@ function Button(param) {
     ] : _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 _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
@@ -357,13 +357,13 @@ function useObservable(param) {
     };
 }
 
-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_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$f(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
 }
 function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -372,15 +372,15 @@ 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 _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$f(arr) || _non_iterable_spread$1();
+    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$f(o, minLen) {
+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);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -394,9 +394,8 @@ function normalisedToScaled(param) {
 // mocks the `getnormalisedValue` method from JUCE
 // This will allow us to test the JS UI without needing access to the JUCE backend
 function scaledToNormalised(param) {
-    var scaledValue = param.scaledValue, properties = param.properties;
-    var start = properties.start, end = properties.end, skew = properties.skew;
-    return Math.pow((scaledValue - start) / (end - start), skew);
+    var scaledValue = param.scaledValue, start = param.start, end = param.end, skew = param.skew;
+    return Math.pow((scaledValue - start) / (end - start), skew !== null && skew !== void 0 ? skew : 1);
 }
 var decimalToPercent = function(decimal) {
     return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
@@ -496,12 +495,12 @@ var randomizeValue = function(min, max) {
     return Math.random() * (max - min) + min;
 };
 
-function _array_like_to_array$e(arr, len) {
+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$e(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$j(obj, key, value) {
@@ -517,7 +516,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$e(arr, i) {
+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 = [];
@@ -541,7 +540,7 @@ function _iterable_to_array_limit$e(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$e() {
+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) {
@@ -578,16 +577,16 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
+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$e(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
+    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$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 // Initial state
 var defaultGlobalStateValue = {
@@ -672,7 +671,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$e(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$f(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -744,10 +743,13 @@ function GlobalContextProvider(param) {
         var defaultValue = state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
         var parameterType = state === null || state === void 0 ? void 0 : state.parameterTypes[paramIndex];
         if (parameterType === 'slider') {
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
             var sliderState = Juce.getSliderState(id);
             var normalisedDefaultValue = scaledToNormalised({
                 scaledValue: defaultValue,
-                properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
+                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start,
+                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end,
+                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);
         }
@@ -780,15 +782,15 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$d(arr, len) {
+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];
     return arr2;
 }
-function _array_with_holes$d(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$d(arr, i) {
+function _iterable_to_array_limit$e(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -812,26 +814,26 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+function _non_iterable_rest$e() {
     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$d(arr, i) {
-    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
+function _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
 }
-function _unsupported_iterable_to_array$d(o, minLen) {
+function _unsupported_iterable_to_array$e(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$e(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$d(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 _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$d(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
-    var _useState1 = _sliced_to_array$d(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    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 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) {
@@ -866,6 +868,7 @@ 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);
@@ -1205,12 +1208,12 @@ function Dropdown(param) {
 var css_248z$7 = ".TextInput {\n  pointer-events: auto;\n  /* font-size: var(--text-xs); */\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput.is-highlighted {\n  background: var(--color-gray-600);\n  border: 1px solid var(--color-gray-500);\n}\n";
 styleInject(css_248z$7);
 
-function _array_like_to_array$c(arr, len) {
+function _array_like_to_array$d(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$c(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$f(obj, key, value) {
@@ -1226,7 +1229,7 @@ function _define_property$f(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$c(arr, i) {
+function _iterable_to_array_limit$d(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1250,7 +1253,7 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+function _non_iterable_rest$d() {
     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$f(target) {
@@ -1268,16 +1271,16 @@ function _object_spread$f(target) {
     }
     return target;
 }
-function _sliced_to_array$c(arr, i) {
-    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
 }
-function _unsupported_iterable_to_array$c(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(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$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -1289,9 +1292,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
 function Input(param) {
     var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor;
     var _inputRef_current;
-    var _useState = _sliced_to_array$c(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState = _sliced_to_array$d(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
     // const [hasError, setHasError] = useState<boolean>(false);
-    var _useState1 = _sliced_to_array$c(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
+    var _useState1 = _sliced_to_array$d(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
     var valueRef = useRef(null);
     var isLocalhost = window.location.hostname === 'localhost';
     // Sets up listeners to handle changes on the backend
@@ -1435,15 +1438,15 @@ var SliderType = /*#__PURE__*/ function(SliderType) {
     return SliderType;
 }({});
 
-function _array_like_to_array$b(arr, len) {
+function _array_like_to_array$c(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$b(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$b(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1467,19 +1470,19 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+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 _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$b(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(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$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -1528,14 +1531,14 @@ var useSlider = function(param) {
    * AudioProcessorParameter::getValue() (C++).
    */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
     // NOTE: We can think of this as a percentage value, in 0 to 1 format
-    var _useState = _sliced_to_array$b(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    var _useState = _sliced_to_array$c(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
     // const [normalisedValue, setNormalisedValue] = useState(0);
-    var _useState1 = _sliced_to_array$b(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState1 = _sliced_to_array$c(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
     var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter;
-    var _useState2 = _sliced_to_array$b(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
+    var _useState2 = _sliced_to_array$c(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
     useEffect(function() {
         document.addEventListener('click', clickListener);
         document.addEventListener('keydown', keyDownListener);
@@ -1552,11 +1555,13 @@ var useSlider = function(param) {
     useEffect(function() {
         var sliderState = Juce.getSliderState(id);
         var setRandom = function() {
-            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3;
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3, _sliderState_properties4, _sliderState_properties5, _sliderState_properties6;
             var randomValue = randomizeValue(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start, sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
             var newValue = (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.start) === 0 && (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties3 = sliderState.properties) === null || _sliderState_properties3 === void 0 ? void 0 : _sliderState_properties3.end) === 1 ? randomValue : scaledToNormalised({
                 scaledValue: randomValue,
-                properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
+                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties4 = sliderState.properties) === null || _sliderState_properties4 === void 0 ? void 0 : _sliderState_properties4.start,
+                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties5 = sliderState.properties) === null || _sliderState_properties5 === void 0 ? void 0 : _sliderState_properties5.end,
+                skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties6 = sliderState.properties) === null || _sliderState_properties6 === void 0 ? void 0 : _sliderState_properties6.skew
             });
             setNormalisedState(newValue);
         };
@@ -1574,6 +1579,21 @@ var useSlider = function(param) {
             normalisedValueRef.current = mockInitialNormalisedValue;
         }
     }, []);
+    // Update the local state from JUCE
+    var updateLocalState = function(sliderState) {
+        var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
+        var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
+        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
+        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
+        setScaledValue(scaledValue);
+        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
+        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+            highlightedItemChanged({
+                label: label,
+                value: scaledValue
+            });
+        }
+    };
     // Update the local state when the ID changes
     useEffect(function() {
         var sliderState = Juce.getSliderState(id);
@@ -1600,21 +1620,6 @@ var useSlider = function(param) {
     }, [
         window
     ]);
-    // Update the local state from JUCE
-    var updateLocalState = function(sliderState) {
-        var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
-        var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
-        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
-        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
-        setScaledValue(scaledValue);
-        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
-        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            highlightedItemChanged({
-                label: label,
-                value: scaledValue
-            });
-        }
-    };
     // Update JUCE state
     var setNormalisedState = function(newValue) {
         var sliderState = Juce.getSliderState(id);
@@ -1655,9 +1660,12 @@ var useSlider = function(param) {
     var setScaledState = function(newValue) {
         var sliderState = Juce.getSliderState(id);
         if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
             !isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
                 scaledValue: clamp(parseFloat(newValue.toFixed(2)), properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
-                properties: properties
+                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start,
+                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end,
+                skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.skew
             }));
             scaledValueRef.current = newValue;
         }
@@ -1963,7 +1971,9 @@ function RotarySlider(param) {
         onComplete: function(value) {
             var normalisedVal = properties && scaledToNormalised({
                 scaledValue: value,
-                properties: properties
+                start: properties === null || properties === void 0 ? void 0 : properties.start,
+                end: properties === null || properties === void 0 ? void 0 : properties.end,
+                skew: properties === null || properties === void 0 ? void 0 : properties.skew
             });
             normalisedVal !== undefined && setNormalisedState(normalisedVal);
         }
@@ -2149,15 +2159,15 @@ Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-function _array_like_to_array$a(arr, len) {
+function _array_like_to_array$b(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$a(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$a(arr, i) {
+function _iterable_to_array_limit$b(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2181,26 +2191,26 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+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 _sliced_to_array$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
+function _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(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$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 var useIndicator = function(param) {
     var id = param.id;
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$a(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$b(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
     // Set the initial state
     useEffect(function() {
         if (!isLocalhost) {
@@ -2284,7 +2294,7 @@ function IndicatorLight(param) {
     }) : null);
 }
 
-var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\nsvg {\n  height: 100%;\n  width: 100%;\n}\n";
+var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\n.IconButton svg {\n  height: 100%;\n  width: 100%;\n}\n";
 styleInject(css_248z$5);
 
 function _define_property$a(obj, key, value) {
@@ -2694,14 +2704,16 @@ function KeyValueDisplayScreen(param) {
 }
 
 function LinePlot(param) {
-    var data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 200 : _param_height, _param_marginTop = param.marginTop, marginTop = _param_marginTop === void 0 ? 20 : _param_marginTop, _param_marginRight = param.marginRight, marginRight = _param_marginRight === void 0 ? 20 : _param_marginRight, _param_marginBottom = param.marginBottom, marginBottom = _param_marginBottom === void 0 ? 20 : _param_marginBottom, _param_marginLeft = param.marginLeft, marginLeft = _param_marginLeft === void 0 ? 20 : _param_marginLeft;
+    var data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 200 : _param_height, _param_marginTop = param.marginTop, marginTop = _param_marginTop === void 0 ? 20 : _param_marginTop, _param_marginRight = param.marginRight, marginRight = _param_marginRight === void 0 ? 20 : _param_marginRight, _param_marginBottom = param.marginBottom, marginBottom = _param_marginBottom === void 0 ? 20 : _param_marginBottom, _param_marginLeft = param.marginLeft, marginLeft = _param_marginLeft === void 0 ? 20 : _param_marginLeft, _param_displayGrid = param.displayGrid, displayGrid = _param_displayGrid === void 0 ? true : _param_displayGrid;
     //TODO: Figure out why some data is null
-    var filteredData = data.filter(function(item) {
+    var filteredData = data ? Array.isArray(data) ? data === null || data === void 0 ? void 0 : data.filter(function(item) {
         return item !== null;
-    });
+    }) : [
+        data
+    ] : [];
     var x = d3.scaleLinear([
         0,
-        filteredData.length - 1
+        (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) - 1
     ], [
         marginLeft,
         width - marginRight
@@ -2736,7 +2748,7 @@ function LinePlot(param) {
         filter: "url(#blur)",
         // @ts-expect-error
         d: line(filteredData)
-    })), /*#__PURE__*/ React__default.createElement("svg", {
+    })), displayGrid ? /*#__PURE__*/ React__default.createElement("svg", {
         style: {
             position: 'absolute',
             top: 0,
@@ -2761,18 +2773,18 @@ function LinePlot(param) {
         width: width,
         height: width,
         fill: "url(#grid)"
-    })));
+    })) : null);
 }
 
 var css_248z$4 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
 styleInject(css_248z$4);
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$a(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$9(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$7(obj, key, value) {
@@ -2788,7 +2800,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2812,7 +2824,7 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$a() {
     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$7(target) {
@@ -2830,20 +2842,20 @@ function _object_spread$7(target) {
     }
     return target;
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(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$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 function Oscilloscope(param) {
     var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
-    var _useState = _sliced_to_array$9(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$a(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     useEffect(function() {
         //@ts-expect-error
         var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -2878,12 +2890,12 @@ styleInject(css_248z$3);
 var css_248z$2 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-page);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n  font-family: var(--font-leagueSpartan);\n  cursor: pointer;\n  background: var(--color-gray-800);\n  text-transform: uppercase;\n  &:hover,\n  &.isSelected {\n    background: var(--bg-selected);\n  }\n} */\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
 styleInject(css_248z$2);
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$9(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$8(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -2915,7 +2927,7 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _iterable_to_array_limit$8(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2939,23 +2951,23 @@ function _iterable_to_array_limit$8(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$8() {
+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_destructuring_empty(o) {
     if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
     return o;
 }
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(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$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -3050,16 +3062,16 @@ function _ts_generator$3(thisArg, body) {
 }
 function PresetManager(param) {
     _object_destructuring_empty(param);
-    var _useState = _sliced_to_array$8(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
-    var _useState1 = _sliced_to_array$8(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
+    var _useState = _sliced_to_array$9(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
     var savePresetFunc = Juce.getNativeFunction('savePreset');
     var loadPresetFunc = Juce.getNativeFunction('loadPreset');
     var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
     var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
     var isDirtyFunc = Juce.getNativeFunction('canUndo');
-    var _useState2 = _sliced_to_array$8(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
+    var _useState2 = _sliced_to_array$9(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState3 = _sliced_to_array$8(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
+    var _useState3 = _sliced_to_array$9(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
     useEffect(function() {
         if (!isLocalhost) {
             var isDirtyListenerId = //@ts-expect-error
@@ -3335,12 +3347,12 @@ function PresetManager(param) {
     }))))));
 }
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(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$7(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3385,7 +3397,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3409,7 +3421,7 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+function _non_iterable_rest$8() {
     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) {
@@ -3427,16 +3439,16 @@ function _object_spread$6(target) {
     }
     return target;
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(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$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -3619,8 +3631,8 @@ function ModuleHeader(param) {
     }, [
         window
     ]);
-    var _useState = _sliced_to_array$7(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
-    var _useState1 = _sliced_to_array$7(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
+    var _useState = _sliced_to_array$8(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
+    var _useState1 = _sliced_to_array$8(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
     var handleUndo = function() {
         undo();
     };
@@ -3924,15 +3936,15 @@ function SingleBarViz(param) {
 }
 SingleBarViz.polarity = Polarity;
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$7(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$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3956,26 +3968,26 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     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$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(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$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 var useCombobox = function(param) {
     var id = param.id, filter = param.filter, onChange = param.onChange;
     var _Object_values;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$6(useState(0), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$6(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    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;
     //TODO: Filter choices for subsequent rows
     // const availableChoices = properties?.choices;
@@ -4039,12 +4051,12 @@ var useCombobox = function(param) {
     };
 };
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$6(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$5(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$4(obj, key, value) {
@@ -4060,7 +4072,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -4084,7 +4096,7 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$4(target) {
@@ -4102,22 +4114,22 @@ function _object_spread$4(target) {
     }
     return target;
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(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$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
     var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, key = param.key, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
-    var _useState = _sliced_to_array$5(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
-    var _useState1 = _sliced_to_array$5(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
+    var _useState = _sliced_to_array$6(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
+    var _useState1 = _sliced_to_array$6(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
     var _useGlobalContext = useGlobalContext(), automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
@@ -4413,16 +4425,16 @@ function ModMatrixRow(param) {
     }));
 }
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(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$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$4(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
 }
 function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -4469,7 +4481,7 @@ function _define_property$1(obj, key, value) {
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -4493,7 +4505,7 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     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 _non_iterable_spread() {
@@ -4514,19 +4526,19 @@ function _object_spread$1(target) {
     }
     return target;
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
 function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$4(arr) || _non_iterable_spread();
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(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$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 function _ts_generator$1(thisArg, body) {
     var f, y, t, _ = {
@@ -4623,7 +4635,7 @@ 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$4(useState(), 2), previewRowIsActive = _useState[0], setPreviewRowIsActive = _useState[1];
+    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');
@@ -4780,6 +4792,399 @@ function ModMatrix(param) {
     })));
 }
 
+var svgInnerMargin = 5;
+var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
+    WaveTypes["Sine"] = "Sine";
+    WaveTypes["Triangle"] = "Triangle";
+    WaveTypes["Ramp"] = "Ramp";
+    WaveTypes["Saw"] = "Saw";
+    WaveTypes["ExpUp"] = "Exp Up";
+    WaveTypes["ExpDown"] = "Exp Down";
+    WaveTypes["Square"] = "Square";
+    return WaveTypes;
+}({});
+
+var getPointArray = function(param) {
+    var waveType = param.waveType, hz = param.hz, _param_pulseWidth = param.pulseWidth, pulseWidth = _param_pulseWidth === void 0 ? 1 : _param_pulseWidth, _param_ampValue = param.ampValue, ampValue = _param_ampValue === void 0 ? 0.5 : _param_ampValue, _param_randValue = param.randValue, randValue = _param_randValue === void 0 ? 1 : _param_randValue, _param_maxLength = param.maxLength, maxLength = _param_maxLength;
+    var generateCycle = // Returns a coordinate array for one cycle
+    function generateCycle(index) {
+        var cycle = [];
+        // Pick a number from the 'randomNumbers' array to set the randValue for the cycle
+        var randomNumber = randomNumbers[index % randomNumbers.length] * randValue;
+        //Generate the coordinate array for the cycle
+        for(var i = 1; i < cycleLength; i++){
+            var getAdjustedVal = function() {
+                var startingValue = i + cycleLength;
+                var returnValue;
+                if (startingValue > cycleLength) {
+                    returnValue = startingValue % cycleLength;
+                } else if (startingValue < 0) {
+                    returnValue = cycleLength - Math.abs(startingValue);
+                } else {
+                    returnValue = startingValue;
+                }
+                var pulseWidthParam = 1 - pulseWidth;
+                returnValue = returnValue * (1 + 4 * pulseWidthParam);
+                if (returnValue > cycleLength) {
+                    returnValue = 0;
+                }
+                return scaledToNormalised({
+                    scaledValue: returnValue,
+                    start: 0,
+                    end: cycleLength
+                });
+            };
+            var adjustedVal = getAdjustedVal();
+            switch(waveType){
+                case WaveTypes.Sine:
+                    var angle = adjustedVal * (2 * Math.PI);
+                    //prettier-ignore
+                    var sineShape = (1 - randomNumber) * (ampValue * Math.sin(angle)) / 2 + 0.5;
+                    cycle.push({
+                        x: adjustedVal,
+                        //prettier-ignore
+                        y: sineShape
+                    });
+                    break;
+                case WaveTypes.Ramp:
+                    cycle.push({
+                        y: adjustedVal * ampValue * (1 - randomNumber)
+                    });
+                    break;
+                case WaveTypes.ExpUp:
+                    cycle.push({
+                        y: (Math.exp(adjustedVal * ampValue) - 1) / 1.7 * (1 - randomNumber)
+                    });
+                    break;
+                case WaveTypes.ExpDown:
+                    cycle.push({
+                        //prettier-ignore
+                        y: (Math.exp(adjustedVal > 0 ? (1 - adjustedVal) * ampValue : 0) - 1) / 1.7 * (1 - randomNumber)
+                    });
+                    break;
+                case WaveTypes.Saw:
+                    cycle.push({
+                        y: (adjustedVal > 0 ? 1 - adjustedVal : 0) * (1 - randomNumber) * ampValue
+                    });
+                    break;
+                case WaveTypes.Square:
+                    cycle.push({
+                        y: adjustedVal > 0.5 ? 1 * (1 - randomNumber) * ampValue : 0 * (1 - randomNumber) * ampValue
+                    });
+                    break;
+                case WaveTypes.Triangle:
+                    cycle.push({
+                        y: // prettier-ignore
+                        //(pwmInput * 2) > 1023 ? rampTable[2046 - (pwmInput * 2)] : rampTable[pwmInput * 2];
+                        adjustedVal * 2 > 1 ? (2 - adjustedVal * 2) * (1 - randomNumber) * ampValue : adjustedVal * 2 * (1 - randomNumber) * ampValue
+                    });
+                    break;
+            }
+        }
+        return cycle;
+    };
+    var output = [];
+    var randomNumbers = [
+        0.3,
+        0.8,
+        0.5,
+        0.1,
+        0.7,
+        0.4,
+        0.8,
+        0.2,
+        0.9,
+        0.4
+    ];
+    // Calculate the length of one cycle
+    var getCycleLength = function() {
+        var minCycleLength = 40; // Arbitrary number - can adjust up and down
+        var value = maxLength - Math.ceil(maxLength * hz);
+        if (value < minCycleLength) {
+            return minCycleLength;
+        } else {
+            return value;
+        }
+    };
+    var cycleLength = getCycleLength();
+    var numCycles = Math.floor(maxLength / cycleLength);
+    var allCycles = [];
+    for(var i = 0; i < numCycles; i++){
+        var cycle = generateCycle(i);
+        allCycles.push(cycle);
+    }
+    for(var i = 0; i < maxLength; i++){
+        var _allCycles_flat_i;
+        output.push({
+            x: i,
+            y: (_allCycles_flat_i = allCycles.flat()[i]) === null || _allCycles_flat_i === void 0 ? void 0 : _allCycles_flat_i.y
+        });
+    }
+    return output;
+};
+
+function _array_like_to_array$4(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$4(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$4(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$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 _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+}
+function _unsupported_iterable_to_array$4(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$4(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$4(o, minLen);
+}
+function LFOVisualizer(param) {
+    var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 400 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 150 : _param_height;
+    var svgRef = useRef(null);
+    var isLocalhost = window.location.hostname === 'localhost';
+    var _useState = _sliced_to_array$4(useState(0), 2), waveValue = _useState[0], setWaveValue = _useState[1];
+    var _useState1 = _sliced_to_array$4(useState(0), 2), hzValue = _useState1[0], setHzValue = _useState1[1];
+    var _useState2 = _sliced_to_array$4(useState(0), 2), hzHiValue = _useState2[0], setHzHiValue = _useState2[1];
+    //@ts-expect-error
+    var _useState3 = _sliced_to_array$4(useState(0), 2); _useState3[0]; var setSyncRateValue = _useState3[1];
+    var _useState4 = _sliced_to_array$4(useState(0), 2), syncTypeValue = _useState4[0], setSyncTypeValue = _useState4[1];
+    //@ts-expect-error
+    var _useState5 = _sliced_to_array$4(useState(0), 2); _useState5[0]; var setSixteenthsValue = _useState5[1];
+    //@ts-expect-error
+    var _useState6 = _sliced_to_array$4(useState(0), 2); _useState6[0]; var setThirdsValue = _useState6[1];
+    var _useState7 = _sliced_to_array$4(useState(0), 2), syncOffsetValue = _useState7[0], setSyncOffsetValue = _useState7[1];
+    var _useState8 = _sliced_to_array$4(useState(0), 2), phaseValue = _useState8[0], setPhaseValue = _useState8[1];
+    var _useState9 = _sliced_to_array$4(useState(0), 2), widthValue = _useState9[0], setWidthValue = _useState9[1];
+    var _useState10 = _sliced_to_array$4(useState(0), 2), ampValue = _useState10[0], setAmpValue = _useState10[1];
+    var _useState11 = _sliced_to_array$4(useState(0), 2), randValue = _useState11[0], setRandValue = _useState11[1];
+    var _useState12 = _sliced_to_array$4(useState([]), 2), points = _useState12[0], setPoints = _useState12[1];
+    // const [numLoops, setNumLoops] = useState(1);
+    var maxLength = 1024;
+    // useEffect(() => {
+    //   console.log(
+    //     waveValue,
+    //     hzValue,
+    //     hzHiValue,
+    //     syncRateValue,
+    //     syncTypeValue,
+    //     sixteenthsValue,
+    //     thirdsValue,
+    //     syncOffsetValue,
+    //     phaseValue,
+    //     widthValue,
+    //     ampValue,
+    //     randValue,
+    //   );
+    // }, [
+    //   waveValue,
+    //   hzValue,
+    //   hzHiValue,
+    //   syncRateValue,
+    //   syncTypeValue,
+    //   sixteenthsValue,
+    //   thirdsValue,
+    //   syncOffsetValue,
+    //   phaseValue,
+    //   widthValue,
+    //   ampValue,
+    //   randValue,
+    // ]);
+    // Sets up listeners to handle changes on the backend
+    //@ts-expect-error
+    useEffect(function() {
+        // Set up slider state listeners for each LFO parameter
+        if (!isLocalhost) {
+            var waveState = Juce.getComboBoxState("LFO".concat(id, "_Wave"));
+            setWaveValue(waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex());
+            var hzState = Juce.getSliderState("LFO".concat(id, "_Hz"));
+            setHzValue(hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue());
+            var hzHiState = Juce.getSliderState("LFO".concat(id, "_Hz_Hi"));
+            setHzHiValue(hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.getNormalisedValue());
+            var syncRateState = Juce.getComboBoxState("LFO".concat(id, "_SyncRate"));
+            setSyncRateValue(syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.getChoiceIndex());
+            var syncTypeState = Juce.getComboBoxState("LFO".concat(id, "_SyncType"));
+            setSyncTypeValue(syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.getChoiceIndex());
+            var sixteenthsState = Juce.getSliderState("LFO".concat(id, "_Sixteenths"));
+            setSixteenthsValue(sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.getNormalisedValue());
+            var thirdsState = Juce.getSliderState("LFO".concat(id, "_Thirds"));
+            setThirdsValue(thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.getNormalisedValue());
+            var syncOffsetState = Juce.getSliderState("LFO".concat(id, "_Sync_Offset"));
+            setSyncOffsetValue(syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.getNormalisedValue());
+            var phaseState = Juce.getSliderState("LFO".concat(id, "_Phase"));
+            setPhaseValue(phaseState === null || phaseState === void 0 ? void 0 : phaseState.getNormalisedValue());
+            var widthState = Juce.getSliderState("LFO".concat(id, "_Width"));
+            setWidthValue(widthState === null || widthState === void 0 ? void 0 : widthState.getNormalisedValue());
+            var ampState = Juce.getSliderState("LFO".concat(id, "_Amp"));
+            setAmpValue(ampState === null || ampState === void 0 ? void 0 : ampState.getNormalisedValue());
+            var randState = Juce.getSliderState("LFO".concat(id, "_Rand"));
+            setRandValue(randState === null || randState === void 0 ? void 0 : randState.getNormalisedValue());
+            var waveListenerId = waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.addListener(function() {
+                setWaveValue(waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex());
+            });
+            var hzListenerId = hzState.valueChangedEvent.addListener(function() {
+                setHzValue(hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue());
+            });
+            var hzHiListenerId = hzHiState.valueChangedEvent.addListener(function() {
+                setHzHiValue(hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.getNormalisedValue());
+            });
+            var syncRateListenerId = syncRateState.valueChangedEvent.addListener(function() {
+                setSyncRateValue(syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.getChoiceIndex());
+            });
+            var syncTypeListenerId = syncTypeState.valueChangedEvent.addListener(function() {
+                setSyncTypeValue(syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.getChoiceIndex());
+            });
+            var sixteenthsListenerId = sixteenthsState.valueChangedEvent.addListener(function() {
+                setSixteenthsValue(sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.getNormalisedValue());
+            });
+            var thirdsListenerId = thirdsState.valueChangedEvent.addListener(function() {
+                setThirdsValue(thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.getNormalisedValue());
+            });
+            var syncOffsetListenerId = syncOffsetState.valueChangedEvent.addListener(function() {
+                setSyncOffsetValue(syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.getNormalisedValue());
+            });
+            var phaseListenerId = phaseState.valueChangedEvent.addListener(function() {
+                setPhaseValue(phaseState === null || phaseState === void 0 ? void 0 : phaseState.getNormalisedValue());
+            });
+            var widthListenerId = widthState.valueChangedEvent.addListener(function() {
+                setWidthValue(widthState === null || widthState === void 0 ? void 0 : widthState.getNormalisedValue());
+            });
+            var ampListenerId = ampState.valueChangedEvent.addListener(function() {
+                setAmpValue(ampState === null || ampState === void 0 ? void 0 : ampState.getNormalisedValue());
+            });
+            var randListenerId = randState.valueChangedEvent.addListener(function() {
+                setRandValue(randState === null || randState === void 0 ? void 0 : randState.getNormalisedValue());
+            });
+            // Set up initial graph view
+            var svg = d3.select(svgRef.current).attr('width', width * 2).attr('height', height);
+            // create center line for graph
+            svg.append('line').attr('x1', "".concat(svgInnerMargin)).attr('y1', "".concat(height / 2)).attr('x2', "".concat(width * 2 - svgInnerMargin)).attr('y2', "".concat(height / 2)).attr('fill', 'none').attr('stroke', 'var(--color-gray-600)').attr('stroke-width', 2);
+            return function() {
+                // Remove listeners on unmount
+                waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
+                hzState === null || hzState === void 0 ? void 0 : hzState.valueChangedEvent.removeListener(hzListenerId);
+                hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.valueChangedEvent.removeListener(hzHiListenerId);
+                syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.valueChangedEvent.removeListener(syncRateListenerId);
+                syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.valueChangedEvent.removeListener(syncTypeListenerId);
+                sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.valueChangedEvent.removeListener(sixteenthsListenerId);
+                thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.valueChangedEvent.removeListener(thirdsListenerId);
+                syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.valueChangedEvent.removeListener(syncOffsetListenerId);
+                phaseState === null || phaseState === void 0 ? void 0 : phaseState.valueChangedEvent.removeListener(phaseListenerId);
+                widthState === null || widthState === void 0 ? void 0 : widthState.valueChangedEvent.removeListener(widthListenerId);
+                ampState === null || ampState === void 0 ? void 0 : ampState.valueChangedEvent.removeListener(ampListenerId);
+                randState === null || randState === void 0 ? void 0 : randState.valueChangedEvent.removeListener(randListenerId);
+            };
+        }
+    }, [
+        window
+    ]);
+    useEffect(function() {
+        var _Object_values;
+        var pointArray = getPointArray({
+            waveType: (_Object_values = Object.values(WaveTypes)) === null || _Object_values === void 0 ? void 0 : _Object_values[waveValue],
+            hz: syncTypeValue === 0 ? hzValue : hzHiValue,
+            randValue: randValue,
+            ampValue: ampValue,
+            pulseWidth: widthValue,
+            maxLength: maxLength
+        });
+        setPoints(pointArray);
+    }, [
+        waveValue,
+        syncTypeValue,
+        hzValue,
+        hzHiValue,
+        randValue,
+        widthValue,
+        maxLength,
+        ampValue
+    ]);
+    useEffect(function() {
+        // 2 * Math.PI = 1 circle in radians
+        // d3.range(initial value, last value, increment)
+        // sets the number of values
+        var xScale = d3.scaleLinear().domain([
+            0,
+            maxLength
+        ]).range([
+            svgInnerMargin,
+            width * 2 - svgInnerMargin
+        ]);
+        var yScale = d3.scaleLinear().domain([
+            0,
+            1
+        ]).range([
+            height - svgInnerMargin,
+            svgInnerMargin
+        ]);
+        var line = d3.line()//@ts-expect-error
+        .x(function(d) {
+            return xScale(d.x);
+        })//@ts-expect-error
+        .y(function(d) {
+            return yScale(d.y);
+        }).curve(d3.curveBasis);
+        d3.select(svgRef.current).selectAll('path').attr('width', width * 2 - svgInnerMargin).attr('height', height).data([
+            points
+        ]).attr('fill', 'none').attr('stroke', 'var(--color-brand)').attr('stroke-width', 2).join('path').attr('d', line);
+    }, [
+        points,
+        maxLength
+    ]);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        style: {
+            backgroundColor: 'var(--bg-page)'
+        },
+        padding: [
+            Box.padding.medium
+        ]
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'relative',
+            overflow: 'hidden',
+            width: width
+        }
+    }, /*#__PURE__*/ React__default.createElement("svg", {
+        width: width * 2,
+        height: height,
+        ref: svgRef,
+        style: {
+            transform: "translate(".concat((syncTypeValue === 0 || syncTypeValue === 1 ? phaseValue * 100 - 50 : syncOffsetValue * 100 - 50) / 2, "%)"),
+            margin: "0 -".concat(width / 2)
+        }
+    })));
+}
+
 function _array_like_to_array$3(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];
@@ -4830,8 +5235,8 @@ function LFO(param) {
     var id = param.id;
     var _useState = _sliced_to_array$3(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
     useEffect(function() {
-        var _Juce_getSliderState;
-        var syncType = (_Juce_getSliderState = Juce.getSliderState("LFO".concat(id, "_SyncType"))) === null || _Juce_getSliderState === void 0 ? void 0 : _Juce_getSliderState.scaledValue;
+        var _Juce_getComboBoxState;
+        var syncType = (_Juce_getComboBoxState = Juce.getComboBoxState("LFO".concat(id, "_SyncType"))) === null || _Juce_getComboBoxState === void 0 ? void 0 : _Juce_getComboBoxState.getChoiceIndex();
         setSyncType(syncType);
     }, [
         window
@@ -4842,10 +5247,9 @@ function LFO(param) {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
         flexDirection: Box.flexDirection.column
-    }, /*#__PURE__*/ React__default.createElement(Box, {
-        alignItems: Box.alignItems.flexEnd,
-        justifyContent: Box.justifyContent.spaceEvenly
-    }, /*#__PURE__*/ React__default.createElement(Dropdown, {
+    }, /*#__PURE__*/ React__default.createElement(LFOVisualizer, {
+        id: id
+    }), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "LFO".concat(id, "_SyncType"),
@@ -4868,15 +5272,15 @@ function LFO(param) {
     }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
         id: "LFO".concat(id, "_Sixteenths"),
         label: "LFO".concat(id, " Sixteenths")
-    }) : null), /*#__PURE__*/ React__default.createElement(RotarySlider, {
-        polarity: RotarySlider.sliderPolarity.bipolar,
-        id: "LFO".concat(id, "_Sync_Offset"),
-        label: "LFO".concat(id, " Sync Offset")
-    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null), syncType === 0 || syncType === 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
         polarity: RotarySlider.sliderPolarity.bipolar,
         id: "LFO".concat(id, "_Phase"),
         label: "LFO".concat(id, " Phase")
-    }), /*#__PURE__*/ React__default.createElement(Dropdown, {
+    }) : null, syncType !== 0 && syncType !== 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO".concat(id, "_Sync_Offset"),
+        label: "LFO".concat(id, " Sync Offset")
+    }) : null, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "LFO".concat(id, "_Wave"),
@@ -4896,7 +5300,7 @@ function LFO(param) {
 function LFOTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
-        flexDirection: Box.flexDirection.column
+        gap: Box.gap.medium
     }, /*#__PURE__*/ React__default.createElement(LFO, {
         id: 1
     }), /*#__PURE__*/ React__default.createElement(LFO, {
@@ -5091,9 +5495,14 @@ function SeqTab$1(param) {
     var handleSyncTypeChange = function(value) {
         setSyncType(value);
     };
-    return /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Box, {
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.medium
+    }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(StepSequencer, {
+        seqId: seqId
+    })), /*#__PURE__*/ React__default.createElement(Box, {
         alignItems: Box.alignItems.flexEnd,
-        justifyContent: Box.justifyContent.spaceEvenly
+        justifyContent: Box.justifyContent.center
     }, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
@@ -5120,16 +5529,13 @@ function SeqTab$1(param) {
     }) : null), /*#__PURE__*/ React__default.createElement(RotarySlider, {
         id: "seq".concat(seqId, "_amp"),
         label: "Seq".concat(seqId, " Amp")
-    })), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(StepSequencer, {
-        seqId: seqId
     })));
 }
 
 function SeqTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "SeqTab",
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.large
+        gap: Box.gap.medium
     }, /*#__PURE__*/ React__default.createElement(SeqTab$1, {
         seqId: 1
     }), /*#__PURE__*/ React__default.createElement(SeqTab$1, {