@antimatter-audio/antimatter-ui 16.2.9 → 16.2.11

package/dist/index.js

@@ -34,8 +34,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$j = "@theme static {\n  /* Default theme colors */\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\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  /* Main section theme colors */\n  --color-GreenScreen-100: #1b4b3d;\n  --color-GreenScreen-200: #29705b;\n  --color-GreenScreen-300: #369679;\n  --color-GreenScreen-400: #44bb97;\n  --color-GreenScreen-500: #61c6a7;\n  --color-GreenScreen-600: #7cd0b7;\n  --color-GreenScreen-700: #a1ddcb;\n  --color-GreenScreen-1000: #c7ebe0;\n\n  --color-AmberScreen-100: #371815;\n  --color-AmberScreen-200: #5c2824;\n  --color-AmberScreen-300: #813932;\n  --color-AmberScreen-400: #a54940;\n  --color-AmberScreen-500: #bd5e56;\n  --color-AmberScreen-600: #c6746c;\n  --color-AmberScreen-700: #d49691;\n  --color-AmberScreen-1000: #e2b9b6;\n\n  --color-BlackScreen-100: #000000;\n  --color-BlackScreen-200: #0b0b0f;\n  --color-BlackScreen-300: #16161d;\n  --color-BlackScreen-400: #21212c;\n  --color-BlackScreen-500: #2c2c3a;\n  --color-BlackScreen-600: #373749;\n  --color-BlackScreen-700: #424257;\n  --color-BlackScreen-1000: #4d4d66;\n\n  --color-GreenAccent-100: #082b20;\n  --color-GreenAccent-200: #105640;\n  --color-GreenAccent-300: #188160;\n  --color-GreenAccent-400: #21ab7f;\n  --color-GreenAccent-500: #27ca96;\n  --color-GreenAccent-600: #3edaa9;\n  --color-GreenAccent-700: #69e2bc;\n  --color-GreenAccent-1000: #94ebcf;\n\n  --color-YellowAccent-100: #ad6a05;\n  --color-YellowAccent-200: #df8807;\n  --color-YellowAccent-300: #f8a220;\n  --color-YellowAccent-400: #fab752;\n  --color-YellowAccent-500: #faba58;\n  --color-YellowAccent-600: #fac16b;\n  --color-YellowAccent-700: #fbcb83;\n  --color-YellowAccent-1000: #fcd69c;\n\n  --color-RedAccent-100: #260d10;\n  --color-RedAccent-200: #391318;\n  --color-RedAccent-300: #4d191f;\n  --color-RedAccent-400: #602027;\n  --color-RedAccent-500: #73262f;\n  --color-RedAccent-600: #862d37;\n  --color-RedAccent-700: #99333f;\n  --color-RedAccent-1000: #bf404f;\n\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-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #3b3b44;\n  --bg-lv7: #4c4a54;\n  --bg-lv8: #595763;\n  --bg-lv9: #838091;\n  --bg-lv10: #9a96ab;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xxs: 0.5rem;\n  --text-xs: 0.625rem;\n  --text-sm: 0.7rem;\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: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n/* .cursor-hidden * {\n  cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--bg-lv4);\n  scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--bg-lv7);\n  border-radius: 6px;\n  width: 3px;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
-styleInject(css_248z$j);
+var css_248z$k = "@theme static {\n  /* Default theme colors */\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\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  /* Main section theme colors */\n  --color-GreenScreen-100: #1b4b3d;\n  --color-GreenScreen-200: #29705b;\n  --color-GreenScreen-300: #369679;\n  --color-GreenScreen-400: #44bb97;\n  --color-GreenScreen-500: #61c6a7;\n  --color-GreenScreen-600: #7cd0b7;\n  --color-GreenScreen-700: #a1ddcb;\n  --color-GreenScreen-1000: #c7ebe0;\n\n  --color-AmberScreen-100: #371815;\n  --color-AmberScreen-200: #5c2824;\n  --color-AmberScreen-300: #813932;\n  --color-AmberScreen-400: #a54940;\n  --color-AmberScreen-500: #bd5e56;\n  --color-AmberScreen-600: #c6746c;\n  --color-AmberScreen-700: #d49691;\n  --color-AmberScreen-1000: #e2b9b6;\n\n  --color-BlackScreen-100: #000000;\n  --color-BlackScreen-200: #0b0b0f;\n  --color-BlackScreen-300: #16161d;\n  --color-BlackScreen-400: #21212c;\n  --color-BlackScreen-500: #2c2c3a;\n  --color-BlackScreen-600: #373749;\n  --color-BlackScreen-700: #424257;\n  --color-BlackScreen-1000: #4d4d66;\n\n  --color-GreenAccent-100: #082b20;\n  --color-GreenAccent-200: #105640;\n  --color-GreenAccent-300: #188160;\n  --color-GreenAccent-400: #21ab7f;\n  --color-GreenAccent-500: #27ca96;\n  --color-GreenAccent-600: #3edaa9;\n  --color-GreenAccent-700: #69e2bc;\n  --color-GreenAccent-1000: #94ebcf;\n\n  --color-YellowAccent-100: #ad6a05;\n  --color-YellowAccent-200: #df8807;\n  --color-YellowAccent-300: #f8a220;\n  --color-YellowAccent-400: #fab752;\n  --color-YellowAccent-500: #faba58;\n  --color-YellowAccent-600: #fac16b;\n  --color-YellowAccent-700: #fbcb83;\n  --color-YellowAccent-1000: #fcd69c;\n\n  --color-RedAccent-100: #260d10;\n  --color-RedAccent-200: #391318;\n  --color-RedAccent-300: #4d191f;\n  --color-RedAccent-400: #602027;\n  --color-RedAccent-500: #73262f;\n  --color-RedAccent-600: #862d37;\n  --color-RedAccent-700: #99333f;\n  --color-RedAccent-1000: #bf404f;\n\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-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #3b3b44;\n  --bg-lv7: #4c4a54;\n  --bg-lv8: #595763;\n  --bg-lv9: #838091;\n  --bg-lv10: #9a96ab;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xxs: 0.5rem;\n  --text-xs: 0.625rem;\n  --text-sm: 0.7rem;\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: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n/* .cursor-hidden * {\n  cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--bg-lv4);\n  scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--bg-lv7);\n  border-radius: 6px;\n  width: 3px;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+styleInject(css_248z$k);
 
 var Spacing;
 (function(Spacing) {
@@ -182,14 +182,63 @@ var StrokeStyle;
     StrokeStyle["dashed"] = "dashed";
     StrokeStyle["dotted"] = "dotted";
 })(StrokeStyle || (StrokeStyle = {}));
+var IncrementType;
+(function(IncrementType) {
+    IncrementType["fine"] = "fine";
+    IncrementType["standard"] = "standard";
+    IncrementType["button"] = "button";
+})(IncrementType || (IncrementType = {}));
+
+var SliderType;
+(function(SliderType) {
+    SliderType["bar"] = "bar";
+    SliderType["rotary"] = "rotary";
+    SliderType["custom"] = "custom";
+})(SliderType || (SliderType = {}));
+var SliderRotationBehavior;
+(function(SliderRotationBehavior) {
+    SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
+    SliderRotationBehavior["rotatehandle"] = "rotatehandle";
+    SliderRotationBehavior["noRotation"] = "noRotation";
+})(SliderRotationBehavior || (SliderRotationBehavior = {}));
+var RotarySliderHandleShapes;
+(function(RotarySliderHandleShapes) {
+    RotarySliderHandleShapes["circle"] = "circle";
+    RotarySliderHandleShapes["rectangle"] = "rectangle";
+})(RotarySliderHandleShapes || (RotarySliderHandleShapes = {}));
+var RotarySliderSizes;
+(function(RotarySliderSizes) {
+    RotarySliderSizes["small"] = "small";
+    RotarySliderSizes["large"] = "large";
+})(RotarySliderSizes || (RotarySliderSizes = {}));
+const rotarySliderSizeMap = {
+    [RotarySliderSizes.small]: {
+        width: 40,
+        height: 40
+    },
+    [RotarySliderSizes.large]: {
+        width: 65,
+        height: 65
+    }
+};
+var TrackWidths;
+(function(TrackWidths) {
+    TrackWidths["small"] = "small";
+    TrackWidths["large"] = "large";
+    TrackWidths["full"] = "full";
+})(TrackWidths || (TrackWidths = {}));
 
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
 // This will allow us to test the JS UI without needing access to the JUCE backend
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 function normalisedToScaled({ normalisedValue, properties }) {
-    const { skew, end, start } = properties;
-    return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
+    if (properties) {
+        const { skew, end, start } = properties;
+        return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
+    } else {
+        return;
+    }
 }
 // mocks the `getnormalisedValue` method from JUCE
 // This will allow us to test the JS UI without needing access to the JUCE backend
@@ -241,24 +290,23 @@ const getValidValueForInput = ({ value, oldValue, properties })=>{
         return parseFloat(oldValue.toFixed(2));
     }
 };
-const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisabled })=>{
-    const wholeNumberNormalisedValue = normalisedValue * 100;
-    const unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
-    const bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
+const getBarTransformStyles = ({ polarity, orientation, isDisabled })=>{
     if (!isDisabled) {
         if (polarity === Polarity.unipolar) {
             return orientation === Orientation.horizontal ? {
-                width: unipolarValue ? `100%` : '1px',
+                width: '100%',
                 height: '100%',
-                transform: unipolarValue ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)` : 'none',
+                // transform: unipolarValue
+                //   ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)`
+                //   : 'none',
                 transformOrigin: 'center left',
                 top: '0',
                 bottom: '0',
                 left: '0'
             } : {
                 width: `100%`,
-                height: unipolarValue ? '100%' : '1px',
-                transform: `scale(1, ${Math.ceil(unipolarValue) * 0.01})`,
+                height: '100%',
+                // transform: `scale(1, ${Math.ceil(unipolarValue) * 0.01})`,
                 transformOrigin: 'bottom center',
                 top: '0',
                 bottom: '0',
@@ -266,17 +314,17 @@ const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisab
             };
         } else {
             return orientation === Orientation.horizontal ? {
-                width: bipolarValue ? `100%` : '1px',
+                width: '100%',
                 height: '100%',
-                transform: bipolarValue ? `scale(${bipolarValue}, 1)` : 'none',
+                // transform: bipolarValue ? `scale(${bipolarValue}, 1)` : 'none',
                 transformOrigin: 'left center',
                 top: '0',
                 bottom: '0',
                 left: '50%'
             } : {
                 width: `100%`,
-                height: bipolarValue ? '100%' : '1px',
-                transform: bipolarValue ? `scale(1, ${bipolarValue})` : 'none',
+                height: '100%',
+                // transform: bipolarValue ? `scale(1, ${bipolarValue})` : 'none',
                 transformOrigin: 'bottom center',
                 bottom: '50%',
                 left: '0',
@@ -288,36 +336,76 @@ const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisab
 const randomizeValue = (min, max)=>{
     return Math.random() * (max - min) + min;
 };
-const incrementValue = ({ incomingVal, prevVal, interval })=>{
-    const getNormalisedInterval = ()=>{
-        if (interval) {
-            if (interval >= 1) {
-                return interval * 0.01;
-            } else {
-                return interval;
-            }
+const getNormalisedInterval = (interval)=>{
+    const roundedInterval = Number(interval.toFixed(2));
+    if (roundedInterval) {
+        if (roundedInterval >= 1) {
+            return roundedInterval * 0.01;
         } else {
-            return 0.01;
+            return roundedInterval;
         }
-    };
-    const normalisedInterval = getNormalisedInterval();
-    const newValue = (prevVal ?? 0) + incomingVal * // (interval && interval.toString().length > 4
-    //   ? 4
-    //   : 0.4) *
-    normalisedInterval;
-    return parseFloat(clamp(newValue).toFixed(2));
+    } else {
+        return 0.01;
+    }
+};
+// export type IncrementPropsByType =
+//   | {
+//       incrementType: IncrementType.fine | IncrementType.standard;
+//       delta?: number;
+//       incrementBy?: never;
+//     }
+//   | {
+//       incrementType: IncrementType.buttonUp | IncrementType.buttonDown;
+//       delta?: never;
+//       incrementBy?: number;
+//     };
+// interface CommonIncrementProps {
+//   prevVal: number;
+//   interval?: number;
+//   min?: number;
+//   max?: number;
+// }
+const incrementValue = ({ incrementType, numSteps, delta, prevVal, interval, incrementBy, min = 0, max = 1 })=>{
+    const spreadDigitCount = Math.round(Math.abs(numSteps * interval)).toString().length;
+    const spread = numSteps * interval;
+    let initialSpreadMultiplier = 0.01;
+    let velocityMultiplier;
+    // let spreadMultiplier;
+    let spreadMultiplier;
+    if (spreadDigitCount <= 1) {
+        spreadMultiplier = 1;
+    } else if (spreadDigitCount === 2) {
+        spreadMultiplier = 10;
+    } else if (spreadDigitCount > 2 && spreadDigitCount > 5) {
+        spreadMultiplier = 20;
+    } else {
+        spreadMultiplier = 30;
+    }
+    if (delta && incrementType === IncrementType.fine) {
+        velocityMultiplier = Math.sign(delta);
+    } else if (delta && incrementType === IncrementType.standard) {
+        velocityMultiplier = delta * Math.max((spread ?? 0) * initialSpreadMultiplier, 0.7);
+    } else if (incrementBy && incrementType === IncrementType.button) {
+        velocityMultiplier = incrementBy;
+    } else {
+        velocityMultiplier = 0;
+    }
+    const normalisedInterval = getNormalisedInterval(interval ?? 0);
+    const newValue = (prevVal ?? 0) + velocityMultiplier * spreadMultiplier * normalisedInterval;
+    return parseFloat(newValue.toFixed(2));
+};
+const incrementIndex = ({ velocity = 0, numOptions, incrementBy, selectedIndex })=>{
+    let spreadMultiplier;
+    if (numOptions < 50) {
+        spreadMultiplier = 0.7;
+    } else if (numOptions >= 50 && numOptions < 150) {
+        spreadMultiplier = 3;
+    } else {
+        spreadMultiplier = 4;
+    }
+    const velocityMultiplier = Math.max(velocity, 1);
+    return velocity > 0.5 ? selectedIndex + incrementBy * velocityMultiplier * spreadMultiplier : selectedIndex + incrementBy;
 };
-let timerFlag = null;
-function throttle(mainFunction, delay) {
-    return (...args)=>{
-        if (timerFlag === null) {
-            mainFunction(...args);
-            timerFlag = setTimeout(()=>{
-                timerFlag = null;
-            }, delay);
-        }
-    };
-}
 const generateDropShadowFilterString = (colors, radius)=>{
     let output = [];
     if (radius) {
@@ -348,6 +436,66 @@ const getBorderValue = (borderArray, borderDirection, returnNumericValue)=>{
             return borderArray[0];
     }
 };
+const animateBarChart = ({ animationFrameRef, elementRef, prevValRef, polarity, orientation })=>{
+    return (value)=>{
+        if (animationFrameRef.current) return;
+        const wholeNumberNormalisedValue = value * 100;
+        const unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
+        const bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
+        const scaleValue = value !== null && value !== undefined ? polarity === Polarity.unipolar ? orientation === Orientation.horizontal ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)` : `scale(1, ${Math.ceil(unipolarValue) * 0.01})` : orientation === Orientation.horizontal ? `scale(${bipolarValue}, 1)` : `scale(1, ${bipolarValue})` : 'none';
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            if (elementRef.current) {
+                elementRef.current.style.transform = scaleValue;
+            }
+        });
+        prevValRef.current = value;
+        animationFrameRef.current = null;
+    };
+};
+const animateBarSliderHandle = ({ animationFrameRef, elementRef, prevValRef, margin, // polarity,
+orientation })=>{
+    return (value)=>{
+        if (animationFrameRef.current) return;
+        const wholeNumberNormalisedValue = value * 100;
+        const normalisedValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
+        const bottomValue = orientation === Orientation.horizontal ? `calc(50% - ${margin}px)` : `calc(${normalisedValue}% - ${margin}px)`;
+        const leftValue = orientation === Orientation.horizontal ? `calc(${normalisedValue}% - ${margin}px)` : `calc(50% - ${margin}px)`;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            if (elementRef.current) {
+                elementRef.current.style.bottom = bottomValue;
+                elementRef.current.style.left = leftValue;
+            }
+        });
+        prevValRef.current = value;
+        animationFrameRef.current = null;
+    };
+};
+const animateRotaryCircle = ({ animationFrameRef, elementRef, prevValRef, activeZone, polarity, circ })=>{
+    return (value)=>{
+        if (animationFrameRef.current) return;
+        const unipolarOffset = circ - activeZone * (value * 100) / 100;
+        const bipolarOffset = circ - activeZone * (value * 100 - 50) / 100;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            if (elementRef.current) {
+                elementRef.current.style.strokeDashoffset = `${polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset}`;
+            }
+        });
+        prevValRef.current = value;
+        animationFrameRef.current = null;
+    };
+};
+const animateRotaryHandle = ({ animationFrameRef, elementRef, prevValRef, handleShape })=>{
+    return (value)=>{
+        if (animationFrameRef.current) return;
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            if (elementRef.current) {
+                elementRef.current.style.transform = `${handleShape === RotarySliderHandleShapes.circle ? `rotate(${ -90 + value * 270}deg)` : `rotate(${ -225 + value * 270}deg)`}`;
+            }
+        });
+        prevValRef.current = value;
+        animationFrameRef.current = null;
+    };
+};
 
 //This component is a hack to create beveled edges on an element.
 //This will be obsolete if/when Juce's browser supports
@@ -458,11 +606,11 @@ function BevelContainer({ width, height, fillColor, highlightFillColor, cornerBe
     }
 }
 
-var css_248z$i = ".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: default;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
-styleInject(css_248z$i);
+var css_248z$j = ".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: default;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
+styleInject(css_248z$j);
 
-var css_248z$h = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
-styleInject(css_248z$h);
+var css_248z$i = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
+styleInject(css_248z$i);
 
 var ButtonType;
 (function(ButtonType) {
@@ -603,8 +751,8 @@ Button.type = ButtonType;
 Button.width = ButtonSize;
 Button.height = ButtonSize;
 
-var css_248z$g = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
-styleInject(css_248z$g);
+var css_248z$h = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
+styleInject(css_248z$h);
 
 var FlexDirection;
 (function(FlexDirection) {
@@ -650,8 +798,8 @@ var LayoutTags;
     LayoutTags["li"] = "li";
 })(LayoutTags || (LayoutTags = {}));
 
-var css_248z$f = ".divider-right:after {\n  content: '';\n  border-color: inherit;\n  border-right-width: 1px;\n  border-style: solid;\n  position: absolute;\n  right: 0;\n  height: var(--spacing-xl);\n  top: 50%;\n}\n\n.divider-left:after {\n  content: '';\n  border-color: inherit;\n  border-left-width: 1px;\n  border-style: solid;\n  position: absolute;\n  height: var(--spacing-xl);\n  right: 0;\n  top: 50%;\n}\n";
-styleInject(css_248z$f);
+var css_248z$g = ".divider-right:after {\n  content: '';\n  border-color: inherit;\n  border-right-width: 1px;\n  border-style: solid;\n  position: absolute;\n  right: 0;\n  height: var(--spacing-xl);\n  top: 50%;\n}\n\n.divider-left:after {\n  content: '';\n  border-color: inherit;\n  border-left-width: 1px;\n  border-style: solid;\n  position: absolute;\n  height: var(--spacing-xl);\n  right: 0;\n  top: 50%;\n}\n";
+styleInject(css_248z$g);
 
 var BoxDisplay;
 (function(BoxDisplay) {
@@ -734,8 +882,8 @@ Box.padding = Spacing;
 Box.flexWrap = FlexWrap;
 Box.tag = LayoutTags;
 
-var css_248z$e = ".Icon svg {\n  width: 100%;\n}\n";
-styleInject(css_248z$e);
+var css_248z$f = ".Icon svg {\n  width: 100%;\n}\n";
+styleInject(css_248z$f);
 
 var Icons;
 (function(Icons) {
@@ -1833,14 +1981,6 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
         return filteredItems;
     };
     const filteredChoices = getFilteredChoices(items, filter);
-    const incrementIndex = (velocity = 0)=>throttle(()=>{
-            const returnVal = velocity > 0.25 ? selectedIndex + 1 + velocity : selectedIndex + 1;
-            nextIndex.current = returnVal;
-        }, 90)();
-    const decrementIndex = (velocity = 0)=>throttle(()=>{
-            const returnVal = velocity > 0.5 ? selectedIndex - 1 - velocity * 10 : selectedIndex - 1;
-            nextIndex.current = returnVal;
-        }, 90)();
     // Used in RotaryCombobox
     const bindDrag = useGesture({
         onDrag: ({ direction, velocity })=>{
@@ -1859,9 +1999,23 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
                 directionY = -1;
             }
             if (selectedIndex < choices.length && directionY && directionY === 1) {
-                incrementIndex(velocity[1]);
+                // throttle(() => {
+                nextIndex.current = incrementIndex({
+                    velocity: velocity[1],
+                    incrementBy: 1,
+                    numOptions: properties?.choices?.length,
+                    selectedIndex
+                });
+            // }, 90);
             } else if (selectedIndex > 0 && directionY && directionY === -1) {
-                decrementIndex(velocity[1]);
+                // throttle(() => {
+                nextIndex.current = incrementIndex({
+                    velocity: velocity[1],
+                    incrementBy: -1,
+                    numOptions: properties?.choices?.length,
+                    selectedIndex
+                });
+            // }, 90);
             }
             // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
             if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== selectedIndex.current) {
@@ -2083,8 +2237,8 @@ function ComboboxComponent({ id, anchorTo, excludeItems = [], items, onChange, c
     }, key);
 }
 
-var css_248z$d = ".Combobox-items {\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  z-index: 50;\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n.Combobox-items::-webkit-scrollbar {\n  width: 10px;\n}\n\n.Combobox-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Combobox-button:not(:disabled),\n.Combobox-arrow:not(:disabled),\n.Combobox-button-element:not(:disabled) {\n  cursor: pointer;\n}\n";
-styleInject(css_248z$d);
+var css_248z$e = ".Combobox-items {\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  z-index: 50;\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n.Combobox-items::-webkit-scrollbar {\n  width: 10px;\n}\n\n.Combobox-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Combobox-button:not(:disabled),\n.Combobox-arrow:not(:disabled),\n.Combobox-button-element:not(:disabled) {\n  cursor: pointer;\n}\n";
+styleInject(css_248z$e);
 
 function Combobox$1({ label, showLabel, color = 'var(--color-text)', labelColor, dropdownBorderWidth, dropdownBorderColor, dropdownBackgroundColor = 'var(--bg-lv4)', dropdownItemHighlightBackground, dropdownItemHighlightColor = 'var(--color-text)', dropdownSelectedItemColor, dropdownSelectedItemBackground, buttonHighlightBackground, buttonHighlightBorderColor = 'var(--bg-lv8)', buttonBorderColor = 'var(--bg-lv7)', buttonBorderRadius = 4, buttonBorderWidth = 1, buttonCornerBevel = [
     0,
@@ -2361,8 +2515,8 @@ function Combobox({ id, key, label, showLabel = true, color, labelColor = 'var(-
 Combobox.componentType = ComponentType;
 Combobox.anchorTo = AnchorTo;
 
-var css_248z$c = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
-styleInject(css_248z$c);
+var css_248z$d = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
+styleInject(css_248z$d);
 
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -2513,45 +2667,6 @@ Input.type = InputTypes;
 Input.textAlign = TextAlign;
 Input.fontSize = FontSizes;
 
-var SliderType;
-(function(SliderType) {
-    SliderType["bar"] = "bar";
-    SliderType["rotary"] = "rotary";
-    SliderType["custom"] = "custom";
-})(SliderType || (SliderType = {}));
-var SliderRotationBehavior;
-(function(SliderRotationBehavior) {
-    SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
-    SliderRotationBehavior["rotatehandle"] = "rotatehandle";
-    SliderRotationBehavior["noRotation"] = "noRotation";
-})(SliderRotationBehavior || (SliderRotationBehavior = {}));
-var RotarySliderHandleShapes;
-(function(RotarySliderHandleShapes) {
-    RotarySliderHandleShapes["circle"] = "circle";
-    RotarySliderHandleShapes["rectangle"] = "rectangle";
-})(RotarySliderHandleShapes || (RotarySliderHandleShapes = {}));
-var RotarySliderSizes;
-(function(RotarySliderSizes) {
-    RotarySliderSizes["small"] = "small";
-    RotarySliderSizes["large"] = "large";
-})(RotarySliderSizes || (RotarySliderSizes = {}));
-const rotarySliderSizeMap = {
-    [RotarySliderSizes.small]: {
-        width: 40,
-        height: 40
-    },
-    [RotarySliderSizes.large]: {
-        width: 65,
-        height: 65
-    }
-};
-var TrackWidths;
-(function(TrackWidths) {
-    TrackWidths["small"] = "small";
-    TrackWidths["large"] = "large";
-    TrackWidths["full"] = "full";
-})(TrackWidths || (TrackWidths = {}));
-
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties = {
@@ -2559,10 +2674,23 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
     end: 15000,
     interval: 0.1,
     skew: 0.7
-}, marks, isRandomizable, randomizerObject, resetterObject, isControlGroup = false, orientation = Orientation.vertical, dragOrientation = Orientation.vertical, mockInitialNormalisedValue = 0.0, updateModSlotPreview = true, onChange, sliderElementRef, isDisabled = false })=>{
+}, marks, isRandomizable, isStandalone, randomizerObject, resetterObject, isControlGroup = false, orientation = Orientation.vertical, dragOrientation = Orientation.vertical, mockInitialNormalisedValue = 0.0, updateModSlotPreview = true, onChange, sliderElementRef, isDisabled = false })=>{
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
+    const [ctrlIsDown, setCtrlIsDown] = useState(false);
     const isLocalhost = window?.location?.hostname === 'localhost';
+    const keyDownListener = (event)=>{
+        if (event.key === 'Alt') {
+            event.preventDefault();
+            setCtrlIsDown(true);
+        }
+    };
+    const keyUpListener = (event)=>{
+        if (event.key === 'Alt') {
+            event.preventDefault();
+            setCtrlIsDown(false);
+        }
+    };
     // getNormalisedValue:
     /**
      * Returns the normalised value of the corresponding backend parameter. This value is always in the
@@ -2572,16 +2700,14 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
      * AudioProcessorParameter::getValue() (C++).
      */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
     // NOTE: We can think of this as a percentage value, in 0 to 1 format
-    const [scaledValue, setScaledValue] = useState(0);
-    // const [normalisedValue, setNormalisedValue] = useState(0);
     const [properties, setProperties] = useState();
-    const scaledValueRef = useRef(null);
-    const normalisedValueRef = useRef(null);
+    const previousScaledValueRef = useRef(null);
     const sliderState = Juce.getSliderState(id);
-    const prevValueRef = useRef(null);
-    // const randomValueSetCounter = useRef<number>(null);
-    const { highlightedItemChanged, setDefaultParameter, updateModSlotRowTarget, // setModSlotRowTarget,
-    getModSlotPreview, mainPanelrandomizerObject } = useGlobalContext();
+    // const numSteps = sliderState?.getNumSteps();
+    const [scaledValue, setScaledValue] = useState(0);
+    const [normalisedValue, setNormalisedValue] = useState(0);
+    const dragInProgress = useRef(false);
+    const { highlightedItemChanged, setDefaultParameter, updateModSlotRowTarget, getModSlotPreview, mainPanelrandomizerObject } = useGlobalContext();
     const randomizerObjectToUse = randomizerObject && Object.keys(randomizerObject).length > 0 ? randomizerObject : mainPanelrandomizerObject;
     const modSlotPreview = getModSlotPreview();
     // Set the initial state
@@ -2589,16 +2715,10 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
     useEffect(()=>{
         const setRandom = ()=>{
             const randomValue = randomizeValue(sliderState?.properties?.start, sliderState?.properties?.end);
-            const newValue = sliderState?.properties?.start === 0 && sliderState?.properties?.end === 1 ? randomValue : scaledToNormalised({
-                scaledValue: randomValue,
-                start: sliderState?.properties?.start,
-                end: sliderState?.properties?.end,
-                skew: sliderState?.properties?.skew
-            });
-            setNormalisedState(clamp(newValue));
+            setJuceScaledValue(randomValue);
         };
         const clearValue = ()=>{
-            setNormalisedState(0);
+            setJuceScaledValue(0);
         };
         if (!isLocalhost) {
             resetterObject?.subscribe(clearValue, id);
@@ -2613,41 +2733,30 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
         } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
             setProperties(mockProperties);
-            normalisedValueRef.current = mockInitialNormalisedValue;
         }
     }, []);
     // TODO: take out mod slot logic
-    const changeHandler = (normalisedValue, sliderId)=>{
-        const scaledValue = normalisedToScaled({
-            normalisedValue,
-            properties: sliderState?.properties
-        });
+    const changeHandler = (scaledValue, sliderId)=>{
         if (rowId === modSlotPreview?.targetIndex) {
             onChange && onChange(parseFloat(scaledValue.toFixed(2)), rowId);
         } else {
             onChange && onChange(parseFloat(scaledValue.toFixed(2)), sliderId);
         }
     };
-    // Update the local state from JUCE
-    const updateLocalState = ()=>{
-        const normalisedValueFromState = sliderState?.getNormalisedValue();
-        const scaledValueFromState = sliderState?.getScaledValue();
-        const scaledValue = parseFloat(scaledValueFromState.toFixed(2));
-        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
-        if (scaledValue !== prevValueRef.current) {
-            setScaledValue(scaledValue);
-            if (displayValInHeader && scaledValueRef?.current !== scaledValue && (label || properties?.name)) {
-                highlightedItemChanged({
-                    label: label || properties?.name || '',
-                    value: scaledValue
-                });
-            }
-            prevValueRef.current = scaledValue;
+    // Update JUCE state
+    const setJuceScaledValue = (newValue)=>{
+        if (previousScaledValueRef?.current !== newValue) {
+            !isLocalhost && sliderState.setScaledValue(clamp(newValue, sliderState?.properties?.start, sliderState?.properties?.end));
+            rowId && changeHandler(newValue, rowId);
+            previousScaledValueRef.current = newValue;
         }
     };
-    // Update the local state when the ID changes
+    // Rerender the component when the ID changes
     useEffect(()=>{
-        updateLocalState();
+        const sliderState = Juce.getSliderState(id);
+        setNormalisedValue(sliderState.getNormalisedValue());
+        setScaledValue(sliderState?.scaledValue);
+        setProperties(sliderState.properties);
     }, [
         id
     ]);
@@ -2655,11 +2764,24 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
     //@ts-expect-error
     useEffect(()=>{
         if (!isLocalhost) {
+            document.addEventListener('keydown', keyDownListener);
+            document.addEventListener('keyup', keyUpListener);
             const valueListenerId = sliderState?.valueChangedEvent.addListener(()=>{
-                updateLocalState();
+                const sliderState = Juce.getSliderState(id);
+                setNormalisedValue(sliderState.getNormalisedValue());
+                setScaledValue(parseFloat(sliderState?.scaledValue.toFixed(2)));
+                if (displayValInHeader && (label || properties?.name)) {
+                    highlightedItemChanged({
+                        label: label || properties?.name || '',
+                        value: parseFloat(sliderState?.scaledValue.toFixed(2))
+                    });
+                }
             });
             const propertiesListenerId = sliderState?.propertiesChangedEvent.addListener(()=>setProperties(sliderState?.properties));
+            previousScaledValueRef.current = sliderState.scaledValue;
             return ()=>{
+                document.removeEventListener('keydown', keyDownListener);
+                document.removeEventListener('keyup', keyUpListener);
                 sliderState?.valueChangedEvent.removeListener(valueListenerId);
                 sliderState?.propertiesChangedEvent.removeListener(propertiesListenerId);
             };
@@ -2668,146 +2790,61 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
         window,
         changeHandler
     ]);
-    // Update JUCE state
-    const setNormalisedState = (newValue)=>{
-        const stringValue = parseFloat(`${newValue}`);
-        if (normalisedValueRef?.current !== stringValue) {
-            !isLocalhost && sliderState.setNormalisedValue(clamp(stringValue));
-            rowId && changeHandler(newValue, rowId);
-            normalisedValueRef.current = stringValue;
-        }
-    };
     const bindDrag = useGesture({
-        onMouseEnter: ()=>{
-            if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
-                highlightedItemChanged({
-                    label: label || properties?.name || '',
-                    value: scaledValue
-                });
-            }
-        },
-        onMouseLeave: ()=>{
-            highlightedItemChanged();
-        },
-        onDrag: ({ event, delta })=>{
-            //TODO: Move this out of useSlider
-            // Sets the slider as a mod slot preview
-            if (updateModSlotPreview) {
-                updateModSlotRowTarget({
-                    rowId: modSlotPreview?.rowId,
-                    value: id
-                });
-            }
-            if (!dragInProgress) {
+        onMouseDown: ()=>{
+            if (!dragInProgress.current) {
                 sliderState.sliderDragStarted(id);
-                dragInProgress = true;
+                dragInProgress.current = true;
             }
-            const deltaVal = delta[1] * -1;
-            const newValue = incrementValue({
-                incomingVal: deltaVal,
-                prevVal: normalisedValueRef.current || 0,
-                interval: properties?.interval
-            });
-            setNormalisedState(newValue);
         },
-        onMouseUp: ({ event })=>{
-            sliderState.sliderDragEnded();
-        }
-    }, {
-        enabled: !isDisabled
-    });
-    let dragInProgress = false;
-    let hasMoved = false;
-    const bindBarSliderDrag = useGesture({
-        onMouseEnter: ()=>{
-            if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
-                highlightedItemChanged({
-                    label: label || properties?.name || '',
-                    value: scaledValue
+        onDrag: ({ event, delta })=>{
+            if (event?.buttons === 1 && dragInProgress.current) {
+                //TODO: Move this out of useSlider
+                // Sets the slider as a mod slot preview
+                if (updateModSlotPreview) {
+                    updateModSlotRowTarget({
+                        rowId: modSlotPreview?.rowId,
+                        value: id
+                    });
+                }
+                if (isStandalone && !dragInProgress?.current) {
+                    sliderState.sliderDragStarted(id);
+                }
+                const deltaVal = dragOrientation === Orientation.vertical ? delta[1] * -1 : delta[0];
+                const newValue = incrementValue({
+                    delta: deltaVal,
+                    numSteps: properties?.numSteps ?? 0,
+                    incrementType: ctrlIsDown ? IncrementType.fine : IncrementType.standard,
+                    prevVal: previousScaledValueRef.current || 0,
+                    interval: properties?.interval ?? 0,
+                    min: properties?.start,
+                    max: properties?.end
                 });
+                setJuceScaledValue(newValue);
             }
         },
         onMouseLeave: ()=>{
             highlightedItemChanged();
         },
-        onMouseDown: ({ event })=>{
-            if (!dragInProgress) {
-                sliderState.sliderDragStarted(id);
-                dragInProgress = true;
-            }
-        },
-        onDrag: ({ event, movement })=>{
-            const parentSlider = event?.target.closest('[data-sliderElement]');
-            const sliderTarget = event?.target.dataset.handle ? parentSlider : event?.target;
-            const rect = sliderTarget?.getBoundingClientRect();
-            const y = event?.clientY - rect.top;
-            const x = event?.clientX - rect.left;
-            // Sets the slider as a mod slot preview
-            if (updateModSlotPreview) {
-                updateModSlotRowTarget({
-                    rowId: modSlotPreview?.rowId,
-                    value: id
-                });
-            }
-            hasMoved = dragOrientation === Orientation.vertical ? movement[1] !== 0 : movement[0] !== 0;
-            const ignoreMoveStatus = !isControlGroup;
-            if (event.buttons === 1) {
-                if (isControlGroup) {
-                    document.body.classList.add('cursor-hidden');
-                }
-                let newValue = null;
-                if (orientation === Orientation.vertical && (hasMoved || ignoreMoveStatus)) {
-                    newValue = 1 - y / rect.height;
-                } else if (orientation === Orientation.horizontal && dragOrientation === Orientation.vertical && (hasMoved || ignoreMoveStatus)) {
-                    // console.log(movement, hasMoved, 'movementinelesif');
-                    newValue = 1 - y / rect.width;
-                } else if (hasMoved || ignoreMoveStatus) {
-                    newValue = x / rect.width;
-                }
-                newValue && setNormalisedState(clamp(newValue));
-            }
-        },
-        onMouseUp: ({ event })=>{
-            document.body.classList.remove('cursor-hidden');
-            if (dragInProgress = true) {
-                dragInProgress = false;
-                sliderState.sliderDragEnded();
-            }
+        onMouseUp: ()=>{
+            dragInProgress.current = false;
+            sliderState.sliderDragEnded();
         }
     }, {
         enabled: !isDisabled
     });
-    const bindSequenceBarSliderDrag = useGesture({
-        onMouseEnter: ({ event })=>{
-            if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
-                highlightedItemChanged({
-                    label: label || properties?.name || '',
-                    value: scaledValue
-                });
-            }
-            if (event.buttons === 1) {
-                let newValue;
-                const rect = event?.target?.getBoundingClientRect();
-                const y = event?.clientY - rect.top;
-                // const x = event?.clientX - rect.left;
-                newValue = 1 - y / rect.height;
-                setNormalisedState(clamp(newValue));
-            }
-        },
-        onMouseDown: ({ event })=>{
-            if (!dragInProgress) {
+    const bindSequenceDrag = useGesture({
+        onMouseDown: ()=>{
+            if (!dragInProgress.current) {
                 sliderState.sliderDragStarted(id);
-                dragInProgress = true;
+                dragInProgress.current = true;
             }
         },
-        onMouseLeave: ()=>{
-            highlightedItemChanged();
-        },
-        onMouseMove: ({ event })=>{
-            const rect = event?.target?.getBoundingClientRect();
-            const y = event?.clientY - rect.top;
-            const x = event?.clientX - rect.left;
+        onMove: ({ event })=>{
             if (event?.buttons === 1) {
+                const rect = event?.target?.getBoundingClientRect();
+                const y = event?.clientY - rect.top;
+                const x = event?.clientX - rect.left;
                 // TODO: Increments?
                 let newValue;
                 if (orientation === Orientation.vertical) {
@@ -2817,37 +2854,37 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
                 } else {
                     newValue = x / rect.width;
                 }
-                setNormalisedState(clamp(newValue));
+                setJuceScaledValue(newValue);
             }
         },
-        onMouseUp: ({ event })=>{
-            if (dragInProgress = true) {
-                dragInProgress = false;
-                sliderState.sliderDragEnded();
-            }
+        onMouseLeave: ()=>{
+            highlightedItemChanged();
+        },
+        onMouseUp: ()=>{
+            dragInProgress.current = false;
+            sliderState.sliderDragEnded();
         }
     }, {
         enabled: !isDisabled
     });
     const setToDefaultState = ()=>setDefaultParameter(id);
     return {
-        setNormalisedState,
+        setScaledState: setJuceScaledValue,
         setToDefaultState,
         scaledToNormalised,
-        bindBarSliderDrag,
-        bindSequenceBarSliderDrag,
         bindDrag,
-        normalisedValue: normalisedValueRef.current || 0,
+        bindSequenceDrag,
+        normalisedValue,
         scaledValue,
         properties
     };
 };
 
-var css_248z$b = ".RotarySlider {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\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}\n\n.RotarySlider-Indicator-handle {\n  position: absolute;\n  top: 3px;\n  right: 0;\n  left: 50%;\n  width: 3px;\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  width: 3px;\n  height: 6px;\n}\n\n.RotarySlider-CenterCircle {\n  position: relative;\n  border-radius: 100%;\n  border: 2px solid var(--color-gray-300);\n  /* background: var(--color-gray-800); */\n  background: radial-gradient(\n    circle at center,\n    var(--bg-lv4) 50%,\n    var(--bg-lv3) 80%\n  );\n}\n\n.RotarySlider-CenterCircle:after {\n  content: '';\n  width: 4px;\n  height: 4px;\n  background: var(--color-gray-300);\n  border-radius: 100%;\n  position: absolute;\n  left: 8px;\n  top: 3px;\n}\n\n.RotarySlider-positioning-wrapper {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -4px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  /* transform: rotate(135deg); */\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
-styleInject(css_248z$b);
+var css_248z$c = ".RotarySlider {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\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}\n\n.RotarySlider-Indicator-handle {\n  position: absolute;\n  top: 3px;\n  right: 0;\n  left: 50%;\n  width: 3px;\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  width: 3px;\n  height: 6px;\n}\n\n.RotarySlider-CenterCircle {\n  position: relative;\n  border-radius: 100%;\n  border: 2px solid var(--color-gray-300);\n  /* background: var(--color-gray-800); */\n  background: radial-gradient(\n    circle at center,\n    var(--bg-lv4) 50%,\n    var(--bg-lv3) 80%\n  );\n}\n\n.RotarySlider-CenterCircle:after {\n  content: '';\n  width: 4px;\n  height: 4px;\n  background: var(--color-gray-300);\n  border-radius: 100%;\n  position: absolute;\n  left: 8px;\n  top: 3px;\n}\n\n.RotarySlider-positioning-wrapper {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -4px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  /* transform: rotate(135deg); */\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
+styleInject(css_248z$c);
 
-var css_248z$a = "";
-styleInject(css_248z$a);
+var css_248z$b = "";
+styleInject(css_248z$b);
 
 function ControlGroup({ id, isDisabled = false, className, onChangeActiveState, children, width = 'auto' }) {
     // EXPECTED CONTROL GROUP STRUCTURE
@@ -2877,7 +2914,9 @@ function ControlGroup({ id, isDisabled = false, className, onChangeActiveState,
     const increment = ()=>{
         const normalisedVal = sliderState?.getNormalisedValue();
         const newValue = incrementValue({
-            incomingVal: 10,
+            incrementType: IncrementType.button,
+            incrementBy: 10,
+            numSteps: sliderState?.properties?.numSteps,
             prevVal: normalisedVal,
             interval: sliderState?.properties?.interval
         });
@@ -2886,7 +2925,9 @@ function ControlGroup({ id, isDisabled = false, className, onChangeActiveState,
     const decrement = ()=>{
         const normalisedVal = sliderState?.getNormalisedValue();
         const newValue = incrementValue({
-            incomingVal: -10,
+            incrementType: IncrementType.button,
+            incrementBy: -10,
+            numSteps: sliderState?.properties?.numSteps,
             prevVal: normalisedVal,
             interval: sliderState?.properties?.interval
         });
@@ -2928,8 +2969,24 @@ const ProgressCircle = ({ width, height, polarity = Polarity.unipolar, strokeWid
 indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = [], blur, indicatorLineRange, trackColor, radius, circ, activeZone, normalisedValue })=>{
     const cx = '50%';
     const cy = '51%';
-    const unipolarOffset = circ - activeZone * (normalisedValue * 100) / 100;
-    const bipolarOffset = circ - activeZone * (normalisedValue * 100 - 50) / 100;
+    const animationFrameRef = useRef(null);
+    const prevValRef = useRef(null);
+    const sliderElementRef = useRef(null);
+    const animate = animateRotaryCircle({
+        animationFrameRef,
+        elementRef: sliderElementRef,
+        polarity,
+        prevValRef,
+        activeZone,
+        circ
+    });
+    useEffect(()=>{
+        if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
+            animate(normalisedValue);
+        }
+    }, [
+        normalisedValue
+    ]);
     return jsxs("svg", {
         className: "ProgressCircle",
         width: width,
@@ -2961,6 +3018,7 @@ indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = []
                 }
             }),
             jsx("circle", {
+                ref: sliderElementRef,
                 id: "circle2",
                 className: "ProgressCircle-fg",
                 cx: cx,
@@ -2972,7 +3030,6 @@ indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = []
                     strokeDasharray: circ,
                     //   transform: `rotate(${polarity === Polarity.unipolar ? '135deg' : '270deg'})`,
                     transform: polarity === Polarity.unipolar ? 'rotate(135deg)' : 'rotate(270deg)',
-                    strokeDashoffset: polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset,
                     filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius)
                 }
             }),
@@ -3023,14 +3080,30 @@ const InnerCircle = ({ size = RotarySliderSizes.small, handleShape = RotarySlide
     const squareHandleY = size === RotarySliderSizes.small ? -31 : -62;
     const circleHandleX = size === RotarySliderSizes.small ? 16 : 20;
     const circleHandleY = size === RotarySliderSizes.small ? 16 : 20;
+    const handleElementRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const prevValRef = useRef(null);
+    const animateHandle = animateRotaryHandle({
+        animationFrameRef,
+        elementRef: handleElementRef,
+        prevValRef,
+        handleShape
+    });
+    useEffect(()=>{
+        if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
+            animateHandle(normalisedValue);
+        }
+    }, [
+        normalisedValue
+    ]);
     return jsxs("svg", {
         className: "InnerCircle",
         width: width,
         height: height,
         style: {
-            filter: `blur(${blur}px)`,
-            transform: handleShape === RotarySliderHandleShapes.circle ? `rotate(${ -90 + normalisedValue * 270}deg)` : `rotate(${ -225 + normalisedValue * 270}deg)`
+            filter: `blur(${blur}px)`
         },
+        ref: handleElementRef,
         children: [
             jsx("circle", {
                 id: "InnerCircle",
@@ -3263,7 +3336,6 @@ function RotaryCircle({ polarity = Polarity.unipolar, className, id, trackWidth
     const circ = 2 * 3.14 * radius;
     const inactiveArea = 1 - indicatorLineActiveArea;
     const activeZone = circ - circ * inactiveArea;
-    // console.log(handleShape, 'MARKERSHAPE');
     return jsx(Box, {
         id: id,
         tabIndex: 0,
@@ -3396,8 +3468,8 @@ function AnimationDataWrapper({ renderFunction, eventId, children }) {
     });
 }
 
-var css_248z$9 = ".canvasContainer {\n  --color-brand: #bb68d9;\n}\n";
-styleInject(css_248z$9);
+var css_248z$a = ".canvasContainer {\n  --color-brand: #bb68d9;\n}\n";
+styleInject(css_248z$a);
 
 // import * as d3 from 'd3';
 // import * as Juce from '@antimatter-audio/juce-framework-frontend';
@@ -3511,7 +3583,7 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
     interval: 0.1,
     skew: 0.7
 }, style }) {
-    const { bindDrag, normalisedValue, scaledValue, setToDefaultState, setNormalisedState, properties } = useSlider({
+    const { bindDrag, normalisedValue, scaledValue, setToDefaultState, setScaledState, properties } = useSlider({
         id,
         label,
         resetterObject,
@@ -3521,6 +3593,11 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
         isRandomizable,
         randomizerObject
     });
+    // console.log(
+    //   normalisedValue,
+    //   scaledValue,
+    //   'normalisedValuenormalisedValuenormalisedValuenormalisedValuenormalisedValue',
+    // );
     // const defaultGradientColor =
     //   size === RotarySliderSizes.large
     //     ? GradientStyles.multicolor
@@ -3600,13 +3677,7 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
                         maxWidth: `${rotarySliderSizeMap?.[size]?.width}px`
                     },
                     onComplete: (value)=>{
-                        const normalisedVal = properties && scaledToNormalised({
-                            scaledValue: value,
-                            start: properties?.start,
-                            end: properties?.end,
-                            skew: properties?.skew
-                        });
-                        normalisedVal !== undefined && setNormalisedState(normalisedVal);
+                        value !== undefined && setScaledState(value);
                     }
                 })
             ]
@@ -3619,8 +3690,8 @@ RotarySlider.handleShape = RotarySliderHandleShapes;
 RotarySlider.gradient = GradientStyles;
 RotarySlider.trackWidth = TrackWidths;
 
-var css_248z$8 = ".BarSlider-innerWrapper:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n.BarSlider-Handle {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSliderHandle {\n  pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n  /* border-radius: var(--trackBorderRadius); */\n  overflow: hidden;\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
-styleInject(css_248z$8);
+var css_248z$9 = ".BarSlider-innerWrapper:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n.BarSlider-Handle {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSliderHandle {\n  pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n  /* border-radius: var(--trackBorderRadius); */\n  overflow: hidden;\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
+styleInject(css_248z$9);
 
 function Slider$1({ polarity = Polarity.unipolar, orientation = Orientation.vertical, dragOrientation, isRandomizable = false, randomizerObject, isStandalone = true, isHighlighted = false, showValue = true, showHandle = true, showLabel = true, showInsetBoxShadow = true, resetterObject, className, id, width, height = '100%', onChange, outerGlowRadius, outerGlowColors, trackBorderRadius = 20, blur, style, indicatorLineColor = 'var(--color-brand)', indicatorLineGradient, trackColor = 'var(--bg-lv3)', markColor = 'var(--bg-lv7)', markHighlightColor = 'var(--color-text)', trackStrokeColor, handleFillColor, handleStrokeColor, trackWidth = TrackWidths.small, label, labelColor, marks = [], inputHighlightColor = 'var(--color-brand)', includeValueInHeight = true, // Mocks the initial scaled value of the slider for web veiws outside of JUCE
 mockInitialNormalisedValue = 0, mockProperties = {
@@ -3630,11 +3701,57 @@ mockInitialNormalisedValue = 0, mockProperties = {
     skew: 0.7
 } }) {
     const sliderElementRef = useRef(null);
+    const handleElementRef = useRef(null);
+    const barSliderIndicatorRef = useRef(null);
     const isHorizontal = orientation === Orientation.horizontal;
     const isVertical = orientation === Orientation.vertical;
     const handleWidth = 18;
+    const handleMargin = handleWidth / 2;
     const defaultDragOrientation = orientation;
     const [hoveredMark, setHoveredMark] = useState();
+    // const elementRef = useRef<HTMLDivElement>(null);
+    const animationFrameRef = useRef(null);
+    const prevValRef = useRef(null);
+    const animate = animateBarChart({
+        animationFrameRef,
+        elementRef: barSliderIndicatorRef,
+        prevValRef,
+        polarity,
+        orientation
+    });
+    const animateHandle = animateBarSliderHandle({
+        animationFrameRef,
+        elementRef: handleElementRef,
+        prevValRef,
+        orientation,
+        margin: handleMargin
+    });
+    const { bindDrag, bindSequenceDrag, // bindSequenceBarSliderDrag,
+    // bindDrag,
+    normalisedValue, scaledValue, setScaledState, properties } = useSlider({
+        id,
+        label,
+        mockProperties,
+        resetterObject,
+        mockInitialNormalisedValue,
+        onChange,
+        isStandalone,
+        isRandomizable,
+        randomizerObject,
+        orientation: orientation,
+        dragOrientation: dragOrientation || defaultDragOrientation,
+        sliderElementRef,
+        marks
+    });
+    const drag = isStandalone ? bindDrag : bindSequenceDrag;
+    useEffect(()=>{
+        if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
+            animate(normalisedValue);
+            animateHandle(normalisedValue);
+        }
+    }, [
+        normalisedValue
+    ]);
     const trackWidthMap = {
         small: 5,
         large: 10
@@ -3646,29 +3763,12 @@ mockInitialNormalisedValue = 0, mockProperties = {
     //       ? trackWidthMap[trackWidth]
     //       : 0
     //     : trackWidth;
-    const handleMargin = handleWidth / 2;
     const multiColorGradient = `linear-gradient(${isHorizontal ? 'to right' : 'to top'}, var(--color-brand) 0%, var(--color-brand-secondary) 100%`;
     const singleColorGradient = `linear-gradient(${isHorizontal ? 'to right' : 'to top'}, var(--color-brand-700) 0%, var(--color-brand) 100%`;
     const selectedGradientMap = {
         [GradientStyles.multicolor]: multiColorGradient,
         [GradientStyles.unicolor]: singleColorGradient
     };
-    const { bindBarSliderDrag, bindSequenceBarSliderDrag, // bindDrag,
-    normalisedValue, scaledValue, setNormalisedState, properties } = useSlider({
-        id,
-        label,
-        mockProperties,
-        resetterObject,
-        mockInitialNormalisedValue,
-        onChange,
-        isRandomizable,
-        randomizerObject,
-        orientation: orientation,
-        dragOrientation: dragOrientation || defaultDragOrientation,
-        sliderElementRef,
-        marks
-    });
-    const drag = isStandalone ? bindBarSliderDrag : bindSequenceBarSliderDrag;
     // const handleRef = useRef(null);
     // useEffect(() => {
     //   console.log(normalisedValue, 'NORMALIZEDVAL');
@@ -3745,7 +3845,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
                                     onMouseEnter: ()=>setHoveredMark(item?.label),
                                     onMouseLeave: ()=>setHoveredMark(null),
                                     onClick: ()=>{
-                                        setNormalisedState(item?.value);
+                                        setScaledState(scaledValue);
                                     }
                                 }),
                                 item?.label ? jsx(Label, {
@@ -3757,7 +3857,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
                                     color: +normalisedValue.toFixed(2) === +item?.value.toFixed(2) || hoveredMark === item?.label ? markHighlightColor : markColor,
                                     highlightColor: markHighlightColor,
                                     onClick: ()=>{
-                                        setNormalisedState(item?.value);
+                                        setScaledState(scaledValue);
                                     },
                                     style: {
                                         cursor: 'pointer',
@@ -3771,7 +3871,8 @@ mockInitialNormalisedValue = 0, mockProperties = {
                         height: isHorizontal && showHandle ? `${handleWidth}px` : isHorizontal && !showHandle ? 'auto' : '100%',
                         width: isVertical && showHandle ? `${handleWidth}px` : '100%',
                         style: {
-                            filter: `blur(${blur}px)`
+                            filter: `blur(${blur}px)`,
+                            touchAction: 'none'
                         },
                         "data-sliderElement": "true",
                         ...drag(),
@@ -3802,6 +3903,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
                                     children: jsx("div", {
                                         // TODO: Why aren't the Tailwind classes working?
                                         // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
+                                        ref: barSliderIndicatorRef,
                                         className: "BarSlider-IndicatorLine",
                                         style: {
                                             background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
@@ -3811,8 +3913,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
                                             filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
                                             ...getBarTransformStyles({
                                                 orientation: orientation,
-                                                polarity,
-                                                normalisedValue: normalisedValue
+                                                polarity
                                             })
                                         }
                                     })
@@ -3827,11 +3928,10 @@ mockInitialNormalisedValue = 0, mockProperties = {
                                         zIndex: 2
                                     },
                                     children: jsx("div", {
+                                        ref: handleElementRef,
                                         className: "BarSlider-Handle",
                                         style: {
-                                            borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none',
-                                            bottom: isHorizontal ? `calc(50% - ${handleMargin}px)` : `calc(${normalisedValue * 100}% - ${handleMargin}px)`,
-                                            left: isHorizontal ? `calc(${normalisedValue * 100}% - ${handleMargin}px)` : `calc(50% - ${handleMargin}px)`
+                                            borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none'
                                         },
                                         children: jsx(BarSliderHandle, {
                                             handleFillColor: handleFillColor,
@@ -3863,14 +3963,8 @@ mockInitialNormalisedValue = 0, mockProperties = {
                 textAlign: Input.textAlign.center,
                 onComplete: (value)=>{
                     // normalisedValue !== undefined &&
-                    //   setNormalisedState(normalisedValue);
-                    const normalisedVal = properties && scaledToNormalised({
-                        scaledValue: value,
-                        start: properties?.start,
-                        end: properties?.end,
-                        skew: properties?.skew
-                    });
-                    normalisedVal !== undefined && setNormalisedState(normalisedVal);
+                    //   setScaledState(normalisedValue);
+                    value !== undefined && setScaledState(value);
                 }
             }) : null
         ]
@@ -4219,8 +4313,8 @@ function Toggle({ id, isDisabled = false, onChange, className, width = ButtonSiz
 Toggle.width = ButtonSize;
 Toggle.height = ButtonSize;
 
-var css_248z$7 = ".ThemeWrapper {\n  position: relative;\n  width: 100%;\n}\n.CRTStyle {\n  background: radial-gradient(\n    circle,\n    rgba(165, 73, 64, 0.1) 2%,\n    rgba(55, 24, 21, 0.1) 71%,\n    rgba(31, 12, 11, 0.1) 80%\n  );\n}\n.CRTStyle::before {\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n    linear-gradient(\n      90deg,\n      rgba(255, 0, 0, 0.06),\n      rgba(0, 255, 0, 0.02),\n      rgba(0, 0, 255, 0.06)\n    );\n  z-index: 100;\n  background-size:\n    100% 2px,\n    3px 100%;\n  pointer-events: none;\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = ".ThemeWrapper {\n  position: relative;\n  width: 100%;\n}\n.CRTStyle {\n  background: radial-gradient(\n    circle,\n    rgba(165, 73, 64, 0.1) 2%,\n    rgba(55, 24, 21, 0.1) 71%,\n    rgba(31, 12, 11, 0.1) 80%\n  );\n}\n.CRTStyle::before {\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n    linear-gradient(\n      90deg,\n      rgba(255, 0, 0, 0.06),\n      rgba(0, 255, 0, 0.02),\n      rgba(0, 0, 255, 0.06)\n    );\n  z-index: 100;\n  background-size:\n    100% 2px,\n    3px 100%;\n  pointer-events: none;\n}\n";
+styleInject(css_248z$8);
 
 var Themes;
 (function(Themes) {
@@ -4306,8 +4400,8 @@ function KeyValueDisplayScreen({ className, style, data }) {
     });
 }
 
-var css_248z$6 = ".Oscilloscope {\n  background: #1f9b9f;\n  height: 200px;\n}\n";
-styleInject(css_248z$6);
+var css_248z$7 = ".Oscilloscope {\n  background: #1f9b9f;\n  height: 200px;\n}\n";
+styleInject(css_248z$7);
 
 function Ticks({ xScale, yScale, innerHeight, innerWidth, centerLine = true, strokeColor = 'var(--color-brand-900)', strokeStyle, centerLineColor = 'var(--color-brand-900)', tickFormat, numberOfTicks = 25, tickOffset = 0 }) {
     const dashArray = '2,3';
@@ -4958,11 +5052,11 @@ function Oscilloscope({ width = 200, height = 200, className, style, id }) {
     });
 }
 
-var css_248z$5 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-lv3);\n  font-weight: normal;\n  font-family: var(--font-leagueSpartan);\n  max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n  /* border: 2px solid var(--color-brand); */\n  border-radius: 3px;\n  height: 30px;\n  font-size: var(--text-md);\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n    color: var(--color-brand);\n  }\n}\n\n#advancedLayoutButton.selected {\n  color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n  /* display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25; */\n}\n";
-styleInject(css_248z$5);
+var css_248z$6 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-lv3);\n  font-weight: normal;\n  font-family: var(--font-leagueSpartan);\n  max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n  /* border: 2px solid var(--color-brand); */\n  border-radius: 3px;\n  height: 30px;\n  font-size: var(--text-md);\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n    color: var(--color-brand);\n  }\n}\n\n#advancedLayoutButton.selected {\n  color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n  /* display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25; */\n}\n";
+styleInject(css_248z$6);
 
-var css_248z$4 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\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: 288px;\n  color: var(--color-text);\n  background: var(--bg-lv4);\n  z-index: 150;\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--bg-lv4);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 288px;\n}\n\n.PresetManagerListItem:hover {\n  background: var(--bg-lv7);\n}\n.PresetManagerListItem.isSelected {\n  color: var(--color-brand);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: calc(288px - 30px);\n}\n";
-styleInject(css_248z$4);
+var css_248z$5 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\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: 288px;\n  color: var(--color-text);\n  background: var(--bg-lv4);\n  z-index: 150;\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--bg-lv4);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 288px;\n}\n\n.PresetManagerListItem:hover {\n  background: var(--bg-lv7);\n}\n.PresetManagerListItem.isSelected {\n  color: var(--color-brand);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: calc(288px - 30px);\n}\n";
+styleInject(css_248z$5);
 
 function PresetManager({}) {
     const [presetList, setPresetList] = useState([]);
@@ -5395,8 +5489,8 @@ function ModuleHeader({ ModuleTitle, className, style }) {
     });
 }
 
-var css_248z$3 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n  background: var(--bg-lv4);\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n  opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  left: 0px;\n  /* height: 150px; */\n  /* width: 100%; */\n  color: var(--color-text);\n  /* -ms-overflow-style: none; */\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n  width: 10px;\n}\n\n.ModMatrixComboboxItem {\n  display: flex;\n  align-items: center;\n  background: var(--bg-lv4);\n  padding: 0 var(--spacing-md);\n  width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
-styleInject(css_248z$3);
+var css_248z$4 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n  background: var(--bg-lv4);\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n  opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  left: 0px;\n  /* height: 150px; */\n  /* width: 100%; */\n  color: var(--color-text);\n  /* -ms-overflow-style: none; */\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n  width: 10px;\n}\n\n.ModMatrixComboboxItem {\n  display: flex;\n  align-items: center;\n  background: var(--bg-lv4);\n  padding: 0 var(--spacing-md);\n  width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
+styleInject(css_248z$4);
 
 const targetColors = [
     'var(--color-brand)',
@@ -5499,9 +5593,29 @@ function ModMatrixToggleCell({ modifier, isDisabled = false, rowId, color, style
     });
 }
 
+var css_248z$3 = ".SingleBarViz-Wrapper::after {\n  content: '';\n  position: absolute;\n  left: calc(50% - 1px);\n  width: 1px;\n  height: 100%;\n  background: inherit;\n  filter: brightness(1%);\n}\n";
+styleInject(css_248z$3);
+
 function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor = 'var(--color-brand)', height = '6px', isDisabled, polarity = Polarity.unipolar, orientation = Orientation.horizontal, value, className, style }) {
+    const elementRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const prevValRef = useRef(null);
+    const animate = animateBarChart({
+        animationFrameRef,
+        elementRef,
+        prevValRef,
+        polarity,
+        orientation
+    });
+    useEffect(()=>{
+        if (value !== null && value !== undefined && value !== prevValRef.current) {
+            animate(value);
+        }
+    }, [
+        value
+    ]);
     return jsx("div", {
-        className: className,
+        className: `SingleBarViz-Wrapper ${className}`,
         style: {
             width: '100%',
             height,
@@ -5510,14 +5624,14 @@ function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor =
         },
         children: jsx("div", {
             className: "SingleBarViz",
+            ref: elementRef,
             style: {
                 position: 'absolute',
                 background: sliderColor,
                 ...getBarTransformStyles({
                     isDisabled,
                     polarity,
-                    orientation,
-                    normalisedValue: value || 0
+                    orientation
                 }),
                 ...style
             }
@@ -5525,11 +5639,12 @@ function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor =
     });
 }
 SingleBarViz.polarity = Polarity;
+SingleBarViz.orientation = Orientation;
 
 function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
     const { setDefaultParameter, updateModSlotRowTarget, globalState: { modSlotTargets } } = useGlobalContext();
     const [_, setIsActive] = useState(false);
-    const { bindBarSliderDrag, normalisedValue, scaledValue, properties, setNormalisedState } = useSlider({
+    const { bindDrag, normalisedValue, scaledValue, properties, setScaledState } = useSlider({
         id: modifier,
         rowId,
         updateModSlotPreview: false,
@@ -5562,7 +5677,7 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
                 ...style
             },
             height: '2.5rem',
-            ...bindBarSliderDrag(),
+            ...bindDrag(),
             onDoubleClick: ()=>setDefaultParameter(modifier),
             children: [
                 jsx(Box, {
@@ -5586,13 +5701,7 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
                             marginBottom: 'var(--spacing-sm)'
                         },
                         onComplete: (value)=>{
-                            const normalisedVal = properties && scaledToNormalised({
-                                scaledValue: value,
-                                start: properties?.start,
-                                end: properties?.end,
-                                skew: properties?.skew
-                            });
-                            normalisedVal !== undefined && setNormalisedState(normalisedVal);
+                            value !== undefined && setScaledState(value);
                         }
                     })
                 }),
@@ -5602,21 +5711,13 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
                         pointerEvents: 'none'
                     },
                     children: jsx(SingleBarViz, {
-                        value: modifier?.value || 0,
+                        value: normalisedValue || 0,
                         polarity: SingleBarViz?.polarity?.bipolar,
+                        orientation: SingleBarViz?.orientation?.horizontal,
                         // backgroundColor={
                         //   isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
                         // }
-                        sliderColor: color,
-                        style: {
-                            alignSelf: 'flex-end',
-                            pointerEvents: 'none',
-                            ...getBarTransformStyles({
-                                orientation: Orientation?.horizontal,
-                                polarity: Polarity?.bipolar,
-                                normalisedValue
-                            })
-                        }
+                        sliderColor: color
                     })
                 })
             ]