@antimatter-audio/antimatter-ui 14.2.0 → 14.4.0

package/dist/index.js

@@ -5,6 +5,7 @@ import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, Listbox
 import * as Juce from 'juce-framework-frontend';
 import { useGesture } from '@use-gesture/react';
 import * as d3 from 'd3';
+import { line, curveBasis, area, scaleLinear } from 'd3';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -33,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #826993;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #34343a;\n  --bg-lv7: #3b3b41;\n  --bg-lv8: #49494d;\n  --bg-lv9: #535357;\n  --bg-lv10: #797887;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.cursor-hidden * {\n  cursor: none !important;\n}\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--color-gray-600);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #252429;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+var css_248z$f = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #34343a;\n  --bg-lv7: #3b3b41;\n  --bg-lv8: #49494d;\n  --bg-lv9: #535357;\n  --bg-lv10: #797887;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.cursor-hidden * {\n  cursor: none !important;\n}\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--color-gray-600);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #252429;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
 styleInject(css_248z$f);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -176,30 +177,30 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$k(arr, len) {
+function _array_like_to_array$l(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$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$k(arr);
+function _array_without_holes$3(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$l(arr);
 }
-function _iterable_to_array$2(iter) {
+function _iterable_to_array$3(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _non_iterable_spread$2() {
+function _non_iterable_spread$3() {
     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$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$k(arr) || _non_iterable_spread$2();
+function _to_consumable_array$3(arr) {
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$l(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$k(o, minLen) {
+function _unsupported_iterable_to_array$l(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$k(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$l(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$k(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$l(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -249,7 +250,7 @@ var getValidValueForInput = function(param) {
     // TODO: Clean up
     var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
     var splitValue = value.toString().matchAll(matchCriteria);
-    var splitValueArray = _to_consumable_array$2(splitValue);
+    var splitValueArray = _to_consumable_array$3(splitValue);
     var validValue = splitValueArray === null || splitValueArray === void 0 ? void 0 : (_splitValueArray_ = splitValueArray[0]) === null || _splitValueArray_ === void 0 ? void 0 : _splitValueArray_[0];
     var start = properties.start, end = properties.end;
     if (validValue !== null && validValue !== undefined) {
@@ -342,7 +343,7 @@ function throttle(mainFunction, delay) {
             args[_key] = arguments[_key];
         }
         if (timerFlag === null) {
-            mainFunction.apply(void 0, _to_consumable_array$2(args));
+            mainFunction.apply(void 0, _to_consumable_array$3(args));
             timerFlag = setTimeout(function() {
                 timerFlag = null;
             }, delay);
@@ -350,7 +351,7 @@ function throttle(mainFunction, delay) {
     };
 }
 
-function _array_like_to_array$j(arr, len) {
+function _array_like_to_array$k(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;
@@ -358,8 +359,8 @@ function _array_like_to_array$j(arr, len) {
 function _array_with_holes$j(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
+function _array_without_holes$2(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$k(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -403,7 +404,7 @@ function _define_property$m(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array$1(iter) {
+function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterable_to_array_limit$j(arr, i) {
@@ -433,7 +434,7 @@ function _iterable_to_array_limit$j(arr, i) {
 function _non_iterable_rest$j() {
     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$1() {
+function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$l(target) {
@@ -471,18 +472,18 @@ function _object_spread_props$4(target, source) {
     return target;
 }
 function _sliced_to_array$j(arr, i) {
-    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$j();
+    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$k(arr, i) || _non_iterable_rest$j();
 }
-function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$1();
+function _to_consumable_array$2(arr) {
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$k(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$j(o, minLen) {
+function _unsupported_iterable_to_array$k(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$k(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$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$k(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -745,7 +746,7 @@ function GlobalContextProvider(param) {
             type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
             payload: [
                 'none'
-            ].concat(_to_consumable_array$1(automatableParamsList))
+            ].concat(_to_consumable_array$2(automatableParamsList))
         });
     }, []);
     var allParametersReceived = useCallback(function(allParameters) {
@@ -992,7 +993,7 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$i(arr, len) {
+function _array_like_to_array$j(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;
@@ -1056,15 +1057,15 @@ function _object_spread$k(target) {
     return target;
 }
 function _sliced_to_array$i(arr, i) {
-    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$i();
+    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$i();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$j(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$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(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 ? [
@@ -1851,7 +1852,7 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$i(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;
@@ -1887,15 +1888,15 @@ function _non_iterable_rest$h() {
     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$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$h();
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 var useDropdown = function(param) {
     var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
@@ -1999,7 +2000,7 @@ var useDropdown = function(param) {
     };
 };
 
-function _array_like_to_array$g(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -2035,15 +2036,15 @@ 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 _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
+    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 Tabs(param) {
     var items = param.items, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -2275,7 +2276,7 @@ function Dropdown(param) {
 var css_248z$9 = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
 styleInject(css_248z$9);
 
-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;
@@ -2339,15 +2340,15 @@ function _object_spread$e(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$f(arr, i) || _non_iterable_rest$f();
+    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 _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);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -2545,7 +2546,7 @@ var GradientStyles = /*#__PURE__*/ function(GradientStyles) {
     return GradientStyles;
 }({});
 
-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;
@@ -2581,15 +2582,15 @@ 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$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();
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$e();
 }
-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);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -2857,7 +2858,7 @@ styleInject(css_248z$8);
 var css_248z$7 = "";
 styleInject(css_248z$7);
 
-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;
@@ -2893,15 +2894,15 @@ 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 _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();
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
 }
-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);
 }
 function ControlGroup(param) {
     var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children, width = param.width;
@@ -3266,6 +3267,7 @@ function RotaryCircle(param) {
     var activeZone = circ - circ * 0.25;
     return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$d({
         id: id,
+        key: "RotaryCircle-".concat(id),
         tabIndex: 0,
         className: classnames('Slider', 'RotarySlider', polarity === Polarity.unipolar ? 'Slider-polarity-unipolar' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
@@ -3371,7 +3373,7 @@ function PositioningWrapper(param) {
     }, positionedElement ? positionedElement : null));
 }
 
-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;
@@ -3407,15 +3409,15 @@ 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$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();
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
 }
-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);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -3839,7 +3841,7 @@ Slider$1.sliderType = SliderType;
 Slider$1.polarity = Polarity;
 Slider$1.orientation = Orientation;
 
-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;
@@ -3875,15 +3877,15 @@ 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$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();
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$b();
 }
-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);
 }
 var useCombobox = function(param) {
     var id = param.id, label = param.label, filter = param.filter; param.onChange; var _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader, isDisabled = param.isDisabled;
@@ -4401,7 +4403,7 @@ function LinePlot(param) {
 var css_248z$5 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
 styleInject(css_248z$5);
 
-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;
@@ -4465,15 +4467,15 @@ function _object_spread$7(target) {
     return target;
 }
 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();
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
 }
-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);
 }
 function Oscilloscope(param) {
     var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
@@ -4521,7 +4523,7 @@ styleInject(css_248z$4);
 var css_248z$3 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\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-lv5);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\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$3);
 
-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;
@@ -4590,15 +4592,15 @@ function _object_destructuring_empty(o) {
     return o;
 }
 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();
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
 }
-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 _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -4980,7 +4982,7 @@ function PresetManager(param) {
     }))))));
 }
 
-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;
@@ -5073,15 +5075,15 @@ function _object_spread$6(target) {
     return target;
 }
 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();
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$8();
 }
-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$2(thisArg, body) {
     var f, y, t, _ = {
@@ -5518,7 +5520,7 @@ var targetColors = [
 var ComboboxCellWidth = '217px';
 var DeleteButtonCellWidth = '50px';
 
-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;
@@ -5582,15 +5584,15 @@ function _object_spread$5(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();
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$7();
 }
-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 ModMatrixComboboxCell(param) {
     var rowId = param.rowId, key = param.key, color = param.color, style = param.style;
@@ -5795,7 +5797,7 @@ 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;
@@ -5878,15 +5880,15 @@ function _object_spread_props(target, source) {
     return target;
 }
 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();
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$6();
 }
-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);
 }
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
@@ -6035,7 +6037,7 @@ function ModMatrixRow(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;
@@ -6043,8 +6045,8 @@ function _array_like_to_array$5(arr, len) {
 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$5(arr);
+function _array_without_holes$1(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$6(arr);
 }
 function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -6088,7 +6090,7 @@ function _define_property$1(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array(iter) {
+function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterable_to_array_limit$5(arr, i) {
@@ -6118,7 +6120,7 @@ function _iterable_to_array_limit$5(arr, i) {
 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() {
+function _non_iterable_spread$1() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$1(target) {
@@ -6137,18 +6139,18 @@ function _object_spread$1(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();
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$5();
 }
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
+function _to_consumable_array$1(arr) {
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$6(arr) || _non_iterable_spread$1();
 }
-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 _ts_generator$1(thisArg, body) {
     var f, y, t, _ = {
@@ -6279,7 +6281,7 @@ function ModMatrix(param) {
             return modSlotTargets[item] <= 0;
         });
         if (unassignedModSlots.length > 0 && modSlotPreview.slotId) {
-            setDisplayedModSlots(_to_consumable_array(displayedSlots).concat([
+            setDisplayedModSlots(_to_consumable_array$1(displayedSlots).concat([
                 modSlotPreview.slotId
             ]));
         } else {
@@ -6354,7 +6356,7 @@ function ModMatrix(param) {
     ]);
     var headers = [
         'Target'
-    ].concat(_to_consumable_array(modSlotParamLabels), [
+    ].concat(_to_consumable_array$1(modSlotParamLabels), [
         ''
     ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
@@ -6398,7 +6400,6 @@ function ModMatrix(param) {
     }) : null));
 }
 
-var svgInnerMargin = 5;
 var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
     WaveTypes["Sine"] = "Sine";
     WaveTypes["Triangle"] = "Triangle";
@@ -6410,8 +6411,33 @@ var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
     return WaveTypes;
 }({});
 
+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_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    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(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array$5(o, minLen) {
+    if (!o) return;
+    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$5(o, minLen);
+}
 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 waveType = param.waveType, hz = param.hz, phaseValue = param.phaseValue, _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_maxArrayLength = param.maxArrayLength, maxArrayLength = _param_maxArrayLength;
     var generateCycle = // Returns a coordinate array for one cycle
     function generateCycle(index) {
         var cycle = [];
@@ -6445,7 +6471,10 @@ var getPointArray = function(param) {
                 case WaveTypes.Sine:
                     var angle = adjustedVal * (2 * Math.PI);
                     //prettier-ignore
-                    var sineShape = (1 - randomNumber) * (ampValue * Math.sin(angle)) / 2 + 0.5;
+                    var sineShape = Math.sin(angle) / 2 + 0.5;
+                    // if (sineShape > 0.5) {
+                    // sineShape = sineShape * (1 - randomNumber);
+                    // }
                     cycle.push({
                         x: adjustedVal,
                         //prettier-ignore
@@ -6454,7 +6483,7 @@ var getPointArray = function(param) {
                     break;
                 case WaveTypes.Ramp:
                     cycle.push({
-                        y: adjustedVal * ampValue * (1 - randomNumber)
+                        y: adjustedVal * constrainedAmpVal * (1 - randomNumber)
                     });
                     break;
                 // case WaveTypes.ExpUp:
@@ -6472,60 +6501,86 @@ var getPointArray = function(param) {
                 //   break;
                 case WaveTypes.Saw:
                     cycle.push({
-                        y: (adjustedVal > 0 ? 1 - adjustedVal : 0) * (1 - randomNumber) * ampValue
+                        y: (adjustedVal > 0 ? 1 - adjustedVal : 0) * (1 - randomNumber) * constrainedAmpVal
                     });
                     break;
                 case WaveTypes.Square:
                     cycle.push({
-                        y: adjustedVal > 0.5 ? 1 * (1 - randomNumber) * ampValue : 0 * (1 - randomNumber) * ampValue
+                        y: adjustedVal > 0.5 ? 1 * (1 - randomNumber) * constrainedAmpVal : 0 * (1 - randomNumber) * constrainedAmpVal
                     });
                     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
+                        adjustedVal * 2 > 1 ? (2 - adjustedVal * 2) * (1 - randomNumber) * constrainedAmpVal : adjustedVal * 2 * (1 - randomNumber) * constrainedAmpVal
                     });
                     break;
             }
         }
+        lowestNumberInCycle = cycle.reduce(function(acc, item) {
+            acc = Math.min(acc, item === null || item === void 0 ? void 0 : item.y);
+            return acc;
+        }, cycle[0].y);
         return cycle;
     };
     var output = [];
     var randomNumbers = [
         0.3,
-        0.8,
-        0.5,
-        0.1,
         0.7,
-        0.4,
-        0.8,
+        0.5,
+        0.2,
+        0.6,
+        0.3,
         0.2,
-        0.9,
+        0.3,
+        0.4,
         0.4
     ];
-    // Calculate the length of one cycle
+    var constrainedAmpVal = Math.max(ampValue, 0.001);
     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 minCycleLength = 93;
+        var maxCycleLength = 256;
+        return minCycleLength + (maxCycleLength - minCycleLength) * hz;
     };
     var cycleLength = getCycleLength();
-    var numCycles = Math.floor(maxLength / cycleLength);
+    // const cycleLength = 93;
+    var lowestNumberInCycle = 0;
+    var numCycles = Math.floor(maxArrayLength / 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;
+    var randomNumber = randomNumbers[0] * randValue;
+    var flattenedAllCycles = allCycles.flat();
+    var randomNumberIndex = 0;
+    var sineRandomizedAllCycles = [];
+    if (waveType === WaveTypes.Sine) {
+        flattenedAllCycles.forEach(function(item, i, array) {
+            var _array_, _array_i;
+            if ((array === null || array === void 0 ? void 0 : (_array_ = array[i - 1]) === null || _array_ === void 0 ? void 0 : _array_.y) > lowestNumberInCycle && (array === null || array === void 0 ? void 0 : (_array_i = array[i]) === null || _array_i === void 0 ? void 0 : _array_i.y) === lowestNumberInCycle) {
+                randomNumber = randomNumbers[randomNumberIndex] * randValue;
+                if (randomNumberIndex < randomNumbers.length) {
+                    randomNumberIndex += 1;
+                } else {
+                    randomNumberIndex = 0;
+                }
+            }
+            sineRandomizedAllCycles.push({
+                x: item.x,
+                y: item.y * (1 - randomNumber) * constrainedAmpVal
+            });
+        });
+    }
+    for(var i = 0; i < maxArrayLength; i++){
+        var _phasedAllCycles_i;
+        var phaseVal = flattenedAllCycles.length * (phaseValue / 4);
+        var arrayToUse = waveType === WaveTypes.Sine ? _to_consumable_array(sineRandomizedAllCycles) : _to_consumable_array(flattenedAllCycles);
+        var phasedAllCycles = arrayToUse.concat(arrayToUse.splice(0, phaseVal));
         output.push({
             x: i,
-            y: (_allCycles_flat_i = allCycles.flat()[i]) === null || _allCycles_flat_i === void 0 ? void 0 : _allCycles_flat_i.y
+            y: (_phasedAllCycles_i = phasedAllCycles[i]) === null || _phasedAllCycles_i === void 0 ? void 0 : _phasedAllCycles_i.y
         });
     }
     return output;
@@ -6534,6 +6589,175 @@ var getPointArray = function(param) {
 var css_248z$1 = "/* *[id^='outerglow'] {\n  opacity: 0.5;\n} */\n.area {\n  fill: url(#area-gradient);\n  /* stroke-width: 0px;w */\n}\n";
 styleInject(css_248z$1);
 
+function Line(param) {
+    var data = param.data; param.width; var xScale = param.xScale, yScale = param.yScale, _param_strokeColor = param.strokeColor, strokeColor = _param_strokeColor === void 0 ? 'var(--color-brand-600)' : _param_strokeColor, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? '3px' : _param_strokeWidth;
+    return /*#__PURE__*/ React__default.createElement("g", {
+        className: "marks"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        fill: "none",
+        // fill={fillGradient ? `url(#${fillGradient}-gradient)` : fillColor}
+        filter: "url(#dropshadow)",
+        stroke: strokeColor,
+        strokeWidth: strokeWidth,
+        //@ts-expect-error
+        d: line().x(function(d) {
+            return xScale(d.x);
+        }).y(function(d) {
+            return yScale(d.y);
+        }).curve(curveBasis)(data)
+    }), /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("filter", {
+        id: "dropshadow"
+    }, /*#__PURE__*/ React__default.createElement("feDropShadow", {
+        dx: "0",
+        dy: "0",
+        stdDeviation: ".5",
+        "flood-color": "var(--color-brand-600)",
+        "flood-opacity": ".5"
+    }))));
+}
+
+function Area(param) {
+    var data = param.data, xScale = param.xScale, yScale = param.yScale, _param_fillColor = param.fillColor, fillColor = _param_fillColor === void 0 ? 'var(--color-brand)' : _param_fillColor, fillGradient = param.fillGradient;
+    return /*#__PURE__*/ React__default.createElement("g", {
+        className: "marks"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        fill: fillGradient ? "url(#".concat(fillGradient, "-gradient)") : fillColor,
+        stroke: "none",
+        //@ts-expect-error
+        d: area().x(function(d) {
+            return xScale(d.x);
+        }).y0(function() {
+            return yScale(-1);
+        }).y1(function(d) {
+            return yScale(d.y);
+        }).curve(curveBasis)(data)
+    }), /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("linearGradient", {
+        id: "unicolor-gradient",
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "0%",
+        "stop-color": "var(--color-brand-700)",
+        "stop-opacity": 0.2
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "20%",
+        "stop-color": "var(--color-brand-700)",
+        "stop-opacity": 0.15
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "30%",
+        "stop-color": "var(--color-brand-700)",
+        "stop-opacity": 0.1
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "55%",
+        "stop-color": "var(--color-brand-700)",
+        "stop-opacity": 0
+    })), /*#__PURE__*/ React__default.createElement("linearGradient", {
+        id: "multicolor-gradient"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "0%",
+        "stop-color": "var(--color-brand)",
+        "stop-opacity": 0.2
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "20%",
+        "stop-color": "var(--color-brand)",
+        "stop-opacity": 0.15
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "30%",
+        "stop-color": "var(--color-brand)",
+        "stop-opacity": 0.1
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "55%",
+        "stop-color": "var(--color-brand-secondary)",
+        "stop-opacity": 0
+    }))));
+}
+
+function Ticks(param) {
+    var xScale = param.xScale, yScale = param.yScale, innerHeight = param.innerHeight, innerWidth = param.innerWidth, _param_centerLine = param.centerLine, centerLine = _param_centerLine === void 0 ? true : _param_centerLine, _param_strokeColor = param.strokeColor, strokeColor = _param_strokeColor === void 0 ? 'var(--bg-lv3)' : _param_strokeColor, _param_centerLineColor = param.centerLineColor, centerLineColor = _param_centerLineColor === void 0 ? 'var(--bg-lv4)' : _param_centerLineColor; param.tickFormat; param.tickOffset;
+    var _xScale_ticks, _yScale_ticks;
+    return /*#__PURE__*/ React__default.createElement("g", {
+        className: "ticks"
+    }, xScale ? /*#__PURE__*/ React__default.createElement("g", {
+        className: "xScale"
+    }, xScale === null || xScale === void 0 ? void 0 : (_xScale_ticks = xScale.ticks(25)) === null || _xScale_ticks === void 0 ? void 0 : _xScale_ticks.map(function(tickValue, i) {
+        return /*#__PURE__*/ React__default.createElement("line", {
+            x1: tickValue,
+            key: tickValue,
+            y1: 0,
+            y2: innerHeight,
+            x2: tickValue,
+            stroke: strokeColor
+        });
+    })) : null, yScale ? /*#__PURE__*/ React__default.createElement("g", {
+        className: "yScale"
+    }, yScale === null || yScale === void 0 ? void 0 : (_yScale_ticks = yScale.ticks(25)) === null || _yScale_ticks === void 0 ? void 0 : _yScale_ticks.map(function(tickValue) {
+        return /*#__PURE__*/ React__default.createElement("line", {
+            x1: 0,
+            x2: innerWidth,
+            key: tickValue,
+            y1: tickValue * 400,
+            y2: tickValue * 400,
+            stroke: strokeColor
+        });
+    })) : null, centerLine ? /*#__PURE__*/ React__default.createElement("g", {
+        className: "centerLine"
+    }, /*#__PURE__*/ React__default.createElement("line", {
+        x1: 0,
+        y1: "".concat(innerHeight / 2),
+        y2: "".concat(innerHeight / 2),
+        x2: "".concat(innerWidth),
+        stroke: centerLineColor,
+        strokeWidth: '2px'
+    })) : null);
+}
+
+function Chart(param) {
+    var data = param.data, width = param.width, height = param.height; param.margin; var strokeColor = param.strokeColor, fillColor = param.fillColor, fillGradient = param.fillGradient;
+    // const innerHeight = height - margin * 2;
+    // const innerWidth = width - margin * 2;
+    // const xAxisTickFormat = timeFormat('%a');
+    var maxArrayLength = 512;
+    var xScale = width && scaleLinear().domain([
+        0,
+        maxArrayLength
+    ]).range([
+        0,
+        width
+    ]);
+    var yScale = height && scaleLinear().domain([
+        0,
+        1
+    ]).range([
+        height - 5,
+        5
+    ]);
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: width,
+        height: height
+    }, ' ', /*#__PURE__*/ React__default.createElement(Ticks, {
+        // xScale={xScale}
+        // yScale={yScale}
+        centerLine: true,
+        innerHeight: height,
+        innerWidth: width
+    }), /*#__PURE__*/ React__default.createElement("g", null, fillColor || fillGradient ? /*#__PURE__*/ React__default.createElement(Area, {
+        fillColor: fillColor,
+        fillGradient: fillGradient,
+        data: data,
+        xScale: xScale,
+        yScale: yScale
+    }) : null, /*#__PURE__*/ React__default.createElement(Line, {
+        width: width,
+        strokeColor: strokeColor,
+        data: data,
+        xScale: xScale,
+        yScale: yScale
+    })));
+}
+Chart.fillGradient = GradientStyles;
+
 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];
@@ -6582,7 +6806,7 @@ function _unsupported_iterable_to_array$4(o, minLen) {
 }
 function LFOVisualizer(param) {
     var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 365 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 160 : _param_height;
-    var svgRef = useRef(null);
+    // const 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];
@@ -6594,14 +6818,15 @@ function LFOVisualizer(param) {
     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];
+    //@ts-expect-error
+    var _useState7 = _sliced_to_array$4(useState(0), 2); _useState7[0]; var 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;
+    var maxArrayLength = 512;
     // useEffect(() => {
     //   console.log(
     //     waveValue,
@@ -6697,9 +6922,58 @@ function LFOVisualizer(param) {
                 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', 1);
+            // // create center line for graph
+            // const svg = d3
+            //   .select(svgRef.current)
+            //   .attr('width', width)
+            //   .attr('height', height);
+            // svg
+            //   .append('line')
+            //   .attr('x1', `${svgInnerMargin}`)
+            //   .attr('y1', `${height / 2}`)
+            //   .attr('x2', `${width - svgInnerMargin}`)
+            //   .attr('y2', `${height / 2}`)
+            //   .attr('fill', 'none')
+            //   .attr('stroke', 'var(--color-gray-600)')
+            //   .attr('stroke-width', 2);
+            // const xScale = d3
+            //   .scaleLinear()
+            //   .domain([0, maxArrayLength])
+            //   .range([svgInnerMargin, width - svgInnerMargin]);
+            // const yScale = d3
+            //   .scaleLinear()
+            //   .domain([0, 1])
+            //   .range([height - svgInnerMargin, svgInnerMargin]);
+            // svg
+            //   .selectAll('line.horizontalGrid')
+            //   .data(yScale.ticks(10))
+            //   .enter()
+            //   .append('line')
+            //   .attr('x1', 0)
+            //   .attr('x2', width)
+            //   .attr('y1', function (d) {
+            //     return yScale(d);
+            //   })
+            //   .attr('y2', function (d) {
+            //     return yScale(d);
+            //   })
+            //   .attr('stroke', 'var(--bg-lv3)')
+            //   .attr('stroke-width', '1px');
+            // svg
+            //   .selectAll('line.verticalGrid')
+            //   .data(xScale.ticks(25))
+            //   .enter()
+            //   .append('line')
+            //   .attr('x1', function (d) {
+            //     return xScale(d);
+            //   })
+            //   .attr('x2', function (d) {
+            //     return xScale(d);
+            //   })
+            //   .attr('y1', 0)
+            //   .attr('y2', height)
+            //   .attr('stroke', 'var(--bg-lv3)')
+            //   .attr('stroke-width', '1px');
             return function() {
                 // Remove listeners on unmount
                 waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
@@ -6724,10 +6998,11 @@ function LFOVisualizer(param) {
         var pointArray = getPointArray({
             waveType: (_Object_values = Object.values(WaveTypes)) === null || _Object_values === void 0 ? void 0 : _Object_values[waveValue],
             hz: syncTypeValue === 0 ? hzValue : hzHiValue,
+            phaseValue: phaseValue,
             randValue: randValue,
             ampValue: ampValue,
             pulseWidth: widthValue,
-            maxLength: maxLength
+            maxArrayLength: maxArrayLength
         });
         setPoints(pointArray.filter(function(item) {
             return item.y !== undefined;
@@ -6739,78 +7014,91 @@ function LFOVisualizer(param) {
         hzHiValue,
         randValue,
         widthValue,
-        maxLength,
+        maxArrayLength,
+        phaseValue,
         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', 'var(--color-brand)').attr('stroke', 'var(--color-brand)').attr('stroke-width', 3).attr('shape-rendering', 'geometricPrecision').attr('color-rendering', 'optimizeQuality').attr('filter', 'url(#dropshadow)').join('path').attr('d', line).attr('d', d3.area()// .x((d) => xScale(0))
-        // .x0(xScale(0))
-        .x(function(d) {
-            //@ts-expect-error
-            return xScale(d.x);
-        }).y0(yScale(-1))//@ts-expect-error
-        .y1(function(d) {
-            return yScale(d.y);
-        })).attr('class', 'area');
-    }, [
-        points,
-        maxLength
-    ]);
-    d3.select(svgRef.current).append('linearGradient').attr('id', 'area-gradient')//.attr("gradientUnits", "userSpaceOnUse")
-    .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1).selectAll('stop').data([
-        {
-            offset: '0%',
-            color: 'var(--color-brand)',
-            opacity: 0.2
-        },
-        {
-            offset: '20%',
-            color: 'var(--color-brand)',
-            opacity: 0.15
-        },
-        {
-            offset: '30%',
-            color: 'var(--color-brand)',
-            opacity: 0.1
-        },
-        {
-            offset: '55%',
-            color: 'var(--color-brand)',
-            opacity: 0
-        }
-    ]).enter().append('stop').attr('offset', function(d) {
-        return d.offset;
-    }).attr('stop-color', function(d) {
-        return d.color;
-    }).attr('stop-opacity', function(d) {
-        return d.opacity;
-    });
+    // useEffect(() => {
+    //   // 2 * Math.PI = 1 circle in radians
+    //   // d3.range(initial value, last value, increment)
+    //   // sets the number of values
+    //   const svg = d3
+    //     .select(svgRef.current)
+    //     .attr('width', width)
+    //     .attr('height', height);
+    //   const defs = svg.append('defs');
+    //   const linearGradient = defs
+    //     .append('linearGradient')
+    //     .attr('id', 'area-gradient')
+    //     //.attr("gradientUnits", "userSpaceOnUse")
+    //     .attr('x1', 0)
+    //     .attr('y1', 0)
+    //     .attr('x2', 0)
+    //     .attr('y2', 1);
+    //   linearGradient
+    //     .append('stop')
+    //     .attr('offset', '0%')
+    //     .attr('stop-color', 'var(--color-brand)')
+    //     .attr('stop-opacity', 0.2);
+    //   linearGradient
+    //     .append('stop')
+    //     .attr('offset', '20%')
+    //     .attr('stop-color', 'var(--color-brand)')
+    //     .attr('stop-opacity', 0.15);
+    //   linearGradient
+    //     .append('stop')
+    //     .attr('offset', '30%')
+    //     .attr('stop-color', 'var(--color-brand)')
+    //     .attr('stop-opacity', 0.1);
+    //   linearGradient
+    //     .append('stop')
+    //     .attr('offset', '55%')
+    //     .attr('stop-color', 'var(--color-brand)')
+    //     .attr('stop-opacity', 0);
+    //   // linearGradient.append('stop').data([
+    //   //   { offset: '0%', color: 'var(--color-brand)', opacity: 0.2 },
+    //   //   { offset: '20%', color: 'var(--color-brand)', opacity: 0.15 },
+    //   //   { offset: '30%', color: 'var(--color-brand)', opacity: 0.1 },
+    //   //   { offset: '55%', color: 'var(--color-brand)', opacity: 0 },
+    //   // ]);
+    //   const xScale = d3
+    //     .scaleLinear()
+    //     .domain([0, maxArrayLength])
+    //     .range([svgInnerMargin, width - svgInnerMargin]);
+    //   const yScale = d3
+    //     .scaleLinear()
+    //     .domain([0, 1])
+    //     .range([height - svgInnerMargin, svgInnerMargin]);
+    //   // fill: 'none',
+    //   // 'shape-rendering': 'crispEdges',
+    //   const line = d3
+    //     .line()
+    //     //@ts-expect-error
+    //     .x((d) => xScale(d.x))
+    //     //@ts-expect-error
+    //     .y((d) => yScale(d.y))
+    //     .curve(d3.curveBasis);
+    //   // svg
+    //   //   .append('path')
+    //   //   .data([points])
+    //   //   .attr('fill', 'url(#area-gradient)')
+    //   //   // .attr('filter', 'url(#dropshadow)')
+    //   //   .attr('stroke', 'none')
+    //   //   .attr('d', line);
+    //   d3.select(svgRef.current)
+    //     .selectAll('path')
+    //     .attr('width', width * 2 - svgInnerMargin)
+    //     .attr('height', height)
+    //     .data([points])
+    //     .attr('fill', 'url(#area-gradient)')
+    //     .attr('stroke', 'var(--color-brand)')
+    //     .attr('stroke-width', 3)
+    //     .attr('shape-rendering', 'geometricPrecision')
+    //     .attr('color-rendering', 'optimizeQuality')
+    //     .attr('filter', 'url(#dropshadow)')
+    //     .join('path')
+    //     .attr('d', line);
+    // }, [points, maxArrayLength]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             backgroundColor: 'var(--bg-lv2)'
@@ -6825,27 +7113,13 @@ function LFOVisualizer(param) {
             overflow: 'hidden',
             width: width
         }
-    }, /*#__PURE__*/ React__default.createElement("svg", {
-        width: width * 2,
+    }, /*#__PURE__*/ React__default.createElement(Chart, {
+        data: points,
+        margin: 0,
+        width: width,
         height: height,
-        ref: svgRef,
-        style: {
-            transform: "translate(".concat((syncTypeValue === 0 || syncTypeValue === 1 ? phaseValue * 100 - 50 : syncOffsetValue * 100 - 50) / 2, "%)"),
-            margin: "0 -".concat(width / 2)
-        }
-    }, ' ', /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("filter", {
-        id: "dropshadow",
-        x: "-20%",
-        y: "-20%",
-        width: "140%",
-        height: "140%"
-    }, /*#__PURE__*/ React__default.createElement("feDropShadow", {
-        dx: "0",
-        dy: "0",
-        stdDeviation: ".5",
-        "flood-color": "var(--color-brand)",
-        "flood-opacity": "0.5"
-    }))))));
+        fillGradient: Chart.fillGradient.unicolor
+    })));
 }
 
 function _array_like_to_array$3(arr, len) {