@antimatter-audio/antimatter-ui 9.5.0 → 10.0.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';
@@ -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";
+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  &: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);
 
-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 _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 = [];
@@ -119,27 +119,27 @@ 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 _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 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$6(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
+    ] : _param_margin, onChange = param.onChange, selectedIndex = param.selectedIndex;
+    var _useState = _sliced_to_array$8(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);
         }
@@ -196,15 +197,15 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$b(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$b(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -241,10 +242,10 @@ 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 _object_spread$b(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -254,27 +255,27 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$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$5(o, minLen) {
+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 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$5(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$7(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
@@ -331,7 +332,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$b({
+        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], ")"),
@@ -347,15 +348,68 @@ 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);
 
-function _array_like_to_array$4(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$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$4(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$4(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$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -379,42 +433,187 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+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$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 _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$4(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$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$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(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$6(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$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$5(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 = [];
+    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$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 _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$5(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+}
+var 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$4(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$4(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var handleChange = function(event) {
-        comboBoxState.setChoiceIndex(event);
-        setValue(event);
+    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 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 +623,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 +664,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) {
@@ -476,19 +705,22 @@ var validate = function(param) {
         isValid: !errorMessages.length && !isIncomplete
     };
 };
+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);
 
-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 _define_property$a(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -501,7 +733,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-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 = [];
@@ -525,10 +757,10 @@ 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 _object_spread$a(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -538,21 +770,21 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _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);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -564,9 +796,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$3(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
-    var _useState1 = _sliced_to_array$3(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
-    var _useState2 = _sliced_to_array$3(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
+    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 valueRef = useRef(null);
     var timer, timeoutVal = 2000;
     // (inputValue === '' || /^-?\d+$/.test(inputValue)
@@ -625,7 +857,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({
@@ -652,7 +883,6 @@ function Input(param) {
     ]);
     useEffect(function() {
         setInternalValue(value);
-        // console.log(value, 'VALUUUUUU');
         var isValid = validate({
             value: value,
             type: type,
@@ -672,7 +902,7 @@ function Input(param) {
         id: id,
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$a({
+        style: _object_spread$b({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
             color: hasError ? 'red' : textColor,
@@ -802,15 +1032,15 @@ var getPosition = 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 = [];
@@ -834,29 +1064,29 @@ 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 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,
         skew: 0.7
-    } : _param_mockProperties, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_sliderOrientation = param.sliderOrientation; _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation; var onChange = param.onChange;
+    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_sliderOrientation = param.sliderOrientation; _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation; var onChange = param.onChange;
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
     var isLocalhost = window.location.hostname === 'localhost';
@@ -869,21 +1099,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$2(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
-    var _useState1 = _sliced_to_array$2(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
-    var _useState2 = _sliced_to_array$2(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
+    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 scaledValueRef = useRef(null);
     var normalisedValueRef = 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
@@ -894,6 +1142,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);
@@ -903,21 +1152,28 @@ 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);
             });
-            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);
             };
-        } else {
-            return;
         }
-    });
+    }, [
+        window
+    ]);
     // Update the local state from JUCE
     var updateLocalState = function(sliderState) {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
         var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
+        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
         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) {
@@ -938,7 +1194,13 @@ var useSlider = function(param) {
         }
     };
     var bindDrag = useDrag(function(param) {
-        var down = param.down, delta = param.delta;
+        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
@@ -947,22 +1209,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();
@@ -971,6 +1259,7 @@ var useSlider = function(param) {
         setScaledState: setScaledState,
         // onChangeStarted,
         // onChangeCommitted,
+        onMouseEnter: onMouseEnter,
         bindBarSliderDrag: bindBarSliderDrag,
         bindDrag: bindDrag,
         normalisedValue: normalisedValue,
@@ -979,10 +1268,33 @@ 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);
+var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
+    JustifyContent["flexStart"] = "flex-start";
+    JustifyContent["flexEnd"] = "flex-end";
+    JustifyContent["center"] = "center";
+    JustifyContent["spaceBetween"] = "space-between";
+    JustifyContent["spaceAround"] = "space-around";
+    JustifyContent["spaceEvenly"] = "space-evenly";
+    return JustifyContent;
+}({});
+var AlignItems = /*#__PURE__*/ function(AlignItems) {
+    AlignItems["flexStart"] = "flex-start";
+    AlignItems["flexEnd"] = "flex-end";
+    AlignItems["center"] = "center";
+    AlignItems["stretch"] = "stretch";
+    AlignItems["baseline"] = "baseline";
+    return AlignItems;
+}({});
+var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
+    LayoutTags["header"] = "header";
+    LayoutTags["main"] = "main";
+    LayoutTags["section"] = "section";
+    LayoutTags["div"] = "div";
+    LayoutTags["footer"] = "footer";
+    return LayoutTags;
+}({});
 
-function _define_property$9(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -995,7 +1307,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(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);
@@ -1005,85 +1317,61 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(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));
+            _define_property$a(target, key, 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_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
-    }), 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$9({
-        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
-    }, bindDrag()), {
-        onMouseEnter: function() {
-            return onMouseEnter && onMouseEnter(id, scaledValue);
-        },
-        style: _object_spread$9({
-            touchAction: 'none'
-        }, style)
-    }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Inner'),
-        style: _object_spread$9({
-            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$9({
-            backgroundColor: color
+var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
+    BoxDisplay["flex"] = "flex";
+    BoxDisplay["block"] = "block";
+    return BoxDisplay;
+}(BoxDisplay || {});
+function Box(param) {
+    var className = param.className, style = param.style, children = param.children, flex = param.flex, key = param.key, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none,
+        Spacing.none,
+        Spacing.none,
+        Spacing.none
+    ] : _param_padding, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag;
+    var Tag = tag;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React__default.createElement(Tag, {
+        // id="globalValues"
+        key: key,
+        className: className,
+        style: _object_spread$a({
+            flexWrap: flexWrap,
+            display: display,
+            gap: "var(--gap-".concat(gap, ")"),
+            width: '100%',
+            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], ")"),
+            border: border ? '2px solid #999' : '',
+            maxWidth: width,
+            height: height,
+            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
+            justifyContent: "".concat(justifyContent),
+            alignItems: "".concat(alignItems),
+            flex: flex ? flex : ''
         }, style)
-    })) : ''));
+    }, children);
 }
-RotarySlider.sliderPolarity = SliderPolarity;
+// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
+Box.display = BoxDisplay;
+Box.alignItems = AlignItems;
+Box.justifyContent = JustifyContent;
+Box.gap = Spacing;
+Box.flexDirection = FlexDirection;
+Box.width = Width;
+Box.height = Height;
+Box.padding = Spacing;
+Box.flexWrap = FlexWrap;
+Box.tag = LayoutTags;
 
-function _define_property$8(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1096,7 +1384,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1106,7 +1394,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -1119,7 +1407,7 @@ function Label(param) {
     return /*#__PURE__*/ React.createElement("label", {
         id: id,
         htmlFor: htmlFor,
-        style: _object_spread$8({
+        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], ")"),
@@ -1134,33 +1422,10 @@ function Label(param) {
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
-    JustifyContent["flexStart"] = "flex-start";
-    JustifyContent["flexEnd"] = "flex-end";
-    JustifyContent["center"] = "center";
-    JustifyContent["spaceBetween"] = "space-between";
-    JustifyContent["spaceAround"] = "space-around";
-    JustifyContent["spaceEvenly"] = "space-evenly";
-    return JustifyContent;
-}({});
-var AlignItems = /*#__PURE__*/ function(AlignItems) {
-    AlignItems["flexStart"] = "flex-start";
-    AlignItems["flexEnd"] = "flex-end";
-    AlignItems["center"] = "center";
-    AlignItems["stretch"] = "stretch";
-    AlignItems["baseline"] = "baseline";
-    return AlignItems;
-}({});
-var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
-    LayoutTags["header"] = "header";
-    LayoutTags["main"] = "main";
-    LayoutTags["section"] = "section";
-    LayoutTags["div"] = "div";
-    LayoutTags["footer"] = "footer";
-    return LayoutTags;
-}({});
+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$7(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1173,7 +1438,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1183,60 +1448,86 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
 }
-var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
-    BoxDisplay["flex"] = "flex";
-    BoxDisplay["block"] = "block";
-    return BoxDisplay;
-}(BoxDisplay || {});
-function Box(param) {
-    var className = param.className, style = param.style, children = param.children, flex = param.flex, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none,
-        Spacing.none,
-        Spacing.none,
-        Spacing.none
-    ] : _param_padding, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag;
-    var Tag = tag;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, {
-        // id="globalValues"
-        className: className,
-        style: _object_spread$7({
-            flexWrap: flexWrap,
-            display: display,
-            gap: "var(--gap-".concat(gap, ")"),
-            width: '100%',
-            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], ")"),
-            border: border ? '2px solid #999' : '',
-            maxWidth: width,
-            height: height,
-            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
-            justifyContent: "".concat(justifyContent),
-            alignItems: "".concat(alignItems),
-            flex: flex ? flex : ''
+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, 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_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,
+        onChange: onChange,
+        isRandomizable: isRandomizable
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column
+    }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('RotarySlider-center-marker')
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$8({
+        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
+    }, 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)
-    }, children);
+    })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.mediumSmall
+        ],
+        fontSize: Label.fontSize.small,
+        value: label
+    }));
 }
-// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
-Box.display = BoxDisplay;
-Box.alignItems = AlignItems;
-Box.justifyContent = JustifyContent;
-Box.gap = Spacing;
-Box.flexDirection = FlexDirection;
-Box.width = Width;
-Box.height = Height;
-Box.padding = Spacing;
-Box.flexWrap = FlexWrap;
-Box.tag = LayoutTags;
+RotarySlider.sliderPolarity = SliderPolarity;
 
-function _define_property$6(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1249,7 +1540,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$6(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1259,7 +1550,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -1284,7 +1575,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 function Slider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? SliderPolarity.linear : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation, 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
+    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,
@@ -1293,24 +1584,24 @@ function Slider(param) {
     } : _param_mockProperties;
     var _useSlider = useSlider({
         id: id,
+        label: label,
         mockProperties: mockProperties,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         sliderOrientation: sliderOrientation,
-        onChange: onChange
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
+        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$6({
+    }), /*#__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$6({
+        onMouseEnter: onMouseEnter,
+        style: _object_spread$7({
             touchAction: 'none',
             backgroundColor: 'var(--bg-input)',
             minWidth: sliderOrientation === SliderOrientation.horizontal ? '100px' : '20px',
@@ -1319,7 +1610,7 @@ function Slider(param) {
     }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-input')}
-        style: _object_spread$6(_object_spread_props(_object_spread$6({
+        style: _object_spread$7(_object_spread_props(_object_spread$7({
             height: '100%',
             width: '100%',
             position: 'absolute',
@@ -1375,7 +1666,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$5(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1388,7 +1679,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$5(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1398,7 +1689,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
@@ -1411,7 +1702,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$5({
+        style: _object_spread$6({
             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], ")"),
@@ -1463,15 +1754,15 @@ var Matrix = function(param) {
     }));
 };
 
-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 _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 = [];
@@ -1495,26 +1786,26 @@ 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 _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);
 }
 // 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$1(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$2(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
     // Set the initial state
     useEffect(function() {
         if (!isLocalhost) {
@@ -1548,7 +1839,7 @@ var useIndicator = function(param) {
     };
 };
 
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1561,7 +1852,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$4(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1571,7 +1862,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -1588,7 +1879,7 @@ function IndicatorLight(param) {
     }, /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: classnames('IndicatorLight', 'bg-input', className),
-        style: _object_spread$4({
+        style: _object_spread$5({
             width: '12px',
             height: '12px',
             background: isActive ? color : ''
@@ -1598,12 +1889,41 @@ function IndicatorLight(param) {
     }) : null);
 }
 
-var css_248z$2 = ".IconButton {\n  height: 28px;\n  background: var(--bg-page);\n}\n\n.IconButton:hover {\n  filter: brightness(80%);\n}\n";
+var css_248z$2 = ".IconButton {\n  height: 28px;\n}\n\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
 styleInject(css_248z$2);
 
+function _define_property$4(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$4(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$4(target, key, source[key]);
+        });
+    }
+    return target;
+}
 var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
     ButtonIcon["undo"] = "UndoIcon";
     ButtonIcon["redo"] = "RedoIcon";
+    ButtonIcon["random"] = "RandomIcon";
     return ButtonIcon;
 }(ButtonIcon || {});
 var UndoIcon = function(param) {
@@ -1654,12 +1974,72 @@ var RedoIcon = function(param) {
         "stroke-linejoin": "round"
     }));
 };
+var RandomIcon = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: "24px",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M11.7 1.1732C11.8856 1.06603 12.1144 1.06603 12.3 1.17321L21.2263 6.3268C21.4119 6.43397 21.5263 6.63205 21.5263 6.84641V17.1536C21.5263 17.3679 21.4119 17.566 21.2263 17.6732L12.3 22.8268C12.1144 22.934 11.8856 22.934 11.7 22.8268L2.77372 17.6732C2.58808 17.566 2.47372 17.3679 2.47372 17.1536V6.84641C2.47372 6.63205 2.58808 6.43397 2.77372 6.32679L11.7 1.1732Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M17 15L7 15L12 7L17 15Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 6.5L12 7",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 6.5L7 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 6.5L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 6.5L12 6.99995L12 1",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 17.5L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 17.5L7 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M7 15L12 23L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }));
+};
 var icons = {
     UndoIcon: UndoIcon,
-    RedoIcon: RedoIcon
+    RedoIcon: RedoIcon,
+    RandomIcon: RandomIcon
 };
 function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, 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, className = param.className, style = param.style;
     var Icon = icons[icon];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
@@ -1668,9 +2048,12 @@ function IconButton(param) {
         padding: [
             Button.padding.medium
         ],
-        style: style
+        disabled: disabled,
+        style: _object_spread$4({
+            backgroundColor: backgroundColor
+        }, style)
     }, /*#__PURE__*/ React__default.createElement(Icon, {
-        color: "var(--color-text)"
+        color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
 IconButton.icon = ButtonIcon;
@@ -1737,7 +2120,7 @@ function KeyValueDisplayScreen(param) {
             Label.padding.none,
             Label.padding.medium
         ]
-    }, data === null || data === void 0 ? void 0 : data.key), /*#__PURE__*/ React__default.createElement(Label, {
+    }, "".concat(data === null || data === void 0 ? void 0 : data.key, ":")), /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
             Label.padding.xSmall,
             Label.padding.mediumLarge,
@@ -1745,7 +2128,7 @@ function KeyValueDisplayScreen(param) {
             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"))));
+    }, 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) {
@@ -1818,12 +2201,12 @@ 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);
 
-function _array_like_to_array(arr, len) {
+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(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$2(obj, key, value) {
@@ -1839,7 +2222,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit(arr, i) {
+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 = [];
@@ -1863,7 +2246,7 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest() {
+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_spread$2(target) {
@@ -1881,20 +2264,20 @@ function _object_spread$2(target) {
     }
     return target;
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+function _sliced_to_array$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(o, minLen) {
+function _unsupported_iterable_to_array$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$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(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(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(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$1(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     useEffect(function() {
         //@ts-expect-error
         var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -1926,6 +2309,43 @@ 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";
 styleInject(css_248z);
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
 function _define_property$1(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1939,6 +2359,33 @@ function _define_property$1(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] : {};
@@ -1954,10 +2401,202 @@ function _object_spread$1(target) {
     }
     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, activeItem = param.activeItem, className = param.className, style = param.style;
+    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,
@@ -1988,21 +2627,23 @@ 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, {
         flex: "0"
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "undo",
         icon: IconButton.icon.undo,
+        disabled: !canUndo,
         onClick: function() {
-            undo();
+            handleUndo();
         }
     }), /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "redo",
+        disabled: !canRedo,
         onClick: function() {
-            redo();
+            handleRedo();
         },
         icon: IconButton.icon.redo
     }))));
@@ -2052,5 +2693,5 @@ function ModuleFooter(param) {
     });
 }
 
-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, scaledToNormalised as scaledTonormalised, 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