@antimatter-audio/antimatter-ui 14.11.8 → 14.13.0

package/dist/index.js

@@ -407,7 +407,7 @@ function _async_to_generator$4(fn) {
         });
     };
 }
-function _define_property$n(obj, key, value) {
+function _define_property$p(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -453,7 +453,7 @@ function _non_iterable_rest$h() {
 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$m(target) {
+function _object_spread$o(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -463,7 +463,7 @@ function _object_spread$m(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$n(target, key, source[key]);
+            _define_property$p(target, key, source[key]);
         });
     }
     return target;
@@ -619,61 +619,61 @@ var defaultGlobalStateValue = {
 var reducer = function(state, action) {
     switch(action.type){
         case 'HIGHLIGHTED_ITEM_CHANGED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 highlightedItem: action.payload
             });
         // case 'FOCUSED_ITEM_CHANGED':
         //   return { ...state, focusedItem: action.payload };
         case 'ADVANCED_VIEW_TOGGLED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 advancedView: action.payload
             });
         case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 automatableParamsList: action.payload
             });
         case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 automatableParamLabels: action.payload
             });
         case 'PARAMETER_TYPES_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 parameterTypes: action.payload
             });
         case 'ALL_PARAMETERS_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 allParameters: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 modSlotIds: action.payload.map(function(val) {
                     return val[0];
                 })
             });
         case 'MOD_SLOT_ROW_TARGETS_RECEIVED':
             var _action_payload;
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 modSlotTargets: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.reduce(function(acc, val) {
-                    return _object_spread_props$4(_object_spread$m({}, acc), _define_property$n({}, val[0], val[1]));
+                    return _object_spread_props$4(_object_spread$o({}, acc), _define_property$p({}, val[0], val[1]));
                 }, {})
             });
         case 'MOD_SLOT_ROW_TARGET_UPDATED':
             var _action_payload1, _action_payload2;
-            return _object_spread_props$4(_object_spread$m({}, state), {
-                modSlotTargets: _object_spread_props$4(_object_spread$m({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$n({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
+            return _object_spread_props$4(_object_spread$o({}, state), {
+                modSlotTargets: _object_spread_props$4(_object_spread$o({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$p({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
             });
         case 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$m({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$m({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$o({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
                         targetIndex: action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$m({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$m({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$o({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
                         slotId: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
@@ -681,7 +681,7 @@ var reducer = function(state, action) {
         case 'SET_NEW_MOD_SLOT_PREVIEW':
             {
                 var _state_modSlotIds_find;
-                return _object_spread_props$4(_object_spread$m({}, state), {
+                return _object_spread_props$4(_object_spread$o({}, state), {
                     modSlotPreview: {
                         slotId: (_state_modSlotIds_find = state.modSlotIds.find(function(item) {
                             return state.modSlotTargets[item] <= 0;
@@ -693,7 +693,7 @@ var reducer = function(state, action) {
             }
         case 'CLEAR_MOD_SLOT_PREVIEW':
             {
-                return _object_spread_props$4(_object_spread$m({}, state), {
+                return _object_spread_props$4(_object_spread$o({}, state), {
                     modSlotPreview: {
                         slotId: '',
                         isEditable: false,
@@ -703,26 +703,26 @@ var reducer = function(state, action) {
             }
         case 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$m({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$m({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$o({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
                         isEditable: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
             var modSlotNames = Object.keys(state.modSlotTargets);
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 modSlotParams: action === null || action === void 0 ? void 0 : action.payload.reduce(function(acc, item, i) {
                     acc[modSlotNames[i]] = item;
                     return acc;
                 }, {})
             });
         case 'DEFAULT_PARAM_VALUES_RECEIVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 defaultParamValues: action === null || action === void 0 ? void 0 : action.payload
             });
         case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
-            return _object_spread_props$4(_object_spread$m({}, state), {
+            return _object_spread_props$4(_object_spread$o({}, state), {
                 modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
@@ -1018,7 +1018,7 @@ function _array_like_to_array$h(arr, len) {
 function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$m(obj, key, value) {
+function _define_property$o(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1058,7 +1058,7 @@ function _iterable_to_array_limit$g(arr, i) {
 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$l(target) {
+function _object_spread$n(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1068,7 +1068,7 @@ function _object_spread$l(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$m(target, key, source[key]);
+            _define_property$o(target, key, source[key]);
         });
     }
     return target;
@@ -1152,7 +1152,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$l({
+        style: _object_spread$n({
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
             paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
@@ -1201,7 +1201,7 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
-function _define_property$l(obj, key, value) {
+function _define_property$n(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1214,7 +1214,7 @@ function _define_property$l(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$k(target) {
+function _object_spread$m(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1224,7 +1224,7 @@ function _object_spread$k(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$l(target, key, source[key]);
+            _define_property$n(target, key, source[key]);
         });
     }
     return target;
@@ -1315,13 +1315,13 @@ function Box(_param) {
     ]);
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$k({
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$m({
         // id="globalValues"
         key: key,
         className: className,
         onClick: onClick
     }, rest), {
-        style: _object_spread$k({
+        style: _object_spread$m({
             flexWrap: flexWrap,
             display: display,
             width: width,
@@ -1360,7 +1360,7 @@ Box.tag = LayoutTags;
 var css_248z$c = ".Icon svg {\n  width: 100%;\n}\n";
 styleInject(css_248z$c);
 
-function _define_property$k(obj, key, value) {
+function _define_property$m(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1373,7 +1373,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$j(target) {
+function _object_spread$l(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1383,7 +1383,7 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$k(target, key, source[key]);
+            _define_property$m(target, key, source[key]);
         });
     }
     return target;
@@ -1732,7 +1732,7 @@ function Icon(param) {
         className: "Icon ".concat(className ? className : ''),
         onClick: onClick,
         padding: padding,
-        style: _object_spread$j({
+        style: _object_spread$l({
             width: width,
             height: height !== null && height !== void 0 ? height : width
         }, style)
@@ -1745,7 +1745,7 @@ Icon.icon = Icons;
 Icon.padding = Spacing;
 Icon.margin = Spacing;
 
-function _define_property$j(obj, key, value) {
+function _define_property$l(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1758,7 +1758,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$i(target) {
+function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1768,7 +1768,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+            _define_property$l(target, key, source[key]);
         });
     }
     return target;
@@ -1781,7 +1781,7 @@ function Label(param) {
     return /*#__PURE__*/ React.createElement("label", {
         id: id,
         htmlFor: htmlFor,
-        style: _object_spread$i({
+        style: _object_spread$k({
             fontSize: "var(--text-".concat(fontSize, ")"),
             lineHeight: "var(--text-".concat(fontSize, ")"),
             paddingTop: "var(--p-".concat(padding[0], ")"),
@@ -1801,7 +1801,7 @@ function Label(param) {
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-function _define_property$i(obj, key, value) {
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1814,7 +1814,7 @@ function _define_property$i(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$h(target) {
+function _object_spread$j(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1824,7 +1824,7 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -1848,7 +1848,7 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
-        style: _object_spread$h({
+        style: _object_spread$j({
             backgroundColor: backgroundColor,
             width: width,
             height: height !== null && height !== void 0 ? height : 'auto'
@@ -2159,7 +2159,7 @@ Tabs.fontSize = FontSizes;
 var css_248z$b = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-ml);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 4px;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: 26px;\n  border: 1px solid var(--bg-lv9);\n  /* background: var(--color-gray-800); */\n  /* color: var(--color-text); */\n}\n\n.Dropdown-button:hover,\n.Dropdown-button[data-open] {\n  outline: none;\n  cursor: pointer;\n  border: 1px solid var(--color-brand-secondary);\n}\n\n.Dropdown-button:hover .Label {\n  cursor: pointer;\n}\n\n.Dropdown-button:disabled {\n  cursor: default;\n}\n\n.Dropdown-items {\n  border: 1px solid var(--bg-lv9);\n  background: var(--bg-lv4);\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  width: 150px;\n  z-index: 50;\n}\n\n.Dropdown-item {\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Dropdown-item[data-selected] {\n  color: var(--color-brand-secondary);\n}\n\n.Dropdown-item:hover {\n  background-color: var(--bg-lv7);\n}\n\n.Dropdown-item:hover:not([data-selected]) {\n  color: var(--color-text);\n}\n";
 styleInject(css_248z$b);
 
-function _define_property$h(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2172,7 +2172,7 @@ function _define_property$h(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$g(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2182,7 +2182,7 @@ function _object_spread$g(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$h(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
@@ -2255,7 +2255,7 @@ function Dropdown(param) {
         onClick: incrementValue
     })), /*#__PURE__*/ React__default.createElement(ListboxButton, {
         className: classnames('Combobox Dropdown-button', className),
-        style: _object_spread$g({
+        style: _object_spread$i({
             color: "".concat(color ? color : 'initial'),
             width: "".concat(width ? width : '100%'),
             height: height,
@@ -2301,7 +2301,7 @@ function _array_like_to_array$e(arr, len) {
 function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$g(obj, key, value) {
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2341,7 +2341,7 @@ function _iterable_to_array_limit$d(arr, i) {
 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) {
+function _object_spread$h(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2351,7 +2351,7 @@ function _object_spread$f(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
@@ -2497,7 +2497,7 @@ function Input(param) {
         id: "".concat(id, "-input"),
         ref: inputRef,
         className: classnames('TextInput', isHighlighted ? 'is-highlighted' : '', className),
-        style: _object_spread$f({
+        style: _object_spread$h({
             fontSize: "var(--text-".concat(fontSize),
             textAlign: textAlign,
             color: textColor
@@ -2520,7 +2520,7 @@ Input.type = InputTypes;
 Input.textAlign = TextAlign;
 Input.fontSize = FontSizes;
 
-function _define_property$f(obj, key, value) {
+function _define_property$h(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2550,10 +2550,10 @@ var RotarySliderSizes = /*#__PURE__*/ function(RotarySliderSizes) {
     return RotarySliderSizes;
 }({});
 var _obj;
-var rotarySliderSizeMap = (_obj = {}, _define_property$f(_obj, "small", {
+var rotarySliderSizeMap = (_obj = {}, _define_property$h(_obj, "small", {
     width: 40,
     height: 40
-}), _define_property$f(_obj, "large", {
+}), _define_property$h(_obj, "large", {
     width: 65,
     height: 65
 }), _obj);
@@ -3223,7 +3223,7 @@ var BarSliderMarker = function(param) {
     }))));
 };
 
-function _define_property$e(obj, key, value) {
+function _define_property$g(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3236,7 +3236,7 @@ function _define_property$e(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$e(target) {
+function _object_spread$g(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3246,7 +3246,7 @@ function _object_spread$e(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$e(target, key, source[key]);
+            _define_property$g(target, key, source[key]);
         });
     }
     return target;
@@ -3278,7 +3278,7 @@ function RotaryCircle(param) {
     var circ = 2 * 3.14 * radius;
     var activeZone = circ - circ * 0.25;
     // console.log(markerShape, 'MARKERSHAPE');
-    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$e({
+    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$g({
         id: id,
         key: "RotaryCircle-".concat(id),
         tabIndex: 0,
@@ -3287,7 +3287,7 @@ function RotaryCircle(param) {
         onDoubleClick: function() {
             onDoubleClick && onDoubleClick();
         },
-        style: _object_spread$e({
+        style: _object_spread$g({
             touchAction: 'none',
             height: "".concat(height !== null && height !== void 0 ? height : width, "px"),
             width: "".concat(width, "px")
@@ -3334,7 +3334,7 @@ function RotaryCircle(param) {
 RotaryCircle.polarity = Polarity;
 RotaryCircle.size = RotarySliderSizes;
 
-function _define_property$d(obj, key, value) {
+function _define_property$f(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3347,7 +3347,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$d(target) {
+function _object_spread$f(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3357,7 +3357,7 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$f(target, key, source[key]);
         });
     }
     return target;
@@ -3369,7 +3369,7 @@ function PositioningWrapper(param) {
     return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: className,
-        style: _object_spread$d({
+        style: _object_spread$f({
             position: 'relative',
             height: height,
             width: width,
@@ -3405,13 +3405,19 @@ function AnimationDataWrapper(param) {
                     var func = function() {
                         return renderFunction(data);
                     };
-                    window.requestAnimationFrame(func);
+                    var animationFrameId = window.requestAnimationFrame(func);
+                    if (document.hidden) {
+                        window.cancelAnimationFrame(animationFrameId);
+                    }
                 });
             } else {
                 var func = function() {
                     return renderFunction(event);
                 };
-                window.requestAnimationFrame(func);
+                var animationFrameId = window.requestAnimationFrame(func);
+                if (document.hidden) {
+                    window.cancelAnimationFrame(animationFrameId);
+                }
             }
         });
         return function() {
@@ -3429,7 +3435,7 @@ AnimationDataWrapper.dataTypes = DataTypes;
 var css_248z$7 = ".canvasContainer {\n  --color-brand: #bb68d9;\n}\n";
 styleInject(css_248z$7);
 
-function _define_property$c(obj, key, value) {
+function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3442,7 +3448,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$c(target) {
+function _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3452,7 +3458,7 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$e(target, key, source[key]);
         });
     }
     return target;
@@ -3464,7 +3470,6 @@ function IndicatorLight(param) {
     // const canvasCtx = useRef<CanvasRenderingContext2D>(null);
     useEffect(function() {
         var canvas = document.getElementById("".concat(id));
-        // console.log(canvas, 'CAN');
         canvas.width = width;
         canvas.height = height;
         var canvasContainer = document.querySelector('.canvasContainer');
@@ -3506,7 +3511,7 @@ function IndicatorLight(param) {
         width: "auto"
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "canvasContainer",
-        style: _object_spread$c({
+        style: _object_spread$e({
             position: 'relative',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
@@ -3639,7 +3644,7 @@ RotarySlider.markerShape = RotarySliderMarkerShapes;
 var css_248z$6 = ".BarSlider {\n  --maxNarrowTrackIndicatorWidth: 6px;\n  --maxNarrowTrackWidth: 20px;\n  --minHorizontalWidth: 75px;\n  --minVerticalHeight: 75px;\n  --narrowTrackMargin: 8px;\n  --narrowTrackBorderRadius: 20px;\n}\n\n.BarSlider:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-MarkerWrapper {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.BarSlider-Marker {\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Narrow variant */\n.BarSlider--narrowTrack .BarSlider-Track {\n  border-radius: var(--narrowTrackBorderRadius);\n  background-color: var(--bg-lv3);\n  box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n/* .BarSlider--narrowTrack .BarSlider-IndicatorLine {\n  border-radius: var(--narrowTrackBorderRadius);\n} */\n\n.BarSlider--narrowTrack .BarSlider-Marker {\n  border-radius: var(--narrowTrackBorderRadius);\n}\n\n.BarSlider--narrowTrack .Barslider-IndicatorLineWrapper {\n  border-radius: var(--narrowTrackBorderRadius);\n  overflow: hidden;\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-MarkerWrapper {\n  bottom: var(--maxNarrowTrackIndicatorWidth);\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  width: var(--maxNarrowTrackIndicatorWidth);\n  height: calc(100% - (var(--narrowTrackMargin) * 2));\n  /* margin-left: var(--narrowTrackMargin); */\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-MarkerWrapper {\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  left: var(--maxNarrowTrackIndicatorWidth);\n  height: var(--maxNarrowTrackIndicatorWidth);\n  width: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-bottom: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-Track {\n  height: 100%;\n  max-height: 100%;\n  width: var(--maxNarrowTrackWidth);\n  min-height: var(--minVerticalHeight);\n  max-width: var(--maxNarrowTrackWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-Track {\n  width: 100%;\n  max-width: 100%;\n  height: var(--maxNarrowTrackWidth);\n  max-height: var(--maxNarrowTrackWidth);\n  min-width: var(--minHorizontalWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-IndicatorLine {\n  max-width: var(--maxNarrowTrackIndicatorWidth);\n  max-height: 100%;\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-IndicatorLine {\n  width: 100%;\n  max-width: 100%;\n  max-height: var(--maxNarrowTrackIndicatorWidth);\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  /* left: var(--narrowTrackMargin);\n  right: calc(100% - var(--narrowTrackMargin)); */\n}\n/* Wide variant */\n\n.BarSlider--wideTrack .BarSlider-Track {\n  border-radius: 2px;\n}\n\n.BarSlider--wideTrack.BarSlider--isVertical .BarSlider-Track {\n  min-height: var(--minVerticalHeight);\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n.BarSlider-Input.includeValueInHeightIsTrue {\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
 styleInject(css_248z$6);
 
-function _define_property$b(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3652,7 +3657,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$b(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3662,7 +3667,7 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -3711,7 +3716,7 @@ function Slider$1(param) {
     var multiColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand) 0%, var(--color-brand-secondary) 100%");
     var singleColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand-700) 0%, var(--color-brand) 100%");
     var _obj;
-    var selectedGradientMap = (_obj = {}, _define_property$b(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$b(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
+    var selectedGradientMap = (_obj = {}, _define_property$d(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$d(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -3754,12 +3759,12 @@ function Slider$1(param) {
             Box.padding.none
         ],
         height: "100%"
-    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$b({
+    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
         className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted')
     }, drag()), {
         // onMouseEnter={onMouseEnter}
         id: id,
-        style: _object_spread$b({
+        style: _object_spread$d({
             background: trackColor,
             stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
         }, style)
@@ -3769,7 +3774,7 @@ function Slider$1(param) {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
         className: "BarSlider-IndicatorLine",
-        style: _object_spread$b({
+        style: _object_spread$d({
             background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
             opacity: isStandalone || isHighlighted ? '100%' : '80%',
             top: "".concat(isHorizontal && isNarrowTrack && 'calc(50% - 3px)'),
@@ -4169,7 +4174,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$a(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4182,7 +4187,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$a(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4192,7 +4197,7 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -4205,7 +4210,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$a({
+        style: _object_spread$c({
             fontSize: "var(--text-".concat(fontSize),
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
@@ -4224,7 +4229,7 @@ Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-function _define_property$9(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4237,7 +4242,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4247,7 +4252,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -4259,7 +4264,7 @@ function KeyValueDisplayScreen(param) {
         // justifyContent={Box.justifyContent.flexStart}
         alignItems: Box.alignItems.flexStart,
         gap: Box.gap.small,
-        style: _object_spread$9({}, style),
+        style: _object_spread$b({}, style),
         padding: [
             Box.padding.small,
             Box.padding.none,
@@ -4442,10 +4447,11 @@ function Area(param) {
 }
 
 function LineChartSvg(param) {
-    var data = param.data, width = param.width, height = param.height, xScale = param.xScale, yScale = param.yScale, fillColor = param.fillColor, fillGradient = param.fillGradient, strokeColor = param.strokeColor, _param_displayGrid = param.displayGrid, displayGrid = _param_displayGrid === void 0 ? true : _param_displayGrid, _param_displayCenterLine = param.displayCenterLine, displayCenterLine = _param_displayCenterLine === void 0 ? true : _param_displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, numberOfTicks = param.numberOfTicks;
+    var data = param.data, width = param.width, height = param.height, xScale = param.xScale, yScale = param.yScale, fillColor = param.fillColor, fillGradient = param.fillGradient, strokeColor = param.strokeColor, strokeWidth = param.strokeWidth, _param_displayGrid = param.displayGrid, displayGrid = _param_displayGrid === void 0 ? true : _param_displayGrid, _param_displayCenterLine = param.displayCenterLine, displayCenterLine = _param_displayCenterLine === void 0 ? true : _param_displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, numberOfTicks = param.numberOfTicks, style = param.style;
     return /*#__PURE__*/ React__default.createElement("svg", {
         width: width,
-        height: height
+        height: height,
+        style: style
     }, displayGrid ? /*#__PURE__*/ React__default.createElement(Ticks, {
         numberOfTicks: numberOfTicks,
         xScale: xScale,
@@ -4465,21 +4471,76 @@ function LineChartSvg(param) {
     }) : null, /*#__PURE__*/ React__default.createElement(Line, {
         width: width,
         strokeColor: strokeColor,
+        strokeWidth: strokeWidth,
         data: data,
         xScale: xScale,
         yScale: yScale
     })));
 }
 
+function _define_property$a(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$a(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$a(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function LineChartCanvas(param) {
-    param.data; var id = param.id, width = param.width, height = param.height, xScale = param.xScale, yScale = param.yScale; param.margin; param.fillColor; param.fillGradient; param.strokeColor; var displayGrid = param.displayGrid, displayCenterLine = param.displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, numberOfTicks = param.numberOfTicks;
+    var data = param.data, id = param.id, width = param.width, height = param.height, xScale = param.xScale, yScale = param.yScale; param.margin; param.fillColor; param.fillGradient; var _param_strokeColor = param.strokeColor, strokeColor = _param_strokeColor === void 0 ? '#bb68d9' : _param_strokeColor, displayGrid = param.displayGrid, displayCenterLine = param.displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, numberOfTicks = param.numberOfTicks, style = param.style;
     var canvasRef = useRef(null);
+    useEffect(function() {
+        if (data === null || data === void 0 ? void 0 : data.length) {
+            var _canvasRef_current;
+            var ctx = canvasRef === null || canvasRef === void 0 ? void 0 : (_canvasRef_current = canvasRef.current) === null || _canvasRef_current === void 0 ? void 0 : _canvasRef_current.getContext('2d');
+            var line = d3.line(function(_, i) {
+                return xScale(i);
+            }, yScale).context(ctx);
+            ctx.clearRect(0, 0, width, height);
+            var vals = data.map(function(item) {
+                return item.y;
+            });
+            ctx.save();
+            ctx.beginPath();
+            line.curve(d3.curveBasis)(vals);
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = strokeColor;
+            ctx.shadowColor = 'rgba(187, 104, 217, .6)';
+            ctx.imageSmoothingEnabled = false;
+            ctx.shadowBlur = 5;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            ctx.stroke();
+        }
+    }, [
+        data
+    ]);
     return /*#__PURE__*/ React__default.createElement("div", {
-        style: {
+        style: _object_spread$a({
             width: width,
             height: height,
             position: 'relative'
-        }
+        }, style)
     }, displayGrid ? /*#__PURE__*/ React__default.createElement("div", {
         style: {
             position: 'absolute',
@@ -4523,14 +4584,16 @@ function LineChart(param) {
     var data = param.data, id = param.id, _param_width = param.width, width = _param_width === void 0 ? 100 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 100 : _param_height, _param_renderAs = param.renderAs, renderAs = _param_renderAs === void 0 ? GraphicRenderOptions.svg : _param_renderAs, _param_margin = param.margin, margin = _param_margin === void 0 ? 5 : _param_margin, _param_yScaleDomain = param.yScaleDomain, yScaleDomain = _param_yScaleDomain === void 0 ? [
         0,
         1
-    ] : _param_yScaleDomain, strokeColor = param.strokeColor, fillColor = param.fillColor, fillGradient = param.fillGradient, displayGrid = param.displayGrid, displayCenterLine = param.displayCenterLine, numberOfTicks = param.numberOfTicks, gridColor = param.gridColor, gridStroke = param.gridStroke;
+    ] : _param_yScaleDomain, strokeColor = param.strokeColor, strokeWidth = param.strokeWidth, fillColor = param.fillColor, fillGradient = param.fillGradient, displayGrid = param.displayGrid, displayCenterLine = param.displayCenterLine, numberOfTicks = param.numberOfTicks, gridColor = param.gridColor, gridStroke = param.gridStroke, style = param.style;
     var _data_current;
     // const innerHeight = height - margin * 2;
     // const innerWidth = width - margin * 2;
     // const xAxisTickFormat = timeFormat('%a');
     // const maxArrayLength = 512;
     var dataLength = Array.isArray(data) ? data === null || data === void 0 ? void 0 : data.length : data === null || data === void 0 ? void 0 : (_data_current = data.current) === null || _data_current === void 0 ? void 0 : _data_current.length;
-    var xScale = width && scaleLinear().domain([
+    // const xScale =
+    //   width && scaleLinear().domain([0, dataLength]).range([0, width]);
+    var xScale = d3.scaleLinear().domain([
         0,
         dataLength
     ]).range([
@@ -4542,6 +4605,7 @@ function LineChart(param) {
         margin
     ]);
     return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, renderAs === GraphicRenderOptions.svg ? /*#__PURE__*/ React__default.createElement(LineChartSvg, {
+        style: style,
         data: data,
         width: width,
         height: height,
@@ -4555,8 +4619,10 @@ function LineChart(param) {
         displayCenterLine: displayCenterLine,
         gridColor: gridColor,
         gridStroke: gridStroke,
-        numberOfTicks: numberOfTicks
+        numberOfTicks: numberOfTicks,
+        strokeWidth: strokeWidth
     }) : /*#__PURE__*/ React__default.createElement(LineChartCanvas, {
+        style: style,
         data: data,
         id: id,
         width: width,
@@ -4575,6 +4641,7 @@ function LineChart(param) {
     }));
 }
 LineChart.fillGradient = GradientStyles;
+LineChart.renderAs = GraphicRenderOptions;
 
 // import 'd3-transition';
 // import AxisBottom from './AxisBottom';
@@ -4668,7 +4735,7 @@ var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     return ChartTypes;
 }(ChartTypes || {});
 function Chart(param) {
-    var _param_chartType = param.chartType, chartType = _param_chartType === void 0 ? "line" : _param_chartType, data = param.data, id = param.id, width = param.width, height = param.height, _param_margin = param.margin, margin = _param_margin === void 0 ? 5 : _param_margin, bands = param.bands, strokeColor = param.strokeColor, fillColor = param.fillColor, fillGradient = param.fillGradient, stackedChartColors = param.stackedChartColors, _param_displayGrid = param.displayGrid, displayGrid = _param_displayGrid === void 0 ? true : _param_displayGrid, displayCenterLine = param.displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, yScaleDomain = param.yScaleDomain, numberOfTicks = param.numberOfTicks, _param_renderAs = param.renderAs, renderAs = _param_renderAs === void 0 ? GraphicRenderOptions.svg : _param_renderAs;
+    var _param_chartType = param.chartType, chartType = _param_chartType === void 0 ? "line" : _param_chartType, data = param.data, id = param.id, width = param.width, height = param.height, _param_margin = param.margin, margin = _param_margin === void 0 ? 5 : _param_margin, bands = param.bands, strokeColor = param.strokeColor, strokeWidth = param.strokeWidth, fillColor = param.fillColor, fillGradient = param.fillGradient, stackedChartColors = param.stackedChartColors, _param_displayGrid = param.displayGrid, displayGrid = _param_displayGrid === void 0 ? true : _param_displayGrid, displayCenterLine = param.displayCenterLine, gridColor = param.gridColor, gridStroke = param.gridStroke, yScaleDomain = param.yScaleDomain, numberOfTicks = param.numberOfTicks, _param_renderAs = param.renderAs, renderAs = _param_renderAs === void 0 ? GraphicRenderOptions.svg : _param_renderAs, style = param.style;
     return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, chartType === "line" ? /*#__PURE__*/ React__default.createElement(LineChart, {
         data: data || [],
         yScaleDomain: yScaleDomain,
@@ -4677,6 +4744,7 @@ function Chart(param) {
         height: height,
         margin: margin,
         strokeColor: strokeColor,
+        strokeWidth: strokeWidth,
         fillColor: fillColor,
         fillGradient: fillGradient,
         displayGrid: displayGrid,
@@ -4684,7 +4752,8 @@ function Chart(param) {
         gridColor: gridColor,
         gridStroke: gridStroke,
         numberOfTicks: numberOfTicks,
-        id: id
+        id: id,
+        style: style
     }) : null, chartType === "bar" ? /*#__PURE__*/ React__default.createElement(BarChart, {
         // data={data || []}
         // yScaleDomain={yScaleDomain}
@@ -4714,69 +4783,69 @@ Chart.fillGradient = GradientStyles;
 Chart.chartType = ChartTypes;
 Chart.renderAs = GraphicRenderOptions;
 
-var WorkerClass$1 = null;
+var WorkerClass$3 = null;
 
 try {
-    var WorkerThreads$1 =
+    var WorkerThreads$3 =
         typeof module !== 'undefined' && typeof module.require === 'function' && module.require('worker_threads') ||
         typeof __non_webpack_require__ === 'function' && __non_webpack_require__('worker_threads') ||
         typeof require === 'function' && require('worker_threads');
-    WorkerClass$1 = WorkerThreads$1.Worker;
+    WorkerClass$3 = WorkerThreads$3.Worker;
 } catch(e) {} // eslint-disable-line
 
-function decodeBase64$3(base64, enableUnicode) {
+function decodeBase64$7(base64, enableUnicode) {
     return Buffer.from(base64, 'base64').toString('utf8');
 }
 
-function createBase64WorkerFactory$5(base64, sourcemapArg, enableUnicodeArg) {
+function createBase64WorkerFactory$b(base64, sourcemapArg, enableUnicodeArg) {
     var sourcemap = sourcemapArg;
-    var source = decodeBase64$3(base64);
+    var source = decodeBase64$7(base64);
     var start = source.indexOf('\n', 10) + 1;
     var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
     return function WorkerFactory(options) {
-        return new WorkerClass$1(body, Object.assign({}, options, { eval: true }));
+        return new WorkerClass$3(body, Object.assign({}, options, { eval: true }));
     };
 }
 
-function decodeBase64$2(base64, enableUnicode) {
+function decodeBase64$6(base64, enableUnicode) {
     var binaryString = atob(base64);
     return binaryString;
 }
 
-function createURL$1(base64, sourcemapArg, enableUnicodeArg) {
+function createURL$3(base64, sourcemapArg, enableUnicodeArg) {
     var sourcemap = sourcemapArg;
-    var source = decodeBase64$2(base64);
+    var source = decodeBase64$6(base64);
     var start = source.indexOf('\n', 10) + 1;
     var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
     var blob = new Blob([body], { type: 'application/javascript' });
     return URL.createObjectURL(blob);
 }
 
-function createBase64WorkerFactory$4(base64, sourcemapArg, enableUnicodeArg) {
+function createBase64WorkerFactory$a(base64, sourcemapArg, enableUnicodeArg) {
     var url;
     return function WorkerFactory(options) {
-        url = url || createURL$1(base64, sourcemapArg);
+        url = url || createURL$3(base64, sourcemapArg);
         return new Worker(url, options);
     };
 }
 
-var kIsNodeJS$1 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
+var kIsNodeJS$3 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
 
-function isNodeJS$1() {
-    return kIsNodeJS$1;
+function isNodeJS$3() {
+    return kIsNodeJS$3;
 }
 
-function createBase64WorkerFactory$3(base64, sourcemapArg, enableUnicodeArg) {
-    if (isNodeJS$1()) {
-        return createBase64WorkerFactory$5(base64, sourcemapArg);
+function createBase64WorkerFactory$9(base64, sourcemapArg, enableUnicodeArg) {
+    if (isNodeJS$3()) {
+        return createBase64WorkerFactory$b(base64, sourcemapArg);
     }
-    return createBase64WorkerFactory$4(base64, sourcemapArg);
+    return createBase64WorkerFactory$a(base64, sourcemapArg);
 }
 
-var WorkerFactory$1 = /*#__PURE__*/createBase64WorkerFactory$3('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgY2FudmFzOwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICAvLyBjb25zb2xlLmxvZyhldmVudC5kYXRhLnR5cGUsICdldmVudC50eXBlJyk7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgY2FudmFzID0gZGF0YS5jYW52YXM7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ3VwZGF0ZScpIHsKICAgICAgICAgIHZhciBfZGF0YV9yZW5kZXJEYXRhXzsKICAgICAgICAgIHZhciBldmVudElkID0gJ29zY0RhdGEnOwogICAgICAgICAgdmFyIG1hcmdpbiA9IDEwOwogICAgICAgICAgdmFyIHNsaWNlZERhdGEgPSBkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IChfZGF0YV9yZW5kZXJEYXRhXyA9IGRhdGEucmVuZGVyRGF0YVsiIi5jb25jYXQoZXZlbnRJZCldKSA9PT0gbnVsbCB8fCBfZGF0YV9yZW5kZXJEYXRhXyA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2RhdGFfcmVuZGVyRGF0YV8uc2xpY2UoMCwgZGF0YS5jeWNsZUxlbmd0aCk7CiAgICAgICAgICBjb25zb2xlLmxvZyhkYXRhLmN5Y2xlTGVuZ3RoLCAnU0xJQ0VEJyk7CiAgICAgICAgICB2YXIgeFNjYWxlID0gZDMuc2NhbGVMaW5lYXIoKS5kb21haW4oWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgc2xpY2VkRGF0YSA9PT0gbnVsbCB8fCBzbGljZWREYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBzbGljZWREYXRhLmxlbmd0aAogICAgICAgICAgXSkucmFuZ2UoWwogICAgICAgICAgICAgIG1hcmdpbiwKICAgICAgICAgICAgICBkYXRhLndpZHRoIC0gbWFyZ2luCiAgICAgICAgICBdKTsKICAgICAgICAgIC8vIC5uaWNlKCk7CiAgICAgICAgICB2YXIgeVNjYWxlID0gZDMuc2NhbGVMaW5lYXIoKS5kb21haW4oZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLnlTY2FsZURvbWFpbikucmFuZ2UoWwogICAgICAgICAgICAgIGRhdGEuaGVpZ2h0IC0gbWFyZ2luLAogICAgICAgICAgICAgIG1hcmdpbgogICAgICAgICAgXSk7CiAgICAgICAgICAvLyAubmljZSgpOwogICAgICAgICAgaWYgKHNsaWNlZERhdGEgIT0gbnVsbCkgewogICAgICAgICAgICAgIC8vIGZpbGw6ICdub25lJywKICAgICAgICAgICAgICAvLyAnc2hhcGUtcmVuZGVyaW5nJzogJ2NyaXNwRWRnZXMnLAogICAgICAgICAgICAgIHZhciBjdHggPSBjYW52YXMgPT09IG51bGwgfHwgY2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTsKICAgICAgICAgICAgICB2YXIgbGluZSA9IGQzLmxpbmUoZnVuY3Rpb24oXywgaSkgewogICAgICAgICAgICAgICAgICByZXR1cm4geFNjYWxlKGkpOwogICAgICAgICAgICAgIH0sIHlTY2FsZSkuY29udGV4dChjdHgpOwogICAgICAgICAgICAgIHZhciBsaW5lRGF0YSA9IHNsaWNlZERhdGE7CiAgICAgICAgICAgICAgY3R4LmNsZWFyUmVjdCgwLCAwLCBjYW52YXMud2lkdGgsIGNhbnZhcy5oZWlnaHQpOwogICAgICAgICAgICAgIGN0eC5zYXZlKCk7CiAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgIGxpbmUuY3VydmUoZDMuY3VydmVCYXNpcykobGluZURhdGEpOwogICAgICAgICAgICAgIGN0eC5saW5lV2lkdGggPSAyOwogICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICcjNkZGRkY1JzsKICAgICAgICAgICAgICBjdHguc2hhZG93Q29sb3IgPSAncmdiYSgxMTEsIDI1NSwgMjQ1LCAuNyknOwogICAgICAgICAgICAgIGN0eC5pbWFnZVNtb290aGluZ0VuYWJsZWQgPSBmYWxzZTsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDU7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd09mZnNldFggPSAwOwogICAgICAgICAgICAgIGN0eC5zaGFkb3dPZmZzZXRZID0gMDsKICAgICAgICAgICAgICBjdHguc3Ryb2tlKCk7CiAgICAgICAgICAgICAgY2FudmFzID09PSBudWxsIHx8IGNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY2FudmFzLmdldENvbnRleHQoJzJkJykuZHJhd0ltYWdlKGNhbnZhcywgMCwgMCk7CiAgICAgICAgICAgICAgdmFyIGJpdG1hcCA9IGNhbnZhcyA9PT0gbnVsbCB8fCBjYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNhbnZhcy50cmFuc2ZlclRvSW1hZ2VCaXRtYXAoKTsKICAgICAgICAgICAgICBzZWxmLnBvc3RNZXNzYWdlKGJpdG1hcCk7CiAgICAgICAgICB9CiAgICAgIH0KICB9OwoKfSkoKTsKLy8jIHNvdXJjZU1hcHBpbmdVUkw9d29ya2VyLmpzLm1hcAoK', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==');
+var WorkerFactory$3 = /*#__PURE__*/createBase64WorkerFactory$9('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgY2FudmFzOwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICBpZiAoZGF0YS50eXBlID09PSAnaW5pdCcpIHsKICAgICAgICAgIGNhbnZhcyA9IGRhdGEuY2FudmFzOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGUnKSB7CiAgICAgICAgICB2YXIgX2RhdGFfcmVuZGVyRGF0YV87CiAgICAgICAgICB2YXIgZXZlbnRJZCA9ICdvc2NEYXRhJzsKICAgICAgICAgIHZhciBtYXJnaW4gPSAxMDsKICAgICAgICAgIHZhciBzbGljZWREYXRhID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiAoX2RhdGFfcmVuZGVyRGF0YV8gPSBkYXRhLnJlbmRlckRhdGFbIiIuY29uY2F0KGV2ZW50SWQpXSkgPT09IG51bGwgfHwgX2RhdGFfcmVuZGVyRGF0YV8gPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9kYXRhX3JlbmRlckRhdGFfLnNsaWNlKDAsIGRhdGEuY3ljbGVMZW5ndGgpOwogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIHNsaWNlZERhdGEgPT09IG51bGwgfHwgc2xpY2VkRGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogc2xpY2VkRGF0YS5sZW5ndGgKICAgICAgICAgIF0pLnJhbmdlKFsKICAgICAgICAgICAgICBtYXJnaW4sCiAgICAgICAgICAgICAgZGF0YS53aWR0aCAtIG1hcmdpbgogICAgICAgICAgXSk7CiAgICAgICAgICAvLyAubmljZSgpOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS55U2NhbGVEb21haW4pLnJhbmdlKFsKICAgICAgICAgICAgICBkYXRhLmhlaWdodCAtIG1hcmdpbiwKICAgICAgICAgICAgICBtYXJnaW4KICAgICAgICAgIF0pOwogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChzbGljZWREYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICAvLyBmaWxsOiAnbm9uZScsCiAgICAgICAgICAgICAgLy8gJ3NoYXBlLXJlbmRlcmluZyc6ICdjcmlzcEVkZ2VzJywKICAgICAgICAgICAgICB2YXIgY3R4ID0gY2FudmFzID09PSBudWxsIHx8IGNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgdmFyIGxpbmUgPSBkMy5saW5lKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHhTY2FsZShpKTsKICAgICAgICAgICAgICB9LCB5U2NhbGUpLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICB2YXIgbGluZURhdGEgPSBzbGljZWREYXRhOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICBjdHguc2F2ZSgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICBsaW5lLmN1cnZlKGQzLmN1cnZlQmFzaXMpKGxpbmVEYXRhKTsKICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gMjsKICAgICAgICAgICAgICBjdHguc3Ryb2tlU3R5bGUgPSAnIzZGRkZGNSc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTExLCAyNTUsIDI0NSwgLjcpJzsKICAgICAgICAgICAgICBjdHguaW1hZ2VTbW9vdGhpbmdFbmFibGVkID0gZmFsc2U7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0JsdXIgPSA1OwogICAgICAgICAgICAgIGN0eC5zaGFkb3dPZmZzZXRYID0gMDsKICAgICAgICAgICAgICBjdHguc2hhZG93T2Zmc2V0WSA9IDA7CiAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgIGNhbnZhcyA9PT0gbnVsbCB8fCBjYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpLmRyYXdJbWFnZShjYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSBjYW52YXMgPT09IG51bGwgfHwgY2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=');
 /* eslint-enable */
 
-function _define_property$8(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4789,7 +4858,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4799,7 +4868,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -4817,7 +4886,7 @@ function Oscilloscope(param) {
             canvas.width = width;
             canvas.height = height;
         }
-        var worker = new WorkerFactory$1();
+        var worker = new WorkerFactory$3();
         var offscreenCanvas = canvas.transferControlToOffscreen();
         worker.postMessage({
             type: 'init',
@@ -4846,7 +4915,7 @@ function Oscilloscope(param) {
         };
     };
     return /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$8({
+        style: _object_spread$9({
             height: height,
             width: width,
             flex: "0 0 ".concat(width)
@@ -5397,7 +5466,7 @@ function _async_to_generator$2(fn) {
         });
     };
 }
-function _define_property$7(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -5437,7 +5506,7 @@ function _iterable_to_array_limit$8(arr, i) {
 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$7(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -5447,7 +5516,7 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
@@ -5566,6 +5635,7 @@ function ModuleHeader(param) {
     var getAllParametersFunc = Juce.getNativeFunction('getAllParameters');
     var getParameterTypesFunc = Juce.getNativeFunction('getParameterTypes');
     var getDefaultParametersFunc = Juce.getNativeFunction('getDefaultParameters');
+    var setJSWindowIsLoaded = Juce.getNativeFunction('setJSWindowIsLoaded');
     var isLocalhost = window.location.hostname === 'localhost';
     var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, advancedViewToggled = _useGlobalContext.advancedViewToggled, allParametersReceived = _useGlobalContext.allParametersReceived, defaultParamValuesReceived = _useGlobalContext.defaultParamValuesReceived, parameterTypesReceived = _useGlobalContext.parameterTypesReceived;
     var getParameters = function() {
@@ -5637,6 +5707,7 @@ function ModuleHeader(param) {
     }
     useEffect(function() {
         getParameters();
+        setJSWindowIsLoaded(window !== undefined);
         document.addEventListener('keydown', keydownListener);
         return function() {
             document.removeEventListener('keydown', keydownListener);
@@ -5812,7 +5883,7 @@ function ModuleHeader(param) {
         ],
         className: classnames('ModuleHeader', className),
         height: "72px",
-        style: _object_spread$7({}, style)
+        style: _object_spread$8({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
@@ -5906,7 +5977,7 @@ function _array_like_to_array$8(arr, len) {
 function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$6(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -5946,7 +6017,7 @@ function _iterable_to_array_limit$7(arr, i) {
 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 _object_spread$6(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -5956,7 +6027,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -5985,7 +6056,6 @@ function ModMatrixComboboxCell(param) {
     var onChange = function(newValue) {
         // TODO: 'juceIndex' is needed here because the 'value' from the combobox is the string label.
         // Refactor the combobox so that the 'value' is the index number corresponding to the parameter's index in JUCE?
-        // console.log(newValue, 'NV');
         var juceIndex = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.indexOf(newValue);
         // handleChange(juceIndex);
         if (rowId === modSlotPreview.slotId) {
@@ -6006,7 +6076,7 @@ function ModMatrixComboboxCell(param) {
         className: "ModMatrixCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexEnd,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$6({
+        style: _object_spread$7({
             color: color
         }, style),
         padding: [
@@ -6053,7 +6123,7 @@ function ModMatrixComboboxCell(param) {
     }))));
 }
 
-function _define_property$5(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6066,7 +6136,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$5(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6076,7 +6146,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
@@ -6098,7 +6168,7 @@ function ModMatrixToggleCell(param) {
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$5({
+        style: _object_spread$6({
             color: color,
             pointerEvents: 'all'
         }, style),
@@ -6122,7 +6192,7 @@ function ModMatrixToggleCell(param) {
     }, Object.keys(Polarity)[index] || '0')));
 }
 
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6135,7 +6205,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$4(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6145,7 +6215,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -6162,7 +6232,7 @@ function SingleBarViz(param) {
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "SingleBarViz",
-        style: _object_spread$4({
+        style: _object_spread$5({
             position: 'absolute',
             background: sliderColor
         }, getBarTransformStyles({
@@ -6183,7 +6253,7 @@ function _array_like_to_array$7(arr, len) {
 function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$3(obj, key, value) {
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6223,7 +6293,7 @@ function _iterable_to_array_limit$6(arr, i) {
 function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$3(target) {
+function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6233,7 +6303,7 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
@@ -6290,12 +6360,12 @@ function ModMatrixCell(param) {
         onChangeActiveState: function(isActive) {
             return setIsActive(isActive);
         }
-    }, /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$3({
+    }, /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$4({
         className: "ModMatrixCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$3({
+        style: _object_spread$4({
             color: color,
             pointerEvents: 'all'
         }, style),
@@ -6344,7 +6414,7 @@ function ModMatrixCell(param) {
         //   isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
         // }
         sliderColor: color,
-        style: _object_spread$3({
+        style: _object_spread$4({
             alignSelf: 'flex-end',
             pointerEvents: 'none'
         }, getBarTransformStyles({
@@ -6455,7 +6525,7 @@ function _async_to_generator$1(fn) {
         });
     };
 }
-function _define_property$2(obj, key, value) {
+function _define_property$3(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6501,7 +6571,7 @@ function _non_iterable_rest$5() {
 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$2(target) {
+function _object_spread$3(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6511,7 +6581,7 @@ function _object_spread$2(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$2(target, key, source[key]);
+            _define_property$3(target, key, source[key]);
         });
     }
     return target;
@@ -6744,7 +6814,7 @@ function ModMatrix(param) {
             Box.padding.large
         ],
         className: "ModMatrix ".concat(className ? className : ''),
-        style: _object_spread$2({
+        style: _object_spread$3({
             backgroundColor: 'var(--bg-lvl2)'
         }, style),
         flexDirection: Box.flexDirection.column
@@ -6778,30 +6848,227 @@ function ModMatrix(param) {
     }) : null));
 }
 
-var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
-    WaveTypes["Sine"] = "Sine";
-    WaveTypes["Triangle"] = "Triangle";
-    WaveTypes["Ramp"] = "Ramp";
-    WaveTypes["Saw"] = "Saw";
-    // ExpUp = 'Exp Up',
-    // ExpDown = 'Exp Down',
-    WaveTypes["Square"] = "Square";
-    return WaveTypes;
-}({});
+var WorkerClass$2 = null;
 
-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);
+try {
+    var WorkerThreads$2 =
+        typeof module !== 'undefined' && typeof module.require === 'function' && module.require('worker_threads') ||
+        typeof __non_webpack_require__ === 'function' && __non_webpack_require__('worker_threads') ||
+        typeof require === 'function' && require('worker_threads');
+    WorkerClass$2 = WorkerThreads$2.Worker;
+} catch(e) {} // eslint-disable-line
+
+function decodeBase64$5(base64, enableUnicode) {
+    return Buffer.from(base64, 'base64').toString('utf8');
 }
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+
+function createBase64WorkerFactory$8(base64, sourcemapArg, enableUnicodeArg) {
+    var sourcemap = sourcemapArg;
+    var source = decodeBase64$5(base64);
+    var start = source.indexOf('\n', 10) + 1;
+    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
+    return function WorkerFactory(options) {
+        return new WorkerClass$2(body, Object.assign({}, options, { eval: true }));
+    };
 }
-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 decodeBase64$4(base64, enableUnicode) {
+    var binaryString = atob(base64);
+    return binaryString;
+}
+
+function createURL$2(base64, sourcemapArg, enableUnicodeArg) {
+    var sourcemap = sourcemapArg;
+    var source = decodeBase64$4(base64);
+    var start = source.indexOf('\n', 10) + 1;
+    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
+    var blob = new Blob([body], { type: 'application/javascript' });
+    return URL.createObjectURL(blob);
+}
+
+function createBase64WorkerFactory$7(base64, sourcemapArg, enableUnicodeArg) {
+    var url;
+    return function WorkerFactory(options) {
+        url = url || createURL$2(base64, sourcemapArg);
+        return new Worker(url, options);
+    };
+}
+
+var kIsNodeJS$2 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
+
+function isNodeJS$2() {
+    return kIsNodeJS$2;
+}
+
+function createBase64WorkerFactory$6(base64, sourcemapArg, enableUnicodeArg) {
+    if (isNodeJS$2()) {
+        return createBase64WorkerFactory$8(base64, sourcemapArg);
+    }
+    return createBase64WorkerFactory$7(base64, sourcemapArg);
+}
+
+var WorkerFactory$2 = /*#__PURE__*/createBase64WorkerFactory$6('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgdnVNZXRlckhvcml6b250YWxDYW52YXM7CiAgdmFyIGludGVuc2l0eVZhbHVlcyA9IFtdOwogIHZhciByYW1wUG9zaXRpb247CiAgdmFyIGxhc3RTZWxlY3RlZEluZGV4OwogIHZhciBhbmltYXRpb25EaXJlY3Rpb247CiAgc2VsZi5vbm1lc3NhZ2UgPSBmdW5jdGlvbihldmVudCkgewogICAgICB2YXIgZGF0YSA9IGV2ZW50LmRhdGE7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgdnVNZXRlckhvcml6b250YWxDYW52YXMgPSBkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEuY2FudmFzOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGVJbnRlbnNpdHlWYWx1ZXMnKSB7CiAgICAgICAgICBpbnRlbnNpdHlWYWx1ZXMgPSBkYXRhLmludGVuc2l0eVZhbHVlcy5tYXAoZnVuY3Rpb24oaXRlbSkgewogICAgICAgICAgICAgIHZhciBvdXRwdXQ7CiAgICAgICAgICAgICAgaWYgKGl0ZW0ueSA+PSAxKSB7CiAgICAgICAgICAgICAgICAgIG91dHB1dCA9IDAuOTk5OwogICAgICAgICAgICAgIH0gZWxzZSBpZiAoaXRlbS55IDwgMC4wMikgewogICAgICAgICAgICAgICAgICBvdXRwdXQgPSAwOwogICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICAgIG91dHB1dCA9IGl0ZW0ueTsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgcmV0dXJuIG91dHB1dDsKICAgICAgICAgIH0pOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGUnKSB7CiAgICAgICAgICByYW1wUG9zaXRpb24gPSBkYXRhLnJhbXBQb3NpdGlvbjsKICAgICAgICAgIHZhciBiYXNlU2VnbWVudFdpZHRoID0gNTsKICAgICAgICAgIHZhciBzZWdtZW50TWFyZ2luID0gMjsKICAgICAgICAgIHZhciBjb2xvcnMgPSBbCiAgICAgICAgICAgICAgJyNBQzQ3RDEnLAogICAgICAgICAgICAgICcjODkzQkE3JywKICAgICAgICAgICAgICAnIzZDMzE4NCcsCiAgICAgICAgICAgICAgJyMzNTFFNDEnCiAgICAgICAgICBdOwogICAgICAgICAgdmFyIGxpZ2h0ZXN0Q29sb3IgPSBjb2xvcnNbMF07CiAgICAgICAgICB2YXIgZGFya2VzdENvbG9yID0gY29sb3JzW2NvbG9ycy5sZW5ndGggLSAxXTsKICAgICAgICAgIC8vIGNvbnN0IGh6RGFya0NvbG9yID0KICAgICAgICAgIC8vICAgZGF0YS5oelZhbHVlID4gMjAKICAgICAgICAgIC8vICAgICA/IGNvbG9yc1swXQogICAgICAgICAgLy8gICAgIDogZGF0YS5hbXBWYWx1ZSA+IDE1CiAgICAgICAgICAvLyAgICAgICA/IGNvbG9yc1sxXQogICAgICAgICAgLy8gICAgICAgOiBkYXRhLmFtcFZhbHVlID4gMTAKICAgICAgICAgIC8vICAgICAgICAgPyBjb2xvcnNbMl0KICAgICAgICAgIC8vICAgICAgICAgOiBjb2xvcnNbM107CiAgICAgICAgICB2YXIgbnVtU2VnbWVudHMgPSBNYXRoLmZsb29yKGRhdGEud2lkdGggLyAoYmFzZVNlZ21lbnRXaWR0aCArIHNlZ21lbnRNYXJnaW4pKTsKICAgICAgICAgIHZhciBzZWdtZW50cyA9IEFycmF5LmZyb20oewogICAgICAgICAgICAgIGxlbmd0aDogbnVtU2VnbWVudHMKICAgICAgICAgIH0sIGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gIiIuY29uY2F0KGkpOwogICAgICAgICAgfSk7CiAgICAgICAgICB2YXIgaW50ZW5zaXR5SW5kZXggPSBNYXRoLmZsb29yKGludGVuc2l0eVZhbHVlcy5sZW5ndGggKiByYW1wUG9zaXRpb24pOwogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlQmFuZCgpLmRvbWFpbihzZWdtZW50cykucmFuZ2UoWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgZGF0YS53aWR0aAogICAgICAgICAgXSkucGFkZGluZygwLjIpOwogICAgICAgICAgdmFyIHJhbmdlID0gbnVtU2VnbWVudHMgKiBkYXRhLmFtcFZhbHVlOwogICAgICAgICAgdmFyIG9mZnNldCA9IChudW1TZWdtZW50cyAtIHJhbmdlKSAvIDI7CiAgICAgICAgICB2YXIgc2VsZWN0ZWRJbmRleCA9IE1hdGguZmxvb3IobnVtU2VnbWVudHMgKiBpbnRlbnNpdHlWYWx1ZXNbaW50ZW5zaXR5SW5kZXhdICsgb2Zmc2V0KTsKICAgICAgICAgIGlmIChkYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICB2YXIgY3R4ID0gdnVNZXRlckhvcml6b250YWxDYW52YXMgPT09IG51bGwgfHwgdnVNZXRlckhvcml6b250YWxDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgY3R4LmNsZWFyUmVjdCgwLCAwLCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMud2lkdGgsIHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzLmhlaWdodCk7CiAgICAgICAgICAgICAgdmFyIGhlaWdodCA9IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzID09PSBudWxsIHx8IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVySG9yaXpvbnRhbENhbnZhcy5oZWlnaHQ7CiAgICAgICAgICAgICAgdmFyIGNvbG9yR3JhZGllbnRTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGFuaW1hdGlvbkRpcmVjdGlvbiA9PT0gIkZhbGxpbmciID8gWwogICAgICAgICAgICAgICAgICBzZWxlY3RlZEluZGV4LAogICAgICAgICAgICAgICAgICBudW1TZWdtZW50cyAtIDEKICAgICAgICAgICAgICBdIDogWwogICAgICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgICAgICBzZWxlY3RlZEluZGV4CiAgICAgICAgICAgICAgXSkucmFuZ2UoLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgYW5pbWF0aW9uRGlyZWN0aW9uID09PSAiRmFsbGluZyIgPyBbCiAgICAgICAgICAgICAgICAgIGxpZ2h0ZXN0Q29sb3IsCiAgICAgICAgICAgICAgICAgIGRhcmtlc3RDb2xvcgogICAgICAgICAgICAgIF0gOiBbCiAgICAgICAgICAgICAgICAgIGRhcmtlc3RDb2xvciwKICAgICAgICAgICAgICAgICAgbGlnaHRlc3RDb2xvcgogICAgICAgICAgICAgIF0pLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgLmludGVycG9sYXRlKGQzLmludGVycG9sYXRlSGNsKTsKICAgICAgICAgICAgICB2YXIgY29sb3JTY2FsZSA9IGQzLnNjYWxlT3JkaW5hbCgpLmRvbWFpbih4U2NhbGUuZG9tYWluKCkpLnJhbmdlKHNlZ21lbnRzLm1hcChmdW5jdGlvbihfLCBpKSB7CiAgICAgICAgICAgICAgICAgIGlmIChhbmltYXRpb25EaXJlY3Rpb24gPT09ICJGYWxsaW5nIiAmJiBpID4gc2VsZWN0ZWRJbmRleCAmJiBpIDwgcmFuZ2UgKyBvZmZzZXQgfHwgYW5pbWF0aW9uRGlyZWN0aW9uID09PSAiUmlzaW5nIiAmJiBpIDwgc2VsZWN0ZWRJbmRleCAmJiBpID4gb2Zmc2V0KSB7CiAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gY29sb3JHcmFkaWVudFNjYWxlKGkpOwogICAgICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGRhcmtlc3RDb2xvcjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIH0pKTsKICAgICAgICAgICAgICBzZWdtZW50cy5mb3JFYWNoKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgdmFyIHNlZ21lbnRQb3MgPSB4U2NhbGUoIiIuY29uY2F0KGkpKSB8fCAwOwogICAgICAgICAgICAgICAgICB2YXIgaXNJbmRleCA9IHNlbGVjdGVkSW5kZXggPT09IGk7CiAgICAgICAgICAgICAgICAgIGlmIChzZWxlY3RlZEluZGV4ID4gbGFzdFNlbGVjdGVkSW5kZXgpIHsKICAgICAgICAgICAgICAgICAgICAgIGFuaW1hdGlvbkRpcmVjdGlvbiA9ICJSaXNpbmciOwogICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIGlmIChzZWxlY3RlZEluZGV4IDwgbGFzdFNlbGVjdGVkSW5kZXgpIHsKICAgICAgICAgICAgICAgICAgICAgIGFuaW1hdGlvbkRpcmVjdGlvbiA9ICJGYWxsaW5nIjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBpZiAoaXNJbmRleCkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9IGxpZ2h0ZXN0Q29sb3I7CiAgICAgICAgICAgICAgICAgIH0gZWxzZSBpZiAoaSA+IG9mZnNldCAmJiBpIDwgcmFuZ2UgKyBvZmZzZXQgJiYgZGF0YS5oelZhbHVlID4gMSkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICIiLmNvbmNhdChjb2xvclNjYWxlKCIiLmNvbmNhdChpKSkpOwogICAgICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9IGRhcmtlc3RDb2xvcjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBjdHguZmlsbFJlY3Qoc2VnbWVudFBvcywgMCwgeFNjYWxlLmJhbmR3aWR0aCgpLCBoZWlnaHQpOwogICAgICAgICAgICAgICAgICBsYXN0U2VsZWN0ZWRJbmRleCA9IHNlbGVjdGVkSW5kZXg7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgc2VnbWVudHMuZm9yRWFjaChmdW5jdGlvbihfLCBpKSB7CiAgICAgICAgICAgICAgICAgIHZhciBzZWdtZW50UG9zID0geFNjYWxlKCIiLmNvbmNhdChpKSkgfHwgMDsKICAgICAgICAgICAgICAgICAgaWYgKGkgPiBvZmZzZXQgJiYgaSA8IHJhbmdlICsgb2Zmc2V0ICYmIGRhdGEuaHpWYWx1ZSA+IDEgJiYgaSAhPT0gc2VsZWN0ZWRJbmRleCkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICJyZ2JhKDE3MiwgNzEsIDIwOSwgIi5jb25jYXQoZGF0YS5oelZhbHVlTm9ybWFsaXNlZCwgIikiKTsKICAgICAgICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSAicmdiYSgxNzIsIDcxLCAyMDksIDAiOwogICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsUmVjdChzZWdtZW50UG9zLCAwLCB4U2NhbGUuYmFuZHdpZHRoKCksIGhlaWdodCk7CiAgICAgICAgICAgICAgICAgIGxhc3RTZWxlY3RlZEluZGV4ID0gc2VsZWN0ZWRJbmRleDsKICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMuZ2V0Q29udGV4dCgnMmQnKS5kcmF3SW1hZ2UodnVNZXRlckhvcml6b250YWxDYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==');
+/* eslint-enable */
+
+function _define_property$2(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$2(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$2(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function LFOIntensityMeter(param) {
+    var _param_width = param.width, width = _param_width === void 0 ? 150 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 8 : _param_height, className = param.className, intensityValues = param.intensityValues; param.waveType; var style = param.style, id = param.id;
+    var workerRef = useRef(null);
+    // const [ampValue, setAmpValue] = useState(0);
+    // const ampValue = useRef(null);
+    var yScaleDomain = [
+        0,
+        1
+    ];
+    useEffect(function() {
+        var _workerRef_current;
+        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
+            type: 'updateIntensityValues',
+            intensityValues: intensityValues,
+            height: height * 0.75,
+            width: width
+        });
+    //   renderFuction();
+    }, [
+        intensityValues
+    ]);
+    useEffect(function() {
+        // const canvas = document.getElementById(`${id}`);
+        var canvas = document.createElement('canvas');
+        if (canvas) {
+            canvas.width = width;
+            canvas.height = height;
+        }
+        var worker = new WorkerFactory$2();
+        var offscreenCanvas = canvas.transferControlToOffscreen();
+        worker.postMessage({
+            type: 'init',
+            canvas: offscreenCanvas
+        }, [
+            offscreenCanvas
+        ]);
+        workerRef.current = worker;
+    }, [
+        window
+    ]);
+    // useEffect(() => {
+    //   workerRef?.current?.postMessage({
+    //     type: 'updateAmpValue',
+    //     ampValue: ampValue,
+    //   });
+    //   renderFuction();
+    // }, [ampValue]);
+    var renderFuction = function(data) {
+        var ampState = Juce.getSliderState("LFO".concat(id, "_Amp"));
+        var waveState = Juce.getComboBoxState("LFO".concat(id, "_Wave"));
+        var hzState = Juce.getSliderState("LFO".concat(id, "_Hz"));
+        workerRef === null || workerRef === void 0 ? void 0 : workerRef.current.postMessage({
+            type: 'update',
+            rampPosition: data,
+            waveType: waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex(),
+            ampValue: ampState === null || ampState === void 0 ? void 0 : ampState.scaledValue,
+            hzValue: hzState === null || hzState === void 0 ? void 0 : hzState.scaledValue,
+            hzValueNormalised: hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue(),
+            intensityValues: intensityValues,
+            height: height,
+            width: width,
+            yScaleDomain: yScaleDomain
+        });
+        workerRef.current.onmessage = function(e) {
+            var _document_getElementById, _document;
+            var imageBitmap = e === null || e === void 0 ? void 0 : e.data;
+            var canvas = (_document = document) === null || _document === void 0 ? void 0 : (_document_getElementById = _document.getElementById("LFO".concat(id, "_Ramp"))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.getContext('bitmaprenderer');
+            canvas === null || canvas === void 0 ? void 0 : canvas.transferFromImageBitmap(imageBitmap);
+        };
+    };
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: _object_spread$2({
+            height: height,
+            width: width,
+            flex: "0 0 ".concat(width)
+        }, style),
+        className: classnames('LFOIntensityMeter', className)
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'relative',
+            width: width,
+            height: height
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0,
+            height: height,
+            width: width
+        }
+    }, /*#__PURE__*/ React__default.createElement(AnimationDataWrapper, {
+        renderFunction: renderFuction,
+        eventId: "LFO".concat(id, "_Ramp"),
+        dataType: AnimationDataWrapper.dataTypes.number
+    }, /*#__PURE__*/ React__default.createElement(Chart, {
+        chartType: Chart.chartType.bar,
+        renderAs: Chart.renderAs.canvas,
+        width: width,
+        height: height,
+        yScaleDomain: yScaleDomain,
+        id: "LFO".concat(id, "_Ramp")
+    })))));
+}
+
+var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
+    WaveTypes["Sine"] = "Sine";
+    WaveTypes["Triangle"] = "Triangle";
+    WaveTypes["Ramp"] = "Ramp";
+    WaveTypes["Saw"] = "Saw";
+    // ExpUp = 'Exp Up',
+    // ExpDown = 'Exp Down',
+    WaveTypes["Square"] = "Square";
+    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();
@@ -6814,148 +7081,105 @@ function _unsupported_iterable_to_array$5(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
-var getPointArray = function(param) {
-    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 = [];
-        // 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 = Math.sin(angle) / 2 + 0.5;
-                    // if (sineShape > 0.5) {
-                    // sineShape = sineShape * (1 - randomNumber);
-                    // }
-                    cycle.push({
-                        x: adjustedVal,
-                        //prettier-ignore
-                        y: sineShape
-                    });
-                    break;
-                case WaveTypes.Ramp:
-                    cycle.push({
-                        y: adjustedVal * constrainedAmpVal * (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) * constrainedAmpVal
-                    });
-                    break;
-                case WaveTypes.Square:
-                    cycle.push({
-                        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) * constrainedAmpVal : adjustedVal * 2 * (1 - randomNumber) * constrainedAmpVal
-                    });
-                    break;
+// const randomNumbers = [0.3, 0.7, 0.5, 0.2, 0.6, 0.3, 0.2, 0.3, 0.4, 0.4];
+var minCycleLength = 93;
+// Returns a coordinate array for one cycle
+function generateCycle(param) {
+    var waveType = param.waveType, _param_ampValue = param.ampValue, ampValue = _param_ampValue === void 0 ? 1 : _param_ampValue, _param_cycleLength = param.cycleLength, cycleLength = _param_cycleLength === void 0 ? minCycleLength : _param_cycleLength, _param_pulseWidth = param.pulseWidth, pulseWidth = _param_pulseWidth === void 0 ? 1 : _param_pulseWidth;
+    var cycle = [];
+    //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 = angle > 0 ? Math.sin(angle) / 2 + 0.5 : 0;
+                cycle.push({
+                    x: adjustedVal,
+                    //prettier-ignore
+                    y: sineShape
+                });
+                break;
+            case WaveTypes.Ramp:
+                cycle.push({
+                    y: adjustedVal
+                });
+                break;
+            case WaveTypes.Saw:
+                cycle.push({
+                    y: adjustedVal > 0 ? 1 - adjustedVal : 0
+                });
+                break;
+            case WaveTypes.Square:
+                cycle.push({
+                    y: adjustedVal > 0.5 ? 1 : 0
+                });
+                break;
+            case WaveTypes.Triangle:
+                cycle.push({
+                    y: // prettier-ignore
+                    adjustedVal * 2 > 1 ? 2 - adjustedVal * 2 : adjustedVal * 2
+                });
+                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.7,
-        0.5,
-        0.2,
-        0.6,
-        0.3,
-        0.2,
-        0.3,
-        0.4,
-        0.4
-    ];
-    var constrainedAmpVal = Math.max(ampValue, 0.001);
-    var getCycleLength = function() {
-        var minCycleLength = 93;
-        var maxCycleLength = 256;
-        return minCycleLength + (maxCycleLength - minCycleLength) * hz;
-    };
-    var cycleLength = getCycleLength();
-    // 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);
     }
-    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({
+    if (waveType === WaveTypes.Sine && pulseWidth < 1) {
+        var smallestValIndex = cycle === null || cycle === void 0 ? void 0 : cycle.findIndex(function(item, i) {
+            var _cycle_;
+            return (item === null || item === void 0 ? void 0 : item.y) < 0.1 && (cycle === null || cycle === void 0 ? void 0 : (_cycle_ = cycle[i + 1]) === null || _cycle_ === void 0 ? void 0 : _cycle_.y) > (item === null || item === void 0 ? void 0 : item.y);
+        });
+        var beginning = cycle === null || cycle === void 0 ? void 0 : cycle.slice(0, smallestValIndex);
+        var end = cycle === null || cycle === void 0 ? void 0 : cycle.slice(smallestValIndex);
+        var zeroIndex = end === null || end === void 0 ? void 0 : end.findIndex(function(item) {
+            return (item === null || item === void 0 ? void 0 : item.y) === 0;
+        });
+        var slicedArray = _to_consumable_array(beginning).concat(_to_consumable_array(end.slice(zeroIndex)), _to_consumable_array(end.slice(0, zeroIndex)));
+        return slicedArray.map(function(item) {
+            return {
                 x: item.x,
-                y: item.y * (1 - randomNumber) * constrainedAmpVal
-            });
+                y: item.y * ampValue
+            };
         });
     }
-    for(var i = 0; i < maxArrayLength; i++){
+    return cycle.map(function(item) {
+        return {
+            x: item.x,
+            y: item.y * ampValue
+        };
+    });
+}
+var phaseShift = function(dataArray, phaseValue) {
+    if (!(dataArray === null || dataArray === void 0 ? void 0 : dataArray.length)) {
+        return [];
+    }
+    var output = [];
+    var arrayToUse = _to_consumable_array(dataArray).concat(_to_consumable_array(dataArray));
+    var phaseVal = arrayToUse.length * phaseValue;
+    var phasedAllCycles = arrayToUse.concat(arrayToUse.splice(0, phaseVal));
+    for(var i = 0; i < dataArray.length; 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: (_phasedAllCycles_i = phasedAllCycles[i]) === null || _phasedAllCycles_i === void 0 ? void 0 : _phasedAllCycles_i.y
@@ -6963,10 +7187,88 @@ var getPointArray = function(param) {
     }
     return output;
 };
+var getSingleCyclePointArray = function(param) {
+    var waveType = param.waveType, _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, phaseValue = param.phaseValue;
+    var data = waveType && generateCycle({
+        waveType: waveType,
+        pulseWidth: pulseWidth,
+        ampValue: ampValue
+    }).map(function(item, i) {
+        return {
+            x: i,
+            y: item.y
+        };
+    }).filter(function(item) {
+        return item.y !== undefined;
+    });
+    return phaseShift(data, phaseValue);
+};
 
 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);
 
+var WorkerClass$1 = null;
+
+try {
+    var WorkerThreads$1 =
+        typeof module !== 'undefined' && typeof module.require === 'function' && module.require('worker_threads') ||
+        typeof __non_webpack_require__ === 'function' && __non_webpack_require__('worker_threads') ||
+        typeof require === 'function' && require('worker_threads');
+    WorkerClass$1 = WorkerThreads$1.Worker;
+} catch(e) {} // eslint-disable-line
+
+function decodeBase64$3(base64, enableUnicode) {
+    return Buffer.from(base64, 'base64').toString('utf8');
+}
+
+function createBase64WorkerFactory$5(base64, sourcemapArg, enableUnicodeArg) {
+    var sourcemap = sourcemapArg;
+    var source = decodeBase64$3(base64);
+    var start = source.indexOf('\n', 10) + 1;
+    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
+    return function WorkerFactory(options) {
+        return new WorkerClass$1(body, Object.assign({}, options, { eval: true }));
+    };
+}
+
+function decodeBase64$2(base64, enableUnicode) {
+    var binaryString = atob(base64);
+    return binaryString;
+}
+
+function createURL$1(base64, sourcemapArg, enableUnicodeArg) {
+    var sourcemap = sourcemapArg;
+    var source = decodeBase64$2(base64);
+    var start = source.indexOf('\n', 10) + 1;
+    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
+    var blob = new Blob([body], { type: 'application/javascript' });
+    return URL.createObjectURL(blob);
+}
+
+function createBase64WorkerFactory$4(base64, sourcemapArg, enableUnicodeArg) {
+    var url;
+    return function WorkerFactory(options) {
+        url = url || createURL$1(base64, sourcemapArg);
+        return new Worker(url, options);
+    };
+}
+
+var kIsNodeJS$1 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
+
+function isNodeJS$1() {
+    return kIsNodeJS$1;
+}
+
+function createBase64WorkerFactory$3(base64, sourcemapArg, enableUnicodeArg) {
+    if (isNodeJS$1()) {
+        return createBase64WorkerFactory$5(base64, sourcemapArg);
+    }
+    return createBase64WorkerFactory$4(base64, sourcemapArg);
+}
+
+var WorkerFactory$1 = /*#__PURE__*/createBase64WorkerFactory$3('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgTEZPRG90Q2FudmFzOwogIHZhciBwb2ludEFycmF5ID0gW107CiAgc2VsZi5vbm1lc3NhZ2UgPSBmdW5jdGlvbihldmVudCkgewogICAgICB2YXIgZGF0YSA9IGV2ZW50LmRhdGE7CiAgICAgIC8vICAgY29uc3QgeVZhbHVlcyA9IGRhdGE/LnlWYWx1ZXM7CiAgICAgIHZhciBsaW5lV2lkdGggPSAyOwogICAgICAvLyAgIGNvbnN0IG1hcmdpbiA9IDE0OwogICAgICAvLyAgIGNvbnN0IGlubmVyV2lkdGggPSBkYXRhPy53aWR0aCAtIG1hcmdpbiAqIDI7CiAgICAgIHZhciBoZWlnaHQgPSBkYXRhLmhlaWdodCArIDIyOwogICAgICBpZiAoZGF0YS50eXBlID09PSAnaW5pdCcpIHsKICAgICAgICAgIExGT0RvdENhbnZhcyA9IGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5jYW52YXM7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ3VwZGF0ZVBvaW50QXJyYXknKSB7CiAgICAgICAgICAvLyBjb25zdCBldmVudElkID0gJ1ZVTWV0ZXJTaWduYWwnOwogICAgICAgICAgdmFyIGRhdGExID0gZXZlbnQuZGF0YTsKICAgICAgICAgIHBvaW50QXJyYXkgPSBkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEucG9pbnRBcnJheTsKICAgICAgICAgIHZhciB4U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBwb2ludEFycmF5ID09PSBudWxsIHx8IHBvaW50QXJyYXkgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHBvaW50QXJyYXkubGVuZ3RoCiAgICAgICAgICBdKS5yYW5nZShbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEud2lkdGgKICAgICAgICAgIF0pOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIDEKICAgICAgICAgIF0pLnJhbmdlKFsKICAgICAgICAgICAgICBoZWlnaHQsCiAgICAgICAgICAgICAgMAogICAgICAgICAgXSk7CiAgICAgICAgICAvL3lWYWx1ZXNbTWF0aC5mbG9vcih5VmFsdWVzLmxlbmd0aCAqIGRhdGE/LnJhbXBWYWx1ZSwpXT8ueQogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChkYXRhMSAhPSBudWxsKSB7CiAgICAgICAgICAgICAgdmFyIGN0eCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICAgIC8vIGNvbnN0IGxpbmUgPSBkMy5saW5lKChfLCBpKSA9PiB4U2NhbGUoaSksIHlTY2FsZSkuY29udGV4dChjdHgpOwogICAgICAgICAgICAgIHZhciBsaW5lQkcgPSBkMy5saW5lKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHhTY2FsZShpKTsKICAgICAgICAgICAgICB9LCB5U2NhbGUpLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICBjdHguY2xlYXJSZWN0KDAsIDAsIGRhdGExLndpZHRoLCBkYXRhMS5oZWlnaHQpOwogICAgICAgICAgICAgIC8vICAgY3R4LnRyYW5zbGF0ZShsaW5lV2lkdGgsIGxpbmVXaWR0aCk7CiAgICAgICAgICAgICAgdmFyIHZhbHMgPSBwb2ludEFycmF5ID09PSBudWxsIHx8IHBvaW50QXJyYXkgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHBvaW50QXJyYXkubWFwKGZ1bmN0aW9uKGl0ZW0pIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIGl0ZW0ueSAtIGxpbmVXaWR0aCAqIDAuMDE7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgdmFyIHhQb3MgPSB4U2NhbGUucmFuZ2UoKVsxXSAqIChkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEucmFtcFZhbHVlKSArIGxpbmVXaWR0aCAqIDAuMDE7CiAgICAgICAgICAgICAgdmFyIGxpbmVhckdyYWRpZW50ID0gY3R4LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIGhlaWdodCk7CiAgICAgICAgICAgICAgLy8gbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAsICdyZ2JhKDE0NywgNDYsIDE4NCwgLjE1KScpOwogICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLCAncmdiYSgxNDcsIDQ2LCAxODQsIC4xKScpOwogICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjg1LCAncmdiYSgxNDcsIDQ2LCAxODQsIDApJyk7CiAgICAgICAgICAgICAgdmFyIGFyZWFHZW5lcmF0b3IgPSBkMy5hcmVhKCkueChmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB4U2NhbGUoZC54KTsKICAgICAgICAgICAgICB9KS55MChmdW5jdGlvbigpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHlTY2FsZSgtMSk7CiAgICAgICAgICAgICAgfSkueTEoZnVuY3Rpb24oZCkgewogICAgICAgICAgICAgICAgICByZXR1cm4geVNjYWxlKGQueSk7CiAgICAgICAgICAgICAgfSkuY29udGV4dChjdHgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICAvL0B0cy1leHBlY3QtZXJyb3IKICAgICAgICAgICAgICBhcmVhR2VuZXJhdG9yKHBvaW50QXJyYXkpOwogICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSBsaW5lYXJHcmFkaWVudDsKICAgICAgICAgICAgICBjdHguZmlsbCgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gbGluZVdpZHRoOwogICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICcjYWM0N2QxJzsKICAgICAgICAgICAgICBjdHgubGluZUNhcCA9ICdyb3VuZCc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTg3LCAxMDQsIDIxNywgLjQpJzsKICAgICAgICAgICAgICBjdHguc2V0TGluZURhc2goW10pOwogICAgICAgICAgICAgIGN0eC5pbWFnZVNtb290aGluZ0VuYWJsZWQgPSBmYWxzZTsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDU7CiAgICAgICAgICAgICAgbGluZUJHKHZhbHMpOwogICAgICAgICAgICAgIGN0eC5zdHJva2UoKTsKICAgICAgICAgICAgICB2YXIgeVBvcyA9IHlTY2FsZSh2YWxzW01hdGguZmxvb3IodmFscy5sZW5ndGggKiAoZGF0YTEgPT09IG51bGwgfHwgZGF0YTEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGExLnJhbXBWYWx1ZSkpXSk7CiAgICAgICAgICAgICAgdmFyIHJhZGl1cyA9IDQ7CiAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgIGN0eC5zaGFkb3dDb2xvciA9ICdub25lJzsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDA7CiAgICAgICAgICAgICAgY3R4LmFyYyh4UG9zLCB5UG9zLCByYWRpdXMsIDAsIDIgKiBNYXRoLlBJKTsKICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJyNkMTk5ZTYnOwogICAgICAgICAgICAgIGN0eC5maWxsKCk7CiAgICAgICAgICAgICAgTEZPRG90Q2FudmFzID09PSBudWxsIHx8IExGT0RvdENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogTEZPRG90Q2FudmFzLmdldENvbnRleHQoJzJkJykuZHJhd0ltYWdlKExGT0RvdENhbnZhcywgMCwgMCk7CiAgICAgICAgICAgICAgdmFyIGJpdG1hcCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy50cmFuc2ZlclRvSW1hZ2VCaXRtYXAoKTsKICAgICAgICAgICAgICBzZWxmLnBvc3RNZXNzYWdlKGJpdG1hcCk7CiAgICAgICAgICB9CiAgICAgIH0KICB9OwoKfSkoKTsKLy8jIHNvdXJjZU1hcHBpbmdVUkw9d29ya2VyLmpzLm1hcAoK', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9');
+/* eslint-enable */
+
 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];
@@ -7017,61 +7319,37 @@ 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;
     // 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];
-    var _useState2 = _sliced_to_array$4(useState(0), 2), hzHiValue = _useState2[0], setHzHiValue = _useState2[1];
+    // const [waveValue, setWaveValue] = useState(0);
     //@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];
+    var _useState = _sliced_to_array$4(useState(0), 2); _useState[0]; var setHzValue = _useState[1];
     //@ts-expect-error
-    var _useState5 = _sliced_to_array$4(useState(0), 2); _useState5[0]; var setSixteenthsValue = _useState5[1];
+    var _useState1 = _sliced_to_array$4(useState(0), 2); _useState1[0]; var setHzHiValue = _useState1[1];
     //@ts-expect-error
-    var _useState6 = _sliced_to_array$4(useState(0), 2); _useState6[0]; var setThirdsValue = _useState6[1];
+    var _useState2 = _sliced_to_array$4(useState(0), 2); _useState2[0]; var setSyncRateValue = _useState2[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 maxArrayLength = 512;
-    // 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,
-    // ]);
+    var _useState3 = _sliced_to_array$4(useState(0), 2); _useState3[0]; var setSyncTypeValue = _useState3[1];
+    //@ts-expect-error
+    var _useState4 = _sliced_to_array$4(useState(0), 2); _useState4[0]; var setSixteenthsValue = _useState4[1];
+    //@ts-expect-error
+    var _useState5 = _sliced_to_array$4(useState(0), 2); _useState5[0]; var setThirdsValue = _useState5[1];
+    //@ts-expect-error
+    var _useState6 = _sliced_to_array$4(useState(0), 2); _useState6[0]; var setSyncOffsetValue = _useState6[1];
+    var _useState7 = _sliced_to_array$4(useState(0), 2), phaseValue = _useState7[0], setPhaseValue = _useState7[1];
+    var _useState8 = _sliced_to_array$4(useState(0), 2), widthValue = _useState8[0], setWidthValue = _useState8[1];
+    var _useState9 = _sliced_to_array$4(useState(0), 2), ampValue = _useState9[0], setAmpValue = _useState9[1];
+    //@ts-expect-error
+    var _useState10 = _sliced_to_array$4(useState(0), 2); _useState10[0]; var setRandValue = _useState10[1];
+    var _useState11 = _sliced_to_array$4(useState(null), 2), waveType = _useState11[0], setWaveType = _useState11[1];
+    var _useState12 = _sliced_to_array$4(useState(null), 2), pointArray = _useState12[0], setPointArray = _useState12[1];
+    var workerRef = useRef(null);
     // 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());
+            // setWaveValue(waveState?.getChoiceIndex());
+            setWaveType(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"));
@@ -7095,7 +7373,7 @@ function LFOVisualizer(param) {
             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());
+                setWaveType(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());
@@ -7130,59 +7408,23 @@ function LFOVisualizer(param) {
             var randListenerId = randState.valueChangedEvent.addListener(function() {
                 setRandValue(randState === null || randState === void 0 ? void 0 : randState.getNormalisedValue());
             });
-            // Set up initial graph view
-            // // 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');
+            // Canvas
+            var canvas = document.createElement('canvas');
+            if (canvas) {
+                canvas.width = width;
+                canvas.height = height;
+            }
+            var worker = new WorkerFactory$1();
+            var offscreenCanvas = canvas.transferControlToOffscreen();
+            worker.postMessage({
+                type: 'init',
+                canvas: offscreenCanvas
+            }, [
+                offscreenCanvas
+            ]);
+            if (workerRef && worker) {
+                workerRef.current = worker;
+            }
             return function() {
                 // Remove listeners on unmount
                 waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
@@ -7197,6 +7439,10 @@ function LFOVisualizer(param) {
                 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);
+                if (workerRef === null || workerRef === void 0 ? void 0 : workerRef.current) {
+                    workerRef === null || workerRef === void 0 ? void 0 : workerRef.current.terminate();
+                    workerRef.current = null;
+                }
             };
         }
     }, [
@@ -7204,111 +7450,52 @@ function LFOVisualizer(param) {
     ]);
     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,
-            phaseValue: phaseValue,
-            randValue: randValue,
-            ampValue: ampValue,
+        var pointValues = getSingleCyclePointArray({
+            waveType: waveType !== null ? (_Object_values = Object.values(WaveTypes)) === null || _Object_values === void 0 ? void 0 : _Object_values[waveType] : null,
             pulseWidth: widthValue,
-            maxArrayLength: maxArrayLength
+            ampValue: ampValue,
+            phaseValue: phaseValue
         });
-        setPoints(pointArray.filter(function(item) {
-            return item.y !== undefined;
-        }));
+        setPointArray(pointValues);
     }, [
-        waveValue,
-        syncTypeValue,
-        hzValue,
-        hzHiValue,
-        randValue,
+        waveType,
+        window,
+        WaveTypes,
         widthValue,
-        maxArrayLength,
-        phaseValue,
-        ampValue
+        ampValue,
+        phaseValue
+    ]);
+    var renderFuction = function() {
+        // workerRef?.current?.postMessage({
+        //   type: 'updateAnimation',
+        //   rampValue: data,
+        //   height: height * 0.75,
+        //   width,
+        // });
+        if (workerRef === null || workerRef === void 0 ? void 0 : workerRef.current) {
+            workerRef.current.onmessage = function(e) {
+                var _document_getElementById, _document;
+                var imageBitmap = e === null || e === void 0 ? void 0 : e.data;
+                var canvas = (_document = document) === null || _document === void 0 ? void 0 : (_document_getElementById = _document.getElementById("LFO".concat(id, "_Ramp_Wave"))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.getContext('bitmaprenderer');
+                canvas === null || canvas === void 0 ? void 0 : canvas.transferFromImageBitmap(imageBitmap);
+            };
+        }
+    };
+    useEffect(function() {
+        var _workerRef_current;
+        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
+            type: 'updatePointArray',
+            pointArray: pointArray,
+            height: height * 0.75,
+            width: width
+        });
+        renderFuction();
+    }, [
+        pointArray
     ]);
-    // 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, {
+        flexDirection: Box.flexDirection.column
+    }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             backgroundColor: 'var(--bg-lv2)'
         },
@@ -7316,20 +7503,45 @@ function LFOVisualizer(param) {
             Box.padding.medium
         ],
         flex: "0 0 1"
+    }, /*#__PURE__*/ React__default.createElement(AnimationDataWrapper, {
+        eventId: "LFO".concat(id, "_Ramp_Wave"),
+        renderFunction: renderFuction,
+        dataType: AnimationDataWrapper.dataTypes.number
     }, /*#__PURE__*/ React__default.createElement("div", {
         style: {
             position: 'relative',
             overflow: 'hidden',
-            width: width
+            width: width,
+            height: height
         }
-    }, /*#__PURE__*/ React__default.createElement(LineChart, {
-        data: points,
-        margin: 0,
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0,
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Chart, {
+        id: "LFO".concat(id, "_Ramp_Wave"),
         width: width,
         height: height,
-        fillGradient: LineChart.fillGradient.unicolor,
-        numberOfTicks: 20,
-        gridStroke: StrokeStyle.dashed
+        chartType: Chart.chartType.line,
+        renderAs: Chart.renderAs.canvas
+    }))))), /*#__PURE__*/ React__default.createElement(Box, {
+        padding: [
+            Box.padding.xSmall,
+            Box.padding.none,
+            Box.padding.none,
+            Box.padding.none
+        ]
+    }, /*#__PURE__*/ React__default.createElement(LFOIntensityMeter, {
+        width: width + 16,
+        // height={125}
+        id: id,
+        intensityValues: pointArray
     })));
 }
 
@@ -7434,39 +7646,32 @@ function LFOBox(param) {
     }, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
         size: Slider.size.large,
         id: "LFO".concat(id, "_Hz"),
-        label: "LFO".concat(id, " Hz"),
-        indicatorId: "LFO".concat(id, "_Out")
+        label: "LFO".concat(id, " Hz")
     }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(Slider, {
         size: Slider.size.large,
         id: "LFO".concat(id, "_Hz_Hi"),
-        label: "LFO".concat(id, " Hz Hi"),
-        indicatorId: "LFO".concat(id, "_Out")
+        label: "LFO".concat(id, " Hz Hi")
     }) : null, syncType === 2 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_SyncRate"),
         label: "LFO".concat(id, " Sync Rate"),
         size: Slider.size.large,
-        variant: Slider.variant.rotaryCombobox,
-        indicatorId: "LFO".concat(id, "_Out")
+        variant: Slider.variant.rotaryCombobox
     }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Thirds"),
         label: "LFO".concat(id, " Thirds"),
-        size: Slider.size.large,
-        indicatorId: "LFO".concat(id, "_Out")
+        size: Slider.size.large
     }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_16ths"),
         label: "LFO".concat(id, " 16ths"),
-        size: Slider.size.large,
-        indicatorId: "LFO".concat(id, "_Out")
+        size: Slider.size.large
     }) : null, syncType === 5 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_32nds"),
         label: "LFO".concat(id, " 32nds"),
-        size: Slider.size.large,
-        indicatorId: "LFO".concat(id, "_Out")
+        size: Slider.size.large
     }) : null, syncType === 6 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_64ths"),
         label: "LFO".concat(id, " 64ths"),
-        size: Slider.size.large,
-        indicatorId: "LFO".concat(id, "_Out")
+        size: Slider.size.large
     }) : null), /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
@@ -7982,7 +8187,7 @@ function createBase64WorkerFactory(base64, sourcemapArg, enableUnicodeArg) {
     return createBase64WorkerFactory$1(base64, sourcemapArg);
 }
 
-var WorkerFactory = /*#__PURE__*/createBase64WorkerFactory('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgdnVNZXRlckNhbnZhczsKICBzZWxmLm9ubWVzc2FnZSA9IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgIHZhciBkYXRhID0gZXZlbnQuZGF0YTsKICAgICAgdmFyIG1hcmdpbiA9IDE0OwogICAgICB2YXIgaW5uZXJXaWR0aCA9IChkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEud2lkdGgpIC0gbWFyZ2luICogMjsKICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ2luaXQnKSB7CiAgICAgICAgICB2dU1ldGVyQ2FudmFzID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLmNhbnZhczsKICAgICAgfQogICAgICBpZiAoZGF0YS50eXBlID09PSAndXBkYXRlJykgewogICAgICAgICAgLy8gY29uc3QgZXZlbnRJZCA9ICdWVU1ldGVyU2lnbmFsJzsKICAgICAgICAgIHZhciB4U2NhbGUgPSBkMy5zY2FsZUJhbmQoKS5kb21haW4oT2JqZWN0LmtleXMoZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLnJlbmRlckRhdGEpLm1hcChmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgcmV0dXJuIGQ7CiAgICAgICAgICB9KSkucmFuZ2UoWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgaW5uZXJXaWR0aAogICAgICAgICAgXSkucGFkZGluZ0lubmVyKDAuMikucGFkZGluZ091dGVyKDApOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS55U2NhbGVEb21haW4pLnJhbmdlKFsKICAgICAgICAgICAgICBkYXRhLmhlaWdodCwKICAgICAgICAgICAgICAwCiAgICAgICAgICBdKTsKICAgICAgICAgIHZhciB5QXhpcyA9IGQzLmF4aXNCb3R0b20oeFNjYWxlKS50aWNrVmFsdWVzKFsKICAgICAgICAgICAgICAnMC4yNScsCiAgICAgICAgICAgICAgJzAuNScsCiAgICAgICAgICAgICAgJzAuNzUnLAogICAgICAgICAgICAgICcwLjknCiAgICAgICAgICBdKTsKICAgICAgICAgIHZhciB0aWNrVmFsdWVzID0geUF4aXMudGlja3MoNikudGlja1ZhbHVlcygpOwogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChkYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICB2YXIgY3R4ID0gdnVNZXRlckNhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVyQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVyQ2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgY3R4LmNsZWFyUmVjdCgwLCAwLCB2dU1ldGVyQ2FudmFzID09PSBudWxsIHx8IHZ1TWV0ZXJDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHZ1TWV0ZXJDYW52YXMud2lkdGgsIHZ1TWV0ZXJDYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICBPYmplY3QudmFsdWVzKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5yZW5kZXJEYXRhKS5mb3JFYWNoKGZ1bmN0aW9uKGQsIGkpIHsKICAgICAgICAgICAgICAgICAgdmFyIHkgPSB5U2NhbGUoZCk7CiAgICAgICAgICAgICAgICAgIHZhciB3aWR0aCA9IHhTY2FsZS5iYW5kd2lkdGgoKTsKICAgICAgICAgICAgICAgICAgdmFyIGhlaWdodCA9IHZ1TWV0ZXJDYW52YXMuaGVpZ2h0IC0geTsKICAgICAgICAgICAgICAgICAgdmFyIGxpbmVhckdyYWRpZW50ID0gY3R4LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIGhlaWdodCk7IC8vIHgwLCB5MCwgeDEsIHkxCiAgICAgICAgICAgICAgICAgIHZhciB4UG9zID0geFNjYWxlKE9iamVjdC5rZXlzKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5yZW5kZXJEYXRhKVtpXSkgfHwgMDsKICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICcjMGUwZTEyJzsKICAgICAgICAgICAgICAgICAgY3R4LmZpbGxSZWN0KHhQb3MgKyBtYXJnaW4gLyAyLCAxLCB3aWR0aCwgdnVNZXRlckNhbnZhcy5oZWlnaHQpOwogICAgICAgICAgICAgICAgICBsaW5lYXJHcmFkaWVudC5hZGRDb2xvclN0b3AoMCwgJyNlOTM1MjYnKTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuMSwgJyNlOTM1MjYnKTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuMywgJyNlZGQ3NDcnKTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuNCwgJyNlZGQ3NDcnKTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuNSwgJyM3MWYzNmQnKTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuOSwgJyM3MWYzNmQnKTsKICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9IGxpbmVhckdyYWRpZW50OwogICAgICAgICAgICAgICAgICBjdHguZmlsbFJlY3QoeFBvcyArIG1hcmdpbiAvIDIsIHksIHdpZHRoLCBoZWlnaHQpOwogICAgICAgICAgICAgICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgICAgICAgICAgICAgIGN0eC5tb3ZlVG8oeFBvcyArIG1hcmdpbiAvIDIsIE51bWJlcih5U2NhbGUoTnVtYmVyKHRpY2tWYWx1ZXMgPT09IG51bGwgfHwgdGlja1ZhbHVlcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdGlja1ZhbHVlc1szXSkpKSk7CiAgICAgICAgICAgICAgICAgIGN0eC5saW5lVG8oeFBvcyArIG1hcmdpbiAvIDIgKyB3aWR0aCwgTnVtYmVyKHlTY2FsZShOdW1iZXIodGlja1ZhbHVlcyA9PT0gbnVsbCB8fCB0aWNrVmFsdWVzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB0aWNrVmFsdWVzWzNdKSkpKTsKICAgICAgICAgICAgICAgICAgY3R4LmxpbmVXaWR0aCA9IDM7CiAgICAgICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICcjMTYxNzFkJzsKICAgICAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgIHRpY2tWYWx1ZXMgPT09IG51bGwgfHwgdGlja1ZhbHVlcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdGlja1ZhbHVlcy5mb3JFYWNoKGZ1bmN0aW9uKHRpY2tWYWx1ZSkgewogICAgICAgICAgICAgICAgICBpZiAodGlja1ZhbHVlID09PSAwIHx8IHRpY2tWYWx1ZSA9PT0gMSkgewogICAgICAgICAgICAgICAgICAgICAgcmV0dXJuOwogICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIHZhciB5UG9zID0geVNjYWxlKHRpY2tWYWx1ZSk7CiAgICAgICAgICAgICAgICAgIC8vIERyYXcgdGljayBtYXJrCiAgICAgICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICAgICAgY3R4Lm1vdmVUbyhtYXJnaW4gLyAyIC0gMywgeVBvcyk7CiAgICAgICAgICAgICAgICAgIGN0eC5saW5lV2lkdGggPSAwLjU7CiAgICAgICAgICAgICAgICAgIGN0eC5saW5lVG8oLTEwLCB5UG9zKTsKICAgICAgICAgICAgICAgICAgY3R4LnN0cm9rZVN0eWxlID0gJyM5OTk5YTcnOwogICAgICAgICAgICAgICAgICBjdHguc3Ryb2tlKCk7CiAgICAgICAgICAgICAgICAgIC8vIERyYXcgbGFiZWwKICAgICAgICAgICAgICAgICAgY3R4LmZvbnQgPSAnOXB4IHNhbnMtc2VyaWYnOwogICAgICAgICAgICAgICAgICBjdHgudGV4dEJhc2VsaW5lID0gJ21pZGRsZSc7CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSAnIzk5OTlhNyc7CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsVGV4dCgiIi5jb25jYXQodGlja1ZhbHVlICogMTAwKSwgaW5uZXJXaWR0aCArIG1hcmdpbiwgeVBvcyk7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgdnVNZXRlckNhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVyQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVyQ2FudmFzLmdldENvbnRleHQoJzJkJykuZHJhd0ltYWdlKHZ1TWV0ZXJDYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSB2dU1ldGVyQ2FudmFzID09PSBudWxsIHx8IHZ1TWV0ZXJDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHZ1TWV0ZXJDYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9');
+var WorkerFactory = /*#__PURE__*/createBase64WorkerFactory('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICAvLyB0eXBlIFZVTWV0ZXJEYXRhID0geyBsOiBudW1iZXI7IHI6IG51bWJlciB9OwogIHZhciB2dU1ldGVyQ2FudmFzOwogIC8vIGNvbnN0IFZVQnVmZmVyOiBWVU1ldGVyRGF0YVtdID0gW107CiAgLy8gbGV0IGJ1ZmZlckluZGV4ID0gMDsKICAvLyBjb25zdCBidWZmZXJTaXplID0gNTsKICAvLyBsZXQgYW5pbWF0aW9uSW5kZXggPSAwOwogIC8vIGxldCBwcmV2TFZhbHVlID0gMDsKICAvLyBsZXQgcHJldlJWYWx1ZSA9IDA7CiAgc2VsZi5vbm1lc3NhZ2UgPSBmdW5jdGlvbihldmVudCkgewogICAgICB2YXIgZGF0YSA9IGV2ZW50LmRhdGE7CiAgICAgIHZhciBtYXJnaW4gPSAxNDsKICAgICAgdmFyIGlubmVyV2lkdGggPSAoZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLndpZHRoKSAtIG1hcmdpbiAqIDI7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgdnVNZXRlckNhbnZhcyA9IGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5jYW52YXM7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ3VwZGF0ZScpIHsKICAgICAgICAgIC8vIGNvbnN0IGV2ZW50SWQgPSAnVlVNZXRlclNpZ25hbCc7CiAgICAgICAgICB2YXIgeFNjYWxlID0gZDMuc2NhbGVCYW5kKCkuZG9tYWluKE9iamVjdC5rZXlzKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5yZW5kZXJEYXRhKS5tYXAoZnVuY3Rpb24oZCkgewogICAgICAgICAgICAgIHJldHVybiBkOwogICAgICAgICAgfSkpLnJhbmdlKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIGlubmVyV2lkdGgKICAgICAgICAgIF0pLnBhZGRpbmdJbm5lcigwLjIpLnBhZGRpbmdPdXRlcigwKTsKICAgICAgICAgIHZhciB5U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEueVNjYWxlRG9tYWluKS5yYW5nZShbCiAgICAgICAgICAgICAgZGF0YS5oZWlnaHQsCiAgICAgICAgICAgICAgMAogICAgICAgICAgXSk7CiAgICAgICAgICB2YXIgeUF4aXMgPSBkMy5heGlzQm90dG9tKHhTY2FsZSkudGlja1ZhbHVlcyhbCiAgICAgICAgICAgICAgJzAuMjUnLAogICAgICAgICAgICAgICcwLjUnLAogICAgICAgICAgICAgICcwLjc1JywKICAgICAgICAgICAgICAnMC45JwogICAgICAgICAgXSk7CiAgICAgICAgICB2YXIgdGlja1ZhbHVlcyA9IHlBeGlzLnRpY2tzKDYpLnRpY2tWYWx1ZXMoKTsKICAgICAgICAgIC8vIC5uaWNlKCk7CiAgICAgICAgICBpZiAoZGF0YSAhPSBudWxsKSB7CiAgICAgICAgICAgICAgdmFyIGN0eCA9IHZ1TWV0ZXJDYW52YXMgPT09IG51bGwgfHwgdnVNZXRlckNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckNhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgdnVNZXRlckNhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVyQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVyQ2FudmFzLndpZHRoLCB2dU1ldGVyQ2FudmFzLmhlaWdodCk7CiAgICAgICAgICAgICAgT2JqZWN0LnZhbHVlcyhkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEucmVuZGVyRGF0YSkuZm9yRWFjaChmdW5jdGlvbihkLCBpKSB7CiAgICAgICAgICAgICAgICAgIHZhciB5ID0geVNjYWxlKGQpOwogICAgICAgICAgICAgICAgICB2YXIgd2lkdGggPSB4U2NhbGUuYmFuZHdpZHRoKCk7CiAgICAgICAgICAgICAgICAgIHZhciBoZWlnaHQgPSB2dU1ldGVyQ2FudmFzLmhlaWdodCAtIHk7CiAgICAgICAgICAgICAgICAgIHZhciBsaW5lYXJHcmFkaWVudCA9IGN0eC5jcmVhdGVMaW5lYXJHcmFkaWVudCgwLCAwLCAwLCBoZWlnaHQpOyAvLyB4MCwgeTAsIHgxLCB5MQogICAgICAgICAgICAgICAgICB2YXIgeFBvcyA9IHhTY2FsZShPYmplY3Qua2V5cyhkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEucmVuZGVyRGF0YSlbaV0pIHx8IDA7CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSAnIzBlMGUxMic7CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsUmVjdCh4UG9zICsgbWFyZ2luIC8gMiwgMSwgd2lkdGgsIHZ1TWV0ZXJDYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAsICcjZTkzNTI2Jyk7CiAgICAgICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjEsICcjZTkzNTI2Jyk7CiAgICAgICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjMsICcjZWRkNzQ3Jyk7CiAgICAgICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjQsICcjZWRkNzQ3Jyk7CiAgICAgICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjUsICcjNzFmMzZkJyk7CiAgICAgICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjksICcjNzFmMzZkJyk7CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSBsaW5lYXJHcmFkaWVudDsKICAgICAgICAgICAgICAgICAgY3R4LmZpbGxSZWN0KHhQb3MgKyBtYXJnaW4gLyAyLCB5LCB3aWR0aCwgaGVpZ2h0KTsKICAgICAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgICAgICBjdHgubW92ZVRvKHhQb3MgKyBtYXJnaW4gLyAyLCBOdW1iZXIoeVNjYWxlKE51bWJlcih0aWNrVmFsdWVzID09PSBudWxsIHx8IHRpY2tWYWx1ZXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHRpY2tWYWx1ZXNbM10pKSkpOwogICAgICAgICAgICAgICAgICBjdHgubGluZVRvKHhQb3MgKyBtYXJnaW4gLyAyICsgd2lkdGgsIE51bWJlcih5U2NhbGUoTnVtYmVyKHRpY2tWYWx1ZXMgPT09IG51bGwgfHwgdGlja1ZhbHVlcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdGlja1ZhbHVlc1szXSkpKSk7CiAgICAgICAgICAgICAgICAgIGN0eC5saW5lV2lkdGggPSAzOwogICAgICAgICAgICAgICAgICBjdHguc3Ryb2tlU3R5bGUgPSAnIzE2MTcxZCc7CiAgICAgICAgICAgICAgICAgIGN0eC5zdHJva2UoKTsKICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICB0aWNrVmFsdWVzID09PSBudWxsIHx8IHRpY2tWYWx1ZXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHRpY2tWYWx1ZXMuZm9yRWFjaChmdW5jdGlvbih0aWNrVmFsdWUpIHsKICAgICAgICAgICAgICAgICAgaWYgKHRpY2tWYWx1ZSA9PT0gMCB8fCB0aWNrVmFsdWUgPT09IDEpIHsKICAgICAgICAgICAgICAgICAgICAgIHJldHVybjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICB2YXIgeVBvcyA9IHlTY2FsZSh0aWNrVmFsdWUpOwogICAgICAgICAgICAgICAgICAvLyBEcmF3IHRpY2sgbWFyawogICAgICAgICAgICAgICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgICAgICAgICAgICAgIGN0eC5tb3ZlVG8obWFyZ2luIC8gMiAtIDMsIHlQb3MpOwogICAgICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gMC41OwogICAgICAgICAgICAgICAgICBjdHgubGluZVRvKC0xMCwgeVBvcyk7CiAgICAgICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICcjOTk5OWE3JzsKICAgICAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgICAgICAvLyBEcmF3IGxhYmVsCiAgICAgICAgICAgICAgICAgIGN0eC5mb250ID0gJzlweCBzYW5zLXNlcmlmJzsKICAgICAgICAgICAgICAgICAgY3R4LnRleHRCYXNlbGluZSA9ICdtaWRkbGUnOwogICAgICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJyM5OTk5YTcnOwogICAgICAgICAgICAgICAgICBjdHguZmlsbFRleHQoIiIuY29uY2F0KHRpY2tWYWx1ZSAqIDEwMCksIGlubmVyV2lkdGggKyBtYXJnaW4sIHlQb3MpOwogICAgICAgICAgICAgIH0pOwogICAgICAgICAgICAgIHZ1TWV0ZXJDYW52YXMgPT09IG51bGwgfHwgdnVNZXRlckNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckNhbnZhcy5nZXRDb250ZXh0KCcyZCcpLmRyYXdJbWFnZSh2dU1ldGVyQ2FudmFzLCAwLCAwKTsKICAgICAgICAgICAgICB2YXIgYml0bWFwID0gdnVNZXRlckNhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVyQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVyQ2FudmFzLnRyYW5zZmVyVG9JbWFnZUJpdG1hcCgpOwogICAgICAgICAgICAgIHNlbGYucG9zdE1lc3NhZ2UoYml0bWFwKTsKICAgICAgICAgIH0KICAgICAgfQogIH07Cgp9KSgpOwovLyMgc291cmNlTWFwcGluZ1VSTD13b3JrZXIuanMubWFwCgo=', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==');
 /* eslint-enable */
 
 function _define_property$1(obj, key, value) {
@@ -8079,7 +8284,7 @@ function VUMeter(param) {
         }
     }, /*#__PURE__*/ React__default.createElement(AnimationDataWrapper, {
         renderFunction: renderFuction,
-        eventId: "VUMeter"
+        eventId: id
     }, /*#__PURE__*/ React__default.createElement(Chart, {
         chartType: Chart.chartType.bar,
         renderAs: Chart.renderAs.canvas,