lexgui 0.1.46 → 0.4.0

package/build/lexgui.module.js

@@ -8,10 +8,12 @@
 */
 
 var LX = {
-    version: "0.1.46",
+    version: "0.4.0",
     ready: false,
-    components: [], // specific pre-build components
-    signals: {} // events and triggers
+    components: [], // Specific pre-build components
+    signals: {}, // Events and triggers
+    extraCommandbarEntries: [], // User specific entries for command bar
+    activeDraggable: null // Watch for the current active draggable
 };
 
 LX.MOUSE_LEFT_CLICK     = 0;
@@ -24,6 +26,8 @@ LX.MOUSE_TRIPLE_CLICK = 3;
 LX.CURVE_MOVEOUT_CLAMP = 0;
 LX.CURVE_MOVEOUT_DELETE = 1;
 
+LX.DRAGGABLE_Z_INDEX = 101;
+
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
 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; }
@@ -83,7 +87,7 @@ LX.doAsync = doAsync;
  */
 function getSupportedDOMName( text )
 {
-    return text.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
+    return text.replace( /\s/g, '' ).replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll( '.', '' );
 }
 
 LX.getSupportedDOMName = getSupportedDOMName;
@@ -161,12 +165,13 @@ function getThemeColor( colorName )
 {
     const r = getComputedStyle( document.querySelector( ':root' ) );
     const value = r.getPropertyValue( '--' + colorName );
+    const theme = document.documentElement.getAttribute( "data-theme" );
 
-    if( value.includes( "light-dark" ) && window.matchMedia )
+    if( value.includes( "light-dark" ) )
     {
         const currentScheme = r.getPropertyValue( "color-scheme" );
 
-        if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
+        if( currentScheme == "light" )
         {
             return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
         }
@@ -221,7 +226,8 @@ LX.hexToRgb = hexToRgb;
 function rgbToHex( rgb )
 {
     let hex = "#";
-    for( let c of rgb ) {
+    for( let c of rgb )
+    {
         c = Math.floor( c * 255 );
         hex += c.toString( 16 );
     }
@@ -296,7 +302,7 @@ LX.buildTextPattern = buildTextPattern;
 
 /**
  * @method makeDraggable
- * @description Allow an element to be dragged
+ * @description Allows an element to be dragged
  * @param {Element} domEl
  * @param {Object} options
  * autoAdjust (Bool): Sets in a correct position at the beggining
@@ -321,6 +327,7 @@ function makeDraggable( domEl, options = { } )
         top = top ?? e.clientY - offsetY - parentRect.y;
         domEl.style.left = clamp( left, dragMargin + fixedOffset.x, fixedOffset.x + parentRect.width - domEl.offsetWidth - dragMargin ) + 'px';
         domEl.style.top = clamp( top, dragMargin + fixedOffset.y, fixedOffset.y + parentRect.height - domEl.offsetHeight - dragMargin ) + 'px';
+        domEl.style.translate = "none"; // Force remove translation
     };
 
     // Initial adjustment
@@ -365,26 +372,45 @@ function makeDraggable( domEl, options = { } )
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
-        if( !currentTarget ) return;
+
+        if( !currentTarget )
+        {
+            return;
+        }
+
         // Remove image when dragging
         var img = new Image();
         img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
         e.dataTransfer.setDragImage( img, 0, 0 );
         e.dataTransfer.effectAllowed = "move";
+
         const rect = e.target.getBoundingClientRect();
         const parentRect = currentTarget.parentElement.getBoundingClientRect();
         const isFixed = ( currentTarget.style.position == "fixed" );
         const fixedOffset = isFixed ? new LX.vec2( parentRect.x, parentRect.y ) : new LX.vec2();
         offsetX = e.clientX - rect.x - fixedOffset.x;
         offsetY = e.clientY - rect.y - fixedOffset.y;
+
         document.addEventListener( "mousemove", onMove );
+
+        currentTarget._eventCatched = true;
+
+        // Force active dialog to show on top
+        if( LX.activeDraggable )
+        {
+            LX.activeDraggable.style.zIndex = LX.DRAGGABLE_Z_INDEX;
+        }
+
+        LX.activeDraggable = domEl;
+        LX.activeDraggable.style.zIndex = LX.DRAGGABLE_Z_INDEX + 1;
+
         if( onDragStart )
         {
             onDragStart( currentTarget, e );
         }
     }, false );
 
-    document.addEventListener( 'mouseup', () => {
+    document.addEventListener( 'mouseup', (e) => {
         if( currentTarget )
         {
             currentTarget = null;
@@ -395,6 +421,48 @@ function makeDraggable( domEl, options = { } )
 
 LX.makeDraggable = makeDraggable;
 
+/**
+ * @method makeCollapsible
+ * @description Allows an element to be collapsed/expanded
+ * @param {Element} domEl: Element to be treated as collapsible
+ * @param {Element} content: Content to display/hide on collapse/extend
+ * @param {Element} parent: Element where the content will be appended (default is domEl.parent)
+ * @param {Object} options
+ */
+function makeCollapsible( domEl, content, parent, options = { } )
+{
+    domEl.classList.add( "collapsible" );
+
+    const collapsed = ( options.collapsed ?? true );
+    const actionIcon = LX.makeIcon( "Right" );
+    actionIcon.classList.add( "collapser" );
+    actionIcon.dataset[ "collapsed" ] = collapsed;
+    actionIcon.style.marginLeft = "auto";
+
+    actionIcon.addEventListener( "click", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if( this.dataset[ "collapsed" ] )
+        {
+            delete this.dataset[ "collapsed" ];
+            content.style.display = "block";
+        }
+        else
+        {
+            this.dataset[ "collapsed" ] = true;
+            content.style.display = "none";
+        }
+    } );
+
+    domEl.appendChild( actionIcon );
+
+    parent = parent ?? domEl.parentElement;
+
+    parent.appendChild( content );
+}
+
+LX.makeCollapsible = makeCollapsible;
+
 /**
  * @method makeCodeSnippet
  * @description Create a code snippet in a specific language
@@ -404,6 +472,9 @@ LX.makeDraggable = makeDraggable;
  * language (String):
  * windowMode (Boolean):
  * lineNumbers (Boolean):
+ * firstLine (Number): TODO
+ * linesAdded (Array):
+ * linesRemoved (Array):
  * tabName (String):
  */
 function makeCodeSnippet( code, size, options = { } )
@@ -416,16 +487,15 @@ function makeCodeSnippet( code, size, options = { } )
 
     const snippet = document.createElement( "div" );
     snippet.className = "lexcodesnippet";
-    snippet.style.width = size[ 0 ];
-    snippet.style.height = size[ 1 ];
+    snippet.style.width = size ? size[ 0 ] : "auto";
+    snippet.style.height = size ? size[ 1 ] : "auto";
     const area = new Area( { noAppend: true } );
     let editor = new LX.CodeEditor( area, {
         skipInfo: true,
         disableEdition: true,
         allowAddScripts: false,
         name: options.tabName,
-        // showTab: options.showTab ?? true,
-        // lineNumbers: options.lineNumbers ?? true
+        // showTab: options.showTab ?? true
     } );
     editor.setText( code, options.language ?? "Plain Text" );
 
@@ -484,12 +554,47 @@ function makeCodeSnippet( code, size, options = { } )
         tabs.prepend( windowActionButtons );
     }
 
+    if( !( options.lineNumbers ?? true ) )
+    {
+        editor.root.classList.add( "no-gutter" );
+    }
+
     snippet.appendChild( area.root );
     return snippet;
 }
 
 LX.makeCodeSnippet = makeCodeSnippet;
 
+/**
+ * @method makeIcon
+ * @description Gets an SVG element using one of LX.ICONS
+ * @param {String} iconName
+ * @param {String} iconTitle
+ */
+function makeIcon( iconName, iconTitle )
+{
+    const icon = document.createElement( "a" );
+    icon.title = iconTitle ?? "";
+    icon.className = "lexicon";
+    icon.innerHTML = LX.ICONS[ iconName ] ?? "";
+    return icon;
+}
+
+LX.makeIcon = makeIcon;
+
+/**
+ * @method registerCommandbarEntry
+ * @description Adds an extra command bar entry
+ * @param {String} name
+ * @param {Function} callback
+ */
+function registerCommandbarEntry( name, callback )
+{
+    LX.extraCommandbarEntries.push( { name, callback } );
+}
+
+LX.registerCommandbarEntry = registerCommandbarEntry;
+
 // Math classes
 
 class vec2 {
@@ -518,24 +623,23 @@ class vec2 {
 
 LX.vec2 = vec2;
 
-function create_global_searchbar( root )
+function _createCommandbar( root )
 {
-    let globalSearch = document.createElement("div");
-    globalSearch.id = "global-search";
-    globalSearch.className = "hidden";
-    globalSearch.tabIndex = -1;
-    root.appendChild( globalSearch );
+    let commandbar = document.createElement( "dialog" );
+    commandbar.className = "commandbar";
+    commandbar.tabIndex = -1;
+    root.appendChild( commandbar );
 
     let allItems = [];
     let hoverElId = null;
 
-    globalSearch.addEventListener('keydown', function( e ) {
+    commandbar.addEventListener('keydown', function( e ) {
         e.stopPropagation();
         e.stopImmediatePropagation();
         hoverElId = hoverElId ?? -1;
         if( e.key == 'Escape' )
         {
-            this.classList.add("hidden");
+            this.close();
             _resetBar( true );
         }
         else if( e.key == 'Enter' )
@@ -544,7 +648,7 @@ function create_global_searchbar( root )
             if( el )
             {
                 const isCheckbox = (el.item.type && el.item.type === 'checkbox');
-                this.classList.toggle('hidden');
+                this.close();
                 if( isCheckbox )
                 {
                     el.item.checked = !el.item.checked;
@@ -559,7 +663,7 @@ function create_global_searchbar( root )
         else if ( e.key == 'ArrowDown' && hoverElId < (allItems.length - 1) )
         {
             hoverElId++;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
 
             let dt = allItems[ hoverElId ].offsetHeight * (hoverElId + 1) - itemContainer.offsetHeight;
@@ -574,19 +678,19 @@ function create_global_searchbar( root )
         } else if ( e.key == 'ArrowUp' && hoverElId > 0 )
         {
             hoverElId--;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
         }
     });
 
-    globalSearch.addEventListener('focusout', function( e ) {
+    commandbar.addEventListener('focusout', function( e ) {
         if( e.relatedTarget == e.currentTarget )
         {
             return;
         }
         e.stopPropagation();
         e.stopImmediatePropagation();
-        this.classList.add( "hidden" );
+        this.close();
         _resetBar( true );
     });
 
@@ -595,9 +699,7 @@ function create_global_searchbar( root )
         {
             e.stopImmediatePropagation();
             e.stopPropagation();
-            globalSearch.classList.toggle('hidden');
-            globalSearch.querySelector('input').focus();
-            _addElements( undefined );
+            LX.setCommandbarState( true );
         }
         else
         {
@@ -675,22 +777,22 @@ function create_global_searchbar( root )
         const isCheckbox = (i && i.type && i.type === 'checkbox');
         if( isCheckbox )
         {
-            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + p + t + "</span>"
+            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + ( p + t ) + "</span>"
         }
         else
         {
-            searchItem.innerHTML = p + t;
+            searchItem.innerHTML = ( p + t );
         }
         searchItem.entry_name = t;
         searchItem.callback = c;
         searchItem.item = i;
         searchItem.addEventListener('click', function(e) {
-            this.callback.call(window, this.entry_name);
-            globalSearch.classList.toggle('hidden');
+            this.callback.call( window, this.entry_name );
+            LX.setCommandbarState( false );
             _resetBar( true );
         });
         searchItem.addEventListener('mouseenter', function(e) {
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             this.classList.add('hovered');
             hoverElId = allItems.indexOf( this );
         });
@@ -724,7 +826,7 @@ function create_global_searchbar( root )
             _propagateAdd( c, filter, path );
     };
 
-    const _addElements = filter => {
+    commandbar._addElements = filter => {
 
         _resetBar();
 
@@ -736,15 +838,25 @@ function create_global_searchbar( root )
             }
         }
 
+        for( let entry of LX.extraCommandbarEntries )
+        {
+            const name = entry.name;
+            if( !name.toLowerCase().includes( filter ) )
+            {
+                continue;
+            }
+            _addElement( name, entry.callback, "", {} );
+        }
+
         if( LX.has('CodeEditor') )
         {
             const instances = LX.CodeEditor.getInstances();
-            if(!instances.length) return;
+            if( !instances.length ) return;
 
             const languages = instances[ 0 ].languages;
 
-            for( let l of Object.keys( languages ) ) {
-
+            for( let l of Object.keys( languages ) )
+            {
                 const key = "Language: " + l;
                 const icon = instances[ 0 ]._getFileIcon( null, languages[ l ].ext );
 
@@ -752,9 +864,11 @@ function create_global_searchbar( root )
                         "<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, () => {
-                        for( let i of instances ) {
+                if( key.toLowerCase().includes( filter ) )
+                {
+                    _addElement( value, () => {
+                        for( let i of instances )
+                        {
                             i._changeLanguage( l );
                         }
                     }, "", {} );
@@ -764,14 +878,14 @@ function create_global_searchbar( root )
     }
 
     input.addEventListener('input', function(e) {
-        _addElements( this.value.toLowerCase() );
+        commandbar._addElements( this.value.toLowerCase() );
     });
 
-    globalSearch.appendChild( header );
-    globalSearch.appendChild( tabArea.root );
-    globalSearch.appendChild( itemContainer );
+    commandbar.appendChild( header );
+    commandbar.appendChild( tabArea.root );
+    commandbar.appendChild( itemContainer );
 
-    return globalSearch;
+    return commandbar;
 }
 
 /**
@@ -781,6 +895,7 @@ function create_global_searchbar( root )
  * id: Id of the main area
  * skipRoot: Skip adding LX root container
  * skipDefaultArea: Skip creation of main area
+ * strictViewport: Use only window area
  */
 
 function init( options = { } )
@@ -803,16 +918,17 @@ function init( options = { } )
     this.root = root;
     this.container = document.body;
 
-    // this.modal.toggleAttribute( 'hidden', true );
-    // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
-
     this.modal.classList.add( 'hiddenOpacity' );
     this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
     if( options.container )
+    {
         this.container = document.getElementById( options.container );
+    }
+
+    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
 
-    this.globalSearch = create_global_searchbar( this.container );
+    this.commandbar = _createCommandbar( this.container );
 
     this.container.appendChild( modal );
 
@@ -825,6 +941,25 @@ function init( options = { } )
         this.root = document.body;
     }
 
+    // Notifications
+    {
+        const notifSection = document.createElement( "section" );
+        notifSection.className = "notifications";
+        this.notifications = document.createElement( "ol" );
+        this.notifications.className = "";
+        this.notifications.iWidth = 0;
+        notifSection.appendChild( this.notifications );
+        this.container.appendChild( notifSection );
+
+        this.notifications.addEventListener( "mouseenter", () => {
+            this.notifications.classList.add( "list" );
+        } );
+
+        this.notifications.addEventListener( "mouseleave", () => {
+            this.notifications.classList.remove( "list" );
+        } );
+    }
+
     // Disable drag icon
     root.addEventListener( 'dragover', function( e ) {
         e.preventDefault();
@@ -856,16 +991,48 @@ function init( options = { } )
         this.main_area = new Area( { id: options.id ?? 'mainarea' } );
     }
 
-    window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
-        const newColorScheme = event.matches ? "dark" : "light";
-        LX.emit( "@on_new_color_scheme", newColorScheme );
-    });
+    if( ( options.autoTheme ?? true ) && window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+    {
+        LX.setTheme( "light" );
+
+        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
+            LX.setTheme( event.matches ? "dark" : "light" );
+        });
+    }
 
     return this.main_area;
 }
 
 LX.init = init;
 
+/**
+ * @method setCommandbarState
+ * @param {Boolean} value
+ * @param {Boolean} resetEntries
+ */
+
+function setCommandbarState( value, resetEntries = true )
+{
+    const cb = this.commandbar;
+
+    if( value )
+    {
+        cb.show();
+        cb.querySelector('input').focus();
+
+        if( resetEntries )
+        {
+            cb._addElements( undefined );
+        }
+    }
+    else
+    {
+        cb.close();
+    }
+}
+
+LX.setCommandbarState = setCommandbarState;
+
 /**
  * @method message
  * @param {String} text
@@ -898,9 +1065,9 @@ LX.message = message;
  * @param {String} title (Optional)
  * @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]
- * size: (Array) [width, height]
+ * timeout (Number): Delay time before it closes automatically (ms). Default: [3000]
+ * position (Array): [x,y] Dialog position in screen. Default: [screen centered]
+ * size (Array): [width, height]
  */
 
 function popup( text, title, options = {} )
@@ -910,7 +1077,7 @@ function popup( text, title, options = {} )
         throw("No message to show");
     }
 
-    options.size = options.size ?? [ "auto", "auto" ];
+    options.size = options.size ?? [ "max-content", "auto" ];
     options.class = "lexpopup";
 
     const time = options.timeout || 3000;
@@ -918,13 +1085,9 @@ function popup( text, title, options = {} )
         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 );
+    setTimeout( () => {
+        dialog.close();
+    }, Math.max( time, 150 ) );
 
     return dialog;
 }
@@ -947,6 +1110,7 @@ LX.popup = popup;
 function prompt( text, title, callback, options = {} )
 {
     options.modal = true;
+    options.className = "prompt";
 
     let value = "";
 
@@ -961,7 +1125,9 @@ function prompt( text, title, callback, options = {} )
 
         p.sameLine( 2 );
 
-        p.addButton( null, options.accept || "OK", () => {
+        p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
+
+        p.addButton( null, options.accept || "Continue", () => {
             if( options.required && value === '' )
             {
                 text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
@@ -975,8 +1141,6 @@ function prompt( text, title, callback, options = {} )
             }
         }, { buttonClass: "primary" });
 
-        p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
-
     }, options );
 
     // Focus text prompt
@@ -990,6 +1154,101 @@ function prompt( text, title, callback, options = {} )
 
 LX.prompt = prompt;
 
+/**
+ * @method toast
+ * @param {String} title
+ * @param {String} description (Optional)
+ * @param {*} options
+ * action: Data of the custom action { name, callback }
+ * closable: Allow closing the toast
+ * timeout: Time in which the toast closed automatically, in ms. -1 means persistent. [3000]
+ */
+
+function toast( title, description, options = {} )
+{
+    if( !title )
+    {
+        throw( "The toast needs at least a title!" );
+    }
+
+    console.assert( this.notifications );
+
+    const toast = document.createElement( "li" );
+    toast.className = "lextoast";
+    toast.style.translate = "0 calc(100% + 30px)";
+    this.notifications.prepend( toast );
+
+    doAsync( () => {
+
+        if( this.notifications.offsetWidth > this.notifications.iWidth )
+        {
+            this.notifications.iWidth = Math.min( this.notifications.offsetWidth, 480 );
+            this.notifications.style.width = this.notifications.iWidth + "px";
+        }
+
+        toast.dataset[ "open" ] = true;
+    }, 10 );
+
+    const content = document.createElement( "div" );
+    content.className = "lextoastcontent";
+    toast.appendChild( content );
+
+    const titleContent = document.createElement( "div" );
+    titleContent.className = "title";
+    titleContent.innerHTML = title;
+    content.appendChild( titleContent );
+
+    if( description )
+    {
+        const desc = document.createElement( "div" );
+        desc.className = "desc";
+        desc.innerHTML = description;
+        content.appendChild( desc );
+    }
+
+    if( options.action )
+    {
+        const panel = new Panel();
+        panel.addButton(null, options.action.name ?? "Accept", options.action.callback.bind( this, toast ), { width: "auto", maxWidth: "150px", className: "right", buttonClass: "outline" });
+        toast.appendChild( panel.root.childNodes[ 0 ] );
+    }
+
+    const that = this;
+
+    toast.close = function() {
+        this.dataset[ "closed" ] = true;
+        doAsync( () => {
+            this.remove();
+            if( !that.notifications.childElementCount )
+            {
+                that.notifications.style.width = "unset";
+                that.notifications.iWidth = 0;
+            }
+        }, 500 );
+    };
+
+    if( options.closable ?? true )
+    {
+        const closeButton = document.createElement( "a" );
+        closeButton.className = "fa fa-xmark lexicon closer";
+        closeButton.addEventListener( "click", () => {
+            toast.close();
+        } );
+        toast.appendChild( closeButton );
+    }
+
+    const timeout = options.timeout ?? 3000;
+
+    if( timeout != -1 )
+    {
+        doAsync( () => {
+            toast.close();
+        }, timeout );
+    }
+}
+
+LX.toast = toast;
+
 /**
  * @method badge
  * @param {String} text
@@ -1009,6 +1268,25 @@ function badge( text, className, options = {} )
 
 LX.badge = badge;
 
+/**
+ * @method makeContainer
+ * @param {Array} size
+ * @param {String} className
+ * @param {Object} overrideStyle
+ */
+
+function makeContainer( size, className, overrideStyle = {} )
+{
+    const container = document.createElement( "div" );
+    container.className = "lexcontainer " + ( className ?? "" );
+    container.style.width = size && size[ 0 ] ? size[ 0 ] : "100%";
+    container.style.height = size && size[ 1 ] ? size[ 1 ] : "100%";
+    Object.assign( container.style, overrideStyle );
+    return container;
+}
+
+LX.makeContainer = makeContainer;
+
 /*
 *   Events and Signals
 */
@@ -1272,7 +1550,8 @@ class Area {
 
                 function inner_mousemove( e )
                 {
-                    switch( that.type ) {
+                    switch( that.type )
+                    {
                         case "right":
                             var dt = ( lastMousePosition[ 0 ] - e.x );
                             var size = ( that.root.offsetWidth + dt );
@@ -1467,7 +1746,8 @@ class Area {
 
                 // Listen resize event on first area
                 const resizeObserver = new ResizeObserver( entries => {
-                    for (const entry of entries) {
+                    for ( const entry of entries )
+                    {
                         const bb = entry.contentRect;
                         area2.root.style.height = "calc(100% - " + ( bb.height + 4) + "px )";
                     }
@@ -1491,8 +1771,8 @@ class Area {
                 }
 
                 area1.root.style.width = "100%";
-                area1.root.style.height = "calc( " + height1 + " - " + data + " )";
-                area2.root.style.height = "calc( " + height2 + " - " + data + " )";
+                area1.root.style.height = ( height1 == "auto" ? height1 : "calc( " + height1 + " - " + data + " )");
+                area2.root.style.height = ( height2 == "auto" ? height2 : "calc( " + height2 + " - " + data + " )");
             }
         }
 
@@ -1608,9 +1888,15 @@ class Area {
             this.root.style.height = height;
         }
 
-        this.size = [ this.root.clientWidth, this.root.clientHeight ];
+        if( this.onresize )
+        {
+            this.onresize( this.root.getBoundingClientRect() );
+        }
 
-        this.propagateEvent( "onresize" );
+        doAsync( () => {
+            this.size = [ this.root.clientWidth, this.root.clientHeight ];
+            this.propagateEvent( "onresize" );
+        }, 150 );
     }
 
     /**
@@ -1627,7 +1913,7 @@ class Area {
         let [area1, area2] = this.sections;
         this.splitExtended = true;
 
-        if(this.type == "vertical")
+        if( this.type == "vertical")
         {
             this.offset = area2.root.offsetHeight;
             area2.root.classList.add("fadeout-vertical");
@@ -1641,7 +1927,6 @@ class Area {
             this._moveSplit(-Infinity, true, 8);
         }
 
-        // Async resize in some ms...
         doAsync( () => this.propagateEvent('onresize'), 150 );
     }
 
@@ -1657,7 +1942,7 @@ class Area {
         this.splitExtended = false;
         let [area1, area2] = this.sections;
 
-        if(this.type == "vertical")
+        if( this.type == "vertical")
         {
             area2.root.classList.add("fadein-vertical");
             this._moveSplit(this.offset);
@@ -1668,7 +1953,6 @@ class Area {
             this._moveSplit(this.offset);
         }
 
-        // Async resize in some ms...
         doAsync( () => this.propagateEvent('onresize'), 150 );
     }
 
@@ -1702,11 +1986,15 @@ class Area {
 
     propagateEvent( eventName ) {
 
-        for(var i = 0; i < this.sections.length; i++)
+        for( var i = 0; i < this.sections.length; i++ )
         {
-            const area = this.sections[i];
-            if(area[ eventName ])
+            const area = this.sections[ i ];
+
+            if( area[ eventName ] )
+            {
                 area[ eventName ].call( this, area.root.getBoundingClientRect() );
+            }
+
             area.propagateEvent( eventName );
         }
     }
@@ -1729,42 +2017,63 @@ class Area {
      * @param {Function} callback Function to fill the menubar
      * @param {*} options:
      * float: Justify content (left, center, right) [left]
+     * sticky: Fix menubar at the top [true]
      */
 
     addMenubar( callback, options = {} ) {
 
-        let menubar = new Menubar(options);
+        let menubar = new Menubar( options );
 
-        if(callback) callback( menubar );
+        if( callback )
+        {
+            callback( menubar );
+        }
 
         LX.menubars.push( menubar );
 
         const height = 48; // pixels
+        const [ bar, content ] = this.split({ type: 'vertical', sizes: [height, null], resize: false, menubar: true });
+        menubar.siblingArea = content;
 
-        const [bar, content] = this.split({type: 'vertical', sizes: [height, null], resize: false, menubar: true});
         bar.attach( menubar );
-        bar.is_menubar = true;
+        bar.isMenubar = true;
+
+        if( options.sticky ?? true )
+        {
+            bar.root.classList.add( "sticky" );
+        }
+
         return menubar;
     }
 
     /**
      * @method addSidebar
      * @param {Function} callback Function to fill the sidebar
+     * @param {Object} options: Sidebar options
+     * width: Width of the sidebar [16rem]
      */
 
     addSidebar( callback, options = {} ) {
 
         let sidebar = new SideBar( options );
 
-        if( callback ) callback( sidebar );
+        if( callback )
+        {
+            callback( sidebar );
+        }
+
+        // Generate DOM elements after adding all entries
+        sidebar._build();
 
         LX.menubars.push( sidebar );
 
-        const width = 64; // pixels
+        const width = options.width ?? "16rem";
+        const [ bar, content ] = this.split( { type: 'horizontal', sizes: [ width, null ], resize: false, sidebar: true } );
+        sidebar.siblingArea = content;
 
-        const [bar, content] = this.split( { type: 'horizontal', sizes: [ width, null ], resize: false, sidebar: true } );
         bar.attach( sidebar );
-        bar.is_sidebar = true;
+        bar.isSidebar = true;
+
         return sidebar;
     }
 
@@ -2020,7 +2329,8 @@ class Area {
 
         this.size = [ rect.width, rect.height ];
 
-        for(var i = 0; i < this.sections.length; i++) {
+        for( var i = 0; i < this.sections.length; i++ )
+        {
             this.sections[i]._update();
         }
     }
@@ -2044,7 +2354,7 @@ class Tabs {
     static TAB_SIZE = 28;
     static TAB_ID   = 0;
 
-    constructor( area, options = {} )  {
+    constructor( area, options = {} ) {
 
         this.onclose = options.onclose;
 
@@ -2092,7 +2402,7 @@ class Tabs {
 
         area.root.classList.add( "lexareatabscontainer" );
 
-        area.split({type: 'vertical', sizes: "auto", resize: false, top: 6});
+        area.split({type: 'vertical', sizes: options.sizes ?? "auto", resize: false, top: 6});
         area.sections[0].attach( container );
 
         this.area = area.sections[1];
@@ -2126,24 +2436,28 @@ class Tabs {
         }
 
         // debug
-        if(folding)
+        if( folding )
         {
             this.folded = true;
             this.folding = folding;
 
-            if(folding == "up") area.root.insertChildAtIndex(area.sections[1].root, 0);
+            if( folding == "up" )
+            {
+                area.root.insertChildAtIndex(area.sections[1].root, 0);
+            }
 
             // Listen resize event on parent area
             const resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
+                for (const entry of entries)
+                {
                     const bb = entry.contentRect;
-                    const sibling = area.parentArea.sections[0].root;
-                    const add_offset = true; // hardcoded...
-                    sibling.style.height = "calc(100% - " + ((add_offset ? 42 : 0) + bb.height) + "px )";
+                    const sibling = area.parentArea.sections[ 0 ].root;
+                    const addOffset = true; // hardcoded...
+                    sibling.style.height = "calc(100% - " + ((addOffset ? 42 : 0) + bb.height) + "px )";
                 }
             });
 
-            resizeObserver.observe(this.area.root);
+            resizeObserver.observe( this.area.root );
             this.area.root.classList.add('folded');
         }
     }
@@ -2280,7 +2594,8 @@ class Tabs {
 
         setTimeout( () => {
 
-            if( options.onCreate ) {
+            if( options.onCreate )
+            {
                 options.onCreate.call(this, this.area.root.getBoundingClientRect());
             }
 
@@ -2342,34 +2657,41 @@ LX.Tabs = Tabs;
 
 class Menubar {
 
-    constructor( options = {} )  {
+    constructor( options = {} ) {
 
-        this.root = document.createElement('div');
+        this.root = document.createElement( "div" );
         this.root.className = "lexmenubar";
-        if(options.float)
+
+        if( options.float )
+        {
             this.root.style.justifyContent = options.float;
-        this.items = [];
+        }
 
-        this.icons = {};
-        this.shorts = {};
-        this.buttons = [];
+        this.items = [ ];
+        this.buttons = [ ];
+        this.icons = { };
+        this.shorts = { };
     }
 
     /**
      * @method add
-     * @param {*} options:
+     * @param {Object} options:
      * callback: Function to call on each item
+     * icon: Entry icon
+     * short: Entry shortcut name
      */
 
     add( path, options = {} ) {
 
-        if(options.constructor == Function)
+        if( options.constructor == Function )
+        {
             options = { callback: options };
+        }
 
-        // process path
-        const tokens = path.split("/");
+        // Process path
+        const tokens = path.split( "/" );
 
-        // assign icons and shortcuts to last token in path
+        // Assign icons and shortcuts to last token in path
         const lastPath = tokens[tokens.length - 1];
         this.icons[ lastPath ] = options.icon;
         this.shorts[ lastPath ] = options.short;
@@ -2377,105 +2699,146 @@ class Menubar {
         let idx = 0;
         let that = this;
 
-        const insert = (token, list) => {
-            if(token == undefined) return;
+        const _insertEntry = ( token, list ) => {
+            if( token == undefined )
+            {
+                return;
+            }
 
             let found = null;
             list.forEach( o => {
-                const keys = Object.keys(o);
+                const keys = Object.keys( o );
                 const key = keys.find( t => t == token );
-                if(key) found = o[ key ];
+                if( key ) found = o[ key ];
             } );
 
-            if(found) {
-                insert( tokens[idx++], found );
+            if( found )
+            {
+                _insertEntry( tokens[ idx++ ], found );
             }
-            else {
+            else
+            {
                 let item = {};
                 item[ token ] = [];
-                const next_token = tokens[idx++];
+                const nextToken = tokens[ idx++ ];
                 // Check if last token -> add callback
-                if(!next_token) {
+                if( !nextToken )
+                {
                     item[ 'callback' ] = options.callback;
+                    item[ 'disabled' ] = options.disabled;
                     item[ 'type' ] = options.type;
                     item[ 'checked' ] = options.checked;
                 }
                 list.push( item );
-                insert( next_token, item[ token ] );
+                _insertEntry( nextToken, item[ token ] );
             }
         };
 
-        insert( tokens[idx++], this.items );
+        _insertEntry( tokens[idx++], this.items );
 
         // Create elements
 
         for( let item of this.items )
         {
-            let key = Object.keys(item)[0];
-            let pKey = key.replace(/\s/g, '').replaceAll('.', '');
+            let key = Object.keys( item )[ 0 ];
+            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
 
             // Item already created
-            if( this.root.querySelector("#" + pKey) )
+            if( this.root.querySelector( "#" + pKey ) )
+            {
                 continue;
+            }
 
             let entry = document.createElement('div');
             entry.className = "lexmenuentry";
             entry.id = pKey;
             entry.innerHTML = "<span>" + key + "</span>";
-            if(options.position == "left") {
+            entry.tabIndex = "1";
+
+            if( options.position == "left" )
+            {
                 this.root.prepend( entry );
             }
-            else {
-                if(options.position == "right")
+            else
+            {
+                if( options.position == "right" )
+                {
                     entry.right = true;
-                if(this.root.lastChild && this.root.lastChild.right) {
+                }
+
+                if( this.root.lastChild && this.root.lastChild.right )
+                {
                     this.root.lastChild.before( entry );
                 }
-                else {
+                else
+                {
                     this.root.appendChild( entry );
                 }
             }
 
+            const _resetMenubar = function() {
+                // Menu entries are in the menubar..
+                that.root.querySelectorAll(".lexmenuentry").forEach( _entry => {
+                    _entry.classList.remove( 'selected' );
+                    _entry.built = false;
+                } );
+                // Menuboxes are in the root area!
+                LX.root.querySelectorAll(".lexmenubox").forEach(e => e.remove());
+                // Next time we need to click again
+                that.focused = false;
+            };
+
             const create_submenu = function( o, k, c, d ) {
 
-                let contextmenu = document.createElement('div');
-                contextmenu.className = "lexcontextmenu";
-                contextmenu.tabIndex = "0";
-                const isSubMenu = c.classList.contains('lexcontextmenuentry');
+                let menuElement = document.createElement('div');
+                menuElement.className = "lexmenubox";
+                menuElement.tabIndex = "0";
+                c.currentMenu = menuElement;
+                const isSubMenu = c.classList.contains( "lexmenuboxentry" );
+                if( isSubMenu ) menuElement.dataset[ "submenu" ] = true;
                 var rect = c.getBoundingClientRect();
-                contextmenu.style.left = (isSubMenu ? rect.width : rect.left) + "px";
-                // Entries use css to set top relative to parent
-                contextmenu.style.top = (isSubMenu ? 0 : rect.bottom - 4) + "px";
-                c.appendChild( contextmenu );
+                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.left ) + "px";
+                menuElement.style.top = ( isSubMenu ? rect.y : rect.bottom - 4 ) + "px";
+                rect = menuElement.getBoundingClientRect();
 
-                contextmenu.focus();
+                doAsync( () => {
+                    menuElement.dataset[ "open" ] = true;
+                }, 10 );
 
-                rect = contextmenu.getBoundingClientRect();
+                LX.root.appendChild( menuElement );
 
-                for( var i = 0; i < o[k].length; ++i )
+                for( var i = 0; i < o[ k ].length; ++i )
                 {
-                    const subitem = o[k][i];
-                    const subkey = Object.keys(subitem)[0];
+                    const subitem = o[ k ][ i ];
+                    const subkey = Object.keys( subitem )[ 0 ];
                     const hasSubmenu = subitem[ subkey ].length;
                     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.className = "lexmenuboxentry";
+                    subentry.className += (i == o[k].length - 1 ? " last" : "") + ( subitem.disabled ? " disabled" : "" );
 
+                    if( subkey == '' )
+                    {
+                        subentry.className = " lexseparator";
+                    }
+                    else
+                    {
                         subentry.id = subkey;
                         let subentrycont = document.createElement('div');
                         subentrycont.innerHTML = "";
-                        subentrycont.classList = "lexcontextmenuentrycontainer";
+                        subentrycont.classList = "lexmenuboxentrycontainer";
                         subentry.appendChild(subentrycont);
                         const icon = that.icons[ subkey ];
-                        if(isCheckbox){
+                        if( isCheckbox )
+                        {
                             subentrycont.innerHTML += "<input type='checkbox' >";
-                        }else if(icon) {
+                        }
+                        else if( icon )
+                        {
                             subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
-                        }else {
+                        }
+                        else
+                        {
                             subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
                             subentrycont.classList.add( "noicon" );
 
@@ -2483,46 +2846,54 @@ class Menubar {
                         subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
                     }
 
-                    let checkbox_input = subentry.querySelector('input');
-                    if(checkbox_input) {
-                        checkbox_input.checked = subitem.checked ?? false;
-                        checkbox_input.addEventListener('change', (e) => {
-                            subitem.checked = checkbox_input.checked;
+                    let checkboxInput = subentry.querySelector('input');
+                    if( checkboxInput )
+                    {
+                        checkboxInput.checked = subitem.checked ?? false;
+                        checkboxInput.addEventListener('change', e => {
+                            subitem.checked = checkboxInput.checked;
                             const f = subitem[ 'callback' ];
-                            if(f) {
+                            if( f )
+                            {
                                 f.call( this, subitem.checked, subkey, subentry );
-                                that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                                _resetMenubar();
                             }
                             e.stopPropagation();
                             e.stopImmediatePropagation();
                         })
                     }
 
-                    contextmenu.appendChild( subentry );
+                    menuElement.appendChild( subentry );
 
                     // Nothing more for separators
-                    if(subkey == '') continue;
+                    if( subkey == '' )
+                    {
+                        continue;
+                    }
 
-                    contextmenu.addEventListener('keydown', function(e) {
+                    menuElement.addEventListener('keydown', function(e) {
                         e.preventDefault();
                         let short = that.shorts[ subkey ];
                         if(!short) return;
                         // check if it's a letter or other key
                         short = short.length == 1 ? short.toLowerCase() : short;
-                        if(short == e.key) {
+                        if( short == e.key )
+                        {
                             subentry.click()
                         }
                     });
 
                     // Add callback
                     subentry.addEventListener("click", e => {
-                        if(checkbox_input) {
+                        if( checkboxInput )
+                        {
                             subitem.checked = !subitem.checked;
                         }
                         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());
+                        if( f )
+                        {
+                            f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
+                            _resetMenubar();
                         }
                         e.stopPropagation();
                         e.stopImmediatePropagation();
@@ -2531,7 +2902,8 @@ class Menubar {
                     // Add icon if has submenu, else check for shortcut
                     if( !hasSubmenu)
                     {
-                        if(that.shorts[ subkey ]) {
+                        if( that.shorts[ subkey ] )
+                        {
                             let shortEl = document.createElement('div');
                             shortEl.className = "lexentryshort";
                             shortEl.innerText = that.shorts[ subkey ];
@@ -2545,44 +2917,67 @@ class Menubar {
                     subentry.appendChild( submenuIcon );
 
                     subentry.addEventListener("mouseover", e => {
-                        if(subentry.built)
-                        return;
+                        if( subentry.built )
+                        {
+                            return;
+                        }
                         subentry.built = true;
                         create_submenu( subitem, subkey, subentry, ++d );
                         e.stopPropagation();
                     });
 
-                    subentry.addEventListener("mouseleave", () => {
-                        d = -1; // Reset depth
-                        delete subentry.built;
-                        contextmenu.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                    subentry.addEventListener("mouseleave", (e) => {
+                        if( subentry.currentMenu && ( subentry.currentMenu != e.toElement ) )
+                        {
+                            d = -1; // Reset depth
+                            delete subentry.built;
+                            subentry.currentMenu.remove();
+                            delete subentry.currentMenu;
+                        }
                     });
                 }
 
                 // Set final width
-                contextmenu.style.width = contextmenu.offsetWidth + "px";
+                menuElement.style.width = menuElement.offsetWidth + "px";
             };
 
-            entry.addEventListener("click", () => {
+            const _showEntry = () => {
+                _resetMenubar();
+                entry.classList.add( "selected" );
+                entry.built = true;
+                create_submenu( item, key, entry, -1 );
+            };
 
+            entry.addEventListener("click", () => {
                 const f = item[ 'callback' ];
-                if(f) {
+                if( f )
+                {
                     f.call( this, key, entry );
                     return;
                 }
 
-                // Manage selected
-                this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
-                entry.classList.add( "selected" );
+                _showEntry();
 
-                this.root.querySelectorAll(".lexcontextmenu").forEach( e => e.remove() );
-                create_submenu( item, key, entry, -1 );
+                this.focused = true;
             });
 
-            entry.addEventListener("mouseleave", () => {
-                this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
-                this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
-            });
+            entry.addEventListener( "mouseover", (e) => {
+
+                if( this.focused && !entry.built )
+                {
+                    _showEntry();
+                }
+            });
+
+            entry.addEventListener("blur", (e) => {
+
+                if( e.relatedTarget && e.relatedTarget.classList.contains( "lexmenubox" ) )
+                {
+                    return;
+                }
+
+                _resetMenubar();
+            });
         }
     }
 
@@ -2600,20 +2995,24 @@ class Menubar {
      * @param {Object} item: parent item
      * @param {Array} tokens: split path strings
     */
-    getSubitem(item, tokens) {
+    getSubitem( item, tokens ) {
 
         let subitem = null;
-        let path = tokens[0];
-        for(let i = 0; i < item.length; i++) {
-            if(item[i][path]) {
+        let path = tokens[ 0 ];
 
-                if(tokens.length == 1) {
-                    subitem = item[i];
+        for( let i = 0; i < item.length; i++ )
+        {
+            if( item[ i ][ path ] )
+            {
+                if( tokens.length == 1 )
+                {
+                    subitem = item[ i ];
                     return subitem;
                 }
-                else {
-                    tokens.splice(0,1);
-                    return this.getSubitem(item[i][path], tokens);
+                else
+                {
+                    tokens.splice( 0, 1 );
+                    return this.getSubitem( item[ i ][ path ], tokens );
                 }
 
             }
@@ -2640,11 +3039,12 @@ class Menubar {
     setButtonIcon( title, icon, callback, options = {} ) {
 
         const button = this.buttons[ title ];
-        if(button) {
-
+        if( button )
+        {
             button.querySelector('a').className = "fa-solid" + " " + icon + " lexicon";
         }
-        else {
+        else
+        {
             let button = document.createElement('div');
             const disabled = options.disabled ?? false;
             button.className = "lexmenubutton" + (disabled ? " disabled" : "");
@@ -2654,15 +3054,21 @@ class Menubar {
             button.style.maxHeight = "calc(100% - 10px)";
             button.style.alignItems = "center";
 
-            if(options.float == "right")
+            if( options.float == "right" )
+            {
                 button.right = true;
-            if(this.root.lastChild && this.root.lastChild.right) {
+            }
+
+            if( this.root.lastChild && this.root.lastChild.right )
+            {
                 this.root.lastChild.before( button );
             }
-            else if(options.float == "left") {
-                this.root.prepend(button);
+            else if( options.float == "left" )
+            {
+                this.root.prepend( button );
             }
-            else {
+            else
+            {
                 this.root.appendChild( button );
             }
 
@@ -2682,11 +3088,12 @@ class Menubar {
 
     setButtonImage( title, src, callback, options = {} ) {
         const button = this.buttons[ title ];
-        if(button) {
-
+        if( button )
+        {
             button.querySelector('a').className = "fa-solid" + " " + icon + " lexicon";
         }
-        else {
+        else
+        {
             let button = document.createElement('div');
             const disabled = options.disabled ?? false;
             button.className = "lexmenubutton" + (disabled ? " disabled" : "");
@@ -2695,15 +3102,21 @@ class Menubar {
             button.style.padding = "5px";
             button.style.alignItems = "center";
 
-            if(options.float == "right")
+            if( options.float == "right" )
+            {
                 button.right = true;
-            if(this.root.lastChild && this.root.lastChild.right) {
+            }
+
+            if( this.root.lastChild && this.root.lastChild.right )
+            {
                 this.root.lastChild.before( button );
             }
-            else if(options.float == "left") {
-                this.root.prepend(button);
+            else if( options.float == "left" )
+            {
+                this.root.prepend( button );
             }
-            else {
+            else
+            {
                 this.root.appendChild( button );
             }
 
@@ -2816,90 +3229,306 @@ LX.Menubar = Menubar;
 
 class SideBar {
 
-    constructor( options = {} )  {
+    /**
+     * @param {Object} options
+     * inset: TODO
+     * filter: TODO
+     * skipHeader: Do not use sidebar header [false]
+     * headerImg: Image to be shown as avatar
+     * headerIcon: Icon to be shown as avatar (from LX.ICONS)
+     * headerTitle
+     * headerSubtitle
+     * skipFooter: Do not use sidebar footer [false]
+     * footerImg: Image to be shown as avatar
+     * footerIcon: Icon to be shown as avatar (from LX.ICONS)
+     * footerTitle
+     * footerSubtitle
+     * collapsable: Sidebar can toggle between collapsed/expanded [true]
+     * collapseToIcons: When Sidebar collapses, icons remains visible  [true]
+     * onHeaderPressed: Function to call when header is pressed
+     * onFooterPressed: Function to call when footer is pressed
+     */
+
+    constructor( options = {} ) {
 
         this.root = document.createElement( 'div' );
         this.root.className = "lexsidebar";
 
-        this.footer = document.createElement( 'div' );
-        this.footer.className = "lexsidebarfooter";
-        this.root.appendChild( this.footer );
+        window.sidebar = this;
+
+        this.collapsable = options.collapsable ?? true;
+        this.collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
+        this.collapsed = false;
+
+        doAsync( () => {
+
+            this.root.parentElement.ogWidth = this.root.parentElement.style.width;
+            this.root.parentElement.style.transition = "width 0.25s ease-out";
+
+            this.resizeObserver = new ResizeObserver( entries => {
+                for ( const entry of entries )
+                {
+                    this.siblingArea.setSize( [ "calc(100% - " + ( entry.contentRect.width ) + "px )", null ] );
+                }
+            });
+
+        }, 100 );
+
+        // This account for header, footer and all inner paddings
+        let contentOffset = 32;
+
+        // Header
+        if( !( options.skipHeader ?? false ) )
+        {
+            this.header = document.createElement( 'div' );
+            this.header.className = "lexsidebarheader";
+            this.root.appendChild( this.header );
+
+            this.header.addEventListener( "click", e => {
+                if( this.collapsed )
+                {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.toggleCollapsed();
+                }
+                else if( options.onHeaderPressed )
+                {
+                    options.onHeaderPressed( e );
+                }
+            } );
+
+            const avatar = document.createElement( 'span' );
+            avatar.className = "lexavatar";
+            this.header.appendChild( avatar );
+
+            if( options.headerImage )
+            {
+                const avatarImg = document.createElement( 'img' );
+                avatarImg.src = options.headerImage;
+                avatar.appendChild( avatarImg );
+            }
+            else if( options.headerIcon )
+            {
+                const avatarIcon = LX.makeIcon( options.headerIcon );
+                avatar.appendChild( avatarIcon );
+            }
+
+            // Info
+            {
+                const info = document.createElement( 'div' );
+                this.header.appendChild( info );
+
+                const infoText = document.createElement( 'span' );
+                infoText.innerHTML = options.headerTitle ?? "";
+                info.appendChild( infoText );
+
+                const infoSubtext = document.createElement( 'span' );
+                infoSubtext.innerHTML = options.headerSubtitle ?? "";
+                info.appendChild( infoSubtext );
+            }
+
+            if( this.collapsable )
+            {
+                const icon = LX.makeIcon( "Sidebar", "Toggle Sidebar" );
+                this.header.appendChild( icon );
+
+                icon.addEventListener( "click", (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.toggleCollapsed();
+                } );
+            }
+
+            contentOffset += 52;
+        }
+
+        // Content
+        {
+            this.content = document.createElement( 'div' );
+            this.content.className = "lexsidebarcontent";
+            this.root.appendChild( this.content );
+        }
+
+        // Footer
+        if( !( options.skipFooter ?? false ) )
+        {
+            this.footer = document.createElement( 'div' );
+            this.footer.className = "lexsidebarfooter";
+            this.root.appendChild( this.footer );
+
+            this.footer.addEventListener( "click", e => {
+                if( options.onFooterPressed )
+                {
+                    options.onFooterPressed( e );
+                }
+            } );
+
+            const avatar = document.createElement( 'span' );
+            avatar.className = "lexavatar";
+            this.footer.appendChild( avatar );
+
+            if( options.footerImage )
+            {
+                const avatarImg = document.createElement( 'img' );
+                avatarImg.src = options.footerImage;
+                avatar.appendChild( avatarImg );
+            }
+            else if( options.footerIcon )
+            {
+                const avatarIcon = LX.makeIcon( options.footerIcon );
+                avatar.appendChild( avatarIcon );
+            }
+
+            // Info
+            {
+                const info = document.createElement( 'div' );
+                this.footer.appendChild( info );
+
+                const infoText = document.createElement( 'span' );
+                infoText.innerHTML = options.footerTitle ?? "";
+                info.appendChild( infoText );
+
+                const infoSubtext = document.createElement( 'span' );
+                infoSubtext.innerHTML = options.footerSubtitle ?? "";
+                info.appendChild( infoSubtext );
+            }
+
+            const icon = LX.makeIcon( "MenuArrows" );
+            this.footer.appendChild( icon );
+
+            contentOffset += 52;
+        }
+
+        // Set width depending on header/footer
+        this.content.style.height = `calc(100% - ${ contentOffset }px)`;
 
         this.items = [ ];
+        this.icons = { };
+        this.groups = { };
     }
 
     /**
-     * @method add
-     * @param {*} options:
-     * callback: Function to call on each item
-     * bottom: Bool to set item at the bottom as helper button (not selectable)
-     * className: Add class to the entry DOM element
+     * @method toggleCollapsed
      */
 
-    add( key, options = {} ) {
-
-        if( options.constructor == Function )
-            options = { callback: options };
-
-        let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+    toggleCollapsed() {
 
-        if( this.items.findIndex( (v, i) => v.key == pKey ) > -1 )
+        if( !this.collapsable )
         {
-            console.warn( `'${key}' already created in Sidebar` );
             return;
         }
 
-        let entry = document.createElement( 'div' );
-        entry.className = "lexsidebarentry " + ( options.className ?? "" );
-        entry.id = pKey;
+        this.collapsed = !this.collapsed;
 
-        if( options.bottom )
+        if( this.collapsed )
         {
-            this.footer.appendChild( entry );
+            this.root.classList.add( "collapsing" );
+            this.root.parentElement.style.width = this.collapseWidth;
         }
         else
         {
-            this.root.appendChild( entry );
+            this.root.classList.remove( "collapsing" );
+            this.root.classList.remove( "collapsed" );
+            this.root.parentElement.style.width = this.root.parentElement.ogWidth;
         }
 
-        // Reappend footer in root
-        this.root.appendChild( this.footer );
+        this.resizeObserver.observe( this.root.parentElement );
 
-        let button = document.createElement( 'button' );
-        button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
-        entry.appendChild( button );
+        doAsync( () => {
 
-        let desc = document.createElement( 'span' );
-        desc.className = 'lexsidebarentrydesc';
-        desc.innerHTML = key;
-        entry.appendChild( desc );
+            this.root.classList.toggle( "collapsed", this.collapsed );
+            this.resizeObserver.unobserve( this.root.parentElement );
 
-        button.addEventListener("mouseenter", () => {
-            setTimeout( () => {
-                desc.style.display = "unset";
-            }, 100 );
-        });
+        }, 250 );
+    }
 
-        button.addEventListener("mouseleave", () => {
-            setTimeout( () => {
-                desc.style.display = "none";
-            }, 100 );
-        });
+    /**
+     * @method separator
+     */
+
+    separator() {
+
+        this.currentGroup = null;
+
+        this.add( "" );
+    }
+
+    /**
+     * @method group
+     * @param {String} groupName
+     * @param {Object} action: { icon, callback }
+     */
+
+    group( groupName, action ) {
+
+        this.currentGroup = groupName;
+
+        this.groups[ groupName ] = action;
+    }
+
+    /**
+     * @method add
+     * @param {String} path
+     * @param {Object} options:
+     * callback: Function to call on each item
+     * icon: Entry icon
+     * collapsable: Add entry as a collapsable section
+     * className: Add class to the entry DOM element
+     */
+
+    add( path, options = {} ) {
+
+        if( options.constructor == Function )
+        {
+            options = { callback: options };
+        }
+
+        // Process path
+        const tokens = path.split( "/" );
+
+        // Assign icons and shortcuts to last token in path
+        const lastPath = tokens[tokens.length - 1];
+        this.icons[ lastPath ] = options.icon;
 
-        entry.addEventListener("click", () => {
 
-            const f = options.callback;
-            if( f ) f.call( this, key, entry );
+        let idx = 0;
+
+        const _insertEntry = ( token, list ) => {
 
-            // Manage selected
-            if( !options.bottom )
+            if( token == undefined )
             {
-                this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
-                entry.classList.add( "selected" );
+                return;
             }
-        });
 
-        this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
+            let found = null;
+            list.forEach( o => {
+                const keys = Object.keys( o );
+                const key = keys.find( t => t == token );
+                if( key ) found = o[ key ];
+            } );
+
+            if( found )
+            {
+                _insertEntry( tokens[ idx++ ], found );
+            }
+            else
+            {
+                let item = {};
+                item[ token ] = [];
+                const nextToken = tokens[ idx++ ];
+                // Check if last token -> add callback
+                if( !nextToken )
+                {
+                    item[ 'callback' ] = options.callback;
+                    item[ 'group' ] = this.currentGroup;
+                    item[ 'options' ] = options;
+                }
+                list.push( item );
+                _insertEntry( nextToken, item[ token ] );
+            }
+        };
+
+        _insertEntry( tokens[idx++], this.items );
     }
 
     /**
@@ -2918,6 +3547,246 @@ class SideBar {
 
         entry.domEl.click();
     }
+
+    _build() {
+
+        for( let item of this.items )
+        {
+            const options = item.options ?? { };
+
+            // Item already created
+            if( item.dom )
+            {
+                continue;
+            }
+
+            let key = Object.keys( item )[ 0 ];
+            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+            let currentGroup = null;
+
+            let entry = document.createElement( 'div' );
+            entry.className = "lexsidebarentry " + ( options.className ?? "" );
+            entry.id = pKey;
+
+            if( item.group )
+            {
+                const pGroupKey = item.group.replace( /\s/g, '' ).replaceAll( '.', '' );
+                currentGroup = this.content.querySelector( "#" + pGroupKey );
+
+                if( !currentGroup )
+                {
+                    currentGroup = document.createElement( 'div' );
+                    currentGroup.id = pGroupKey;
+                    currentGroup.className = "lexsidebargroup";
+                    this.content.appendChild( currentGroup );
+
+                    let groupEntry = document.createElement( 'div' );
+                    groupEntry.className = "lexsidebargrouptitle";
+                    currentGroup.appendChild( groupEntry );
+
+                    let groupLabel = document.createElement( 'div' );
+                    groupLabel.innerHTML = item.group;
+                    groupEntry.appendChild( groupLabel );
+
+                    if( this.groups[ item.group ] != null )
+                    {
+                        let groupAction = document.createElement( 'a' );
+                        groupAction.className = ( this.groups[ item.group ].icon ?? "" ) + " lexicon";
+                        groupEntry.appendChild( groupAction );
+                        groupAction.addEventListener( "click", (e) => {
+                            if( this.groups[ item.group ].callback )
+                            {
+                                this.groups[ item.group ].callback( item.group, e );
+                            }
+                        } );
+                    }
+
+                }
+                else if( !currentGroup.classList.contains( "lexsidebargroup" ) )
+                {
+                    throw( "Bad id: " + item.group );
+                }
+            }
+
+            if( pKey == "" )
+            {
+                let separatorDom = document.createElement( 'div' );
+                separatorDom.className = "lexsidebarseparator";
+                this.content.appendChild( separatorDom );
+                continue;
+            }
+
+            if( this.collapseContainer )
+            {
+                this.collapseContainer.appendChild( entry );
+
+                this.collapseQueue--;
+                if( !this.collapseQueue )
+                {
+                    delete this.collapseContainer;
+                }
+            }
+            else if( currentGroup )
+            {
+                currentGroup.appendChild( entry );
+            }
+            else
+            {
+                this.content.appendChild( entry );
+            }
+
+            let itemDom = document.createElement( 'div' );
+            entry.appendChild( itemDom );
+            item.dom = itemDom;
+
+            if( options.type == "checkbox" )
+            {
+                item.value = options.value ?? false;
+                const panel = new Panel();
+                item.checkbox = panel.addCheckbox(null, item.value, (value, event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const f = options.callback;
+                    item.value = value;
+                    if( f ) f.call( this, key, value, event );
+                }, { label: key, signal: ( "@checkbox_"  + key ) });
+                itemDom.appendChild( panel.root.childNodes[ 0 ] );
+            }
+            else
+            {
+                if( options.icon )
+                {
+                    let itemIcon = document.createElement( 'i' );
+                    itemIcon.className = options.icon;
+                    itemDom.appendChild( itemIcon );
+                }
+
+                let itemName = document.createElement( 'a' );
+                itemName.innerHTML = key;
+                itemDom.appendChild( itemName );
+            }
+
+            entry.addEventListener("click", ( e ) => {
+                if( e.target && e.target.classList.contains( "lexcheckbox" ) )
+                {
+                    return;
+                }
+
+                if( options.collapsable )
+                {
+                    itemDom.querySelector( ".collapser" ).click();
+                }
+                else
+                {
+                    const f = options.callback;
+                    if( f ) f.call( this, key, item.value, e );
+
+                    if( item.checkbox )
+                    {
+                        item.value = !item.value;
+                        item.checkbox.set( item.value, true );
+                    }
+                }
+
+                // Manage selected
+                this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
+                entry.classList.add( "selected" );
+            });
+
+            if( options.action )
+            {
+                const actionIcon = LX.makeIcon( options.action.icon ?? "MoreHorizontal", options.action.name );
+                itemDom.appendChild( actionIcon );
+
+                actionIcon.addEventListener( "click", (e) => {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    const f = options.action.callback;
+                    if( f ) f.call( this, key, e );
+                } );
+            }
+            else if( options.collapsable )
+            {
+                const collapsableContent = document.createElement( 'div' );
+                Object.assign( collapsableContent.style, { width: "100%", display: "none" } );
+                LX.makeCollapsible( itemDom, collapsableContent, currentGroup ?? this.content );
+                this.collapseQueue = options.collapsable;
+                this.collapseContainer = collapsableContent;
+            }
+
+            let desc = document.createElement( 'span' );
+            desc.className = 'lexsidebarentrydesc';
+            desc.innerHTML = key;
+            entry.appendChild( desc );
+
+            itemDom.addEventListener("mouseenter", () => {
+                setTimeout( () => {
+                    desc.style.display = "unset";
+                }, 150 );
+            });
+
+            itemDom.addEventListener("mouseleave", () => {
+                setTimeout( () => {
+                    desc.style.display = "none";
+                }, 150 );
+            });
+
+            // Subentries
+            if( !item[ key ].length )
+            {
+                continue;
+            }
+
+            let subentryContainer = document.createElement( 'div' );
+            subentryContainer.className = "lexsidebarsubentrycontainer";
+
+            if( currentGroup )
+            {
+                currentGroup.appendChild( subentryContainer );
+            }
+            else
+            {
+                this.content.appendChild( subentryContainer );
+            }
+
+            for( var i = 0; i < item[ key ].length; ++i )
+            {
+                const subitem = item[ key ][ i ];
+                const suboptions = subitem.options ?? {};
+                const subkey = Object.keys( subitem )[ 0 ];
+
+                let subentry = document.createElement( 'div' );
+                subentry.innerHTML = `<span>${ subkey }</span>`;
+
+                if( suboptions.action )
+                {
+                    const actionIcon = LX.makeIcon( suboptions.action.icon ?? "MoreHorizontal", suboptions.action.name );
+                    subentry.appendChild( actionIcon );
+
+                    actionIcon.addEventListener( "click", (e) => {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                        const f = suboptions.action.callback;
+                        if( f ) f.call( this, subkey, e );
+                    } );
+                }
+
+                subentry.className = "lexsidebarentry";
+                subentry.id = subkey;
+                subentryContainer.appendChild( subentry );
+
+                subentry.addEventListener("click", (e) => {
+
+                    const f = suboptions.callback;
+                    if( f ) f.call( this, subkey, subentry, e );
+
+                    // Manage selected
+                    this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
+                    entry.classList.add( "selected" );
+                });
+            }
+        }
+    }
 };
 
 LX.SideBar = SideBar;
@@ -2935,29 +3804,32 @@ class Widget {
     static DROPDOWN     = 4;
     static CHECKBOX     = 5;
     static TOGGLE       = 6;
-    static COLOR        = 7;
-    static NUMBER       = 8;
-    static TITLE        = 9;
-    static VECTOR       = 10;
-    static TREE         = 11;
-    static PROGRESS     = 12;
-    static FILE         = 13;
-    static LAYERS       = 14;
-    static ARRAY        = 15;
-    static LIST         = 16;
-    static TAGS         = 17;
-    static CURVE        = 18;
-    static CARD         = 19;
-    static IMAGE        = 20;
-    static CONTENT      = 21;
-    static CUSTOM       = 22;
-    static SEPARATOR    = 23;
-    static KNOB         = 24;
-    static SIZE         = 25;
-    static PAD          = 26;
-    static FORM         = 27;
-    static DIAL         = 28;
-    static COUNTER      = 29;
+    static RADIO        = 7;
+    static COLOR        = 8;
+    static RANGE        = 9;
+    static NUMBER       = 10;
+    static TITLE        = 11;
+    static VECTOR       = 12;
+    static TREE         = 13;
+    static PROGRESS     = 14;
+    static FILE         = 15;
+    static LAYERS       = 16;
+    static ARRAY        = 17;
+    static LIST         = 18;
+    static TAGS         = 19;
+    static CURVE        = 20;
+    static CARD         = 21;
+    static IMAGE        = 22;
+    static CONTENT      = 23;
+    static CUSTOM       = 24;
+    static SEPARATOR    = 25;
+    static KNOB         = 26;
+    static SIZE         = 27;
+    static PAD          = 28;
+    static FORM         = 29;
+    static DIAL         = 30;
+    static COUNTER      = 31;
+    static TABLE        = 32;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2985,7 +3857,9 @@ class Widget {
     set( value, skipCallback = false, signalName = "" ) {
 
         if( this.onSetValue )
+        {
             return this.onSetValue( value, skipCallback );
+        }
 
         console.warn("Can't set value of " + this.typeName());
     }
@@ -3024,14 +3898,17 @@ class Widget {
 
     typeName() {
 
-        switch( this.type ) {
+        switch( this.type )
+        {
             case Widget.TEXT: return "Text";
             case Widget.TEXTAREA: return "TextArea";
             case Widget.BUTTON: return "Button";
             case Widget.DROPDOWN: return "Dropdown";
             case Widget.CHECKBOX: return "Checkbox";
             case Widget.TOGGLE: return "Toggle";
+            case Widget.RADIO: return "Radio";
             case Widget.COLOR: return "Color";
+            case Widget.RANGE: return "Range";
             case Widget.NUMBER: return "Number";
             case Widget.VECTOR: return "Vector";
             case Widget.TREE: return "Tree";
@@ -3048,6 +3925,7 @@ class Widget {
             case Widget.FORM: return "Form";
             case Widget.DIAL: return "Dial";
             case Widget.COUNTER: return "Counter";
+            case Widget.TABLE: return "Table";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -3108,11 +3986,12 @@ function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
             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 ) {
+                if( instance )
+                {
                     element.querySelector(".lexcustomitems").toggleAttribute('hidden');
                 }
-                else {
+                else
+                {
                     addContextMenu(null, event, c => {
                         c.add("New " + custom_widget_name, () => {
                             instance = {};
@@ -3299,16 +4178,20 @@ class NodeTree {
 
             // Add or remove
             const idx = this.selected.indexOf( node );
-            if( idx > -1 ) {
+            if( idx > -1 )
+            {
                 item.classList.remove( 'selected' );
                 this.selected.splice( idx, 1 );
-            }else {
+            }
+            else
+            {
                 item.classList.add( 'selected' );
                 this.selected.push( node );
             }
 
             // Only Show children...
-            if( isParent && node.id.length > 1 /* Strange case... */) {
+            if( isParent && node.id.length > 1 /* Strange case... */)
+            {
                 node.closed = false;
                 if( that.onevent )
                 {
@@ -3346,7 +4229,7 @@ class NodeTree {
 
             e.preventDefault();
 
-            if( that.onevent )
+            if( !that.onevent )
             {
                 return;
             }
@@ -3402,7 +4285,8 @@ class NodeTree {
                         return;
                     }
 
-                    if( that.onevent ) {
+                    if( that.onevent )
+                    {
                         const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
                         that.onevent( event );
                     }
@@ -3429,7 +4313,8 @@ class NodeTree {
             if( e.key == "Delete" )
             {
                 // Send event now so we have the info in selected array..
-                if( that.onevent ) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent( TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e );
                     event.multiple = this.selected.length > 1;
                     that.onevent( event );
@@ -3460,22 +4345,24 @@ class NodeTree {
 
         // Node rename
 
-        let name_input = document.createElement('input');
-        name_input.toggleAttribute('hidden', !node.rename);
-        name_input.value = node.id;
-        item.appendChild(name_input);
+        const nameInput = document.createElement( "input" );
+        nameInput.toggleAttribute( "hidden", !node.rename );
+        nameInput.value = node.id;
+        item.appendChild(nameInput);
 
-        if(node.rename) {
+        if( node.rename )
+        {
             item.classList.add('selected');
-            name_input.focus();
+            nameInput.focus();
         }
 
-        name_input.addEventListener("keyup", function(e){
-            if(e.key == 'Enter') {
-
+        nameInput.addEventListener("keyup", function(e){
+            if( e.key == "Enter" )
+            {
                 this.value = this.value.replace(/\s/g, '_');
 
-                if(that.onevent) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent(TreeEvent.NODE_RENAMED, node, this.value);
                     that.onevent( event );
                 }
@@ -3485,18 +4372,20 @@ class NodeTree {
                 that.frefresh( node.id );
                 list.querySelector("#" + node.id).classList.add('selected');
             }
-            if(e.key == 'Escape') {
+            else if(e.key == "Escape")
+            {
                 delete node.rename;
                 that.frefresh( node.id );
             }
         });
 
-        name_input.addEventListener("blur", function(e){
+        nameInput.addEventListener("blur", function(e){
             delete node.rename;
             that.refresh();
         });
 
-        if(this.options.draggable ?? true) {
+        if( this.options.draggable ?? true )
+        {
             // Drag nodes
             if(parent) // Root doesn't move!
             {
@@ -3522,29 +4411,32 @@ class NodeTree {
                     return;
                 let target = node;
                 // Can't drop to same node
-                if(dragged.id == target.id) {
+                if( dragged.id == target.id )
+                {
                     console.warn("Cannot parent node to itself!");
                     return;
                 }
 
                 // Can't drop to child node
-                const isChild = function(new_parent, node) {
+                const isChild = function( newParent, node ) {
                     var result = false;
-                    for( var c of node.children ) {
-                        if( c.id == new_parent.id )
-                            return true;
-                        result |= isChild(new_parent, c);
+                    for( var c of node.children )
+                    {
+                        if( c.id == newParent.id ) return true;
+                        result |= isChild( newParent, c );
                     }
                     return result;
                 };
 
-                if(isChild(target, dragged)) {
+                if( isChild( target, dragged ))
+                {
                     console.warn("Cannot parent node to a current child!");
                     return;
                 }
 
                 // Trigger node dragger event
-                if(that.onevent) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent(TreeEvent.NODE_DRAGGED, dragged, target);
                     that.onevent( event );
                 }
@@ -3560,7 +4452,8 @@ class NodeTree {
         let handled = false;
 
         // Show/hide children
-        if(isParent) {
+        if( isParent )
+        {
             item.querySelector('a.hierarchy').addEventListener("click", function(e) {
 
                 handled = true;
@@ -3568,7 +4461,8 @@ class NodeTree {
                 e.stopPropagation();
 
                 node.closed = !node.closed;
-                if(that.onevent) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent(TreeEvent.NODE_CARETCHANGED, node, node.closed);
                     that.onevent( event );
                 }
@@ -3588,7 +4482,8 @@ class NodeTree {
                 node.visible = node.visible === undefined ? false : !node.visible;
                 this.className = "itemicon fa-solid fa-eye" + (!node.visible ? "-slash" : "");
                 // Trigger visibility event
-                if(that.onevent) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent(TreeEvent.NODE_VISIBILITY, node, node.visible);
                     that.onevent( event );
                 }
@@ -3597,9 +4492,10 @@ class NodeTree {
             item.appendChild(visibility);
         }
 
-        if(node.actions)
+        if( node.actions )
         {
-            for(var i = 0; i < node.actions.length; ++i) {
+            for( var i = 0; i < node.actions.length; ++i )
+            {
                 let a = node.actions[i];
                 var actionEl = document.createElement('a');
                 actionEl.className = "itemicon " + a.icon;
@@ -3612,20 +4508,25 @@ class NodeTree {
             }
         }
 
-        if(selectedId != undefined && node.id == selectedId) {
-            this.selected = [node];
+        if( selectedId != undefined && node.id == selectedId )
+        {
+            this.selected = [ node ];
             item.click();
         }
 
-        if(node.closed )
+        if( node.closed )
+        {
             return;
+        }
 
         for( var i = 0; i < node.children.length; ++i )
         {
-            let child = node.children[i];
+            let child = node.children[ i ];
 
-            if( this.options.onlyFolders && child.type != 'folder')
+            if( this.options.onlyFolders && child.type != 'folder' )
+            {
                 continue;
+            }
 
             this._create_item( node, child, level + 1 );
         }
@@ -3664,12 +4565,12 @@ class Panel {
      * style: CSS Style object to be applied to the panel
      */
 
-    constructor( options = {} )  {
+    constructor( options = {} ) {
         var root = document.createElement('div');
         root.className = "lexpanel";
-        if(options.id)
+        if( options.id )
             root.id = options.id;
-        if(options.className)
+        if( options.className )
             root.className += " " + options.className;
 
         root.style.width = options.width || "calc( 100% - 6px )";
@@ -3746,23 +4647,31 @@ class Panel {
         this.branches = [];
         this.current_branch = null;
 
-        for(let w in this.widgets) {
-            if(this.widgets[w].options && this.widgets[w].options.signal) {
+        for( let w in this.widgets )
+        {
+            if( this.widgets[w].options && this.widgets[w].options.signal )
+            {
                 const signal = this.widgets[w].options.signal;
-                for(let i = 0; i < LX.signals[signal].length; i++) {
-                    if(LX.signals[signal][i] == this.widgets[w]) {
+                for( let i = 0; i < LX.signals[signal].length; i++ )
+                {
+                    if( LX.signals[signal][i] == this.widgets[w] )
+                    {
                         LX.signals[signal] = [...LX.signals[signal].slice(0, i), ...LX.signals[signal].slice(i+1)];
                     }
                 }
             }
         }
 
-        if(this.signals) {
-            for(let w = 0; w < this.signals.length; w++) {
+        if( this.signals )
+        {
+            for( let w = 0; w < this.signals.length; w++ )
+            {
                 let widget = Object.values(this.signals[w])[0];
                 let signal = widget.options.signal;
-                for(let i = 0; i < LX.signals[signal].length; i++) {
-                    if(LX.signals[signal][i] == widget) {
+                for( let i = 0; i < LX.signals[signal].length; i++ )
+                {
+                    if( LX.signals[signal][i] == widget )
+                    {
                         LX.signals[signal] = [...LX.signals[signal].slice(0, i), ...LX.signals[signal].slice(i+1)];
                     }
                 }
@@ -3800,10 +4709,12 @@ class Panel {
 
         this._inline_widgets_left = -1;
 
-        if(!this._inlineContainer)  {
+        if( !this._inlineContainer )
+        {
             this._inlineContainer = document.createElement('div');
             this._inlineContainer.className = "lexinlinewidgets";
-            if(justifyContent)
+
+            if( justifyContent )
             {
                 this._inlineContainer.style.justifyContent = justifyContent;
             }
@@ -3817,7 +4728,7 @@ class Panel {
             if(is_pair)
             {
                 // eg. an array, inline items appended later to
-                if(this._inline_queued_container)
+                if( this._inline_queued_container)
                     this._inlineContainer.appendChild( item[0] );
                 // eg. a dropdown, item is appended to parent, not to inline cont.
                 else
@@ -3829,7 +4740,7 @@ class Panel {
 
         if(!this._inline_queued_container)
         {
-            if(this.current_branch)
+            if( this.current_branch)
                 this.current_branch.content.appendChild( this._inlineContainer );
             else
                 this.root.appendChild( this._inlineContainer );
@@ -3868,7 +4779,7 @@ class Panel {
         this.current_branch = branch;
 
         // Append to panel
-        if(this.branches.length == 0)
+        if( this.branches.length == 0)
             branch.root.classList.add('first');
 
         // This is the last!
@@ -3879,7 +4790,8 @@ class Panel {
         this.root.appendChild( branch.root );
 
         // Add widget filter
-        if(options.filter) {
+        if( options.filter )
+        {
             this._addFilter( options.filter, {callback: this._searchWidgets.bind(this, branch.name)} );
         }
 
@@ -3996,14 +4908,18 @@ class Panel {
         element.jsInstance = widget;
 
         const insert_widget = el => {
-            if(options.container)
-                options.container.appendChild(el);
-            else if(!this.queuedContainer) {
-
-                if(this.current_branch)
+            if( options.container )
+            {
+                options.container.appendChild( el );
+            }
+            else if( !this.queuedContainer )
+            {
+                if( this.current_branch )
                 {
-                    if(!options.skipWidget)
+                    if( !options.skipWidget )
+                    {
                         this.current_branch.widgets.push( widget );
+                    }
                     this.current_branch.content.appendChild( el );
                 }
                 else
@@ -4013,40 +4929,47 @@ class Panel {
                 }
             }
             // Append content to queued tab container
-            else {
+            else
+            {
                 this.queuedContainer.appendChild( el );
             }
         };
 
         const store_widget = el => {
 
-            if(!this.queuedContainer) {
+            if( !this.queuedContainer )
+            {
                 this._inlineWidgets.push( el );
             }
             // Append content to queued tab container
-            else {
+            else
+            {
                 this._inlineWidgets.push( [el, this.queuedContainer] );
             }
         };
 
         // Process inline widgets
-        if(this._inline_widgets_left > 0 && !options.skipInlineCount)
+        if( this._inline_widgets_left > 0 && !options.skipInlineCount )
         {
-            if(!this._inlineWidgets)  {
+            if( !this._inlineWidgets )
+            {
                 this._inlineWidgets = [];
             }
 
             // Store widget and its container
-            store_widget(element);
+            store_widget( element );
 
             this._inline_widgets_left--;
 
             // Last widget
-            if(!this._inline_widgets_left) {
+            if( !this._inline_widgets_left )
+            {
                 this.endLine();
             }
-        }else {
-            insert_widget(element);
+        }
+        else
+        {
+            insert_widget( element );
         }
 
         return widget;
@@ -4070,8 +4993,8 @@ class Panel {
 
         let searchIcon = document.createElement('a');
         searchIcon.className = "fa-solid fa-magnifying-glass";
-        element.appendChild(input);
         element.appendChild(searchIcon);
+        element.appendChild(input);
 
         input.addEventListener("input", (e) => {
             if(options.callback)
@@ -4083,15 +5006,20 @@ class Panel {
 
     _searchWidgets(branchName, value) {
 
-        for( let b of this.branches ) {
-
-            if(b.name !== branchName)
+        for( let b of this.branches )
+        {
+            if( b.name !== branchName )
+            {
                 continue;
+            }
 
             // remove all widgets
-            for( let w of b.widgets ) {
-                if(w.domEl.classList.contains('lexfilter'))
+            for( let w of b.widgets )
+            {
+                if( w.domEl.classList.contains('lexfilter') )
+                {
                     continue;
+                }
                 w.domEl.remove();
             }
 
@@ -4101,9 +5029,9 @@ class Panel {
             const emptyFilter = !value.length;
 
             // add widgets
-            for( let w of b.widgets ) {
-
-                if(!emptyFilter)
+            for( let w of b.widgets )
+            {
+                if( !emptyFilter )
                 {
                     if(!w.name) continue;
                     const filterWord = value.toLowerCase();
@@ -4123,26 +5051,28 @@ class Panel {
         }
     }
 
-    _search_options(options, value) {
-        // push to right container
+    _filterOptions( options, value ) {
+
+        // Push to right container
         const emptyFilter = !value.length;
         let filteredOptions = [];
-        // add widgets
-        for( let i = 0; i < options.length; i++) {
-            let o = options[i];
-            if(!emptyFilter)
+
+        // Add widgets
+        for( let i = 0; i < options.length; i++ )
+        {
+            let o = options[ i ];
+            if( !emptyFilter )
             {
-                let toCompare = (typeof o == 'string') ? o : o.value;
-                ;
+                let toCompare = ( typeof o == 'string' ) ? o : o.value;
                 const filterWord = value.toLowerCase();
                 const name = toCompare.toLowerCase();
-                if(!name.includes(filterWord)) continue;
+                if( !name.includes( filterWord ) ) continue;
             }
-            // insert filtered widget
-            filteredOptions.push(o);
+
+            filteredOptions.push( o );
         }
 
-        this.refresh(filteredOptions);
+        this.refresh( filteredOptions );
     }
 
     _trigger( event, callback ) {
@@ -4195,7 +5125,7 @@ class Panel {
 
     clearQueue() {
 
-        if(this._queue && this._queue.length)
+        if( this._queue && this._queue.length)
         {
             this.queuedContainer = this._queue.pop();
             return;
@@ -4421,7 +5351,8 @@ class Panel {
         element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name ) {
+        if( !widget.name )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -4521,7 +5452,8 @@ class Panel {
         element.appendChild(container);
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -4626,69 +5558,94 @@ class Panel {
     /**
      * @method addComboButtons
      * @param {String} name Widget name
-     * @param {Array} values Each of the {value, callback} items
+     * @param {Array} values Each of the {value, callback, selected, disabled} items
      * @param {*} options:
      * float: Justify content (left, center, right) [center]
+     * @legacy selected: Selected item by default by value
      * noSelection: Buttons can be clicked, but they are not selectable
+     * toggle: Buttons can be toggled insted of selecting only one
      */
 
     addComboButtons( name, values, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.BUTTON, options);
+        let widget = this.create_widget( name, Widget.BUTTON, options );
         let element = widget.domEl;
 
         let that = this;
         let container = document.createElement('div');
         container.className = "lexcombobuttons ";
-        if( options.float ) container.className += options.float;
+
+        if( options.float )
+        {
+            container.className += options.float;
+        }
+
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        let should_select = !(options.noSelection ?? false);
+        let buttonsBox = document.createElement('div');
+        buttonsBox.className = "lexcombobuttonsbox ";
+
+        const shouldSelect = !( options.noSelection ?? false );
+        const shouldToggle = shouldSelect && ( options.toggle ?? false );
+
         for( let b of values )
         {
-            if( !b.value ) throw("Set 'value' for each button!");
+            if( !b.value )
+            {
+                throw( "Set 'value' for each button!" );
+            }
 
             let buttonEl = document.createElement('button');
             buttonEl.className = "lexbutton combo";
             buttonEl.title = b.icon ? b.value : "";
-            if(options.buttonClass)
-                buttonEl.classList.add(options.buttonClass);
+            buttonEl.id = b.id ?? "";
 
-            if(options.selected == b.value)
-                buttonEl.classList.add("selected");
+            if( options.buttonClass )
+            {
+                buttonEl.classList.add( options.buttonClass );
+            }
 
-            if(b.id)
-                buttonEl.id = b.id;
+            if( shouldSelect && ( b.selected || options.selected == b.value ) )
+            {
+                buttonEl.classList.add("selected");
+            }
 
-            buttonEl.innerHTML = (b.icon ? "<a class='" + b.icon +"'></a>" : "") + "<span>" + (b.icon ? "" : b.value) + "</span>";
+            buttonEl.innerHTML = ( b.icon ? "<a class='" + b.icon +"'></a>" : "" ) + "<span>" + ( b.icon ? "" : b.value ) + "</span>";
 
-            if(options.disabled)
-                buttonEl.setAttribute("disabled", true);
+            if( b.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');
+            buttonEl.addEventListener("click", function( e ) {
+                if( shouldSelect )
+                {
+                    if( shouldToggle )
+                    {
+                        this.classList.toggle('selected');
+                    }
+                    else
+                    {
+                        container.querySelectorAll('button').forEach( s => s.classList.remove('selected'));
+                        this.classList.add('selected');
+                    }
                 }
-                that._trigger( new IEvent(name, b.value, e), b.callback );
-            });
 
-            container.appendChild(buttonEl);
+                that._trigger( new IEvent( name, b.value, e ), b.callback );
+            });
 
-            // Remove branch padding and margins
-            if(widget.name === undefined) {
-                buttonEl.className += " noname";
-                buttonEl.style.width =  "100%";
-            }
+            buttonsBox.appendChild( buttonEl );
         }
 
         // Remove branch padding and margins
-        if(widget.name !== undefined) {
+        if( !widget.name )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
 
-        element.appendChild(container);
+        container.appendChild( buttonsBox );
+        element.appendChild( container );
 
         return widget;
     }
@@ -4855,7 +5812,8 @@ class Panel {
 
         element.appendChild( container );
 
-        if( !widget.name || options.hideName ) {
+        if( !widget.name || options.hideName )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -4940,6 +5898,8 @@ class Panel {
      * filter: Add a search bar to the widget [false]
      * disabled: Make the widget disabled [false]
      * skipReset: Don't add the reset value button when value changes
+     * placeholder: Placeholder for the filter input
+     * emptyMsg: Custom message to show when no filtered results
      */
 
     addDropdown( name, values, value, callback, options = {} ) {
@@ -4985,17 +5945,72 @@ class Panel {
         let buttonName = value;
         buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
-        this.queue(container);
+        this.queue( container );
+
+        const _placeOptions = ( parent ) => {
+
+            const overflowContainer = parent.getParentArea();
+            const rect = selectedOption.getBoundingClientRect();
+            const nestedDialog = parent.parentElement.closest( "dialog" );
+
+            // Manage vertical aspect
+            {
+                const listHeight = parent.offsetHeight;
+                let topPosition = rect.y;
+
+                let maxY = window.innerHeight;
+
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxY = parentRect.y + parentRect.height;
+                }
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    topPosition -= rect.y;
+                }
+
+                parent.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
 
-        const _getMaxListWidth = () => {
+                const showAbove = ( topPosition + listHeight ) > maxY;
+                if( showAbove )
+                {
+                    parent.style.top = ( topPosition - listHeight ) + 'px';
+                    parent.classList.add( "place-above" );
+                }
+            }
 
-            let maxWidth = 0;
-            for( let i of values )
+            // Manage horizontal aspect
             {
-                const iString = String( i );
-                maxWidth = Math.max( iString.length, maxWidth );
+                const listWidth = parent.offsetWidth;
+                let leftPosition = rect.x;
+
+                parent.style.minWidth = ( rect.width ) + 'px';
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    leftPosition -= rect.x;
+                }
+
+                parent.style.left = ( leftPosition ) + 'px';
+
+                let maxX = window.innerWidth;
+
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxX = parentRect.x + parentRect.width;
+                }
+
+                const showLeft = ( leftPosition + listWidth ) > maxX;
+                if( showLeft )
+                {
+                    parent.style.left = ( leftPosition - ( listWidth - rect.width ) ) + 'px';
+                }
             }
-            return Math.max( maxWidth * 10, 80 );
         };
 
         let selectedOption = this.addButton( null, buttonName, ( value, event ) => {
@@ -5005,52 +6020,50 @@ class Panel {
                 return;
             }
 
-            list.toggleAttribute( "hidden" );
-            list.classList.remove( "place-above" );
-
-            const listHeight = 26 * values.length;
-            const rect = selectedOption.getBoundingClientRect();
-            const topPosition = rect.y;
-
-            let maxY = window.innerHeight;
-            let overflowContainer = list.getParentArea();
+            listDialog.classList.remove( "place-above" );
+            const opened = listDialog.hasAttribute( "open" );
 
-            if( overflowContainer )
+            if( !opened )
             {
-                const parentRect = overflowContainer.getBoundingClientRect();
-                maxY = parentRect.y + parentRect.height;
+                listDialog.show();
+                _placeOptions( listDialog );
+            }
+            else
+            {
+                listDialog.close();
             }
 
-            list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
-
-            const showAbove = ( topPosition + listHeight ) > maxY;
-            if( showAbove )
+            if( filter )
             {
-                list.style.top = ( topPosition - listHeight ) + 'px';
-                list.classList.add( "place-above" );
+                filter.querySelector( "input" ).focus();
             }
 
-            list.style.width = (event.currentTarget.clientWidth) + 'px';
-            list.style.minWidth = (_getMaxListWidth()) + 'px';
-            list.focus();
-        }, { buttonClass: "array", skipInlineCount: true });
+        }, { buttonClass: "array", skipInlineCount: true, disabled: options.disabled });
 
         this.clearQueue();
 
         selectedOption.style.width = "100%";
 
         selectedOption.refresh = (v) => {
-            if(selectedOption.querySelector("span").innerText == "")
+            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);
+            }
         }
 
         // Add dropdown options container
+
+        const listDialog = document.createElement( 'dialog' );
+        listDialog.className = "lexdropdownoptions";
+
         let list = document.createElement( 'ul' );
         list.tabIndex = -1;
         list.className = "lexoptions";
-        list.hidden = true;
+        listDialog.appendChild( list )
 
         list.addEventListener( 'focusout', function( e ) {
             e.stopPropagation();
@@ -5068,97 +6081,118 @@ class Panel {
             {
                 return;
             }
-            this.toggleAttribute( 'hidden', true );
+            listDialog.close();
         });
 
         // Add filter options
         let filter = null;
-        if(options.filter ?? false)
+        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 listOptions = document.createElement('span');
-        list.appendChild( listOptions );
+            filter = this._addFilter( options.placeholder ?? "Search...", { container: list, callback: this._filterOptions.bind( list, values )} );
 
-        if( filter )
-        {
-            list.prepend( filter );
-            listOptions.style.height = "calc(100% - 25px)";
+            list.appendChild( filter );
 
             filter.addEventListener('focusout', function( e ) {
                 if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
                 {
                     return;
                 }
-                list.toggleAttribute( 'hidden', true );
+                listDialog.close();
             });
         }
 
+        // Create option list to empty it easily..
+        const listOptions = document.createElement('span');
+        listOptions.style.height = "calc(100% - 25px)";
+        list.appendChild( listOptions );
+
         // Add dropdown options list
-        list.refresh = options => {
+        list.refresh = ( options ) => {
 
             // Empty list
             listOptions.innerHTML = "";
 
-            for(let i = 0; i < options.length; i++)
+            if( !options.length )
+            {
+                let iValue = options.emptyMsg ?? "No options found.";
+
+                let option = document.createElement( "div" );
+                option.className = "option";
+                option.style.flexDirection = "unset";
+                option.innerHTML = iValue;
+
+                let li = document.createElement( "li" );
+                li.className = "lexdropdownitem empty";
+                li.appendChild( option );
+
+                listOptions.appendChild( li );
+                return;
+            }
+
+            for( let i = 0; i < options.length; i++ )
             {
-                let iValue = options[i];
-                let li = document.createElement('li');
-                let option = document.createElement('div');
+                let iValue = options[ i ];
+                let li = document.createElement( "li" );
+                let option = document.createElement( "div" );
                 option.className = "option";
-                li.appendChild(option);
-                li.addEventListener("click", (e) => {
-                    element.querySelector(".lexoptions").toggleAttribute('hidden', true);
-                    const currentSelected = element.querySelector(".lexoptions .selected");
-                    if(currentSelected) currentSelected.classList.remove("selected");
-                    value = e.currentTarget.getAttribute("value");
-                    e.currentTarget.toggleAttribute('hidden', false);
-                    e.currentTarget.classList.add("selected");
+                li.appendChild( option );
+
+                li.addEventListener( "click", e => {
+                    listDialog.close();
+                    const currentSelected = element.querySelector( ".lexoptions .selected" );
+                    if(currentSelected) currentSelected.classList.remove( "selected" );
+                    value = e.currentTarget.getAttribute( "value" );
+                    e.currentTarget.toggleAttribute( "hidden", false );
+                    e.currentTarget.classList.add( "selected" );
                     selectedOption.refresh(value);
 
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (value != wValue.iValue ? "block" : "none");
-                    that._trigger( new IEvent(name, value, null), callback );
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = (value != wValue.iValue ? "block" : "none");
+                    that._trigger( new IEvent( name, value, null ), callback );
 
                     // Reset filter
-                    if(filter)
+                    if( filter )
                     {
-                        filter.querySelector('input').value = "";
-                        this._search_options.bind(list, values, "")();
+                        filter.querySelector( "input" ).value = "";
+                        this._filterOptions.bind( list, values, "" )();
                     }
                 });
 
                 // Add string option
-                if( iValue.constructor != Object ) {
-                    option.style.flexDirection = 'unset';
+                if( iValue.constructor != Object )
+                {
+                    option.style.flexDirection = "unset";
                     option.innerHTML = "</a><span>" + iValue + "</span><a class='fa-solid fa-check'>";
                     option.value = iValue;
-                    li.setAttribute("value", iValue);
+                    li.setAttribute( "value", iValue );
                     li.className = "lexdropdownitem";
-                    if( i == (options.length - 1) ) li.className += " last";
-                    if(iValue == value) {
-                        li.classList.add("selected");
+
+                    if( iValue == value )
+                    {
+                        li.classList.add( "selected" );
                         wValue.innerHTML = iValue;
                     }
                 }
-                else {
+                else
+                {
                     // Add image option
-                    let img = document.createElement("img");
+                    let img = document.createElement( "img" );
                     img.src = iValue.src;
-                    li.setAttribute("value", iValue.value);
+                    li.setAttribute( "value", iValue.value );
                     li.className = "lexlistitem";
                     option.innerText = iValue.value;
                     option.className += " media";
-                    option.prepend(img);
+                    option.prepend( img );
 
-                    option.setAttribute("value", iValue.value);
-                    option.setAttribute("data-index", i);
-                    option.setAttribute("data-src", iValue.src);
-                    option.setAttribute("title", iValue.value);
-                    if(value == iValue.value)
-                        li.classList.add("selected");
+                    option.setAttribute( "value", iValue.value );
+                    option.setAttribute( "data-index", i );
+                    option.setAttribute( "data-src", iValue.src );
+                    option.setAttribute( "title", iValue.value );
+
+                    if( value == iValue.value )
+                    {
+                        li.classList.add( "selected" );
+                    }
                 }
 
                 listOptions.appendChild( li );
@@ -5167,7 +6201,7 @@ class Panel {
 
         list.refresh( values );
 
-        container.appendChild( list );
+        container.appendChild( listDialog );
         element.appendChild( container );
 
         // Remove branch padding and margins
@@ -5198,15 +6232,16 @@ class Panel {
 
     addCurve( name, values, callback, options = {} ) {
 
-        if(!name) {
-            throw("Set Widget Name!");
+        if( !name )
+        {
+            throw( "Set Widget Name!" );
         }
 
         let that = this;
-        let widget = this.create_widget(name, Widget.CURVE, options);
+        let widget = this.create_widget( name, Widget.CURVE, options );
 
         widget.onGetValue = () => {
-            return JSON.parse(JSON.stringify(curveInstance.element.value));
+            return JSON.parse(JSON.stringify( curveInstance.element.value ));
         };
 
         widget.onSetValue = ( newValue, skipCallback ) => {
@@ -5351,7 +6386,8 @@ class Panel {
 
     addLayers( name, value, callback, options = {} ) {
 
-        if(!name) {
+        if( !name )
+        {
             throw("Set Widget Name!");
         }
 
@@ -5393,7 +6429,8 @@ class Panel {
             let binary = value.toString( 2 );
             let nbits = binary.length;
             // fill zeros
-            for(var i = 0; i < (16 - nbits); ++i) {
+            for( var i = 0; i < (16 - nbits); ++i )
+            {
                 binary = '0' + binary;
             }
 
@@ -5446,8 +6483,9 @@ class Panel {
 
     addArray( name, values = [], callback, options = {} ) {
 
-        if(!name) {
-            throw("Set Widget Name!");
+        if( !name )
+        {
+            throw( "Set Widget Name!" );
         }
 
         let widget = this.create_widget(name, Widget.ARRAY, options);
@@ -5628,7 +6666,8 @@ class Panel {
         widget.updateValues( values );
 
         // Remove branch padding and margins
-        if( !widget.name ) {
+        if( !widget.name )
+        {
             element.className += " noname";
             listContainer.style.width = "100%";
         }
@@ -5715,7 +6754,7 @@ class Panel {
             tagsContainer.appendChild( tagInput );
 
             tagInput.onkeydown = function( e ) {
-                const val = this.value.replace(/\s/g, '');
+                const val = this.value.replace( /\s/g, '' );
                 if( e.key == ' ' || e.key == 'Enter' )
                 {
                     e.preventDefault();
@@ -5753,15 +6792,16 @@ class Panel {
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * disabled: Make the widget disabled [false]
+     * label: Checkbox label
      * suboptions: Callback to add widgets in case of TRUE value
-     * className: Customize colors
+     * className: Extra classes to customize style
      */
 
     addCheckbox( name, value, callback, options = {} ) {
 
-        if( !name )
+        if( !name && !options.label )
         {
-            throw( "Set Widget Name!" );
+            throw( "Set Widget Name or at least a label!" );
         }
 
         let widget = this.create_widget( name, Widget.CHECKBOX, options );
@@ -5781,10 +6821,13 @@ class Panel {
         let element = widget.domEl;
 
         // Add reset functionality
-        Panel._add_reset_property( element.domName, function() {
-            checkbox.checked = !checkbox.checked;
-            Panel._dispatch_event( checkbox, "change" );
-        });
+        if( name )
+        {
+            Panel._add_reset_property( element.domName, function() {
+                checkbox.checked = !checkbox.checked;
+                Panel._dispatch_event( checkbox, "change" );
+            });
+        }
 
         // Add widget value
 
@@ -5800,7 +6843,7 @@ class Panel {
 
         let valueName = document.createElement( 'span' );
         valueName.className = "checkboxtext";
-        valueName.innerHTML = "On";
+        valueName.innerHTML = options.label ?? "On";
 
         container.appendChild( checkbox );
         container.appendChild( valueName );
@@ -5938,6 +6981,96 @@ class Panel {
         return widget;
     }
 
+    /**
+     * @method addRadioGroup
+     * @param {String} label Radio label
+     * @param {Array} values Radio options
+     * @param {Function} callback Callback function on change
+     * @param {*} options:
+     * disabled: Make the widget disabled [false]
+     * className: Customize colors
+     */
+
+    addRadioGroup( label, values, callback, options = {} ) {
+
+        let widget = this.create_widget( null, Widget.RADIO, options );
+
+        widget.onGetValue = () => {
+            const items = container.querySelectorAll( 'button' );
+            for( let i = 0; i < items.length; ++i )
+            {
+                const optionItem = items[ i ];
+                if( optionItem.checked )
+                {
+                    return [ i, values[ i ] ];
+                }
+            }
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            const items = container.querySelectorAll( 'button' );
+            for( let i = 0; i < items.length; ++i )
+            {
+                const optionItem = items[ i ];
+                if( newValue == i )
+                {
+                    Panel._dispatch_event( optionItem, "click", skipCallback );
+                }
+            }
+        };
+
+        let element = widget.domEl;
+
+        // Add widget value
+        var container = document.createElement( 'div' );
+        container.className = "lexradiogroup " + ( options.className ?? "" );
+
+        let labelSpan = document.createElement( 'span' );
+        labelSpan.innerHTML = label;
+        container.appendChild( labelSpan );
+
+        const that = this;
+
+        for( let i = 0; i < values.length; ++i )
+        {
+            const optionItem = document.createElement( 'div' );
+            optionItem.className = "lexradiogroupitem";
+            container.appendChild( optionItem );
+
+            const optionButton = document.createElement( 'button' );
+            optionButton.className = "lexbutton";
+            optionButton.disabled = options.disabled ?? false;
+            optionItem.appendChild( optionButton );
+
+            optionButton.addEventListener( "click", function( e ) {
+                const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
+                container.querySelectorAll( 'button' ).forEach( e => { e.checked = false; e.classList.remove( "checked" ) } );
+                this.checked = !this.checked;
+                this.classList.toggle( "checked" );
+                if( !skipCallback ) that._trigger( new IEvent( null, [ i, values[ i ] ], e ), callback );
+            } );
+
+            {
+                const checkedSpan = document.createElement( 'span' );
+                optionButton.appendChild( checkedSpan );
+            }
+
+            const optionLabel = document.createElement( 'span' );
+            optionLabel.innerHTML = values[ i ];
+            optionItem.appendChild( optionLabel );
+        }
+
+        if( options.selected )
+        {
+            console.assert( options.selected.constructor == Number );
+            widget.set( options.selected, true );
+        }
+
+        element.appendChild( container );
+
+        return widget;
+    }
+
     /**
      * @method addColor
      * @param {String} name Widget name
@@ -5950,7 +7083,8 @@ class Panel {
 
     addColor( name, value, callback, options = {} ) {
 
-        if( !name ) {
+        if( !name )
+        {
             throw( "Set Widget Name!" );
         }
 
@@ -5988,7 +7122,8 @@ class Panel {
         color.useRGB = options.useRGB ?? false;
         color.value = color.iValue = value.constructor === Array ? rgbToHex( value ) : value;
 
-        if( options.disabled ) {
+        if( options.disabled )
+        {
             color.disabled = true;
         }
 
@@ -5997,39 +7132,170 @@ class Panel {
 
             const skipCallback = e.detail;
 
-            // Change value (always hex)
-            if( !change_from_input )
-                text_widget.set( val );
+            // 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;
+    }
+
+    /**
+     * @method addRange
+     * @param {String} name Widget name
+     * @param {Number} value Default number value
+     * @param {Function} callback Callback function on change
+     * @param {*} options:
+     * className: Extra classes to customize style
+     * disabled: Make the widget disabled [false]
+     * left: The slider goes to the left instead of the right
+     * fill: Fill slider progress [true]
+     * step: Step of the input
+     * min, max: Min and Max values for the input
+     */
+
+    addRange( name, value, callback, options = {} ) {
+
+        let widget = this.create_widget( name, Widget.RANGE, options );
+
+        widget.onGetValue = () => {
+            return +slider.value;
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            slider.value = newValue;
+            Panel._dispatch_event( slider, "input", skipCallback );
+        };
+
+        let element = widget.domEl;
+
+        // add reset functionality
+        if( widget.name )
+        {
+            Panel._add_reset_property( element.domName, function() {
+                this.style.display = "none";
+                slider.value = slider.iValue;
+                Panel._dispatch_event( slider, "input" );
+            });
+        }
+
+        // add widget value
+
+        var container = document.createElement( 'div' );
+        container.className = "lexrange";
+        container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+        let slider = document.createElement( 'input' );
+        slider.className = "lexrangeslider " + ( options.className ?? "" );
+        slider.value = slider.iValue = value;
+        slider.min = options.min;
+        slider.max = options.max;
+        slider.step = options.step ?? 1;
+        slider.type = "range";
+        slider.disabled = options.disabled ?? false;
+
+        if( options.left ?? false )
+        {
+            slider.classList.add( "left" );
+        }
+
+        if( !( options.fill ?? true ) )
+        {
+            slider.classList.add( "no-fill" );
+        }
+
+        slider.addEventListener( "input", e => {
+
+            if( isNaN( e.target.valueAsNumber ) )
+            {
+                return;
+            }
+
+            const skipCallback = e.detail;
+
+            let val = e.target.value = clamp( +e.target.valueAsNumber, +slider.min, +slider.max );
+            slider.value = val;
 
             // Reset button (default value)
             if( !skipCallback )
             {
                 let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = val != color.iValue ? "block": "none";
+                if( btn ) btn.style.display = val != slider.iValue ? "block": "none";
             }
 
-            if( color.useRGB )
-                val = hexToRgb( val );
+            if( options.left )
+            {
+                val = ( +slider.max ) - val + ( +slider.min );
+            }
 
             if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
-        }, false );
-
-        container.appendChild( color );
+        }, { passive: false });
 
-        this.queue( container );
+        slider.addEventListener( "mousedown", function( e ) {
+            if( options.onPress )
+            {
+                options.onPress.bind( slider )( e, slider );
+            }
+        }, false );
 
-        const text_widget = this.addText( null, color.value, v => {
-            change_from_input = true;
-            widget.set( v );
-            change_from_input = false;
-        }, { width: "calc( 100% - 32px )"});
+        slider.addEventListener( "mouseup", function( e ) {
+            if( options.onRelease )
+            {
+                options.onRelease.bind( slider )( e, slider );
+            }
+        }, false );
 
-        text_widget.domEl.style.marginLeft = "4px";
+        // Method to change min, max, step parameters
+        widget.setLimits = ( newMin, newMax, newStep ) => {
+            slider.min = newMin ?? slider.min;
+            slider.max = newMax ?? slider.max;
+            slider.step = newStep ?? slider.step;
+            Panel._dispatch_event( slider, "input", true );
+        };
 
-        this.clearQueue();
+        if( value.constructor == Number )
+        {
+            value = clamp( value, +slider.min, +slider.max );
+        }
 
+        container.appendChild( slider );
         element.appendChild( container );
 
+        // Remove branch padding and margins
+        if( !widget.name )
+        {
+            element.className += " noname";
+            container.style.width = "100%";
+        }
+
         return widget;
     }
 
@@ -6065,7 +7331,8 @@ class Panel {
         let element = widget.domEl;
 
         // add reset functionality
-        if( widget.name ) {
+        if( widget.name )
+        {
             Panel._add_reset_property( element.domName, function() {
                 this.style.display = "none";
                 vecinput.value = vecinput.iValue;
@@ -6333,7 +7600,8 @@ class Panel {
                 return;
             }
 
-            for( let i = 0; i < inputs.length; ++i ) {
+            for( let i = 0; i < inputs.length; ++i )
+            {
                 let value = newValue[ i ];
                 inputs[ i ].value = round( value, options.precision ) ?? 0;
                 Panel._dispatch_event( inputs[ i ], "change", skipCallback );
@@ -6345,7 +7613,8 @@ class Panel {
         // Add reset functionality
         Panel._add_reset_property( element.domName, function() {
             this.style.display = "none";
-            for( let v of element.querySelectorAll( ".vecinput" ) ) {
+            for( let v of element.querySelectorAll( ".vecinput" ) )
+            {
                 v.value = v.iValue;
                 Panel._dispatch_event( v, "change" );
             }
@@ -6357,8 +7626,8 @@ class Panel {
         container.className = "lexvector";
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        for( let i = 0; i < num_components; ++i ) {
-
+        for( let i = 0; i < num_components; ++i )
+        {
             let box = document.createElement( 'div' );
             box.className = "vecbox";
             box.innerHTML = "<span class='" + Panel.VECTOR_COMPONENTS[ i ] + "'></span>";
@@ -6434,7 +7703,8 @@ class Panel {
 
                 if( locker.locked )
                 {
-                    for( let v of element.querySelectorAll( ".vecinput" ) ) {
+                    for( let v of element.querySelectorAll( ".vecinput" ) )
+                    {
                         v.value = val;
                         value[ v.idx ] = val;
                     }
@@ -6492,7 +7762,8 @@ class Panel {
 
                     if( locker.locked )
                     {
-                        for( let v of element.querySelectorAll( ".vecinput" ) ) {
+                        for( let v of element.querySelectorAll( ".vecinput" ) )
+                        {
                             v.value = round( +v.valueAsNumber + mult * dt, options.precision );
                             Panel._dispatch_event( v, "change" );
                         }
@@ -6618,7 +7889,7 @@ class Panel {
             const value = [];
             for( let i = 0; i < element.dimensions.length; ++i )
             {
-                value.push( element.dimensions[ i ].onGetValue() );
+                value.push( element.dimensions[ i ].value() );
             }
             return value;
         };
@@ -6626,7 +7897,7 @@ class Panel {
         widget.onSetValue = ( newValue, skipCallback ) => {
             for( let i = 0; i < element.dimensions.length; ++i )
             {
-                element.dimensions[ i ].onSetValue( newValue[ i ], skipCallback );
+                element.dimensions[ i ].set( newValue[ i ], skipCallback );
             }
         };
 
@@ -6641,14 +7912,14 @@ class Panel {
         {
             element.dimensions[ i ] = this.addNumber( null, value[ i ], ( v ) => {
 
-                const value = widget.onGetValue();
+                const value = widget.value();
 
                 if( element.locked )
                 {
                     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 );
+                    element.dimensions[ index ].set( value[ index ], true );
                 }
 
                 if( callback )
@@ -6691,7 +7962,7 @@ class Panel {
                     this.classList.remove( "fa-lock-open" );
 
                     // Recompute ratio
-                    const value = widget.onGetValue();
+                    const value = widget.value();
                     element.aspectRatio = value[ 0 ] / value[ 1 ];
                 }
                 else
@@ -7088,7 +8359,8 @@ class Panel {
         let container = document.createElement('div');
         container.className = "lextree";
 
-        if(name) {
+        if( name )
+        {
             let title = document.createElement('span');
             title.innerHTML = name;
             container.appendChild(title);
@@ -7100,8 +8372,8 @@ class Panel {
             toolsDiv.className += " notitle";
 
         // Tree icons
-        if(options.icons) {
-
+        if( options.icons )
+        {
             for( let data of options.icons )
             {
                 let iconEl = document.createElement('a');
@@ -7161,11 +8433,15 @@ class Panel {
         let widget = new Widget( null, Widget.SEPARATOR );
         widget.domEl = element;
 
-        if(this.current_branch) {
+        if( this.current_branch )
+        {
             this.current_branch.content.appendChild( element );
             this.current_branch.widgets.push( widget );
-        } else
-            this.root.appendChild(element);
+        }
+        else
+        {
+            this.root.appendChild( element );
+        }
     }
 
     /**
@@ -7346,6 +8622,234 @@ class Panel {
 
         return widget;
     }
+
+    /**
+     * @method addTable
+     * @param {String} name Widget name
+     * @param {Number} data Table data
+     * @param {*} options:
+     * head: Table headers (each of the headers per column)
+     * body: Table body (data per row for each column)
+     * rowActions: Allow to add actions per row
+     * onMenuAction: Function callback to fill the "menu" context
+     * selectable: Each row can be selected
+     */
+
+    addTable( name, data, options = { } ) {
+
+        if( !data )
+        {
+            throw( "Data is needed to create a table!" );
+        }
+
+        let widget = this.create_widget( name, Widget.TABLE, options );
+
+        widget.onGetValue = () => {
+
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        };
+
+        let element = widget.domEl;
+
+        const container = document.createElement('div');
+        container.className = "lextable";
+        container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+        const table = document.createElement( 'table' );
+        container.appendChild( table );
+
+        data.head = data.head ?? [];
+        data.body = data.body ?? [];
+        data.orderMap = { };
+        data.checkMap = { };
+
+        function compareFn( idx, order, a, b) {
+            if (a[idx] < b[idx]) return -order;
+            else if (a[idx] > b[idx]) return order;
+            return 0;
+        }
+
+        widget.refreshTable = () => {
+
+            table.innerHTML = "";
+
+            // Head
+            {
+                const head = document.createElement( 'thead' );
+                head.className = "lextablehead";
+                table.appendChild( head );
+
+                const hrow = document.createElement( 'tr' );
+
+                if( options.selectable )
+                {
+                    const th = document.createElement( 'th' );
+                    const input = document.createElement( 'input' );
+                    input.type = "checkbox";
+                    input.className = "lexcheckbox";
+                    input.checked = data.checkMap[ ":root" ] ?? false;
+                    th.appendChild( input );
+
+                    input.addEventListener( 'change', function() {
+
+                        data.checkMap[ ":root" ] = this.checked;
+
+                        const body = table.querySelector( "tbody" );
+                        for( const el of body.childNodes )
+                        {
+                            data.checkMap[ el.getAttribute( "rowId" ) ] = this.checked;
+                            el.querySelector( "input" ).checked = this.checked;
+                        }
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                for( const headData of data.head )
+                {
+                    const th = document.createElement( 'th' );
+                    th.innerHTML = `${ headData } <a class="fa-solid fa-sort"></a>`;
+
+                    th.querySelector( 'a' ).addEventListener( 'click', () => {
+
+                        if( !data.orderMap[ headData ] )
+                        {
+                            data.orderMap[ headData ] = 1;
+                        }
+
+                        const idx = data.head.indexOf(headData);
+                        data.body = data.body.sort( compareFn.bind( this, idx,data.orderMap[ headData ] ) );
+                        data.orderMap[ headData ] = -data.orderMap[ headData ];
+
+                        widget.refreshTable();
+
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                // Add empty header column
+                if( options.rowActions )
+                {
+                    const th = document.createElement( 'th' );
+                    th.className = "sm";
+                    hrow.appendChild( th );
+                }
+
+                head.appendChild( hrow );
+            }
+
+            // Body
+            {
+                const body = document.createElement( 'tbody' );
+                body.className = "lextablebody";
+                table.appendChild( body );
+
+                for( let r = 0; r < data.body.length; ++r )
+                {
+                    const bodyData = data.body[ r ];
+                    const row = document.createElement( 'tr' );
+                    const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
+                    row.setAttribute( "rowId", rowId );
+
+                    if( options.selectable )
+                    {
+                        const td = document.createElement( 'td' );
+                        const input = document.createElement( 'input' );
+                        input.type = "checkbox";
+                        input.className = "lexcheckbox";
+                        input.checked = data.checkMap[ rowId ];
+                        td.appendChild( input );
+
+                        input.addEventListener( 'change', function() {
+                            data.checkMap[ rowId ] = this.checked;
+
+                            if( !this.checked )
+                            {
+                                const input = table.querySelector( "thead input[type='checkbox']" );
+                                input.checked = data.checkMap[ ":root" ] = false;
+                            }
+                        });
+
+                        row.appendChild( td );
+                    }
+
+                    for( const rowData of bodyData )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.innerHTML = `${ rowData }`;
+                        row.appendChild( td );
+                    }
+
+                    if( options.rowActions )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.className = "sm";
+
+                        const buttons = document.createElement( 'div' );
+                        buttons.className = "lextablebuttons";
+                        td.appendChild( buttons );
+
+                        for( const action of options.rowActions )
+                        {
+                            const button = document.createElement( 'a' );
+                            button.className = "lexicon";
+
+                            if( action == "delete" )
+                            {
+                                button.className += " fa-solid fa-trash-can";
+                                button.addEventListener( 'click', function() {
+                                    // Don't need to refresh table..
+                                    data.body.splice( r, 1 );
+                                    row.remove();
+                                });
+                            }
+                            else if( action == "menu" )
+                            {
+                                button.className += " fa-solid fa-ellipsis";
+                                button.addEventListener( 'click', function( event ) {
+                                    addContextMenu( null, event, c => {
+                                        if( options.onMenuAction )
+                                        {
+                                            options.onMenuAction( c );
+                                            return;
+                                        }
+                                        console.warn( "Using <Menu action> without action callbacks." );
+                                    } );
+                                });
+                            }
+                            else // custom actions
+                            {
+                                console.assert( action.constructor == Object );
+                                button.className += ` ${ action.icon }`;
+                            }
+
+                            buttons.appendChild( button );
+                        }
+
+                        row.appendChild( td );
+                    }
+
+                    body.appendChild( row );
+                }
+            }
+        }
+
+        widget.refreshTable();
+
+        if( !widget.name )
+        {
+            element.className += " noname";
+            container.style.width = "100%";
+        }
+
+        element.appendChild( container );
+
+        return widget;
+    }
 }
 
 LX.Panel = Panel;
@@ -7393,7 +8897,7 @@ class Branch {
         root.appendChild( title );
 
         var branchContent = document.createElement( 'div' );
-        branchContent.id = name.replace(/\s/g, '');
+        branchContent.id = name.replace( /\s/g, '' );
         branchContent.className = "lexbranchcontent";
         root.appendChild(branchContent);
         this.content = branchContent;
@@ -7449,7 +8953,8 @@ class Branch {
 
         const dialog = new Dialog(this.name, p => {
             // add widgets
-            for( let w of this.widgets ) {
+            for( let w of this.widgets )
+            {
                 p.root.appendChild( w.domEl );
             }
         });
@@ -7542,8 +9047,8 @@ class Branch {
         var size = this.grabber.style.marginLeft;
 
         // Update sizes of widgets inside
-        for(var i = 0; i < this.widgets.length; i++) {
-
+        for( var i = 0; i < this.widgets.length; i++ )
+        {
             let widget = this.widgets[ i ];
             let element = widget.domEl;
 
@@ -7562,9 +9067,6 @@ class Branch {
                 case Widget.FILE:
                     padding = "10%";
                     break;
-                case Widget.TEXT:
-                    padding = "8px";
-                    break;
             };
 
             value.style.width = "-moz-calc( 100% - " + size + " - " + padding + " )";
@@ -7702,16 +9204,15 @@ class Dialog {
             draggable = options.draggable ?? true,
             modal = options.modal ?? false;
 
-        if( modal )
-        {
-            LX.modal.toggle( false );
-        }
-
-        var root = document.createElement('div');
-        root.className = "lexdialog " + (options.class ?? "");
+        var root = document.createElement('dialog');
+        root.className = "lexdialog " + (options.className ?? "");
         root.id = options.id ?? "dialog" + Dialog._last_id++;
         LX.root.appendChild( root );
 
+        doAsync( () => {
+            modal ? root.showModal() : root.show();
+        }, 10 );
+
         let that = this;
 
         var titleDiv = document.createElement('div');
@@ -7793,18 +9294,17 @@ class Dialog {
 
                 if( !options.onclose )
                 {
-                    that.panel.clear();
-                    root.remove();
+                    root.close();
+
+                    doAsync( () => {
+                        that.panel.clear();
+                        root.remove();
+                    }, 150 );
                 }
                 else
                 {
                     options.onclose( this.root );
                 }
-
-                if( modal )
-                {
-                    LX.modal.toggle( true );
-                }
             };
 
             var closeButton = document.createElement( 'a' );
@@ -7863,15 +9363,15 @@ class Dialog {
 
         root.style.width = size[ 0 ] ? (size[ 0 ]) : "25%";
         root.style.height = size[ 1 ] ? (size[ 1 ]) : "auto";
+        root.style.translate = options.position ? "unset" : "-50% -50%";
 
         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 ] ?? "50%";
+        root.style.top = position[ 1 ] ?? "50%";
 
         panel.root.style.width = "calc( 100% - 30px )";
         panel.root.style.height = title ? "calc( 100% - " + ( titleDiv.offsetHeight + 30 ) + "px )" : "calc( 100% - 51px )";
@@ -7888,7 +9388,7 @@ class Dialog {
         this._oncreate.call(this, this.panel);
     }
 
-    setPosition(x, y) {
+    setPosition( x, y ) {
 
         this.root.style.left = x + "px";
         this.root.style.top = y + "px";
@@ -7919,21 +9419,32 @@ class PocketDialog extends Dialog {
         options.draggable = options.draggable ?? false;
         options.closable = options.closable ?? false;
 
+        const dragMargin = 3;
+
         super( title, callback, options );
 
         let that = this;
         // Update margins on branch title closes/opens
         LX.addSignal("@on_branch_closed", this.panel, closed => {
             if( this.dock_pos == PocketDialog.BOTTOM )
-                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+            {
+                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
+            }
         });
 
         // Custom
         this.root.classList.add( "pocket" );
-        if( !options.position ) {
-            this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
-            this.root.style.top = "0px";
+
+        this.root.style.translate = "none";
+        this.root.style.top = "0";
+        this.root.style.left = "unset";
+
+        if( !options.position )
+        {
+            this.root.style.right = dragMargin + "px";
+            this.root.style.top = dragMargin + "px";
         }
+
         this.panel.root.style.width = "calc( 100% - 12px )";
         this.panel.root.style.height = "calc( 100% - 40px )";
         this.dock_pos = PocketDialog.TOP;
@@ -7941,6 +9452,11 @@ class PocketDialog extends Dialog {
         this.minimized = false;
         this.title.tabIndex = -1;
         this.title.addEventListener("click", e => {
+            if( this.title._eventCatched )
+            {
+                this.title._eventCatched = false;
+                return;
+            }
 
             // Sized dialogs have to keep their size
             if( this.size )
@@ -7954,7 +9470,7 @@ class PocketDialog extends Dialog {
 
             if( this.dock_pos == PocketDialog.BOTTOM )
                 that.root.style.top = this.root.classList.contains("minimized") ?
-                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
         });
 
         if( !options.draggable )
@@ -7969,26 +9485,42 @@ class PocketDialog extends Dialog {
                     switch( t )
                     {
                     case 'b':
-                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
                         break;
                     case 'l':
-                        this.root.style.left = options.position ? options.position[ 1 ] : "0px";
+                        this.root.style.right = "unset";
+                        this.root.style.left = options.position ? options.position[ 1 ] : ( dragMargin + "px" );
                         break;
                     }
                 }
             }
 
             this.root.classList.add('dockable');
-            this.title.addEventListener("keydown", function(e) {
-                if( e.ctrlKey && e.key == 'ArrowLeft' ) {
+
+            this.title.addEventListener("keydown", function( e ) {
+                if( !e.ctrlKey )
+                {
+                    return;
+                }
+
+                that.root.style.right = "unset";
+
+                if( e.key == 'ArrowLeft' )
+                {
                     that.root.style.left = '0px';
-                } else if( e.ctrlKey && e.key == 'ArrowRight' ) {
-                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + 6) + "px)";
-                }else if( e.ctrlKey && e.key == 'ArrowUp' ) {
+                }
+                else if( e.key == 'ArrowRight' )
+                {
+                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + dragMargin) + "px)";
+                }
+                else if( e.key == 'ArrowUp' )
+                {
                     that.root.style.top = "0px";
                     that.dock_pos = PocketDialog.TOP;
-                }else if( e.ctrlKey && e.key == 'ArrowDown' ) {
-                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                }
+                else if( e.key == 'ArrowDown' )
+                {
+                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
                     that.dock_pos = PocketDialog.BOTTOM;
                 }
             });
@@ -8007,12 +9539,12 @@ class ContextMenu {
     constructor( event, title, options = {} ) {
 
         // remove all context menus
-        document.body.querySelectorAll(".lexcontextmenubox").forEach(e => e.remove());
+        document.body.querySelectorAll( ".lexcontextmenu" ).forEach( e => e.remove() );
 
-        this.root = document.createElement('div');
-        this.root.className = "lexcontextmenubox";
-        this.root.style.left = (event.x - 48 + document.scrollingElement.scrollLeft) + "px";
-        this.root.style.top = (event.y - 8 + document.scrollingElement.scrollTop) + "px";
+        this.root = document.createElement( "div" );
+        this.root.className = "lexcontextmenu";
+        this.root.style.left = ( event.x - 48 + document.scrollingElement.scrollLeft ) + "px";
+        this.root.style.top = ( event.y - 8 + document.scrollingElement.scrollTop ) + "px";
 
         this.root.addEventListener("mouseleave", function() {
             this.remove();
@@ -8025,8 +9557,8 @@ class ContextMenu {
         {
             const item = {};
             item[ title ] = [];
-            item[ 'className' ] = "cmtitle";
-            item[ 'icon' ] = options.icon;
+            item[ "className" ] = "cmtitle";
+            item[ "icon" ] = options.icon;
             this.items.push( item );
         }
     }
@@ -8074,16 +9606,16 @@ class ContextMenu {
 
     _create_submenu( o, k, c, d ) {
 
-        this.root.querySelectorAll(".lexcontextmenubox").forEach( cm => cm.remove() );
+        this.root.querySelectorAll( ".lexcontextmenu" ).forEach( cm => cm.remove() );
 
         let contextmenu = document.createElement('div');
-        contextmenu.className = "lexcontextmenubox";
+        contextmenu.className = "lexcontextmenu";
         c.appendChild( contextmenu );
 
         for( var i = 0; i < o[k].length; ++i )
         {
-            const subitem = o[k][i];
-            const subkey = Object.keys(subitem)[0];
+            const subitem = o[ k ][ i ];
+            const subkey = Object.keys( subitem )[ 0 ];
             this._create_entry(subitem, subkey, contextmenu, d);
         }
 
@@ -8099,22 +9631,25 @@ class ContextMenu {
 
         const hasSubmenu = o[ k ].length;
         let entry = document.createElement('div');
-        entry.className = "lexcontextmenuentry" + (o[ 'className' ] ? " " + o[ 'className' ] : "" );
+        entry.className = "lexmenuboxentry" + (o[ 'className' ] ? " " + o[ 'className' ] : "" );
         entry.id = o.id ?? ("eId" + getSupportedDOMName( k ));
         entry.innerHTML = "";
         const icon = o[ 'icon' ];
-        if(icon) {
+        if( icon )
+        {
             entry.innerHTML += "<a class='" + icon + " fa-sm'></a>";
         }
         const disabled = o['disabled'];
         entry.innerHTML += "<div class='lexentryname" + (disabled ? " disabled" : "") + "'>" + k + "</div>";
         c.appendChild( entry );
 
-        if( this.colors[ k ] ) {
+        if( this.colors[ k ] )
+        {
             entry.style.borderColor = this.colors[ k ];
         }
 
-        if( k == "" ) {
+        if( k == "" )
+        {
             entry.className += " cmseparator";
             return;
         }
@@ -8127,7 +9662,8 @@ class ContextMenu {
             if(disabled) return;
 
             const f = o[ 'callback' ];
-            if(f) {
+            if( f )
+            {
                 f.call( this, k, entry );
                 this.root.remove();
             }
@@ -8159,8 +9695,7 @@ class ContextMenu {
 
         entry.addEventListener("mouseleave", () => {
             d = -1; // Reset depth
-            // delete entry.built;
-            c.querySelectorAll(".lexcontextmenubox").forEach(e => e.remove());
+            c.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
         });
     }
 
@@ -8193,22 +9728,25 @@ class ContextMenu {
                 if(key) found = o[ key ];
             } );
 
-            if(found) {
+            if( found )
+            {
                 insert( tokens[idx++], found );
             }
-            else {
+            else
+            {
                 let item = {};
                 item[ token ] = [];
-                const next_token = tokens[idx++];
+                const nextToken = tokens[idx++];
                 // Check if last token -> add callback
-                if(!next_token) {
+                if( !nextToken )
+                {
                     item[ 'id' ] = options.id;
                     item[ 'callback' ] = options.callback;
                     item[ 'disabled' ] = options.disabled ?? false;
                 }
 
                 list.push( item );
-                insert( next_token, item[ token ] );
+                insert( nextToken, item[ token ] );
             }
         };
 
@@ -8232,7 +9770,8 @@ class ContextMenu {
                 _item[ key ].unshift( parent );
             }
 
-            for( var child of _item[ key ] ) {
+            for( var child of _item[ key ] )
+            {
                 let k = Object.keys(child)[0];
                 for( var i = 0; i < child[k].length; ++i )
                     setParent(child);
@@ -8246,7 +9785,7 @@ class ContextMenu {
 
         for( let item of this.items )
         {
-            let key = Object.keys(item)[0];
+            let key = Object.keys( item )[ 0 ];
             let pKey = "eId" + getSupportedDOMName( key );
 
             // Item already created
@@ -8363,7 +9902,7 @@ class Curve {
 
             var r = [];
             var dx = (element.xrange[1] - element.xrange[ 0 ]) / samples;
-            for(var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
+            for( var i = element.xrange[0]; i <= element.xrange[1]; i += dx )
             {
                 r.push( element.getValueAt(i) );
             }
@@ -8372,7 +9911,8 @@ class Curve {
 
         element.addValue = function(v) {
 
-            for(var i = 0; i < element.value; i++) {
+            for( var i = 0; i < element.value; i++ )
+            {
                 var value = element.value[i];
                 if(value[0] < v[0]) continue;
                 element.value.splice(i,0,v);
@@ -8398,7 +9938,7 @@ class Curve {
 
         var selected = -1;
 
-        element.redraw = function( o = {} )  {
+        element.redraw = function( o = {} ) {
 
             if( o.value ) element.value = o.value;
             if( o.xrange ) element.xrange = o.xrange;
@@ -8427,13 +9967,16 @@ class Curve {
             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);
-                values.push(pos[ 0 ]);
-                values.push(pos[ 1 ]);
-                if(!element.smooth)
+            for( var i in element.value )
+            {
+                var value = element.value[ i ];
+                pos = convert( value );
+                values.push( pos[ 0 ] );
+                values.push( pos[ 1 ] );
+                if( !element.smooth )
+                {
                     ctx.lineTo( pos[ 0 ], pos[ 1 ] );
+                }
             }
 
             pos = convert([ element.xrange[ 1 ], element.defaulty ]);
@@ -8450,7 +9993,8 @@ class Curve {
             }
 
             // Draw points
-            for( var i = 0; i < element.value.length; i += 1 ) {
+            for( var i = 0; i < element.value.length; i += 1 )
+            {
                 var value = element.value[ i ];
                 pos = convert( value );
                 if( selected == i )
@@ -8462,10 +10006,11 @@ class Curve {
                 ctx.fill();
             }
 
-            if(element.show_samples) {
+            if( element.show_samples )
+            {
                 var samples = element.resample(element.show_samples);
                 ctx.fillStyle = "#888";
-                for(var i = 0; i < samples.length; i += 1)
+                for( var i = 0; i < samples.length; i += 1)
                 {
                     var value = [ i * ((element.xrange[ 1 ] - element.xrange[ 0 ]) / element.show_samples) + element.xrange[ 0 ], samples[ i ] ];
                     pos = convert(value);
@@ -8488,7 +10033,8 @@ class Curve {
 
             selected = computeSelected( mousex, canvas.height - mousey );
 
-            if( e.button == LX.MOUSE_LEFT_CLICK && selected == -1 && element.allow_add_values ) {
+            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();
@@ -8536,7 +10082,8 @@ class Curve {
             var dy = element.draggable_y ? last_mouse[ 1 ] - mousey : 0;
             var delta = unconvert([ -dx, dy ]);
 
-            if( selected != -1 ) {
+            if( selected != -1 )
+            {
                 var minx = element.xrange[ 0 ];
                 var maxx = element.xrange[ 1 ];
 
@@ -8693,7 +10240,7 @@ class Dial {
 
             var r = [];
             var dx = (element.xrange[1] - element.xrange[ 0 ]) / samples;
-            for(var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
+            for( var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
             {
                 r.push( element.getValueAt(i) );
             }
@@ -8702,15 +10249,16 @@ class Dial {
 
         element.addValue = function(v) {
 
-            for(var i = 0; i < element.value; i++) {
-                var value = element.value[i];
-                if(value[0] < v[0]) continue;
-                element.value.splice(i,0,v);
+            for( var i = 0; i < element.value; i++ )
+            {
+                var value = element.value[ i ];
+                if(value[ 0 ] < v[ 0 ]) continue;
+                element.value.splice( i, 0, v );
                 redraw();
                 return;
             }
 
-            element.value.push(v);
+            element.value.push( v );
             redraw();
         }
 
@@ -8730,7 +10278,7 @@ class Dial {
 
         var selected = -1;
 
-        element.redraw = function( o = {} )  {
+        element.redraw = function( o = {} ) {
 
             if( o.value ) element.value = o.value;
             if( o.xrange ) element.xrange = o.xrange;
@@ -8759,17 +10307,17 @@ class Dial {
             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);
-                values.push(pos[ 0 ]);
-                values.push(pos[ 1 ]);
-
+            for( var i in element.value)
+            {
+                var value = element.value[ i ];
+                pos = convert( value );
+                values.push( pos[ 0 ] );
+                values.push( pos[ 1 ] );
             }
 
             pos = convert([ element.xrange[ 1 ], element.defaulty ]);
-            values.push(pos[ 0 ]);
-            values.push(pos[ 1 ]);
+            values.push( pos[ 0 ] );
+            values.push( pos[ 1 ] );
 
             // Draw points
             const center =  [0,0];
@@ -8779,7 +10327,8 @@ class Dial {
             ctx.arc( pos[ 0 ], pos[ 1 ], 3, 0, Math.PI * 2);
             ctx.fill();
 
-            for( var i = 0; i < element.value.length; i += 1 ) {
+            for( var i = 0; i < element.value.length; i += 1 )
+            {
                 var value = element.value[ i ];
                 pos = convert( value );
                 if( selected == i )
@@ -8791,10 +10340,11 @@ class Dial {
                 ctx.fill();
             }
 
-            if(element.show_samples) {
+            if( element.show_samples )
+            {
                 var samples = element.resample(element.show_samples);
                 ctx.fillStyle = "#888";
-                for(var i = 0; i < samples.length; i += 1)
+                for( var i = 0; i < samples.length; i += 1)
                 {
                     var value = [ i * ((element.xrange[ 1 ] - element.xrange[ 0 ]) / element.show_samples) + element.xrange[ 0 ], samples[ i ] ];
                     pos = convert(value);
@@ -8817,7 +10367,8 @@ class Dial {
 
             selected = computeSelected( mousex, canvas.height - mousey );
 
-            if( e.button == LX.MOUSE_LEFT_CLICK && selected == -1 && element.allow_add_values ) {
+            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();
@@ -8865,7 +10416,8 @@ class Dial {
             var dy = element.draggable_y ? last_mouse[ 1 ] - mousey : 0;
             var delta = unconvert([ -dx, dy ]);
 
-            if( selected != -1 ) {
+            if( selected != -1 )
+            {
                 var minx = element.xrange[ 0 ];
                 var maxx = element.xrange[ 1 ];
 
@@ -8973,7 +10525,8 @@ class AssetViewEvent {
     }
 
     string() {
-        switch(this.type) {
+        switch(this.type)
+        {
             case AssetViewEvent.NONE: return "assetview_event_none";
             case AssetViewEvent.ASSET_SELECTED: return "assetview_event_selected";
             case AssetViewEvent.ASSET_DELETED: return "assetview_event_deleted";
@@ -9287,7 +10840,7 @@ class AssetView {
         }
 
         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.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "30%", 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" } );
@@ -9327,8 +10880,8 @@ class AssetView {
                     icon: "fa-solid fa-arrows-rotate",
                     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" } });
+            ], { width: "20%", minWidth: "164px", noSelection: true } );
+            this.rightPanel.addText(null, this.path.join('/'), null, { width: "70%", maxWidth: "calc(70% - 64px)", minWidth: "164px", disabled: true, signal: "@on_folder_change", style: { fontWeight: "bolder", fontSize: "16px", color: "#aaa" } });
             this.rightPanel.addText(null, "Page " + this.contentPage + " / " + ((((this.currentData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1), null, {disabled: true, signal: "@on_page_change", width: "fit-content"})
             this.rightPanel.endLine();
         }
@@ -9454,8 +11007,8 @@ class AssetView {
             title.innerText = item.id;
             itemEl.appendChild( title );
 
-            if( !that.skipPreview ) {
-
+            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
 
@@ -9482,7 +11035,8 @@ class AssetView {
                     var newEmSize = charsPerLine / newLength;
                     var textBaseSize = 64;
 
-                    if(newEmSize < 1) {
+                    if( newEmSize < 1 )
+                    {
                         var newFontSize = newEmSize * textBaseSize;
                         textEl.style.fontSize = newFontSize + "px";
                         preview.style.paddingTop = "calc(50% - " + (textEl.offsetHeight * 0.5 + 10) + "px)"
@@ -9711,7 +11265,8 @@ class AssetView {
 
                 this.currentData.push( item );
 
-                if(i == (num_files - 1)) {
+                if( i == (num_files - 1) )
+                {
                     this._refreshContent();
                     if( !this.skipBrowser )
                         this.tree.refresh();
@@ -9763,7 +11318,7 @@ class AssetView {
         this.currentData.splice( idx, 1 );
         this._refreshContent( this.searchValue, this.filter );
 
-        if(this.onevent)
+        if( this.onevent)
         {
             const event = new AssetViewEvent( AssetViewEvent.ASSET_DELETED, item );
             this.onevent( event );
@@ -9839,7 +11394,7 @@ Object.assign(LX, {
         xhr.onload = function(load)
         {
             var response = this.response;
-            if(this.status != 200)
+            if( this.status != 200)
             {
                 var err = "Error " + this.status;
                 if(request.error)
@@ -9887,7 +11442,7 @@ Object.assign(LX, {
         var data = new FormData();
         if( request.data )
         {
-            for(var i in request.data)
+            for( var i in request.data)
                 data.append(i,request.data[i]);
         }
 
@@ -9948,7 +11503,7 @@ Object.assign(LX, {
         var size = total;
         var loaded_scripts = [];
 
-        for(var i in url)
+        for( var i in url)
         {
             var script = document.createElement('script');
             script.num = i;
@@ -10073,6 +11628,18 @@ Element.prototype.getParentArea = function() {
     }
 }
 
+LX.ICONS = {
+    "Sidebar": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_iconCarrier"> <g id="Complete"> <g id="sidebar-left"> <g> <rect id="Square-2" data-name="Square" x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></rect> <line x1="9" y1="21" x2="9" y2="3" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></line> </g> </g> </g> </g></svg>`,
+    "More": `<svg fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_iconCarrier"> <g id="Complete"> <g id="F-More"> <path id="Vertical" d="M12,16a2,2,0,1,1-2,2A2,2,0,0,1,12,16ZM10,6a2,2,0,1,0,2-2A2,2,0,0,0,10,6Zm0,6a2,2,0,1,0,2-2A2,2,0,0,0,10,12Z"></path> </g> </g> </g></svg>`,
+    "MoreHorizontal": `<svg fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_iconCarrier"> <g id="Complete"> <g id="F-More"> <path id="Horizontal" d="M8,12a2,2,0,1,1-2-2A2,2,0,0,1,8,12Zm10-2a2,2,0,1,0,2,2A2,2,0,0,0,18,10Zm-6,0a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"></path> </g> </g> </g></svg>`,
+    "MenuArrows": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(90)"><g id="SVGRepo_iconCarrier"> <g id="Complete"> <g id="Code"> <g> <polyline id="Right-2" data-name="Right" points="15.5 7 20.5 12 15.5 17" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> <polyline id="Left-2" data-name="Left" points="8.5 7 3.5 12 8.5 17" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g> </g></svg>`,
+    "Plus": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"<g id="SVGRepo_iconCarrier"> <g id="Complete"> <g id="add-2" data-name="add"> <g> <line x1="12" y1="19" x2="12" y2="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line> <line x1="5" y1="12" x2="19" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line> </g> </g> </g> </g></svg>`,
+    "Down": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_iconCarrier"> <title>i</title> <g id="Complete"> <g id="F-Chevron"> <polyline id="Down" points="5 8.5 12 15.5 19 8.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg>`,
+    "Up": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_iconCarrier"> <title>i</title> <g id="Complete"> <g id="F-Chevron"> <polyline id="Up" points="5 15.5 12 8.5 19 15.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg>`,
+    "Right": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_iconCarrier"> <title>i</title> <g id="Complete"> <g id="F-Chevron"> <polyline id="Right" points="8.5 5 15.5 12 8.5 19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg>`,
+    "Left": `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_iconCarrier"> <title>i</title> <g id="Complete"> <g id="F-Chevron"> <polyline id="Left" points="15.5 5 8.5 12 15.5 19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg>`,
+}
+
 LX.UTILS = {
     getTime() { return new Date().getTime() },
     compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },
@@ -10112,17 +11679,19 @@ LX.UTILS = {
     drawSpline( ctx, pts, t ) {
 
         ctx.save();
-        var cp=[];   // array of control points, as x0,y0,x1,y1,...
-        var n=pts.length;
+        var cp = [];   // array of control points, as x0,y0,x1,y1,...
+        var n = pts.length;
 
         // 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 = 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) {
+        for( var i = 2; i < ( pts.length - 5 ); i += 2 )
+        {
             ctx.beginPath();
-            ctx.moveTo(pts[i],pts[i+1]);
+            ctx.moveTo(pts[i], pts[i+1]);
             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();
@@ -10130,14 +11699,14 @@ LX.UTILS = {
 
         //  For open curves the first and last arcs are simple quadratics.
         ctx.beginPath();
-        ctx.moveTo(pts[0],pts[1]);
-        ctx.quadraticCurveTo(cp[0],cp[1],pts[2],pts[3]);
+        ctx.moveTo( pts[ 0 ], pts[ 1 ] );
+        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.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();