@antimatter-audio/antimatter-ui 10.1.2 → 10.2.0

package/dist/index.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext } from 'react';
+import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext, useMemo } from 'react';
 import classnames from 'classnames';
-import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
+import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
 import { useDrag } from '@use-gesture/react';
-import { v4 } from 'uuid';
 import * as d3 from 'd3';
 
 function styleInject(css, ref) {
@@ -34,8 +33,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$9 = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  border: none;\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
-styleInject(css_248z$9);
+var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  border: none;\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+styleInject(css_248z$b);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
@@ -83,19 +82,29 @@ var FontSizes = /*#__PURE__*/ function(FontSizes) {
     FontSizes["title"] = "title";
     return FontSizes;
 }({});
+var Polarity = /*#__PURE__*/ function(Polarity) {
+    Polarity["linear"] = "linear";
+    Polarity["bipolar"] = "bipolar";
+    return Polarity;
+}({});
+var Orientation = /*#__PURE__*/ function(Orientation) {
+    Orientation["vertical"] = "vertical";
+    Orientation["horizontal"] = "horizontal";
+    return Orientation;
+}({});
 
-var css_248z$8 = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n";
-styleInject(css_248z$8);
+var css_248z$a = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n";
+styleInject(css_248z$a);
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$9(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$d(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -119,27 +128,27 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$d() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 function Tabs(param) {
     var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Spacing.mediumSmall
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
-    ] : _param_margin, onChange = param.onChange, selectedIndex = param.selectedIndex;
-    var _useState = _sliced_to_array$9(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
+    ] : _param_margin, gap = param.gap, width = param.width, onChange = param.onChange, selectedIndex = param.selectedIndex;
+    var _useState = _sliced_to_array$d(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
     var handleChange = function(index) {
         setSelectedItem(index);
         onChange(index);
@@ -153,14 +162,18 @@ function Tabs(param) {
             marginTop: "var(--mt-".concat(margin[0], ")"),
             marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
             marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
-            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")")
+            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
+            width: width
         },
         selectedIndex: selectedIndex,
         onChange: function(index) {
             return handleChange(index);
         }
     }, /*#__PURE__*/ React__default.createElement(TabList, {
-        className: classnames('Tabs', className)
+        className: classnames('Tabs', className),
+        style: {
+            gap: gap
+        }
     }, items && items.map(function(item, index) {
         var _padding_, _padding_1, _padding_2, _ref;
         return /*#__PURE__*/ React__default.createElement(Tab, {
@@ -182,8 +195,8 @@ function Tabs(param) {
 Tabs.padding = Spacing;
 Tabs.margin = Spacing;
 
-var css_248z$7 = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
-styleInject(css_248z$7);
+var css_248z$9 = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
+styleInject(css_248z$9);
 
 var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
     ButtonSize["xSmall"] = "xSmall";
@@ -197,15 +210,15 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$8(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$d(obj, key, value) {
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -218,7 +231,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$8(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -242,10 +255,10 @@ function _iterable_to_array_limit$8(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$8() {
+function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$d(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);
@@ -255,21 +268,21 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 function Button(param) {
     var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -277,7 +290,7 @@ function Button(param) {
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
     ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
-    var _React_useState = _sliced_to_array$8(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$c(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     // Update the local state when the ID changes
@@ -334,7 +347,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$d({
+        style: _object_spread$i({
             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], ")"),
@@ -352,8 +365,8 @@ Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$6 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--bg-input);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-item {\n  background-color: var(--bg-popover);\n  padding: var(--spacing-l);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  &:hover {\n    background-color: var(--bg-highlighted);\n  }\n  &[data-selected] {\n    background-color: var(--bg-selected);\n  }\n}\n";
-styleInject(css_248z$6);
+var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--bg-input);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-item {\n  background-color: var(--bg-popover);\n  padding: var(--spacing-l);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  &:hover {\n    background-color: var(--bg-highlighted);\n  }\n  &[data-selected] {\n    background-color: var(--bg-selected);\n  }\n}\n";
+styleInject(css_248z$8);
 
 function useObservable(param) {
     var onFire = param.onFire;
@@ -395,15 +408,15 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$b(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$c(obj, key, value) {
+function _define_property$h(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -416,7 +429,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$b(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -440,10 +453,10 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$c(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);
@@ -453,12 +466,12 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$h(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$3(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -466,42 +479,72 @@ function ownKeys$2(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$2(target, source) {
+function _object_spread_props$3(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$2(Object(source)).forEach(function(key) {
+        ownKeys$3(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 // Initial state
 var defaultGlobalStateValue = {
     highlightedItem: {
         label: 'Antimatter Audio',
-        value: undefined
-    }
+        value: 0
+    },
+    automatableParams: [],
+    automatableParamLabels: [],
+    modSlots: [],
+    modSlotParams: [],
+    modSlotParamLabels: [],
+    advancedView: false
 };
 // Reducer function to handle state updates
 var reducer = function(state, action) {
     switch(action.type){
         case 'SET_HIGHLIGHTED_ITEM':
-            return _object_spread_props$2(_object_spread$c({}, state), {
+            return _object_spread_props$3(_object_spread$h({}, state), {
                 highlightedItem: action.payload
             });
+        case 'TOGGLE_ADVANCED_VIEW':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                advancedView: action.payload
+            });
+        case 'SET_AUTOMATABLE_PARAMS':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                automatableParams: action.payload
+            });
+        case 'SET_AUTOMATABLE_PARAM_LABELS':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                automatableParamLabels: action.payload
+            });
+        case 'SET_MOD_SLOTS':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                modSlots: action.payload
+            });
+        case 'SET_MOD_SLOT_PARAMS':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                modSlotParams: action.payload
+            });
+        case 'SET_MOD_SLOT_PARAM_LABELS':
+            return _object_spread_props$3(_object_spread$h({}, state), {
+                modSlotParamLabels: action.payload
+            });
         default:
             return state;
     }
@@ -518,13 +561,49 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$7(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$b(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var setHighlightedItem = useCallback(function(highlightedItem) {
         dispatch({
             type: 'SET_HIGHLIGHTED_ITEM',
             payload: highlightedItem
         });
     }, []);
+    var setAdvancedView = useCallback(function(advancedView) {
+        dispatch({
+            type: 'TOGGLE_ADVANCED_VIEW',
+            payload: advancedView
+        });
+    }, []);
+    var setAutomatableParams = useCallback(function(automatableParams) {
+        dispatch({
+            type: 'SET_AUTOMATABLE_PARAMS',
+            payload: automatableParams
+        });
+    }, []);
+    var setAutomatableParamLabels = useCallback(function(automatableParamLabels) {
+        dispatch({
+            type: 'SET_AUTOMATABLE_PARAM_LABELS',
+            payload: automatableParamLabels
+        });
+    }, []);
+    var setModSlots = useCallback(function(modSlots) {
+        dispatch({
+            type: 'SET_MOD_SLOTS',
+            payload: modSlots
+        });
+    }, []);
+    var setModSlotParams = useCallback(function(modSlotParams) {
+        dispatch({
+            type: 'SET_MOD_SLOT_PARAMS',
+            payload: modSlotParams
+        });
+    }, []);
+    var setModSlotParamLabels = useCallback(function(modSlotParamLables) {
+        dispatch({
+            type: 'SET_MOD_SLOT_PARAM_LABELS',
+            payload: modSlotParamLables
+        });
+    }, []);
     var onFire = function() {
         //@ts-expect-error
         window.__JUCE__.backend.emitEvent('setRandom', {});
@@ -535,6 +614,12 @@ function GlobalContextProvider(param) {
     var value = {
         globalState: state,
         setHighlightedItem: setHighlightedItem,
+        setAdvancedView: setAdvancedView,
+        setAutomatableParams: setAutomatableParams,
+        setAutomatableParamLabels: setAutomatableParamLabels,
+        setModSlots: setModSlots,
+        setModSlotParams: setModSlotParams,
+        setModSlotParamLabels: setModSlotParamLabels,
         useRandom: useRandom
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
@@ -542,15 +627,15 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -574,32 +659,39 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 var useCombobox = function(param) {
-    var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
+    var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
+    var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$6(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$6(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
+    var _useState1 = _sliced_to_array$a(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var setHighlightedItem = useGlobalContext().setHighlightedItem;
-    var choices = properties.choices.length ? properties.choices : items;
+    var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
+    var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
+        var _item_;
+        return item === null || item === void 0 ? void 0 : (_item_ = item[1]) === null || _item_ === void 0 ? void 0 : _item_.toLowerCase().includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
+    }) : choices;
     var prevIndex = useRef(null);
-    var handleChange = function(index) {
+    var handleChange = function(value) {
+        var index = choices === null || choices === void 0 ? void 0 : choices.indexOf(value);
+        // const index = 0;
         if (index !== prevIndex.current) {
             comboBoxState.setChoiceIndex(index);
-            setValue(index);
+            setValue(value);
             onChange && onChange(index);
             // //@ts-expect-error
             // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
@@ -642,8 +734,10 @@ var useCombobox = function(param) {
     };
     return {
         value: value,
+        valueString: choices === null || choices === void 0 ? void 0 : choices[value],
         setValue: setValue,
         choices: choices,
+        filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
         handleChange: handleChange
     };
@@ -692,8 +786,8 @@ var validate = function(param) {
     var errorMessages = [];
     var isIncomplete = false;
     var length = value.toString().length;
-    if (length > maxLength && errorMessages.indexOf(InputErrorStates.exceedsMaxLength) === -1) {
-        errorMessages.push(InputErrorStates.exceedsMaxLength);
+    if (length > maxLength && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1) {
+        errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength);
     }
     if (length < minLength) {
         isIncomplete = true;
@@ -703,8 +797,8 @@ var validate = function(param) {
             errorMessages.push(InputErrorStates.invalidCharacter);
         }
         if (typeof value === 'number') {
-            if ((value > max || value < min) && errorMessages.indexOf(InputErrorStates.valueOutOfRange) === -1) {
-                errorMessages.push(InputErrorStates.valueOutOfRange);
+            if ((value > max || value < min) && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates.valueOutOfRange)) === -1) {
+                errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates.valueOutOfRange);
             }
         }
     }
@@ -714,22 +808,62 @@ var validate = function(param) {
         isValid: !errorMessages.length && !isIncomplete
     };
 };
+var getBarTransformStyles = function(param) {
+    var polarity = param.polarity, orientation = param.orientation, value = param.value;
+    if (polarity === Polarity.linear) {
+        return orientation === Orientation.horizontal ? {
+            width: value ? "100%" : '1px',
+            height: '100%',
+            transform: value ? "scale(".concat(Math.ceil(value) * 0.01, ", 1)") : 'none',
+            transformOrigin: 'center left',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        } : {
+            width: "100%",
+            height: value ? '100%' : '1px',
+            transform: "scale(1, ".concat(Math.ceil(value) * 0.01, ")"),
+            transformOrigin: 'bottom center',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        };
+    } else {
+        return orientation === Orientation.horizontal ? {
+            width: value ? "100%" : '1px',
+            height: '100%',
+            transform: value ? "scale(".concat(Math.ceil(value) * 0.01 / 2, ", 1)") : 'none',
+            transformOrigin: 'left center',
+            top: '0',
+            bottom: '0',
+            left: '50%'
+        } : {
+            width: "100%",
+            height: value ? '100%' : '1px',
+            transform: value ? "scale(1, ".concat(Math.ceil(value) * 0.01 / 2, ")") : 'none',
+            transformOrigin: 'bottom center',
+            bottom: '50%',
+            left: '0',
+            right: '0'
+        };
+    }
+};
 var randomizeValue = function(min, max) {
     return Math.random() * (max - min) + min;
 };
 
-var css_248z$5 = ".TextInput {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n";
-styleInject(css_248z$5);
+var css_248z$7 = ".TextInput {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n";
+styleInject(css_248z$7);
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$9(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$b(obj, key, value) {
+function _define_property$g(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -742,7 +876,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -766,10 +900,10 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$9() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$b(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);
@@ -779,21 +913,21 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$g(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -805,9 +939,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
 function Input(param) {
     var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
     var _inputRef_current;
-    var _useState = _sliced_to_array$5(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
-    var _useState1 = _sliced_to_array$5(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
-    var _useState2 = _sliced_to_array$5(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
+    var _useState = _sliced_to_array$9(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
+    var _useState2 = _sliced_to_array$9(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
     var valueRef = useRef(null);
     var timer, timeoutVal = 2000;
     // (inputValue === '' || /^-?\d+$/.test(inputValue)
@@ -882,7 +1016,7 @@ function Input(param) {
         }
         // Don't set the internal value if the value exceeds the max length
         // Don't set the internal value if the value contains an invalid character
-        if (errorMessages.indexOf(InputErrorStates.exceedsMaxLength) === -1 && errorMessages.indexOf(InputErrorStates.invalidCharacter) === -1) {
+        if ((errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1 && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.invalidCharacter)) === -1) {
             setInternalValue(newValue);
         }
     }, [
@@ -911,7 +1045,7 @@ function Input(param) {
         id: id,
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$b({
+        style: _object_spread$g({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
             color: hasError ? 'red' : textColor,
@@ -937,11 +1071,6 @@ function Input(param) {
 }
 Input.type = InputTypes;
 
-var SliderPolarity = /*#__PURE__*/ function(SliderPolarity) {
-    SliderPolarity["linear"] = "linear";
-    SliderPolarity["bipolar"] = "bipolar";
-    return SliderPolarity;
-}({});
 var SliderType = /*#__PURE__*/ function(SliderType) {
     SliderType["bar"] = "bar";
     SliderType["rotary"] = "rotary";
@@ -954,11 +1083,6 @@ var SliderRotationBehavior = /*#__PURE__*/ function(SliderRotationBehavior) {
     SliderRotationBehavior["noRotation"] = "noRotation";
     return SliderRotationBehavior;
 }({});
-var SliderOrientation = /*#__PURE__*/ function(SliderOrientation) {
-    SliderOrientation["horizontal"] = "horizontal";
-    SliderOrientation["vertical"] = "vertical";
-    return SliderOrientation;
-}({});
 
 var clamp = function(val) {
     var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
@@ -986,70 +1110,16 @@ var decimalToPercent = function(decimal) {
 var percentToDecimal = function(percent) {
     return Math.round(0.01 * (typeof percent === 'string' ? parseFloat(percent) : percent));
 };
-var getTransformString = function(param) {
-    var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, polarity = param.polarity, normalisedValue = param.normalisedValue, scaledValue = param.scaledValue;
-    if (sliderType === SliderType.bar) {
-        if (polarity === SliderPolarity.linear) {
-            return sliderOrientation === SliderOrientation.horizontal ? {
-                transform: "scale(".concat(normalisedValue, ", 1)"),
-                transformOrigin: 'center left'
-            } : {
-                transform: "scale(1, ".concat(normalisedValue, ")"),
-                transformOrigin: 'bottom center'
-            };
-        } else {
-            return sliderOrientation === SliderOrientation.horizontal ? {
-                transform: "scale(".concat(Math.ceil(scaledValue * 100) / 100 / 2, ", 1)"),
-                transformOrigin: 'left center'
-            } : {
-                transform: "scale(1, ".concat(Math.ceil(scaledValue * 100) / 100 / 2, ")"),
-                transformOrigin: 'bottom center'
-            };
-        }
-    } else {
-        return {
-            transform: '0'
-        };
-    }
-};
-var getPosition = function(param) {
-    var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, polarity = param.polarity;
-    if (sliderType === SliderType.bar) {
-        if (polarity === SliderPolarity.linear) {
-            return sliderOrientation === SliderOrientation.horizontal ? {
-                top: '0',
-                bottom: '0',
-                left: '0'
-            } : {
-                right: '0',
-                bottom: '0',
-                left: '0'
-            };
-        } else {
-            return sliderOrientation === SliderOrientation.horizontal ? {
-                top: '0',
-                bottom: '0',
-                left: '50%'
-            } : {
-                bottom: '50%',
-                left: '0',
-                right: '0'
-            };
-        }
-    } else {
-        return {};
-    }
-};
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1073,29 +1143,29 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+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 _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 var useSlider = function(param) {
-    var id = param.id, label = param.label, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+    var id = param.id, label = param.label, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20,
         end: 15000,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_sliderOrientation = param.sliderOrientation; _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation; var onChange = param.onChange;
+    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange;
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
     var isLocalhost = window.location.hostname === 'localhost';
@@ -1108,9 +1178,9 @@ var useSlider = function(param) {
    * AudioProcessorParameter::getValue() (C++).
    */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
     // NOTE: We can think of this as a percentage value, in 0 to 1 format
-    var _useState = _sliced_to_array$4(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
-    var _useState1 = _sliced_to_array$4(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
-    var _useState2 = _sliced_to_array$4(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
+    var _useState = _sliced_to_array$8(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    // const [normalisedValue, setNormalisedValue] = useState(0);
+    var _useState1 = _sliced_to_array$8(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
@@ -1129,7 +1199,7 @@ var useSlider = function(param) {
             setNormalisedState(newValue);
         };
         if (!isLocalhost) {
-            setNormalisedValue(normalisedValue);
+            // setNormalisedValue(normalisedValue);
             setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
             if (isRandomizable) {
                 useRandom === null || useRandom === void 0 ? void 0 : useRandom.subscribe(setRandom, id);
@@ -1140,7 +1210,7 @@ var useSlider = function(param) {
         } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
             setProperties(mockProperties);
-            setNormalisedValue(mockInitialNormalisedValue);
+            normalisedValueRef.current = mockInitialNormalisedValue;
         }
     }, []);
     // Update the local state when the ID changes
@@ -1174,10 +1244,10 @@ var useSlider = function(param) {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
         var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
         var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
-        setNormalisedValue(parseFloat(normalisedValueFromState.toFixed(2)));
+        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
         setScaledValue(scaledValue);
         onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
-        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
             setHighlightedItem({
                 label: label,
                 value: scaledValue
@@ -1187,16 +1257,17 @@ var useSlider = function(param) {
     // Update JUCE state
     var setNormalisedState = function(newValue) {
         var sliderState = Juce.getSliderState(id);
-        if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== newValue) {
-            !isLocalhost && sliderState.setNormalisedValue(clamp(newValue));
-            normalisedValueRef.current = newValue;
+        var fixedNewValue = parseFloat(newValue.toFixed(2));
+        if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== fixedNewValue) {
+            !isLocalhost && sliderState.setNormalisedValue(clamp(fixedNewValue));
+            normalisedValueRef.current = fixedNewValue;
         }
     };
     var setScaledState = function(newValue) {
         var sliderState = Juce.getSliderState(id);
         if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
             !isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
-                scaledValue: clamp(newValue, properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
+                scaledValue: clamp(parseFloat(newValue.toFixed(2)), properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
                 properties: properties
             }));
             scaledValueRef.current = newValue;
@@ -1212,7 +1283,8 @@ var useSlider = function(param) {
         }
         if (down) {
             var deltaVal = delta[1] * -1;
-            var newValue = (normalisedValue !== null && normalisedValue !== void 0 ? normalisedValue : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
+            var _normalisedValueRef_current;
+            var newValue = ((_normalisedValueRef_current = normalisedValueRef.current) !== null && _normalisedValueRef_current !== void 0 ? _normalisedValueRef_current : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
             //   ? 4
             //   : 0.4) *
             ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
@@ -1227,33 +1299,65 @@ var useSlider = function(param) {
     }, {
         preventDefault: true
     });
-    var bindBarSliderDrag = useDrag(function(param) {
-        var down = param.down, event = param.event, first = param.first, last = param.last;
-        var _event_target;
-        var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
-        var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
-        if (first) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                i: "".concat(0)
-            });
-        }
-        if (down) {
-            // TODO: Increments?
-            var newValue = 1 - y / rect.height;
-            setNormalisedState(newValue);
-        }
-        if (last) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                i: "".concat(0)
-            });
-        }
-    }, {
-        preventDefault: true
-    });
+    var bindBarSliderDrag = function() {
+        var orientation = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Orientation.vertical;
+        var drag = useDrag(function(param) {
+            var down = param.down, event = param.event, first = param.first, last = param.last;
+            var _event_target;
+            var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
+            var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
+            var x = (event === null || event === void 0 ? void 0 : event.clientX) - rect.left;
+            // 1138 - 1043.1
+            if (first) {
+                //@ts-expect-error
+                window.__JUCE__.backend.emitEvent('jsDragStarted', {
+                    i: "".concat(0)
+                });
+            }
+            // START
+            // bottom: 685
+            // height: 40
+            // left: 733.5
+            // right: 884.328125
+            // top: 645
+            // width: 150.828125
+            // x: 733.5
+            // y: 645
+            // clientx 735
+            // 735 - 733.5
+            // END
+            // bottom: 685
+            // height: 40
+            // left: 733.5
+            // right: 884.328125
+            // top: 645
+            // width: 150.828125
+            // x: 733.5
+            // y: 645
+            // clientx: 883
+            if (down) {
+                // TODO: Increments?
+                var newValue;
+                if (orientation === Orientation.vertical) {
+                    newValue = 1 - y / rect.height;
+                } else {
+                    newValue = x / rect.width;
+                }
+                setNormalisedState(newValue);
+            }
+            if (last) {
+                //@ts-expect-error
+                window.__JUCE__.backend.emitEvent('jsDragEnded', {
+                    i: "".concat(0)
+                });
+            }
+        }, {
+            preventDefault: true
+        });
+        return drag();
+    };
     var onMouseEnter = function() {
-        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
             setHighlightedItem({
                 label: label,
                 value: scaledValue
@@ -1263,6 +1367,12 @@ var useSlider = function(param) {
     // TODO: Refactor
     // const onChangeStarted = () => sliderState.sliderDragStarted();
     // const onChangeCommitted = () => sliderState.sliderDragEnded();
+    // useEffect(() => {
+    //   console.log(
+    //     normalisedValueRef.current,
+    //     'normalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.current',
+    //   );
+    // }, [normalisedValueRef.current]);
     return {
         setNormalisedState: setNormalisedState,
         setScaledState: setScaledState,
@@ -1271,7 +1381,7 @@ var useSlider = function(param) {
         onMouseEnter: onMouseEnter,
         bindBarSliderDrag: bindBarSliderDrag,
         bindDrag: bindDrag,
-        normalisedValue: normalisedValue,
+        normalisedValue: normalisedValueRef.current || 0,
         scaledValue: scaledValue,
         properties: properties
     };
@@ -1305,7 +1415,7 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
-function _define_property$a(obj, key, value) {
+function _define_property$f(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1318,7 +1428,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$a(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);
@@ -1328,31 +1438,96 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$f(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$2(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$2(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$2(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
     BoxDisplay["flex"] = "flex";
     BoxDisplay["block"] = "block";
     return BoxDisplay;
 }(BoxDisplay || {});
-function Box(param) {
-    var className = param.className, style = param.style, children = param.children, flex = param.flex, key = param.key, onClick = param.onClick, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+function Box(_param) {
+    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
         Spacing.none,
         Spacing.none,
         Spacing.none,
         Spacing.none
-    ] : _param_padding, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag;
+    ] : _param_padding, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
+        "className",
+        "style",
+        "children",
+        "flex",
+        "key",
+        "onClick",
+        "alignItems",
+        "justifyContent",
+        "display",
+        "width",
+        "flexWrap",
+        "height",
+        "border",
+        "flexDirection",
+        "padding",
+        "gap",
+        "tag"
+    ]);
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, {
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$f({
         // id="globalValues"
         key: key,
         className: className,
-        onClick: onClick,
-        style: _object_spread$a({
+        onClick: onClick
+    }, rest), {
+        style: _object_spread$f({
             flexWrap: flexWrap,
             display: display,
             gap: "var(--gap-".concat(gap, ")"),
@@ -1369,7 +1544,7 @@ function Box(param) {
             alignItems: "".concat(alignItems),
             flex: flex ? flex : ''
         }, style)
-    }, children);
+    }), children);
 }
 // Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
 Box.display = BoxDisplay;
@@ -1383,7 +1558,7 @@ Box.padding = Spacing;
 Box.flexWrap = FlexWrap;
 Box.tag = LayoutTags;
 
-function _define_property$9(obj, key, value) {
+function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1396,7 +1571,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(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);
@@ -1406,7 +1581,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$e(target, key, source[key]);
         });
     }
     return target;
@@ -1419,7 +1594,7 @@ function Label(param) {
     return /*#__PURE__*/ React.createElement("label", {
         id: id,
         htmlFor: htmlFor,
-        style: _object_spread$9({
+        style: _object_spread$e({
             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], ")"),
@@ -1434,10 +1609,10 @@ function Label(param) {
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-var css_248z$4 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
-styleInject(css_248z$4);
+var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
+styleInject(css_248z$6);
 
-function _define_property$8(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1450,7 +1625,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(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);
@@ -1460,7 +1635,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -1485,7 +1660,7 @@ function _object_spread_props$1(target, source) {
     return target;
 }
 function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? SliderPolarity.linear : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, _param_rotationBehavior = param.rotationBehavior, rotationBehavior = _param_rotationBehavior === void 0 ? SliderRotationBehavior.rotateIndicator : _param_rotationBehavior, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, _param_rotationBehavior = param.rotationBehavior, rotationBehavior = _param_rotationBehavior === void 0 ? SliderRotationBehavior.rotateIndicator : _param_rotationBehavior, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
     mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20.0,
         end: 15000.0,
@@ -1499,34 +1674,26 @@ function RotarySlider(param) {
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter;
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, onMouseEnter = _useSlider.onMouseEnter;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column
-    }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+    }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$8({
-        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
+        className: classnames('RotarySlider', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$8({
+        style: _object_spread$d({
             touchAction: 'none'
         }, style)
     }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-Inner'),
-        style: _object_spread$8({
-            rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === SliderPolarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
-        }, getTransformString({
-            sliderType: SliderType.rotary,
-            polarity: polarity,
-            normalisedValue: normalisedValue,
-            scaledValue: scaledValue
-        }), getPosition({
-            sliderType: SliderType.rotary,
-            polarity: polarity
-        }))
+        style: {
+            rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === Polarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
+        }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-Indicator'),
-        style: _object_spread$8({
+        style: _object_spread$d({
             backgroundColor: color
         }, style)
     })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
@@ -1537,9 +1704,9 @@ function RotarySlider(param) {
         value: label
     }));
 }
-RotarySlider.sliderPolarity = SliderPolarity;
+RotarySlider.sliderPolarity = Polarity;
 
-function _define_property$7(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1552,7 +1719,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(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);
@@ -1562,7 +1729,7 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -1587,7 +1754,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 function Slider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? SliderPolarity.linear : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, className = param.className, id = param.id, onChange = param.onChange, style = param.style, color = param.color, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? Orientation.vertical : _param_sliderOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, className = param.className, id = param.id, onChange = param.onChange, style = param.style, color = param.color, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
     mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20.0,
         end: 15000.0,
@@ -1599,46 +1766,36 @@ function Slider(param) {
         label: label,
         mockProperties: mockProperties,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
-        sliderOrientation: sliderOrientation,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter;
+    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, onMouseEnter = _useSlider.onMouseEnter;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         justifyContent: Box.justifyContent.center,
         className: classnames(className)
-    }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+    }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$7({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$c({
         className: classnames('Slider-bar', 'relative')
     }, bindBarSliderDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$7({
+        style: _object_spread$c({
             touchAction: 'none',
             backgroundColor: 'var(--bg-input)',
-            minWidth: sliderOrientation === SliderOrientation.horizontal ? '100px' : '20px',
-            minHeight: sliderOrientation === SliderOrientation.horizontal ? '20px' : '75px'
+            minWidth: sliderOrientation === Orientation.horizontal ? '100px' : '20px',
+            minHeight: sliderOrientation === Orientation.horizontal ? '20px' : '75px'
         }, style)
     }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-input')}
-        style: _object_spread$7(_object_spread_props(_object_spread$7({
-            height: '100%',
-            width: '100%',
+        style: _object_spread$c({
             position: 'absolute',
-            backgroundColor: color
-        }, getPosition({
-            sliderType: SliderType.bar,
-            sliderOrientation: sliderOrientation,
-            polarity: polarity
-        })), {
+            backgroundColor: color,
             pointerEvents: 'none'
-        }), getTransformString({
-            sliderType: SliderType.bar,
-            sliderOrientation: sliderOrientation,
+        }, getBarTransformStyles({
+            orientation: sliderOrientation,
             polarity: polarity,
-            normalisedValue: normalisedValue,
-            scaledValue: scaledValue
+            value: normalisedValue * 100
         }))
     }) : ''), /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
@@ -1649,8 +1806,8 @@ function Slider(param) {
     }));
 }
 Slider.sliderType = SliderType;
-Slider.sliderPolarity = SliderPolarity;
-Slider.sliderOrientation = SliderOrientation;
+Slider.sliderPolarity = Polarity;
+Slider.sliderOrientation = Orientation;
 
 function SliderValue(param) {
     var value = param.value, min = param.min, max = param.max, minLength = param.minLength, maxLength = param.maxLength, isEditable = param.isEditable, onChange = param.onChange, className = param.className, style = param.style;
@@ -1678,7 +1835,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$6(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1691,7 +1848,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$6(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);
@@ -1701,7 +1858,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -1714,7 +1871,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$6({
+        style: _object_spread$b({
             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], ")"),
@@ -1730,51 +1887,15 @@ Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-var Matrix = function(param) {
-    var rows = param.rows, columns = param.columns;
-    return /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.xSmall
-    }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Box, {
-        className: classnames('m-xs', 'flex-1'),
-        padding: [
-            Spacing.medium
-        ]
-    }, "Target"), columns.map(function(item) {
-        var colKey = v4();
-        return /*#__PURE__*/ React__default.createElement(Box, {
-            key: colKey,
-            className: classnames('m-xs', 'flex-1'),
-            padding: [
-                Spacing.medium
-            ]
-        }, item === null || item === void 0 ? void 0 : item.label);
-    })), rows.map(function(item) {
-        var rowKey = v4();
-        return /*#__PURE__*/ React__default.createElement(Box, {
-            key: rowKey
-        }, Object.values(item).map(function(value, i) {
-            var colKey = v4();
-            return /*#__PURE__*/ React__default.createElement(Box, {
-                key: colKey,
-                className: classnames(i === 0 ? 'bg-section' : ''),
-                padding: [
-                    Spacing.medium
-                ]
-            }, value);
-        }));
-    }));
-};
-
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$3(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1798,26 +1919,26 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 var useIndicator = function(param) {
     var id = param.id;
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$3(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$7(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
     // Set the initial state
     useEffect(function() {
         if (!isLocalhost) {
@@ -1851,7 +1972,7 @@ var useIndicator = function(param) {
     };
 };
 
-function _define_property$5(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1864,7 +1985,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$5(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1874,7 +1995,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -1891,7 +2012,7 @@ function IndicatorLight(param) {
     }, /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: classnames('IndicatorLight', 'bg-input', className),
-        style: _object_spread$5({
+        style: _object_spread$a({
             width: '12px',
             height: '12px',
             background: isActive ? color : ''
@@ -1901,10 +2022,10 @@ function IndicatorLight(param) {
     }) : null);
 }
 
-var css_248z$3 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\nsvg {\n  height: 100%;\n  width: 100%;\n}\n";
-styleInject(css_248z$3);
+var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\nsvg {\n  height: 100%;\n  width: 100%;\n}\n";
+styleInject(css_248z$5);
 
-function _define_property$4(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1917,7 +2038,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$4(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);
@@ -1927,21 +2048,23 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
 }
-var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
-    ButtonIcon["undo"] = "Undo";
-    ButtonIcon["redo"] = "Redo";
-    ButtonIcon["random"] = "Random";
-    ButtonIcon["favorite"] = "Favorite";
-    ButtonIcon["up"] = "Up";
-    ButtonIcon["down"] = "Down";
-    ButtonIcon["save"] = "Save";
-    return ButtonIcon;
-}(ButtonIcon || {});
+var Icons = /*#__PURE__*/ function(Icons) {
+    Icons["undo"] = "Undo";
+    Icons["redo"] = "Redo";
+    Icons["random"] = "Random";
+    Icons["favorite"] = "Favorite";
+    Icons["up"] = "Up";
+    Icons["down"] = "Down";
+    Icons["save"] = "Save";
+    Icons["add"] = "Add";
+    Icons["delete"] = "Delete";
+    return Icons;
+}({});
 var Undo = function(param) {
     var color = param.color;
     return /*#__PURE__*/ React__default.createElement("svg", {
@@ -2110,26 +2233,113 @@ var Random = function(param) {
         "stroke-linejoin": "round"
     }));
 };
-var icons = {
+var Add = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: "24px",
+        height: "24px",
+        "stroke-width": "1.5",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 12H12M18 12H12M12 12V6M12 12V18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Delete = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: "24px",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        "stroke-width": "1.5"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z",
+        fill: color
+    }));
+};
+var iconList = {
     Undo: Undo,
     Redo: Redo,
     Random: Random,
     Favorite: Favorite,
     Up: Up,
     Down: Down,
-    Save: Save
+    Save: Save,
+    Add: Add,
+    Delete: Delete
 };
 // const getViewBoxWidth = (width: string) => {
 //   const numericWidth = width.match(/\d+/)?.[0];
 //   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
 // };
+function Icon(param) {
+    var icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '24px' : _param_height, className = param.className, style = param.style;
+    var _$Icon = iconList[icon];
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "Icon ".concat(className),
+        onClick: onClick,
+        padding: padding,
+        style: _object_spread$9({
+            width: width,
+            height: height
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement(_$Icon, {
+        width: width,
+        color: disabled ? 'var(--color-gray-400)' : color
+    }));
+}
+Icon.icon = Icons;
+Icon.padding = Spacing;
+Icon.margin = Spacing;
+
+function _define_property$8(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$8(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$8(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function IconButton(param) {
     var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Button.padding.none
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Button.margin.none
     ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '24px' : _param_height, className = param.className, style = param.style;
-    var Icon = icons[icon];
+    var Icon = iconList[icon];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
         className: "IconButton ".concat(className),
@@ -2137,7 +2347,7 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
-        style: _object_spread$4({
+        style: _object_spread$8({
             backgroundColor: backgroundColor,
             width: width,
             height: height
@@ -2147,11 +2357,11 @@ function IconButton(param) {
         color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
-IconButton.icon = ButtonIcon;
+IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _define_property$3(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2164,7 +2374,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$3(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);
@@ -2174,7 +2384,7 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -2186,8 +2396,11 @@ function KeyValueDisplayScreen(param) {
         // justifyContent={Box.justifyContent.flexStart}
         alignItems: Box.alignItems.flexStart,
         gap: Box.gap.small,
-        style: _object_spread$3({}, style),
+        style: _object_spread$7({}, style),
         padding: [
+            Box.padding.small,
+            Box.padding.none,
+            Box.padding.small,
             Box.padding.small
         ],
         className: className
@@ -2285,18 +2498,18 @@ function LinePlot(param) {
     })));
 }
 
-var css_248z$2 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
-styleInject(css_248z$2);
+var css_248z$4 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
+styleInject(css_248z$4);
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$2(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2309,7 +2522,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2333,10 +2546,10 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+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$2(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);
@@ -2346,25 +2559,25 @@ function _object_spread$2(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$2(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function Oscilloscope(param) {
     var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
-    var _useState = _sliced_to_array$2(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$6(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     useEffect(function() {
         //@ts-expect-error
         var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -2382,7 +2595,7 @@ function Oscilloscope(param) {
     }, []);
     return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
-        style: _object_spread$2({
+        style: _object_spread$6({
             height: height
         }, style),
         className: classnames('Oscilloscope', className)
@@ -2393,21 +2606,21 @@ function Oscilloscope(param) {
     }));
 }
 
-var css_248z$1 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-section);\n  font-weight: normal;\n}\n\n.ModuleHeader-Name {\n  font-size: var(--text-lg);\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  font-weight: lighter;\n  height: 1.75rem;\n  color: var(--color-brand);\n}\n\n.ModuleHeader-Subheading {\n  font-size: var(--text-xs);\n  font-weight: lighter;\n  letter-spacing: 2.25px;\n  text-transform: uppercase;\n  color: var(--color-brand);\n}\n";
-styleInject(css_248z$1);
+var css_248z$3 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-section);\n  font-weight: normal;\n  font-family: var(--font-leagueSpartan);\n}\n\n.ModuleHeader-Name {\n  font-size: var(--text-lg);\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  font-weight: lighter;\n  height: 1.75rem;\n  color: var(--color-brand);\n}\n\n.ModuleHeader-Subheading {\n  font-size: var(--text-xs);\n  font-weight: lighter;\n  letter-spacing: 2.25px;\n  text-transform: uppercase;\n  color: var(--color-brand);\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n  background-color: var(--bg-page);\n  color: var(--color-text);\n  /* border: 2px solid var(--color-brand); */\n  border-radius: 3px;\n  height: 30px;\n  font-size: var(--text-md);\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n    color: var(--color-brand);\n  }\n}\n\n#advancedLayoutButton.selected {\n  color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n  /* display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25; */\n}\n";
+styleInject(css_248z$3);
 
-var css_248z = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-page);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n  font-family: var(--font-leagueSpartan);\n  cursor: pointer;\n  background: var(--color-gray-800);\n  text-transform: uppercase;\n  &:hover,\n  &.isSelected {\n    background: var(--bg-selected);\n  }\n} */\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
-styleInject(css_248z);
+var css_248z$2 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-page);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n  font-family: var(--font-leagueSpartan);\n  cursor: pointer;\n  background: var(--color-gray-800);\n  text-transform: uppercase;\n  &:hover,\n  &.isSelected {\n    background: var(--bg-selected);\n  }\n} */\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
+styleInject(css_248z$2);
 
-function _array_like_to_array$1(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$1(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -2421,22 +2634,22 @@ function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator$1(fn) {
+function _async_to_generator$3(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
     };
 }
-function _iterable_to_array_limit$1(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2460,25 +2673,25 @@ function _iterable_to_array_limit$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$1() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_destructuring_empty(o) {
     if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
     return o;
 }
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _unsupported_iterable_to_array$1(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
-function _ts_generator$1(thisArg, body) {
+function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
         label: 0,
         sent: function() {
@@ -2571,16 +2784,16 @@ function _ts_generator$1(thisArg, body) {
 }
 function PresetManager(param) {
     _object_destructuring_empty(param);
-    var _useState = _sliced_to_array$1(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
-    var _useState1 = _sliced_to_array$1(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
+    var _useState = _sliced_to_array$5(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
+    var _useState1 = _sliced_to_array$5(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
     var savePresetFunc = Juce.getNativeFunction('savePreset');
     var loadPresetFunc = Juce.getNativeFunction('loadPreset');
     var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
     var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
     var isDirtyFunc = Juce.getNativeFunction('canUndo');
-    var _useState2 = _sliced_to_array$1(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
+    var _useState2 = _sliced_to_array$5(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState3 = _sliced_to_array$1(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
+    var _useState3 = _sliced_to_array$5(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
     useEffect(function() {
         if (!isLocalhost) {
             var isDirtyListenerId = //@ts-expect-error
@@ -2599,9 +2812,9 @@ function PresetManager(param) {
     ]);
     useEffect(function() {
         var getIsDirtyState = function() {
-            return _async_to_generator$1(function() {
+            return _async_to_generator$3(function() {
                 var isDirtyState, error;
-                return _ts_generator$1(this, function(_state) {
+                return _ts_generator$3(this, function(_state) {
                     switch(_state.label){
                         case 0:
                             _state.trys.push([
@@ -2639,9 +2852,9 @@ function PresetManager(param) {
         getIsDirtyState();
     });
     var loadAllPresets = function(selectedPreset) {
-        return _async_to_generator$1(function() {
+        return _async_to_generator$3(function() {
             var allPresets, currentPreset, error;
-            return _ts_generator$1(this, function(_state) {
+            return _ts_generator$3(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         _state.trys.push([
@@ -2697,7 +2910,7 @@ function PresetManager(param) {
         loadPresetFunc(value);
     };
     var loadNextPreset = function(currentValue) {
-        var nextIndex = presetList.indexOf(currentValue) + 1;
+        var nextIndex = (presetList === null || presetList === void 0 ? void 0 : presetList.indexOf(currentValue)) + 1;
         if (nextIndex < presetList.length) {
             loadPreset(presetList[nextIndex]);
         } else {
@@ -2705,7 +2918,7 @@ function PresetManager(param) {
         }
     };
     var loadPreviousPreset = function(currentValue) {
-        var prevIndex = presetList.indexOf(currentValue) - 1;
+        var prevIndex = (presetList === null || presetList === void 0 ? void 0 : presetList.indexOf(currentValue)) - 1;
         if (prevIndex >= 0) {
             loadPreset(presetList[prevIndex]);
         } else {
@@ -2714,9 +2927,9 @@ function PresetManager(param) {
     };
     var savePreset = function(name) {
         var callSavePreset = function(name) {
-            return _async_to_generator$1(function() {
+            return _async_to_generator$3(function() {
                 var error;
-                return _ts_generator$1(this, function(_state) {
+                return _ts_generator$3(this, function(_state) {
                     switch(_state.label){
                         case 0:
                             setIsSaving(true);
@@ -2782,7 +2995,6 @@ function PresetManager(param) {
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "savePreset",
         onClick: function(e) {
-            console.log(selectedPreset, 'selected');
             e.preventDefault();
             selectedPreset && savePreset(selectedPreset);
         },
@@ -2857,15 +3069,15 @@ function PresetManager(param) {
     }))))));
 }
 
-function _array_like_to_array(arr, len) {
+function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes(arr) {
+function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -2879,22 +3091,22 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
         Promise.resolve(value).then(_next, _throw);
     }
 }
-function _async_to_generator(fn) {
+function _async_to_generator$2(fn) {
     return function() {
         var self = this, args = arguments;
         return new Promise(function(resolve, reject) {
             var gen = fn.apply(self, args);
             function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "next", value);
             }
             function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+                asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, "throw", err);
             }
             _next(undefined);
         });
     };
 }
-function _define_property$1(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2907,7 +3119,7 @@ function _define_property$1(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit(arr, i) {
+function _iterable_to_array_limit$4(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2931,10 +3143,10 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest() {
+function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$1(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);
@@ -2944,23 +3156,23 @@ function _object_spread$1(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$1(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+function _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
 }
-function _unsupported_iterable_to_array(o, minLen) {
+function _unsupported_iterable_to_array$4(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
-function _ts_generator(thisArg, body) {
+function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
         label: 0,
         sent: function() {
@@ -3056,18 +3268,62 @@ function ModuleHeader(param) {
     var _globalState_highlightedItem, _globalState_highlightedItem1;
     var canUndoFunc = Juce.getNativeFunction('canUndo');
     var canRedoFunc = Juce.getNativeFunction('canRedo');
+    var setAdvancedViewFunc = Juce.getNativeFunction('setAdvancedView');
+    var getAdvancedViewFunc = Juce.getNativeFunction('getAdvancedView');
     var undo = Juce.getNativeFunction('undo');
     var redo = Juce.getNativeFunction('redo');
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
-    var globalState = useGlobalContext().globalState;
+    var _useState = _sliced_to_array$4(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
+    var _useState1 = _sliced_to_array$4(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
+    var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, setAdvancedView = _useGlobalContext.setAdvancedView;
     var handleUndo = function() {
         undo();
     };
     var handleRedo = function() {
         redo();
     };
+    var toggleAdvancedView = function() {
+        var toggleViewState = function() {
+            return _async_to_generator$2(function() {
+                var advancedViewStatus, e;
+                return _ts_generator$2(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                2,
+                                ,
+                                3
+                            ]);
+                            return [
+                                4,
+                                getAdvancedViewFunc()
+                            ];
+                        case 1:
+                            advancedViewStatus = _state.sent();
+                            setAdvancedViewFunc(!advancedViewStatus);
+                            setAdvancedView(!advancedViewStatus);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 2:
+                            e = _state.sent();
+                            console.log(e);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 3:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        toggleViewState();
+    };
     useEffect(function() {
         if (!isLocalhost) {
             var undoButtonListenerId = //@ts-expect-error
@@ -3078,6 +3334,45 @@ function ModuleHeader(param) {
             window.__JUCE__.backend.addEventListener('updateRedoButton', function(event) {
                 setCanRedo(event);
             });
+            var getViewState = function() {
+                return _async_to_generator$2(function() {
+                    var advancedViewStatus, e;
+                    return _ts_generator$2(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                _state.trys.push([
+                                    0,
+                                    2,
+                                    ,
+                                    3
+                                ]);
+                                return [
+                                    4,
+                                    getAdvancedViewFunc()
+                                ];
+                            case 1:
+                                advancedViewStatus = _state.sent();
+                                setAdvancedView(advancedViewStatus);
+                                return [
+                                    3,
+                                    3
+                                ];
+                            case 2:
+                                e = _state.sent();
+                                console.log(e);
+                                return [
+                                    3,
+                                    3
+                                ];
+                            case 3:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            };
+            getViewState();
             return function cleanup() {
                 //@ts-expect-error
                 window.__JUCE__.backend.removeEventListener(undoButtonListenerId);
@@ -3092,9 +3387,9 @@ function ModuleHeader(param) {
     ]);
     useEffect(function() {
         var getUndoRedoState = function() {
-            return _async_to_generator(function() {
+            return _async_to_generator$2(function() {
                 var canUndoState, canRedoState, error;
-                return _ts_generator(this, function(_state) {
+                return _ts_generator$2(this, function(_state) {
                     switch(_state.label){
                         case 0:
                             _state.trys.push([
@@ -3146,11 +3441,12 @@ function ModuleHeader(param) {
             Box.padding.large
         ],
         className: classnames('ModuleHeader', className),
-        style: _object_spread$1({}, style)
+        style: _object_spread$5({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
         },
+        gap: Box.gap.medium,
         justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
@@ -3202,10 +3498,36 @@ function ModuleHeader(param) {
             handleRedo();
         },
         icon: IconButton.icon.redo
-    }))));
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        justifyContent: Box.justifyContent.flexStart
+    }, /*#__PURE__*/ React__default.createElement(Button, {
+        id: "advancedLayoutButton",
+        className: (globalState === null || globalState === void 0 ? void 0 : globalState.advancedView) ? 'selected' : '',
+        padding: [
+            Button.padding.small,
+            Button.padding.large
+        ],
+        onClick: toggleAdvancedView
+    }, /*#__PURE__*/ React__default.createElement("span", {
+        className: "advancedLayoutButtonLabel"
+    }, "Advanced")))));
 }
 
-function _define_property(obj, key, value) {
+var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n";
+styleInject(css_248z$1);
+
+var targetColors = [
+    'var(--color-brand)',
+    '#3B7FDF',
+    '#409578',
+    '#ce5847',
+    '#d98368',
+    '#E0859D',
+    '#4DA1CB'
+];
+var ComboboxCellWidth = '217px';
+
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3218,7 +3540,7 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _object_spread(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);
@@ -3228,26 +3550,1019 @@ function _object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
 }
-function ModuleFooter(param) {
-    var className = param.className, style = param.style;
-    return /*#__PURE__*/ React__default.createElement(Box, {
+function SingleBarViz(param) {
+    var _param_background = param.background, background = _param_background === void 0 ? 'var(--color-brand)' : _param_background, _param_height = param.height, height = _param_height === void 0 ? '6px' : _param_height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.bipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, value = param.value, className = param.className, style = param.style;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        className: className,
+        style: {
+            width: '100%',
+            height: height,
+            background: 'var(--color-gray-600)',
+            position: 'relative'
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: _object_spread$4({
+            position: 'absolute',
+            background: background
+        }, getBarTransformStyles({
+            polarity: polarity,
+            orientation: orientation,
+            value: value || 0
+        }), style)
+    }));
+}
+SingleBarViz.polarity = Polarity;
+
+function _array_like_to_array$3(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$3(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property$3(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit$3(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$3() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread$3(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$3(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+}
+function _unsupported_iterable_to_array$3(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+}
+function ModMatrixComboboxCell(param) {
+    var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, color = param.color, style = param.style;
+    var _useState = _sliced_to_array$3(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
+    var _useState1 = _sliced_to_array$3(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
+    var globalState = useGlobalContext().globalState;
+    var _useCombobox = useCombobox({
+        id: rowId,
+        items: globalState === null || globalState === void 0 ? void 0 : globalState.automatableParams,
+        filter: filterString,
+        displayValInHeader: false,
+        onChange: handleTargetChange
+    }), value = _useCombobox.value, choices = _useCombobox.choices, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
+    useEffect(function() {
+        if (target) {
+            var sliderState = Juce.getSliderState(target);
+            var normalisedValue = sliderState.getNormalisedValue();
+            setTargetValue(normalisedValue);
+        }
+    }, [
+        target
+    ]);
+    // useEffect(() => {
+    //   console.log(
+    //     globalState?.automatableParams,
+    //     'globalState?.automatableParams',
+    //   );
+    // });
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixCell ModMatrixComboboxCell",
+        justifyContent: Box.justifyContent.flexEnd,
+        flexDirection: Box.flexDirection.column,
+        style: _object_spread$3({
+            color: color
+        }, style),
+        padding: [
+            Box.padding.medium,
+            Box.padding.large
+        ],
+        alignItems: Box.alignItems.flexStart,
+        height: '2.5rem'
+    }, /*#__PURE__*/ React__default.createElement(Combobox, {
+        value: value,
+        onChange: handleChange
+    }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
+        displayValue: function() {
+            var _globalState_automatableParamLabels;
+            return globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[value];
+        },
+        onChange: function(e) {
+            return setFilterString(e.target.value);
+        }
+    }), /*#__PURE__*/ React__default.createElement(ComboboxButton, {
+        className: "ModMatrixComboboxButton"
+    }, /*#__PURE__*/ React__default.createElement(Icon, {
+        icon: Icon.icon.down,
+        backgroundColor: "transparent",
+        onClick: function(e) {
+            return e.preventDefault();
+        },
+        color: color,
+        width: "20px",
+        height: "20px"
+    }))), /*#__PURE__*/ React__default.createElement(ComboboxOptions, {
+        className: "ModMatrixComboboxItems",
+        //   anchor="bottom"
+        transition: true
+    }, filteredChoices === null || filteredChoices === void 0 ? void 0 : filteredChoices.map(function(item) {
+        var _globalState_automatableParamLabels;
+        return(//   <Box
+        //     padding={[Box.padding.medium, Box.padding.large]}
+        //     justifyContent={Box.justifyContent.flexStart}
+        //     className="ModMatrixComboboxItemContainer"
+        //   >
+        /*#__PURE__*/ React__default.createElement(ComboboxOption, {
+            className: "ModMatrixComboboxItem",
+            key: item,
+            value: item
+        }, /*#__PURE__*/ React__default.createElement(Label, null, item ? globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[choices === null || choices === void 0 ? void 0 : choices.indexOf(item)] : '')));
+    }))), /*#__PURE__*/ React__default.createElement(SingleBarViz, {
+        value: targetValue,
+        polarity: SingleBarViz.polarity.linear,
+        background: color,
+        style: {
+            alignSelf: 'flex-end'
+        }
+    }));
+}
+
+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 ModMatrixCell(param) {
+    param.target; var modifier = param.modifier; param.value; var color = param.color, style = param.style;
+    var _useSlider = useSlider({
+        id: modifier,
+        displayValInHeader: false
+    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue;
+    var scaledNormalisedValue = normalisedValue * 100;
+    return /*#__PURE__*/ React__default.createElement(Box, _object_spread$2({
+        className: "ModMatrixCell",
+        justifyContent: Box.justifyContent.flexEnd,
+        alignItems: Box.alignItems.flexStart,
+        flexDirection: Box.flexDirection.column,
+        style: _object_spread$2({
+            color: color,
+            pointerEvents: 'all'
+        }, style),
+        height: '2.5rem'
+    }, bindBarSliderDrag(Orientation.horizontal)), /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "1",
+        style: {
+            pointerEvents: 'none'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Label, null, parseFloat(scaledNormalisedValue.toFixed(2)) || '0')), /*#__PURE__*/ React__default.createElement(Box, {
+        style: {
+            alignSelf: 'flex-end',
+            pointerEvents: 'none'
+        }
+    }, /*#__PURE__*/ React__default.createElement(SingleBarViz, {
+        value: (modifier === null || modifier === void 0 ? void 0 : modifier.value) || 0,
+        polarity: SingleBarViz.polarity.linear,
+        background: color,
+        style: _object_spread$2({
+            alignSelf: 'flex-end',
+            pointerEvents: 'none'
+        }, getBarTransformStyles({
+            orientation: Orientation.horizontal,
+            polarity: Polarity.linear,
+            value: parseFloat(scaledNormalisedValue.toFixed(2))
+        }))
+    })));
+}
+
+function _array_like_to_array$2(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$2(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$2(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$2() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+}
+function _unsupported_iterable_to_array$2(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+}
+function ModMatrixRow(param) {
+    var rowId = param.rowId, rowIndex = param.rowIndex; param.isPreview;
+    var _globalState_modSlotParams_rowIndex;
+    var _useState = _sliced_to_array$2(useState(), 2), rowTarget = _useState[0], setRowTarget = _useState[1];
+    var globalState = useGlobalContext().globalState;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixBodyRow",
+        gap: Box.gap.medium
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixBodyCell ModMatrixComboboxCell",
+        justifyContent: Box.justifyContent.flexStart,
+        flexDirection: Box.flexDirection.column,
+        style: {
+            color: targetColors[0]
+        }
+    }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
+        target: rowTarget,
+        handleTargetChange: setRowTarget,
+        rowId: rowId,
+        color: targetColors[0],
+        style: {
+            width: ComboboxCellWidth
+        }
+    })), globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = globalState.modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex.map(function(item, i) {
+        var _globalState_modSlotParams_rowIndex, _globalState_modSlotParams;
+        return /*#__PURE__*/ React__default.createElement(Box, {
+            className: "ModMatrixBodyCell",
+            flexDirection: Box.flexDirection.column,
+            style: {
+                color: targetColors[i + 1]
+            }
+        }, /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
+            target: rowTarget,
+            modifier: globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams = globalState.modSlotParams) === null || _globalState_modSlotParams === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = _globalState_modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex[i],
+            color: targetColors[i + 1]
+        }));
+    }));
+}
+
+function _array_like_to_array$1(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$1(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$1(arr);
+}
+function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator$1(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property$1(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 _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit$1(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$1() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread$1(target) {
+    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$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$1(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array$1(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
+}
+function _ts_generator$1(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+function ModuleFooter$1(param) {
+    var className = param.className, style = param.style;
+    var _useState = _sliced_to_array$1(useState(), 2), previewRowId = _useState[0], setPreviewRowId = _useState[1];
+    var getAllAPVTSParamsFunc = Juce.getNativeFunction('getAllAPVTSParams');
+    var _useGlobalContext = useGlobalContext(), setAutomatableParams = _useGlobalContext.setAutomatableParams, setAutomatableParamLabels = _useGlobalContext.setAutomatableParamLabels, setModSlots = _useGlobalContext.setModSlots, setModSlotParams = _useGlobalContext.setModSlotParams, setModSlotParamLabels = _useGlobalContext.setModSlotParamLabels, globalState = _useGlobalContext.globalState;
+    var assignedModSlots = useMemo(function() {
+        var _globalState_modSlots;
+        return globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : _globalState_modSlots.filter(function(item) {
+            return (item === null || item === void 0 ? void 0 : item[1]) !== 0;
+        });
+    }, [
+        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
+    ]);
+    useEffect(function() {
+        var getAPVTSParams = function() {
+            return _async_to_generator$1(function() {
+                var params, e;
+                return _ts_generator$1(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                2,
+                                ,
+                                3
+                            ]);
+                            return [
+                                4,
+                                getAllAPVTSParamsFunc()
+                            ];
+                        case 1:
+                            params = _state.sent();
+                            setAutomatableParams(params === null || params === void 0 ? void 0 : params[0]);
+                            setAutomatableParamLabels(params === null || params === void 0 ? void 0 : params[1]);
+                            setModSlots(params === null || params === void 0 ? void 0 : params[2]);
+                            setModSlotParams(params === null || params === void 0 ? void 0 : params[3]);
+                            setModSlotParamLabels(params === null || params === void 0 ? void 0 : params[4]);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 2:
+                            e = _state.sent();
+                            console.log(e);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 3:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        getAPVTSParams();
+    }, [
+        window
+    ]);
+    useEffect(function() {
+        if (!assignedModSlots.length) {
+            var _globalState_modSlots_, _globalState_modSlots;
+            setPreviewRowId(globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : (_globalState_modSlots_ = _globalState_modSlots[0]) === null || _globalState_modSlots_ === void 0 ? void 0 : _globalState_modSlots_[0]);
+        }
+    }, [
+        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
+    ]);
+    var headers = [
+        'Target'
+    ].concat(_to_consumable_array(globalState === null || globalState === void 0 ? void 0 : globalState.modSlotParamLabels));
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        gap: Box.gap.medium,
+        padding: [
+            Box.padding.medium,
+            Box.padding.large
+        ],
+        className: "".concat(className, " ModMatrix"),
+        style: _object_spread$1({
+            backgroundColor: 'var(--bg-section)'
+        }, style),
+        flexDirection: Box.flexDirection.column
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixHeader",
+        gap: Box.gap.medium
+    }, headers.map(function(item, i) {
+        return /*#__PURE__*/ React__default.createElement(Box, {
+            style: {
+                color: targetColors[i],
+                flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : 'initial'
+            },
+            className: "ModMatrixHeaderCell",
+            padding: [
+                Box.padding.medium,
+                Box.padding.large
+            ]
+        }, /*#__PURE__*/ React__default.createElement(Label, null, item));
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixBody",
+        gap: Box.gap.medium,
+        flexDirection: Box.flexDirection.column
+    }, (assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.length) ? assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.map(function(item, i) {
+        return /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
+            rowId: item,
+            rowIndex: i
+        });
+    }) : null, previewRowId ? /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
+        rowId: previewRowId,
+        rowIndex: 0,
+        // onChange={(item: any) =>
+        //   setAssignedRowIds([...assignedRowIds, item])
+        // }
+        isPreview: true
+    }) : ''), /*#__PURE__*/ React__default.createElement(Box, {
+        justifyContent: Box.justifyContent.flexStart
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "addModMatrixRow",
+        icon: IconButton.icon.add,
+        margin: [
+            IconButton.margin.small
+        ],
+        padding: [
+            IconButton.padding.small
+        ],
+        // color="var(--color-gray-500)"
+        // backgroundColor="transparent"
+        onClick: function(e) {}
+    })));
+}
+
+var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
+styleInject(css_248z);
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    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(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(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var FooterTabs = /*#__PURE__*/ function(FooterTabs) {
+    FooterTabs["ModMatrix"] = "ModMatrix";
+    FooterTabs["InputMod"] = "InputMod";
+    FooterTabs["LFOs"] = "LFOs";
+    FooterTabs["Sequencer"] = "Sequencer";
+    FooterTabs["Settings"] = "Settings";
+    return FooterTabs;
+}({});
+var ModMatrixTab = function() {
+    return /*#__PURE__*/ React__default.createElement(ModuleFooter$1, null);
+};
+var InputModTab = function() {
+    return /*#__PURE__*/ React__default.createElement(Box, null, "InputModTab");
+};
+var LFOsTab = function() {
+    return /*#__PURE__*/ React__default.createElement(Box, null, "LFOsTab");
+};
+var SequencerTab = function() {
+    return /*#__PURE__*/ React__default.createElement(Box, null, "SequencerTab");
+};
+var SettingsTab = function() {
+    return /*#__PURE__*/ React__default.createElement(Box, null, "SettingsTab");
+};
+function ModuleFooter(param) {
+    var className = param.className, style = param.style;
+    var _useState = _sliced_to_array(useState(0), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
+    var setSelectedFooterTabFunc = Juce.getNativeFunction('setSelectedFooterTab');
+    var getSelectedFooterTabFunc = Juce.getNativeFunction('getSelectedFooterTab');
+    var isTabSelected = function(tabName) {
+        return Object.keys(FooterTabs)[selectedTab] === tabName;
+    };
+    useEffect(function() {
+        var getTabFromBackend = function() {
+            return _async_to_generator(function() {
+                var selectedIndex, e;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                2,
+                                ,
+                                3
+                            ]);
+                            return [
+                                4,
+                                getSelectedFooterTabFunc()
+                            ];
+                        case 1:
+                            selectedIndex = _state.sent();
+                            setSelectedTab(selectedIndex);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 2:
+                            e = _state.sent();
+                            console.log(e);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 3:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        getTabFromBackend();
+    }, [
+        window
+    ]);
+    var handleTabChange = function(newSelection) {
+        var updateBackend = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    try {
+                        setSelectedFooterTabFunc(newSelection);
+                        setSelectedTab(newSelection);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                    return [
+                        2
+                    ];
+                });
+            })();
+        };
+        updateBackend();
+    };
+    return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         tag: Box.tag.footer,
-        padding: [
-            Box.padding.medium,
-            Box.padding.large
-        ],
-        className: classnames(className),
+        height: "100%",
+        alignItems: Box.alignItems.flexStart,
+        className: "ModuleFooter ".concat(className),
         style: _object_spread({
             backgroundColor: 'var(--bg-section)'
         }, style)
-    });
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        style: {
+            backgroundColor: 'var(--color-gray-500)'
+        },
+        padding: [
+            Box.padding.small,
+            Box.padding.small,
+            Box.padding.none,
+            Box.padding.small
+        ]
+    }, /*#__PURE__*/ React__default.createElement(Tabs, {
+        items: [
+            'Mod Matrix',
+            'Input mod',
+            'LFOs',
+            'Sequencer',
+            'Settings'
+        ],
+        onChange: handleTabChange,
+        selectedIndex: selectedTab,
+        gap: "2px",
+        padding: [
+            Tabs.padding.medium,
+            Tabs.padding.large
+        ],
+        width: "100%"
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        padding: [
+            Box.padding.large
+        ]
+    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOsTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }
 
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, getPosition, getTransformString, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
+export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
 //# sourceMappingURL=index.js.map