lexgui 0.1.41 → 0.1.43

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.41",
+        version: "0.1.43",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -29,16 +29,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     LX.CURVE_MOVEOUT_DELETE = 1;
 
     function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
-    function round( number, precision ) { return +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
+    function round( number, precision ) { return precision == 0 ? Math.floor( number ) : +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
     function remapRange( oldValue, oldMin, oldMax, newMin, newMax ) { return ((( oldValue - oldMin ) * ( newMax - newMin )) / ( oldMax - oldMin )) + newMin; }
 
     LX.clamp = clamp;
     LX.round = round;
     LX.remapRange = remapRange;
-    
+
     function getSupportedDOMName( string )
     {
-        return string.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', ''); 
+        return string.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
     }
 
     LX.getSupportedDOMName = getSupportedDOMName;
@@ -51,15 +51,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     LX.has = has;
 
     function getExtension( s )
-    { 
+    {
         return s.includes('.') ? s.split('.').pop() : null;
     }
 
     LX.getExtension = getExtension;
 
     function deepCopy( o )
-    { 
-        return JSON.parse(JSON.stringify(o)) 
+    {
+        return JSON.parse(JSON.stringify(o))
     }
 
     LX.deepCopy = deepCopy;
@@ -97,9 +97,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         const blue = parseInt( hexStr.substring( 5, 7 ), 16 ) / 255;
         return [ red, green, blue ];
     }
-    
+
     LX.hexToRgb = hexToRgb;
-    
+
     function rgbToHex( rgb ) {
         let hex = "#";
         for( let c of rgb ) {
@@ -108,7 +108,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
         return hex;
     }
-    
+
     LX.rgbToHex = rgbToHex;
 
     function measureRealWidth( value, paddingPlusMargin = 8 ) {
@@ -169,10 +169,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.x = x ?? 0;
             this.y = y ?? ( x ?? 0 );
         }
-    
+
         get xy() { return [ this.x, this.y ]; }
         get yx() { return [ this.y, this.x ]; }
-    
+
         set ( x, y ) { this.x = x; this.y = y; }
         add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
         sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
@@ -279,7 +279,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 onDragStart( currentTarget, e );
             }
         }, false );
-        
+
         document.addEventListener( 'mouseup', () => {
             if( currentTarget )
             {
@@ -288,82 +288,95 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         } );
     }
-    
+
     LX.makeDraggable = makeDraggable;
 
     function create_global_searchbar( root ) {
 
-        let global_search = document.createElement("div");
-        global_search.id = "global_search";
-        global_search.className = "hidden";
-        global_search.tabIndex = -1;
-        root.appendChild( global_search );
+        let globalSearch = document.createElement("div");
+        globalSearch.id = "global-search";
+        globalSearch.className = "hidden";
+        globalSearch.tabIndex = -1;
+        root.appendChild( globalSearch );
 
         let allItems = [];
         let hoverElId = null;
 
-        global_search.addEventListener('keydown', function(e) {
+        globalSearch.addEventListener('keydown', function( e ) {
             e.stopPropagation();
             e.stopImmediatePropagation();
             hoverElId = hoverElId ?? -1;
-            if( e.key == 'Escape' ) {
+            if( e.key == 'Escape' )
+            {
                 this.classList.add("hidden");
-                reset_bar(true);
+                _resetBar( true );
             }
-            else if( e.key == 'Enter' ) {
+            else if( e.key == 'Enter' )
+            {
                 const el = allItems[ hoverElId ];
-                if(el) {
-                    const is_checkbox = (el.item.type && el.item.type === 'checkbox');
+                if( el )
+                {
+                    const isCheckbox = (el.item.type && el.item.type === 'checkbox');
                     this.classList.toggle('hidden');
-                    if(is_checkbox)  {
+                    if( isCheckbox )
+                    {
                         el.item.checked = !el.item.checked;
-                        el.callback.call(window, el.item.checked, el.entry_name);
+                        el.callback.call( window, el.item.checked, el.entry_name );
                     }
                     else
-                        el.callback.call(window, el.entry_name);
+                    {
+                        el.callback.call( window, el.entry_name );
+                    }
                 }
             }
-            else if ( e.key == 'ArrowDown' && hoverElId < (allItems.length - 1) ) {
+            else if ( e.key == 'ArrowDown' && hoverElId < (allItems.length - 1) )
+            {
                 hoverElId++;
-                global_search.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+                globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
                 allItems[ hoverElId ].classList.add('hovered');
 
                 let dt = allItems[ hoverElId ].offsetHeight * (hoverElId + 1) - itemContainer.offsetHeight;
-                if( dt > 0) {
+                if( dt > 0 )
+                {
                     itemContainer.scrollTo({
                         top: dt,
                         behavior: "smooth",
                     });
                 }
 
-            } else if ( e.key == 'ArrowUp' && hoverElId > 0 ) {
+            } else if ( e.key == 'ArrowUp' && hoverElId > 0 )
+            {
                 hoverElId--;
-                global_search.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+                globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
                 allItems[ hoverElId ].classList.add('hovered');
             }
         });
 
-        global_search.addEventListener('focusout', function(e) {
-           if(e.relatedTarget == e.currentTarget) return;
+        globalSearch.addEventListener('focusout', function( e ) {
+            if( e.relatedTarget == e.currentTarget )
+            {
+                return;
+            }
             e.stopPropagation();
             e.stopImmediatePropagation();
-            this.classList.add("hidden");
-            reset_bar(true);
+            this.classList.add( "hidden" );
+            _resetBar( true );
         });
 
         root.addEventListener('keydown', e => {
-            if( e.key == ' ' && e.ctrlKey ) {
+            if( e.key == ' ' && e.ctrlKey )
+            {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
-                global_search.classList.toggle('hidden');
-                global_search.querySelector('input').focus();
-                add_elements( undefined );
+                globalSearch.classList.toggle('hidden');
+                globalSearch.querySelector('input').focus();
+                _addElements( undefined );
             }
             else
             {
                 for( let c of LX.components )
                 {
-                    if( !LX[c] || !LX[c].prototype.onKeyPressed )
+                    if( !LX[ c ] || !LX[ c ].prototype.onKeyPressed )
                     {
                         continue;
                     }
@@ -377,36 +390,68 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         });
 
-        let icon = document.createElement("a");
+        const header = document.createElement( "div" );
+        header.className = "gs-header";
+
+        const icon = document.createElement("a");
         icon.className = "fa-solid fa-magnifying-glass";
+        header.appendChild( icon );
 
-        let input = document.createElement("input");
+        const input = document.createElement("input");
         input.placeholder = "Search...";
         input.value = "";
+        header.appendChild( input );
+
+        const tabArea = new Area( {
+            width: "100%",
+            skipAppend: true,
+            className: "gs-tabs"
+        } );
+
+        const gsTabs = tabArea.addTabs();
+        let gsFilter = null;
+
+        // These tabs will serve as buttons by now
+        // Filter stuff depending of the type of search
+        {
+            const _onSelectTab = ( e, tabName ) => {
+                gsFilter = tabName;
+            }
+
+            gsTabs.add( "All", document.createElement('div'), { selected: true, onSelect: _onSelectTab } );
+            // gsTabs.add( "Main", document.createElement('div'), { onSelect: _onSelectTab } );
+        }
 
-        let itemContainer = document.createElement("div");
+        const itemContainer = document.createElement("div");
         itemContainer.className = "searchitembox";
 
-        let ref_previous;
+        let refPrevious = null;
 
-        const reset_bar = (reset_input) => {
+        const _resetBar = (reset_input) => {
             itemContainer.innerHTML = "";
             allItems.length = 0;
             hoverElId = null;
             if(reset_input) input.value = "";
         }
 
-        const add_element = (t, c, p, i) => {
-            if(!t.length) return;
+        const _addElement = ( t, c, p, i ) => {
 
-            if(ref_previous) ref_previous.classList.remove('last');
+            if( !t.length )
+            {
+                return;
+            }
+
+            if( refPrevious ) refPrevious.classList.remove('last');
 
             let searchItem = document.createElement("div");
             searchItem.className = "searchitem last";
-            const is_checkbox = (i && i.type && i.type === 'checkbox');
-            if(is_checkbox) {
+            const isCheckbox = (i && i.type && i.type === 'checkbox');
+            if( isCheckbox )
+            {
                 searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + p + t + "</span>"
-            } else {
+            }
+            else
+            {
                 searchItem.innerHTML = p + t;
             }
             searchItem.entry_name = t;
@@ -414,29 +459,32 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             searchItem.item = i;
             searchItem.addEventListener('click', function(e) {
                 this.callback.call(window, this.entry_name);
-                global_search.classList.toggle('hidden');
-                reset_bar(true);
+                globalSearch.classList.toggle('hidden');
+                _resetBar( true );
             });
             searchItem.addEventListener('mouseenter', function(e) {
-                global_search.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+                globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
                 this.classList.add('hovered');
-                hoverElId = allItems.indexOf(this);
+                hoverElId = allItems.indexOf( this );
             });
             searchItem.addEventListener('mouseleave', function(e) {
                 this.classList.remove('hovered');
             });
             allItems.push( searchItem );
-            itemContainer.appendChild(searchItem);
-            ref_previous = searchItem;
+            itemContainer.appendChild( searchItem );
+            refPrevious = searchItem;
         }
 
-        const propagate_add = ( item, filter, path ) => {
+        const _propagateAdd = ( item, filter, path ) => {
 
             const key = Object.keys( item )[ 0 ];
             let name = item.name ?? path + key;
-            if( name.toLowerCase().includes( filter ) ) {
+            if( name.toLowerCase().includes( filter ) )
+            {
                 if( item.callback )
-                    add_element( item.name ?? key, item.callback, path, item );
+                {
+                    _addElement( item.name ?? key, item.callback, path, item );
+                }
             }
 
             // is sidebar..
@@ -446,33 +494,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             path += key + " > ";
 
             for( let c of item[ key ] )
-                propagate_add( c, filter, path );
+                _propagateAdd( c, filter, path );
         };
 
-        const add_elements = filter => {
-            
-            reset_bar();
+        const _addElements = filter => {
+
+            _resetBar();
 
             for( let m of LX.menubars )
-                for( let i of m.items ) {
-                    propagate_add( i, filter, "" );
+            {
+                for( let i of m.items )
+                {
+                    _propagateAdd( i, filter, "" );
                 }
+            }
 
             if( LX.has('CodeEditor') )
             {
                 const instances = LX.CodeEditor.getInstances();
                 if(!instances.length) return;
-    
+
                 const languages = instances[ 0 ].languages;
-    
+
                 for( let l of Object.keys( languages ) ) {
-    
+
                     const key = "Language: " + l;
                     const icon = instances[ 0 ]._getFileIcon( null, languages[ l ].ext );
-    
+
                     let value = icon.includes( 'fa-' ) ? "<i class='" + icon + "'></i>" :
                             "<img src='" + ( "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon ) + "'>";
-    
+
                     value += key + " <span class='lang-ext'>(" + languages[ l ].ext + ")</span>";
                     if( key.toLowerCase().includes( filter ) ) {
                         add_element( value, () => {
@@ -486,22 +537,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         input.addEventListener('input', function(e) {
-            add_elements( this.value.toLowerCase() );
+            _addElements( this.value.toLowerCase() );
         });
-        
-        global_search.appendChild(icon);
-        global_search.appendChild(input);
-        global_search.appendChild(itemContainer);
 
-        return global_search;
+        globalSearch.appendChild( header );
+        globalSearch.appendChild( tabArea.root );
+        globalSearch.appendChild( itemContainer );
+
+        return globalSearch;
     }
 
     /**
      * @method init
-     * @param {Object} options 
+     * @param {Object} options
      * container: Root location for the gui (default is the document body)
      * id: Id of the main area
-     * skip_default_area: Skip creation of main area
+     * skipRoot: Skip adding LX root container
+     * skipDefaultArea: Skip creation of main area
      */
 
     function init( options = { } )
@@ -514,7 +566,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         var root = document.createElement( 'div' );
         root.id = "lexroot";
         root.tabIndex = -1;
-        
+
         var modal = document.createElement( 'div' );
         modal.id = "modal";
 
@@ -526,15 +578,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
 
         this.modal.classList.add( 'hiddenOpacity' );
-        this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };  
+        this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
         if( options.container )
             this.container = document.getElementById( options.container );
-            
+
         this.global_search = create_global_searchbar( this.container );
 
         this.container.appendChild( modal );
-        this.container.appendChild( root );
+
+        if( !options.skipRoot )
+        {
+            this.container.appendChild( root );
+        }
 
         // Disable drag icon
         root.addEventListener( 'dragover', function( e ) {
@@ -546,7 +602,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         var link = document.createElement( 'link' );
         link.rel = 'stylesheet';
         link.type = 'text/css';
-        link.href = 'https://use.fontawesome.com/releases/v6.6.0/css/all.css';
+        link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/all.css';
         head.appendChild( link );
 
         // Global vars
@@ -557,8 +613,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         this.ready = true;
         this.menubars = [ ];
 
-        if( !options.skip_default_area )
+        if( !options.skipRoot && !options.skipDefaultArea )
+        {
             this.main_area = new Area( { id: options.id ?? 'mainarea' } );
+        }
 
         return this.main_area;
     }
@@ -567,33 +625,35 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     /**
      * @method message
-     * @param {String} text 
+     * @param {String} text
      * @param {String} title (Optional)
-     * @param {*} options 
+     * @param {*} options
      * id: Id of the message dialog
      * position: Dialog position in screen [screen centered]
      * draggable: Dialog can be dragged [false]
      */
 
-    function message(text, title, options = {})
+    function message( text, title, options = {} )
     {
-        if(!text)
-            throw("No message to show");
+        if( !text )
+        {
+            throw( "No message to show" );
+        }
 
         options.modal = true;
 
-        return new Dialog(title, p => {
-            p.addTextArea(null, text, null, { disabled: true, fitHeight: true  });
-        }, options);
+        return new Dialog( title, p => {
+            p.addTextArea( null, text, null, { disabled: true, fitHeight: true  } );
+        }, options );
     }
 
     LX.message = message;
 
     /**
      * @method popup
-     * @param {String} text 
+     * @param {String} text
      * @param {String} title (Optional)
-     * @param {*} options 
+     * @param {*} options
      * id: Id of the message dialog
      * time: (Number) Delay time before close automatically (ms). Defalut: [3000]
      * position: (Array) [x,y] Dialog position in screen. Default: [screen centered]
@@ -610,19 +670,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         options.size = options.size ?? [ "auto", "auto" ];
         options.class = "lexpopup";
 
-        const time = options.timeout || 3000; 
+        const time = options.timeout || 3000;
         const dialog = new Dialog( title, p => {
             p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
         }, options );
-        
+
         dialog.root.classList.add( 'fadein' );
         setTimeout(() => {
             dialog.root.classList.remove( 'fadein' );
             dialog.root.classList.add( 'fadeout' );
         }, time - 1000 );
-        
+
         setTimeout( dialog.close, time );
-        
+
         return dialog;
     }
 
@@ -630,9 +690,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     /**
      * @method prompt
-     * @param {String} text 
+     * @param {String} text
      * @param {String} title (Optional)
-     * @param {*} options 
+     * @param {*} options
      * id: Id of the prompt dialog
      * position: Dialog position in screen [screen centered]
      * draggable: Dialog can be dragged [false]
@@ -664,7 +724,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
                     dialog.close();
                     prompt( text, title, callback, options );
-                }else
+                }
+                else
                 {
                     if( callback ) callback.call( this, value );
                     dialog.close();
@@ -680,7 +741,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         {
             dialog.root.querySelector( 'input' ).focus();
         }
-        
+
         return dialog;
     }
 
@@ -719,7 +780,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.value = value;
             this.multiple = false; // Multiple selection
         }
-        
+
         string() {
             switch( this.type )
             {
@@ -743,7 +804,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         const data = LX.signals[ signalName ];
 
         if( !data )
-        return;
+        {
+            return;
+        }
 
         const target = options.target;
 
@@ -762,7 +825,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if( obj.constructor === Widget )
             {
                 obj.set( value, options.skipCallback ?? true );
-                
+
                 if( obj.options && obj.options.callback )
                 {
                     obj.options.callback( value, data );
@@ -779,13 +842,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function addSignal( name, obj, callback )
     {
-        obj[name] = callback;
+        obj[ name ] = callback;
 
         if( !LX.signals[ name ] )
+        {
             LX.signals[ name ] = [];
-        
+        }
+
         if( LX.signals[ name ].indexOf( obj ) > -1 )
+        {
             return;
+        }
 
         LX.signals[ name ].push( obj );
     }
@@ -800,12 +867,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         /**
          * @constructor Area
-         * @param {*} options 
+         * @param {*} options
          * id: Id of the element
          * className: Add class to the element
          * width: Width of the area element [fit space]
          * height: Height of the area element [fit space]
-         * no_append: Create but not append to GUI root [false]
+         * skipAppend: Create but not append to GUI root [false]
+         * minWidth: Minimum width to be applied when resizing
+        * minHeight: Minimum height to be applied when resizing
+        * maxWidth: Maximum width to be applied when resizing
+        * maxHeight: Maximum height to be applied when resizing
          */
 
         constructor( options = {} ) {
@@ -820,13 +891,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 root.className += " " + options.className;
             }
-    
+
             var width = options.width || "calc( 100% )";
             var height = options.height || "100%";
-            
+
             // This has default options..
             this.setLimitBox( options.minWidth, options.minHeight, options.maxWidth, options.maxHeight );
-    
+
             if( width.constructor == Number )
             {
                 width += "px";
@@ -835,17 +906,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 height += "px";
             }
-    
+
             root.style.width = width;
             root.style.height = height;
-    
+
             this.offset = 0;
             this.root = root;
             this.size = [ this.root.offsetWidth, this.root.offsetHeight ];
             this.sections = [];
             this.panels = [];
-    
-            if( !options.no_append )
+
+            if( !options.skipAppend )
             {
                 var lexroot = document.getElementById("lexroot");
                 lexroot.appendChild( this.root );
@@ -880,94 +951,97 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     makeDraggable( root, options );
                 }
 
-                if( options.resizeable ) {
+                if( options.resizeable )
+                {
                     root.classList.add("resizeable");
                 }
 
                 if( options.resize )
-                {                  
-                    this.split_bar = document.createElement("div");
+                {
+                    this.splitBar = document.createElement("div");
                     let type = (overlay == "left") || (overlay == "right") ? "horizontal" : "vertical";
-                    this.type = overlay;;
-                    this.split_bar.className = "lexsplitbar " + type;
+                    this.type = overlay;
+                    this.splitBar.className = "lexsplitbar " + type;
 
                     if( overlay == "right" )
                     {
-                        this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
-                    } 
+                        this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                        this.splitBar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                    }
                     else if( overlay == "left" )
                     {
                         let size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientWidth);
-                        this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                        this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                        this.splitBar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
                     else if( overlay == "top" )
                     {
                         let size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientHeight);
-                        this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                        this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                        this.splitBar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
                     else if( overlay == "bottom" )
                     {
-                        this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
+                        this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                        this.splitBar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
 
-                    this.split_bar.addEventListener("mousedown", inner_mousedown);
-                    this.root.appendChild( this.split_bar );
-                    
+                    this.splitBar.addEventListener("mousedown", inner_mousedown);
+                    this.root.appendChild( this.splitBar );
+
                     var that = this;
-                    var last_pos = [ 0, 0 ];
-                    
+                    var lastMousePosition = [ 0, 0 ];
+
                     function inner_mousedown( e )
                     {
                         var doc = that.root.ownerDocument;
                         doc.addEventListener( 'mousemove', inner_mousemove );
                         doc.addEventListener( 'mouseup', inner_mouseup );
-                        last_pos[ 0 ] = e.x;
-                        last_pos[ 1 ] = e.y;
+                        lastMousePosition[ 0 ] = e.x;
+                        lastMousePosition[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
                         document.body.classList.add( 'nocursor' );
-                        that.split_bar.classList.add( 'nocursor' );
+                        that.splitBar.classList.add( 'nocursor' );
                     }
 
                     function inner_mousemove( e )
                     {
                         switch( that.type ) {
                             case "right":
-                                var dt = ( last_pos[ 0 ] - e.x );
+                                var dt = ( lastMousePosition[ 0 ] - e.x );
                                 var size = ( that.root.offsetWidth + dt );
                                 that.root.style.width = size + "px";
                                 break;
                             case "left":
-                                var dt = ( last_pos[ 0 ] - e.x );
+                                var dt = ( lastMousePosition[ 0 ] - e.x );
                                 var size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetWidth - dt));
                                 that.root.style.width = size + "px";
-                                that.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                                that.splitBar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
                             case "top":
-                                var dt = ( last_pos[ 1 ] - e.y );
+                                var dt = ( lastMousePosition[ 1 ] - e.y );
                                 var size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetHeight - dt));
                                 that.root.style.height = size + "px";
-                                that.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                                that.splitBar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
                             case "bottom":
-                                var dt = ( last_pos[ 1 ] - e.y );
+                                var dt = ( lastMousePosition[ 1 ] - e.y );
                                 var size = ( that.root.offsetHeight + dt );
                                 that.root.style.height = size + "px";
                                 break;
                         }
-                        
-                        last_pos[ 0 ] = e.x;
-                        last_pos[ 1 ] = e.y;
+
+                        lastMousePosition[ 0 ] = e.x;
+                        lastMousePosition[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
-                        
-                        // Resize events   
+
+                        // Resize events
                         if( that.onresize )
+                        {
                             that.onresize( that.root.getBoundingClientRect() );
+                        }
                     }
 
                     function inner_mouseup( e )
@@ -976,7 +1050,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         doc.removeEventListener( 'mousemove', inner_mousemove );
                         doc.removeEventListener( 'mouseup', inner_mouseup );
                         document.body.classList.remove( 'nocursor' );
-                        that.split_bar.classList.remove( 'nocursor' );
+                        that.splitBar.classList.remove( 'nocursor' );
                     }
                 }
             }
@@ -990,13 +1064,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         attach( content ) {
 
             // Append to last split section if area has been split
-            if(this.sections.length) {
-                this.sections[1].attach( content );
+            if( this.sections.length )
+            {
+                this.sections[ 1 ].attach( content );
                 return;
             }
 
-            if(!content)
-            throw("no content to attach");
+            if( !content )
+            {
+                throw("no content to attach");
+            }
 
             content.parent = this;
 
@@ -1006,11 +1083,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         /**
          * @method split
-         * @param {*} options 
+         * @param {*} options
          * type: Split mode (horizontal, vertical) ["horizontal"]
          * sizes: Size of each new area (Array) ["50%", "50%"]
          */
-        
+
         split( options = {} ) {
 
             if( this.sections.length )
@@ -1023,7 +1100,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             var type = options.type || "horizontal";
             var sizes = options.sizes || [ "50%", "50%" ];
-            var infer_height = false;
             var auto = (options.sizes === 'auto');
 
             if( !sizes[ 1 ] )
@@ -1037,18 +1113,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
 
                 sizes[ 1 ] = "calc( 100% - " + size + " )";
-                infer_height = true;
             }
 
             // Create areas
-            var area1 = new Area( { no_append: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
-            var area2 = new Area( { no_append: true, className: "split"} );
+            var area1 = new Area( { skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+            var area2 = new Area( { skipAppend: true, className: "split" } );
 
             area1.parentArea = this;
             area2.parentArea = this;
 
             let minimizable = options.minimizable ?? false;
-            let resize = (options.resize ?? true) || minimizable;
+            let resize = ( options.resize ?? true ) || minimizable;
 
             var data = "0px";
             this.offset = 0;
@@ -1056,40 +1131,40 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if( resize )
             {
                 this.resize = resize;
-                this.split_bar = document.createElement( "div" );
-                this.split_bar.className = "lexsplitbar " + type;
+                this.splitBar = document.createElement( "div" );
+                this.splitBar.className = "lexsplitbar " + type;
 
                 if( type == "horizontal" )
                 {
-                    this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
                 }
                 else
                 {
-                    this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
+                    this.splitBar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
                 }
 
-                this.split_bar.addEventListener( 'mousedown', inner_mousedown );
+                this.splitBar.addEventListener( 'mousedown', innerMouseDown );
 
                 data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
 
                 // Being minimizable means it's also resizeable!
                 if( minimizable )
                 {
-                    this.split_extended = false;
+                    this.splitExtended = false;
 
                     // Keep state of the animation when ends...
                     area2.root.addEventListener('animationend', e => {
-                        const opacity = getComputedStyle(area2.root).opacity;
+                        const opacity = getComputedStyle( area2.root ).opacity;
                         area2.root.classList.remove( e.animationName + "-" + type );
                         area2.root.style.opacity = opacity;
                         flushCss(area2.root);
                     });
-    
-                    this.split_bar.addEventListener("contextmenu", e => {
+
+                    this.splitBar.addEventListener("contextmenu", e => {
                         e.preventDefault();
                         addContextMenu(null, e, c => {
-                            c.add("Extend", { disabled: this.split_extended, callback: () => { this.extend() } });
-                            c.add("Reduce", { disabled: !this.split_extended, callback: () => { this.reduce() } });
+                            c.add("Extend", { disabled: this.splitExtended, callback: () => { this.extend() } });
+                            c.add("Reduce", { disabled: !this.splitExtended, callback: () => { this.reduce() } });
                         });
                     });
                 }
@@ -1101,9 +1176,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     width2 = sizes[ 1 ];
 
                 if( width1.constructor == Number )
+                {
                     width1 += "px";
+                }
+
                 if( width2.constructor == Number )
+                {
                     width2 += "px";
+                }
 
                 area1.root.style.width = "calc( " + width1 + " - " + data + " )";
                 area1.root.style.height = "calc(100% - 0px)";
@@ -1116,7 +1196,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 area1.root.style.width = "100%";
                 area2.root.style.width = "100%";
 
-                if(auto)
+                if( auto )
                 {
                     area1.root.style.height = "auto";
 
@@ -1135,11 +1215,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     var height1 = sizes[ 0 ],
                         height2 = sizes[ 1 ];
 
-                    if(height1.constructor == Number)
+                    if( height1.constructor == Number )
+                    {
                         height1 += "px";
-                    if(height2.constructor == Number)
+                    }
+
+                    if( height2.constructor == Number )
+                    {
                         height2 += "px";
-    
+                    }
+
                     area1.root.style.width = "100%";
                     area1.root.style.height = "calc( " + height1 + " - " + data + " )";
                     area2.root.style.height = "calc( " + height2 + " - " + data + " )";
@@ -1148,13 +1233,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.root.appendChild( area1.root );
 
-            if( resize ) 
+            if( resize )
             {
-                this.root.appendChild(this.split_bar);
+                this.root.appendChild(this.splitBar);
             }
 
             this.root.appendChild( area2.root );
-            this.sections = [area1, area2];
+            this.sections = [ area1, area2 ];
             this.type = type;
 
             // Update sizes
@@ -1166,35 +1251,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             var that = this;
-            var last_pos = [ 0, 0 ];
 
-            function inner_mousedown( e )
+            function innerMouseDown( e )
             {
                 var doc = that.root.ownerDocument;
-                doc.addEventListener( 'mousemove', inner_mousemove );
-                doc.addEventListener( 'mouseup', inner_mouseup );
-                last_pos[0] = e.x;
-                last_pos[1] = e.y;
+                doc.addEventListener( 'mousemove', innerMouseMove );
+                doc.addEventListener( 'mouseup', innerMouseUp );
                 e.stopPropagation();
                 e.preventDefault();
                 document.body.classList.add( 'nocursor' );
-                that.split_bar.classList.add( 'nocursor' );
+                that.splitBar.classList.add( 'nocursor' );
             }
 
-            function inner_mousemove( e )
+            function innerMouseMove( e )
             {
-                if(that.type == "horizontal")
+                if( that.type == "horizontal" )
                 {
-                    that._moveSplit( last_pos[ 0 ] - e.x );
+                    that._moveSplit( -e.movementX );
                 }
                 else
                 {
-                    that._moveSplit( last_pos[ 1 ] - e.y );
+                    that._moveSplit( -e.movementY );
                 }
 
-                last_pos[ 0 ] = e.x;
-                last_pos[ 1 ] = e.y;
-
                 const widgets = that.root.querySelectorAll( ".lexwidget" );
 
                 // Send area resize to every widget in the area
@@ -1212,13 +1291,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 e.preventDefault();
             }
 
-            function inner_mouseup( e )
+            function innerMouseUp( e )
             {
                 var doc = that.root.ownerDocument;
-                doc.removeEventListener( 'mousemove', inner_mousemove );
-                doc.removeEventListener( 'mouseup', inner_mouseup );
+                doc.removeEventListener( 'mousemove', innerMouseMove );
+                doc.removeEventListener( 'mouseup', innerMouseUp );
                 document.body.classList.remove( 'nocursor' );
-                that.split_bar.classList.remove( 'nocursor' );
+                that.splitBar.classList.remove( 'nocursor' );
             }
 
             return this.sections;
@@ -1241,7 +1320,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         * Resize element
         */
         setSize( size ) {
-            
+
             let [ width, height ] = size;
 
             if( width != undefined && width.constructor == Number )
@@ -1275,22 +1354,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         */
         extend() {
 
-            if( this.split_extended )
+            if( this.splitExtended )
             {
                 return;
             }
 
             let [area1, area2] = this.sections;
-            this.split_extended = true;
+            this.splitExtended = true;
 
             if(this.type == "vertical")
             {
                 this.offset = area2.root.offsetHeight;
                 area2.root.classList.add("fadeout-vertical");
-                this._moveSplit(-Infinity, true); 
+                this._moveSplit(-Infinity, true);
 
             }
-            else 
+            else
             {
                 this.offset = area2.root.offsetWidth - 8; // Force some height here...
                 area2.root.classList.add("fadeout-horizontal");
@@ -1307,10 +1386,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         */
         reduce() {
 
-            if( !this.split_extended )
+            if( !this.splitExtended )
             return;
-            
-            this.split_extended = false;
+
+            this.splitExtended = false;
             let [area1, area2] = this.sections;
 
             if(this.type == "vertical")
@@ -1388,7 +1467,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          */
 
         addMenubar( callback, options = {} ) {
-            
+
             let menubar = new Menubar(options);
 
             if(callback) callback( menubar );
@@ -1433,10 +1512,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          */
 
         addOverlayButtons( buttons, options = {} ) {
-            
+
             // Add to last split section if area has been split
-            if(this.sections.length) {
-                this.sections[1].addOverlayButtons(  buttons, options );
+            if( this.sections.length )
+            {
+                this.sections[ 1 ].addOverlayButtons(  buttons, options );
                 return;
             }
 
@@ -1446,8 +1526,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root.style.position = "relative";
 
             options.className = "lexoverlaybuttons";
-            options.width = "calc( 100% - 24px )";
-            options.height = "auto";
+
+            let overlayPanel = this.addPanel( options );
+            let overlayGroup = null;
+
+            const container = document.createElement("div");
+            container.className = "lexoverlaybuttonscontainer";
+            container.appendChild( overlayPanel.root );
+            this.attach( container );
 
             const float = options.float;
 
@@ -1459,24 +1545,21 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     switch( t )
                     {
                     case 'h': break;
-                    case 'v': options.className += " vertical"; break;
+                    case 'v': container.className += " vertical"; break;
                     case 't': break;
-                    case 'm': options.className += " middle"; break;
-                    case 'b': options.className += " bottom"; break;
+                    case 'm': container.className += " middle"; break;
+                    case 'b': container.className += " bottom"; break;
                     case 'l': break;
-                    case 'c': options.className += " center"; break;
-                    case 'r': options.className += " right"; break;
+                    case 'c': container.className += " center"; break;
+                    case 'r': container.className += " right"; break;
                     }
                 }
             }
 
-            let overlayPanel = this.addPanel( options );
-            let overlaygroup;
-            
-            const add_button = function(b, group, last) {
+            const _addButton = function( b, group, last ) {
 
-                const _options = { 
-                    width: "auto", 
+                const _options = {
+                    width: "auto",
                     selectable: b.selectable,
                     selected: b.selected,
                     icon: b.icon,
@@ -1486,55 +1569,54 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if( group )
                 {
-                    if(!overlaygroup) {
-                        overlaygroup = document.createElement('div');
-                        overlaygroup.className = "lexoverlaygroup";
-                        overlayPanel.queuedContainer = overlaygroup;
+                    if( !overlayGroup )
+                    {
+                        overlayGroup = document.createElement('div');
+                        overlayGroup.className = "lexoverlaygroup";
+                        overlayPanel.queuedContainer = overlayGroup;
                     }
 
-                    _options.parent = overlaygroup;
+                    _options.parent = overlayGroup;
                 }
 
                 let callback = b.callback;
 
                 if( b.options )
                 {
-                    callback = function(value, event) {
-                        LX.addContextMenu(null, event, function(c) {
-                            for( let o of b.options )
-                                c.add(o, () => {
-                                    if( b.name == o ) return;
-                                    b.name = o;
-                                    b.callback( o );
-                                    refresh_panel();
-                                });
-                        });
-                    };
+                    overlayPanel.addDropdown( null, b.options, b.name, callback, _options );
                 }
-
-                overlayPanel.addButton( null, b.name, function(value, event) {
-                    if(b.selectable) {
-                        if( b.group ) {
-                            let _prev = b.selected;
-                            b.group.forEach( sub => sub.selected = false );
-                            b.selected = !_prev;
+                else
+                {
+                    overlayPanel.addButton( null, b.name, function( value, event ) {
+                        if( b.selectable )
+                        {
+                            if( b.group )
+                            {
+                                let _prev = b.selected;
+                                b.group.forEach( sub => sub.selected = false );
+                                b.selected = !_prev;
+                            }
+                            else
+                            {
+                                b.selected = !b.selected;
+                            }
                         }
-                        else
-                            b.selected = !b.selected;
-                    }
-                    callback( value, event );
-                }, _options );
+
+                        callback( value, event );
+
+                    }, _options );
+                }
 
                 // ends the group
-                if(overlaygroup && last)
+                if( overlayGroup && last )
                 {
-                    overlayPanel.root.appendChild( overlaygroup );
-                    overlaygroup = null;
+                    overlayPanel.root.appendChild( overlayGroup );
+                    overlayGroup = null;
                     overlayPanel.clearQueue();
                 }
             }
 
-            const refresh_panel = function() {
+            const _refreshPanel = function() {
 
                 overlayPanel.clear();
 
@@ -1544,15 +1626,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         for( let i = 0; i < b.length; ++i )
                         {
-                            let sub = b[i];
+                            let sub = b[ i ];
                             sub.group = b;
-                            add_button(sub, true, i == (b.length - 1));
+                            _addButton(sub, true, i == ( b.length - 1 ));
                         }
-                    }else
+                    }
+                    else
                     {
-                        add_button(b);
+                        _addButton( b );
                     }
-    
+
                 }
 
                 // Add floating info
@@ -1561,16 +1644,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     var height = 0;
                     overlayPanel.root.childNodes.forEach( c => { height += c.offsetHeight; } );
 
-                    if( options.className.includes("middle") )
+                    if( container.className.includes( "middle" ) )
                     {
-                        overlayPanel.root.style.top = "-moz-calc( 50% - " + (height * 0.5) + "px )";
-                        overlayPanel.root.style.top = "-webkit-calc( 50% - " + (height * 0.5) + "px )";
-                        overlayPanel.root.style.top = "calc( 50% - " + (height * 0.5) + "px )";
+                        container.style.top = "-moz-calc( 50% - " + (height * 0.5) + "px )";
+                        container.style.top = "-webkit-calc( 50% - " + (height * 0.5) + "px )";
+                        container.style.top = "calc( 50% - " + (height * 0.5) + "px )";
                     }
                 }
             }
 
-            refresh_panel();
+            _refreshPanel();
         }
 
         /**
@@ -1586,73 +1669,85 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 this.parentArea._disableSplitResize();
                 // Compensate split bar...
-                this.root.style.paddingTop = "4px"; 
+                this.root.style.paddingTop = "4px";
             }
 
             return tabs;
         }
 
-        _moveSplit( dt, force_animation = false, force_width = 0 ) {
+        _moveSplit( dt, forceAnimation = false, forceWidth = 0 ) {
 
             if( !this.type )
+            {
                 throw( "No split area" );
+            }
 
             if( dt === undefined ) // Splitbar didn't move!
+            {
                 return;
+            }
+
+            const a1 = this.sections[ 0 ];
+            var a1Root = a1.root;
+
+            if( !a1Root.classList.contains( "origin" ) )
+            {
+                a1Root = a1Root.parentElement;
+            }
 
-            var a1 = this.sections[ 0 ];
-            var a2 = this.sections[ 1 ];
-            var splitinfo = " - "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
+            const a2 = this.sections[ 1 ];
+            const a2Root = a2.root;
+            const splitData = " - "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
 
             let transition = null;
-            if( !force_animation )
+            if( !forceAnimation )
             {
                 // Remove transitions for this change..
-                transition = a1.root.style.transition;
-                a1.root.style.transition = a2.root.style.transition = "none";
-                flushCss( a1.root );
-                flushCss( a2.root );
+                transition = a1Root.style.transition;
+                a1Root.style.transition = a2Root.style.transition = "none";
+                flushCss( a1Root );
+                flushCss( a2Root );
             }
 
             if( this.type == "horizontal" )
             {
-                var size = Math.max( a2.root.offsetWidth + dt, parseInt( a2.minWidth ) );
-                if( force_width ) size = force_width;
-                a1.root.style.width = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.width = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.width = "calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.minWidth = parseInt( a1.minWidth ) + "px";
-                a2.root.style.width = size + "px";
-                if( a1.maxWidth != Infinity ) a2.root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+                var size = Math.max( a2Root.offsetWidth + dt, parseInt( a2.minWidth ) );
+                if( forceWidth ) size = forceWidth;
+                a1Root.style.width = "-moz-calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.width = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.width = "calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.minWidth = parseInt( a1.minWidth ) + "px";
+                a2Root.style.width = size + "px";
+                if( a1.maxWidth != Infinity ) a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
             }
             else
             {
-                var size = Math.max((a2.root.offsetHeight + dt) + a2.offset, parseInt(a2.minHeight));
-                if( force_width ) size = force_width;
-                a1.root.style.height = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.height = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.height = "calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.minHeight = a1.minHeight + "px";
-                a2.root.style.height = ( size - a2.offset ) + "px";
+                var size = Math.max((a2Root.offsetHeight + dt) + a2.offset, parseInt(a2.minHeight));
+                if( forceWidth ) size = forceWidth;
+                a1Root.style.height = "-moz-calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.height = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.height = "calc( 100% - " + size + "px " + splitData + " )";
+                a1Root.style.minHeight = a1.minHeight + "px";
+                a2Root.style.height = ( size - a2.offset ) + "px";
             }
-                
-            if( !force_animation )
+
+            if( !forceAnimation )
             {
                 // Reapply transitions
-                a1.root.style.transition = a2.root.style.transition = transition;
+                a1Root.style.transition = a2Root.style.transition = transition;
             }
 
             this._update();
 
-            // Resize events   
+            // Resize events
             this.propagateEvent( 'onresize' );
         }
 
         _disableSplitResize() {
 
             this.resize = false;
-            this.split_bar.remove();
-            delete this.split_bar;
+            this.splitBar.remove();
+            delete this.splitBar;
         }
 
         _update() {
@@ -1767,11 +1862,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // debug
-            if(folding) 
+            if(folding)
             {
                 this.folded = true;
                 this.folding = folding;
-                
+
                 if(folding == "up") area.root.insertChildAtIndex(area.sections[1].root, 0);
 
                 // Listen resize event on parent area
@@ -1798,7 +1893,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.root.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ) );
                 this.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
             }
-            
+
             isSelected = !Object.keys( this.tabs ).length && !this.folding ? true : isSelected;
 
             let contentEl = content.root ? content.root : content;
@@ -1826,7 +1921,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             tabEl.className = "lexareatab" + ( isSelected ? " selected" : "" );
             tabEl.innerHTML = ( options.icon ?? "" ) + name;
             tabEl.id = name.replace( /\s/g, '' ) + Tabs.TAB_ID++;
-            tabEl.title = options.title;
+            tabEl.title = options.title ?? "";
             tabEl.selected = isSelected ?? false;
             tabEl.fixed = options.fixed;
             tabEl.instance = this;
@@ -1841,9 +1936,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( this.parentElement.childNodes.length == 1 )
                 {
                     this.parentElement.childNodes[ 0 ].click(); // single tab!!
-                } 
+                }
             } );
-            
+
             tabEl.addEventListener("click", e => {
 
                 e.preventDefault();
@@ -1854,11 +1949,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     // For folding tabs
                     const lastValue = tabEl.selected;
                     tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.selected = false );
-                    tabEl.selected = !lastValue; 
+                    tabEl.selected = !lastValue;
                     // Manage selected
                     tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ));
                     tabEl.classList.toggle('selected', ( this.folding && tabEl.selected ));
-                    // Manage visibility 
+                    // Manage visibility
                     tabEl.instance.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
                     contentEl.style.display = contentEl.originalDisplay;
                     tabEl.instance.selected = tabEl.dataset.name;
@@ -1887,7 +1982,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             tabEl.addEventListener("contextmenu", e => {
                 e.preventDefault();
                 e.stopPropagation();
-    
+
                 if( options.onContextMenu )
                 {
                     options.onContextMenu( e, tabEl.dataset.name );
@@ -1902,16 +1997,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.delete( tabEl.dataset[ "name" ] );
                 }
             });
-            
+
             tabEl.setAttribute( 'draggable', true );
             tabEl.addEventListener( 'dragstart', function( e ) {
                 if( this.parentElement.childNodes.length == 1 ){
                     e.preventDefault();
                     return;
-                } 
+                }
                 e.dataTransfer.setData( 'source', e.target.id );
             });
-            
+
             // Attach content
             tabEl.childIndex = ( this.root.childElementCount - 1 );
             this.root.appendChild( tabEl );
@@ -1990,7 +2085,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if(options.float)
                 this.root.style.justifyContent = options.float;
             this.items = [];
-            
+
             this.icons = {};
             this.shorts = {};
             this.buttons = [];
@@ -2029,7 +2124,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 } );
 
                 if(found) {
-                    insert( tokens[idx++], found );    
+                    insert( tokens[idx++], found );
                 }
                 else {
                     let item = {};
@@ -2042,7 +2137,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         item[ 'checked' ] = options.checked;
                     }
                     list.push( item );
-                    insert( next_token, item[ token ] ); 
+                    insert( next_token, item[ token ] );
                 }
             };
 
@@ -2057,7 +2152,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 // Item already created
                 if( this.root.querySelector("#" + pKey) )
-                    continue;   
+                    continue;
 
                 let entry = document.createElement('div');
                 entry.className = "lexmenuentry";
@@ -2098,21 +2193,21 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         const subitem = o[k][i];
                         const subkey = Object.keys(subitem)[0];
                         const hasSubmenu = subitem[ subkey ].length;
-                        const is_checkbox = subitem[ 'type' ] == 'checkbox';
+                        const isCheckbox = subitem[ 'type' ] == 'checkbox';
                         let subentry = document.createElement('div');
                         subentry.className = "lexcontextmenuentry";
                         subentry.className += (i == o[k].length - 1 ? " last" : "");
                         if(subkey == '')
                             subentry.className = " lexseparator";
                         else {
-                            
+
                             subentry.id = subkey;
                             let subentrycont = document.createElement('div');
                             subentrycont.innerHTML = "";
                             subentrycont.classList = "lexcontextmenuentrycontainer";
                             subentry.appendChild(subentrycont);
                             const icon = that.icons[ subkey ];
-                            if(is_checkbox){
+                            if(isCheckbox){
                                 subentrycont.innerHTML += "<input type='checkbox' >";
                             }else if(icon) {
                                 subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
@@ -2132,8 +2227,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                                 const f = subitem[ 'callback' ];
                                 if(f) {
                                     f.call( this, subitem.checked, subkey, subentry );
-                                    that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());  
-                                } 
+                                    that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                                }
                                 e.stopPropagation();
                                 e.stopImmediatePropagation();
                             })
@@ -2163,8 +2258,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             const f = subitem[ 'callback' ];
                             if(f) {
                                 f.call( this, checkbox_input ? subitem.checked : subkey, checkbox_input ? subkey : subentry );
-                                that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());  
-                            } 
+                                that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                            }
                             e.stopPropagation();
                             e.stopImmediatePropagation();
                         });
@@ -2210,7 +2305,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(f) {
                         f.call( this, key, entry );
                         return;
-                    } 
+                    }
 
                     // Manage selected
                     this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
@@ -2242,7 +2337,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Array} tokens: split path strings
         */
         getSubitem(item, tokens) {
-           
+
             let subitem = null;
             let path = tokens[0];
             for(let i = 0; i < item.length; i++) {
@@ -2256,7 +2351,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         tokens.splice(0,1);
                         return this.getSubitem(item[i][path], tokens);
                     }
-                     
+
                 }
             }
         }
@@ -2268,7 +2363,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         getItem( path ) {
             // process path
             const tokens = path.split("/");
-            
+
             return this.getSubitem(this.items, tokens)
         }
 
@@ -2306,7 +2401,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 else {	
                     this.root.appendChild( button );	
                 }
-    
+
                 const _b = button.querySelector('a');
                 _b.addEventListener("click", (e) => {
                     if(callback && !disabled)
@@ -2347,7 +2442,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 else {	
                     this.root.appendChild( button );	
                 }
-    
+
                 const _b = button.querySelector('a');
                 _b.addEventListener("click", (e) => {
                     if(callback && !disabled)
@@ -2380,7 +2475,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }	
                 else {	
                     this.root.appendChild( this.buttonContainer );	
-                }      
+                }
             }
 
             for( let i = 0; i < buttons.length; ++i )
@@ -2393,7 +2488,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 button.title = title ?? "";
                 button.innerHTML = "<a class='" + data.icon + " lexicon'></a>";
                 this.buttonContainer.appendChild( button );
-    
+
                 const _b = button.querySelector('a');
                 _b.addEventListener("click", (e) => {
                     disabled = e.target.parentElement.classList.contains("disabled");
@@ -2473,6 +2568,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             desc.innerHTML = key;
             entry.appendChild( desc );
 
+            button.addEventListener("mouseenter", () => {
+                setTimeout( () => {
+                    desc.style.display = "unset";
+                }, 100 );
+            });
+
+            button.addEventListener("mouseleave", () => {
+                setTimeout( () => {
+                    desc.style.display = "none";
+                }, 100 );
+            });
+
             entry.addEventListener("click", () => {
 
                 const f = options.callback;
@@ -2514,7 +2621,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      */
 
     class Widget {
-        
+
         static NONE         = 0;
         static TEXT         = 1;
         static TEXTAREA     = 2;
@@ -2570,7 +2677,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( this.onSetValue )
                 return this.onSetValue( value, skipCallback );
-    
+
             console.warn("Can't set value of " + this.typeName());
         }
 
@@ -2678,33 +2785,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 container = document.createElement('div');
                 container.className = "lexcustomcontainer";
                 container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
-    
+
                 this.queue(container);
 
                 let buttonName = "<a class='fa-solid " + (options.icon ?? "fa-cube")  + "' style='float:left'></a>";
                 buttonName += custom_widget_name + (!instance ? " [empty]" : "");
                 // Add alwayis icon to keep spacing right
                 buttonName += "<a class='fa-solid " + (instance ? "fa-bars-staggered" : " ") + " menu' style='float:right; width:5%;'></a>";
-                
+
                 let buttonEl = this.addButton(null, buttonName, (value, event) => {
 
                     if( instance ) {
                         element.querySelector(".lexcustomitems").toggleAttribute('hidden');
                     }
                     else {
-                        addContextMenu(null, event, c => {    
-                            c.add("New " + custom_widget_name, () => { 
+                        addContextMenu(null, event, c => {
+                            c.add("New " + custom_widget_name, () => {
                                 instance = {};
                                 refresh_widget();
                                 element.querySelector(".lexcustomitems").toggleAttribute('hidden', false);
                             });
                         });
                     }
-    
+
                 }, { buttonClass: 'custom' });
-                
+
                 this.clearQueue();
-    
+
                 if(instance)
                     buttonEl.querySelector('a.menu').addEventListener('click', e => {
                         e.stopImmediatePropagation();
@@ -2716,13 +2823,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             });
                         });
                     });
-    
+
                 // Show elements
-    
+
                 custom_widgets = document.createElement('div');
                 custom_widgets.className = "lexcustomitems";
                 custom_widgets.toggleAttribute('hidden', true);
-                
+
                 element.appendChild( container );
                 element.appendChild( custom_widgets );
 
@@ -2730,7 +2837,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
 
                     this.queue( custom_widgets );
-                    
+
                     const on_instance_changed = ( key, value, event ) => {
                         instance[ key ] = value;
                         this._trigger( new IEvent( name, instance, event ), callback );
@@ -2739,7 +2846,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     for( let key in default_instance )
                     {
                         const value = instance[ key ] ?? default_instance[ key ];
-                        
+
                         switch( value.constructor )
                         {
                             case String:
@@ -2780,13 +2887,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     }
 
     LX.ADD_CUSTOM_WIDGET = ADD_CUSTOM_WIDGET;
-    
+
     /**
      * @class NodeTree
      */
 
     class NodeTree {
-            
+
         constructor(domEl, data, options) {
             this.domEl = domEl;
             this.data = data;
@@ -2822,7 +2929,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             node.parent = parent;
             let isParent = node.children.length > 0;
             let isSelected = this.selected.indexOf( node ) > -1;
-            
+
             if( this.options.onlyFolders )
             {
                 let has_folders = false;
@@ -2839,10 +2946,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let icon = (this.options.skip_default_icon ?? true) ? "" : "fa-solid fa-square"; // Default: no childs
             if( isParent ) icon = node.closed ? "fa-solid fa-caret-right" : "fa-solid fa-caret-down";
             item.innerHTML = "<a class='" + icon + " hierarchy'></a>";
-            
+
             // Add display icon
             icon = node.icon;
-            
+
             // Process icon
             if( node.icon )
             {
@@ -2874,7 +2981,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     list.querySelectorAll("li").forEach( e => { e.classList.remove('selected'); } );
                     this.selected.length = 0;
                 }
-                
+
                 // Add or remove
                 const idx = this.selected.indexOf( node );
                 if( idx > -1 ) {
@@ -3041,7 +3148,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let name_input = document.createElement('input');
             name_input.toggleAttribute('hidden', !node.rename);
             name_input.value = node.id;
-            item.appendChild(name_input);            
+            item.appendChild(name_input);
 
             if(node.rename) {
                 item.classList.add('selected');
@@ -3134,13 +3241,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     delete window.__tree_node_dragged;
                 });
             }
-            
+
             let handled = false;
 
             // Show/hide children
             if(isParent) {
                 item.querySelector('a.hierarchy').addEventListener("click", function(e) {
-                    
+
                     handled = true;
                     e.stopImmediatePropagation();
                     e.stopPropagation();
@@ -3174,8 +3281,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 item.appendChild(visibility);
             }
-            
-            if(node.actions) 
+
+            if(node.actions)
             {
                 for(var i = 0; i < node.actions.length; ++i) {
                     let a = node.actions[i];
@@ -3214,14 +3321,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.domEl.querySelector( "ul" ).innerHTML = "";
             this._create_item( null, this.data, 0, selectedId );
         }
-    
+
         /* Refreshes the tree and focuses current element */
         frefresh( id ) {
             this.refresh();
             var el = this.domEl.querySelector( "#" + id );
             if( el ) el.focus();
         }
-    
+
         select( id ) {
             this.refresh( null, id );
         }
@@ -3234,11 +3341,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     class Panel {
 
         /**
-         * @param {*} options 
+         * @param {*} options
          * id: Id of the element
          * className: Add class to the element
          * width: Width of the panel element [fit space]
          * height: Height of the panel element [fit space]
+         * style: CSS Style object to be applied to the panel
          */
 
         constructor( options = {} )  {
@@ -3385,7 +3493,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this._inlineContainer.style.justifyContent = justifyContent;
                 }
             }
-            
+
             // Push all elements single element or Array[element, container]
             for( let item of this._inlineWidgets )
             {
@@ -3393,17 +3501,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if(is_pair)
                 {
-                    // eg. an array, inline items appended later to 
+                    // eg. an array, inline items appended later to
                     if(this._inline_queued_container)
                         this._inlineContainer.appendChild( item[0] );
                     // eg. a dropdown, item is appended to parent, not to inline cont.
                     else
                         item[1].appendChild(item[0]);
-                } 
+                }
                 else
                     this._inlineContainer.appendChild( item );
             }
-            
+
             if(!this._inline_queued_container)
             {
                 if(this.current_branch)
@@ -3423,7 +3531,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         /**
          * @method branch
          * @param {String} name Name of the branch/section
-         * @param {*} options 
+         * @param {*} options
          * id: Id of the branch
          * className: Add class to the branch
          * closed: Set branch collapsed/opened [false]
@@ -3543,14 +3651,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     domName.style.width = options.nameWidth || LX.DEFAULT_NAME_WIDTH;
                     element.appendChild(domName);
                     element.domName = domName;
-    
+
                     // Copy-paste info
                     domName.addEventListener('contextmenu', function( e ) {
                         e.preventDefault();
                         widget.oncontextmenu( e );
                     });
                 }
-                
+
                 this.widgets[ name ] = widget;
             }
 
@@ -3579,7 +3687,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                     if(this.current_branch)
                     {
-                        if(!options.skipWidget) 
+                        if(!options.skipWidget)
                             this.current_branch.widgets.push( widget );
                         this.current_branch.content.appendChild( el );
                     }
@@ -3588,7 +3696,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         el.classList.add("nobranch");
                         this.root.appendChild( el );
                     }
-                } 
+                }
                 // Append content to queued tab container
                 else {
                     this.queuedContainer.appendChild( el );
@@ -3599,7 +3707,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if(!this.queuedContainer) {
                     this._inlineWidgets.push( el );
-                } 
+                }
                 // Append content to queued tab container
                 else {
                     this._inlineWidgets.push( [el, this.queuedContainer] );
@@ -3638,7 +3746,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let widget = this.create_widget(null, Widget.TEXT, options);
             let element = widget.domEl;
             element.className += " lexfilter noname";
-            
+
             let input = document.createElement('input');
             input.className = 'lexinput-filter';
             input.setAttribute("placeholder", options.placeholder);
@@ -3650,9 +3758,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.appendChild(input);
             element.appendChild(searchIcon);
 
-            input.addEventListener("input", (e) => { 
+            input.addEventListener("input", (e) => {
                 if(options.callback)
-                    options.callback(input.value, e); 
+                    options.callback(input.value, e);
             });
 
             return element;
@@ -3664,7 +3772,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if(b.name !== branchName)
                     continue;
-                
+
                 // remove all widgets
                 for( let w of b.widgets ) {
                     if(w.domEl.classList.contains('lexfilter'))
@@ -3726,7 +3834,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( callback )
                 callback.call( this, event.value, event.domEvent, event.name );
-    
+
             if( this.onevent )
                 this.onevent.call( this, event );
         }
@@ -3865,9 +3973,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
                 Panel._dispatch_event( wValue, "focusout", skipCallback );
             };
-    
+
             let element = widget.domEl;
-    
+
             // Add reset functionality
             if( widget.name && !( options.skipReset ?? false ) ) {
                 Panel._add_reset_property( element.domName, function() {
@@ -3876,17 +3984,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     Panel._dispatch_event( wValue, "focusout" );
                 } );
             }
-            
+
             // Add widget value
-    
+
             let container = document.createElement( 'div' );
             container.className = "lextext" + ( options.warning ? " lexwarning" : "" );
             container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " )";
             container.style.display = "flex";
-    
+
             this.disabled = ( options.disabled || options.warning ) ?? ( options.url ? true : false );
             let wValue = null;
-    
+
             if( !this.disabled )
             {
                 wValue = document.createElement( 'input' );
@@ -3894,19 +4002,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 wValue.value = wValue.iValue = value || "";
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
-    
+
                 if( options.placeholder )
                     wValue.setAttribute( "placeholder", options.placeholder );
-    
+
                 var resolve = ( function( val, event ) {
                     const skipCallback = event.detail;
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
                     if( !skipCallback ) this._trigger( new IEvent( name, val, event ), callback );
                 }).bind( this );
-    
+
                 const trigger = options.trigger ?? 'default';
-    
+
                 if( trigger == 'default' )
                 {
                     wValue.addEventListener( "keyup", function( e ){
@@ -3923,19 +4031,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         resolve( e.target.value, e );
                     });
                 }
-    
+
                 wValue.addEventListener( "mousedown", function( e ){
                     e.stopImmediatePropagation();
                     e.stopPropagation();
                 });
-    
+
                 if( options.icon )
                 {
                     let icon = document.createElement( 'a' );
                     icon.className = "inputicon " + options.icon;
                     container.appendChild( icon );
                 }
-    
+
             } else
             {
                 wValue = document.createElement( options.url ? 'a' : 'div' );
@@ -3949,18 +4057,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
             }
-    
+
             Object.assign( wValue.style, options.style ?? {} );
-    
+
             container.appendChild( wValue );
             element.appendChild( container );
-            
+
             // Remove branch padding and margins
             if( !widget.name ) {
                 element.className += " noname";
                 container.style.width = "100%";
             }
-    
+
             return widget;
         }
 
@@ -4001,7 +4109,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     Panel._dispatch_event( wValue, "focusout" );
                 });
             }
-            
+
             // Add widget value
 
             let container = document.createElement( 'div' );
@@ -4054,7 +4162,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             container.appendChild(wValue);
             element.appendChild(container);
-            
+
             // Remove branch padding and margins
             if(!widget.name) {
                 element.className += " noname";
@@ -4083,7 +4191,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             options.disabled = true;
             return this.addText( null, value, null, options );
         }
-        
+
         /**
          * @method addButton
          * @param {String} name Widget name
@@ -4093,52 +4201,69 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * disabled: Make the widget disabled [false]
          * icon: Icon class to show as button value
          * img: Path to image to show as button value
+         * title: Text to show in native Element title
          */
 
         addButton( name, value, callback, options = {} ) {
 
-            let widget = this.create_widget(name, Widget.BUTTON, options);
+            let widget = this.create_widget( name, Widget.BUTTON, options );
+
             widget.onGetValue = () => {
                 return wValue.innerText;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
-                wValue.innerHTML = 
-                (options.icon ? "<a class='" + options.icon + "'></a>" : 
+                wValue.innerHTML =
+                (options.icon ? "<a class='" + options.icon + "'></a>" :
                 ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (newValue || "") + "</span>" ));
             };
-            
+
             let element = widget.domEl;
 
-            var wValue = document.createElement('button');
-            if(options.icon || options.img) 
-                wValue.title = value;
+            var wValue = document.createElement( 'button' );
+            wValue.title = options.title ?? "";
             wValue.className = "lexbutton";
-            if(options.selected)
-                wValue.classList.add("selected");
-            if(options.buttonClass)
-                wValue.classList.add(options.buttonClass);
-            wValue.innerHTML = 
-                (options.icon ? "<a class='" + options.icon + "'></a>" : 
+
+            if( options.selected )
+            {
+                wValue.classList.add( "selected" );
+            }
+
+            if( options.buttonClass )
+            {
+                wValue.classList.add( options.buttonClass );
+            }
+
+            wValue.innerHTML =
+                (options.icon ? "<a class='" + options.icon + "'></a>" :
                 ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
             wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
 
-            if(options.disabled)
-                wValue.setAttribute("disabled", true);
+            if( options.disabled )
+            {
+                wValue.setAttribute( "disabled", true );
+            }
 
             wValue.addEventListener("click", e => {
-                if( options.selectable ) {
+                if( options.selectable )
+                {
                     if( options.parent )
+                    {
                         options.parent.querySelectorAll(".lexbutton.selected").forEach( e => { if(e == wValue) return; e.classList.remove("selected") } );
+                    }
+
                     wValue.classList.toggle('selected');
                 }
-                this._trigger( new IEvent(name, value, e), callback );   
+
+                this._trigger( new IEvent( name, value, e ), callback );
             });
 
-            element.appendChild(wValue);
+            element.appendChild( wValue );
 
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name )
+            {
                 wValue.className += " noname";
                 wValue.style.width = "100%";
             }
@@ -4164,7 +4289,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let container = document.createElement('div');
             container.className = "lexcombobuttons ";
             if( options.float ) container.className += options.float;
-            container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";   
+            container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
             let should_select = !(options.noSelection ?? false);
             for( let b of values )
@@ -4177,24 +4302,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if(options.buttonClass)
                     buttonEl.classList.add(options.buttonClass);
 
-                if(options.selected == b.value) 
+                if(options.selected == b.value)
                     buttonEl.classList.add("selected");
-                    
+
                 buttonEl.innerHTML = (b.icon ? "<a class='" + b.icon +"'></a>" : "") + "<span>" + (b.icon ? "" : b.value) + "</span>";
-              
+
                 if(options.disabled)
                     buttonEl.setAttribute("disabled", true);
-                
+
                 buttonEl.addEventListener("click", function(e) {
                     if(should_select) {
                         container.querySelectorAll('button').forEach( s => s.classList.remove('selected'));
                         this.classList.add('selected');
                     }
-                    that._trigger( new IEvent(name, b.value, e), b.callback );   
+                    that._trigger( new IEvent(name, b.value, e), b.callback );
                 });
-    
+
                 container.appendChild(buttonEl);
-                
+
                 // Remove branch padding and margins
                 if(widget.name === undefined) {
                     buttonEl.className += " noname";
@@ -4263,11 +4388,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             container.appendChild(name_el);
-            
+
             if( options.callback ) {
                 container.style.cursor = "pointer";
                 container.addEventListener("click", (e) => {
-                    this._trigger( new IEvent(name, null, e), options.callback );   
+                    this._trigger( new IEvent(name, null, e), options.callback );
                 });
             }
 
@@ -4461,33 +4586,46 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             wValue.name = name;
             wValue.iValue = value;
 
-            // Add dropdown widget button  
+            // Add dropdown widget button
             let buttonName = value;
             buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
             this.queue(container);
 
-            let selectedOption = this.addButton( null, buttonName, (value, event) => {
-                if( list.unfocus_event ) {
+            const _getMaxListWidth = () => {
+
+                let maxWidth = 0;
+                for( let i of values )
+                {
+                    const iString = String( i );
+                    maxWidth = Math.max( iString.length, maxWidth );
+                }
+                return maxWidth * 9;
+            };
+
+            let selectedOption = this.addButton( null, buttonName, ( value, event ) => {
+                if( list.unfocus_event )
+                {
                     delete list.unfocus_event;
                     return;
                 }
                 const topPosition = selectedOption.getBoundingClientRect().y;
                 list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
                 list.style.width = (event.currentTarget.clientWidth) + 'px';
+                list.style.minWidth = (_getMaxListWidth()) + 'px';
                 list.toggleAttribute('hidden');
                 list.focus();
             }, { buttonClass: 'array', skipInlineCount: true });
 
             this.clearQueue();
 
-            selectedOption.style.width = "100%";   
+            selectedOption.style.width = "100%";
 
             selectedOption.refresh = (v) => {
                 if(selectedOption.querySelector("span").innerText == "")
                     selectedOption.querySelector("span").innerText = v;
                 else
-                    selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v); 
+                    selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v);
             }
 
             // Add dropdown options container
@@ -4499,12 +4637,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             list.addEventListener( 'focusout', function( e ) {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
-                if(e.relatedTarget === selectedOption.querySelector( 'button' )) {
+                if( e.relatedTarget === selectedOption.querySelector( 'button' ) )
+                {
                     this.unfocus_event = true;
                     setTimeout( () => delete this.unfocus_event, 200 );
-                } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
+                }
+                else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" )
+                {
                     return;
-                }else if ( e.target.id == 'lexinput-filter' ) {
+                }
+                else if ( e.target.className == 'lexinput-filter' )
+                {
                     return;
                 }
                 this.toggleAttribute( 'hidden', true );
@@ -4513,28 +4656,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Add filter options
             let filter = null;
             if(options.filter ?? false)
+            {
                 filter = this._addFilter("Search option", {container: list, callback: this._search_options.bind(list, values)});
+            }
 
             // Create option list to empty it easily..
-            const list_options = document.createElement('span');
-            list.appendChild(list_options);
-            
-            if( filter ) {
-                list.prepend(filter);
-                list_options.style.height = "calc(100% - 25px)";
-    
-                filter.addEventListener('focusout', function(e) {
+            const listOptions = document.createElement('span');
+            list.appendChild( listOptions );
+
+            if( filter )
+            {
+                list.prepend( filter );
+                listOptions.style.height = "calc(100% - 25px)";
+
+                filter.addEventListener('focusout', function( e ) {
                     if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
+                    {
                         return;
-                    list.toggleAttribute('hidden', true);
+                    }
+                    list.toggleAttribute( 'hidden', true );
                 });
             }
 
             // Add dropdown options list
-            list.refresh = (options) => {
+            list.refresh = options => {
 
                 // Empty list
-                list_options.innerHTML = "";
+                listOptions.innerHTML = "";
 
                 for(let i = 0; i < options.length; i++)
                 {
@@ -4554,7 +4702,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                         let btn = element.querySelector(".lexwidgetname .lexicon");
                         if(btn) btn.style.display = (value != wValue.iValue ? "block" : "none");
-                        that._trigger( new IEvent(name, value, null), callback ); 
+                        that._trigger( new IEvent(name, value, null), callback );
 
                         // Reset filter
                         if(filter)
@@ -4593,18 +4741,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         option.setAttribute("title", iValue.value);
                         if(value == iValue.value)
                             li.classList.add("selected");
-                    }      
-                    list_options.appendChild(li);
+                    }
+
+                    listOptions.appendChild( li );
                 }
             }
 
-            list.refresh(values);
+            list.refresh( values );
 
-            container.appendChild(list);
-            element.appendChild(container);
+            container.appendChild( list );
+            element.appendChild( container );
 
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name )
+            {
                 element.className += " noname";
                 container.style.width = "100%";
             }
@@ -4748,7 +4898,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 for(var i = 0; i < (16 - nbits); ++i) {
                     binary = '0' + binary;
                 }
-    
+
                 for( let bit = 0; bit < 16; ++bit )
                 {
                     let layer = document.createElement('div');
@@ -4756,32 +4906,32 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( value != undefined )
                     {
                         const valueBit = binary[ 16 - bit - 1 ];
-                        if(valueBit != undefined && valueBit == '1') 
-                            layer.classList.add('selected');    
+                        if(valueBit != undefined && valueBit == '1')
+                            layer.classList.add('selected');
                     }
                     layer.innerText = bit + 1;
                     layer.title = "Bit " + bit + ", value " + (1 << bit);
                     container.appendChild( layer );
-                    
+
                     layer.addEventListener("click", e => {
-    
+
                         e.stopPropagation();
                         e.stopImmediatePropagation();
                         e.target.classList.toggle('selected');
                         value ^= ( 1 << bit );
                         element.value = value;
-    
+
                         let btn = element.querySelector(".lexwidgetname .lexicon");
                         if(btn) btn.style.display = (value != defaultValue ? "block" : "none");
-    
+
                         this._trigger( new IEvent(name, value, e), callback );
                     });
                 }
-    
+
             };
 
             setLayers();
-            
+
             element.appendChild(container);
 
             return widget;
@@ -4826,7 +4976,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             var container = document.createElement('div');
             container.className = "lexarray";
             container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
-            
+
             this.queue( container );
 
             const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
@@ -4836,7 +4986,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.addButton(null, buttonName, () => {
                 element.querySelector(".lexarrayitems").toggleAttribute('hidden');
             }, { buttonClass: 'array' });
-            
+
             this.clearQueue();
 
             // Show elements
@@ -4844,7 +4994,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let array_items = document.createElement('div');
             array_items.className = "lexarrayitems";
             array_items.toggleAttribute('hidden',  true);
-            
+
             element.appendChild(container);
             element.appendChild(array_items);
 
@@ -4925,7 +5075,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         addList( name, values, value, callback, options = {} ) {
 
             let widget = this.create_widget( name, Widget.LIST, options );
-    
+
             widget.onGetValue = () => {
                 return value;
             };
@@ -4937,56 +5087,56 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 value = newValue;
                 if( !skipCallback ) this._trigger( new IEvent( name, newValue ), callback );
             };
-    
+
             widget.updateValues = ( newValues ) => {
-    
+
                 values = newValues;
                 listContainer.innerHTML = "";
-                
+
                 for( let i = 0; i < values.length; ++i )
                 {
                     let icon = null;
                     let itemValue = values[ i ];
-    
+
                     if( itemValue.constructor === Array )
                     {
                         icon = itemValue[ 1 ];
                         itemValue = itemValue[ 0 ];
                     }
-    
+
                     let listElement = document.createElement( 'div' );
                     listElement.className = "lexlistitem" + ( value == itemValue ? " selected" : "" );
                     listElement.innerHTML = "<span>" + itemValue + "</span>" + ( icon ? "<a class='" + icon + "'></a>" : "" );
-    
+
                     listElement.addEventListener( 'click', e => {
                         listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
                         listElement.classList.toggle( 'selected' );
                         value = itemValue;
                         this._trigger( new IEvent( name, itemValue, e ), callback );
                     });
-    
+
                     listContainer.appendChild( listElement );
                 }
             };
-    
+
             let element = widget.domEl;
-    
+
             // Show list
-    
+
             let listContainer = document.createElement( 'div' );
             listContainer.className = "lexlist";
             listContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
-    
+
             widget.updateValues( values );
-    
+
             // Remove branch padding and margins
             if( !widget.name ) {
                 element.className += " noname";
                 listContainer.style.width = "100%";
             }
-    
+
             element.appendChild( listContainer );
-    
+
             return widget;
         }
 
@@ -5038,14 +5188,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             const create_tags = () => {
 
                 tags_container.innerHTML = "";
-    
+
                 for( let i = 0; i < value.length; ++i )
                 {
                     let tag_name = value[i];
                     let tag = document.createElement('span');
                     tag.className = "lextag";
                     tag.innerHTML = tag_name;
-    
+
                     tag.addEventListener('click', function( e ) {
                         this.remove();
                         value.splice( value.indexOf( tag_name ), 1 );
@@ -5053,18 +5203,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         if( btn ) btn.style.display = ( value != defaultValue ? "block" : "none" );
                         that._trigger( new IEvent( name, value, e ), callback );
                     });
-    
+
                     tags_container.appendChild( tag );
                 }
-    
+
                 let tag_input = document.createElement( 'input' );
                 tag_input.value = "";
                 tag_input.placeholder = "Tag...";
                 tags_container.insertChildAtIndex( tag_input, 0 );
-    
+
                 tag_input.onkeydown = function( e ) {
                     const val = this.value.replace(/\s/g, '');
-                    if( e.key == ' ') { 
+                    if( e.key == ' ') {
                         e.preventDefault();
                         if( !val.length || value.indexOf( val ) > -1 )
                             return;
@@ -5075,7 +5225,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         that._trigger( new IEvent( name, value, e ), callback );
                     }
                 };
-    
+
                 tag_input.focus();
             }
 
@@ -5107,9 +5257,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if( !name ) {
                 throw( "Set Widget Name!" );
             }
-    
+
             let widget = this.create_widget( name, Widget.CHECKBOX, options );
-    
+
             widget.onGetValue = () => {
                 return flag.value;
             };
@@ -5117,14 +5267,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( flag.value !== newValue )
                     Panel._dispatch_event( toggle, "click", skipCallback );
             };
-    
+
             let element = widget.domEl;
-    
+
             // Add reset functionality
             Panel._add_reset_property( element.domName, function() {
                 Panel._dispatch_event( toggle, "click" );
             });
-            
+
             // Add widget value
 
             var container = document.createElement('div');
@@ -5158,29 +5308,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 let flag = toggle.querySelector( ".checkbox" );
                 if( flag.disabled )
                     return;
-    
+
                 const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
 
                 let check = toggle.querySelector( ".checkbox a" );
-    
+
                 flag.value = !flag.value;
                 flag.className = "checkbox " + ( flag.value ? "on" : "" );
                 check.style.display = flag.value ? "block" : "none";
-    
+
                 // Reset button (default value)
                 if( !skipCallback )
                 {
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = flag.value != flag.iValue ? "block": "none";
                 }
-    
+
                 // Open suboptions
                 let submenu = element.querySelector( ".lexcheckboxsubmenu" );
                 if( submenu ) submenu.toggleAttribute( 'hidden', !flag.value );
-    
+
                 if( !skipCallback ) this._trigger( new IEvent( name, flag.value, e ), callback );
             });
-    
+
             element.appendChild( container );
 
             if( options.suboptions )
@@ -5215,9 +5365,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if( !name ) {
                 throw( "Set Widget Name!" );
             }
-    
+
             let widget = this.create_widget( name, Widget.COLOR, options );
-    
+
             widget.onGetValue = () => {
                 return color.value;
             };
@@ -5225,23 +5375,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 color.value = newValue;
                 Panel._dispatch_event( color, "input", skipCallback );
             };
-    
+
             let element = widget.domEl;
             let change_from_input = false;
-    
+
             // Add reset functionality
             Panel._add_reset_property( element.domName, function() {
                 this.style.display = "none";
                 color.value = color.iValue;
                 Panel._dispatch_event( color, "input" );
             });
-    
+
             // Add widget value
-    
+
             var container = document.createElement( 'span' );
             container.className = "lexcolor";
             container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
-    
+
             let color = document.createElement( 'input' );
             color.style.width = "32px";
             color.type = 'color';
@@ -5249,49 +5399,49 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             color.id = "color" + simple_guidGenerator();
             color.useRGB = options.useRGB ?? false;
             color.value = color.iValue = value.constructor === Array ? rgbToHex( value ) : value;
-            
+
             if( options.disabled ) {
                 color.disabled = true;
             }
-    
+
             color.addEventListener( "input", e => {
                 let val = e.target.value;
-    
+
                 const skipCallback = e.detail;
-    
+
                 // Change value (always hex)
                 if( !change_from_input )
                     text_widget.set( val );
-    
+
                 // Reset button (default value)
                 if( !skipCallback )
                 {
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = val != color.iValue ? "block": "none";
                 }
-    
+
                 if( color.useRGB )
                     val = hexToRgb( val );
-    
+
                 if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
             }, false );
-    
+
             container.appendChild( color );
-    
+
             this.queue( container );
-    
+
             const text_widget = this.addText( null, color.value, v => {
                 change_from_input = true;
                 widget.set( v );
                 change_from_input = false;
             }, { width: "calc( 100% - 32px )"});
-            
+
             text_widget.domEl.style.marginLeft = "4px";
-    
+
             this.clearQueue();
-    
+
             element.appendChild( container );
-    
+
             return widget;
         }
 
@@ -5338,7 +5488,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // add widget value
 
             var container = document.createElement( 'div' );
-            container.className = "lexnumber";        
+            container.className = "lexnumber";
             container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
             let box = document.createElement( 'div' );
@@ -5473,7 +5623,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
             }, { passive: false });
-            
+
             // Add drag input
 
             vecinput.addEventListener( "mousedown", inner_mousedown );
@@ -5542,7 +5692,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     options.onRelease.bind( vecinput )( e, vecinput );
                 }
             }
-            
+
             container.appendChild( box );
             element.appendChild( container );
 
@@ -5609,7 +5759,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Add widget value
 
             var container = document.createElement( 'div' );
-            container.className = "lexvector";        
+            container.className = "lexvector";
             container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
             for( let i = 0; i < num_components; ++i ) {
@@ -5702,7 +5852,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                     if( !skipCallback ) this._trigger( new IEvent( name, value, e ), callback );
                 }, false );
-                
+
                 // Add drag input
 
                 vecinput.addEventListener( "mousedown", inner_mousedown );
@@ -5806,7 +5956,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             let locker = document.createElement( 'a' );
-            locker.className = "fa-solid fa-lock-open lexicon";
+            locker.title = "Lock";
+            locker.className = "fa-solid fa-lock-open lexicon lock";
             container.appendChild( locker );
             locker.addEventListener( "click", function( e ) {
                 this.locked = !this.locked;
@@ -5820,7 +5971,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.classList.remove( "fa-lock" );
                 }
             }, false );
-            
+
             element.appendChild( container );
 
             return widget;
@@ -5829,7 +5980,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         /**
          * @method addVector N (2, 3, 4)
          * @param {String} name Widget name
-         * @param {Array} value Array of N components 
+         * @param {Array} value Array of N components
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * disabled: Make the widget disabled [false]
@@ -5888,18 +6039,21 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.queue( element );
 
+            element.aspectRatio = ( value.length == 2 ? value[ 0 ] / value[ 1 ] : null );
             element.dimensions = [];
 
             for( let i = 0; i < value.length; ++i )
             {
-                const size = measureRealWidth( JSON.stringify( value[ i ] ), 24 ) + 'px';
                 element.dimensions[ i ] = this.addNumber( null, value[ i ], ( v ) => {
 
-                    const value = [];
+                    const value = widget.onGetValue();
 
-                    for( let i = 0; i < element.dimensions.length; ++i )
+                    if( element.locked )
                     {
-                        value.push( element.dimensions[ i ].onGetValue() );
+                        const ar = ( i == 0 ? 1.0 / element.aspectRatio : element.aspectRatio );
+                        const index = ( 1 + i ) % 2;
+                        value[ index ] = v * ar;
+                        element.dimensions[ index ].onSetValue( value[ index ], true );
                     }
 
                     if( callback )
@@ -5907,7 +6061,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         callback( value );
                     }
 
-                }, { width: size, min: 0, disabled: options.disabled } );
+                }, { min: 0, disabled: options.disabled, precision: options.precision } );
 
                 if( ( i + 1 ) != value.length )
                 {
@@ -5927,6 +6081,32 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 element.appendChild( unitSpan );
             }
 
+            // Lock aspect ratio
+            if( element.aspectRatio )
+            {
+                let locker = document.createElement( 'a' );
+                locker.title = "Lock Aspect Ratio";
+                locker.className = "fa-solid fa-lock-open lexicon lock";
+                element.appendChild( locker );
+                locker.addEventListener( "click", function( e ) {
+                    element.locked = !element.locked;
+                    if( element.locked )
+                    {
+                        this.classList.add( "fa-lock" );
+                        this.classList.remove( "fa-lock-open" );
+
+                        // Recompute ratio
+                        const value = widget.onGetValue();
+                        element.aspectRatio = value[ 0 ] / value[ 1 ];
+                    }
+                    else
+                    {
+                        this.classList.add( "fa-lock-open" );
+                        this.classList.remove( "fa-lock" );
+                    }
+                }, false );
+            }
+
             // Remove branch padding and margins
             if( !widget.name )
             {
@@ -5940,11 +6120,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         /**
          * @method addPad
          * @param {String} name Widget name
-         * @param {Number} value Pad value
+         * @param {Array} value Pad value
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * disabled: Make the widget disabled [false]
          * min, max: Min and Max values
+         * padSize: Size of the pad (css)
          * onPress: Callback function on mouse down
          * onRelease: Callback function on mouse up
          */
@@ -6065,7 +6246,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         /**
          * @method addProgress
          * @param {String} name Widget name
-         * @param {Number} value Progress value 
+         * @param {Number} value Progress value
          * @param {*} options:
          * min, max: Min and Max values
          * low, optimum, high: Low and High boundary values, Optimum point in the range
@@ -6076,7 +6257,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addProgress( name, value, options = {} ) {
 
-            if(!name) {
+            if( !name )
+            {
                 throw("Set Widget Name!");
             }
 
@@ -6106,47 +6288,75 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             progress.min = options.min ?? 0;
             progress.max = options.max ?? 1;
             progress.value = value;
-            
-            if(options.low)
+
+            if( options.low )
                 progress.low = options.low;
-            if(options.high)
+            if( options.high )
                 progress.high = options.high;
-            if(options.optimum)
+            if( options.optimum )
                 progress.optimum = options.optimum;
 
-            container.appendChild(progress);
-            element.appendChild(container);
+            container.appendChild( progress );
+            element.appendChild( container );
 
-            if(options.showValue) {
-                if(document.getElementById('progressvalue-' + name ))
+            if( options.showValue )
+            {
+                if( document.getElementById('progressvalue-' + name ) )
+                {
                     document.getElementById('progressvalue-' + name ).remove();
+                }
+
                 let span = document.createElement("span");
                 span.id = "progressvalue-" + name;
                 span.style.padding = "0px 5px";
                 span.innerText = value;
-                container.appendChild(span);
+                container.appendChild( span );
             }
 
-            if(options.editable) {
-                progress.classList.add("editable");
-                progress.addEventListener("mousemove", inner_mousemove.bind(this, value));
-                progress.addEventListener("mouseup", inner_mouseup.bind(this, progress));
+            if( options.editable )
+            {
+                progress.classList.add( "editable" );
+                progress.addEventListener( "mousedown", inner_mousedown );
 
-                function inner_mousemove(value, e) {
-                
-                    if(e.which < 1)
-                        return;
-                    let v = this.getValue(name, value);
-                    v+=e.movementX/100;
-                    v = v.toFixed(2);
-                    this.setValue(name, v);
+                var that = this;
 
-                    if(options.callback)
-                        options.callback(v, e);
+                function inner_mousedown( e )
+                {
+                    var doc = that.root.ownerDocument;
+                    doc.addEventListener( 'mousemove', inner_mousemove );
+                    doc.addEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.add( 'noevents' );
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
                 }
 
-                function inner_mouseup(el) {
-                    el.removeEventListener("mousemove", inner_mousemove);
+                function inner_mousemove( e )
+                {
+                    let dt = -e.movementX;
+
+                    if ( dt != 0 )
+                    {
+                        let v = that.getValue( name, value );
+                        v += e.movementX / 100;
+                        v = round( v );
+                        that.setValue( name, v );
+
+                        if( options.callback )
+                        {
+                            options.callback( v, e );
+                        }
+                    }
+
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+
+                function inner_mouseup( e )
+                {
+                    var doc = that.root.ownerDocument;
+                    doc.removeEventListener( 'mousemove', inner_mousemove );
+                    doc.removeEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.remove( 'noevents' );
                 }
             }
 
@@ -6165,65 +6375,75 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addFile( name, callback, options = { } ) {
 
-            if( !name ) {
+            if( !name )
+            {
                 throw( "Set Widget Name!" );
             }
-    
+
             let widget = this.create_widget( name, Widget.FILE, options );
             let element = widget.domEl;
-    
+
             let local = options.local ?? true;
             let type = options.type ?? 'text';
-            let read = options.read ?? true; 
-    
+            let read = options.read ?? true;
+
             // Create hidden input
             let input = document.createElement( 'input' );
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
-    
+
             if( options.placeholder )
+            {
                 input.placeholder = options.placeholder;
-    
+            }
+
             input.addEventListener( 'change', function( e ) {
-    
+
                 const files = e.target.files;
                 if( !files.length ) return;
                 if( read )
                 {
                     if( options.onBeforeRead )
                         options.onBeforeRead();
-    
+
                     const reader = new FileReader();
-    
+
                     if( type === 'text' ) reader.readAsText( files[ 0 ] );
                     else if( type === 'buffer' ) reader.readAsArrayBuffer( files[ 0 ] );
                     else if( type === 'bin' ) reader.readAsBinaryString( files[ 0 ] );
                     else if( type === 'url' ) reader.readAsDataURL( files[ 0 ] );
-    
+
                     reader.onload = e => { callback.call( this, e.target.result, files[ 0 ] ) } ;
                 }
                 else
                     callback( files[ 0 ] );
             });
-    
+
             element.appendChild( input );
-    
+
             this.queue( element );
-            
+
             if( local )
             {
+                let settingsDialog = null;
+
                 this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
-                    
-                    new Dialog( "Load Settings", p => {
+
+                    if( settingsDialog )
+                    {
+                        return;
+                    }
+
+                    settingsDialog = new Dialog( "Load Settings", p => {
                         p.addDropdown( "Type", [ 'text', 'buffer', 'bin', 'url' ], type, v => { type = v } );
                         p.addButton( null, "Reload", v => { input.dispatchEvent( new Event( 'change' ) ) } );
-                    });
-                    
-                }, { className: "micro", skipInlineCount: true });
+                    }, { onclose: ( root ) => { root.remove(); settingsDialog = null; } } );
+
+                }, { className: "micro", skipInlineCount: true, title: "Settings" });
             }
-    
+
             this.clearQueue();
-    
+
             return widget;
         }
 
@@ -6281,7 +6501,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 node_filter_input.addEventListener('input', function(){
                     nodeTree.refresh();
                 });
-        
+
                 let searchIcon = document.createElement('a');
                 searchIcon.className = "lexicon fa-solid fa-magnifying-glass";
                 toolsDiv.appendChild(node_filter_input);
@@ -6315,11 +6535,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.className = "lexseparator";
             let widget = new Widget( null, Widget.SEPARATOR );
             widget.domEl = element;
-            
+
             if(this.current_branch) {
                 this.current_branch.content.appendChild( element );
                 this.current_branch.widgets.push( widget );
-            } else 
+            } else
                 this.root.appendChild(element);
         }
 
@@ -6331,7 +6551,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          *      onCreate: Func to be called at tab creation
          *      onSelect: Func to be called on select tab (optional)
          * }
-         * @param {*} options 
+         * @param {*} options
          * vertical: Use vertical or horizontal tabs (vertical by default)
          * showNames: Show tab name only in horizontal tabs
          */
@@ -6413,7 +6633,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.clearQueue();
                 }
             }
-            
+
             this.addSeparator();
         }
     }
@@ -6425,7 +6645,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      */
 
     class Branch {
-        
+
         constructor( name, options = {} ) {
 
             this.name = name;
@@ -6540,23 +6760,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _addBranchSeparator() {
 
-            var element = document.createElement('div');
+            const element = document.createElement('div');
             element.className = "lexwidgetseparator";
             element.style.width = "100%";
             element.style.background = "none";
 
-            var grabber = document.createElement('div');
+            const grabber = document.createElement('div');
             grabber.innerHTML = "&#9662;";
-            grabber.style.marginLeft = LX.DEFAULT_NAME_WIDTH;
             element.appendChild(grabber);
 
-            var line = document.createElement('div');
+            doAsync( () => {
+                grabber.style.marginLeft = ((parseFloat(LX.DEFAULT_NAME_WIDTH) / 100.0) * this.content.offsetWidth) + "px";
+            }, 10 )
+
+            const line = document.createElement('div');
             line.style.width = "1px";
             line.style.marginLeft = "6px";
             line.style.marginTop = "2px";
             line.style.height = "0px"; // get in time
-            grabber.appendChild(line);
-            grabber.addEventListener("mousedown", inner_mousedown);
+            grabber.appendChild( line );
+            grabber.addEventListener( "mousedown", innerMouseDown );
 
             this.grabber = grabber;
 
@@ -6564,45 +6787,40 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 return that.root.offsetHeight - that.root.children[0].offsetHeight;
             }
 
-            var that = this;
-            var lastX = 0;
-            var lastXLine = 0;
-            function inner_mousedown(e)
+            let that = this;
+
+            function innerMouseDown( e )
             {
                 var doc = that.root.ownerDocument;
-                doc.addEventListener("mouseup",inner_mouseup);
-                doc.addEventListener("mousemove",inner_mousemove);
-                lastX = e.pageX;
-                lastXLine = e.pageX;
+                doc.addEventListener("mouseup", innerMouseUp);
+                doc.addEventListener("mousemove", innerMouseMove);
                 e.stopPropagation();
                 e.preventDefault();
-                var h = getBranchHeight();
+                const h = getBranchHeight();
                 line.style.height = (h-3) + "px";
                 document.body.classList.add('nocursor');
             }
-            
-            function inner_mousemove(e)
+
+            function innerMouseMove(e)
             {
-                if (lastXLine != e.pageX) {
-                    var dt = lastXLine - e.pageX;
-                    var margin = parseFloat( grabber.style.marginLeft );
-                    grabber.style.marginLeft = clamp(margin - dt * 0.1, 10, 90) + "%";
-                }
+                let dt = e.movementX;
 
-                lastXLine = e.pageX;
+                if ( dt != 0 )
+                {
+                    const margin = parseFloat( grabber.style.marginLeft );
+                    grabber.style.marginLeft = clamp( margin + dt, 32, that.content.offsetWidth - 32 ) + "px";
+                }
             }
 
-            function inner_mouseup(e)
+            function innerMouseUp(e)
             {
-                if (lastX != e.pageX)
-                    that._updateWidgets();
-                lastX = e.pageX;
-                lastXLine = e.pageX;
+                that._updateWidgets();
+
                 line.style.height = "0px";
 
                 var doc = that.root.ownerDocument;
-                doc.removeEventListener("mouseup",inner_mouseup);
-                doc.removeEventListener("mousemove",inner_mousemove);
+                doc.removeEventListener("mouseup", innerMouseUp);
+                doc.removeEventListener("mousemove", innerMouseMove);
                 document.body.classList.remove('nocursor');
             }
 
@@ -6662,7 +6880,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static _last_id = 0;
 
         constructor( title, callback, options = {} ) {
-            
+
             if( !callback )
             {
                 console.warn("Content is empty, add some widgets using 'callback' parameter!");
@@ -6699,31 +6917,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 titleDiv.oncontextmenu = function(e) {
                     e.preventDefault();
                     e.stopPropagation();
-    
+
                     if(!LX.main_area || LX.main_area.type !== 'horizontal')
                         return;
 
                     addContextMenu("Dock", e, p => {
                         e.preventDefault();
-                        
-                        const get_next_panel = function(area) {
-                            let p = area.panels[0];
+
+                        const _getNextPanel = function( area ) {
+                            let p = area.panels[ 0 ];
                             if( p ) return p;
                             for(var s of area.sections){
-                                p = get_next_panel(s);
+                                p = _getNextPanel( s );
                                 if( p ) return p;
                             }
                         }
 
-                        const append_branch = function(panel) {
+                        const _appendBranch = function( panel ) {
                             let branch = panel.branches.find( b => b.name === title );
-                            if( !branch ) {
-                                panel.branch(title);
-                                branch = panel.branches.find( b => b.name === title );                                    
-                            }else
+                            if( !branch )
+                            {
+                                panel.branch( title );
+                                branch = panel.branches.find( b => b.name === title );
+                            }
+                            else
+                            {
                                 panel.root.appendChild( branch.root );
+                            }
 
-                            for( let w of that.widgets ) {
+                            for( let w of that.widgets )
+                            {
                                 branch.content.appendChild( w.domEl );
                             }
 
@@ -6734,16 +6957,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             branch.root.classList.add('last');
                             root.remove();
                         }
-                        
+
                         // Right
-                        let rpanel = get_next_panel(LX.main_area.sections[1]);
+                        let rpanel = _getNextPanel(LX.main_area.sections[ 1 ]);
                         p.add('<i class="fa-regular fa-window-maximize fa-window-maximize fa-rotate-90">', {disabled: !rpanel, id: 'dock_options0', callback: () => {
-                            append_branch(rpanel);
+                            _appendBranch(rpanel);
                         }});
                         // Left
-                        let lpanel = get_next_panel(LX.main_area.sections[0]);
+                        let lpanel = _getNextPanel(LX.main_area.sections[ 0 ]);
                         p.add('<i class="fa-regular fa-window-maximize fa-window-maximize fa-rotate-270">', {disabled: !lpanel, id: 'dock_options1', callback: () => {
-                            append_branch(lpanel);
+                            _appendBranch(lpanel);
                         }});
                     }, { icon: "fa-regular fa-window-restore" });
                 };
@@ -6755,41 +6978,61 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 this.close = () => {
 
+                    if( options.onBeforeClose )
+                    {
+                        options.onBeforeClose( this );
+                    }
+
                     if( !options.onclose )
                     {
                         that.panel.clear();
                         root.remove();
-                    } else
+                    }
+                    else
                     {
                         options.onclose( this.root );
                     }
 
-                    if(modal)
-                        LX.modal.toggle(true);
+                    if( modal )
+                    {
+                        LX.modal.toggle( true );
+                    }
                 };
 
-                var closeButton = document.createElement('a');
+                var closeButton = document.createElement( 'a' );
                 closeButton.className = "lexdialogcloser fa-solid fa-xmark";
                 closeButton.title = "Close";
-                closeButton.addEventListener('click', this.close);
+                closeButton.addEventListener( "click", this.close );
 
-                if(title) titleDiv.appendChild(closeButton);
-                else {
-                    closeButton.classList.add("notitle");
-                    root.appendChild(closeButton);
+                if( title )
+                {
+                    titleDiv.appendChild( closeButton );
+                }
+                else
+                {
+                    closeButton.classList.add( "notitle" );
+                    root.appendChild( closeButton );
                 }
             }
 
             const panel = new Panel();
-            panel.root.classList.add('lexdialogcontent');
-            if(!title) panel.root.classList.add('notitle');
-            if(callback)
-                callback.call(this, panel);
-            root.appendChild(panel.root);
+            panel.root.classList.add( "lexdialogcontent" );
+
+            if( !title )
+            {
+                panel.root.classList.add( "notitle" );
+            }
+
+            if( callback )
+            {
+                callback.call( this, panel );
+            }
+
+            root.appendChild( panel.root );
 
             // Make branches have a distintive to manage some cases
             panel.root.querySelectorAll(".lexbranch").forEach( b => b.classList.add("dialog") );
-            
+
             this.panel = panel;
             this.root = root;
             this.title = titleDiv;
@@ -6800,26 +7043,34 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // Process position and size
-            if(size.length && typeof(size[0]) != "string")
-                size[0] += "px";
-            if(size.length && typeof(size[1]) != "string")
-                size[1] += "px";
+            if( size.length && typeof(size[ 0 ]) != "string" )
+            {
+                size[ 0 ] += "px";
+            }
+
+            if( size.length && typeof(size[ 1 ]) != "string" )
+            {
+                size[ 1 ] += "px";
+            }
 
-            root.style.width = size[0] ? (size[0]) : "25%";
-            root.style.height = size[1] ? (size[1]) : "auto";
+            root.style.width = size[ 0 ] ? (size[ 0 ]) : "25%";
+            root.style.height = size[ 1 ] ? (size[ 1 ]) : "auto";
+
+            if( options.size )
+            {
+                this.size = size;
+            }
 
-            if(options.size) this.size = size;
-            
             let rect = root.getBoundingClientRect();
-            root.style.left = position[0] ? (position[0]) : "calc( 50% - " + (rect.width * 0.5) + "px )";
-            root.style.top = position[1] ? (position[1]) : "calc( 50% - " + (rect.height * 0.5) + "px )";
+            root.style.left = position[ 0 ] ? (position[ 0 ]) : "calc( 50% - " + ( rect.width * 0.5 ) + "px )";
+            root.style.top = position[ 1 ] ? (position[ 1 ]) : "calc( 50% - " + ( rect.height * 0.5 ) + "px )";
 
             panel.root.style.width = "calc( 100% - 30px )";
-            panel.root.style.height = title ? "calc( 100% - " + (titleDiv.offsetHeight + 30) + "px )" : "calc( 100% - 51px )";
+            panel.root.style.height = title ? "calc( 100% - " + ( titleDiv.offsetHeight + 30 ) + "px )" : "calc( 100% - 51px )";
         }
 
         destroy() {
-            
+
             this.root.remove();
         }
 
@@ -6830,7 +7081,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         setPosition(x, y) {
-            
+
             this.root.style.left = x + "px";
             this.root.style.top = y + "px";
         }
@@ -6859,9 +7110,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             options.draggable = options.draggable ?? false;
             options.closable = options.closable ?? false;
-            
+
             super( title, callback, options );
-            
+
             let that = this;
             // Update margins on branch title closes/opens
             LX.addSignal("@on_branch_closed", this.panel, closed => {
@@ -6869,7 +7120,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
             });
 
-            // Custom 
+            // Custom
             this.root.classList.add( "pocket" );
             if( !options.position ) {
                 this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
@@ -6883,7 +7134,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.title.tabIndex = -1;
             this.title.addEventListener("click", e => {
 
-                // Sized dialogs have to keep their size 
+                // Sized dialogs have to keep their size
                 if( this.size )
                 {
                     if( !this.minimized ) this.root.style.height = "auto";
@@ -6894,7 +7145,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.minimized = !this.minimized;
 
                 if( this.dock_pos == PocketDialog.BOTTOM )
-                    that.root.style.top = this.root.classList.contains("minimized") ? 
+                    that.root.style.top = this.root.classList.contains("minimized") ?
                     "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
             });
 
@@ -6909,10 +7160,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         const t = float[i];
                         switch( t )
                         {
-                        case 'b': 
+                        case 'b':
                             this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
                             break;
-                        case 'l': 
+                        case 'l':
                             this.root.style.left = options.position ? options.position[ 1 ] : "0px";
                             break;
                         }
@@ -6946,7 +7197,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     class ContextMenu {
 
         constructor( event, title, options = {} ) {
-            
+
             // remove all context menus
             document.body.querySelectorAll(".lexcontextmenubox").forEach(e => e.remove());
 
@@ -6958,7 +7209,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root.addEventListener("mouseleave", function() {
                 this.remove();
             });
-            
+
             this.items = [];
             this.colors = {};
 
@@ -6975,9 +7226,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         _adjust_position( div, margin, useAbsolute = false ) {
 
             let rect = div.getBoundingClientRect();
-            
+
             if( !useAbsolute )
-            {   
+            {
                 let width = rect.width;
                 if( rect.left < 0 )
                 {
@@ -7004,7 +7255,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     div.style.left = div.offsetLeft + (dt - margin) + "px";
                 }
-                
+
                 dt = window.innerHeight - (rect.top + rect.height);
                 if( dt < 0 )
                 {
@@ -7064,14 +7315,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             entry.addEventListener("click", e => {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
-                
+
                 if(disabled) return;
-                
+
                 const f = o[ 'callback' ];
                 if(f) {
                     f.call( this, k, entry );
                     this.root.remove();
-                } 
+                }
 
                 if( !hasSubmenu )
                 return;
@@ -7135,7 +7386,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 } );
 
                 if(found) {
-                    insert( tokens[idx++], found );    
+                    insert( tokens[idx++], found );
                 }
                 else {
                     let item = {};
@@ -7146,10 +7397,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         item[ 'id' ] = options.id;
                         item[ 'callback' ] = options.callback;
                         item[ 'disabled' ] = options.disabled ?? false;
-                    } 
+                    }
 
                     list.push( item );
-                    insert( next_token, item[ token ] ); 
+                    insert( next_token, item[ token ] );
                 }
             };
 
@@ -7234,14 +7485,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     class Curve {
 
         constructor( panel, value, options = {} ) {
-    
+
             let element = document.createElement( "div" );
             element.className = "curve " + ( options.className ? options.className : "" );
             element.style.minHeight = "50px";
             element.style.width = options.width || "100%";
             element.style.minWidth = "50px";
             element.style.minHeight = "20px";
-    
+
             element.bgcolor = options.bgColor || LX.getThemeColor( "global-dark-background" );
             element.pointscolor = options.pointsColor || LX.getThemeColor( "global-selected-light" );
             element.linecolor = options.lineColor || "#555";
@@ -7256,24 +7507,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.draggable_y = options.draggableY ?? true;
             element.smooth = (options.smooth && typeof( options.smooth ) == 'number' ? options.smooth : 0.3) || false;
             element.move_out = options.moveOutAction ?? LX.CURVE_MOVEOUT_DELETE;
-    
+
             this.element = element;
-    
+
             let canvas = document.createElement( "canvas" );
             canvas.width = options.width || 200;
             canvas.height = options.height || 50;
             element.appendChild( canvas );
             this.canvas = canvas;
-    
+
             element.addEventListener( "mousedown", onmousedown );
-    
+
             element.getValueAt = function( x ) {
-    
+
                 if( x < element.xrange[ 0 ] || x > element.xrange[ 1 ] )
                 {
                     return element.defaulty;
                 }
-    
+
                 var last = [ element.xrange[ 0 ], element.defaulty ];
                 var f = 0;
                 for( var i = 0; i < element.value.length; i += 1 )
@@ -7285,17 +7536,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         f = ( x - last[ 0 ] ) / (v[ 0 ] - last[ 0 ]);
                         return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
                     }
-    
+
                     last = v;
                 }
-    
+
                 v = [ element.xrange[ 1 ], element.defaulty ];
                 f = (x - last[ 0 ]) / (v[ 0 ] - last[ 0 ]);
                 return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
             }
-    
+
             element.resample = function( samples ) {
-    
+
                 var r = [];
                 var dx = (element.xrange[1] - element.xrange[ 0 ]) / samples;
                 for(var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
@@ -7304,9 +7555,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
                 return r;
             }
-    
+
             element.addValue = function(v) {
-    
+
                 for(var i = 0; i < element.value; i++) {
                     var value = element.value[i];
                     if(value[0] < v[0]) continue;
@@ -7314,27 +7565,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     redraw();
                     return;
                 }
-    
+
                 element.value.push(v);
                 redraw();
             }
-    
+
             //value to canvas
             function convert(v) {
                 return [ canvas.width * ( v[0] - element.xrange[0])/ (element.xrange[1]),
                     canvas.height * (v[1] - element.yrange[0])/ (element.yrange[1])];
             }
-    
+
             //canvas to value
             function unconvert(v) {
                 return [(v[0] * element.xrange[1] / canvas.width + element.xrange[0]),
                         (v[1] * element.yrange[1] / canvas.height + element.yrange[0])];
             }
-    
+
             var selected = -1;
-    
+
             element.redraw = function( o = {} )  {
-                
+
                 if( o.value ) element.value = o.value;
                 if( o.xrange ) element.xrange = o.xrange;
                 if( o.yrange ) element.yrange = o.yrange;
@@ -7345,23 +7596,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     canvas.width = rect.width;
                 }
-    
+
                 var ctx = canvas.getContext( "2d" );
                 ctx.setTransform( 1, 0, 0, 1, 0, 0 );
                 ctx.translate( 0, canvas.height );
                 ctx.scale( 1, -1 );
-    
+
                 ctx.fillStyle = element.bgcolor;
                 ctx.fillRect(0,0,canvas.width,canvas.height);
-    
+
                 ctx.strokeStyle = element.linecolor;
                 ctx.beginPath();
-    
+
                 //draw line
                 var pos = convert([ element.xrange[ 0 ],element.defaulty ]);
                 ctx.moveTo( pos[ 0 ], pos[ 1 ] );
                 let values = [pos[ 0 ], pos[ 1 ]];
-    
+
                 for(var i in element.value) {
                     var value = element.value[i];
                     pos = convert(value);
@@ -7370,7 +7621,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(!element.smooth)
                         ctx.lineTo( pos[ 0 ], pos[ 1 ] );
                 }
-    
+
                 pos = convert([ element.xrange[ 1 ], element.defaulty ]);
                 values.push(pos[ 0 ]);
                 values.push(pos[ 1 ]);
@@ -7383,7 +7634,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     LX.UTILS.drawSpline( ctx, values, element.smooth );
                 }
-    
+
                 // Draw points
                 for( var i = 0; i < element.value.length; i += 1 ) {
                     var value = element.value[ i ];
@@ -7396,7 +7647,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     ctx.arc( pos[ 0 ], pos[ 1 ], selected == i ? 4 : 3, 0, Math.PI * 2);
                     ctx.fill();
                 }
-    
+
                 if(element.show_samples) {
                     var samples = element.resample(element.show_samples);
                     ctx.fillStyle = "#888";
@@ -7410,43 +7661,43 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     }
                 }
             }
-    
+
             var last_mouse = [ 0, 0 ];
-    
+
             function onmousedown( e ) {
                 document.addEventListener( "mousemove", onmousemove );
                 document.addEventListener( "mouseup", onmouseup );
-    
+
                 var rect = canvas.getBoundingClientRect();
                 var mousex = e.clientX - rect.left;
                 var mousey = e.clientY - rect.top;
-    
+
                 selected = computeSelected( mousex, canvas.height - mousey );
-    
+
                 if( e.button == LX.MOUSE_LEFT_CLICK && selected == -1 && element.allow_add_values ) {
                     var v = unconvert([ mousex, canvas.height - mousey ]);
                     element.value.push( v );
                     sortValues();
                     selected = element.value.indexOf( v );
                 }
-    
+
                 last_mouse = [ mousex, mousey ];
                 element.redraw();
                 e.preventDefault();
                 e.stopPropagation();
             }
-    
+
             function onmousemove( e ) {
-    
+
                 var rect = canvas.getBoundingClientRect();
                 var mousex = e.clientX - rect.left;
                 var mousey = e.clientY - rect.top;
-    
+
                 if( mousex < 0 ) mousex = 0;
                 else if( mousex > canvas.width ) mousex = canvas.width;
                 if( mousey < 0 ) mousey = 0;
                 else if( mousey > canvas.height ) mousey = canvas.height;
-    
+
                 // Dragging to remove
                 const currentMouseDiff = [ e.clientX - rect.left, e.clientY - rect.top ];
                 if( selected != -1 && distance( currentMouseDiff, [ mousex, mousey ] ) > canvas.height * 0.5 )
@@ -7462,25 +7713,25 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         value[ 0 ] = ( d[ 0 ] == 0.0 ) ? value[ 0 ] : ( d[ 0 ] < 0.0 ? element.xrange[ 0 ] : element.xrange[ 1 ] );
                         value[ 1 ] = ( d[ 1 ] == 0.0 ) ? value[ 1 ] : ( d[ 1 ] < 0.0 ? element.yrange[ 1 ] : element.yrange[ 0 ] );
                     }
-    
+
                     onmouseup( e );
                     return;
                 }
-    
+
                 var dx = element.draggable_x ? last_mouse[ 0 ] - mousex : 0;
                 var dy = element.draggable_y ? last_mouse[ 1 ] - mousey : 0;
                 var delta = unconvert([ -dx, dy ]);
-    
+
                 if( selected != -1 ) {
                     var minx = element.xrange[ 0 ];
                     var maxx = element.xrange[ 1 ];
-    
+
                     if( element.no_overlap )
                     {
                         if( selected > 0) minx = element.value[ selected - 1 ][ 0 ];
                         if( selected < ( element.value.length - 1 ) ) maxx = element.value[ selected + 1 ][ 0 ];
                     }
-    
+
                     var v = element.value[selected];
                     v[ 0 ] += delta[ 0 ];
                     v[ 1 ] += delta[ 1 ];
@@ -7489,17 +7740,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(v[ 1 ] < element.yrange[ 0 ]) v[ 1 ] = element.yrange[ 0 ];
                     else if(v[ 1 ] > element.yrange[ 1 ]) v[ 1 ] = element.yrange[ 1 ];
                 }
-    
+
                 sortValues();
                 element.redraw();
                 last_mouse[ 0 ] = mousex;
                 last_mouse[ 1 ] = mousey;
                 onchange( e );
-    
+
                 e.preventDefault();
                 e.stopPropagation();
             }
-    
+
             function onmouseup( e ) {
                 selected = -1;
                 element.redraw();
@@ -7509,16 +7760,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 e.preventDefault();
                 e.stopPropagation();
             }
-            
+
             function onchange( e ) {
                 if( options.callback )
                     options.callback.call( element, element.value, e );
             }
-    
+
             function distance(a,b) { return Math.sqrt( Math.pow(b[0]-a[0],2) + Math.pow(b[1]-a[1],2) ); };
-    
+
             function computeSelected( x, y ) {
-    
+
                 var minDistance = 100000;
                 var maxDistance = 8; //pixels
                 var selected = -1;
@@ -7535,7 +7786,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
                 return selected;
             }
-    
+
             function sortValues() {
                 var v = null;
                 if( selected != -1 )
@@ -7548,11 +7799,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     selected = element.value.indexOf( v );
                 }
             }
-            
+
             element.redraw();
             return this;
         }
-    
+
         redraw( options = {} ) {
             this.element.redraw( options );
         }
@@ -7570,14 +7821,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static ASSET_DBLCLICKED = 5;
         static ENTER_FOLDER     = 6;
         static ASSET_CHECKED    = 7;
-    
+
         constructor( type, item, value ) {
             this.type = type || TreeEvent.NONE;
             this.item = item;
             this.value = value;
             this.multiple = false; // Multiple selection
         }
-        
+
         string() {
             switch(this.type) {
                 case AssetViewEvent.NONE: return "assetview_event_none";
@@ -7633,9 +7884,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.skipBrowser = options.skipBrowser ?? false;
             this.skipPreview = options.skipPreview ?? false;
+            this.useNativeTitle = options.useNativeTitle ?? false;
             this.onlyFolders = options.onlyFolders ?? true;
             this.previewActions = options.previewActions ?? [];
             this.contextMenu = options.contextMenu ?? [];
+            this.onRefreshContent = options.onRefreshContent;
 
             if( !this.skipBrowser )
             {
@@ -7650,7 +7903,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 [ contentArea, right ] = contentArea.split({ type: "horizontal", sizes: ["80%", "20%"]});
             }
-            
+
             this.allowedTypes = options.allowedTypes || ["None", "Image", "Mesh", "Script", "JSON", "Clip"];
 
             this.prevData = [];
@@ -7668,7 +7921,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             this._createContentPanel( contentArea );
-            
+
             // Create resource preview panel
             if( !this.skipPreview )
             {
@@ -7684,7 +7937,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.prevData.length = 0;
             this.nextData.length = 0;
-            
+
             this.data = data;
 
             this._processData( this.data, null );
@@ -7705,14 +7958,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         * @method clear
         */
         clear() {
+
             if( this.previewPanel )
             {
                 this.previewPanel.clear();
             }
+
             if( this.leftPanel )
             {
                 this.leftPanel.clear();
             }
+
             if( this.rightPanel )
             {
                 this.rightPanel.clear()
@@ -7744,7 +8000,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         */
 
         _updatePath( data ) {
-            
+
             this.path.length = 0;
 
             const push_parents_id = i => {
@@ -7783,8 +8039,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 children: this.data
             }
 
-            this.tree = this.leftPanel.addTree("Content Browser", treeData, { 
-                // icons: tree_icons, 
+            this.tree = this.leftPanel.addTree( "Content Browser", treeData, {
+                // icons: tree_icons,
                 filter: false,
                 onlyFolders: this.onlyFolders,
                 onevent: event => {
@@ -7794,7 +8050,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                     switch( event.type )
                     {
-                        case LX.TreeEvent.NODE_SELECTED: 
+                        case LX.TreeEvent.NODE_SELECTED:
                             if( !event.multiple )
                             {
                                 this._enterFolder( node );
@@ -7809,13 +8065,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                                 LX.emit("@on_folder_change", this.path.join('/'));
                             }
                             break;
-                        case LX.TreeEvent.NODE_DRAGGED: 
+                        case LX.TreeEvent.NODE_DRAGGED:
                             node.folder = value;
                             this._refreshContent();
                             break;
                     }
                 },
-            });    
+            });
         }
 
         /**
@@ -7844,7 +8100,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.rightPanel = area.addPanel({ className: 'lexassetcontentpanel' });
             }
 
-            const on_sort = (value, event) => {
+            const on_sort = ( value, event ) => {
                 const cmenu = addContextMenu( "Sort by", event, c => {
                     c.add("Name", () => this._sortData('id') );
                     c.add("Type", () => this._sortData('type') );
@@ -7854,10 +8110,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 } );
                 const parent = this.parent.root.parentElement;
                 if( parent.classList.contains('lexdialog') )
+                {
                     cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
+                }
             }
 
-            const on_change_view = (value, event) => {
+            const on_change_view = ( value, event ) => {
                 const cmenu = addContextMenu( "Layout", event, c => {
                     c.add("Content", () => this._setContentLayout( AssetView.LAYOUT_CONTENT ) );
                     c.add("");
@@ -7868,7 +8126,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
             }
 
-            const on_change_page = (value, event) => {
+            const on_change_page = ( value, event ) => {
                 if( !this.allowNextPage )
                 {
                     return;
@@ -7885,13 +8143,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             this.rightPanel.sameLine();
-            this.rightPanel.addDropdown("Filter", this.allowedTypes, this.allowedTypes[0], (v) => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" });
-            this.rightPanel.addText(null, this.searchValue ?? "", (v) => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." });
-            this.rightPanel.addButton(null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" });
-            this.rightPanel.addButton(null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" });
+            this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" } );
+            this.rightPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
+            this.rightPanel.addButton( null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" } );
+            this.rightPanel.addButton( null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" } );
             // Content Pages
-            this.rightPanel.addButton(null, "<a class='fa-solid fa-angles-left'></a>", on_change_page.bind(this, -1), { className: "micro", title: "Previous Page" });
-            this.rightPanel.addButton(null, "<a class='fa-solid fa-angles-right'></a>", on_change_page.bind(this, 1), { className: "micro", title: "Next Page" });
+            this.rightPanel.addButton( null, "<a class='fa-solid fa-angles-left'></a>", on_change_page.bind(this, -1), { className: "micro", title: "Previous Page" }) ;
+            this.rightPanel.addButton( null, "<a class='fa-solid fa-angles-right'></a>", on_change_page.bind(this, 1), { className: "micro", title: "Next Page" } );
             this.rightPanel.endLine();
 
             if( !this.skipBrowser )
@@ -7901,7 +8159,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         value: "Left",
                         icon: "fa-solid fa-left-long",
-                        callback:  (domEl) => { 
+                        callback: domEl => {
                             if(!this.prevData.length) return;
                             this.nextData.push( this.currentData );
                             this.currentData = this.prevData.pop();
@@ -7912,7 +8170,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         value: "Right",
                         icon: "fa-solid fa-right-long",
-                        callback:  (domEl) => { 
+                        callback: domEl => {
                             if(!this.nextData.length) return;
                             this.prevData.push( this.currentData );
                             this.currentData = this.nextData.pop();
@@ -7923,7 +8181,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         value: "Refresh",
                         icon: "fa-solid fa-arrows-rotate",
-                        callback:  (domEl) => { this._refreshContent(); }
+                        callback: domEl => { this._refreshContent(); }
                     }
                 ], { width: "auto", noSelection: true } );
                 this.rightPanel.addText(null, this.path.join('/'), null, { disabled: true, signal: "@on_folder_change", style: { fontWeight: "bolder", fontSize: "16px", color: "#aaa" } });
@@ -7935,17 +8193,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.content.className = "lexassetscontent";
             this.rightPanel.root.appendChild(this.content);
 
-            this.content.addEventListener('dragenter', function(e) {
+            this.content.addEventListener('dragenter', function( e ) {
                 e.preventDefault();
                 this.classList.add('dragging');
             });
-            this.content.addEventListener('dragleave', function(e) {
+            this.content.addEventListener('dragleave', function( e ) {
                 e.preventDefault();
                 this.classList.remove('dragging');
             });
-            this.content.addEventListener('drop', (e) => {
+            this.content.addEventListener('drop', ( e ) => {
                 e.preventDefault();
-                this._processDrop(e);
+                this._processDrop( e );
             });
             this.content.addEventListener('click', function() {
                 this.querySelectorAll('.lexassetitem').forEach( i => i.classList.remove('selected') );
@@ -7956,29 +8214,80 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _refreshContent( searchValue, filter ) {
 
-            const isContentLayout = (this.layout == AssetView.LAYOUT_CONTENT); // default
-    
-            this.filter = filter ?? (this.filter ?? "None");
+            const isContentLayout = ( this.layout == AssetView.LAYOUT_CONTENT ); // default
+
+            this.filter = filter ?? ( this.filter ?? "None" );
             this.searchValue = searchValue ?? (this.searchValue ?? "");
             this.content.innerHTML = "";
             this.content.className = (isContentLayout ? "lexassetscontent" : "lexassetscontent list");
             let that = this;
-            
+
             const add_item = function(item) {
-    
+
                 const type = item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 );
                 const extension = getExtension( item.id );
                 const isFolder = type === "Folder";
-    
+
                 let itemEl = document.createElement('li');
                 itemEl.className = "lexassetitem " + item.type.toLowerCase();
-                itemEl.title = type + ": " + item.id;
                 itemEl.tabIndex = -1;
                 that.content.appendChild( itemEl );
-    
-                if(item.selected != undefined) {
+
+                if( !that.useNativeTitle )
+                {
+                    let desc = document.createElement( 'span' );
+                    desc.className = 'lexitemdesc';
+                    desc.innerHTML = "File: " + item.id + "<br>Type: " + type;
+                    that.content.appendChild( desc );
+
+                    itemEl.addEventListener("mousemove", e => {
+
+                        if( !isContentLayout )
+                        {
+                            return;
+                        }
+
+                        const rect = itemEl.getBoundingClientRect();
+                        const targetRect = e.target.getBoundingClientRect();
+                        const parentRect = desc.parentElement.getBoundingClientRect();
+
+                        let localOffsetX = targetRect.x - parentRect.x - ( targetRect.x - rect.x );
+                        let localOffsetY = targetRect.y - parentRect.y - ( targetRect.y - rect.y );
+
+                        if( e.target.classList.contains( "lexassettitle" ) )
+                        {
+                            localOffsetY += ( targetRect.y - rect.y );
+                        }
+
+                        desc.style.left = (localOffsetX + e.offsetX + 12) + "px";
+                        desc.style.top = (localOffsetY + e.offsetY) + "px";
+                    });
+
+                    itemEl.addEventListener("mouseenter", () => {
+                        if( isContentLayout )
+                        {
+                            desc.style.display = "unset";
+                        }
+                    });
+
+                    itemEl.addEventListener("mouseleave", () => {
+                        if( isContentLayout )
+                        {
+                            setTimeout( () => {
+                                desc.style.display = "none";
+                            }, 100 );
+                        }
+                    });
+                }
+                else
+                {
+                    itemEl.title = type + ": " + item.id;
+                }
+
+                if( item.selected != undefined )
+                {
                     let span = document.createElement('span');
-                    span.className = "lexcheckbox"; 
+                    span.className = "lexcheckbox";
                     let checkbox_input = document.createElement('input');
                     checkbox_input.type = "checkbox";
                     checkbox_input.className = "checkbox";
@@ -7996,18 +8305,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     })
                     span.appendChild(checkbox_input);
                     itemEl.appendChild(span);
-                    
+
                 }
+
                 let title = document.createElement('span');
                 title.className = "lexassettitle";
                 title.innerText = item.id;
                 itemEl.appendChild( title );
-    
+
                 if( !that.skipPreview ) {
-    
+
                     let preview = null;
                     const hasImage = item.src && (['png', 'jpg'].indexOf( getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
-    
+
                     if( hasImage || isFolder || !isContentLayout)
                     {
                         preview = document.createElement('img');
@@ -8020,17 +8330,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         preview = document.createElement('svg');
                         preview.className = "asset-file-preview";
                         itemEl.appendChild(preview);
-                        
+
                         let textEl = document.createElement('text');
                         preview.appendChild(textEl);
                         // If no extension, e.g. Clip, use the type...
                         textEl.innerText = (!extension || extension == item.id) ? item.type.toUpperCase() : ("." + extension.toUpperCase());
-    
+
                         var newLength = textEl.innerText.length;
                         var charsPerLine = 2.5;
                         var newEmSize = charsPerLine / newLength;
                         var textBaseSize = 64;
-    
+
                         if(newEmSize < 1) {
                             var newFontSize = newEmSize * textBaseSize;
                             textEl.style.fontSize = newFontSize + "px";
@@ -8038,7 +8348,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         }
                     }
                 }
-    
+
                 if( !isFolder )
                 {
                     let info = document.createElement('span');
@@ -8046,13 +8356,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     info.innerText = type;
                     itemEl.appendChild(info);
                 }
-    
+
                 itemEl.addEventListener('click', function(e) {
                     e.stopImmediatePropagation();
                     e.stopPropagation();
-    
+
                     const isDoubleClick = ( e.detail == LX.MOUSE_DOUBLE_CLICK );
-    
+
                     if( !isDoubleClick )
                     {
                         if( !e.shiftKey )
@@ -8066,13 +8376,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         {
                             that._previewAsset( item );
                         }
-                    } 
+                    }
                     else if( isFolder )
                     {
                         that._enterFolder( item );
                         return;
                     }
-    
+
                     if( that.onevent )
                     {
                         const event = new AssetViewEvent(isDoubleClick ? AssetViewEvent.ASSET_DBLCLICKED : AssetViewEvent.ASSET_SELECTED, e.shiftKey ? [item] : item );
@@ -8080,42 +8390,48 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         that.onevent( event );
                     }
                 });
-    
+
                 if( that.contextMenu )
                 {
                     itemEl.addEventListener('contextmenu', function(e) {
                         e.preventDefault();
-    
+
                         const multiple = that.content.querySelectorAll('.selected').length;
-    
-                        LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
+
+                        LX.addContextMenu( multiple > 1 ? (multiple + " selected") :
                                     isFolder ? item.id : item.type, e, m => {
-                            if(multiple <= 1)   
+                            if( multiple <= 1 )
+                            {
                                 m.add("Rename");
+                            }
                             if( !isFolder )
-                                m.add("Clone", that._clone_item.bind(that, item));
-                            if(multiple <= 1)
+                            {
+                                m.add("Clone", that._cloneItem.bind( that, item ));
+                            }
+                            if( multiple <= 1 )
+                            {
                                 m.add("Properties");
+                            }
                             m.add("");
-                            m.add("Delete", that._delete_item.bind(that, item));
+                            m.add("Delete", that._deleteItem.bind( that, item ));
                         });
                     });
                 }
-    
+
                 itemEl.addEventListener("dragstart", function(e) {
                     e.preventDefault();
                 }, false );
-    
+
                 return itemEl;
             }
-    
+
             const fr = new FileReader();
-    
+
             const filteredData = this.currentData.filter( _i => {
                 return (this.filter != "None" ? _i.type.toLowerCase() == this.filter.toLowerCase() : true) &&
                     _i.id.toLowerCase().includes(this.searchValue.toLowerCase())
             } );
-    
+
             if( filter || searchValue )
             {
                 this.contentPage = 1;
@@ -8124,17 +8440,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Show all data if using filters
             const startIndex = (this.contentPage - 1) * AssetView.MAX_PAGE_ELEMENTS;
             const endIndex = Math.min( startIndex + AssetView.MAX_PAGE_ELEMENTS, filteredData.length );
-    
+
             for( let i = startIndex; i < endIndex; ++i )
             {
                 let item = filteredData[ i ];
-    
+
                 if( item.path )
                 {
                     LX.request({ url: item.path, dataType: 'blob', success: (f) => {
                         item.bytesize = f.size;
                         fr.readAsDataURL( f );
-                        fr.onload = e => { 
+                        fr.onload = e => {
                             item.src = e.currentTarget.result;  // This is a base64 string...
                             item._path = item.path;
                             delete item.path;
@@ -8146,8 +8462,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     item.domEl = add_item( item );
                 }
             }
+
             this.allowNextPage = filteredData.length - 1 > AssetView.MAX_PAGE_ELEMENTS;
             LX.emit("@on_page_change", "Page " + this.contentPage + " / " + ((((filteredData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1));
+
+            if( this.onRefreshContent )
+            {
+                this.onRefreshContent( searchValue, filter );
+            }
         }
 
         /**
@@ -8179,16 +8501,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.previewPanel.addText("Type", file.type, null, options);
             if( file.bytesize ) this.previewPanel.addText("Size", (file.bytesize/1024).toPrecision(3) + " KBs", null, options);
             if( file.type == "folder" ) this.previewPanel.addText("Files", file.children ? file.children.length.toString() : "0", null, options);
-            
+
             this.previewPanel.addSeparator();
-            
+
             const previewActions = [...this.previewActions];
 
             if( !previewActions.length )
             {
                 // By default
                 previewActions.push({
-                    name: 'Download', 
+                    name: 'Download',
                     callback: () => LX.downloadURL(file.src, file.id)
                 });
             }
@@ -8216,8 +8538,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if(result) continue;
 
                 fr.readAsDataURL( file );
-                fr.onload = e => { 
-                    
+                fr.onload = e => {
+
                     let ext = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
 
                     let item = {
@@ -8232,12 +8554,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     case 'png':
                     case 'jpg':
                         item.type = "image"; break;
-                    case 'js': 
-                    case 'css': 
+                    case 'js':
+                    case 'css':
                         item.type = "script"; break;
-                    case 'json': 
+                    case 'json':
                         item.type = "json"; break;
-                    case 'obj': 
+                    case 'obj':
                         item.type = "mesh"; break;
                     default:
                         item.type = ext;
@@ -8246,7 +8568,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     }
 
                     this.currentData.push( item );
-                    
+
                     if(i == (num_files - 1)) {
                         this._refreshContent();
                         if( !this.skipBrowser )
@@ -8311,26 +8633,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _cloneItem( item ) {
 
-            const idx = this.currentData.indexOf(item);
-            if(idx > -1) {
-                delete item.domEl;
-                delete item.folder;
-                const new_item = deepCopy( item );
-                this.currentData.splice(idx, 0, new_item);
-                this._refreshContent(this.searchValue, this.filter);
+            const idx = this.currentData.indexOf( item );
+            if( idx < 0 )
+            {
+                return;
+            }
 
-                if(this.onevent) {
-                    const event = new AssetViewEvent(AssetViewEvent.ASSET_CLONED, item );
-                    this.onevent( event );
-                }
+            delete item.domEl;
+            delete item.folder;
+            const new_item = deepCopy( item );
+            this.currentData.splice( idx, 0, new_item );
 
-                this._processData(this.data);
+            this._refreshContent( this.searchValue, this.filter );
+
+            if( this.onevent )
+            {
+                const event = new AssetViewEvent( AssetViewEvent.ASSET_CLONED, item );
+                this.onevent( event );
             }
+
+            this._processData( this.data );
         }
     }
 
     LX.AssetView = AssetView;
-        
+
     /*
     *   Requests
     */
@@ -8338,12 +8665,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     Object.assign(LX, {
 
         /**
-        * Request file from url (it could be a binary, text, etc.). If you want a simplied version use 
+        * Request file from url (it could be a binary, text, etc.). If you want a simplied version use
         * @method request
         * @param {Object} request object with all the parameters like data (for sending forms), dataType, success, error
         * @param {Function} on_complete
         **/
-        request(request) {
+        request( request ) {
 
             var dataType = request.dataType || "text";
             if(dataType == "json") //parse it locally
@@ -8458,7 +8785,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         requestBinary(url, on_complete, on_error ) {
             return this.request({ url: url, dataType:"binary", success: on_complete, error: on_error });
         },
-        
+
         /**
         * Request script and inserts it in the DOM
         * @method requireScript
@@ -8487,7 +8814,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 script.src = url[i] + ( version ? "?version=" + version : "" );
                 script.original_src = url[i];
                 script.async = false;
-                script.onload = function(e) { 
+                script.onload = function(e) {
                     total--;
                     loaded_scripts.push(this);
                     if(total)
@@ -8499,7 +8826,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         on_complete( loaded_scripts );
                 };
                 if(on_error)
-                    script.onerror = function(err) { 
+                    script.onerror = function(err) {
                         on_error(err, this.original_src, this.num );
                     }
                 document.getElementsByTagName('head')[0].appendChild(script);
@@ -8523,7 +8850,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 LX.request({ url: url, dataType: 'blob', success: (f) => {
                     fr.readAsDataURL( f );
-                    fr.onload = e => { 
+                    fr.onload = e => {
                         _download(e.currentTarget.result);
                     };
                 } });
@@ -8609,31 +8936,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.offsetHeight;
         },
         getControlPoints( x0, y0, x1, y1, x2, y2 ,t ) {
-            
+
             //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment
             //  x2,y2 is the next knot -- not connected here but needed to calculate p2
             //  p1 is the control point calculated here, from x1 back toward x0.
-            //  p2 is the next control point, calculated here and returned to become the 
+            //  p2 is the next control point, calculated here and returned to become the
             //  next segment's p1.
             //  t is the 'tension' which controls how far the control points spread.
-            
+
             //  Scaling factors: distances from this knot to the previous and following knots.
             var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2));
             var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
-        
+
             var fa=t*d01/(d01+d12);
             var fb=t-fa;
-        
+
             var p1x=x1+fa*(x0-x2);
             var p1y=y1+fa*(y0-y2);
-        
+
             var p2x=x1-fb*(x0-x2);
-            var p2y=y1-fb*(y0-y2);  
-            
+            var p2y=y1-fb*(y0-y2);
+
             return [p1x,p1y,p2x,p2y]
         },
         drawSpline( ctx, pts, t ) {
-        
+
             ctx.save();
             var cp=[];   // array of control points, as x0,y0,x1,y1,...
             var n=pts.length;
@@ -8641,7 +8968,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Draw an open curve, not connected at the ends
             for(var i=0;i<n-4;i+=2) {
                 cp=cp.concat(LX.UTILS.getControlPoints(pts[i],pts[i+1],pts[i+2],pts[i+3],pts[i+4],pts[i+5],t));
-            }    
+            }
 
             for(var i=2;i<pts.length-5;i+=2) {
                 ctx.beginPath();
@@ -8649,7 +8976,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 ctx.bezierCurveTo(cp[2*i-2],cp[2*i-1],cp[2*i],cp[2*i+1],pts[i+2],pts[i+3]);
                 ctx.stroke();
                 ctx.closePath();
-                
+
             }
             //  For open curves the first and last arcs are simple quadratics.
             ctx.beginPath();
@@ -8657,13 +8984,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             ctx.quadraticCurveTo(cp[0],cp[1],pts[2],pts[3]);
             ctx.stroke();
             ctx.closePath();
-        
+
             ctx.beginPath();
             ctx.moveTo(pts[n-2],pts[n-1]);
             ctx.quadraticCurveTo(cp[2*n-10],cp[2*n-9],pts[n-4],pts[n-3]);
             ctx.stroke();
             ctx.closePath();
-            
+
             ctx.restore();
         }
     };