lexgui 0.1.45 → 0.2.0

package/build/lexgui.module.js

@@ -8,10 +8,11 @@
 */
 
 var LX = {
-    version: "0.1.45",
+    version: "0.2.0",
     ready: false,
     components: [], // specific pre-build components
-    signals: {} // events and triggers
+    signals: {}, // events and triggers
+    extraCommandbarEntries: [] // user specific entries for command bar
 };
 
 LX.MOUSE_LEFT_CLICK     = 0;
@@ -32,34 +33,103 @@ LX.clamp = clamp;
 LX.round = round;
 LX.remapRange = remapRange;
 
-function getSupportedDOMName( string )
+// Timer that works everywhere (from litegraph.js)
+if ( typeof performance != "undefined" )
+{
+    LX.getTime = performance.now.bind( performance );
+}
+else if( typeof Date != "undefined" && Date.now )
+{
+    LX.getTime = Date.now.bind( Date );
+}
+else if ( typeof process != "undefined" )
+{
+    LX.getTime = function() {
+        var t = process.hrtime();
+        return t[ 0 ] * 0.001 + t[ 1 ] * 1e-6;
+    };
+}
+else
+{
+    LX.getTime = function() {
+        return new Date().getTime();
+    };
+}
+
+let ASYNC_ENABLED = true;
+
+/**
+ * @method doAsync
+ * @description Call a function asynchronously
+ * @param {Function} fn Function to call
+ * @param {Number} ms Time to wait until calling the function (in milliseconds)
+ */
+function doAsync( fn, ms ) {
+    if( ASYNC_ENABLED )
+    {
+        setTimeout( fn, ms ?? 0 );
+    }
+    else
+    {
+        fn();
+    }
+}
+
+LX.doAsync = doAsync;
+
+/**
+ * @method getSupportedDOMName
+ * @description Convert a text string to a valid DOM name
+ * @param {String} text Original text
+ */
+function getSupportedDOMName( text )
 {
-    return string.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
+    return text.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', '');
 }
 
 LX.getSupportedDOMName = getSupportedDOMName;
 
-function has( component_name )
+/**
+ * @method has
+ * @description Ask if LexGUI is using a specific component
+ * @param {String} componentName Name of the LexGUI component
+ */
+function has( componentName )
 {
-    return (LX.components.indexOf( component_name ) > -1);
+    return ( LX.components.indexOf( componentName ) > -1 );
 }
 
 LX.has = has;
 
-function getExtension( s )
+/**
+ * @method getExtension
+ * @description Get a extension from a path/url/filename
+ * @param {String} name
+ */
+function getExtension( name )
 {
-    return s.includes('.') ? s.split('.').pop() : null;
+    return name.includes('.') ? name.split('.').pop() : null;
 }
 
 LX.getExtension = getExtension;
 
-function deepCopy( o )
+/**
+ * @method deepCopy
+ * @description Create a deep copy with no references from an object
+ * @param {Object} obj
+ */
+function deepCopy( obj )
 {
-    return JSON.parse(JSON.stringify(o))
+    return JSON.parse( JSON.stringify( obj ) )
 }
 
 LX.deepCopy = deepCopy;
 
+/**
+ * @method setTheme
+ * @description Set dark or light theme
+ * @param {String} colorScheme Name of the scheme
+ */
 function setTheme( colorScheme )
 {
     colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
@@ -69,6 +139,12 @@ function setTheme( colorScheme )
 
 LX.setTheme = setTheme;
 
+/**
+ * @method setThemeColor
+ * @description Sets a new value for one of the main theme variables
+ * @param {String} colorName Name of the theme variable
+ * @param {String} color Color in rgba/hex
+ */
 function setThemeColor( colorName, color )
 {
     var r = document.querySelector( ':root' );
@@ -77,16 +153,22 @@ function setThemeColor( colorName, color )
 
 LX.setThemeColor = setThemeColor;
 
+/**
+ * @method getThemeColor
+ * @description Get the value for one of the main theme variables
+ * @param {String} colorName Name of the theme variable
+ */
 function getThemeColor( colorName )
 {
     const r = getComputedStyle( document.querySelector( ':root' ) );
     const value = r.getPropertyValue( '--' + colorName );
+    const theme = document.documentElement.getAttribute( "data-theme" );
 
-    if( value.includes( "light-dark" ) && window.matchMedia )
+    if( value.includes( "light-dark" ) )
     {
         const currentScheme = r.getPropertyValue( "color-scheme" );
 
-        if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
+        if( currentScheme == "light" )
         {
             return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
         }
@@ -101,7 +183,13 @@ function getThemeColor( colorName )
 
 LX.getThemeColor = getThemeColor;
 
-function getBase64Image( img ) {
+/**
+ * @method getBase64Image
+ * @description Convert an image to a base64 string
+ * @param {Image} img
+ */
+function getBase64Image( img )
+{
     var canvas = document.createElement( 'canvas' );
     canvas.width = img.width;
     canvas.height = img.height;
@@ -112,7 +200,13 @@ function getBase64Image( img ) {
 
 LX.getBase64Image = getBase64Image;
 
-function hexToRgb( hexStr ) {
+/**
+ * @method hexToRgb
+ * @description Convert a hexadecimal string to a valid RGB color array
+ * @param {String} hexStr Hexadecimal color
+ */
+function hexToRgb( hexStr )
+{
     const red = parseInt( hexStr.substring( 1, 3 ), 16 ) / 255;
     const green = parseInt( hexStr.substring( 3, 5 ), 16 ) / 255;
     const blue = parseInt( hexStr.substring( 5, 7 ), 16 ) / 255;
@@ -121,7 +215,13 @@ function hexToRgb( hexStr ) {
 
 LX.hexToRgb = hexToRgb;
 
-function rgbToHex( rgb ) {
+/**
+ * @method rgbToHex
+ * @description Convert a RGB color array to a hexadecimal string
+ * @param {Array} rgb Array containing R, G, B, A*
+ */
+function rgbToHex( rgb )
+{
     let hex = "#";
     for( let c of rgb ) {
         c = Math.floor( c * 255 );
@@ -132,7 +232,14 @@ function rgbToHex( rgb ) {
 
 LX.rgbToHex = rgbToHex;
 
-function measureRealWidth( value, paddingPlusMargin = 8 ) {
+/**
+ * @method measureRealWidth
+ * @description Measure the pixel width of a text
+ * @param {Object} value Text to measure
+ * @param {Number} paddingPlusMargin Padding offset
+ */
+function measureRealWidth( value, paddingPlusMargin = 8 )
+{
     var i = document.createElement( "span" );
     i.className = "lexinputmeasure";
     i.innerHTML = value;
@@ -144,7 +251,12 @@ function measureRealWidth( value, paddingPlusMargin = 8 ) {
 
 LX.measureRealWidth = measureRealWidth;
 
-function simple_guidGenerator() {
+/**
+ * @method simple_guidGenerator
+ * @description Get a random unique id
+ */
+function simple_guidGenerator()
+{
     var S4 = function() {
         return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
     };
@@ -153,7 +265,21 @@ function simple_guidGenerator() {
 
 LX.guidGenerator = simple_guidGenerator;
 
-function buildTextPattern( options = {} ) {
+/**
+ * @method buildTextPattern
+ * @description Create a validation pattern using specific options
+ * @param {Object} options
+ * lowercase (Boolean): Text must contain a lowercase char
+ * uppercase (Boolean): Text must contain an uppercase char
+ * digit (Boolean): Text must contain a digit
+ * specialChar (Boolean): Text must contain a special char
+ * noSpaces (Boolean): Do not allow spaces in text
+ * minLength (Number): Text minimum length
+ * maxLength (Number): Text maximum length
+ * asRegExp (Boolean): Return pattern as Regular Expression instance
+ */
+function buildTextPattern( options = {} )
+{
     let patterns = [];
     if ( options.lowercase ) patterns.push("(?=.*[a-z])");
     if ( options.uppercase ) patterns.push("(?=.*[A-Z])");
@@ -170,67 +296,9 @@ function buildTextPattern( options = {} ) {
 
 LX.buildTextPattern = buildTextPattern;
 
-// Timer that works everywhere (from litegraph.js)
-if (typeof performance != "undefined") {
-    LX.getTime = performance.now.bind(performance);
-} else if (typeof Date != "undefined" && Date.now) {
-    LX.getTime = Date.now.bind(Date);
-} else if (typeof process != "undefined") {
-    LX.getTime = function() {
-        var t = process.hrtime();
-        return t[0] * 0.001 + t[1] * 1e-6;
-    };
-} else {
-    LX.getTime = function getTime() {
-        return new Date().getTime();
-    };
-}
-
-let ASYNC_ENABLED = true;
-
-function doAsync( fn, ms ) {
-    if( ASYNC_ENABLED )
-    {
-        setTimeout( fn, ms ?? 0 );
-    }
-    else
-    {
-        fn();
-    }
-}
-
-// Math classes
-
-class vec2 {
-
-    constructor( x, y ) {
-        this.x = x ?? 0;
-        this.y = y ?? ( x ?? 0 );
-    }
-
-    get xy() { return [ this.x, this.y ]; }
-    get yx() { return [ this.y, this.x ]; }
-
-    set ( x, y ) { this.x = x; this.y = y; }
-    add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
-    sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
-    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
-    div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
-    abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
-    dot ( v ) { return this.x * v.x + this.y * v.y; }
-    len2 () { return this.dot( this ) }
-    len () { return Math.sqrt( this.len2() ); }
-    nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
-    dst ( v ) { return v.sub( this ).len(); }
-    clp ( min, max, v0 = new vec2() ) { v0.set( clamp( this.x, min, max ), clamp( this.y, min, max ) ); return v0; }
-};
-
-LX.vec2 = vec2;
-
-// Other utils
-
 /**
  * @method makeDraggable
+ * @description Allow an element to be dragged
  * @param {Element} domEl
  * @param {Object} options
  * autoAdjust (Bool): Sets in a correct position at the beggining
@@ -238,8 +306,8 @@ LX.vec2 = vec2;
  * onMove (Function): Called each move event
  * onDragStart (Function): Called when drag event starts
  */
-function makeDraggable( domEl, options = { } ) {
-
+function makeDraggable( domEl, options = { } )
+{
     let offsetX = 0;
     let offsetY = 0;
     let currentTarget = null;
@@ -329,24 +397,166 @@ function makeDraggable( domEl, options = { } ) {
 
 LX.makeDraggable = makeDraggable;
 
-function create_global_searchbar( root ) {
+/**
+ * @method makeCodeSnippet
+ * @description Create a code snippet in a specific language
+ * @param {String} code
+ * @param {Array} size
+ * @param {Object} options
+ * language (String):
+ * windowMode (Boolean):
+ * lineNumbers (Boolean):
+ * firstLine (Number): TODO
+ * linesAdded (Array):
+ * linesRemoved (Array):
+ * tabName (String):
+ */
+function makeCodeSnippet( code, size, options = { } )
+{
+    if( !LX.has('CodeEditor') )
+    {
+        console.error( "Import the CodeEditor component to create snippets!" );
+        return;
+    }
+
+    const snippet = document.createElement( "div" );
+    snippet.className = "lexcodesnippet";
+    snippet.style.width = size ? size[ 0 ] : "auto";
+    snippet.style.height = size ? size[ 1 ] : "auto";
+    const area = new Area( { noAppend: true } );
+    let editor = new LX.CodeEditor( area, {
+        skipInfo: true,
+        disableEdition: true,
+        allowAddScripts: false,
+        name: options.tabName,
+        // showTab: options.showTab ?? true
+    } );
+    editor.setText( code, options.language ?? "Plain Text" );
+
+    if( options.linesAdded )
+    {
+        const code = editor.root.querySelector( ".code" );
+        for( let l of options.linesAdded )
+        {
+            if( l.constructor == Number )
+            {
+                code.childNodes[ l - 1 ].classList.add( "added" );
+            }
+            else if( l.constructor == Array ) // It's a range
+            {
+                for( let i = ( l[0] - 1 ); i <= ( l[1] - 1 ); i++ )
+                {
+                    code.childNodes[ i ].classList.add( "added" );
+                }
+            }
+        }
+    }
+
+    if( options.linesRemoved )
+    {
+        const code = editor.root.querySelector( ".code" );
+        for( let l of options.linesRemoved )
+        {
+            if( l.constructor == Number )
+            {
+                code.childNodes[ l - 1 ].classList.add( "removed" );
+            }
+            else if( l.constructor == Array ) // It's a range
+            {
+                for( let i = ( l[0] - 1 ); i <= ( l[1] - 1 ); i++ )
+                {
+                    code.childNodes[ i ].classList.add( "removed" );
+                }
+            }
+        }
+    }
+
+    if( options.windowMode )
+    {
+        const windowActionButtons = document.createElement( "div" );
+        windowActionButtons.className = "lexwindowbuttons";
+        const aButton = document.createElement( "span" );
+        aButton.style.background = "#ee4f50";
+        const bButton = document.createElement( "span" );
+        bButton.style.background = "#f5b720";
+        const cButton = document.createElement( "span" );
+        cButton.style.background = "#53ca29";
+        windowActionButtons.appendChild( aButton );
+        windowActionButtons.appendChild( bButton );
+        windowActionButtons.appendChild( cButton );
+        const tabs = editor.root.querySelector( ".lexareatabs" );
+        tabs.prepend( windowActionButtons );
+    }
+
+    if( !( options.lineNumbers ?? true ) )
+    {
+        editor.root.classList.add( "no-gutter" );
+    }
+
+    snippet.appendChild( area.root );
+    return snippet;
+}
+
+LX.makeCodeSnippet = makeCodeSnippet;
+
+/**
+ * @method registerCommandbarEntry
+ * @description Adds an extra command bar entry
+ * @param {String} name
+ * @param {Function} callback
+ */
+function registerCommandbarEntry( name, callback )
+{
+    LX.extraCommandbarEntries.push( { name, callback } );
+}
+
+LX.registerCommandbarEntry = registerCommandbarEntry;
+
+// Math classes
+
+class vec2 {
+
+    constructor( x, y ) {
+        this.x = x ?? 0;
+        this.y = y ?? ( x ?? 0 );
+    }
 
-    let globalSearch = document.createElement("div");
-    globalSearch.id = "global-search";
-    globalSearch.className = "hidden";
-    globalSearch.tabIndex = -1;
-    root.appendChild( globalSearch );
+    get xy() { return [ this.x, this.y ]; }
+    get yx() { return [ this.y, this.x ]; }
+
+    set ( x, y ) { this.x = x; this.y = y; }
+    add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
+    sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
+    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
+    div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
+    abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
+    dot ( v ) { return this.x * v.x + this.y * v.y; }
+    len2 () { return this.dot( this ) }
+    len () { return Math.sqrt( this.len2() ); }
+    nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
+    dst ( v ) { return v.sub( this ).len(); }
+    clp ( min, max, v0 = new vec2() ) { v0.set( clamp( this.x, min, max ), clamp( this.y, min, max ) ); return v0; }
+};
+
+LX.vec2 = vec2;
+
+function _createCommandbar( root )
+{
+    let commandbar = document.createElement( "dialog" );
+    commandbar.className = "commandbar";
+    commandbar.tabIndex = -1;
+    root.appendChild( commandbar );
 
     let allItems = [];
     let hoverElId = null;
 
-    globalSearch.addEventListener('keydown', function( e ) {
+    commandbar.addEventListener('keydown', function( e ) {
         e.stopPropagation();
         e.stopImmediatePropagation();
         hoverElId = hoverElId ?? -1;
         if( e.key == 'Escape' )
         {
-            this.classList.add("hidden");
+            this.close();
             _resetBar( true );
         }
         else if( e.key == 'Enter' )
@@ -355,7 +565,7 @@ function create_global_searchbar( root ) {
             if( el )
             {
                 const isCheckbox = (el.item.type && el.item.type === 'checkbox');
-                this.classList.toggle('hidden');
+                this.close();
                 if( isCheckbox )
                 {
                     el.item.checked = !el.item.checked;
@@ -370,7 +580,7 @@ function create_global_searchbar( root ) {
         else if ( e.key == 'ArrowDown' && hoverElId < (allItems.length - 1) )
         {
             hoverElId++;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
 
             let dt = allItems[ hoverElId ].offsetHeight * (hoverElId + 1) - itemContainer.offsetHeight;
@@ -385,19 +595,19 @@ function create_global_searchbar( root ) {
         } else if ( e.key == 'ArrowUp' && hoverElId > 0 )
         {
             hoverElId--;
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             allItems[ hoverElId ].classList.add('hovered');
         }
     });
 
-    globalSearch.addEventListener('focusout', function( e ) {
+    commandbar.addEventListener('focusout', function( e ) {
         if( e.relatedTarget == e.currentTarget )
         {
             return;
         }
         e.stopPropagation();
         e.stopImmediatePropagation();
-        this.classList.add( "hidden" );
+        this.close();
         _resetBar( true );
     });
 
@@ -406,9 +616,7 @@ function create_global_searchbar( root ) {
         {
             e.stopImmediatePropagation();
             e.stopPropagation();
-            globalSearch.classList.toggle('hidden');
-            globalSearch.querySelector('input').focus();
-            _addElements( undefined );
+            LX.setCommandbarState( true );
         }
         else
         {
@@ -486,22 +694,22 @@ function create_global_searchbar( root ) {
         const isCheckbox = (i && i.type && i.type === 'checkbox');
         if( isCheckbox )
         {
-            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + p + t + "</span>"
+            searchItem.innerHTML = "<a class='fa fa-check'></a><span>" + ( p + t ) + "</span>"
         }
         else
         {
-            searchItem.innerHTML = p + t;
+            searchItem.innerHTML = ( p + t );
         }
         searchItem.entry_name = t;
         searchItem.callback = c;
         searchItem.item = i;
         searchItem.addEventListener('click', function(e) {
-            this.callback.call(window, this.entry_name);
-            globalSearch.classList.toggle('hidden');
+            this.callback.call( window, this.entry_name );
+            LX.setCommandbarState( false );
             _resetBar( true );
         });
         searchItem.addEventListener('mouseenter', function(e) {
-            globalSearch.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
+            commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             this.classList.add('hovered');
             hoverElId = allItems.indexOf( this );
         });
@@ -535,7 +743,7 @@ function create_global_searchbar( root ) {
             _propagateAdd( c, filter, path );
     };
 
-    const _addElements = filter => {
+    commandbar._addElements = filter => {
 
         _resetBar();
 
@@ -547,6 +755,16 @@ function create_global_searchbar( root ) {
             }
         }
 
+        for( let entry of LX.extraCommandbarEntries )
+        {
+            const name = entry.name;
+            if( !name.toLowerCase().includes( filter ) )
+            {
+                continue;
+            }
+            _addElement( name, entry.callback, "", {} );
+        }
+
         if( LX.has('CodeEditor') )
         {
             const instances = LX.CodeEditor.getInstances();
@@ -564,7 +782,7 @@ function create_global_searchbar( root ) {
 
                 value += key + " <span class='lang-ext'>(" + languages[ l ].ext + ")</span>";
                 if( key.toLowerCase().includes( filter ) ) {
-                    add_element( value, () => {
+                    _addElement( value, () => {
                         for( let i of instances ) {
                             i._changeLanguage( l );
                         }
@@ -575,14 +793,14 @@ function create_global_searchbar( root ) {
     }
 
     input.addEventListener('input', function(e) {
-        _addElements( this.value.toLowerCase() );
+        commandbar._addElements( this.value.toLowerCase() );
     });
 
-    globalSearch.appendChild( header );
-    globalSearch.appendChild( tabArea.root );
-    globalSearch.appendChild( itemContainer );
+    commandbar.appendChild( header );
+    commandbar.appendChild( tabArea.root );
+    commandbar.appendChild( itemContainer );
 
-    return globalSearch;
+    return commandbar;
 }
 
 /**
@@ -592,6 +810,7 @@ function create_global_searchbar( root ) {
  * id: Id of the main area
  * skipRoot: Skip adding LX root container
  * skipDefaultArea: Skip creation of main area
+ * strictViewport: Use only window area
  */
 
 function init( options = { } )
@@ -614,16 +833,17 @@ function init( options = { } )
     this.root = root;
     this.container = document.body;
 
-    // this.modal.toggleAttribute( 'hidden', true );
-    // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
-
     this.modal.classList.add( 'hiddenOpacity' );
     this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
     if( options.container )
+    {
         this.container = document.getElementById( options.container );
+    }
+
+    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
 
-    this.globalSearch = create_global_searchbar( this.container );
+    this.commandbar = _createCommandbar( this.container );
 
     this.container.appendChild( modal );
 
@@ -667,16 +887,48 @@ function init( options = { } )
         this.main_area = new Area( { id: options.id ?? 'mainarea' } );
     }
 
-    window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
-        const newColorScheme = event.matches ? "dark" : "light";
-        LX.emit( "@on_new_color_scheme", newColorScheme );
-    });
+    if( ( options.autoTheme ?? true ) && window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+    {
+        LX.setTheme( "light" );
+
+        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
+            LX.setTheme( event.matches ? "dark" : "light" );
+        });
+    }
 
     return this.main_area;
 }
 
 LX.init = init;
 
+/**
+ * @method setCommandbarState
+ * @param {Boolean} value
+ * @param {Boolean} resetEntries
+ */
+
+function setCommandbarState( value, resetEntries = true )
+{
+    const cb = this.commandbar;
+
+    if( value )
+    {
+        cb.show();
+        cb.querySelector('input').focus();
+
+        if( resetEntries )
+        {
+            cb._addElements( undefined );
+        }
+    }
+    else
+    {
+        cb.close();
+    }
+}
+
+LX.setCommandbarState = setCommandbarState;
+
 /**
  * @method message
  * @param {String} text
@@ -709,9 +961,9 @@ LX.message = message;
  * @param {String} title (Optional)
  * @param {*} options
  * id: Id of the message dialog
- * time: (Number) Delay time before close automatically (ms). Defalut: [3000]
- * position: (Array) [x,y] Dialog position in screen. Default: [screen centered]
- * size: (Array) [width, height]
+ * timeout (Number): Delay time before it closes automatically (ms). Default: [3000]
+ * position (Array): [x,y] Dialog position in screen. Default: [screen centered]
+ * size (Array): [width, height]
  */
 
 function popup( text, title, options = {} )
@@ -721,7 +973,7 @@ function popup( text, title, options = {} )
         throw("No message to show");
     }
 
-    options.size = options.size ?? [ "auto", "auto" ];
+    options.size = options.size ?? [ "max-content", "auto" ];
     options.class = "lexpopup";
 
     const time = options.timeout || 3000;
@@ -729,13 +981,9 @@ function popup( text, title, options = {} )
         p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
     }, options );
 
-    dialog.root.classList.add( 'fadein' );
-    setTimeout(() => {
-        dialog.root.classList.remove( 'fadein' );
-        dialog.root.classList.add( 'fadeout' );
-    }, time - 1000 );
-
-    setTimeout( dialog.close, time );
+    setTimeout( () => {
+        dialog.close();
+    }, Math.max( time, 150 ) );
 
     return dialog;
 }
@@ -820,6 +1068,25 @@ function badge( text, className, options = {} )
 
 LX.badge = badge;
 
+/**
+ * @method makeContainer
+ * @param {Array} size
+ * @param {String} className
+ * @param {Object} overrideStyle
+ */
+
+function makeContainer( size, className, overrideStyle = {} )
+{
+    const container = document.createElement( "div" );
+    container.className = "lexcontainer " + ( className ?? "" );
+    container.style.width = size && size[ 0 ] ? size[ 0 ] : "100%";
+    container.style.height = size && size[ 1 ] ? size[ 1 ] : "100%";
+    Object.assign( container.style, overrideStyle );
+    return container;
+}
+
+LX.makeContainer = makeContainer;
+
 /*
 *   Events and Signals
 */
@@ -1302,8 +1569,8 @@ class Area {
                 }
 
                 area1.root.style.width = "100%";
-                area1.root.style.height = "calc( " + height1 + " - " + data + " )";
-                area2.root.style.height = "calc( " + height2 + " - " + data + " )";
+                area1.root.style.height = ( height1 == "auto" ? height1 : "calc( " + height1 + " - " + data + " )");
+                area2.root.style.height = ( height2 == "auto" ? height2 : "calc( " + height2 + " - " + data + " )");
             }
         }
 
@@ -1903,7 +2170,7 @@ class Tabs {
 
         area.root.classList.add( "lexareatabscontainer" );
 
-        area.split({type: 'vertical', sizes: "auto", resize: false, top: 6});
+        area.split({type: 'vertical', sizes: options.sizes ?? "auto", resize: false, top: 6});
         area.sections[0].attach( container );
 
         this.area = area.sections[1];
@@ -2590,6 +2857,17 @@ class Menubar {
                 const swapIcon = document.createElement( "a" );
                 swapIcon.className = data.swap + " swap-on lexicon";
                 button.appendChild( swapIcon );
+
+                button.swap = function() {
+                    const swapInput = this.querySelector( "input" );
+                    swapInput.checked = !swapInput.checked;
+                };
+
+                // Set if swap has to be performed
+                button.setState = function( v ) {
+                    const swapInput = this.querySelector( "input" );
+                    swapInput.checked = v;
+                };
             }
 
             trigger.addEventListener("click", e => {
@@ -2758,6 +3036,7 @@ class Widget {
     static FORM         = 27;
     static DIAL         = 28;
     static COUNTER      = 29;
+    static TABLE        = 30;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2848,6 +3127,7 @@ class Widget {
             case Widget.FORM: return "Form";
             case Widget.DIAL: return "Dial";
             case Widget.COUNTER: return "Counter";
+            case Widget.TABLE: return "Table";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -3870,8 +4150,8 @@ class Panel {
 
         let searchIcon = document.createElement('a');
         searchIcon.className = "fa-solid fa-magnifying-glass";
-        element.appendChild(input);
         element.appendChild(searchIcon);
+        element.appendChild(input);
 
         input.addEventListener("input", (e) => {
             if(options.callback)
@@ -3923,26 +4203,28 @@ class Panel {
         }
     }
 
-    _search_options(options, value) {
-        // push to right container
+    _filterOptions( options, value ) {
+
+        // Push to right container
         const emptyFilter = !value.length;
         let filteredOptions = [];
-        // add widgets
-        for( let i = 0; i < options.length; i++) {
-            let o = options[i];
-            if(!emptyFilter)
+
+        // Add widgets
+        for( let i = 0; i < options.length; i++ )
+        {
+            let o = options[ i ];
+            if( !emptyFilter )
             {
-                let toCompare = (typeof o == 'string') ? o : o.value;
-                ;
+                let toCompare = ( typeof o == 'string' ) ? o : o.value;
                 const filterWord = value.toLowerCase();
                 const name = toCompare.toLowerCase();
-                if(!name.includes(filterWord)) continue;
+                if( !name.includes( filterWord ) ) continue;
             }
-            // insert filtered widget
-            filteredOptions.push(o);
+
+            filteredOptions.push( o );
         }
 
-        this.refresh(filteredOptions);
+        this.refresh( filteredOptions );
     }
 
     _trigger( event, callback ) {
@@ -4429,66 +4711,82 @@ class Panel {
      * @param {Array} values Each of the {value, callback} items
      * @param {*} options:
      * float: Justify content (left, center, right) [center]
+     * selected: Selected item by default by value
      * noSelection: Buttons can be clicked, but they are not selectable
      */
 
     addComboButtons( name, values, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.BUTTON, options);
+        let widget = this.create_widget( name, Widget.BUTTON, options );
         let element = widget.domEl;
 
         let that = this;
         let container = document.createElement('div');
         container.className = "lexcombobuttons ";
-        if( options.float ) container.className += options.float;
+
+        if( options.float )
+        {
+            container.className += options.float;
+        }
+
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        let should_select = !(options.noSelection ?? false);
+        let buttonsBox = document.createElement('div');
+        buttonsBox.className = "lexcombobuttonsbox ";
+
+        let shouldSelect = !( options.noSelection ?? false );
+
         for( let b of values )
         {
-            if( !b.value ) throw("Set 'value' for each button!");
+            if( !b.value )
+            {
+                throw( "Set 'value' for each button!" );
+            }
 
             let buttonEl = document.createElement('button');
             buttonEl.className = "lexbutton combo";
             buttonEl.title = b.icon ? b.value : "";
-            if(options.buttonClass)
-                buttonEl.classList.add(options.buttonClass);
+            buttonEl.id = b.id ?? "";
 
-            if(options.selected == b.value)
-                buttonEl.classList.add("selected");
+            if( options.buttonClass )
+            {
+                buttonEl.classList.add( options.buttonClass );
+            }
 
-            if(b.id)
-                buttonEl.id = b.id;
+            if( shouldSelect && options.selected == b.value )
+            {
+                buttonEl.classList.add("selected");
+            }
 
-            buttonEl.innerHTML = (b.icon ? "<a class='" + b.icon +"'></a>" : "") + "<span>" + (b.icon ? "" : b.value) + "</span>";
+            buttonEl.innerHTML = ( b.icon ? "<a class='" + b.icon +"'></a>" : "" ) + "<span>" + ( b.icon ? "" : b.value ) + "</span>";
 
-            if(options.disabled)
-                buttonEl.setAttribute("disabled", true);
+            if( options.disabled )
+            {
+                buttonEl.setAttribute( "disabled", true );
+            }
 
-            buttonEl.addEventListener("click", function(e) {
-                if(should_select) {
+            buttonEl.addEventListener("click", function( e ) {
+                if( shouldSelect )
+                {
                     container.querySelectorAll('button').forEach( s => s.classList.remove('selected'));
                     this.classList.add('selected');
                 }
-                that._trigger( new IEvent(name, b.value, e), b.callback );
-            });
 
-            container.appendChild(buttonEl);
+                that._trigger( new IEvent( name, b.value, e ), b.callback );
+            });
 
-            // Remove branch padding and margins
-            if(widget.name === undefined) {
-                buttonEl.className += " noname";
-                buttonEl.style.width =  "100%";
-            }
+            buttonsBox.appendChild( buttonEl );
         }
 
         // Remove branch padding and margins
-        if(widget.name !== undefined) {
+        if( !widget.name)
+        {
             element.className += " noname";
             container.style.width = "100%";
         }
 
-        element.appendChild(container);
+        container.appendChild( buttonsBox );
+        element.appendChild( container );
 
         return widget;
     }
@@ -4740,6 +5038,8 @@ class Panel {
      * filter: Add a search bar to the widget [false]
      * disabled: Make the widget disabled [false]
      * skipReset: Don't add the reset value button when value changes
+     * placeholder: Placeholder for the filter input
+     * emptyMsg: Custom message to show when no filtered results
      */
 
     addDropdown( name, values, value, callback, options = {} ) {
@@ -4785,17 +5085,74 @@ class Panel {
         let buttonName = value;
         buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
-        this.queue(container);
+        this.queue( container );
+
+        const _placeOptions = ( parent ) => {
 
-        const _getMaxListWidth = () => {
+            console.log("Replacing container");
 
-            let maxWidth = 0;
-            for( let i of values )
+            const overflowContainer = parent.getParentArea();
+            const rect = selectedOption.getBoundingClientRect();
+            const nestedDialog = parent.parentElement.closest( "dialog" );
+
+            // Manage vertical aspect
+            {
+                const listHeight = parent.offsetHeight;
+                let topPosition = rect.y;
+
+                let maxY = window.innerHeight;
+
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxY = parentRect.y + parentRect.height;
+                }
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    topPosition -= rect.y;
+                }
+
+                parent.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
+
+                const showAbove = ( topPosition + listHeight ) > maxY;
+                if( showAbove )
+                {
+                    parent.style.top = ( topPosition - listHeight ) + 'px';
+                    parent.classList.add( "place-above" );
+                }
+            }
+
+            // Manage horizontal aspect
             {
-                const iString = String( i );
-                maxWidth = Math.max( iString.length, maxWidth );
+                const listWidth = parent.offsetWidth;
+                let leftPosition = rect.x;
+
+                parent.style.minWidth = ( rect.width ) + 'px';
+
+                if( nestedDialog )
+                {
+                    const rect = nestedDialog.getBoundingClientRect();
+                    leftPosition -= rect.x;
+                }
+
+                parent.style.left = ( leftPosition ) + 'px';
+
+                let maxX = window.innerWidth;
+
+                if( overflowContainer )
+                {
+                    const parentRect = overflowContainer.getBoundingClientRect();
+                    maxX = parentRect.x + parentRect.width;
+                }
+
+                const showLeft = ( leftPosition + listWidth ) > maxX;
+                if( showLeft )
+                {
+                    parent.style.left = ( leftPosition - ( listWidth - rect.width ) ) + 'px';
+                }
             }
-            return Math.max( maxWidth * 10, 80 );
         };
 
         let selectedOption = this.addButton( null, buttonName, ( value, event ) => {
@@ -4805,51 +5162,50 @@ class Panel {
                 return;
             }
 
-            list.toggleAttribute( "hidden" );
-            list.classList.remove( "place-above" );
-
-            const listHeight = 26 * values.length;
-            const rect = selectedOption.getBoundingClientRect();
-            const topPosition = rect.y;
+            listDialog.classList.remove( "place-above" );
+            const opened = listDialog.hasAttribute( "open" );
 
-            let maxY = window.innerHeight;
-
-            if( this.mainContainer )
+            if( !opened )
             {
-                const parentRect = this.mainContainer.getBoundingClientRect();
-                maxY = parentRect.y + parentRect.height;
+                listDialog.show();
+                _placeOptions( listDialog );
+            }
+            else
+            {
+                listDialog.close();
             }
 
-            list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
-
-            const showAbove = ( topPosition + listHeight ) > maxY;
-            if( showAbove )
+            if( filter )
             {
-                list.style.top = ( topPosition - listHeight ) + 'px';
-                list.classList.add( "place-above" );
+                filter.querySelector( "input" ).focus();
             }
 
-            list.style.width = (event.currentTarget.clientWidth) + 'px';
-            list.style.minWidth = (_getMaxListWidth()) + 'px';
-            list.focus();
-        }, { buttonClass: "array", skipInlineCount: true });
+        }, { buttonClass: "array", skipInlineCount: true, disabled: options.disabled });
 
         this.clearQueue();
 
         selectedOption.style.width = "100%";
 
         selectedOption.refresh = (v) => {
-            if(selectedOption.querySelector("span").innerText == "")
+            if( selectedOption.querySelector("span").innerText == "" )
+            {
                 selectedOption.querySelector("span").innerText = v;
+            }
             else
+            {
                 selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v);
+            }
         }
 
         // Add dropdown options container
+
+        const listDialog = document.createElement( 'dialog' );
+        listDialog.className = "lexdropdownoptions";
+
         let list = document.createElement( 'ul' );
         list.tabIndex = -1;
         list.className = "lexoptions";
-        list.hidden = true;
+        listDialog.appendChild( list )
 
         list.addEventListener( 'focusout', function( e ) {
             e.stopPropagation();
@@ -4867,97 +5223,118 @@ class Panel {
             {
                 return;
             }
-            this.toggleAttribute( 'hidden', true );
+            listDialog.close();
         });
 
         // Add filter options
         let filter = null;
-        if(options.filter ?? false)
+        if( options.filter ?? false )
         {
-            filter = this._addFilter("Search option", {container: list, callback: this._search_options.bind(list, values)});
-        }
-
-        // Create option list to empty it easily..
-        const listOptions = document.createElement('span');
-        list.appendChild( listOptions );
+            filter = this._addFilter( options.placeholder ?? "Search...", { container: list, callback: this._filterOptions.bind( list, values )} );
 
-        if( filter )
-        {
-            list.prepend( filter );
-            listOptions.style.height = "calc(100% - 25px)";
+            list.appendChild( filter );
 
             filter.addEventListener('focusout', function( e ) {
                 if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
                 {
                     return;
                 }
-                list.toggleAttribute( 'hidden', true );
+                listDialog.close();
             });
         }
 
+        // Create option list to empty it easily..
+        const listOptions = document.createElement('span');
+        listOptions.style.height = "calc(100% - 25px)";
+        list.appendChild( listOptions );
+
         // Add dropdown options list
-        list.refresh = options => {
+        list.refresh = ( options ) => {
 
             // Empty list
             listOptions.innerHTML = "";
 
-            for(let i = 0; i < options.length; i++)
+            if( !options.length )
+            {
+                let iValue = options.emptyMsg ?? "No options found.";
+
+                let option = document.createElement( "div" );
+                option.className = "option";
+                option.style.flexDirection = "unset";
+                option.innerHTML = iValue;
+
+                let li = document.createElement( "li" );
+                li.className = "lexdropdownitem empty";
+                li.appendChild( option );
+
+                listOptions.appendChild( li );
+                return;
+            }
+
+            for( let i = 0; i < options.length; i++ )
             {
-                let iValue = options[i];
-                let li = document.createElement('li');
-                let option = document.createElement('div');
+                let iValue = options[ i ];
+                let li = document.createElement( "li" );
+                let option = document.createElement( "div" );
                 option.className = "option";
-                li.appendChild(option);
-                li.addEventListener("click", (e) => {
-                    element.querySelector(".lexoptions").toggleAttribute('hidden', true);
-                    const currentSelected = element.querySelector(".lexoptions .selected");
-                    if(currentSelected) currentSelected.classList.remove("selected");
-                    value = e.currentTarget.getAttribute("value");
-                    e.currentTarget.toggleAttribute('hidden', false);
-                    e.currentTarget.classList.add("selected");
+                li.appendChild( option );
+
+                li.addEventListener( "click", e => {
+                    listDialog.close();
+                    const currentSelected = element.querySelector( ".lexoptions .selected" );
+                    if(currentSelected) currentSelected.classList.remove( "selected" );
+                    value = e.currentTarget.getAttribute( "value" );
+                    e.currentTarget.toggleAttribute( "hidden", false );
+                    e.currentTarget.classList.add( "selected" );
                     selectedOption.refresh(value);
 
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (value != wValue.iValue ? "block" : "none");
-                    that._trigger( new IEvent(name, value, null), callback );
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = (value != wValue.iValue ? "block" : "none");
+                    that._trigger( new IEvent( name, value, null ), callback );
 
                     // Reset filter
-                    if(filter)
+                    if( filter )
                     {
-                        filter.querySelector('input').value = "";
-                        this._search_options.bind(list, values, "")();
+                        filter.querySelector( "input" ).value = "";
+                        this._filterOptions.bind( list, values, "" )();
                     }
                 });
 
                 // Add string option
-                if( iValue.constructor != Object ) {
-                    option.style.flexDirection = 'unset';
+                if( iValue.constructor != Object )
+                {
+                    option.style.flexDirection = "unset";
                     option.innerHTML = "</a><span>" + iValue + "</span><a class='fa-solid fa-check'>";
                     option.value = iValue;
-                    li.setAttribute("value", iValue);
+                    li.setAttribute( "value", iValue );
                     li.className = "lexdropdownitem";
-                    if( i == (options.length - 1) ) li.className += " last";
-                    if(iValue == value) {
-                        li.classList.add("selected");
+
+                    if( iValue == value )
+                    {
+                        li.classList.add( "selected" );
                         wValue.innerHTML = iValue;
                     }
                 }
-                else {
+                else
+                {
                     // Add image option
-                    let img = document.createElement("img");
+                    let img = document.createElement( "img" );
                     img.src = iValue.src;
-                    li.setAttribute("value", iValue.value);
+                    li.setAttribute( "value", iValue.value );
                     li.className = "lexlistitem";
                     option.innerText = iValue.value;
                     option.className += " media";
-                    option.prepend(img);
+                    option.prepend( img );
 
-                    option.setAttribute("value", iValue.value);
-                    option.setAttribute("data-index", i);
-                    option.setAttribute("data-src", iValue.src);
-                    option.setAttribute("title", iValue.value);
-                    if(value == iValue.value)
-                        li.classList.add("selected");
+                    option.setAttribute( "value", iValue.value );
+                    option.setAttribute( "data-index", i );
+                    option.setAttribute( "data-src", iValue.src );
+                    option.setAttribute( "title", iValue.value );
+
+                    if( value == iValue.value )
+                    {
+                        li.classList.add( "selected" );
+                    }
                 }
 
                 listOptions.appendChild( li );
@@ -4966,7 +5343,7 @@ class Panel {
 
         list.refresh( values );
 
-        container.appendChild( list );
+        container.appendChild( listDialog );
         element.appendChild( container );
 
         // Remove branch padding and margins
@@ -7145,6 +7522,228 @@ class Panel {
 
         return widget;
     }
+
+    /**
+     * @method addTable
+     * @param {String} name Widget name
+     * @param {Number} data Table data
+     * @param {*} options:
+     * head: Table headers (each of the headers per column)
+     * body: Table body (data per row for each column)
+     * rowActions: Allow to add actions per row
+     * onMenuAction: Function callback to fill the "menu" context
+     * selectable: Each row can be selected
+     */
+
+    addTable( name, data, options = { } ) {
+
+        if( !data )
+        {
+            throw( "Data is needed to create a table!" );
+        }
+
+        let widget = this.create_widget( name, Widget.TABLE, options );
+
+        widget.onGetValue = () => {
+
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        };
+
+        let element = widget.domEl;
+
+        const container = document.createElement('div');
+        container.className = "lextable";
+        container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+        const table = document.createElement( 'table' );
+        container.appendChild( table );
+
+        data.head = data.head ?? [];
+        data.body = data.body ?? [];
+        data.orderMap = { };
+        data.checkMap = { };
+
+        function compareFn( idx, order, a, b) {
+            if (a[idx] < b[idx]) return -order;
+            else if (a[idx] > b[idx]) return order;
+            return 0;
+        }
+
+        widget.refreshTable = () => {
+
+            table.innerHTML = "";
+
+            // Head
+            {
+                const head = document.createElement( 'thead' );
+                head.className = "lextablehead";
+                table.appendChild( head );
+
+                const hrow = document.createElement( 'tr' );
+
+                if( options.selectable )
+                {
+                    const th = document.createElement( 'th' );
+                    const input = document.createElement( 'input' );
+                    input.type = "checkbox";
+                    input.className = "lexcheckbox";
+                    input.checked = data.checkMap[ ":root" ] ?? false;
+                    th.appendChild( input );
+
+                    input.addEventListener( 'change', function() {
+
+                        data.checkMap[ ":root" ] = this.checked;
+
+                        const body = table.querySelector( "tbody" );
+                        for( const el of body.childNodes )
+                        {
+                            data.checkMap[ el.getAttribute( "rowId" ) ] = this.checked;
+                            el.querySelector( "input" ).checked = this.checked;
+                        }
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                for( const headData of data.head )
+                {
+                    const th = document.createElement( 'th' );
+                    th.innerHTML = `${ headData } <a class="fa-solid fa-sort"></a>`;
+
+                    th.querySelector( 'a' ).addEventListener( 'click', () => {
+
+                        if( !data.orderMap[ headData ] )
+                        {
+                            data.orderMap[ headData ] = 1;
+                        }
+
+                        const idx = data.head.indexOf(headData);
+                        data.body = data.body.sort( compareFn.bind( this, idx,data.orderMap[ headData ] ) );
+                        data.orderMap[ headData ] = -data.orderMap[ headData ];
+
+                        widget.refreshTable();
+
+                    });
+
+                    hrow.appendChild( th );
+                }
+
+                // Add empty header column
+                if( options.rowActions )
+                {
+                    const th = document.createElement( 'th' );
+                    th.className = "sm";
+                    hrow.appendChild( th );
+                }
+
+                head.appendChild( hrow );
+            }
+
+            // Body
+            {
+                const body = document.createElement( 'tbody' );
+                body.className = "lextablebody";
+                table.appendChild( body );
+
+                for( let r = 0; r < data.body.length; ++r )
+                {
+                    const bodyData = data.body[ r ];
+                    const row = document.createElement( 'tr' );
+                    const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
+                    row.setAttribute( "rowId", rowId );
+
+                    if( options.selectable )
+                    {
+                        const td = document.createElement( 'td' );
+                        const input = document.createElement( 'input' );
+                        input.type = "checkbox";
+                        input.className = "lexcheckbox";
+                        input.checked = data.checkMap[ rowId ];
+                        td.appendChild( input );
+
+                        input.addEventListener( 'change', function() {
+                            data.checkMap[ rowId ] = this.checked;
+                        });
+
+                        row.appendChild( td );
+                    }
+
+                    for( const rowData of bodyData )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.innerHTML = `${ rowData }`;
+                        row.appendChild( td );
+                    }
+
+                    if( options.rowActions )
+                    {
+                        const td = document.createElement( 'td' );
+                        td.className = "sm";
+
+                        const buttons = document.createElement( 'div' );
+                        buttons.className = "lextablebuttons";
+                        td.appendChild( buttons );
+
+                        for( const action of options.rowActions )
+                        {
+                            const button = document.createElement( 'a' );
+                            button.className = "lexicon";
+
+                            if( action == "delete" )
+                            {
+                                button.className += " fa-solid fa-trash-can";
+                                button.addEventListener( 'click', function() {
+                                    // Don't need to refresh table..
+                                    data.body.splice( r, 1 );
+                                    row.remove();
+                                });
+                            }
+                            else if( action == "menu" )
+                            {
+                                button.className += " fa-solid fa-ellipsis";
+                                button.addEventListener( 'click', function( event ) {
+                                    addContextMenu( null, event, c => {
+                                        if( options.onMenuAction )
+                                        {
+                                            options.onMenuAction( c );
+                                            return;
+                                        }
+                                        console.warn( "Using <Menu action> without action callbacks." );
+                                    } );
+                                });
+                            }
+                            else // custom actions
+                            {
+                                console.assert( action.constructor == Object );
+                                button.className += ` ${ action.icon }`;
+                            }
+
+                            buttons.appendChild( button );
+                        }
+
+                        row.appendChild( td );
+                    }
+
+                    body.appendChild( row );
+                }
+            }
+        }
+
+        widget.refreshTable();
+
+        if( !widget.name )
+        {
+            element.className += " noname";
+            container.style.width = "100%";
+        }
+
+        element.appendChild( container );
+
+        return widget;
+    }
 }
 
 LX.Panel = Panel;
@@ -7501,16 +8100,15 @@ class Dialog {
             draggable = options.draggable ?? true,
             modal = options.modal ?? false;
 
-        if( modal )
-        {
-            LX.modal.toggle( false );
-        }
-
-        var root = document.createElement('div');
+        var root = document.createElement('dialog');
         root.className = "lexdialog " + (options.class ?? "");
         root.id = options.id ?? "dialog" + Dialog._last_id++;
         LX.root.appendChild( root );
 
+        doAsync( () => {
+            modal ? root.showModal() : root.show();
+        }, 10 );
+
         let that = this;
 
         var titleDiv = document.createElement('div');
@@ -7592,18 +8190,17 @@ class Dialog {
 
                 if( !options.onclose )
                 {
-                    that.panel.clear();
-                    root.remove();
+                    root.close();
+
+                    doAsync( () => {
+                        that.panel.clear();
+                        root.remove();
+                    }, 150 );
                 }
                 else
                 {
                     options.onclose( this.root );
                 }
-
-                if( modal )
-                {
-                    LX.modal.toggle( true );
-                }
             };
 
             var closeButton = document.createElement( 'a' );
@@ -7718,21 +8315,29 @@ class PocketDialog extends Dialog {
         options.draggable = options.draggable ?? false;
         options.closable = options.closable ?? false;
 
+        const dragMargin = 3;
+
         super( title, callback, options );
 
         let that = this;
         // Update margins on branch title closes/opens
         LX.addSignal("@on_branch_closed", this.panel, closed => {
             if( this.dock_pos == PocketDialog.BOTTOM )
-                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+            {
+                this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
+            }
         });
 
         // Custom
         this.root.classList.add( "pocket" );
-        if( !options.position ) {
-            this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
-            this.root.style.top = "0px";
+        this.root.style.left = "unset";
+
+        if( !options.position )
+        {
+            this.root.style.right = dragMargin + "px";
+            this.root.style.top = dragMargin + "px";
         }
+
         this.panel.root.style.width = "calc( 100% - 12px )";
         this.panel.root.style.height = "calc( 100% - 40px )";
         this.dock_pos = PocketDialog.TOP;
@@ -7753,7 +8358,7 @@ class PocketDialog extends Dialog {
 
             if( this.dock_pos == PocketDialog.BOTTOM )
                 that.root.style.top = this.root.classList.contains("minimized") ?
-                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                "calc(100% - " + (that.title.offsetHeight + 6) + "px)" : "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
         });
 
         if( !options.draggable )
@@ -7768,26 +8373,42 @@ class PocketDialog extends Dialog {
                     switch( t )
                     {
                     case 'b':
-                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
+                        this.root.style.top = "calc(100% - " + (this.root.offsetHeight + dragMargin) + "px)";
                         break;
                     case 'l':
-                        this.root.style.left = options.position ? options.position[ 1 ] : "0px";
+                        this.root.style.right = "unset";
+                        this.root.style.left = options.position ? options.position[ 1 ] : ( dragMargin + "px" );
                         break;
                     }
                 }
             }
 
             this.root.classList.add('dockable');
-            this.title.addEventListener("keydown", function(e) {
-                if( e.ctrlKey && e.key == 'ArrowLeft' ) {
+
+            this.title.addEventListener("keydown", function( e ) {
+                if( !e.ctrlKey )
+                {
+                    return;
+                }
+
+                that.root.style.right = "unset";
+
+                if( e.key == 'ArrowLeft' )
+                {
                     that.root.style.left = '0px';
-                } else if( e.ctrlKey && e.key == 'ArrowRight' ) {
-                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + 6) + "px)";
-                }else if( e.ctrlKey && e.key == 'ArrowUp' ) {
+                }
+                else if( e.key == 'ArrowRight' )
+                {
+                    that.root.style.left = "calc(100% - " + (that.root.offsetWidth + dragMargin) + "px)";
+                }
+                else if( e.key == 'ArrowUp' )
+                {
                     that.root.style.top = "0px";
                     that.dock_pos = PocketDialog.TOP;
-                }else if( e.ctrlKey && e.key == 'ArrowDown' ) {
-                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + 6) + "px)";
+                }
+                else if( e.key == 'ArrowDown' )
+                {
+                    that.root.style.top = "calc(100% - " + (that.root.offsetHeight + dragMargin) + "px)";
                     that.dock_pos = PocketDialog.BOTTOM;
                 }
             });
@@ -9086,7 +9707,7 @@ class AssetView {
         }
 
         this.rightPanel.sameLine();
-        this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "20%", minWidth: "128px" } );
+        this.rightPanel.addDropdown( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "30%", minWidth: "128px" } );
         this.rightPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
         this.rightPanel.addButton( null, "<a class='fa fa-arrow-up-short-wide'></a>", on_sort.bind(this), { className: "micro", title: "Sort" } );
         this.rightPanel.addButton( null, "<a class='fa-solid fa-grip'></a>", on_change_view.bind(this), { className: "micro", title: "View" } );
@@ -9864,6 +10485,14 @@ Element.prototype.getComputedSize = function() {
     }
 }
 
+Element.prototype.getParentArea = function() {
+    let parent = this.parentElement;
+    while( parent ) {
+        if( parent.classList.contains( "lexarea" ) ) { return parent; }
+        parent = parent.parentElement;
+    }
+}
+
 LX.UTILS = {
     getTime() { return new Date().getTime() },
     compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },