@antimatter-audio/antimatter-ui 9.6.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$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$7(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$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+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$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$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$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function Tabs(param) {
     var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Spacing.mediumSmall
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
-    ] : _param_margin, onChange = param.onChange;
-    var _useState = _sliced_to_array$7(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
+    ] : _param_margin, onChange = param.onChange, selectedIndex = param.selectedIndex;
+    var _useState = _sliced_to_array$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$6(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$c(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -217,7 +218,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$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$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+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$c(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -254,27 +255,27 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$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$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function Button(param) {
     var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Spacing.small
     ] : _param_padding, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
-    var _React_useState = _sliced_to_array$6(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    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$c({
+        style: _object_spread$d({
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
             paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
@@ -347,6 +348,193 @@ 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 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$6(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$6() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _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 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$6(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+}
+// 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];
@@ -393,28 +581,39 @@ function _unsupported_iterable_to_array$5(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
-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;
+var useCombobox = function(param) {
+    var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var comboBoxState = Juce.getComboBoxState(id);
     var _useState = _sliced_to_array$5(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
     var _useState1 = _sliced_to_array$5(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var handleChange = function(event) {
-        comboBoxState.setChoiceIndex(event);
-        setValue(event);
+    var 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) {
@@ -628,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({
@@ -655,7 +883,6 @@ function Input(param) {
     ]);
     useEffect(function() {
         setInternalValue(value);
-        // console.log(value, 'VALUUUUUU');
         var isValid = validate({
             value: value,
             type: type,
@@ -854,7 +1081,7 @@ function _unsupported_iterable_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,
@@ -877,17 +1104,34 @@ var useSlider = function(param) {
     var _useState2 = _sliced_to_array$3(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
-    var randomValueSetCounter = useRef(null);
+    // const randomValueSetCounter = useRef<number>(null);
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, setHighlightedItem = _useGlobalContext.setHighlightedItem;
     // Set the initial state
+    //@ts-expect-error
     useEffect(function() {
         var sliderState = Juce.getSliderState(id);
-        if (isLocalhost) {
+        var setRandom = function() {
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3;
+            var randomValue = randomizeValue(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start, sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
+            var newValue = (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.start) === 0 && (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties3 = sliderState.properties) === null || _sliderState_properties3 === void 0 ? void 0 : _sliderState_properties3.end) === 1 ? randomValue : scaledToNormalised({
+                scaledValue: randomValue,
+                properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
+            });
+            setNormalisedState(newValue);
+        };
+        if (!isLocalhost) {
+            setNormalisedValue(normalisedValue);
+            setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
+            if (isRandomizable) {
+                useRandom === null || useRandom === void 0 ? void 0 : useRandom.subscribe(setRandom, id);
+            }
+            return function() {
+                useRandom === null || useRandom === void 0 ? void 0 : useRandom.unsubscribe(setRandom, id);
+            };
+        } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
             setProperties(mockProperties);
             setNormalisedValue(mockInitialNormalisedValue);
-        } else {
-            setNormalisedValue(normalisedValue);
-            setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
         }
     }, []);
     // Update the local state when the ID changes
@@ -898,6 +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);
@@ -907,31 +1152,10 @@ var useSlider = function(param) {
             var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
                 return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
             });
-            //@ts-expect-error
-            var randomizeListenerId = window.__JUCE__.backend.addEventListener('triggerRandom', function(event) {
-                var lastCharInIdAsNumber = parseInt(id.slice(-1), 10);
-                var selectedBand = event[1] + 1;
-                var idIsNotBandProperty = isNaN(lastCharInIdAsNumber);
-                var idBelongsToSelectedBand = isNaN(lastCharInIdAsNumber) === false && lastCharInIdAsNumber === selectedBand;
-                if (isRandomizable && event[0] !== randomValueSetCounter.current && (idIsNotBandProperty ? true : idBelongsToSelectedBand)) {
-                    var _sliderState_properties, _sliderState_properties1, _sliderState_properties2, _sliderState_properties3;
-                    var randomValue = randomizeValue(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start, sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
-                    var newValue = (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.start) === 0 && (sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties3 = sliderState.properties) === null || _sliderState_properties3 === void 0 ? void 0 : _sliderState_properties3.end) === 1 ? randomValue : scaledToNormalised({
-                        scaledValue: randomValue,
-                        properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
-                    });
-                    setNormalisedState(newValue);
-                    randomValueSetCounter.current = event;
-                }
-            });
-            return function cleanup() {
+            return function() {
                 sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.removeListener(valueListenerId);
                 sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
-                //@ts-expect-error
-                window.__JUCE__.backend.removeEventListener(randomizeListenerId, id);
             };
-        } else {
-            return;
         }
     }, [
         window
@@ -940,9 +1164,16 @@ var useSlider = function(param) {
     var updateLocalState = function(sliderState) {
         var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
         var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
+        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
         setNormalisedValue(parseFloat(normalisedValueFromState.toFixed(2)));
-        setScaledValue(parseFloat(scaledValueFromState.toFixed(2)));
+        setScaledValue(scaledValue);
         onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
+        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+            setHighlightedItem({
+                label: label,
+                value: scaledValue
+            });
+        }
     };
     // Update JUCE state
     var setNormalisedState = function(newValue) {
@@ -963,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
@@ -972,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();
@@ -996,6 +1259,7 @@ var useSlider = function(param) {
         setScaledState: setScaledState,
         // onChangeStarted,
         // onChangeCommitted,
+        onMouseEnter: onMouseEnter,
         bindBarSliderDrag: bindBarSliderDrag,
         bindDrag: bindDrag,
         normalisedValue: normalisedValue,
@@ -1004,8 +1268,31 @@ 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$a(obj, key, value) {
     if (key in obj) {
@@ -1035,79 +1322,54 @@ function _object_spread$a(target) {
     }
     return target;
 }
-function ownKeys$1(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$1(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? SliderPolarity.linear : _param_polarity, className = param.className, id = param.id, onMouseEnter = param.onMouseEnter, onChange = param.onChange, _param_rotationBehavior = param.rotationBehavior, rotationBehavior = _param_rotationBehavior === void 0 ? SliderRotationBehavior.rotateIndicator : _param_rotationBehavior, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
-    mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
-        start: 20.0,
-        end: 15000.0,
-        interval: 0.1,
-        skew: 0.7
-    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
-    var _useSlider = useSlider({
-        id: id,
-        mockProperties: mockProperties,
-        mockInitialNormalisedValue: mockInitialNormalisedValue,
-        onChange: onChange,
-        isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center'
-        }
-    }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$a({
-        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
-    }, bindDrag()), {
-        onMouseEnter: function() {
-            return onMouseEnter && onMouseEnter(id, scaledValue);
-        },
-        style: _object_spread$a({
-            touchAction: 'none'
-        }, style)
-    }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Inner'),
-        style: _object_spread$a({
-            rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === SliderPolarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
-        }, getTransformString({
-            sliderType: SliderType.rotary,
-            polarity: polarity,
-            normalisedValue: normalisedValue,
-            scaledValue: scaledValue
-        }), getPosition({
-            sliderType: SliderType.rotary,
-            polarity: polarity
-        }))
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Indicator'),
+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({
-            backgroundColor: color
+            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$9(obj, key, value) {
     if (key in obj) {
@@ -1160,31 +1422,8 @@ 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$8(obj, key, value) {
     if (key in obj) {
@@ -1214,54 +1453,79 @@ function _object_spread$8(target) {
     }
     return target;
 }
-var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
-    BoxDisplay["flex"] = "flex";
-    BoxDisplay["block"] = "block";
-    return BoxDisplay;
-}(BoxDisplay || {});
-function Box(param) {
-    var className = param.className, style = param.style, children = param.children, flex = param.flex, key = param.key, _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,
+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({
-            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 : ''
+            touchAction: 'none'
         }, style)
-    }, children);
+    }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('RotarySlider-Inner'),
+        style: _object_spread$8({
+            rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === SliderPolarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
+        }, getTransformString({
+            sliderType: SliderType.rotary,
+            polarity: polarity,
+            normalisedValue: normalisedValue,
+            scaledValue: scaledValue
+        }), getPosition({
+            sliderType: SliderType.rotary,
+            polarity: polarity
+        }))
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('RotarySlider-Indicator'),
+        style: _object_spread$8({
+            backgroundColor: color
+        }, style)
+    })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.mediumSmall
+        ],
+        fontSize: Label.fontSize.small,
+        value: label
+    }));
 }
-// 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$7(obj, key, value) {
     if (key in obj) {
@@ -1311,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, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, className = param.className, id = param.id, onMouseEnter = param.onMouseEnter, onChange = param.onChange, style = param.style, color = param.color, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+    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,
@@ -1320,12 +1584,13 @@ function Slider(param) {
     } : _param_mockProperties;
     var _useSlider = useSlider({
         id: id,
+        label: label,
         mockProperties: mockProperties,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         sliderOrientation: sliderOrientation,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
+    }), 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,
@@ -1335,9 +1600,7 @@ function Slider(param) {
     }), /*#__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);
-        },
+        onMouseEnter: onMouseEnter,
         style: _object_spread$7({
             touchAction: 'none',
             backgroundColor: 'var(--bg-input)',
@@ -1626,7 +1889,7 @@ function IndicatorLight(param) {
     }) : null);
 }
 
-var css_248z$2 = ".IconButton {\n  height: 28px;\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) {
@@ -1776,7 +2039,7 @@ var icons = {
     RandomIcon: RandomIcon
 };
 function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, className = param.className, style = param.style;
+    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, className = param.className, style = param.style;
     var Icon = icons[icon];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
@@ -1785,11 +2048,12 @@ function IconButton(param) {
         padding: [
             Button.padding.medium
         ],
+        disabled: disabled,
         style: _object_spread$4({
             backgroundColor: backgroundColor
         }, style)
     }, /*#__PURE__*/ React__default.createElement(Icon, {
-        color: color
+        color: disabled ? 'var(--color-gray-400)' : color
     }));
 }
 IconButton.icon = ButtonIcon;
@@ -1856,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,
@@ -1864,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) {
@@ -2045,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, {
@@ -2058,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] : {};
@@ -2073,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,
@@ -2107,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
     }))));
@@ -2171,89 +2693,5 @@ function ModuleFooter(param) {
     });
 }
 
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function useObservable() {
-    var _useState = _sliced_to_array(useState([]), 2), observers = _useState[0], setObservers = _useState[1];
-    var subscribe = function(observer) {
-        if (!observers.includes(observer)) {
-            setObservers(_to_consumable_array(observers).concat([
-                observer
-            ]));
-        }
-    };
-    var unsubscribe = function(observer) {
-        setObservers(observers.filter(function(item) {
-            return item !== observer;
-        }));
-    };
-    var fire = function(action) {
-        observers.forEach(function() {
-            return action();
-        });
-    };
-    return {
-        subscribe: subscribe,
-        unsubscribe: unsubscribe,
-        fire: fire
-    };
-}
-
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useObservable, useSlider };
+export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, getPosition, getTransformString, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
 //# sourceMappingURL=index.js.map