lexgui 0.2.0 → 0.4.1

package/build/lexgui.module.js

@@ -8,23 +8,26 @@
 */
 
 var LX = {
-    version: "0.2.0",
+    version: "0.4.1",
     ready: false,
-    components: [], // specific pre-build components
-    signals: {}, // events and triggers
-    extraCommandbarEntries: [] // user specific entries for command bar
+    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;
 LX.MOUSE_MIDDLE_CLICK   = 1;
 LX.MOUSE_RIGHT_CLICK    = 2;
 
-LX.MOUSE_DOUBLE_CLICK = 2;
-LX.MOUSE_TRIPLE_CLICK = 3;
+LX.MOUSE_DOUBLE_CLICK   = 2;
+LX.MOUSE_TRIPLE_CLICK   = 3;
 
-LX.CURVE_MOVEOUT_CLAMP = 0;
+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; }
@@ -84,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;
@@ -223,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 );
     }
@@ -298,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
@@ -323,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
@@ -367,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;
@@ -397,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
@@ -499,6 +565,23 @@ function makeCodeSnippet( code, size, options = { } )
 
 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
@@ -768,12 +851,12 @@ function _createCommandbar( root )
         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 );
 
@@ -781,9 +864,11 @@ function _createCommandbar( 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 ) ) {
+                if( key.toLowerCase().includes( filter ) )
+                {
                     _addElement( value, () => {
-                        for( let i of instances ) {
+                        for( let i of instances )
+                        {
                             i._changeLanguage( l );
                         }
                     }, "", {} );
@@ -841,7 +926,19 @@ function init( options = { } )
         this.container = document.getElementById( options.container );
     }
 
-    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
+    this.usingStrictViewport = options.strictViewport ?? true;
+    document.documentElement.setAttribute( "data-strictVP", ( this.usingStrictViewport ) ? "true" : "false" );
+
+    if( !this.usingStrictViewport )
+    {
+        document.addEventListener( "scroll", e => {
+            // Get all active menuboxes
+            const mbs = document.body.querySelectorAll( ".lexmenubox" );
+            mbs.forEach( ( mb ) => {
+                mb._updatePosition();
+            } );
+        } );
+    }
 
     this.commandbar = _createCommandbar( this.container );
 
@@ -856,6 +953,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();
@@ -1006,6 +1122,7 @@ LX.popup = popup;
 function prompt( text, title, callback, options = {} )
 {
     options.modal = true;
+    options.className = "prompt";
 
     let value = "";
 
@@ -1020,7 +1137,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.";
@@ -1034,8 +1153,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
@@ -1049,6 +1166,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
@@ -1350,7 +1562,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 );
@@ -1545,7 +1758,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 )";
                     }
@@ -1686,9 +1900,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 );
     }
 
     /**
@@ -1705,7 +1925,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");
@@ -1719,7 +1939,6 @@ class Area {
             this._moveSplit(-Infinity, true, 8);
         }
 
-        // Async resize in some ms...
         doAsync( () => this.propagateEvent('onresize'), 150 );
     }
 
@@ -1735,7 +1954,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);
@@ -1746,7 +1965,6 @@ class Area {
             this._moveSplit(this.offset);
         }
 
-        // Async resize in some ms...
         doAsync( () => this.propagateEvent('onresize'), 150 );
     }
 
@@ -1780,11 +1998,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 );
         }
     }
@@ -1807,42 +2029,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.update();
 
         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;
     }
 
@@ -2098,7 +2341,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();
         }
     }
@@ -2122,7 +2366,7 @@ class Tabs {
     static TAB_SIZE = 28;
     static TAB_ID   = 0;
 
-    constructor( area, options = {} )  {
+    constructor( area, options = {} ) {
 
         this.onclose = options.onclose;
 
@@ -2204,24 +2448,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');
         }
     }
@@ -2358,7 +2606,8 @@ class Tabs {
 
         setTimeout( () => {
 
-            if( options.onCreate ) {
+            if( options.onCreate )
+            {
                 options.onCreate.call(this, this.area.root.getBoundingClientRect());
             }
 
@@ -2420,34 +2669,230 @@ 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.items = [ ];
+        this.buttons = [ ];
+        this.icons = { };
+        this.shorts = { };
+    }
+
+    _resetMenubar() {
+
+        // Menu entries are in the menubar..
+        this.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
+        this.focused = false;
+    }
+
+    _createSubmenu( o, k, c, d ) {
+
+        let menuElement = document.createElement('div');
+        menuElement.className = "lexmenubox";
+        menuElement.tabIndex = "0";
+        c.currentMenu = menuElement;
+        menuElement.parentEntry = c;
+
+        const isSubMenu = c.classList.contains( "lexmenuboxentry" );
+        if( isSubMenu )
+        {
+            menuElement.dataset[ "submenu" ] = true;
+        }
+
+        menuElement._updatePosition = () => {
+
+            // Remove transitions for this change..
+            const transition = menuElement.style.transition;
+            menuElement.style.transition = "none";
+            flushCss( menuElement );
+
+            doAsync( () => {
+                let rect = c.getBoundingClientRect();
+                rect.x += document.scrollingElement.scrollLeft;
+                rect.y += document.scrollingElement.scrollTop;
+                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.x ) + "px";
+                menuElement.style.top = ( isSubMenu ? rect.y : ( ( rect.y + rect.height ) ) - 4 ) + "px";
+
+                menuElement.style.transition = transition;
+            } );
+        };
+
+        menuElement._updatePosition();
+
+        doAsync( () => {
+            menuElement.dataset[ "open" ] = true;
+        }, 10 );
+
+        LX.root.appendChild( menuElement );
+
+        for( var i = 0; i < o[ k ].length; ++i )
+        {
+            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 = "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 = "lexmenuboxentrycontainer";
+                subentry.appendChild(subentrycont);
+                const icon = this.icons[ subkey ];
+                if( isCheckbox )
+                {
+                    subentrycont.innerHTML += "<input type='checkbox' >";
+                }
+                else if( icon )
+                {
+                    subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
+                }
+                else
+                {
+                    subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
+                    subentrycont.classList.add( "noicon" );
+
+                }
+                subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
+            }
+
+            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 )
+                    {
+                        f.call( this, subitem.checked, subkey, subentry );
+                        this._resetMenubar();
+                    }
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                })
+            }
+
+            menuElement.appendChild( subentry );
+
+            // Nothing more for separators
+            if( subkey == '' )
+            {
+                continue;
+            }
 
-        this.icons = {};
-        this.shorts = {};
-        this.buttons = [];
+            menuElement.addEventListener('keydown', e => {
+                e.preventDefault();
+                let short = this.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 )
+                {
+                    subentry.click()
+                }
+            });
+
+            // Add callback
+            subentry.addEventListener("click", e => {
+                if( checkboxInput )
+                {
+                    subitem.checked = !subitem.checked;
+                }
+                const f = subitem[ 'callback' ];
+                if( f )
+                {
+                    f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
+                    this._resetMenubar();
+                }
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            });
+
+            // Add icon if has submenu, else check for shortcut
+            if( !hasSubmenu)
+            {
+                if( this.shorts[ subkey ] )
+                {
+                    let shortEl = document.createElement('div');
+                    shortEl.className = "lexentryshort";
+                    shortEl.innerText = this.shorts[ subkey ];
+                    subentry.appendChild( shortEl );
+                }
+                continue;
+            }
+
+            let submenuIcon = document.createElement('a');
+            submenuIcon.className = "fa-solid fa-angle-right fa-xs";
+            subentry.appendChild( submenuIcon );
+
+            subentry.addEventListener("mouseover", e => {
+                if( subentry.built )
+                {
+                    return;
+                }
+                subentry.built = true;
+                this._createSubmenu( subitem, subkey, subentry, ++d );
+                e.stopPropagation();
+            });
+
+            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
+        menuElement.style.width = menuElement.offsetWidth + "px";
     }
 
     /**
      * @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;
@@ -2455,211 +2900,119 @@ 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 create_submenu = function( o, k, c, d ) {
-
-                let contextmenu = document.createElement('div');
-                contextmenu.className = "lexcontextmenu";
-                contextmenu.tabIndex = "0";
-                const isSubMenu = c.classList.contains('lexcontextmenuentry');
-                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 );
-
-                contextmenu.focus();
-
-                rect = contextmenu.getBoundingClientRect();
-
-                for( var i = 0; i < o[k].length; ++i )
-                {
-                    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.id = subkey;
-                        let subentrycont = document.createElement('div');
-                        subentrycont.innerHTML = "";
-                        subentrycont.classList = "lexcontextmenuentrycontainer";
-                        subentry.appendChild(subentrycont);
-                        const icon = that.icons[ subkey ];
-                        if(isCheckbox){
-                            subentrycont.innerHTML += "<input type='checkbox' >";
-                        }else if(icon) {
-                            subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
-                        }else {
-                            subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
-                            subentrycont.classList.add( "noicon" );
-
-                        }
-                        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;
-                            const f = subitem[ 'callback' ];
-                            if(f) {
-                                f.call( this, subitem.checked, subkey, subentry );
-                                that.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
-                            }
-                            e.stopPropagation();
-                            e.stopImmediatePropagation();
-                        })
-                    }
-
-                    contextmenu.appendChild( subentry );
-
-                    // Nothing more for separators
-                    if(subkey == '') continue;
-
-                    contextmenu.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) {
-                            subentry.click()
-                        }
-                    });
-
-                    // Add callback
-                    subentry.addEventListener("click", e => {
-                        if(checkbox_input) {
-                            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());
-                        }
-                        e.stopPropagation();
-                        e.stopImmediatePropagation();
-                    });
-
-                    // Add icon if has submenu, else check for shortcut
-                    if( !hasSubmenu)
-                    {
-                        if(that.shorts[ subkey ]) {
-                            let shortEl = document.createElement('div');
-                            shortEl.className = "lexentryshort";
-                            shortEl.innerText = that.shorts[ subkey ];
-                            subentry.appendChild( shortEl );
-                        }
-                        continue;
-                    }
-
-                    let submenuIcon = document.createElement('a');
-                    submenuIcon.className = "fa-solid fa-angle-right fa-xs";
-                    subentry.appendChild( submenuIcon );
-
-                    subentry.addEventListener("mouseover", e => {
-                        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());
-                    });
-                }
-
-                // Set final width
-                contextmenu.style.width = contextmenu.offsetWidth + "px";
+            const _showEntry = () => {
+                this._resetMenubar();
+                entry.classList.add( "selected" );
+                entry.built = true;
+                this._createSubmenu( 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;
+                }
+
+                this._resetMenubar();
             });
         }
     }
@@ -2678,20 +3031,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 );
                 }
 
             }
@@ -2718,11 +3075,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" : "");
@@ -2732,15 +3090,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 );
             }
 
@@ -2760,11 +3124,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" : "");
@@ -2773,15 +3138,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 );
             }
 
@@ -2894,90 +3265,323 @@ LX.Menubar = Menubar;
 
 class SideBar {
 
-    constructor( options = {} )  {
+    /**
+     * @param {Object} options
+     * filter: Add search bar to filter entries [false]
+     * 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: Header title
+     * headerSubtitle: Header subtitle
+     * 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: Footer title
+     * footerSubtitle: Footer subtitle
+     * 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 );
+        this.collapsable = options.collapsable ?? true;
+        this._collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
+        this.collapsed = false;
+
+        this.filterString = "";
+
+        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 ] );
+                }
+            });
+
+        }, 10 );
+
+        // 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;
+        }
+
+        // Entry filter
+        if( !( options.filter ?? false ) )
+        {
+            const panel = new Panel();
+            panel.addText(null, "", (value, event) => {
+                this.filterString = value;
+                this.update();
+            }, { placeholder: "Search...", icon: "fa-solid fa-magnifying-glass" });
+            this.filter = panel.root.childNodes[ 0 ];
+            this.root.appendChild( this.filter );
+            contentOffset += 31;
+        }
+
+        // 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
+     * @param {Boolean} force: Force collapsed state
      */
 
-    add( key, options = {} ) {
-
-        if( options.constructor == Function )
-            options = { callback: options };
+    toggleCollapsed( force ) {
 
-        let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
-
-        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 = force ?? !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 );
+        if( !this.resizeObserver )
+        {
+            throw( "Wait until ResizeObserver has been created!" );
+        }
 
-        let button = document.createElement( 'button' );
-        button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
-        entry.appendChild( button );
+        this.resizeObserver.observe( this.root.parentElement );
 
-        let desc = document.createElement( 'span' );
-        desc.className = 'lexsidebarentrydesc';
-        desc.innerHTML = key;
-        entry.appendChild( desc );
+        doAsync( () => {
 
-        button.addEventListener("mouseenter", () => {
-            setTimeout( () => {
-                desc.style.display = "unset";
-            }, 100 );
-        });
+            this.root.classList.toggle( "collapsed", this.collapsed );
+            this.resizeObserver.unobserve( this.root.parentElement );
 
-        button.addEventListener("mouseleave", () => {
-            setTimeout( () => {
-                desc.style.display = "none";
-            }, 100 );
-        });
+        }, 250 );
+    }
 
-        entry.addEventListener("click", () => {
+    /**
+     * @method separator
+     */
+
+    separator() {
 
-            const f = options.callback;
-            if( f ) f.call( this, key, entry );
+        this.currentGroup = null;
 
-            // Manage selected
-            if( !options.bottom )
+        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;
+
+        let idx = 0;
+
+        const _insertEntry = ( token, list ) => {
+
+            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 );
     }
 
     /**
@@ -2994,7 +3598,267 @@ class SideBar {
         if( !entry )
             return;
 
-        entry.domEl.click();
+        entry.dom.click();
+    }
+
+    update() {
+
+        // Reset first
+
+        this.content.innerHTML = "";
+
+        for( let item of this.items )
+        {
+            delete item.dom;
+        }
+
+        for( let item of this.items )
+        {
+            const options = item.options ?? { };
+
+            // Item already created
+            if( item.dom )
+            {
+                continue;
+            }
+
+            let key = Object.keys( item )[ 0 ];
+
+            if( this.filterString.length && !key.toLowerCase().includes( this.filterString.toLowerCase() ) )
+            {
+                continue;
+            }
+
+            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+            let currentGroup = null;
+
+            let entry = document.createElement( 'div' );
+            entry.className = "lexsidebarentry " + ( options.className ?? "" );
+            entry.id = item.name = 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 = entry;
+
+            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( let i = 0; i < item[ key ].length; ++i )
+            {
+                const subitem = item[ key ][ i ];
+                const suboptions = subitem.options ?? {};
+                const subkey = Object.keys( subitem )[ 0 ];
+
+                if( this.filterString.length && !subkey.toLowerCase().includes( this.filterString.toLowerCase() ) )
+                {
+                    continue;
+                }
+
+                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" );
+                });
+            }
+        }
     }
 };
 
@@ -3013,30 +3877,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 TABLE        = 30;
+    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,
@@ -3064,7 +3930,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());
     }
@@ -3103,14 +3971,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";
@@ -3188,11 +4059,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 = {};
@@ -3379,16 +4251,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 )
                 {
@@ -3426,7 +4302,7 @@ class NodeTree {
 
             e.preventDefault();
 
-            if( that.onevent )
+            if( !that.onevent )
             {
                 return;
             }
@@ -3482,7 +4358,8 @@ class NodeTree {
                         return;
                     }
 
-                    if( that.onevent ) {
+                    if( that.onevent )
+                    {
                         const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
                         that.onevent( event );
                     }
@@ -3509,7 +4386,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 );
@@ -3540,22 +4418,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 );
                 }
@@ -3565,18 +4445,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!
             {
@@ -3602,29 +4484,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 );
                 }
@@ -3640,7 +4525,8 @@ class NodeTree {
         let handled = false;
 
         // Show/hide children
-        if(isParent) {
+        if( isParent )
+        {
             item.querySelector('a.hierarchy').addEventListener("click", function(e) {
 
                 handled = true;
@@ -3648,7 +4534,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 );
                 }
@@ -3668,7 +4555,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 );
                 }
@@ -3677,9 +4565,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;
@@ -3692,20 +4581,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 );
         }
@@ -3744,12 +4638,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 )";
@@ -3826,23 +4720,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)];
                     }
                 }
@@ -3880,10 +4782,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;
             }
@@ -3897,7 +4801,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
@@ -3909,7 +4813,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 );
@@ -3948,7 +4852,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!
@@ -3959,7 +4863,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)} );
         }
 
@@ -4076,14 +4981,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
@@ -4093,40 +5002,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;
@@ -4163,15 +5079,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();
             }
 
@@ -4181,9 +5102,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();
@@ -4277,7 +5198,7 @@ class Panel {
 
     clearQueue() {
 
-        if(this._queue && this._queue.length)
+        if( this._queue && this._queue.length)
         {
             this.queuedContainer = this._queue.pop();
             return;
@@ -4437,7 +5358,7 @@ class Panel {
 
             var resolve = ( function( val, event ) {
 
-                if( !widget.valid() )
+                if( !widget.valid() || ( this._lastValueTriggered == val ) )
                 {
                     return;
                 }
@@ -4450,6 +5371,8 @@ class Panel {
                     this._trigger( new IEvent( name, val, event ), callback );
                 }
 
+                this._lastValueTriggered = val;
+
             }).bind( this );
 
             const trigger = options.trigger ?? 'default';
@@ -4503,7 +5426,8 @@ class Panel {
         element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name ) {
+        if( !widget.name )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -4603,7 +5527,8 @@ class Panel {
         element.appendChild(container);
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -4708,11 +5633,12 @@ 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]
-     * selected: Selected item by default by value
+     * @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 = {} ) {
@@ -4734,7 +5660,8 @@ class Panel {
         let buttonsBox = document.createElement('div');
         buttonsBox.className = "lexcombobuttonsbox ";
 
-        let shouldSelect = !( options.noSelection ?? false );
+        const shouldSelect = !( options.noSelection ?? false );
+        const shouldToggle = shouldSelect && ( options.toggle ?? false );
 
         for( let b of values )
         {
@@ -4753,14 +5680,14 @@ class Panel {
                 buttonEl.classList.add( options.buttonClass );
             }
 
-            if( shouldSelect && options.selected == b.value )
+            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>";
 
-            if( options.disabled )
+            if( b.disabled )
             {
                 buttonEl.setAttribute( "disabled", true );
             }
@@ -4768,8 +5695,15 @@ class Panel {
             buttonEl.addEventListener("click", function( e ) {
                 if( shouldSelect )
                 {
-                    container.querySelectorAll('button').forEach( s => s.classList.remove('selected'));
-                    this.classList.add('selected');
+                    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 );
@@ -4779,7 +5713,7 @@ class Panel {
         }
 
         // Remove branch padding and margins
-        if( !widget.name)
+        if( !widget.name )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -4953,7 +5887,8 @@ class Panel {
 
         element.appendChild( container );
 
-        if( !widget.name || options.hideName ) {
+        if( !widget.name || options.hideName )
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -5089,8 +6024,6 @@ class Panel {
 
         const _placeOptions = ( parent ) => {
 
-            console.log("Replacing container");
-
             const overflowContainer = parent.getParentArea();
             const rect = selectedOption.getBoundingClientRect();
             const nestedDialog = parent.parentElement.closest( "dialog" );
@@ -5374,15 +6307,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 ) => {
@@ -5527,7 +6461,8 @@ class Panel {
 
     addLayers( name, value, callback, options = {} ) {
 
-        if(!name) {
+        if( !name )
+        {
             throw("Set Widget Name!");
         }
 
@@ -5569,7 +6504,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;
             }
 
@@ -5622,8 +6558,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);
@@ -5804,7 +6741,8 @@ class Panel {
         widget.updateValues( values );
 
         // Remove branch padding and margins
-        if( !widget.name ) {
+        if( !widget.name )
+        {
             element.className += " noname";
             listContainer.style.width = "100%";
         }
@@ -5891,7 +6829,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();
@@ -5929,15 +6867,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 );
@@ -5957,10 +6896,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
 
@@ -5976,7 +6918,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 );
@@ -6114,6 +7056,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
@@ -6126,7 +7158,8 @@ class Panel {
 
     addColor( name, value, callback, options = {} ) {
 
-        if( !name ) {
+        if( !name )
+        {
             throw( "Set Widget Name!" );
         }
 
@@ -6164,7 +7197,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;
         }
 
@@ -6209,6 +7243,137 @@ class Panel {
         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 != slider.iValue ? "block": "none";
+            }
+
+            if( options.left )
+            {
+                val = ( +slider.max ) - val + ( +slider.min );
+            }
+
+            if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
+        }, { passive: false });
+
+        slider.addEventListener( "mousedown", function( e ) {
+            if( options.onPress )
+            {
+                options.onPress.bind( slider )( e, slider );
+            }
+        }, false );
+
+        slider.addEventListener( "mouseup", function( e ) {
+            if( options.onRelease )
+            {
+                options.onRelease.bind( slider )( e, slider );
+            }
+        }, false );
+
+        // 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 );
+        };
+
+        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;
+    }
+
     /**
      * @method addNumber
      * @param {String} name Widget name
@@ -6241,7 +7406,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;
@@ -6509,7 +7675,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 );
@@ -6521,7 +7688,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" );
             }
@@ -6533,8 +7701,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>";
@@ -6610,7 +7778,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;
                     }
@@ -6668,7 +7837,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" );
                         }
@@ -6794,7 +7964,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;
         };
@@ -6802,7 +7972,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 );
             }
         };
 
@@ -6817,14 +7987,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 )
@@ -6867,7 +8037,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
@@ -7264,7 +8434,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);
@@ -7276,8 +8447,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');
@@ -7337,11 +8508,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 );
+        }
     }
 
     /**
@@ -7666,6 +8841,12 @@ class Panel {
 
                         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 );
@@ -7791,7 +8972,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;
@@ -7847,7 +9028,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 );
             }
         });
@@ -7940,8 +9122,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;
 
@@ -7960,9 +9142,6 @@ class Branch {
                 case Widget.FILE:
                     padding = "10%";
                     break;
-                case Widget.TEXT:
-                    padding = "8px";
-                    break;
             };
 
             value.style.width = "-moz-calc( 100% - " + size + " - " + padding + " )";
@@ -8101,7 +9280,7 @@ class Dialog {
             modal = options.modal ?? false;
 
         var root = document.createElement('dialog');
-        root.className = "lexdialog " + (options.class ?? "");
+        root.className = "lexdialog " + (options.className ?? "");
         root.id = options.id ?? "dialog" + Dialog._last_id++;
         LX.root.appendChild( root );
 
@@ -8259,15 +9438,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 )";
@@ -8284,7 +9463,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";
@@ -8330,6 +9509,9 @@ class PocketDialog extends Dialog {
 
         // Custom
         this.root.classList.add( "pocket" );
+
+        this.root.style.translate = "none";
+        this.root.style.top = "0";
         this.root.style.left = "unset";
 
         if( !options.position )
@@ -8345,6 +9527,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 )
@@ -8427,12 +9614,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();
@@ -8445,13 +9632,13 @@ class ContextMenu {
         {
             const item = {};
             item[ title ] = [];
-            item[ 'className' ] = "cmtitle";
-            item[ 'icon' ] = options.icon;
+            item[ "className" ] = "cmtitle";
+            item[ "icon" ] = options.icon;
             this.items.push( item );
         }
     }
 
-    _adjust_position( div, margin, useAbsolute = false ) {
+    _adjustPosition( div, margin, useAbsolute = false ) {
 
         let rect = div.getBoundingClientRect();
 
@@ -8492,19 +9679,19 @@ class ContextMenu {
         }
     }
 
-    _create_submenu( o, k, c, d ) {
+    _createSubmenu( 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];
-            this._create_entry(subitem, subkey, contextmenu, d);
+            const subitem = o[ k ][ i ];
+            const subkey = Object.keys( subitem )[ 0 ];
+            this._createEntry(subitem, subkey, contextmenu, d);
         }
 
         var rect = c.getBoundingClientRect();
@@ -8512,29 +9699,32 @@ class ContextMenu {
         contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
         // Set final width
-        this._adjust_position( contextmenu, 6, true );
+        this._adjustPosition( contextmenu, 6, true );
     }
 
-    _create_entry( o, k, c, d ) {
+    _createEntry( o, k, c, d ) {
 
         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;
         }
@@ -8547,7 +9737,8 @@ class ContextMenu {
             if(disabled) return;
 
             const f = o[ 'callback' ];
-            if(f) {
+            if( f )
+            {
                 f.call( this, k, entry );
                 this.root.remove();
             }
@@ -8556,7 +9747,7 @@ class ContextMenu {
             return;
 
             if( LX.OPEN_CONTEXTMENU_ENTRY == 'click' )
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
         });
 
         if( !hasSubmenu )
@@ -8572,20 +9763,19 @@ class ContextMenu {
                 if(entry.built)
                     return;
                 entry.built = true;
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
                 e.stopPropagation();
             });
         }
 
         entry.addEventListener("mouseleave", () => {
             d = -1; // Reset depth
-            // delete entry.built;
-            c.querySelectorAll(".lexcontextmenubox").forEach(e => e.remove());
+            c.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
         });
     }
 
     onCreate() {
-        doAsync( () => this._adjust_position( this.root, 6 ) );
+        doAsync( () => this._adjustPosition( this.root, 6 ) );
     }
 
     add( path, options = {} ) {
@@ -8613,22 +9803,25 @@ class ContextMenu {
                 if(key) found = o[ key ];
             } );
 
-            if(found) {
-                insert( tokens[idx++], 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 ] );
             }
         };
 
@@ -8638,13 +9831,15 @@ class ContextMenu {
 
         const setParent = _item => {
 
-            let key = Object.keys(_item)[0];
+            let key = Object.keys( _item )[ 0 ];
             let children = _item[ key ];
 
-            if(!children.length)
+            if( !children.length )
+            {
                 return;
+            }
 
-            if(children.find( c => Object.keys(c)[0] == key ) == null)
+            if( children.find( c => Object.keys(c)[0] == key ) == null )
             {
                 const parent = {};
                 parent[ key ] = [];
@@ -8652,27 +9847,34 @@ class ContextMenu {
                 _item[ key ].unshift( parent );
             }
 
-            for( var child of _item[ key ] ) {
-                let k = Object.keys(child)[0];
-                for( var i = 0; i < child[k].length; ++i )
-                    setParent(child);
+            for( var child of _item[ key ] )
+            {
+                let k = Object.keys( child )[ 0 ];
+                for( var i = 0; i < child[ k ].length; ++i )
+                {
+                    setParent( child );
+                }
             }
         };
 
         for( let item of this.items )
-            setParent(item);
+        {
+            setParent( item );
+        }
 
         // Create elements
 
         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
-            const id = "#" + (item.id ?? pKey);
-            if( !this.root.querySelector(id) )
-                this._create_entry(item, key, this.root, -1);
+            const id = "#" + ( item.id ?? pKey );
+            if( !this.root.querySelector( id ) )
+            {
+                this._createEntry( item, key, this.root, -1 );
+            }
         }
     }
 
@@ -8783,7 +9985,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) );
             }
@@ -8792,7 +9994,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);
@@ -8818,7 +10021,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;
@@ -8847,13 +10050,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 ]);
@@ -8870,7 +10076,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 )
@@ -8882,10 +10089,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);
@@ -8908,7 +10116,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();
@@ -8956,7 +10165,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 ];
 
@@ -9113,7 +10323,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) );
             }
@@ -9122,15 +10332,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();
         }
 
@@ -9150,7 +10361,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;
@@ -9179,17 +10390,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];
@@ -9199,7 +10410,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 )
@@ -9211,10 +10423,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);
@@ -9237,7 +10450,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();
@@ -9285,7 +10499,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 ];
 
@@ -9393,7 +10608,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";
@@ -9747,8 +10963,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();
         }
@@ -9874,8 +11090,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
 
@@ -9902,7 +11118,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)"
@@ -10131,7 +11348,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();
@@ -10183,7 +11401,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 );
@@ -10259,7 +11477,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)
@@ -10307,7 +11525,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]);
         }
 
@@ -10368,7 +11586,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;
@@ -10493,6 +11711,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 },
@@ -10532,17 +11762,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();
@@ -10550,14 +11782,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();