@antimatter-audio/antimatter-ui 9.6.0 → 10.1.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, useCallback } from 'react';
+import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$8 = "@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\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: #1e1d21;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #999999;\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  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
-styleInject(css_248z$8);
+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 Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
@@ -84,18 +84,18 @@ var FontSizes = /*#__PURE__*/ function(FontSizes) {
     return FontSizes;
 }({});
 
-var css_248z$7 = ".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  font-size: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1px;\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  appearance: none;\n  &:hover,\n  &:focus-visible {\n    outline: none;\n  }\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$7);
+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);
 
-function _array_like_to_array$7(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$7(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$7(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 = [];
@@ -119,27 +119,27 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+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 _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$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$7(o, minLen) {
+function _unsupported_iterable_to_array$9(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$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$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(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;
-    var _useState = _sliced_to_array$7(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
+    ] : _param_margin, onChange = param.onChange, selectedIndex = param.selectedIndex;
+    var _useState = _sliced_to_array$9(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
     var handleChange = function(index) {
         setSelectedItem(index);
         onChange(index);
@@ -155,6 +155,7 @@ function Tabs(param) {
             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], ")")
         },
+        selectedIndex: selectedIndex,
         onChange: function(index) {
             return handleChange(index);
         }
@@ -181,8 +182,8 @@ function Tabs(param) {
 Tabs.padding = Spacing;
 Tabs.margin = Spacing;
 
-var css_248z$6 = ".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$6);
+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 ButtonSize = /*#__PURE__*/ function(ButtonSize) {
     ButtonSize["xSmall"] = "xSmall";
@@ -196,15 +197,15 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-function _array_like_to_array$6(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$6(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$c(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -217,7 +218,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$6(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 = [];
@@ -241,10 +242,10 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$8() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$c(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);
@@ -254,27 +255,29 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+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$6(o, minLen) {
+function _unsupported_iterable_to_array$8(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$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$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(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 ? [
         Spacing.small
-    ] : _param_padding, _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$6(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    ] : _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 buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     // Update the local state when the ID changes
@@ -325,37 +328,95 @@ function Button(param) {
     }, [
         isSelected
     ]);
-    var _padding_, _padding_1, _padding_2, _ref;
+    var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
     return /*#__PURE__*/ React__default.createElement("button", {
         id: id,
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$c({
+        style: _object_spread$d({
             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], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")")
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            marginTop: "var(--p-".concat(margin[0], ")"),
+            marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
         }, style),
         className: classnames('Button', isSelected && 'selected', "".concat(size), className)
     }, size !== ButtonSize.xSmall && (text ? text : children));
 }
 Button.padding = Spacing;
+Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$5 = ".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$5);
+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);
 
-function _array_like_to_array$5(arr, len) {
+function useObservable(param) {
+    var onFire = param.onFire;
+    var observers = useRef([]);
+    var subscribe = function(observer, id) {
+        var _observers_current;
+        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
+            return item[1] === id;
+        })) === undefined) {
+            observers.current.push([
+                observer,
+                id
+            ]);
+        }
+    };
+    var unsubscribe = function(observer, id) {
+        var _observers_current;
+        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
+            return item[1] === id;
+        })) !== undefined) {
+            var _observers_current1;
+            var index = (_observers_current1 = observers.current) === null || _observers_current1 === void 0 ? void 0 : _observers_current1.findIndex(function(item) {
+                return item[1] === id;
+            });
+            observers.current.splice(index, 1);
+        }
+    };
+    var fire = function() {
+        var _observers_current;
+        onFire();
+        (_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.forEach(function(observer) {
+            return observer[0]();
+        });
+    };
+    return {
+        subscribe: subscribe,
+        unsubscribe: unsubscribe,
+        fire: fire
+    };
+}
+
+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$5(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _define_property$c(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$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -379,42 +440,187 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+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$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 _object_spread$c(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$c(target, key, source[key]);
+        });
+    }
+    return target;
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+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 _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$7(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$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$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
-function Dropdown(param) {
-    var _param_items = param.items, items = _param_items === void 0 ? [
-        'Mock Item 1',
-        'Mock Item 2',
-        'Mock Item 3'
-    ] : _param_items, className = param.className, id = param.id, style = param.style;
+// Initial state
+var defaultGlobalStateValue = {
+    highlightedItem: {
+        label: 'Antimatter Audio',
+        value: undefined
+    }
+};
+// 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), {
+                highlightedItem: action.payload
+            });
+        default:
+            return state;
+    }
+};
+// Create the context
+var GlobalContext = /*#__PURE__*/ createContext({
+    globalState: defaultGlobalStateValue
+});
+// Custom hook for consuming context with a selector
+function useGlobalContext(selector) {
+    var localContext = useContext(GlobalContext);
+    return selector ? selector(localContext) : localContext;
+}
+// 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 setHighlightedItem = useCallback(function(highlightedItem) {
+        dispatch({
+            type: 'SET_HIGHLIGHTED_ITEM',
+            payload: highlightedItem
+        });
+    }, []);
+    var onFire = function() {
+        //@ts-expect-error
+        window.__JUCE__.backend.emitEvent('setRandom', {});
+    };
+    var useRandom = useObservable({
+        onFire: onFire
+    });
+    var value = {
+        globalState: state,
+        setHighlightedItem: setHighlightedItem,
+        useRandom: useRandom
+    };
+    return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
+        value: value
+    }, children);
+}
+
+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$6(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 = [];
+    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$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 _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$6(o, minLen) {
+    if (!o) return;
+    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$6(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 comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$5(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$5(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var handleChange = function(event) {
-        comboBoxState.setChoiceIndex(event);
-        setValue(event);
+    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 setHighlightedItem = useGlobalContext().setHighlightedItem;
+    var choices = properties.choices.length ? properties.choices : items;
+    var prevIndex = useRef(null);
+    var handleChange = function(index) {
+        if (index !== prevIndex.current) {
+            comboBoxState.setChoiceIndex(index);
+            setValue(index);
+            onChange && onChange(index);
+            // //@ts-expect-error
+            // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
+            if (displayValInHeader) {
+                setHighlightedItem({
+                    label: label,
+                    value: choices === null || choices === void 0 ? void 0 : choices[index]
+                });
+            }
+            prevIndex.current = index;
+        }
     };
     useEffect(function() {
         var comboBoxState = Juce.getComboBoxState(id);
-        setValue(comboBoxState.getChoiceIndex());
+        handleChange(comboBoxState.getChoiceIndex());
     }, [
         id
     ]);
     useEffect(function() {
         var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
-            setValue(comboBoxState.getChoiceIndex());
+            handleChange(comboBoxState.getChoiceIndex());
         });
         var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
             setProperties(comboBoxState.properties);
@@ -424,8 +630,38 @@ function Dropdown(param) {
             comboBoxState.propertiesChangedEvent.removeListener(propertiesListenerId);
         };
     });
-    var displayedItems = properties.choices.length ? properties.choices : items;
-    return /*#__PURE__*/ React__default.createElement(Listbox, {
+    var onMouseEnter = function() {
+        if (displayValInHeader) {
+            setHighlightedItem({
+                label: label,
+                value: choices === null || choices === void 0 ? void 0 : choices[value]
+            });
+        }
+    };
+    return {
+        value: value,
+        setValue: setValue,
+        choices: choices,
+        onMouseEnter: onMouseEnter,
+        handleChange: handleChange
+    };
+};
+
+function Dropdown(param) {
+    var _param_items = param.items, items = _param_items === void 0 ? [
+        'Mock Item 1',
+        'Mock Item 2',
+        'Mock Item 3'
+    ] : _param_items, label = param.label, className = param.className, onChange = param.onChange, id = param.id, style = param.style;
+    var _useCombobox = useCombobox({
+        id: id,
+        label: label,
+        items: items,
+        onChange: onChange
+    }), value = _useCombobox.value, choices = _useCombobox.choices, onMouseEnter = _useCombobox.onMouseEnter, handleChange = _useCombobox.handleChange;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        onMouseEnter: onMouseEnter
+    }, /*#__PURE__*/ React__default.createElement(Listbox, {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
@@ -435,17 +671,17 @@ function Dropdown(param) {
         onChange: function(value) {
             return console.log(value);
         }
-    }, displayedItems[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
+    }, choices[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
         anchor: "bottom",
         portal: false,
         className: "Dropdown-items z-10"
-    }, displayedItems.map(function(item, i) {
+    }, choices.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ListboxOption, {
             className: classnames('Dropdown-item'),
             key: item,
             value: i
-        }, displayedItems[i]);
-    })));
+        }, item);
+    }))));
 }
 
 var validate = function(param) {
@@ -480,15 +716,15 @@ var randomizeValue = function(min, max) {
     return Math.random() * (max - min) + min;
 };
 
-var css_248z$4 = ".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$4);
+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);
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$b(obj, key, value) {
@@ -504,7 +740,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -528,7 +764,7 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$b(target) {
@@ -546,16 +782,16 @@ function _object_spread$b(target) {
     }
     return target;
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -567,9 +803,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$4(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
-    var _useState1 = _sliced_to_array$4(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
-    var _useState2 = _sliced_to_array$4(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
+    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 valueRef = useRef(null);
     var timer, timeoutVal = 2000;
     // (inputValue === '' || /^-?\d+$/.test(inputValue)
@@ -628,7 +864,6 @@ function Input(param) {
     // triggers a check to see if the user is actually done typing
     inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.addEventListener('keyup', handleKeyUp));
     var handleChange = useCallback(function(e) {
-        // console.log(e, e.target.value);
         var newValue = e.target.value;
         setHasError(false);
         var _validate = validate({
@@ -655,7 +890,6 @@ function Input(param) {
     ]);
     useEffect(function() {
         setInternalValue(value);
-        // console.log(value, 'VALUUUUUU');
         var isValid = validate({
             value: value,
             type: type,
@@ -805,15 +1039,15 @@ var getPosition = function(param) {
     }
 };
 
-function _array_like_to_array$3(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$3(arr) {
+function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$3(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 = [];
@@ -837,24 +1071,24 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$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$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$3(o, minLen) {
+function _unsupported_iterable_to_array$4(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$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$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(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, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+    var id = param.id, label = param.label, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20,
         end: 15000,
         interval: 0.1,
@@ -872,22 +1106,39 @@ 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$3(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
-    var _useState1 = _sliced_to_array$3(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
-    var _useState2 = _sliced_to_array$3(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
+    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 scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
-    var randomValueSetCounter = useRef(null);
+    // const randomValueSetCounter = useRef<number>(null);
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, setHighlightedItem = _useGlobalContext.setHighlightedItem;
     // Set the initial state
+    //@ts-expect-error
     useEffect(function() {
         var sliderState = Juce.getSliderState(id);
-        if (isLocalhost) {
+        var setRandom = function() {
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3;
+            var randomValue = randomizeValue(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start, sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
+            var newValue = (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.start) === 0 && (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties3 = sliderState.properties) === null || _sliderState_properties3 === void 0 ? void 0 : _sliderState_properties3.end) === 1 ? randomValue : scaledToNormalised({
+                scaledValue: randomValue,
+                properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
+            });
+            setNormalisedState(newValue);
+        };
+        if (!isLocalhost) {
+            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);
+            }
+            return function() {
+                useRandom === null || useRandom === void 0 ? void 0 : useRandom.unsubscribe(setRandom, id);
+            };
+        } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
             setProperties(mockProperties);
             setNormalisedValue(mockInitialNormalisedValue);
-        } else {
-            setNormalisedValue(normalisedValue);
-            setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
         }
     }, []);
     // Update the local state when the ID changes
@@ -898,6 +1149,7 @@ var useSlider = function(param) {
         id
     ]);
     // Sets up listeners to handle changes on the backend
+    //@ts-expect-error
     useEffect(function() {
         if (!isLocalhost) {
             var sliderState = Juce.getSliderState(id);
@@ -907,31 +1159,10 @@ var useSlider = function(param) {
             var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
                 return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
             });
-            //@ts-expect-error
-            var randomizeListenerId = window.__JUCE__.backend.addEventListener('triggerRandom', function(event) {
-                var lastCharInIdAsNumber = parseInt(id.slice(-1), 10);
-                var selectedBand = event[1] + 1;
-                var idIsNotBandProperty = isNaN(lastCharInIdAsNumber);
-                var idBelongsToSelectedBand = isNaN(lastCharInIdAsNumber) === false && lastCharInIdAsNumber === selectedBand;
-                if (isRandomizable && event[0] !== randomValueSetCounter.current && (idIsNotBandProperty ? true : idBelongsToSelectedBand)) {
-                    var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3;
-                    var randomValue = randomizeValue(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start, sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
-                    var newValue = (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.start) === 0 && (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties3 = sliderState.properties) === null || _sliderState_properties3 === void 0 ? void 0 : _sliderState_properties3.end) === 1 ? randomValue : scaledToNormalised({
-                        scaledValue: randomValue,
-                        properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
-                    });
-                    setNormalisedState(newValue);
-                    randomValueSetCounter.current = event;
-                }
-            });
-            return function cleanup() {
+            return function() {
                 sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.removeListener(valueListenerId);
                 sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
-                //@ts-expect-error
-                window.__JUCE__.backend.removeEventListener(randomizeListenerId, id);
             };
-        } else {
-            return;
         }
     }, [
         window
@@ -940,9 +1171,16 @@ var useSlider = function(param) {
     var updateLocalState = function(sliderState) {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
         var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
+        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
         setNormalisedValue(parseFloat(normalisedValueFromState.toFixed(2)));
-        setScaledValue(parseFloat(scaledValueFromState.toFixed(2)));
+        setScaledValue(scaledValue);
         onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
+        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+            setHighlightedItem({
+                label: label,
+                value: scaledValue
+            });
+        }
     };
     // Update JUCE state
     var setNormalisedState = function(newValue) {
@@ -963,8 +1201,14 @@ var useSlider = function(param) {
         }
     };
     var bindDrag = useDrag(function(param) {
-        var down = param.down, delta = param.delta;
-        if (down) {
+        var down = param.down, delta = param.delta, first = param.first, last = param.last;
+        if (first) {
+            //@ts-expect-error
+            window.__JUCE__.backend.emitEvent('jsDragStarted', {
+                i: "".concat(0)
+            });
+        }
+        if (down) {
             var deltaVal = delta[1] * -1;
             var newValue = (normalisedValue !== null && normalisedValue !== void 0 ? normalisedValue : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
             //   ? 4
@@ -972,22 +1216,48 @@ var useSlider = function(param) {
             ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
             setNormalisedState(newValue);
         }
+        if (last) {
+            //@ts-expect-error
+            window.__JUCE__.backend.emitEvent('jsDragEnded', {
+                i: "".concat(0)
+            });
+        }
     }, {
         preventDefault: true
     });
     var bindBarSliderDrag = useDrag(function(param) {
-        var down = param.down, event = param.event;
+        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 onMouseEnter = function() {
+        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+            setHighlightedItem({
+                label: label,
+                value: scaledValue
+            });
+        }
+    };
     // TODO: Refactor
     // const onChangeStarted = () => sliderState.sliderDragStarted();
     // const onChangeCommitted = () => sliderState.sliderDragEnded();
@@ -996,6 +1266,7 @@ var useSlider = function(param) {
         setScaledState: setScaledState,
         // onChangeStarted,
         // onChangeCommitted,
+        onMouseEnter: onMouseEnter,
         bindBarSliderDrag: bindBarSliderDrag,
         bindDrag: bindDrag,
         normalisedValue: normalisedValue,
@@ -1004,162 +1275,6 @@ var useSlider = function(param) {
     };
 };
 
-var css_248z$3 = ".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$3);
-
-function _define_property$a(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$a(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$1(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$1(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? SliderPolarity.linear : _param_polarity, className = param.className, id = param.id, onMouseEnter = param.onMouseEnter, 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,
-        interval: 0.1,
-        skew: 0.7
-    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
-    var _useSlider = useSlider({
-        id: id,
-        mockProperties: mockProperties,
-        mockInitialNormalisedValue: mockInitialNormalisedValue,
-        onChange: onChange,
-        isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center'
-        }
-    }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$a({
-        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
-    }, bindDrag()), {
-        onMouseEnter: function() {
-            return onMouseEnter && onMouseEnter(id, scaledValue);
-        },
-        style: _object_spread$a({
-            touchAction: 'none'
-        }, style)
-    }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Inner'),
-        style: _object_spread$a({
-            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
-        }))
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Indicator'),
-        style: _object_spread$a({
-            backgroundColor: color
-        }, style)
-    })) : ''));
-}
-RotarySlider.sliderPolarity = SliderPolarity;
-
-function _define_property$9(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$9(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$9(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement("label", {
-        id: id,
-        htmlFor: htmlFor,
-        style: _object_spread$9({
-            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], ")"),
-            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            WebkitUserSelect: 'none',
-            userSelect: 'none'
-        }, style),
-        className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
-}
-Label.padding = Spacing;
-Label.fontSize = FontSizes;
-
 var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
     JustifyContent["flexStart"] = "flex-start";
     JustifyContent["flexEnd"] = "flex-end";
@@ -1183,10 +1298,12 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     LayoutTags["section"] = "section";
     LayoutTags["div"] = "div";
     LayoutTags["footer"] = "footer";
+    LayoutTags["ul"] = "ul";
+    LayoutTags["li"] = "li";
     return LayoutTags;
 }({});
 
-function _define_property$8(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1199,7 +1316,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(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);
@@ -1209,7 +1326,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -1220,7 +1337,7 @@ var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
     return BoxDisplay;
 }(BoxDisplay || {});
 function Box(param) {
-    var className = param.className, style = param.style, children = param.children, flex = param.flex, key = param.key, _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 ? [
+    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,
@@ -1232,7 +1349,8 @@ function Box(param) {
         // id="globalValues"
         key: key,
         className: className,
-        style: _object_spread$8({
+        onClick: onClick,
+        style: _object_spread$a({
             flexWrap: flexWrap,
             display: display,
             gap: "var(--gap-".concat(gap, ")"),
@@ -1263,7 +1381,7 @@ Box.padding = Spacing;
 Box.flexWrap = FlexWrap;
 Box.tag = LayoutTags;
 
-function _define_property$7(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1276,7 +1394,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(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);
@@ -1286,12 +1404,66 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys(object, enumerableOnly) {
+function Label(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React.createElement("label", {
+        id: id,
+        htmlFor: htmlFor,
+        style: _object_spread$9({
+            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], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            WebkitUserSelect: 'none',
+            userSelect: 'none'
+        }, style),
+        className: classnames('Label', 'select-none', className)
+    }, value ? value : children);
+}
+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);
+
+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 ownKeys$1(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -1299,51 +1471,152 @@ function ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props(target, source) {
+function _object_spread_props$1(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys(Object(source)).forEach(function(key) {
+        ownKeys$1(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     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, onMouseEnter = param.onMouseEnter, 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 ? {
+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
+    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,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties;
+    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
     var _useSlider = useSlider({
         id: id,
+        label: label,
         mockProperties: mockProperties,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
-        sliderOrientation: sliderOrientation,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter;
     return /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column,
-        justifyContent: Box.justifyContent.center,
-        className: classnames(className)
+        flexDirection: Box.flexDirection.column
     }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$7({
-        className: classnames('Slider-bar', 'relative')
-    }, bindBarSliderDrag()), {
-        onMouseEnter: function() {
-            return onMouseEnter && label && onMouseEnter(label, scaledValue);
-        },
-        style: _object_spread$7({
-            touchAction: 'none',
-            backgroundColor: 'var(--bg-input)',
-            minWidth: sliderOrientation === SliderOrientation.horizontal ? '100px' : '20px',
-            minHeight: sliderOrientation === SliderOrientation.horizontal ? '20px' : '75px'
-        }, style)
+        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)
+    }, bindDrag()), {
+        onMouseEnter: onMouseEnter,
+        style: _object_spread$8({
+            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
+        }))
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('RotarySlider-Indicator'),
+        style: _object_spread$8({
+            backgroundColor: color
+        }, style)
+    })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.mediumSmall
+        ],
+        fontSize: Label.fontSize.small,
+        value: label
+    }));
+}
+RotarySlider.sliderPolarity = SliderPolarity;
+
+function _define_property$7(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$7(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$7(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(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(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    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
+    mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+        start: 20.0,
+        end: 15000.0,
+        interval: 0.1,
+        skew: 0.7
+    } : _param_mockProperties;
+    var _useSlider = useSlider({
+        id: id,
+        label: label,
+        mockProperties: mockProperties,
+        mockInitialNormalisedValue: mockInitialNormalisedValue,
+        sliderOrientation: sliderOrientation,
+        onChange: onChange,
+        isRandomizable: isRandomizable
+    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, 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", {
+        className: 'Slider-center-marker'
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$7({
+        className: classnames('Slider-bar', 'relative')
+    }, bindBarSliderDrag()), {
+        onMouseEnter: onMouseEnter,
+        style: _object_spread$7({
+            touchAction: 'none',
+            backgroundColor: 'var(--bg-input)',
+            minWidth: sliderOrientation === SliderOrientation.horizontal ? '100px' : '20px',
+            minHeight: sliderOrientation === SliderOrientation.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')}
@@ -1491,15 +1764,15 @@ var Matrix = function(param) {
     }));
 };
 
-function _array_like_to_array$2(arr, len) {
+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$2(arr) {
+function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+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 = [];
@@ -1523,26 +1796,26 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+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 _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$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$2(o, minLen) {
+function _unsupported_iterable_to_array$3(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$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$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(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$2(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$3(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
     // Set the initial state
     useEffect(function() {
         if (!isLocalhost) {
@@ -1626,8 +1899,8 @@ function IndicatorLight(param) {
     }) : null);
 }
 
-var css_248z$2 = ".IconButton {\n  height: 28px;\n}\n\n.IconButton:hover {\n  filter: brightness(80%);\n}\n";
-styleInject(css_248z$2);
+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);
 
 function _define_property$4(obj, key, value) {
     if (key in obj) {
@@ -1658,17 +1931,19 @@ function _object_spread$4(target) {
     return target;
 }
 var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
-    ButtonIcon["undo"] = "UndoIcon";
-    ButtonIcon["redo"] = "RedoIcon";
-    ButtonIcon["random"] = "RandomIcon";
+    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 UndoIcon = function(param) {
+var Undo = function(param) {
     var color = param.color;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        width: "24px",
-        height: "24px",
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -1687,12 +1962,10 @@ var UndoIcon = function(param) {
         "stroke-linejoin": "round"
     }));
 };
-var RedoIcon = function(param) {
+var Redo = function(param) {
     var color = param.color;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        width: "24px",
-        height: "24px",
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -1711,12 +1984,77 @@ var RedoIcon = function(param) {
         "stroke-linejoin": "round"
     }));
 };
-var RandomIcon = function(param) {
+var Favorite = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        "stroke-width": "1.5",
+        viewBox: "-7 -7 40 40",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }));
+};
+var Up = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M5.30711 15.287C5.4232 15.5673 5.69668 15.75 6.00002 15.75H18C18.3034 15.75 18.5768 15.5673 18.6929 15.287C18.809 15.0068 18.7449 14.6842 18.5304 14.4697L12.5304 8.46967C12.2375 8.17678 11.7626 8.17678 11.4697 8.46967L5.46969 14.4697C5.25519 14.6842 5.19103 15.0068 5.30711 15.287Z",
+        fill: color
+    }));
+};
+var Down = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z",
+        fill: color
+    }));
+};
+var Save = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        "stroke-width": "1.5",
+        viewBox: "-7 -7 40 40",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M8.6 9H15.4C15.7314 9 16 8.73137 16 8.4V3.6C16 3.26863 15.7314 3 15.4 3H8.6C8.26863 3 8 3.26863 8 3.6V8.4C8 8.73137 8.26863 9 8.6 9Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 13.6V21H18V13.6C18 13.2686 17.7314 13 17.4 13H6.6C6.26863 13 6 13.2686 6 13.6Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }));
+};
+var Random = function(param) {
     var color = param.color;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        width: "24px",
-        height: "24px",
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 25 25",
         "stroke-width": "1.5",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -1771,28 +2109,45 @@ var RandomIcon = function(param) {
     }));
 };
 var icons = {
-    UndoIcon: UndoIcon,
-    RedoIcon: RedoIcon,
-    RandomIcon: RandomIcon
+    Undo: Undo,
+    Redo: Redo,
+    Random: Random,
+    Favorite: Favorite,
+    Up: Up,
+    Down: Down,
+    Save: Save
 };
+// const getViewBoxWidth = (width: string) => {
+//   const numericWidth = width.match(/\d+/)?.[0];
+//   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
+// };
 function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, _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, className = param.className, style = param.style;
+    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];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
         className: "IconButton ".concat(className),
         onClick: onClick,
-        padding: [
-            Button.padding.medium
-        ],
+        padding: padding,
+        margin: margin,
+        disabled: disabled,
         style: _object_spread$4({
-            backgroundColor: backgroundColor
+            backgroundColor: backgroundColor,
+            width: width,
+            height: height
         }, style)
     }, /*#__PURE__*/ React__default.createElement(Icon, {
-        color: color
+        width: width,
+        color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
 IconButton.icon = ButtonIcon;
+IconButton.padding = Spacing;
+IconButton.margin = Spacing;
 
 function _define_property$3(obj, key, value) {
     if (key in obj) {
@@ -1837,9 +2192,9 @@ function KeyValueDisplayScreen(param) {
     }, data ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, {
         justifyContent: Box.justifyContent.flexStart,
         padding: [
-            Box.padding.xSmall,
+            Box.padding.small,
             Box.padding.medium,
-            Box.padding.none,
+            Box.padding.xSmall,
             Box.padding.medium
         ],
         className: classnames('KeyValueDisplayScreen', 'uppercase', 'bg-popover', 'rounded-sm'),
@@ -1849,22 +2204,16 @@ function KeyValueDisplayScreen(param) {
             color: "var(--color-text)"
         }
     }, /*#__PURE__*/ React__default.createElement(Label, {
-        className: 'KeyValueDisplayScreen-Item',
-        padding: [
-            Label.padding.xSmall,
-            Label.padding.mediumLarge,
-            Label.padding.none,
-            Label.padding.medium
-        ]
-    }, data === null || data === void 0 ? void 0 : data.key), /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.xSmall,
-            Label.padding.mediumLarge,
-            Label.padding.none,
-            Label.padding.none
-        ],
         className: 'KeyValueDisplayScreen-Item'
-    }, data === null || data === void 0 ? void 0 : data.value))) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null, "Sparkler v1.8.2")), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null, "Antimatter audio"))));
+    }, "".concat(data === null || data === void 0 ? void 0 : data.key, ":")), /*#__PURE__*/ React__default.createElement(Label, {
+        // padding={[
+        //   Label.padding.xSmall,
+        //   Label.padding.mediumLarge,
+        //   Label.padding.none,
+        //   Label.padding.none,
+        // ]}
+        className: 'KeyValueDisplayScreen-Item'
+    }, data === null || data === void 0 ? void 0 : data.value))) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null, "Antimatter Audio")), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null))));
 }
 
 function LinePlot(param) {
@@ -1934,15 +2283,15 @@ function LinePlot(param) {
     })));
 }
 
-var css_248z$1 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
-styleInject(css_248z$1);
+var css_248z$2 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
+styleInject(css_248z$2);
 
-function _array_like_to_array$1(arr, len) {
+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$1(arr) {
+function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$2(obj, key, value) {
@@ -1958,7 +2307,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$1(arr, i) {
+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 = [];
@@ -1982,7 +2331,7 @@ function _iterable_to_array_limit$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$1() {
+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 _object_spread$2(target) {
@@ -2000,20 +2349,20 @@ function _object_spread$2(target) {
     }
     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 _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$1(o, minLen) {
+function _unsupported_iterable_to_array$2(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$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$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(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$1(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$2(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     useEffect(function() {
         //@ts-expect-error
         var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -2042,47 +2391,760 @@ function Oscilloscope(param) {
     }));
 }
 
-var css_248z = "@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";
+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 = ".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);
 
-function _define_property$1(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
+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 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 {
-        obj[key] = value;
+        Promise.resolve(value).then(_next, _throw);
     }
-    return obj;
 }
-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]);
+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);
         });
-    }
-    return target;
+    };
 }
-function ModuleHeader(param) {
-    var title = param.title, subtitle = param.subtitle, activeItem = param.activeItem, className = param.className, style = param.style;
-    var undo = Juce.getNativeFunction('undo');
-    var redo = Juce.getNativeFunction('redo');
-    return /*#__PURE__*/ React__default.createElement(Box, {
-        gap: Box.gap.medium,
-        tag: Box.tag.header,
-        padding: [
-            Box.padding.medium,
-            Box.padding.large
+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 _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 _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, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "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(_)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 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 savePresetFunc = Juce.getNativeFunction('savePreset');
+    var loadPresetFunc = Juce.getNativeFunction('loadPreset');
+    var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
+    var isDirtyFunc = Juce.getNativeFunction('canUndo');
+    var _useState2 = _sliced_to_array$1(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];
+    useEffect(function() {
+        if (!isLocalhost) {
+            var isDirtyListenerId = //@ts-expect-error
+            window.__JUCE__.backend.addEventListener('updateUndoButton', function(event) {
+                setIsDirty(event);
+            });
+            return function cleanup() {
+                //@ts-expect-error
+                window.__JUCE__.backend.removeEventListener(isDirtyListenerId);
+            };
+        } else {
+            return;
+        }
+    }, [
+        window
+    ]);
+    useEffect(function() {
+        var getUndoRedoState = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator$1(function() {
+                var isDirtyState, error;
+                return _ts_generator$1(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                2,
+                                ,
+                                3
+                            ]);
+                            return [
+                                4,
+                                isDirtyFunc()
+                            ];
+                        case 1:
+                            isDirtyState = _state.sent();
+                            setIsDirty(isDirtyState);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 2:
+                            error = _state.sent();
+                            console.log(error);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 3:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function getUndoRedoState() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        getUndoRedoState();
+    });
+    var loadAllPresets = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator$1(function(selectedPreset) {
+            var allPresets, error;
+            return _ts_generator$1(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        return [
+                            4,
+                            getAllPresetsFunc()
+                        ];
+                    case 1:
+                        allPresets = _state.sent();
+                        setPresetList(allPresets);
+                        loadPresetFunc(selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : allPresets[0]);
+                        setSelectedPreset(selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : allPresets[0]);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        error = _state.sent();
+                        console.log(error);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function loadAllPresets(selectedPreset) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var loadPreset = function(value) {
+        setSelectedPreset(value);
+        loadPresetFunc(value);
+    };
+    var loadNextPreset = function(currentValue) {
+        var nextIndex = presetList.indexOf(currentValue) + 1;
+        if (nextIndex < presetList.length) {
+            loadPreset(presetList[nextIndex]);
+        } else {
+            loadPreset(presetList[0]);
+        }
+    };
+    var loadPreviousPreset = function(currentValue) {
+        var prevIndex = presetList.indexOf(currentValue) - 1;
+        if (prevIndex >= 0) {
+            loadPreset(presetList[prevIndex]);
+        } else {
+            loadPreset(presetList[presetList.length - 1]);
+        }
+    };
+    var savePreset = function(name) {
+        var callSavePreset = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator$1(function(name) {
+                var preset, error;
+                return _ts_generator$1(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setIsSaving(true);
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                3,
+                                ,
+                                4
+                            ]);
+                            return [
+                                4,
+                                savePresetFunc(name)
+                            ];
+                        case 2:
+                            preset = _state.sent();
+                            setIsSaving(false);
+                            loadAllPresets(preset);
+                            return [
+                                3,
+                                4
+                            ];
+                        case 3:
+                            error = _state.sent();
+                            console.log(error);
+                            return [
+                                3,
+                                4
+                            ];
+                        case 4:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function callSavePreset(name) {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        callSavePreset(name);
+    };
+    useEffect(function() {
+        loadAllPresets(presetList && presetList[0]);
+    }, []);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        justifyContent: Box.justifyContent.flexStart,
+        padding: [
+            Box.padding.none,
+            Box.padding.medium
+        ],
+        height: "30px",
+        className: "uppercase bg-popover rounded-sm PresetManagerContainer",
+        style: {
+            maxWidth: '325px',
+            backgroundColor: "var(--bg-page)",
+            color: "var(--color-text)"
+        }
+    }, /*#__PURE__*/ React__default.createElement(Listbox, null, /*#__PURE__*/ React__default.createElement(Listbox.Button, {
+        className: "PresetManagerButton"
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "0 0 24px",
+        width: "24px"
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "savePreset",
+        onClick: function(e) {
+            e.preventDefault();
+            selectedPreset && savePreset(selectedPreset);
+        },
+        icon: IconButton.icon.save
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "10",
+        height: "100%",
+        padding: [
+            Box.padding.none,
+            Box.padding.medium,
+            Box.padding.none,
+            Box.padding.small
+        ]
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "PresetManagerButtonLabelOuterContainer",
+        style: {
+            width: 'auto'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "PresetManagerButtonLabelContainer ".concat(isDirty ? 'isDirty' : '')
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        className: 'PresetManagerButtonLabel'
+    }, selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : 'New preset')))), /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "0"
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "previousPreset",
+        width: "20px",
+        icon: IconButton.icon.up,
+        onClick: function(e) {
+            e.preventDefault();
+            selectedPreset && loadPreviousPreset(selectedPreset);
+        }
+    }), /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "nextPreset",
+        width: "20px",
+        icon: IconButton.icon.down,
+        onClick: function(e) {
+            e.preventDefault();
+            selectedPreset && loadNextPreset(selectedPreset);
+        }
+    }))), /*#__PURE__*/ React__default.createElement(Listbox.Options, {
+        anchor: "bottom start",
+        className: 'PresetManagerPanel'
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        height: "100%",
+        justifyContent: Box.justifyContent.flexStart,
+        alignItems: Box.alignItems.flexStart
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        tag: Box.tag.ul,
+        height: "100%",
+        alignItems: Box.alignItems.flexStart,
+        justifyContent: Box.justifyContent.flexStart,
+        flexDirection: Box.flexDirection.column
+    }, presetList.map(function(item) {
+        return /*#__PURE__*/ React__default.createElement(Listbox.Option, {
+            value: item,
+            onClick: function() {
+                loadPreset(item);
+            },
+            className: "PresetManagerListItem ".concat(item === selectedPreset ? 'isSelected' : '')
+        }, /*#__PURE__*/ React__default.createElement(Box, {
+            alignItems: Box.alignItems.flexStart,
+            justifyContent: Box.justifyContent.flexStart,
+            flexDirection: Box.flexDirection.column,
+            padding: [
+                Box.padding.mediumSmall,
+                Box.padding.large
+            ]
+        }, /*#__PURE__*/ React__default.createElement("span", {
+            className: "PresetManagerListItemText"
+        }, item)));
+    }))))));
+}
+
+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$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_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$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(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, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "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(_)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 ModuleHeader(param) {
+    var title = param.title, subtitle = param.subtitle, className = param.className, style = param.style;
+    var _globalState_highlightedItem, _globalState_highlightedItem1;
+    var canUndoFunc = Juce.getNativeFunction('canUndo');
+    var canRedoFunc = Juce.getNativeFunction('canRedo');
+    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 handleUndo = function() {
+        undo();
+    };
+    var handleRedo = function() {
+        redo();
+    };
+    useEffect(function() {
+        if (!isLocalhost) {
+            var undoButtonListenerId = //@ts-expect-error
+            window.__JUCE__.backend.addEventListener('updateUndoButton', function(event) {
+                setCanUndo(event);
+            });
+            var redoButtonListenerId = //@ts-expect-error
+            window.__JUCE__.backend.addEventListener('updateRedoButton', function(event) {
+                setCanRedo(event);
+            });
+            return function cleanup() {
+                //@ts-expect-error
+                window.__JUCE__.backend.removeEventListener(undoButtonListenerId);
+                //@ts-expect-error
+                window.__JUCE__.backend.removeEventListener(redoButtonListenerId);
+            };
+        } else {
+            return;
+        }
+    }, [
+        window
+    ]);
+    useEffect(function() {
+        var getUndoRedoState = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function() {
+                var canUndoState, canRedoState, error;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                3,
+                                ,
+                                4
+                            ]);
+                            return [
+                                4,
+                                canUndoFunc()
+                            ];
+                        case 1:
+                            canUndoState = _state.sent();
+                            return [
+                                4,
+                                canRedoFunc()
+                            ];
+                        case 2:
+                            canRedoState = _state.sent();
+                            setCanUndo(canUndoState);
+                            setCanRedo(canRedoState);
+                            return [
+                                3,
+                                4
+                            ];
+                        case 3:
+                            error = _state.sent();
+                            console.log(error);
+                            return [
+                                3,
+                                4
+                            ];
+                        case 4:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function getUndoRedoState() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        getUndoRedoState();
+    });
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        gap: Box.gap.medium,
+        tag: Box.tag.header,
+        padding: [
+            Box.padding.medium,
+            Box.padding.large
         ],
         className: classnames('ModuleHeader', className),
         style: _object_spread$1({}, style)
@@ -2107,21 +3169,38 @@ function ModuleHeader(param) {
         flex: "0 0 250px"
     }, /*#__PURE__*/ React__default.createElement(KeyValueDisplayScreen, {
         data: {
-            key: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
-            value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value
+            key: globalState === null || globalState === void 0 ? void 0 : (_globalState_highlightedItem = globalState.highlightedItem) === null || _globalState_highlightedItem === void 0 ? void 0 : _globalState_highlightedItem.label,
+            value: globalState === null || globalState === void 0 ? void 0 : (_globalState_highlightedItem1 = globalState.highlightedItem) === null || _globalState_highlightedItem1 === void 0 ? void 0 : _globalState_highlightedItem1.value
         }
     })), /*#__PURE__*/ React__default.createElement(Box, {
+        alignItems: Box.alignItems.flexStart,
+        flex: "0 0 325px"
+    }, /*#__PURE__*/ React__default.createElement(PresetManager, null)), /*#__PURE__*/ React__default.createElement(Box, {
         flex: "0"
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "undo",
+        width: "30px",
+        height: "30px",
         icon: IconButton.icon.undo,
+        padding: [
+            IconButton.padding.none,
+            IconButton.padding.small
+        ],
+        disabled: !canUndo,
         onClick: function() {
-            undo();
+            handleUndo();
         }
     }), /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "redo",
+        width: "30px",
+        height: "30px",
+        padding: [
+            IconButton.padding.none,
+            IconButton.padding.small
+        ],
+        disabled: !canRedo,
         onClick: function() {
-            redo();
+            handleRedo();
         },
         icon: IconButton.icon.redo
     }))));
@@ -2171,89 +3250,5 @@ function ModuleFooter(param) {
     });
 }
 
-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 _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-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(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 _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 _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 _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-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 useObservable() {
-    var _useState = _sliced_to_array(useState([]), 2), observers = _useState[0], setObservers = _useState[1];
-    var subscribe = function(observer) {
-        if (!observers.includes(observer)) {
-            setObservers(_to_consumable_array(observers).concat([
-                observer
-            ]));
-        }
-    };
-    var unsubscribe = function(observer) {
-        setObservers(observers.filter(function(item) {
-            return item !== observer;
-        }));
-    };
-    var fire = function(action) {
-        observers.forEach(function() {
-            return action();
-        });
-    };
-    return {
-        subscribe: subscribe,
-        unsubscribe: unsubscribe,
-        fire: fire
-    };
-}
-
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useObservable, useSlider };
+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 };
 //# sourceMappingURL=index.js.map