lexgui 0.6.9 → 0.6.11

package/build/lexgui.module.js

@@ -1,4 +1,4 @@
-// This is a generated file. Do not edit.
+// This is a generated file. Do not edit.
 // Lexgui.js @jxarco
 
 /**
@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.6.9",
+    version: "0.6.11",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -311,7 +311,7 @@ function _createCommandbar( root )
 
     const _propagateAdd = ( item, filter, path, skipPropagation ) => {
 
-        if( !item )
+        if( !item || ( item.constructor != Object ) )
         {
             return;
         }
@@ -718,8 +718,6 @@ class Popover {
 
     constructor( trigger, content, options = {} ) {
 
-        console.assert( trigger, "Popover needs a DOM element as trigger!" );
-
         if( Popover.activeElement )
         {
             Popover.activeElement.destroy();
@@ -727,13 +725,20 @@ class Popover {
         }
 
         this._trigger = trigger;
-        trigger.classList.add( "triggered" );
-        trigger.active = this;
+
+        if( trigger )
+        {
+            trigger.classList.add( "triggered" );
+            trigger.active = this;
+        }
 
         this._windowPadding = 4;
         this.side = options.side ?? "bottom";
         this.align = options.align ?? "center";
+        this.sideOffset = options.sideOffset ?? 0;
+        this.alignOffset = options.alignOffset ?? 0;
         this.avoidCollisions = options.avoidCollisions ?? true;
+        this.reference = options.reference;
 
         this.root = document.createElement( "div" );
         this.root.dataset["side"] = this.side;
@@ -768,29 +773,35 @@ class Popover {
         LX.doAsync( () => {
             this._adjustPosition();
 
-            this.root.focus();
+            if( this._trigger )
+            {
+                this.root.focus();
 
-            this._onClick = e => {
-                if( e.target && ( this.root.contains( e.target ) || e.target == this._trigger ) )
-                {
-                    return;
-                }
-                this.destroy();
-            };
+                this._onClick = e => {
+                    if( e.target && ( this.root.contains( e.target ) || e.target == this._trigger ) )
+                    {
+                        return;
+                    }
+                    this.destroy();
+                };
+
+                document.body.addEventListener( "mousedown", this._onClick, true );
+                document.body.addEventListener( "focusin", this._onClick, true );
+            }
 
-            document.body.addEventListener( "mousedown", this._onClick, true );
-            document.body.addEventListener( "focusin", this._onClick, true );
         }, 10 );
     }
 
     destroy() {
 
-        this._trigger.classList.remove( "triggered" );
-
-        delete this._trigger.active;
+        if( this._trigger )
+        {
+            this._trigger.classList.remove( "triggered" );
+            delete this._trigger.active;
 
-        document.body.removeEventListener( "mousedown", this._onClick, true );
-        document.body.removeEventListener( "focusin", this._onClick, true );
+            document.body.removeEventListener( "mousedown", this._onClick, true );
+            document.body.removeEventListener( "focusin", this._onClick, true );
+        }
 
         this.root.remove();
 
@@ -803,26 +814,28 @@ class Popover {
 
         // Place menu using trigger position and user options
         {
-            const rect = this._trigger.getBoundingClientRect();
+            const el = this.reference ?? this._trigger;
+            console.assert( el, "Popover needs a trigger or reference element!" );
+            const rect = el.getBoundingClientRect();
 
             let alignWidth = true;
 
             switch( this.side )
             {
                 case "left":
-                    position[ 0 ] += ( rect.x - this.root.offsetWidth );
+                    position[ 0 ] += ( rect.x - this.root.offsetWidth - this.sideOffset );
                     alignWidth = false;
                     break;
                 case "right":
-                    position[ 0 ] += ( rect.x + rect.width );
+                    position[ 0 ] += ( rect.x + rect.width + this.sideOffset );
                     alignWidth = false;
                     break;
                 case "top":
-                    position[ 1 ] += ( rect.y - this.root.offsetHeight );
+                    position[ 1 ] += ( rect.y - this.root.offsetHeight - this.sideOffset );
                     alignWidth = true;
                     break;
                 case "bottom":
-                    position[ 1 ] += ( rect.y + rect.height );
+                    position[ 1 ] += ( rect.y + rect.height + this.sideOffset );
                     alignWidth = true;
                     break;
             }
@@ -842,6 +855,9 @@ class Popover {
                     else { position[ 1 ] += rect.y - this.root.offsetHeight + rect.height; }
                     break;
             }
+
+            if( alignWidth ) { position[ 0 ] += this.alignOffset; }
+            else { position[ 1 ] += this.alignOffset; }
         }
 
         if( this.avoidCollisions )
@@ -978,6 +994,8 @@ class DropdownMenu {
         this._windowPadding = 4;
         this.side = options.side ?? "bottom";
         this.align = options.align ?? "center";
+        this.sideOffset = options.sideOffset ?? 0;
+        this.alignOffset = options.alignOffset ?? 0;
         this.avoidCollisions = options.avoidCollisions ?? true;
         this.onBlur = options.onBlur;
         this.inPlace = false;
@@ -1220,19 +1238,19 @@ class DropdownMenu {
             switch( this.side )
             {
                 case "left":
-                    position[ 0 ] += ( rect.x - this.root.offsetWidth );
+                    position[ 0 ] += ( rect.x - this.root.offsetWidth - this.sideOffset );
                     alignWidth = false;
                     break;
                 case "right":
-                    position[ 0 ] += ( rect.x + rect.width );
+                    position[ 0 ] += ( rect.x + rect.width + this.sideOffset );
                     alignWidth = false;
                     break;
                 case "top":
-                    position[ 1 ] += ( rect.y - this.root.offsetHeight );
+                    position[ 1 ] += ( rect.y - this.root.offsetHeight - this.sideOffset );
                     alignWidth = true;
                     break;
                 case "bottom":
-                    position[ 1 ] += ( rect.y + rect.height );
+                    position[ 1 ] += ( rect.y + rect.height + this.sideOffset );
                     alignWidth = true;
                     break;
             }
@@ -1252,6 +1270,9 @@ class DropdownMenu {
                     else { position[ 1 ] += rect.y - this.root.offsetHeight + rect.height; }
                     break;
             }
+
+            if( alignWidth ) { position[ 0 ] += this.alignOffset; }
+            else { position[ 1 ] += this.alignOffset; }
         }
 
         if( this.avoidCollisions )
@@ -1530,7 +1551,7 @@ class ColorPicker {
                 copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "none";
 
                 LX.doAsync( () => {
-                    copyButtonWidget.root.swap( true );
+                    copyButtonWidget.swap( true );
                     copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "auto";
                 }, 3000 );
 
@@ -4113,8 +4134,8 @@ Element.prototype.ignore = function( eventName, callbackName ) {
     callbackName = callbackName ?? ( "_on" + eventName );
     const callback = this[ callbackName ];
     this.removeEventListener( eventName, callback );
-};
-
+};
+
 // icons.js @jxarco
 
 const RAW_ICONS = {
@@ -4292,8 +4313,8 @@ LX.LucideIconAlias = {
     "RotateRight": "RotateCw",
     "RotateBack": "RotateCcw",
     "RotateLeft": "RotateCcw",
-};
-
+};
+
 // utils.js @jxarco
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
@@ -6009,10 +6030,180 @@ function drawSpline( ctx, pts, t )
     ctx.restore();
 }
 
-LX.drawSpline = drawSpline;
-
+LX.drawSpline = drawSpline;
+
 // area.js @jxarco
 
+class AreaOverlayButtons {
+
+    /**
+     * @constructor AreaOverlayButtons
+     */
+
+    constructor( area, buttonsArray, options = {} ) {
+
+        this.area = area;
+        this.options = options;
+
+        this.buttons = {};
+
+        this._buildButtons( buttonsArray, options );
+    }
+
+    _buildButtons( buttonsArray, options ) {
+
+        options.className = "lexoverlaybuttons";
+
+        let overlayPanel = this.area.addPanel( options );
+        let overlayGroup = null;
+
+        const container = document.createElement( "div" );
+        container.className = "lexoverlaybuttonscontainer";
+        container.appendChild( overlayPanel.root );
+        this.area.attach( container );
+
+        const float = options.float;
+        let floatClass = "";
+
+        if( float )
+        {
+            for( let i = 0; i < float.length; i++ )
+            {
+                const t = float[ i ];
+                switch( t )
+                {
+                case 'h': break;
+                case 'v': floatClass += " vertical"; break;
+                case 't': break;
+                case 'm': floatClass += " middle"; break;
+                case 'b': floatClass += " bottom"; break;
+                case 'l': break;
+                case 'c': floatClass += " center"; break;
+                case 'r': floatClass += " right"; break;
+                }
+            }
+
+            container.className += ` ${ floatClass }`;
+        }
+
+        const _addButton = ( b, group, last ) => {
+
+            const _options = {
+                width: "auto",
+                selectable: b.selectable,
+                selected: b.selected,
+                icon: b.icon,
+                img: b.img,
+                className: b.class ?? "",
+                title: b.name,
+                overflowContainerX: overlayPanel.root,
+                swap: b.swap
+            };
+
+            if( group )
+            {
+                if( !overlayGroup )
+                {
+                    overlayGroup = document.createElement('div');
+                    overlayGroup.className = "lexoverlaygroup";
+                    overlayPanel.queuedContainer = overlayGroup;
+                }
+
+                _options.parent = overlayGroup;
+            }
+
+            let callback = b.callback;
+            let widget = null;
+
+            if( b.options )
+            {
+                widget = overlayPanel.addSelect( null, b.options, b.value ?? b.name, callback, _options );
+            }
+            else
+            {
+                widget = overlayPanel.addButton( null, b.name, function( value, event ) {
+                    if( b.selectable )
+                    {
+                        if( b.group )
+                        {
+                            let _prev = b.selected;
+                            b.group.forEach( sub => sub.selected = false );
+                            b.selected = !_prev;
+                        }
+                        else
+                        {
+                            b.selected = !b.selected;
+                        }
+                    }
+
+                    if( callback )
+                    {
+                        callback( value, event, widget.root );
+                    }
+
+                }, _options );
+            }
+
+            this.buttons[ b.name ] = widget;
+
+            // ends the group
+            if( overlayGroup && last )
+            {
+                overlayPanel.root.appendChild( overlayGroup );
+                overlayGroup = null;
+                overlayPanel.clearQueue();
+            }
+        };
+
+        const _refreshPanel = function() {
+
+            overlayPanel.clear();
+
+            for( let b of buttonsArray )
+            {
+                if( b === null )
+                {
+                    // Add a separator
+                    const separator = document.createElement("div");
+                    separator.className = "lexoverlayseparator" + floatClass;
+                    overlayPanel.root.appendChild( separator );
+                    continue;
+                }
+
+                if( b.constructor === Array )
+                {
+                    for( let i = 0; i < b.length; ++i )
+                    {
+                        let sub = b[ i ];
+                        sub.group = b;
+                        _addButton( sub, true, i == ( b.length - 1 ) );
+                    }
+                }
+                else
+                {
+                    _addButton( b );
+                }
+            }
+
+            // Add floating info
+            if( float )
+            {
+                var height = 0;
+                overlayPanel.root.childNodes.forEach( c => { height += c.offsetHeight; } );
+
+                if( container.className.includes( "middle" ) )
+                {
+                    container.style.top = "-moz-calc( 50% - " + (height * 0.5) + "px )";
+                    container.style.top = "-webkit-calc( 50% - " + (height * 0.5) + "px )";
+                    container.style.top = "calc( 50% - " + (height * 0.5) + "px )";
+                }
+            }
+        };
+
+        _refreshPanel();
+    }
+}
+
 class Area {
 
     /**
@@ -6758,181 +6949,38 @@ class Area {
         bar.attach( sidebar );
         bar.isSidebar = true;
 
-        if( options.parentClass )
-        {
-            bar.root.className += ` ${ options.parentClass }`;
-        }
-
-        return sidebar;
-    }
-
-    /**
-     * @method addOverlayButtons
-     * @param {Array} buttons Buttons info
-     * @param {Object} options:
-     * float: Where to put the buttons (h: horizontal, v: vertical, t: top, m: middle, b: bottom, l: left, c: center, r: right) [htc]
-     */
-
-    addOverlayButtons( buttons, options = {} ) {
-
-        // Add to last split section if area has been split
-        if( this.sections.length )
-        {
-            this.sections[ 1 ].addOverlayButtons(  buttons, options );
-            return;
-        }
-
-        console.assert( buttons.constructor == Array && buttons.length );
-
-        // Set area to relative to use local position
-        this.root.style.position = "relative";
-
-        options.className = "lexoverlaybuttons";
-
-        let overlayPanel = this.addPanel( options );
-        let overlayGroup = null;
-
-        const container = document.createElement("div");
-        container.className = "lexoverlaybuttonscontainer";
-        container.appendChild( overlayPanel.root );
-        this.attach( container );
-
-        const float = options.float;
-        let floatClass = "";
-
-        if( float )
-        {
-            for( let i = 0; i < float.length; i++ )
-            {
-                const t = float[ i ];
-                switch( t )
-                {
-                case 'h': break;
-                case 'v': floatClass += " vertical"; break;
-                case 't': break;
-                case 'm': floatClass += " middle"; break;
-                case 'b': floatClass += " bottom"; break;
-                case 'l': break;
-                case 'c': floatClass += " center"; break;
-                case 'r': floatClass += " right"; break;
-                }
-            }
-
-            container.className += ` ${ floatClass }`;
-        }
-
-        const _addButton = function( b, group, last ) {
-
-            const _options = {
-                width: "auto",
-                selectable: b.selectable,
-                selected: b.selected,
-                icon: b.icon,
-                img: b.img,
-                className: b.class ?? "",
-                title: b.name,
-                overflowContainerX: overlayPanel.root,
-                swap: b.swap
-            };
-
-            if( group )
-            {
-                if( !overlayGroup )
-                {
-                    overlayGroup = document.createElement('div');
-                    overlayGroup.className = "lexoverlaygroup";
-                    overlayPanel.queuedContainer = overlayGroup;
-                }
-
-                _options.parent = overlayGroup;
-            }
-
-            let callback = b.callback;
-
-            if( b.options )
-            {
-                overlayPanel.addSelect( null, b.options, b.name, callback, _options );
-            }
-            else
-            {
-                const button = overlayPanel.addButton( null, b.name, function( value, event ) {
-                    if( b.selectable )
-                    {
-                        if( b.group )
-                        {
-                            let _prev = b.selected;
-                            b.group.forEach( sub => sub.selected = false );
-                            b.selected = !_prev;
-                        }
-                        else
-                        {
-                            b.selected = !b.selected;
-                        }
-                    }
-
-                    if( callback )
-                    {
-                        callback( value, event, button.root );
-                    }
-
-                }, _options );
-            }
-
-            // ends the group
-            if( overlayGroup && last )
-            {
-                overlayPanel.root.appendChild( overlayGroup );
-                overlayGroup = null;
-                overlayPanel.clearQueue();
-            }
-        };
+        if( options.parentClass )
+        {
+            bar.root.className += ` ${ options.parentClass }`;
+        }
 
-        const _refreshPanel = function() {
+        return sidebar;
+    }
 
-            overlayPanel.clear();
+    /**
+     * @method addOverlayButtons
+     * @param {Array} buttons Buttons info
+     * @param {Object} options:
+     * float: Where to put the buttons (h: horizontal, v: vertical, t: top, m: middle, b: bottom, l: left, c: center, r: right) [htc]
+     */
 
-            for( let b of buttons )
-            {
-                if( b === null )
-                {
-                    // Add a separator
-                    const separator = document.createElement("div");
-                    separator.className = "lexoverlayseparator" + floatClass;
-                    overlayPanel.root.appendChild( separator );
-                    continue;
-                }
+    addOverlayButtons( buttons, options = {} ) {
 
-                if( b.constructor === Array )
-                {
-                    for( let i = 0; i < b.length; ++i )
-                    {
-                        let sub = b[ i ];
-                        sub.group = b;
-                        _addButton(sub, true, i == ( b.length - 1 ));
-                    }
-                }
-                else
-                {
-                    _addButton( b );
-                }
-            }
+        // Add to last split section if area has been split
+        if( this.sections.length )
+        {
+            return this.sections[ 1 ].addOverlayButtons(  buttons, options );
+        }
 
-            // Add floating info
-            if( float )
-            {
-                var height = 0;
-                overlayPanel.root.childNodes.forEach( c => { height += c.offsetHeight; } );
+        console.assert( buttons.constructor == Array && buttons.length );
 
-                if( container.className.includes( "middle" ) )
-                {
-                    container.style.top = "-moz-calc( 50% - " + (height * 0.5) + "px )";
-                    container.style.top = "-webkit-calc( 50% - " + (height * 0.5) + "px )";
-                    container.style.top = "calc( 50% - " + (height * 0.5) + "px )";
-                }
-            }
-        };
+        // Set area to relative to use local position
+        this.root.style.position = "relative";
 
-        _refreshPanel();
+        // Reset if already exists
+        this.overlayButtons = new AreaOverlayButtons( this, buttons, options );
+
+        return this.overlayButtons;
     }
 
     /**
@@ -7077,8 +7125,8 @@ class Area {
         }
     }
 }
-LX.Area = Area;
-
+LX.Area = Area;
+
 // widget.js @jxarco
 
 /**
@@ -8455,14 +8503,15 @@ class Button extends Widget {
         super( Widget.BUTTON, name, null, options );
 
         this.onGetValue = () => {
-            return wValue.querySelector( "input" )?.checked;
+            const swapInput = wValue.querySelector( "input" );
+            return swapInput ? swapInput.checked : value
         };
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
 
             if( ( options.swap ?? false ) )
             {
-                this.root.setState( newValue, skipCallback );
+                this.setState( newValue, skipCallback );
                 return;
             }
 
@@ -8492,6 +8541,30 @@ class Button extends Widget {
             wValue.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
+        // In case of swap, set if a change has to be performed
+        this.setState = function( v, skipCallback ) {
+            const swapInput = wValue.querySelector( "input" );
+
+            if( swapInput )
+            {
+                swapInput.checked = v;
+            }
+            else if( options.selectable )
+            {
+                if( options.parent )
+                {
+                    options.parent.querySelectorAll(".lexbutton.selected").forEach( b => { if( b == wValue ) return; b.classList.remove( "selected" ); } );
+                }
+
+                wValue.classList.toggle( "selected", v );
+            }
+
+            if( !skipCallback )
+            {
+                this._trigger( new LX.IEvent( name, swapInput ? swapInput.checked : ( options.selectable ? v : value ), null ), callback );
+            }
+        };
+
         var wValue = document.createElement( 'button' );
         wValue.title = options.tooltip ? "" : ( options.title ?? "" );
         wValue.className = "lexbutton p-1 " + ( options.buttonClass ?? "" );
@@ -8511,7 +8584,7 @@ class Button extends Widget {
         }
         else if( options.icon )
         {
-            const icon = LX.makeIcon( options.icon );
+            const icon = LX.makeIcon( options.icon, { iconClass: options.iconClass, svgClass: options.svgClass } );
             const iconPosition = options.iconPosition ?? "cover";
 
             // Default
@@ -8582,7 +8655,7 @@ class Button extends Widget {
             const swapIcon = LX.makeIcon( options.swap, { iconClass: "swap-on" } );
             wValue.appendChild( swapIcon );
 
-            this.root.swap = function( skipCallback ) {
+            this.swap = function( skipCallback ) {
                 const swapInput = wValue.querySelector( "input" );
                 swapInput.checked = !swapInput.checked;
                 if( !skipCallback )
@@ -8590,19 +8663,10 @@ class Button extends Widget {
                     trigger.click();
                 }
             };
-
-            // Set if swap has to be performed
-            this.root.setState = function( v, skipCallback ) {
-                const swapInput = wValue.querySelector( "input" );
-                swapInput.checked = v;
-                if( !skipCallback )
-                {
-                    trigger.click();
-                }
-            };
         }
 
         trigger.addEventListener( "click", e => {
+            let isSelected;
             if( options.selectable )
             {
                 if( options.parent )
@@ -8610,7 +8674,7 @@ class Button extends Widget {
                     options.parent.querySelectorAll(".lexbutton.selected").forEach( b => { if( b == wValue ) return; b.classList.remove( "selected" ); } );
                 }
 
-                wValue.classList.toggle('selected');
+                isSelected = wValue.classList.toggle('selected');
             }
 
             if( options.fileInput )
@@ -8620,7 +8684,7 @@ class Button extends Widget {
             else
             {
                 const swapInput = wValue.querySelector( "input" );
-                this._trigger( new LX.IEvent( name, swapInput?.checked ?? value, e ), callback );
+                this._trigger( new LX.IEvent( name, swapInput?.checked ?? ( options.selectable ? isSelected : value ), e ), callback );
             }
         });
 
@@ -8912,16 +8976,17 @@ class Form extends Widget {
 
             if( entryData.constructor != Object )
             {
-                entryData = { };
+                const oldValue = JSON.parse( JSON.stringify( entryData ) );
+                entryData = { value: oldValue };
                 data[ entry ] = entryData;
             }
 
-            entryData.placeholder = entryData.placeholder ?? entry;
+            entryData.placeholder = entryData.placeholder ?? ( entryData.label ?? `Enter ${ entry }` );
             entryData.width = "100%";
 
             if( !( options.skipLabels ?? false ) )
             {
-                const label = new LX.TextInput( null, entry, null, { disabled: true, inputClass: "formlabel nobg" } );
+                const label = new LX.TextInput( null, entryData.label ?? entry, null, { disabled: true, inputClass: "formlabel nobg" } );
                 container.appendChild( label.root );
             }
 
@@ -9026,6 +9091,7 @@ class Select extends Widget {
             }
 
             this.root.dataset["opened"] = ( !!suboptionsFunc );
+            list.style.height = ""; // set auto height by default
 
             if( !skipCallback )
             {
@@ -9047,7 +9113,7 @@ class Select extends Widget {
         wValue.name = name;
         wValue.iValue = value;
 
-        if( options.overflowContainer )
+        if( options.overflowContainer !== undefined )
         {
             options.overflowContainerX = options.overflowContainerY = options.overflowContainer;
         }
@@ -9060,7 +9126,7 @@ class Select extends Widget {
 
             // Manage vertical aspect
             {
-                const overflowContainer = options.overflowContainerY ?? parent.getParentArea();
+                const overflowContainer = options.overflowContainerY !== undefined ? options.overflowContainerY : parent.getParentArea();
                 const listHeight = parent.offsetHeight;
                 let topPosition = rect.y;
 
@@ -9080,18 +9146,25 @@ class Select extends Widget {
                 }
 
                 parent.style.top = ( topPosition + selectRoot.offsetHeight ) + 'px';
+                list.style.height = ""; // set auto height by default
 
-                const showAbove = ( topPosition + listHeight ) > maxY;
-                if( showAbove )
+                const failBelow = ( topPosition + listHeight ) > maxY;
+                const failAbove = ( topPosition - listHeight ) < 0;
+                if( failBelow && !failAbove )
                 {
                     parent.style.top = ( topPosition - listHeight ) + 'px';
                     parent.classList.add( "place-above" );
                 }
+                // If does not fit in any direction, put it below but limit height..
+                else if( failBelow && failAbove )
+                {
+                    list.style.height = `${ maxY - topPosition - 32 }px`; // 32px margin
+                }
             }
 
             // Manage horizontal aspect
             {
-                const overflowContainer = options.overflowContainerX ?? parent.getParentArea();
+                const overflowContainer = options.overflowContainerX !== undefined ? options.overflowContainerX : parent.getParentArea();
                 const listWidth = parent.offsetWidth;
                 let leftPosition = rect.x;
 
@@ -9519,10 +9592,12 @@ class Layers extends Widget {
             container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
-        var container = document.createElement( "div" );
+        const container = document.createElement( "div" );
         container.className = "lexlayers";
         this.root.appendChild( container );
 
+        const maxBits = options.maxBits ?? 16;
+
         this.setLayers = ( val ) =>  {
 
             container.innerHTML = "";
@@ -9531,19 +9606,19 @@ class Layers extends Widget {
             let nbits = binary.length;
 
             // fill zeros
-            for( let i = 0; i < ( 16 - nbits ); ++i )
+            for( let i = 0; i < ( maxBits - nbits ); ++i )
             {
                 binary = '0' + binary;
             }
 
-            for( let bit = 0; bit < 16; ++bit )
+            for( let bit = 0; bit < maxBits; ++bit )
             {
                 let layer = document.createElement( "div" );
                 layer.className = "lexlayer";
 
                 if( val != undefined )
                 {
-                    const valueBit = binary[ 16 - bit - 1 ];
+                    const valueBit = binary[ maxBits - bit - 1 ];
                     if( valueBit != undefined && valueBit == '1' )
                     {
                         layer.classList.add( "selected" );
@@ -9551,7 +9626,7 @@ class Layers extends Widget {
                 }
 
                 layer.innerText = bit + 1;
-                layer.title = "Bit " + bit + ", value " + (1 << bit);
+                layer.title = "Bit " + bit + ", value " + ( 1 << bit );
                 container.appendChild( layer );
 
                 layer.addEventListener( "click", e => {
@@ -10198,9 +10273,7 @@ class ColorInput extends Widget {
             colorModel: options.useRGB ? "RGB" : "Hex",
             useAlpha,
             onChange: ( color ) => {
-                this._fromColorPicker = true;
                 this.set( color.hex );
-                delete this._fromColorPicker;
             }
         } );
 
@@ -10238,6 +10311,7 @@ class ColorInput extends Widget {
             this._skipTextUpdate = true;
             this.set( v );
             delete this._skipTextUpdate;
+            this.picker.fromHexColor( v );
         }, { width: "calc( 100% - 24px )", disabled: options.disabled });
 
         textWidget.root.style.marginLeft = "6px";
@@ -10607,15 +10681,15 @@ class Vector extends Widget {
 
             for( let i = 0; i < vectorInputs.length; ++i )
             {
-                let value = newValue[ i ];
-                value = LX.clamp( value, +vectorInputs[ i ].min, +vectorInputs[ i ].max );
-                value = LX.round( value, options.precision ) ?? 0;
-                vectorInputs[ i ].value = newValue[ i ] = value;
+                let vecValue = newValue[ i ];
+                vecValue = LX.clamp( vecValue, +vectorInputs[ i ].min, +vectorInputs[ i ].max );
+                vecValue = LX.round( vecValue, options.precision ) ?? 0;
+                vectorInputs[ i ].value = value[ i ] = vecValue;
             }
 
             if( !skipCallback )
             {
-                this._trigger( new LX.IEvent( name, newValue, event ), callback );
+                this._trigger( new LX.IEvent( name, value, event ), callback );
             }
         };
 
@@ -11205,12 +11279,18 @@ class Progress extends Widget {
         };
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
+			newValue = LX.clamp( newValue, progress.min, progress.max );
             this.root.querySelector("meter").value = newValue;
             _updateColor();
             if( this.root.querySelector("span") )
             {
                 this.root.querySelector("span").innerText = newValue;
             }
+
+            if( !skipCallback )
+            {
+                this._trigger( new LX.IEvent( name, newValue, event ), options.callback );
+            }
         };
 
         this.onResize = ( rect ) => {
@@ -11294,11 +11374,6 @@ class Progress extends Widget {
                     const rect = progress.getBoundingClientRect();
                     const newValue = LX.round( LX.remapRange( e.offsetX - rect.x, 0, rect.width, progress.min, progress.max ) );
                     this.set( newValue, false, e );
-
-                    if( options.callback )
-                    {
-                        options.callback( newValue, e );
-                    }
                 }
 
                 e.stopPropagation();
@@ -11510,9 +11585,16 @@ class TabSections extends Widget {
             throw( "Param @tabs must be an Array!" );
         }
 
+        if( !tabs.length )
+        {
+            throw( "Tab list cannot be empty!" );
+        }
+
         const vertical = options.vertical ?? true;
         const showNames = !vertical && ( options.showNames ?? false );
 
+        this.tabDOMs = {};
+
         let container = document.createElement( 'div' );
         container.className = "lextabscontainer";
         if( !vertical )
@@ -11525,25 +11607,25 @@ class TabSections extends Widget {
         container.appendChild( tabContainer );
         this.root.appendChild( container );
 
-        for( let i = 0; i < tabs.length; ++i )
+        // Check at least 1 is selected
+        if( tabs.findIndex( e => e.selected === true ) < 0 )
+        {
+            tabs[ 0 ].selected = true;
+        }
+
+        for( let tab of tabs )
         {
-            const tab = tabs[ i ];
             console.assert( tab.name );
-            const isSelected = ( i == 0 );
             let tabEl = document.createElement( "div" );
-            tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + ( isSelected ? "selected" : "" );
+            tabEl.className = "lextab " + ( ( tab.selected ?? false ) ? "selected" : "" );
             tabEl.innerHTML = ( showNames ? tab.name : "" );
             tabEl.appendChild( LX.makeIcon( tab.icon ?? "Hash", { title: tab.name, iconClass: tab.iconClass, svgClass: tab.svgClass } ) );
+            this.tabDOMs[ tab.name ] = tabEl;
 
             let infoContainer = document.createElement( "div" );
             infoContainer.id = tab.name.replace( /\s/g, '' );
             infoContainer.className = "widgets";
-
-            if( !isSelected )
-            {
-                infoContainer.toggleAttribute( "hidden", true );
-            }
-
+            infoContainer.toggleAttribute( "hidden", !( tab.selected ?? false ) );
             container.appendChild( infoContainer );
 
             tabEl.addEventListener( "click", e => {
@@ -11573,6 +11655,20 @@ class TabSections extends Widget {
                 creationPanel.clearQueue();
             }
         }
+
+        this.tabs = tabs;
+    }
+
+    select( name ) {
+
+        const tabEl = this.tabDOMs[ name ];
+
+        if( !tabEl )
+        {
+            return;
+        }
+
+        tabEl.click();
     }
 }
 
@@ -12445,8 +12541,8 @@ class Map2D extends Widget {
     }
 }
 
-LX.Map2D = Map2D;
-
+LX.Map2D = Map2D;
+
 // panel.js @jxarco
 
 /**
@@ -13631,8 +13727,8 @@ class Panel {
     }
 }
 
-LX.Panel = Panel;
-
+LX.Panel = Panel;
+
 // branch.js @jxarco
 
 /**
@@ -13856,8 +13952,8 @@ class Branch {
         }
     }
 }
-LX.Branch = Branch;
-
+LX.Branch = Branch;
+
 // menubar.js @jxarco
 
 /**
@@ -14024,46 +14120,43 @@ class Menubar {
         }
 
         let button = this.buttons[ name ];
+        // If the button already exists, delete it
+        // since only one button of this type can exist
         if( button )
         {
-            button.innerHTML = "";
-            button.appendChild( LX.makeIcon( icon, { svgClass: "xl" } ) );
-            return;
+            delete this.buttons[ name ];
+            LX.deleteElement( button.root );
         }
 
         // Otherwise, create it
-        button = document.createElement('div');
-        const disabled = options.disabled ?? false;
-        button.className = "lexmenubutton main" + (disabled ? " disabled" : "");
-        button.title = name;
-        button.appendChild( LX.makeIcon( icon, { svgClass: "xl" } ) );
+        button = new LX.Button( name, null, callback, {
+            title: name,
+            buttonClass: "lexmenubutton main bg-none",
+            disabled: options.disabled,
+            icon,
+            svgClass: "xl",
+            hideName: true,
+            swap: options.swap
+        } );
 
         if( options.float == "right" )
         {
-            button.right = true;
+            button.root.right = true;
         }
 
         if( this.root.lastChild && this.root.lastChild.right )
         {
-            this.root.lastChild.before( button );
+            this.root.lastChild.before( button.root );
         }
         else if( options.float == "left" )
         {
-            this.root.prepend( button );
+            this.root.prepend( button.root );
         }
         else
         {
-            this.root.appendChild( button );
+            this.root.appendChild( button.root );
         }
 
-        const _b = button.querySelector('a');
-        _b.addEventListener("click", (e) => {
-            if( callback && !disabled )
-            {
-                callback.call( this, _b, e );
-            }
-        });
-
         this.buttons[ name ] = button;
     }
 
@@ -14169,13 +14262,13 @@ class Menubar {
 
             if( title )
             {
-                this.buttons[ title ] = button.root;
+                this.buttons[ title ] = button;
             }
         }
     }
 }
-LX.Menubar = Menubar;
-
+LX.Menubar = Menubar;
+
 // sidebar.js @jxarco
 
 /**
@@ -14870,8 +14963,8 @@ class Sidebar {
         }
     }
 }
-LX.Sidebar = Sidebar;
-
+LX.Sidebar = Sidebar;
+
 // asset_view.js @jxarco
 
 class AssetViewEvent {
@@ -14930,10 +15023,14 @@ class AssetView {
 
         if( options.rootPath )
         {
-            if(options.rootPath.constructor !== String)
-                console.warn("Asset Root Path must be a String (now is " + path.constructor.name + ")");
+            if( options.rootPath.constructor !== String )
+            {
+                console.warn( `Asset Root Path must be a String (now is a ${ path.constructor.name })` );
+            }
             else
+            {
                 this.rootPath = options.rootPath;
+            }
         }
 
         let div = document.createElement('div');
@@ -15302,7 +15399,7 @@ class AssetView {
         this.content.className = (isContentLayout ? "lexassetscontent" : "lexassetscontent list");
         let that = this;
 
-        const add_item = function(item) {
+        const _addItem = function(item) {
 
             const type = item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 );
             const extension = LX.getExtension( item.id );
@@ -15327,20 +15424,27 @@ class AssetView {
                         return;
                     }
 
+                    const dialog = itemEl.closest('dialog');
                     const rect = itemEl.getBoundingClientRect();
                     const targetRect = e.target.getBoundingClientRect();
-                    const parentRect = desc.parentElement.getBoundingClientRect();
 
-                    let localOffsetX = targetRect.x - parentRect.x - ( targetRect.x - rect.x );
-                    let localOffsetY = targetRect.y - parentRect.y - ( targetRect.y - rect.y );
+                    let localOffsetX = rect.x + e.offsetX;
+                    let localOffsetY = rect.y + e.offsetY;
+
+                    if( dialog )
+                    {
+                        const dialogRect = dialog.getBoundingClientRect();
+                        localOffsetX -= dialogRect.x;
+                        localOffsetY -= dialogRect.y;
+                    }
 
                     if( e.target.classList.contains( "lexassettitle" ) )
                     {
                         localOffsetY += ( targetRect.y - rect.y );
                     }
 
-                    desc.style.left = (localOffsetX + e.offsetX + 12) + "px";
-                    desc.style.top = (localOffsetY + e.offsetY) + "px";
+                    desc.style.left = ( localOffsetX ) + "px";
+                    desc.style.top = ( localOffsetY - 36 ) + "px";
                 });
 
                 itemEl.addEventListener("mouseenter", () => {
@@ -15538,7 +15642,7 @@ class AssetView {
                 } });
             }else
             {
-                item.domEl = add_item( item );
+                item.domEl = _addItem( item );
             }
         }
 
@@ -15738,6 +15842,283 @@ class AssetView {
     }
 }
 
-LX.AssetView = AssetView;
+LX.AssetView = AssetView;
+
+// tour.js @jxarco
+
+class Tour {
+
+    /**
+     * @constructor Tour
+     * @param {Array} steps
+     * @param {Object} options
+     * useModal: Use a modal to highlight the tour step [true]
+     * offset: Horizontal and vertical margin offset [0]
+     * horizontalOffset: Horizontal offset [0]
+     * verticalOffset: Vertical offset [0]
+     * radius: Radius for the tour step highlight [8]
+     */
+
+    constructor( steps, options = {} ) {
+
+        this.steps = steps || [];
+        this.currentStep = 0;
+
+        this.useModal = options.useModal ?? true;
+        this.offset = options.offset ?? 8;
+        this.horizontalOffset = options.horizontalOffset;
+        this.verticalOffset = options.verticalOffset;
+        this.radius = options.radius ?? 12;
+
+        this.tourContainer = LX.makeContainer( ["100%", "100%"], "tour-container" );
+        this.tourContainer.style.display = "none";
+        document.body.appendChild( this.tourContainer );
+
+        this.tourMask = LX.makeContainer( ["100%", "100%"], "tour-mask" );
+    }
+
+    /**
+     * @method begin
+     */
+
+    begin() {
+
+        this.currentStep = 0;
+
+        if ( this.useModal )
+        {
+            this.tourMask.style.display = "block";
+            this.tourContainer.appendChild( this.tourMask );
+        }
+
+        this.tourContainer.style.display = "block";
+
+        this._showStep( 0 );
+    }
+
+    /**
+     * @method stop
+     */
+
+    stop() {
+
+        if( this.useModal )
+        {
+            this.tourMask.style.display = "none";
+            this.tourContainer.removeChild( this.tourMask );
+        }
+
+        this._popover?.destroy();
+
+        this.tourContainer.style.display = "none";
+    }
+
+    // Show the current step of the tour
+    _showStep( stepOffset = 1 ) {
+
+        this.currentStep += stepOffset;
+
+        const step = this.steps[ this.currentStep ];
+        if ( !step ) {
+            this.stop();
+            return;
+        }
+
+        const prevStep = this.steps[ this.currentStep - 1 ];
+        const nextStep = this.steps[ this.currentStep + 1 ];
+
+        this._generateMask( step.reference );
+        this._createHighlight( step, prevStep, nextStep );
+    }
+
+    // Generate mask for the specific step reference
+    // using a fullscreen SVG with "rect" elements
+    _generateMask( reference ) {
 
-export { ADD_CUSTOM_WIDGET, Area, AssetView, AssetViewEvent, Branch, LX, Menubar, Panel, Sidebar, Widget };
+        this.tourMask.innerHTML = ""; // Clear previous content
+
+        const svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
+        svg.style.width = "100%";
+        svg.style.height = "100%";
+        this.tourMask.appendChild( svg );
+
+        const clipPath = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" );
+        clipPath.setAttribute( "id", "svgTourClipPath" );
+        svg.appendChild( clipPath );
+
+        function ceilAndShiftRect( p, s ) {
+            const cp = Math.ceil( p );
+            const delta = cp - p;
+            const ds = s - delta;
+            return [  cp, ds ];
+        }
+
+        const refBounding = reference.getBoundingClientRect();
+        const [ boundingX, boundingWidth ] = ceilAndShiftRect( refBounding.x, refBounding.width );
+        const [ boundingY, boundingHeight ] = ceilAndShiftRect( refBounding.y, refBounding.height );
+
+        const vOffset = this.verticalOffset ?? this.offset;
+        const hOffset = this.horizontalOffset ?? this.offset;
+
+        // Left
+        {
+            const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rect.setAttribute( "x", 0 );
+            rect.setAttribute( "y", 0 );
+            rect.setAttribute( "width", boundingX - hOffset );
+            rect.setAttribute( "height", window.innerHeight );
+            rect.setAttribute( "stroke", "none" );
+            clipPath.appendChild( rect );
+        }
+
+        // Top
+        {
+            const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rect.setAttribute( "x", boundingX - hOffset );
+            rect.setAttribute( "y", 0 );
+            rect.setAttribute( "width", boundingWidth + hOffset * 2 );
+            rect.setAttribute( "height", boundingY - vOffset );
+            rect.setAttribute( "stroke", "none" );
+            clipPath.appendChild( rect );
+        }
+
+        // Bottom
+        {
+            const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rect.setAttribute( "x", boundingX - hOffset );
+            rect.setAttribute( "y", boundingY + boundingHeight + vOffset );
+            rect.setAttribute( "width", boundingWidth + hOffset * 2 );
+            rect.setAttribute( "height", window.innerHeight - boundingY - boundingHeight - vOffset );
+            rect.setAttribute( "stroke", "none" );
+            clipPath.appendChild( rect );
+        }
+
+        // Right
+        {
+            const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rect.setAttribute( "x", boundingX + boundingWidth + hOffset );
+            rect.setAttribute( "y", 0 );
+            rect.setAttribute( "width", window.innerWidth - boundingX - boundingWidth );
+            rect.setAttribute( "height", window.innerHeight );
+            rect.setAttribute( "stroke", "none" );
+            clipPath.appendChild( rect );
+        }
+
+        // Reference Highlight
+        const refContainer = LX.makeContainer( ["0", "0"], "tour-ref-mask" );
+        refContainer.style.left = `${ boundingX - hOffset - 1 }px`;
+        refContainer.style.top = `${ boundingY - vOffset - 1 }px`;
+        refContainer.style.width = `${ boundingWidth + hOffset * 2 + 2 }px`;
+        refContainer.style.height = `${ boundingHeight + vOffset * 2 + 2}px`;
+        this.tourContainer.appendChild( refContainer );
+
+        const referenceMask = document.createElementNS( "http://www.w3.org/2000/svg", "mask" );
+        referenceMask.setAttribute( "id", "svgTourReferenceMask" );
+        svg.appendChild( referenceMask );
+
+        // Reference Mask
+        {
+            const rectWhite = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rectWhite.setAttribute( "width", boundingWidth + hOffset * 2 + 2 );
+            rectWhite.setAttribute( "height", boundingHeight + vOffset * 2 + 2);
+            rectWhite.setAttribute( "stroke", "none" );
+            rectWhite.setAttribute( "fill", "white" );
+            referenceMask.appendChild( rectWhite );
+
+            const rectBlack = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
+            rectBlack.setAttribute( "rx", this.radius );
+            rectBlack.setAttribute( "width", boundingWidth + hOffset * 2 + 2);
+            rectBlack.setAttribute( "height", boundingHeight + vOffset * 2 + 2);
+            rectBlack.setAttribute( "stroke", "none" );
+            rectBlack.setAttribute( "fill", "black" );
+            referenceMask.appendChild( rectBlack );
+        }
+    }
+
+    // Create the container with the user hints
+    _createHighlight( step, previousStep, nextStep ) {
+
+        const popoverContainer = LX.makeContainer( ["auto", "auto"], "tour-step-container" );
+
+        {
+            const header = LX.makeContainer( ["100%", "auto"], "flex flex-row", "", popoverContainer );
+            LX.makeContainer( ["70%", "auto"], "p-2 font-medium", step.title, header );
+            const closer = LX.makeContainer( ["30%", "auto"], "flex flex-row p-2 justify-end", "", header );
+            const closeIcon = LX.makeIcon( "X" );
+            closer.appendChild( closeIcon );
+
+            closeIcon.listen( "click", () => {
+                this.stop();
+            } );
+        }
+
+        LX.makeContainer( ["100%", "auto"], "p-2 text-md", step.content, popoverContainer, { maxWidth: "400px" } );
+        const footer = LX.makeContainer( ["100%", "auto"], "flex flex-row text-md", "", popoverContainer );
+
+        {
+            const footerSteps = LX.makeContainer( ["50%", "auto"], "p-2 gap-1 self-center flex flex-row text-md", "", footer );
+            for(  let i = 0; i < this.steps.length; i++ )
+            {
+                const stepIndicator = document.createElement( "span" );
+                stepIndicator.className = "tour-step-indicator";
+                if( i === this.currentStep )
+                {
+                    stepIndicator.classList.add( "active" );
+                }
+                footerSteps.appendChild( stepIndicator );
+            }
+        }
+
+        const footerButtons = LX.makeContainer( ["50%", "auto"], "text-md", "", footer );
+        const footerPanel = new LX.Panel();
+
+        let numButtons = 1;
+
+        if( previousStep )
+        {
+            numButtons++;
+        }
+
+        if( numButtons > 1 )
+        {
+            footerPanel.sameLine( 2, "justify-end" );
+        }
+
+        if( previousStep )
+        {
+            footerPanel.addButton( null, "Previous", () => {
+                this._showStep( -1 );
+            }, { buttonClass: "contrast" } );
+        }
+
+        if( nextStep )
+        {
+            footerPanel.addButton( null, "Next", () => {
+                this._showStep( 1 );
+            }, { buttonClass: "accent" } );
+        }
+        else
+        {
+            footerPanel.addButton( null, "Finish", () => {
+                this.stop();
+            } );
+        }
+
+        footerButtons.appendChild( footerPanel.root );
+
+        const sideOffset = ( step.side === "left" || step.side === "right" ? this.horizontalOffset : this.verticalOffset ) ?? this.offset;
+        const alignOffset = ( step.align === "start" || step.align === "end" ? sideOffset : 0 );
+
+        this._popover?.destroy();
+        this._popover = new LX.Popover( null, [ popoverContainer ], {
+            reference: step.reference,
+            side: step.side,
+            align: step.align,
+            sideOffset,
+            alignOffset: step.align === "start" ? -alignOffset : alignOffset,
+        } );
+    }
+}
+LX.Tour = Tour;
+
+export { ADD_CUSTOM_WIDGET, Area, AssetView, AssetViewEvent, Branch, LX, Menubar, Panel, Sidebar, Tour, Widget };