npm - @antimatter-audio/antimatter-ui - Versions diffs - 10.14.2 → 10.15.1 - Mend

@antimatter-audio/antimatter-ui 10.14.2 → 10.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/hooks/useSlider.d.ts.map +1 -1
package/dist/index.js +613 -224
package/dist/index.js.map +1 -1
package/dist/src/advanced/LFOVisualizer/LFOVisualizer.d.ts.map +1 -1
package/dist/src/advanced/LFOVisualizer/utils.d.ts +2 -3
package/dist/src/advanced/LFOVisualizer/utils.d.ts.map +1 -1
package/dist/src/advanced/ModuleFooter/LFO.d.ts.map +1 -1
package/dist/src/advanced/ModuleFooter/SeqTab.d.ts.map +1 -1
package/dist/src/advanced/Oscilloscope/LinePlot.d.ts +2 -1
package/dist/src/advanced/Oscilloscope/LinePlot.d.ts.map +1 -1
package/dist/src/common/utils.d.ts +4 -2
package/dist/src/common/utils.d.ts.map +1 -1
package/dist/src/context/GlobalContextProvider.d.ts.map +1 -1
package/dist/src/core/Slider/RotarySlider.d.ts.map +1 -1
package/dist/src/hooks/useDropdown.d.ts.map +1 -1
package/dist/src/hooks/useSlider.d.ts.map +1 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import React__default, { useEffect, useRef, useReducer, useCallback, createConte
 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';
-import { useDrag, useGesture } from '@use-gesture/react';
+import { useGesture, useDrag } from '@use-gesture/react';
 import * as d3 from 'd3';
 function styleInject(css, ref) {
@@ -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,15 @@ 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);
+    var sliderState = Juce.getSliderState(id);
     // 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);
@@ -1550,13 +1554,14 @@ var useSlider = function(param) {
     // Set the initial state
     //@ts-expect-error
     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,9 +1579,23 @@ 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);
         updateLocalState(sliderState);
     }, [
         id
@@ -1585,7 +1604,6 @@ var useSlider = function(param) {
     //@ts-expect-error
     useEffect(function() {
         if (!isLocalhost) {
-            var sliderState = Juce.getSliderState(id);
             var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function() {
                 updateLocalState(sliderState);
             });
@@ -1600,24 +1618,8 @@ 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);
         var fixedNewValue = parseFloat(newValue.toFixed(2));
         if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== fixedNewValue) {
             !isLocalhost && sliderState.setNormalisedValue(clamp(fixedNewValue));
@@ -1653,33 +1655,34 @@ var useSlider = function(param) {
         setNormalisedState(newValue);
     };
     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;
         }
     };
-    var bindDrag = useDrag(function(param) {
-        var down = param.down, delta = param.delta, first = param.first, last = param.last;
-        if (first) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                i: "".concat(0)
-            });
-        }
-        if (down) {
+    var bindDrag = useGesture({
+        onMouseDown: function(param) {
+            param.event;
+            if (!dragInProgress) {
+                sliderState.sliderDragStarted(id);
+                dragInProgress = true;
+            }
+        },
+        onDrag: function(param) {
+            param.event; var delta = param.delta;
             var deltaVal = delta[1] * -1;
             var newValue = updateValue(deltaVal);
             setNormalisedState(newValue);
-        }
-        if (last) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                i: "".concat(0)
-            });
+        },
+        onMouseUp: function(param) {
+            param.event;
+            sliderState.sliderDragEnded();
         }
     });
     var bindBarSliderDrag = function() {
@@ -1691,10 +1694,7 @@ var useSlider = function(param) {
             var x = (event === null || event === void 0 ? void 0 : event.clientX) - rect.left;
             // 1138 - 1043.1
             if (first) {
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                    i: "".concat(0)
-                });
+                sliderState.sliderDragStarted(id);
             }
             if (down) {
                 // TODO: Increments?
@@ -1709,10 +1709,7 @@ var useSlider = function(param) {
                 setNormalisedState(clamp(newValue));
             }
             if (last) {
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                    i: "".concat(0)
-                });
+                sliderState.sliderDragEnded();
             }
         }, {
             preventDefault: false
@@ -1736,10 +1733,7 @@ var useSlider = function(param) {
         onMouseDown: function(param) {
             param.event;
             if (!dragInProgress) {
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                    i: "".concat(0)
-                });
+                sliderState.sliderDragStarted(id);
                 dragInProgress = true;
             }
         },
@@ -1766,10 +1760,7 @@ var useSlider = function(param) {
             param.event;
             if (dragInProgress = true) {
                 dragInProgress = false;
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                    i: "".concat(0)
-                });
+                sliderState.sliderDragEnded();
             }
         }
     });
@@ -1963,7 +1954,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 +2142,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 +2174,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 +2277,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 +2687,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 +2731,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 +2756,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 +2783,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 +2807,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 +2825,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 +2873,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 +2910,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 +2934,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 +3045,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 +3330,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 +3380,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 +3404,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 +3422,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 +3614,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 +3919,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 +3951,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 +4034,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 +4055,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 +4079,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 +4097,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 +4408,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 +4464,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 +4488,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 +4509,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 +4618,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 +4775,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 +5218,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 +5230,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 +5255,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 +5283,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 +5478,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 +5512,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, {