@antimatter-audio/antimatter-ui 10.12.0 → 10.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import React__default, { useEffect, useRef, useReducer, useCallback, createConte
3
3
  import classnames from 'classnames';
4
4
  import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
5
5
  import * as Juce from 'juce-framework-frontend';
6
- import { useDrag } from '@use-gesture/react';
6
+ import { useDrag, useGesture } from '@use-gesture/react';
7
7
  import * as d3 from 'd3';
8
8
 
9
9
  function styleInject(css, ref) {
@@ -33,7 +33,7 @@ function styleInject(css, ref) {
33
33
  }
34
34
  }
35
35
 
36
- var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n --color-brand: #bb68d9;\n --color-brand-600: #932eb8;\n --color-brand-400: #d199e6;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n --color-gray-900: #09090a;\n\n --color-VFDBlue-100: #0d3814;\n --color-VFDBlue-200: #234e4a;\n --color-VFDBlue-300: #128073;\n --color-VFDBlue-400: #138c6e;\n --color-VFDBlue-500: #1abe95;\n --color-VFDBlue-600: #23d8a4;\n --color-VFDBlue-700: #4aeea4;\n --color-VFDBlue-1000: #35edb4;\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-page: #1e1d21;\n --bg-section: #1e1d21;\n --bg-popover: #09090a;\n --bg-highlighted: #838091;\n --bg-muted: #595763;\n --bg-selected: #2e2c33;\n --bg-input: #1e1d21;\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xs: 0.625rem;\n --text-sm: 0.75rem;\n --text-ms: 0.813rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n outline: none;\n appearance: textfield;\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
36
+ var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n --color-brand: #bb68d9;\n --color-brand-900: #443342;\n --color-brand-700: #932eb8;\n --color-brand-600: #826993;\n --color-brand-400: #d199e6;\n --color-brand-300: #f3d4f4;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n --color-gray-900: #09090a;\n\n --color-VFDBlue-100: #0d3814;\n --color-VFDBlue-200: #234e4a;\n --color-VFDBlue-300: #128073;\n --color-VFDBlue-400: #138c6e;\n --color-VFDBlue-500: #1abe95;\n --color-VFDBlue-600: #23d8a4;\n --color-VFDBlue-700: #4aeea4;\n --color-VFDBlue-1000: #35edb4;\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-page: #1e1d21;\n --bg-section: #1e1d21;\n --bg-popover: #09090a;\n --bg-highlighted: #838091;\n --bg-muted: #595763;\n --bg-selected: #2e2c33;\n --bg-input: #1e1d21;\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xs: 0.625rem;\n --text-sm: 0.75rem;\n --text-ms: 0.813rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n outline: none;\n appearance: textfield;\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
37
37
  styleInject(css_248z$b);
38
38
 
39
39
  var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -159,12 +159,12 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
159
159
  return ButtonType;
160
160
  }({});
161
161
 
162
- function _array_like_to_array$e(arr, len) {
162
+ function _array_like_to_array$g(arr, len) {
163
163
  if (len == null || len > arr.length) len = arr.length;
164
164
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
165
165
  return arr2;
166
166
  }
167
- function _array_with_holes$d(arr) {
167
+ function _array_with_holes$f(arr) {
168
168
  if (Array.isArray(arr)) return arr;
169
169
  }
170
170
  function _define_property$k(obj, key, value) {
@@ -180,7 +180,7 @@ function _define_property$k(obj, key, value) {
180
180
  }
181
181
  return obj;
182
182
  }
183
- function _iterable_to_array_limit$d(arr, i) {
183
+ function _iterable_to_array_limit$f(arr, i) {
184
184
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
185
185
  if (_i == null) return;
186
186
  var _arr = [];
@@ -204,7 +204,7 @@ function _iterable_to_array_limit$d(arr, i) {
204
204
  }
205
205
  return _arr;
206
206
  }
207
- function _non_iterable_rest$d() {
207
+ function _non_iterable_rest$f() {
208
208
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
209
209
  }
210
210
  function _object_spread$k(target) {
@@ -222,16 +222,16 @@ function _object_spread$k(target) {
222
222
  }
223
223
  return target;
224
224
  }
225
- function _sliced_to_array$d(arr, i) {
226
- return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
225
+ function _sliced_to_array$f(arr, i) {
226
+ return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
227
227
  }
228
- function _unsupported_iterable_to_array$e(o, minLen) {
228
+ function _unsupported_iterable_to_array$g(o, minLen) {
229
229
  if (!o) return;
230
- if (typeof o === "string") return _array_like_to_array$e(o, minLen);
230
+ if (typeof o === "string") return _array_like_to_array$g(o, minLen);
231
231
  var n = Object.prototype.toString.call(o).slice(8, -1);
232
232
  if (n === "Object" && o.constructor) n = o.constructor.name;
233
233
  if (n === "Map" || n === "Set") return Array.from(n);
234
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
234
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
235
235
  }
236
236
  function Button(param) {
237
237
  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 ? [
@@ -239,7 +239,7 @@ function Button(param) {
239
239
  ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
240
240
  Spacing.none
241
241
  ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
242
- var _React_useState = _sliced_to_array$d(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
242
+ var _React_useState = _sliced_to_array$f(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
243
243
  var buttonState = Juce.getToggleState(id);
244
244
  var isLocalhost = window.location.hostname === 'localhost';
245
245
  // Update the local state when the ID changes
@@ -357,13 +357,13 @@ function useObservable(param) {
357
357
  };
358
358
  }
359
359
 
360
- function _array_like_to_array$d(arr, len) {
360
+ function _array_like_to_array$f(arr, len) {
361
361
  if (len == null || len > arr.length) len = arr.length;
362
362
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
363
363
  return arr2;
364
364
  }
365
365
  function _array_without_holes$1(arr) {
366
- if (Array.isArray(arr)) return _array_like_to_array$d(arr);
366
+ if (Array.isArray(arr)) return _array_like_to_array$f(arr);
367
367
  }
368
368
  function _iterable_to_array$1(iter) {
369
369
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -372,15 +372,15 @@ function _non_iterable_spread$1() {
372
372
  throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
373
373
  }
374
374
  function _to_consumable_array$1(arr) {
375
- return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$d(arr) || _non_iterable_spread$1();
375
+ return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$f(arr) || _non_iterable_spread$1();
376
376
  }
377
- function _unsupported_iterable_to_array$d(o, minLen) {
377
+ function _unsupported_iterable_to_array$f(o, minLen) {
378
378
  if (!o) return;
379
- if (typeof o === "string") return _array_like_to_array$d(o, minLen);
379
+ if (typeof o === "string") return _array_like_to_array$f(o, minLen);
380
380
  var n = Object.prototype.toString.call(o).slice(8, -1);
381
381
  if (n === "Object" && o.constructor) n = o.constructor.name;
382
382
  if (n === "Map" || n === "Set") return Array.from(n);
383
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
383
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
384
384
  }
385
385
  // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
386
386
  // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -496,12 +496,12 @@ var randomizeValue = function(min, max) {
496
496
  return Math.random() * (max - min) + min;
497
497
  };
498
498
 
499
- function _array_like_to_array$c(arr, len) {
499
+ function _array_like_to_array$e(arr, len) {
500
500
  if (len == null || len > arr.length) len = arr.length;
501
501
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
502
502
  return arr2;
503
503
  }
504
- function _array_with_holes$c(arr) {
504
+ function _array_with_holes$e(arr) {
505
505
  if (Array.isArray(arr)) return arr;
506
506
  }
507
507
  function _define_property$j(obj, key, value) {
@@ -517,7 +517,7 @@ function _define_property$j(obj, key, value) {
517
517
  }
518
518
  return obj;
519
519
  }
520
- function _iterable_to_array_limit$c(arr, i) {
520
+ function _iterable_to_array_limit$e(arr, i) {
521
521
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
522
522
  if (_i == null) return;
523
523
  var _arr = [];
@@ -541,7 +541,7 @@ function _iterable_to_array_limit$c(arr, i) {
541
541
  }
542
542
  return _arr;
543
543
  }
544
- function _non_iterable_rest$c() {
544
+ function _non_iterable_rest$e() {
545
545
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
546
546
  }
547
547
  function _object_spread$j(target) {
@@ -578,16 +578,16 @@ function _object_spread_props$4(target, source) {
578
578
  }
579
579
  return target;
580
580
  }
581
- function _sliced_to_array$c(arr, i) {
582
- return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
581
+ function _sliced_to_array$e(arr, i) {
582
+ return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
583
583
  }
584
- function _unsupported_iterable_to_array$c(o, minLen) {
584
+ function _unsupported_iterable_to_array$e(o, minLen) {
585
585
  if (!o) return;
586
- if (typeof o === "string") return _array_like_to_array$c(o, minLen);
586
+ if (typeof o === "string") return _array_like_to_array$e(o, minLen);
587
587
  var n = Object.prototype.toString.call(o).slice(8, -1);
588
588
  if (n === "Object" && o.constructor) n = o.constructor.name;
589
589
  if (n === "Map" || n === "Set") return Array.from(n);
590
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
590
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
591
591
  }
592
592
  // Initial state
593
593
  var defaultGlobalStateValue = {
@@ -672,7 +672,7 @@ function useGlobalContext(selector) {
672
672
  // Context provider
673
673
  function GlobalContextProvider(param) {
674
674
  var children = param.children;
675
- var _useReducer = _sliced_to_array$c(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
675
+ var _useReducer = _sliced_to_array$e(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
676
676
  var highlightedItemChanged = useCallback(function(highlightedItem) {
677
677
  dispatch({
678
678
  type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -780,15 +780,15 @@ function GlobalContextProvider(param) {
780
780
  }, children);
781
781
  }
782
782
 
783
- function _array_like_to_array$b(arr, len) {
783
+ function _array_like_to_array$d(arr, len) {
784
784
  if (len == null || len > arr.length) len = arr.length;
785
785
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
786
786
  return arr2;
787
787
  }
788
- function _array_with_holes$b(arr) {
788
+ function _array_with_holes$d(arr) {
789
789
  if (Array.isArray(arr)) return arr;
790
790
  }
791
- function _iterable_to_array_limit$b(arr, i) {
791
+ function _iterable_to_array_limit$d(arr, i) {
792
792
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
793
793
  if (_i == null) return;
794
794
  var _arr = [];
@@ -812,26 +812,26 @@ function _iterable_to_array_limit$b(arr, i) {
812
812
  }
813
813
  return _arr;
814
814
  }
815
- function _non_iterable_rest$b() {
815
+ function _non_iterable_rest$d() {
816
816
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
817
817
  }
818
- function _sliced_to_array$b(arr, i) {
819
- return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
818
+ function _sliced_to_array$d(arr, i) {
819
+ return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
820
820
  }
821
- function _unsupported_iterable_to_array$b(o, minLen) {
821
+ function _unsupported_iterable_to_array$d(o, minLen) {
822
822
  if (!o) return;
823
- if (typeof o === "string") return _array_like_to_array$b(o, minLen);
823
+ if (typeof o === "string") return _array_like_to_array$d(o, minLen);
824
824
  var n = Object.prototype.toString.call(o).slice(8, -1);
825
825
  if (n === "Object" && o.constructor) n = o.constructor.name;
826
826
  if (n === "Map" || n === "Set") return Array.from(n);
827
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
827
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
828
828
  }
829
829
  var useDropdown = function(param) {
830
830
  var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
831
831
  var _properties_choices;
832
832
  var comboBoxState = Juce.getComboBoxState(id);
833
- var _useState = _sliced_to_array$b(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
834
- var _useState1 = _sliced_to_array$b(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
833
+ var _useState = _sliced_to_array$d(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
834
+ var _useState1 = _sliced_to_array$d(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
835
835
  var setHighlightedItem = useGlobalContext().setHighlightedItem;
836
836
  var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
837
837
  var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
@@ -1004,7 +1004,7 @@ var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
1004
1004
  return BoxDisplay;
1005
1005
  }(BoxDisplay || {});
1006
1006
  function Box(_param) {
1007
- var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
1007
+ var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.full : _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 ? [
1008
1008
  Spacing.none,
1009
1009
  Spacing.none,
1010
1010
  Spacing.none,
@@ -1039,8 +1039,8 @@ function Box(_param) {
1039
1039
  style: _object_spread$i({
1040
1040
  flexWrap: flexWrap,
1041
1041
  display: display,
1042
+ width: width,
1042
1043
  gap: "var(--gap-".concat(gap, ")"),
1043
- width: '100%',
1044
1044
  paddingTop: "var(--p-".concat(padding[0], ")"),
1045
1045
  paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
1046
1046
  paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
@@ -1205,12 +1205,12 @@ function Dropdown(param) {
1205
1205
  var css_248z$7 = ".TextInput {\n pointer-events: auto;\n /* font-size: var(--text-xs); */\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n\n.TextInput.is-highlighted {\n background: var(--color-gray-600);\n border: 1px solid var(--color-gray-500);\n}\n";
1206
1206
  styleInject(css_248z$7);
1207
1207
 
1208
- function _array_like_to_array$a(arr, len) {
1208
+ function _array_like_to_array$c(arr, len) {
1209
1209
  if (len == null || len > arr.length) len = arr.length;
1210
1210
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
1211
1211
  return arr2;
1212
1212
  }
1213
- function _array_with_holes$a(arr) {
1213
+ function _array_with_holes$c(arr) {
1214
1214
  if (Array.isArray(arr)) return arr;
1215
1215
  }
1216
1216
  function _define_property$f(obj, key, value) {
@@ -1226,7 +1226,7 @@ function _define_property$f(obj, key, value) {
1226
1226
  }
1227
1227
  return obj;
1228
1228
  }
1229
- function _iterable_to_array_limit$a(arr, i) {
1229
+ function _iterable_to_array_limit$c(arr, i) {
1230
1230
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
1231
1231
  if (_i == null) return;
1232
1232
  var _arr = [];
@@ -1250,7 +1250,7 @@ function _iterable_to_array_limit$a(arr, i) {
1250
1250
  }
1251
1251
  return _arr;
1252
1252
  }
1253
- function _non_iterable_rest$a() {
1253
+ function _non_iterable_rest$c() {
1254
1254
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1255
1255
  }
1256
1256
  function _object_spread$f(target) {
@@ -1268,16 +1268,16 @@ function _object_spread$f(target) {
1268
1268
  }
1269
1269
  return target;
1270
1270
  }
1271
- function _sliced_to_array$a(arr, i) {
1272
- return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
1271
+ function _sliced_to_array$c(arr, i) {
1272
+ return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
1273
1273
  }
1274
- function _unsupported_iterable_to_array$a(o, minLen) {
1274
+ function _unsupported_iterable_to_array$c(o, minLen) {
1275
1275
  if (!o) return;
1276
- if (typeof o === "string") return _array_like_to_array$a(o, minLen);
1276
+ if (typeof o === "string") return _array_like_to_array$c(o, minLen);
1277
1277
  var n = Object.prototype.toString.call(o).slice(8, -1);
1278
1278
  if (n === "Object" && o.constructor) n = o.constructor.name;
1279
1279
  if (n === "Map" || n === "Set") return Array.from(n);
1280
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
1280
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
1281
1281
  }
1282
1282
  // import { decimalToPercent, percentToDecimal } from '../../common/utils';
1283
1283
  // import debounce from 'lodash.debounce';
@@ -1289,9 +1289,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
1289
1289
  function Input(param) {
1290
1290
  var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor;
1291
1291
  var _inputRef_current;
1292
- var _useState = _sliced_to_array$a(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
1292
+ var _useState = _sliced_to_array$c(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
1293
1293
  // const [hasError, setHasError] = useState<boolean>(false);
1294
- var _useState1 = _sliced_to_array$a(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
1294
+ var _useState1 = _sliced_to_array$c(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
1295
1295
  var valueRef = useRef(null);
1296
1296
  var isLocalhost = window.location.hostname === 'localhost';
1297
1297
  // Sets up listeners to handle changes on the backend
@@ -1435,15 +1435,15 @@ var SliderType = /*#__PURE__*/ function(SliderType) {
1435
1435
  return SliderType;
1436
1436
  }({});
1437
1437
 
1438
- function _array_like_to_array$9(arr, len) {
1438
+ function _array_like_to_array$b(arr, len) {
1439
1439
  if (len == null || len > arr.length) len = arr.length;
1440
1440
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
1441
1441
  return arr2;
1442
1442
  }
1443
- function _array_with_holes$9(arr) {
1443
+ function _array_with_holes$b(arr) {
1444
1444
  if (Array.isArray(arr)) return arr;
1445
1445
  }
1446
- function _iterable_to_array_limit$9(arr, i) {
1446
+ function _iterable_to_array_limit$b(arr, i) {
1447
1447
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
1448
1448
  if (_i == null) return;
1449
1449
  var _arr = [];
@@ -1467,19 +1467,19 @@ function _iterable_to_array_limit$9(arr, i) {
1467
1467
  }
1468
1468
  return _arr;
1469
1469
  }
1470
- function _non_iterable_rest$9() {
1470
+ function _non_iterable_rest$b() {
1471
1471
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1472
1472
  }
1473
- function _sliced_to_array$9(arr, i) {
1474
- return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
1473
+ function _sliced_to_array$b(arr, i) {
1474
+ return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
1475
1475
  }
1476
- function _unsupported_iterable_to_array$9(o, minLen) {
1476
+ function _unsupported_iterable_to_array$b(o, minLen) {
1477
1477
  if (!o) return;
1478
- if (typeof o === "string") return _array_like_to_array$9(o, minLen);
1478
+ if (typeof o === "string") return _array_like_to_array$b(o, minLen);
1479
1479
  var n = Object.prototype.toString.call(o).slice(8, -1);
1480
1480
  if (n === "Object" && o.constructor) n = o.constructor.name;
1481
1481
  if (n === "Map" || n === "Set") return Array.from(n);
1482
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
1482
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
1483
1483
  }
1484
1484
  // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
1485
1485
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -1489,7 +1489,7 @@ var useSlider = function(param) {
1489
1489
  end: 15000,
1490
1490
  interval: 0.1,
1491
1491
  skew: 0.7
1492
- } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange;
1492
+ } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange; param.sliderElementRef;
1493
1493
  var clickListener = function clickListener(event) {
1494
1494
  var _event_target_closest;
1495
1495
  if (((_event_target_closest = event.target.closest('.Slider')) === null || _event_target_closest === void 0 ? void 0 : _event_target_closest.id) === id) {
@@ -1528,14 +1528,14 @@ var useSlider = function(param) {
1528
1528
  * AudioProcessorParameter::getValue() (C++).
1529
1529
  */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
1530
1530
  // NOTE: We can think of this as a percentage value, in 0 to 1 format
1531
- var _useState = _sliced_to_array$9(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
1531
+ var _useState = _sliced_to_array$b(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
1532
1532
  // const [normalisedValue, setNormalisedValue] = useState(0);
1533
- var _useState1 = _sliced_to_array$9(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
1533
+ var _useState1 = _sliced_to_array$b(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
1534
1534
  var scaledValueRef = useRef(null);
1535
1535
  var normalisedValueRef = useRef(null);
1536
1536
  // const randomValueSetCounter = useRef<number>(null);
1537
1537
  var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter;
1538
- var _useState2 = _sliced_to_array$9(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
1538
+ var _useState2 = _sliced_to_array$b(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
1539
1539
  useEffect(function() {
1540
1540
  document.addEventListener('click', clickListener);
1541
1541
  document.addEventListener('keydown', keyDownListener);
@@ -1561,7 +1561,6 @@ var useSlider = function(param) {
1561
1561
  setNormalisedState(newValue);
1562
1562
  };
1563
1563
  if (!isLocalhost) {
1564
- // setNormalisedValue(normalisedValue);
1565
1564
  setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
1566
1565
  if (isRandomizable) {
1567
1566
  useRandom === null || useRandom === void 0 ? void 0 : useRandom.subscribe(setRandom, id);
@@ -1697,27 +1696,6 @@ var useSlider = function(param) {
1697
1696
  i: "".concat(0)
1698
1697
  });
1699
1698
  }
1700
- // START
1701
- // bottom: 685
1702
- // height: 40
1703
- // left: 733.5
1704
- // right: 884.328125
1705
- // top: 645
1706
- // width: 150.828125
1707
- // x: 733.5
1708
- // y: 645
1709
- // clientx 735
1710
- // 735 - 733.5
1711
- // END
1712
- // bottom: 685
1713
- // height: 40
1714
- // left: 733.5
1715
- // right: 884.328125
1716
- // top: 645
1717
- // width: 150.828125
1718
- // x: 733.5
1719
- // y: 645
1720
- // clientx: 883
1721
1699
  if (down) {
1722
1700
  // TODO: Increments?
1723
1701
  var newValue;
@@ -1737,18 +1715,64 @@ var useSlider = function(param) {
1737
1715
  });
1738
1716
  }
1739
1717
  }, {
1740
- preventDefault: true
1718
+ preventDefault: false
1741
1719
  });
1742
1720
  return drag();
1743
1721
  };
1744
- var onMouseEnter = function() {
1745
- if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
1746
- highlightedItemChanged({
1747
- label: label,
1748
- value: scaledValue
1749
- });
1722
+ var dragInProgress = false;
1723
+ var bindSequenceBarSliderDrag = useGesture({
1724
+ onMouseEnter: function(param) {
1725
+ var event = param.event;
1726
+ if (event.buttons === 1) {
1727
+ var _event_target;
1728
+ var newValue;
1729
+ var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
1730
+ var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
1731
+ // const x = event?.clientX - rect.left;
1732
+ newValue = 1 - y / rect.height;
1733
+ setNormalisedState(clamp(newValue));
1734
+ }
1735
+ },
1736
+ onMouseDown: function(param) {
1737
+ param.event;
1738
+ if (!dragInProgress) {
1739
+ //@ts-expect-error
1740
+ window.__JUCE__.backend.emitEvent('jsDragStarted', {
1741
+ i: "".concat(0)
1742
+ });
1743
+ dragInProgress = true;
1744
+ }
1745
+ },
1746
+ onMouseMove: function(param) {
1747
+ var event = param.event;
1748
+ var _event_target;
1749
+ var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
1750
+ var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
1751
+ var x = (event === null || event === void 0 ? void 0 : event.clientX) - rect.left;
1752
+ if ((event === null || event === void 0 ? void 0 : event.buttons) === 1) {
1753
+ // TODO: Increments?
1754
+ var newValue;
1755
+ if (orientation === Orientation.vertical) {
1756
+ newValue = 1 - y / rect.height;
1757
+ } else if (orientation === Orientation.horizontal && dragOrientation === Orientation.vertical) {
1758
+ newValue = 1 - y / rect.width;
1759
+ } else {
1760
+ newValue = x / rect.width;
1761
+ }
1762
+ setNormalisedState(clamp(newValue));
1763
+ }
1764
+ },
1765
+ onMouseUp: function(param) {
1766
+ param.event;
1767
+ if (dragInProgress = true) {
1768
+ dragInProgress = false;
1769
+ //@ts-expect-error
1770
+ window.__JUCE__.backend.emitEvent('jsDragEnded', {
1771
+ i: "".concat(0)
1772
+ });
1773
+ }
1750
1774
  }
1751
- };
1775
+ });
1752
1776
  var setToDefaultState = function() {
1753
1777
  return setDefaultParameter(id);
1754
1778
  };
@@ -1759,11 +1783,9 @@ var useSlider = function(param) {
1759
1783
  incrementValue: incrementValue,
1760
1784
  decrementValue: decrementValue,
1761
1785
  isActive: isActive,
1762
- // onChangeStarted,
1763
- // onChangeCommitted,
1764
1786
  scaledToNormalised: scaledToNormalised,
1765
- onMouseEnter: onMouseEnter,
1766
1787
  bindBarSliderDrag: bindBarSliderDrag,
1788
+ bindSequenceBarSliderDrag: bindSequenceBarSliderDrag,
1767
1789
  bindDrag: bindDrag,
1768
1790
  normalisedValue: normalisedValueRef.current || 0,
1769
1791
  scaledValue: scaledValue,
@@ -1889,7 +1911,9 @@ function RotarySlider(param) {
1889
1911
  mockInitialNormalisedValue: mockInitialNormalisedValue,
1890
1912
  onChange: onChange,
1891
1913
  isRandomizable: isRandomizable
1892
- }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, isActive = _useSlider.isActive, properties = _useSlider.properties;
1914
+ }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, // onMouseEnter,
1915
+ setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, // isActive,
1916
+ properties = _useSlider.properties;
1893
1917
  return /*#__PURE__*/ React__default.createElement(Box, {
1894
1918
  className: "RotarySlider-wrapper",
1895
1919
  flexDirection: Box.flexDirection.column,
@@ -1903,9 +1927,10 @@ function RotarySlider(param) {
1903
1927
  }), /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$e({
1904
1928
  id: id,
1905
1929
  tabIndex: 0,
1906
- className: classnames('Slider', 'RotarySlider', isActive ? 'corner-border' : '', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
1930
+ className: classnames('Slider', 'RotarySlider', // isActive ? 'corner-border' : '',
1931
+ polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
1907
1932
  }, bindDrag()), {
1908
- onMouseEnter: onMouseEnter,
1933
+ // onMouseEnter={onMouseEnter}
1909
1934
  onDoubleClick: function() {
1910
1935
  setToDefaultState();
1911
1936
  },
@@ -2000,34 +2025,42 @@ function _object_spread_props$1(target, source) {
2000
2025
  return target;
2001
2026
  }
2002
2027
  function Slider(param) {
2003
- var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? Orientation.vertical : _param_sliderOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, className = param.className, id = param.id, onChange = param.onChange, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
2028
+ var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? Orientation.vertical : _param_sliderOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, className = param.className, id = param.id, onChange = param.onChange, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--bg-input)' : _param_trackColor, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
2004
2029
  mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
2005
2030
  start: 20.0,
2006
2031
  end: 15000.0,
2007
2032
  interval: 0.1,
2008
2033
  skew: 0.7
2009
2034
  } : _param_mockProperties;
2035
+ var sliderElementRef = useRef(null);
2010
2036
  var _useSlider = useSlider({
2011
2037
  id: id,
2012
2038
  label: label,
2013
2039
  mockProperties: mockProperties,
2014
2040
  mockInitialNormalisedValue: mockInitialNormalisedValue,
2015
2041
  onChange: onChange,
2016
- isRandomizable: isRandomizable
2017
- }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, onMouseEnter = _useSlider.onMouseEnter;
2042
+ isRandomizable: isRandomizable,
2043
+ sliderElementRef: sliderElementRef
2044
+ }), // bindBarSliderDrag,
2045
+ bindSequenceBarSliderDrag = _useSlider.bindSequenceBarSliderDrag, bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue;
2046
+ var drag = isStandalone ? bindDrag : bindSequenceBarSliderDrag;
2018
2047
  return /*#__PURE__*/ React__default.createElement(Box, {
2019
2048
  flexDirection: Box.flexDirection.column,
2020
2049
  justifyContent: Box.justifyContent.center,
2021
- className: classnames(className)
2050
+ className: classnames(className),
2051
+ flex: '1',
2052
+ id: id,
2053
+ ref: sliderElementRef
2022
2054
  }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
2023
2055
  className: 'Slider-center-marker'
2024
2056
  }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
2025
2057
  className: classnames('Slider-bar', 'relative')
2026
- }, bindBarSliderDrag()), {
2027
- onMouseEnter: onMouseEnter,
2058
+ }, drag()), {
2059
+ // onMouseEnter={onMouseEnter}
2060
+ id: id,
2028
2061
  style: _object_spread$d({
2029
2062
  touchAction: 'none',
2030
- backgroundColor: 'var(--bg-input)',
2063
+ backgroundColor: trackColor,
2031
2064
  minWidth: sliderOrientation === Orientation.horizontal ? '100px' : '20px',
2032
2065
  minHeight: sliderOrientation === Orientation.horizontal ? '20px' : '75px'
2033
2066
  }, style)
@@ -2043,14 +2076,14 @@ function Slider(param) {
2043
2076
  polarity: polarity,
2044
2077
  normalisedValue: normalisedValue
2045
2078
  }))
2046
- }) : ''), /*#__PURE__*/ React__default.createElement(Label, {
2079
+ }) : ''), label ? /*#__PURE__*/ React__default.createElement(Label, {
2047
2080
  padding: [
2048
2081
  Label.padding.mediumSmall
2049
2082
  ],
2050
2083
  fontSize: Label.fontSize.small,
2051
2084
  value: label,
2052
2085
  color: color
2053
- }));
2086
+ }) : null);
2054
2087
  }
2055
2088
  Slider.sliderType = SliderType;
2056
2089
  Slider.sliderPolarity = Polarity;
@@ -2116,15 +2149,15 @@ Heading.fontSize = FontSizes;
2116
2149
  Heading.tag = HeadingTags;
2117
2150
  Heading.padding = Spacing;
2118
2151
 
2119
- function _array_like_to_array$8(arr, len) {
2152
+ function _array_like_to_array$a(arr, len) {
2120
2153
  if (len == null || len > arr.length) len = arr.length;
2121
2154
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2122
2155
  return arr2;
2123
2156
  }
2124
- function _array_with_holes$8(arr) {
2157
+ function _array_with_holes$a(arr) {
2125
2158
  if (Array.isArray(arr)) return arr;
2126
2159
  }
2127
- function _iterable_to_array_limit$8(arr, i) {
2160
+ function _iterable_to_array_limit$a(arr, i) {
2128
2161
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2129
2162
  if (_i == null) return;
2130
2163
  var _arr = [];
@@ -2148,26 +2181,26 @@ function _iterable_to_array_limit$8(arr, i) {
2148
2181
  }
2149
2182
  return _arr;
2150
2183
  }
2151
- function _non_iterable_rest$8() {
2184
+ function _non_iterable_rest$a() {
2152
2185
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2153
2186
  }
2154
- function _sliced_to_array$8(arr, i) {
2155
- return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
2187
+ function _sliced_to_array$a(arr, i) {
2188
+ return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
2156
2189
  }
2157
- function _unsupported_iterable_to_array$8(o, minLen) {
2190
+ function _unsupported_iterable_to_array$a(o, minLen) {
2158
2191
  if (!o) return;
2159
- if (typeof o === "string") return _array_like_to_array$8(o, minLen);
2192
+ if (typeof o === "string") return _array_like_to_array$a(o, minLen);
2160
2193
  var n = Object.prototype.toString.call(o).slice(8, -1);
2161
2194
  if (n === "Object" && o.constructor) n = o.constructor.name;
2162
2195
  if (n === "Map" || n === "Set") return Array.from(n);
2163
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
2196
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
2164
2197
  }
2165
2198
  // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
2166
2199
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
2167
2200
  var useIndicator = function(param) {
2168
2201
  var id = param.id;
2169
2202
  var isLocalhost = window.location.hostname === 'localhost';
2170
- var _useState = _sliced_to_array$8(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
2203
+ var _useState = _sliced_to_array$a(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
2171
2204
  // Set the initial state
2172
2205
  useEffect(function() {
2173
2206
  if (!isLocalhost) {
@@ -2734,12 +2767,12 @@ function LinePlot(param) {
2734
2767
  var css_248z$4 = ".Oscilloscope {\n background: #0EAC8B;\n box-shadow: inset 0 0 20px #086350;\n height: 200px;\n };";
2735
2768
  styleInject(css_248z$4);
2736
2769
 
2737
- function _array_like_to_array$7(arr, len) {
2770
+ function _array_like_to_array$9(arr, len) {
2738
2771
  if (len == null || len > arr.length) len = arr.length;
2739
2772
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2740
2773
  return arr2;
2741
2774
  }
2742
- function _array_with_holes$7(arr) {
2775
+ function _array_with_holes$9(arr) {
2743
2776
  if (Array.isArray(arr)) return arr;
2744
2777
  }
2745
2778
  function _define_property$7(obj, key, value) {
@@ -2755,7 +2788,7 @@ function _define_property$7(obj, key, value) {
2755
2788
  }
2756
2789
  return obj;
2757
2790
  }
2758
- function _iterable_to_array_limit$7(arr, i) {
2791
+ function _iterable_to_array_limit$9(arr, i) {
2759
2792
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2760
2793
  if (_i == null) return;
2761
2794
  var _arr = [];
@@ -2779,7 +2812,7 @@ function _iterable_to_array_limit$7(arr, i) {
2779
2812
  }
2780
2813
  return _arr;
2781
2814
  }
2782
- function _non_iterable_rest$7() {
2815
+ function _non_iterable_rest$9() {
2783
2816
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2784
2817
  }
2785
2818
  function _object_spread$7(target) {
@@ -2797,20 +2830,20 @@ function _object_spread$7(target) {
2797
2830
  }
2798
2831
  return target;
2799
2832
  }
2800
- function _sliced_to_array$7(arr, i) {
2801
- return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
2833
+ function _sliced_to_array$9(arr, i) {
2834
+ return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
2802
2835
  }
2803
- function _unsupported_iterable_to_array$7(o, minLen) {
2836
+ function _unsupported_iterable_to_array$9(o, minLen) {
2804
2837
  if (!o) return;
2805
- if (typeof o === "string") return _array_like_to_array$7(o, minLen);
2838
+ if (typeof o === "string") return _array_like_to_array$9(o, minLen);
2806
2839
  var n = Object.prototype.toString.call(o).slice(8, -1);
2807
2840
  if (n === "Object" && o.constructor) n = o.constructor.name;
2808
2841
  if (n === "Map" || n === "Set") return Array.from(n);
2809
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
2842
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
2810
2843
  }
2811
2844
  function Oscilloscope(param) {
2812
2845
  var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
2813
- var _useState = _sliced_to_array$7(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
2846
+ var _useState = _sliced_to_array$9(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
2814
2847
  useEffect(function() {
2815
2848
  //@ts-expect-error
2816
2849
  var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -2845,12 +2878,12 @@ styleInject(css_248z$3);
2845
2878
  var css_248z$2 = ".PresetManagerContainer {\n width: 100%;\n height: 100%;\n background-color: var(--bg-page);\n color: var(--color-text);\n}\n\n.PresetManagerButton {\n width: 100%;\n height: 100%;\n max-width: 300px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n cursor: pointer;\n text-align: center;\n font-family: var(--font-leagueSpartan);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 225px;\n display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25;\n /* position: relative; */\n &:hover,\n &:active {\n background: var(--color-gray-900);\n }\n /* &.isDirty {\n &::after {\n content: '*';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n }\n } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n content: '*';\n position: absolute;\n height: 1rem;\n width: 1rem;\n right: -0.75rem;\n top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n position: relative;\n width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n position: absolute;\n font-family: var(--font-leagueSpartan);\n right: 0px;\n left: 0px;\n width: 100%;\n max-width: 400px !important;\n color: var(--color-text);\n background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n font-family: var(--font-leagueSpartan);\n cursor: pointer;\n background: var(--color-gray-800);\n text-transform: uppercase;\n &:hover,\n &.isSelected {\n background: var(--bg-selected);\n }\n} */\n\n.PresetManagerListItem {\n cursor: pointer;\n background: var(--color-gray-800);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n display: inline-block;\n vertical-align: middle;\n height: 1.5rem;\n line-height: 1.75;\n}\n";
2846
2879
  styleInject(css_248z$2);
2847
2880
 
2848
- function _array_like_to_array$6(arr, len) {
2881
+ function _array_like_to_array$8(arr, len) {
2849
2882
  if (len == null || len > arr.length) len = arr.length;
2850
2883
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2851
2884
  return arr2;
2852
2885
  }
2853
- function _array_with_holes$6(arr) {
2886
+ function _array_with_holes$8(arr) {
2854
2887
  if (Array.isArray(arr)) return arr;
2855
2888
  }
2856
2889
  function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -2882,7 +2915,7 @@ function _async_to_generator$3(fn) {
2882
2915
  });
2883
2916
  };
2884
2917
  }
2885
- function _iterable_to_array_limit$6(arr, i) {
2918
+ function _iterable_to_array_limit$8(arr, i) {
2886
2919
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2887
2920
  if (_i == null) return;
2888
2921
  var _arr = [];
@@ -2906,23 +2939,23 @@ function _iterable_to_array_limit$6(arr, i) {
2906
2939
  }
2907
2940
  return _arr;
2908
2941
  }
2909
- function _non_iterable_rest$6() {
2942
+ function _non_iterable_rest$8() {
2910
2943
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2911
2944
  }
2912
2945
  function _object_destructuring_empty(o) {
2913
2946
  if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
2914
2947
  return o;
2915
2948
  }
2916
- function _sliced_to_array$6(arr, i) {
2917
- return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
2949
+ function _sliced_to_array$8(arr, i) {
2950
+ return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
2918
2951
  }
2919
- function _unsupported_iterable_to_array$6(o, minLen) {
2952
+ function _unsupported_iterable_to_array$8(o, minLen) {
2920
2953
  if (!o) return;
2921
- if (typeof o === "string") return _array_like_to_array$6(o, minLen);
2954
+ if (typeof o === "string") return _array_like_to_array$8(o, minLen);
2922
2955
  var n = Object.prototype.toString.call(o).slice(8, -1);
2923
2956
  if (n === "Object" && o.constructor) n = o.constructor.name;
2924
2957
  if (n === "Map" || n === "Set") return Array.from(n);
2925
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
2958
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
2926
2959
  }
2927
2960
  function _ts_generator$3(thisArg, body) {
2928
2961
  var f, y, t, _ = {
@@ -3017,16 +3050,16 @@ function _ts_generator$3(thisArg, body) {
3017
3050
  }
3018
3051
  function PresetManager(param) {
3019
3052
  _object_destructuring_empty(param);
3020
- var _useState = _sliced_to_array$6(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
3021
- var _useState1 = _sliced_to_array$6(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
3053
+ var _useState = _sliced_to_array$8(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
3054
+ var _useState1 = _sliced_to_array$8(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
3022
3055
  var savePresetFunc = Juce.getNativeFunction('savePreset');
3023
3056
  var loadPresetFunc = Juce.getNativeFunction('loadPreset');
3024
3057
  var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
3025
3058
  var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
3026
3059
  var isDirtyFunc = Juce.getNativeFunction('canUndo');
3027
- var _useState2 = _sliced_to_array$6(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
3060
+ var _useState2 = _sliced_to_array$8(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
3028
3061
  var isLocalhost = window.location.hostname === 'localhost';
3029
- var _useState3 = _sliced_to_array$6(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
3062
+ var _useState3 = _sliced_to_array$8(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
3030
3063
  useEffect(function() {
3031
3064
  if (!isLocalhost) {
3032
3065
  var isDirtyListenerId = //@ts-expect-error
@@ -3302,12 +3335,12 @@ function PresetManager(param) {
3302
3335
  }))))));
3303
3336
  }
3304
3337
 
3305
- function _array_like_to_array$5(arr, len) {
3338
+ function _array_like_to_array$7(arr, len) {
3306
3339
  if (len == null || len > arr.length) len = arr.length;
3307
3340
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
3308
3341
  return arr2;
3309
3342
  }
3310
- function _array_with_holes$5(arr) {
3343
+ function _array_with_holes$7(arr) {
3311
3344
  if (Array.isArray(arr)) return arr;
3312
3345
  }
3313
3346
  function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3352,7 +3385,7 @@ function _define_property$6(obj, key, value) {
3352
3385
  }
3353
3386
  return obj;
3354
3387
  }
3355
- function _iterable_to_array_limit$5(arr, i) {
3388
+ function _iterable_to_array_limit$7(arr, i) {
3356
3389
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
3357
3390
  if (_i == null) return;
3358
3391
  var _arr = [];
@@ -3376,7 +3409,7 @@ function _iterable_to_array_limit$5(arr, i) {
3376
3409
  }
3377
3410
  return _arr;
3378
3411
  }
3379
- function _non_iterable_rest$5() {
3412
+ function _non_iterable_rest$7() {
3380
3413
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
3381
3414
  }
3382
3415
  function _object_spread$6(target) {
@@ -3394,16 +3427,16 @@ function _object_spread$6(target) {
3394
3427
  }
3395
3428
  return target;
3396
3429
  }
3397
- function _sliced_to_array$5(arr, i) {
3398
- return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
3430
+ function _sliced_to_array$7(arr, i) {
3431
+ return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
3399
3432
  }
3400
- function _unsupported_iterable_to_array$5(o, minLen) {
3433
+ function _unsupported_iterable_to_array$7(o, minLen) {
3401
3434
  if (!o) return;
3402
- if (typeof o === "string") return _array_like_to_array$5(o, minLen);
3435
+ if (typeof o === "string") return _array_like_to_array$7(o, minLen);
3403
3436
  var n = Object.prototype.toString.call(o).slice(8, -1);
3404
3437
  if (n === "Object" && o.constructor) n = o.constructor.name;
3405
3438
  if (n === "Map" || n === "Set") return Array.from(n);
3406
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
3439
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
3407
3440
  }
3408
3441
  function _ts_generator$2(thisArg, body) {
3409
3442
  var f, y, t, _ = {
@@ -3586,8 +3619,8 @@ function ModuleHeader(param) {
3586
3619
  }, [
3587
3620
  window
3588
3621
  ]);
3589
- var _useState = _sliced_to_array$5(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
3590
- var _useState1 = _sliced_to_array$5(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
3622
+ var _useState = _sliced_to_array$7(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
3623
+ var _useState1 = _sliced_to_array$7(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
3591
3624
  var handleUndo = function() {
3592
3625
  undo();
3593
3626
  };
@@ -3891,15 +3924,15 @@ function SingleBarViz(param) {
3891
3924
  }
3892
3925
  SingleBarViz.polarity = Polarity;
3893
3926
 
3894
- function _array_like_to_array$4(arr, len) {
3927
+ function _array_like_to_array$6(arr, len) {
3895
3928
  if (len == null || len > arr.length) len = arr.length;
3896
3929
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
3897
3930
  return arr2;
3898
3931
  }
3899
- function _array_with_holes$4(arr) {
3932
+ function _array_with_holes$6(arr) {
3900
3933
  if (Array.isArray(arr)) return arr;
3901
3934
  }
3902
- function _iterable_to_array_limit$4(arr, i) {
3935
+ function _iterable_to_array_limit$6(arr, i) {
3903
3936
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
3904
3937
  if (_i == null) return;
3905
3938
  var _arr = [];
@@ -3923,26 +3956,26 @@ function _iterable_to_array_limit$4(arr, i) {
3923
3956
  }
3924
3957
  return _arr;
3925
3958
  }
3926
- function _non_iterable_rest$4() {
3959
+ function _non_iterable_rest$6() {
3927
3960
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
3928
3961
  }
3929
- function _sliced_to_array$4(arr, i) {
3930
- return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
3962
+ function _sliced_to_array$6(arr, i) {
3963
+ return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
3931
3964
  }
3932
- function _unsupported_iterable_to_array$4(o, minLen) {
3965
+ function _unsupported_iterable_to_array$6(o, minLen) {
3933
3966
  if (!o) return;
3934
- if (typeof o === "string") return _array_like_to_array$4(o, minLen);
3967
+ if (typeof o === "string") return _array_like_to_array$6(o, minLen);
3935
3968
  var n = Object.prototype.toString.call(o).slice(8, -1);
3936
3969
  if (n === "Object" && o.constructor) n = o.constructor.name;
3937
3970
  if (n === "Map" || n === "Set") return Array.from(n);
3938
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
3971
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
3939
3972
  }
3940
3973
  var useCombobox = function(param) {
3941
3974
  var id = param.id, filter = param.filter, onChange = param.onChange;
3942
3975
  var _Object_values;
3943
3976
  var comboBoxState = Juce.getComboBoxState(id);
3944
- var _useState = _sliced_to_array$4(useState(0), 2), value = _useState[0], setValue = _useState[1];
3945
- var _useState1 = _sliced_to_array$4(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
3977
+ var _useState = _sliced_to_array$6(useState(0), 2), value = _useState[0], setValue = _useState[1];
3978
+ var _useState1 = _sliced_to_array$6(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
3946
3979
  var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlots = _useGlobalContext_globalState.modSlots;
3947
3980
  //TODO: Filter choices for subsequent rows
3948
3981
  // const availableChoices = properties?.choices;
@@ -4006,12 +4039,12 @@ var useCombobox = function(param) {
4006
4039
  };
4007
4040
  };
4008
4041
 
4009
- function _array_like_to_array$3(arr, len) {
4042
+ function _array_like_to_array$5(arr, len) {
4010
4043
  if (len == null || len > arr.length) len = arr.length;
4011
4044
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4012
4045
  return arr2;
4013
4046
  }
4014
- function _array_with_holes$3(arr) {
4047
+ function _array_with_holes$5(arr) {
4015
4048
  if (Array.isArray(arr)) return arr;
4016
4049
  }
4017
4050
  function _define_property$4(obj, key, value) {
@@ -4027,7 +4060,7 @@ function _define_property$4(obj, key, value) {
4027
4060
  }
4028
4061
  return obj;
4029
4062
  }
4030
- function _iterable_to_array_limit$3(arr, i) {
4063
+ function _iterable_to_array_limit$5(arr, i) {
4031
4064
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
4032
4065
  if (_i == null) return;
4033
4066
  var _arr = [];
@@ -4051,7 +4084,7 @@ function _iterable_to_array_limit$3(arr, i) {
4051
4084
  }
4052
4085
  return _arr;
4053
4086
  }
4054
- function _non_iterable_rest$3() {
4087
+ function _non_iterable_rest$5() {
4055
4088
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
4056
4089
  }
4057
4090
  function _object_spread$4(target) {
@@ -4069,22 +4102,22 @@ function _object_spread$4(target) {
4069
4102
  }
4070
4103
  return target;
4071
4104
  }
4072
- function _sliced_to_array$3(arr, i) {
4073
- return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
4105
+ function _sliced_to_array$5(arr, i) {
4106
+ return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
4074
4107
  }
4075
- function _unsupported_iterable_to_array$3(o, minLen) {
4108
+ function _unsupported_iterable_to_array$5(o, minLen) {
4076
4109
  if (!o) return;
4077
- if (typeof o === "string") return _array_like_to_array$3(o, minLen);
4110
+ if (typeof o === "string") return _array_like_to_array$5(o, minLen);
4078
4111
  var n = Object.prototype.toString.call(o).slice(8, -1);
4079
4112
  if (n === "Object" && o.constructor) n = o.constructor.name;
4080
4113
  if (n === "Map" || n === "Set") return Array.from(n);
4081
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
4114
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
4082
4115
  }
4083
4116
  function ModMatrixComboboxCell(param) {
4084
4117
  var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, key = param.key, color = param.color, style = param.style;
4085
4118
  var _SingleBarViz_polarity;
4086
- var _useState = _sliced_to_array$3(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
4087
- var _useState1 = _sliced_to_array$3(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
4119
+ var _useState = _sliced_to_array$5(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
4120
+ var _useState1 = _sliced_to_array$5(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
4088
4121
  var _useGlobalContext = useGlobalContext(), automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
4089
4122
  var _useCombobox = useCombobox({
4090
4123
  id: rowId,
@@ -4380,16 +4413,16 @@ function ModMatrixRow(param) {
4380
4413
  }));
4381
4414
  }
4382
4415
 
4383
- function _array_like_to_array$2(arr, len) {
4416
+ function _array_like_to_array$4(arr, len) {
4384
4417
  if (len == null || len > arr.length) len = arr.length;
4385
4418
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4386
4419
  return arr2;
4387
4420
  }
4388
- function _array_with_holes$2(arr) {
4421
+ function _array_with_holes$4(arr) {
4389
4422
  if (Array.isArray(arr)) return arr;
4390
4423
  }
4391
4424
  function _array_without_holes(arr) {
4392
- if (Array.isArray(arr)) return _array_like_to_array$2(arr);
4425
+ if (Array.isArray(arr)) return _array_like_to_array$4(arr);
4393
4426
  }
4394
4427
  function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
4395
4428
  try {
@@ -4436,7 +4469,7 @@ function _define_property$1(obj, key, value) {
4436
4469
  function _iterable_to_array(iter) {
4437
4470
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
4438
4471
  }
4439
- function _iterable_to_array_limit$2(arr, i) {
4472
+ function _iterable_to_array_limit$4(arr, i) {
4440
4473
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
4441
4474
  if (_i == null) return;
4442
4475
  var _arr = [];
@@ -4460,7 +4493,7 @@ function _iterable_to_array_limit$2(arr, i) {
4460
4493
  }
4461
4494
  return _arr;
4462
4495
  }
4463
- function _non_iterable_rest$2() {
4496
+ function _non_iterable_rest$4() {
4464
4497
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
4465
4498
  }
4466
4499
  function _non_iterable_spread() {
@@ -4481,19 +4514,19 @@ function _object_spread$1(target) {
4481
4514
  }
4482
4515
  return target;
4483
4516
  }
4484
- function _sliced_to_array$2(arr, i) {
4485
- return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
4517
+ function _sliced_to_array$4(arr, i) {
4518
+ return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
4486
4519
  }
4487
4520
  function _to_consumable_array(arr) {
4488
- return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$2(arr) || _non_iterable_spread();
4521
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$4(arr) || _non_iterable_spread();
4489
4522
  }
4490
- function _unsupported_iterable_to_array$2(o, minLen) {
4523
+ function _unsupported_iterable_to_array$4(o, minLen) {
4491
4524
  if (!o) return;
4492
- if (typeof o === "string") return _array_like_to_array$2(o, minLen);
4525
+ if (typeof o === "string") return _array_like_to_array$4(o, minLen);
4493
4526
  var n = Object.prototype.toString.call(o).slice(8, -1);
4494
4527
  if (n === "Object" && o.constructor) n = o.constructor.name;
4495
4528
  if (n === "Map" || n === "Set") return Array.from(n);
4496
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
4529
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
4497
4530
  }
4498
4531
  function _ts_generator$1(thisArg, body) {
4499
4532
  var f, y, t, _ = {
@@ -4590,7 +4623,7 @@ function _ts_generator$1(thisArg, body) {
4590
4623
  function ModMatrix(param) {
4591
4624
  var className = param.className, style = param.style;
4592
4625
  var _Object_keys, _Object_keys1, _Object_keys2;
4593
- var _useState = _sliced_to_array$2(useState(), 2), previewRowIsActive = _useState[0], setPreviewRowIsActive = _useState[1];
4626
+ var _useState = _sliced_to_array$4(useState(), 2), previewRowIsActive = _useState[0], setPreviewRowIsActive = _useState[1];
4594
4627
  var getAutomatableParamsListFunc = Juce.getNativeFunction('getAutomatableParamsList');
4595
4628
  var getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
4596
4629
  var getModSlotParamsFunc = Juce.getNativeFunction('getModSlotParams');
@@ -4747,15 +4780,15 @@ function ModMatrix(param) {
4747
4780
  })));
4748
4781
  }
4749
4782
 
4750
- function _array_like_to_array$1(arr, len) {
4783
+ function _array_like_to_array$3(arr, len) {
4751
4784
  if (len == null || len > arr.length) len = arr.length;
4752
4785
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4753
4786
  return arr2;
4754
4787
  }
4755
- function _array_with_holes$1(arr) {
4788
+ function _array_with_holes$3(arr) {
4756
4789
  if (Array.isArray(arr)) return arr;
4757
4790
  }
4758
- function _iterable_to_array_limit$1(arr, i) {
4791
+ function _iterable_to_array_limit$3(arr, i) {
4759
4792
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
4760
4793
  if (_i == null) return;
4761
4794
  var _arr = [];
@@ -4779,23 +4812,23 @@ function _iterable_to_array_limit$1(arr, i) {
4779
4812
  }
4780
4813
  return _arr;
4781
4814
  }
4782
- function _non_iterable_rest$1() {
4815
+ function _non_iterable_rest$3() {
4783
4816
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
4784
4817
  }
4785
- function _sliced_to_array$1(arr, i) {
4786
- return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
4818
+ function _sliced_to_array$3(arr, i) {
4819
+ return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
4787
4820
  }
4788
- function _unsupported_iterable_to_array$1(o, minLen) {
4821
+ function _unsupported_iterable_to_array$3(o, minLen) {
4789
4822
  if (!o) return;
4790
- if (typeof o === "string") return _array_like_to_array$1(o, minLen);
4823
+ if (typeof o === "string") return _array_like_to_array$3(o, minLen);
4791
4824
  var n = Object.prototype.toString.call(o).slice(8, -1);
4792
4825
  if (n === "Object" && o.constructor) n = o.constructor.name;
4793
4826
  if (n === "Map" || n === "Set") return Array.from(n);
4794
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
4827
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
4795
4828
  }
4796
4829
  function LFO(param) {
4797
4830
  var id = param.id;
4798
- var _useState = _sliced_to_array$1(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
4831
+ var _useState = _sliced_to_array$3(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
4799
4832
  useEffect(function() {
4800
4833
  var _Juce_getSliderState;
4801
4834
  var syncType = (_Juce_getSliderState = Juce.getSliderState("LFO".concat(id, "_SyncType"))) === null || _Juce_getSliderState === void 0 ? void 0 : _Juce_getSliderState.scaledValue;
@@ -4871,6 +4904,239 @@ function LFOTab() {
4871
4904
  }));
4872
4905
  }
4873
4906
 
4907
+ function _array_like_to_array$2(arr, len) {
4908
+ if (len == null || len > arr.length) len = arr.length;
4909
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4910
+ return arr2;
4911
+ }
4912
+ function _array_with_holes$2(arr) {
4913
+ if (Array.isArray(arr)) return arr;
4914
+ }
4915
+ function _iterable_to_array_limit$2(arr, i) {
4916
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
4917
+ if (_i == null) return;
4918
+ var _arr = [];
4919
+ var _n = true;
4920
+ var _d = false;
4921
+ var _s, _e;
4922
+ try {
4923
+ for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
4924
+ _arr.push(_s.value);
4925
+ if (i && _arr.length === i) break;
4926
+ }
4927
+ } catch (err) {
4928
+ _d = true;
4929
+ _e = err;
4930
+ } finally{
4931
+ try {
4932
+ if (!_n && _i["return"] != null) _i["return"]();
4933
+ } finally{
4934
+ if (_d) throw _e;
4935
+ }
4936
+ }
4937
+ return _arr;
4938
+ }
4939
+ function _non_iterable_rest$2() {
4940
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
4941
+ }
4942
+ function _sliced_to_array$2(arr, i) {
4943
+ return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
4944
+ }
4945
+ function _unsupported_iterable_to_array$2(o, minLen) {
4946
+ if (!o) return;
4947
+ if (typeof o === "string") return _array_like_to_array$2(o, minLen);
4948
+ var n = Object.prototype.toString.call(o).slice(8, -1);
4949
+ if (n === "Object" && o.constructor) n = o.constructor.name;
4950
+ if (n === "Map" || n === "Set") return Array.from(n);
4951
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
4952
+ }
4953
+ function StepSequencer(param) {
4954
+ var seqId = param.seqId, _param_numSteps = param.numSteps, numSteps = _param_numSteps === void 0 ? 16 : _param_numSteps;
4955
+ var isLocalhost = window.location.hostname === 'localhost';
4956
+ var _useState = _sliced_to_array$2(useState(1), 1), currentSeqStep = _useState[0];
4957
+ var steps = new Array(numSteps).fill(0);
4958
+ // const currentElementRef = useRef<string>(null);
4959
+ // const isMouseDownRef = useRef<boolean>(false);
4960
+ // function mouseDownListener(event: any) {
4961
+ // if (event?.target?.id === id) {
4962
+ // isMouseDownRef.current = true;
4963
+ // currentElementRef.current = event?.target?.id;
4964
+ // }
4965
+ // }
4966
+ // function mouseMoveListener(event: any) {
4967
+ // if (isMouseDownRef.current) {
4968
+ // console.log(
4969
+ // id,
4970
+ // event,
4971
+ // isMouseDownRef.current,
4972
+ // 'EVENT. isMouseDownRef.current',
4973
+ // );
4974
+ // }
4975
+ // if (
4976
+ // isMouseDownRef.current &&
4977
+ // event?.target?.id === id
4978
+ // // currentElementRef.current !== event?.target?.id
4979
+ // ) {
4980
+ // console.log(
4981
+ // id,
4982
+ // event?.target?.id,
4983
+ // currentElementRef.current,
4984
+ // isMouseDownRef.current,
4985
+ // 'ISMOUSE!!!222',
4986
+ // );
4987
+ // currentElementRef.current = event?.target?.id;
4988
+ // }
4989
+ // }
4990
+ // function mouseUpListener(event: any) {
4991
+ // isMouseDownRef.current = false;
4992
+ // }
4993
+ // useEffect(() => {
4994
+ // document.addEventListener('mousedown', mouseDownListener);
4995
+ // document.addEventListener('mousemove', mouseMoveListener);
4996
+ // document.addEventListener('mouseup', mouseUpListener);
4997
+ // return () => {
4998
+ // document.removeEventListener('mousedown', mouseDownListener);
4999
+ // document.addEventListener('mousemove', mouseMoveListener);
5000
+ // document.removeEventListener('mouseup', mouseUpListener);
5001
+ // };
5002
+ // }, [window]);
5003
+ useEffect(function() {
5004
+ if (!isLocalhost) {
5005
+ var currentSeqStepChangedListenerId = //@ts-expect-error
5006
+ window.__JUCE__.backend.addEventListener('currentSeqStepChanged', function(event) {
5007
+ // setCurrentSeqStep(event);
5008
+ });
5009
+ return function cleanup() {
5010
+ //@ts-expect-error
5011
+ window.__JUCE__.backend.removeEventListener(currentSeqStepChangedListenerId);
5012
+ };
5013
+ } else {
5014
+ return;
5015
+ }
5016
+ }, [
5017
+ window
5018
+ ]);
5019
+ return /*#__PURE__*/ React__default.createElement(Box, {
5020
+ className: "StepSequencer",
5021
+ justifyContent: Box.justifyContent.flexStart,
5022
+ width: "auto"
5023
+ }, steps.map(function(_, i) {
5024
+ var sliderNumber = i + 1;
5025
+ return /*#__PURE__*/ React__default.createElement(Slider, {
5026
+ isStandalone: false,
5027
+ sliderOrientation: Slider.sliderOrientation.vertical,
5028
+ id: "seq".concat(seqId, "_step").concat(sliderNumber),
5029
+ color: currentSeqStep === sliderNumber ? "var(--color-brand-300)" : "var(--color-brand)",
5030
+ trackColor: currentSeqStep === sliderNumber ? "var(--color-brand-600)" : "var(--color-brand-900)"
5031
+ });
5032
+ }));
5033
+ }
5034
+
5035
+ function _array_like_to_array$1(arr, len) {
5036
+ if (len == null || len > arr.length) len = arr.length;
5037
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
5038
+ return arr2;
5039
+ }
5040
+ function _array_with_holes$1(arr) {
5041
+ if (Array.isArray(arr)) return arr;
5042
+ }
5043
+ function _iterable_to_array_limit$1(arr, i) {
5044
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
5045
+ if (_i == null) return;
5046
+ var _arr = [];
5047
+ var _n = true;
5048
+ var _d = false;
5049
+ var _s, _e;
5050
+ try {
5051
+ for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
5052
+ _arr.push(_s.value);
5053
+ if (i && _arr.length === i) break;
5054
+ }
5055
+ } catch (err) {
5056
+ _d = true;
5057
+ _e = err;
5058
+ } finally{
5059
+ try {
5060
+ if (!_n && _i["return"] != null) _i["return"]();
5061
+ } finally{
5062
+ if (_d) throw _e;
5063
+ }
5064
+ }
5065
+ return _arr;
5066
+ }
5067
+ function _non_iterable_rest$1() {
5068
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
5069
+ }
5070
+ function _sliced_to_array$1(arr, i) {
5071
+ return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
5072
+ }
5073
+ function _unsupported_iterable_to_array$1(o, minLen) {
5074
+ if (!o) return;
5075
+ if (typeof o === "string") return _array_like_to_array$1(o, minLen);
5076
+ var n = Object.prototype.toString.call(o).slice(8, -1);
5077
+ if (n === "Object" && o.constructor) n = o.constructor.name;
5078
+ if (n === "Map" || n === "Set") return Array.from(n);
5079
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
5080
+ }
5081
+ function SeqTab$1(param) {
5082
+ var seqId = param.seqId;
5083
+ var _useState = _sliced_to_array$1(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
5084
+ useEffect(function() {
5085
+ var _Juce_getSliderState;
5086
+ var syncType = (_Juce_getSliderState = Juce.getSliderState("seq".concat(seqId, "_syncType"))) === null || _Juce_getSliderState === void 0 ? void 0 : _Juce_getSliderState.scaledValue;
5087
+ setSyncType(syncType);
5088
+ }, [
5089
+ window
5090
+ ]);
5091
+ var handleSyncTypeChange = function(value) {
5092
+ setSyncType(value);
5093
+ };
5094
+ return /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Box, {
5095
+ alignItems: Box.alignItems.flexEnd,
5096
+ justifyContent: Box.justifyContent.spaceEvenly
5097
+ }, /*#__PURE__*/ React__default.createElement(Dropdown, {
5098
+ labelColor: "var(--color-text)",
5099
+ color: "var(--color-brand)",
5100
+ id: "seq".concat(seqId, "_syncType"),
5101
+ label: "seq".concat(seqId, "_syncType"),
5102
+ onChange: handleSyncTypeChange
5103
+ }), /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
5104
+ id: "seq".concat(seqId, "_hertz"),
5105
+ label: "Seq".concat(seqId, " Hz")
5106
+ }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
5107
+ id: "seq".concat(seqId, "_hertzHi"),
5108
+ label: "Seq".concat(seqId, " Hz Hi")
5109
+ }) : null, syncType === 2 ? /*#__PURE__*/ React__default.createElement(Dropdown, {
5110
+ labelColor: "var(--color-text)",
5111
+ color: "var(--color-brand)",
5112
+ id: "seq".concat(seqId, "_syncRate"),
5113
+ label: "Seq".concat(seqId, " Sync Rate")
5114
+ }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
5115
+ id: "seq".concat(seqId, "_thirds"),
5116
+ label: "Seq".concat(seqId, " Thirds")
5117
+ }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
5118
+ id: "seq".concat(seqId, "_sixteenths"),
5119
+ label: "Seq".concat(seqId, " Sixteenths")
5120
+ }) : null), /*#__PURE__*/ React__default.createElement(RotarySlider, {
5121
+ id: "seq".concat(seqId, "_amp"),
5122
+ label: "Seq".concat(seqId, " Amp")
5123
+ })), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(StepSequencer, {
5124
+ seqId: seqId
5125
+ })));
5126
+ }
5127
+
5128
+ function SeqTab() {
5129
+ return /*#__PURE__*/ React__default.createElement(Box, {
5130
+ className: "SeqTab",
5131
+ flexDirection: Box.flexDirection.column,
5132
+ gap: Box.gap.large
5133
+ }, /*#__PURE__*/ React__default.createElement(SeqTab$1, {
5134
+ seqId: 1
5135
+ }), /*#__PURE__*/ React__default.createElement(SeqTab$1, {
5136
+ seqId: 2
5137
+ }));
5138
+ }
5139
+
4874
5140
  var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n background: transparent;\n color: var(--color-text);\n font-family: var(--font-leagueSpartan);\n background: var(--color-gray-600);\n flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'],\n.ModuleFooter .Tabs-item[data-headlessui-state='selected focus'] {\n background: var(--color-gray-700);\n}\n";
4875
5141
  styleInject(css_248z);
4876
5142
 
@@ -5083,7 +5349,7 @@ var InputModTab = function() {
5083
5349
  return /*#__PURE__*/ React__default.createElement(Box, null, "InputModTab");
5084
5350
  };
5085
5351
  var SequencerTab = function() {
5086
- return /*#__PURE__*/ React__default.createElement(Box, null, "SequencerTab");
5352
+ return /*#__PURE__*/ React__default.createElement(SeqTab, null);
5087
5353
  };
5088
5354
  var SettingsTab = function() {
5089
5355
  return /*#__PURE__*/ React__default.createElement(Box, null, "SettingsTab");