lexgui 0.6.0 → 0.6.2

package/build/lexgui.module.js

@@ -6,7 +6,7 @@
 */
 
 var LX = {
-    version: "0.6.0",
+    version: "0.6.2",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -85,7 +85,21 @@ LX.doAsync = doAsync;
  */
 function getSupportedDOMName( text )
 {
-    return text.replace( /\s/g, '' ).replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll( '.', '' );
+    console.assert( typeof text == "string", "getSupportedDOMName: Text is not a string!" );
+
+    let name = text.trim();
+
+    // Replace specific known symbols
+    name = name.replace( /@/g, '_at_' ).replace( /\+/g, '_plus_' ).replace( /\./g, '_dot_' );
+    name = name.replace( /[^a-zA-Z0-9_-]/g, '_' );
+
+    // prefix with an underscore if needed
+    if( /^[0-9]/.test( name ) )
+    {
+        name = '_' + name;
+    }
+
+    return name;
 }
 
 LX.getSupportedDOMName = getSupportedDOMName;
@@ -2296,7 +2310,7 @@ class DropdownMenu {
 
         console.assert( trigger, "DropdownMenu needs a DOM element as trigger!" );
 
-        if( DropdownMenu.currentMenu )
+        if( DropdownMenu.currentMenu || !items?.length )
         {
             DropdownMenu.currentMenu.destroy();
             this.invalid = true;
@@ -2314,6 +2328,7 @@ class DropdownMenu {
         this.align = options.align ?? "center";
         this.avoidCollisions = options.avoidCollisions ?? true;
         this.onBlur = options.onBlur;
+        this.inPlace = false;
 
         this.root = document.createElement( "div" );
         this.root.id = "root";
@@ -2333,7 +2348,8 @@ class DropdownMenu {
 
             this._onClick = e => {
 
-                if( e.target && ( this.root.contains( e.target ) || e.target == this._trigger ) )
+                // Check if the click is inside a menu or on the trigger
+                if( e.target && ( e.target.closest( ".lexdropdownmenu" ) != undefined || e.target == this._trigger ) )
                 {
                     return;
                 }
@@ -2341,7 +2357,8 @@ class DropdownMenu {
                 this.destroy( true );
             };
 
-            document.body.addEventListener( "click", this._onClick );
+            document.body.addEventListener( "mousedown", this._onClick, true );
+            document.body.addEventListener( "focusin", this._onClick, true );
         }, 10 );
     }
 
@@ -2351,7 +2368,8 @@ class DropdownMenu {
 
         delete this._trigger.ddm;
 
-        document.body.removeEventListener( "click", this._onClick );
+        document.body.removeEventListener( "mousedown", this._onClick, true );
+        document.body.removeEventListener( "focusin", this._onClick, true );
 
         LX.root.querySelectorAll( ".lexdropdownmenu" ).forEach( m => { m.remove(); } );
 
@@ -2376,7 +2394,7 @@ class DropdownMenu {
             let newParent = document.createElement( "div" );
             newParent.tabIndex = "1";
             newParent.className = "lexdropdownmenu";
-            newParent.id = parentDom.id;
+            newParent.dataset["id"] = parentDom.dataset["id"];
             newParent.dataset["side"] = "right"; // submenus always come from the right
             LX.root.appendChild( newParent );
 
@@ -2408,7 +2426,7 @@ class DropdownMenu {
             }
 
             const key = item.name ?? item;
-            const pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+            const pKey = LX.getSupportedDOMName( key );
 
             // Item already created
             if( parentDom.querySelector( "#" + pKey ) )
@@ -2418,7 +2436,7 @@ class DropdownMenu {
 
             const menuItem = document.createElement('div');
             menuItem.className = "lexdropdownmenuitem" + ( item.name ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
-            menuItem.id = pKey;
+            menuItem.dataset["id"] = pKey;
             menuItem.innerHTML = `<span>${ key }</span>`;
             menuItem.tabIndex = "1";
             parentDom.appendChild( menuItem );
@@ -2504,24 +2522,24 @@ class DropdownMenu {
 
             menuItem.addEventListener("mouseover", e => {
 
-                let path = menuItem.id;
+                let path = menuItem.dataset["id"];
                 let p = parentDom;
 
                 while( p )
                 {
-                    path += "/" + p.id;
+                    path += "/" + p.dataset["id"];
                     p = p.currentParent?.parentElement;
                 }
 
                 LX.root.querySelectorAll( ".lexdropdownmenu" ).forEach( m => {
-                    if( !path.includes( m.id ) )
+                    if( !path.includes( m.dataset["id"] ) )
                     {
                         m.currentParent.built = false;
                         m.remove();
                     }
                 } );
 
-                if( item.submenu )
+                if( item.submenu && this.inPlace )
                 {
                     if( menuItem.built )
                     {
@@ -2595,6 +2613,7 @@ class DropdownMenu {
 
         this.root.style.left = `${ position[ 0 ] }px`;
         this.root.style.top = `${ position[ 1 ] }px`;
+        this.inPlace = true;
     }
 
     _addSeparator( parent ) {
@@ -3456,6 +3475,7 @@ class Area {
         const type = options.type ?? "horizontal";
         const sizes = options.sizes || [ "50%", "50%" ];
         const auto = (options.sizes === 'auto') || ( options.sizes && options.sizes[ 0 ] == "auto" && options.sizes[ 1 ] == "auto" );
+        const rect = this.root.getBoundingClientRect();
 
         // Secondary area fills space
         if( !sizes[ 1 ] || ( sizes[ 0 ] != "auto" && sizes[ 1 ] == "auto" ) )
@@ -3506,7 +3526,7 @@ class Area {
 
             if( !fixedSize )
             {
-                const parentWidth = this.root.offsetWidth;
+                const parentWidth = rect.width;
                 const leftPx = parsePixelSize( sizes[ 0 ], parentWidth );
                 const rightPx = parsePixelSize(  sizes[ 1 ], parentWidth );
                 const leftPercent = ( leftPx / parentWidth ) * 100;
@@ -3530,10 +3550,11 @@ class Area {
             if( auto )
             {
                 primarySize[ 1 ] = "auto";
+                secondarySize[ 1 ] = "auto";
             }
             else if( !fixedSize )
             {
-                const parentHeight = this.root.offsetHeight;
+                const parentHeight = rect.height;
                 const topPx = parsePixelSize( sizes[ 0 ], parentHeight );
                 const bottomPx = parsePixelSize( sizes[ 1 ], parentHeight );
                 const topPercent = ( topPx / parentHeight ) * 100;
@@ -3556,6 +3577,72 @@ class Area {
         let area1 = new Area( { width: primarySize[ 0 ], height: primarySize[ 1 ], skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
         let area2 = new Area( { width: secondarySize[ 0 ], height: secondarySize[ 1 ], skipAppend: true, className: "split" } );
 
+        /*
+            If the parent area is not in the DOM, we need to wait for the resize event to get the its correct size
+            and set the sizes of the split areas accordingly.
+        */
+        if( !fixedSize && ( !rect.width || !rect.height ) )
+        {
+            const observer = new ResizeObserver( entries => {
+
+                console.assert( entries.length == 1, "AreaResizeObserver: more than one entry" );
+
+                const rect = entries[ 0 ].contentRect;
+                if( !rect.width || !rect.height )
+                {
+                    return;
+                }
+
+                this._update( [ rect.width, rect.height ], false );
+
+                // On auto splits, we only need to set the size of the parent area
+                if( !auto )
+                {
+                    if( type == "horizontal" )
+                    {
+                        const parentWidth = rect.width;
+                        const leftPx = parsePixelSize( sizes[ 0 ], parentWidth );
+                        const rightPx = parsePixelSize(  sizes[ 1 ], parentWidth );
+                        const leftPercent = ( leftPx / parentWidth ) * 100;
+                        const rightPercent = ( rightPx / parentWidth ) * 100;
+
+                        // Style using percentages
+                        primarySize[ 0 ] = `calc(${ leftPercent }% - ${ splitbarOffset }px)`;
+                        secondarySize[ 0 ] = `calc(${ rightPercent }% - ${ splitbarOffset }px)`;
+                    }
+                    else // vertical
+                    {
+                        const parentHeight = rect.height;
+                        const topPx = parsePixelSize( sizes[ 0 ], parentHeight );
+                        const bottomPx = parsePixelSize( sizes[ 1 ], parentHeight );
+                        const topPercent = ( topPx / parentHeight ) * 100;
+                        const bottomPercent = ( bottomPx / parentHeight ) * 100;
+
+                        primarySize[ 1 ] = ( sizes[ 0 ] == "auto" ? "auto" : `calc(${ topPercent }% - ${ splitbarOffset }px)`);
+                        secondarySize[ 1 ] = ( sizes[ 1 ] == "auto" ? "auto" : `calc(${ bottomPercent }% - ${ splitbarOffset }px)`);
+                    }
+
+                    area1.root.style.width = primarySize[ 0 ];
+                    area1.root.style.height = primarySize[ 1 ];
+
+                    area2.root.style.width = secondarySize[ 0 ];
+                    area2.root.style.height = secondarySize[ 1 ];
+                }
+
+                area1._update();
+                area2._update();
+
+                // Stop observing
+                observer.disconnect();
+            });
+
+            // Observe the parent area until the DOM is ready
+            // and the size is set correctly.
+            doAsync( () => {
+                observer.observe( this.root );
+            }, 100 );
+        }
+
         if( auto && type == "vertical" )
         {
             // Listen resize event on first area
@@ -3565,6 +3652,7 @@ class Area {
                     const size = entry.target.getComputedSize();
                     area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
                 }
+                resizeObserver.disconnect();
             });
 
             resizeObserver.observe( area1.root );
@@ -3608,7 +3696,7 @@ class Area {
         this.type = type;
 
         // Update sizes
-        this._update();
+        this._update( rect.width || rect.height ? [ rect.width, rect.height ] : undefined );
 
         if( !resize )
         {
@@ -3665,6 +3753,11 @@ class Area {
         this.minHeight  = minh;
         this.maxWidth   = maxw;
         this.maxHeight  = maxh;
+
+        if( minw != 0 ) this.root.style.minWidth = `${ minw }px`;
+        if( minh != 0 ) this.root.style.minHeight = `${ minh }px`;
+        if( maxw != Infinity ) this.root.style.maxWidth = `${ maxw }px`;
+        if( maxh != Infinity ) this.root.style.maxHeight = `${ maxh }px`;
     }
 
     /**
@@ -3724,7 +3817,7 @@ class Area {
         {
             this.offset = area2.root.offsetHeight;
             area2.root.classList.add("fadeout-vertical");
-            this._moveSplit(-Infinity, true);
+            this._moveSplit( -Infinity, true );
 
         }
         else
@@ -4032,7 +4125,6 @@ class Area {
                 {
                     _addButton( b );
                 }
-
             }
 
             // Add floating info
@@ -4124,12 +4216,12 @@ class Area {
 
             if( a1.maxWidth != Infinity )
             {
-                a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+                a2Root.style.minWidth = `calc( 100% - ${ parseInt( a1.maxWidth ) }px )`;
             }
         }
         else
         {
-            var size = Math.max( ( a2Root.offsetHeight + dt ) + a2.offset, parseInt(a2.minHeight) );
+            var size = Math.max( ( a2Root.offsetHeight + dt ) + a2.offset, parseInt( a2.minHeight ) );
             if( forceWidth ) size = forceWidth;
 
             const parentHeight = this.size[ 1 ];
@@ -4143,7 +4235,10 @@ class Area {
             a2Root.style.height = `${ bottomPercent }%`;
             a2Root.style.height = `${ bottomPercent }%`;
 
-            a1Root.style.minHeight = a1.minHeight + "px";
+            if( a1.maxHeight != Infinity )
+            {
+                a2Root.style.minHeight = `calc( 100% - ${ parseInt( a1.maxHeight ) }px )`;
+            }
         }
 
         if( !forceAnimation )
@@ -4165,15 +4260,24 @@ class Area {
         delete this.splitBar;
     }
 
-    _update() {
-
-        const rect = this.root.getBoundingClientRect();
+    _update( newSize, propagate = true ) {
 
-        this.size = [ rect.width, rect.height ];
+        if( !newSize )
+        {
+            const rect = this.root.getBoundingClientRect();
+            this.size = [ rect.width, rect.height ];
+        }
+        else
+        {
+            this.size = newSize;
+        }
 
-        for( var i = 0; i < this.sections.length; i++ )
+        if( propagate )
         {
-            this.sections[ i ]._update();
+            for( var i = 0; i < this.sections.length; i++ )
+            {
+                this.sections[ i ]._update();
+            }
         }
     }
 };
@@ -4573,7 +4677,7 @@ class Menubar {
 
         this.root.querySelectorAll(".lexmenuentry").forEach( e => {
             e.classList.remove( 'selected' );
-            e.built = false;
+            delete e.dataset[ "built" ];
         } );
 
         if( this._currentDropdown )
@@ -4595,7 +4699,7 @@ class Menubar {
         for( let item of this.items )
         {
             let key = item.name;
-            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+            let pKey = LX.getSupportedDOMName( key );
 
             // Item already created
             if( this.root.querySelector( "#" + pKey ) )
@@ -4614,8 +4718,8 @@ class Menubar {
             const _showEntry = () => {
                 this._resetMenubar(true);
                 entry.classList.add( "selected" );
-                entry.built = true;
-                this._currentDropdown = addDropdownMenu( entry, item.submenu, { side: "bottom", align: "start", onBlur: () => {
+                entry.dataset["built"] = "true";
+                this._currentDropdown = addDropdownMenu( entry, item.submenu ?? [], { side: "bottom", align: "start", onBlur: () => {
                     this._resetMenubar();
                 } });
             };
@@ -4635,7 +4739,7 @@ class Menubar {
 
             entry.addEventListener( "mouseover", (e) => {
 
-                if( this.focused && !entry.built )
+                if( this.focused && !( entry.dataset[ "built" ] ?? false ) )
                 {
                     _showEntry();
                 }
@@ -5228,7 +5332,7 @@ class SideBar {
 
     select( name ) {
 
-        let pKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
+        let pKey = LX.getSupportedDOMName( name );
 
         const entry = this.items.find( v => v.name === pKey );
 
@@ -5266,7 +5370,7 @@ class SideBar {
                 continue;
             }
 
-            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+            let pKey = LX.getSupportedDOMName( key );
             let currentGroup = null;
 
             let entry = document.createElement( 'div' );
@@ -6532,7 +6636,7 @@ class Title extends Widget {
         // Note: Titles are not registered in Panel.widgets by now
         super( Widget.TITLE, null, null, options );
 
-        this.root.className = "lextitle";
+        this.root.className = `lextitle ${ this.root.className }`;
 
         if( options.icon )
         {
@@ -6846,7 +6950,7 @@ class Button extends Widget {
 
         var wValue = document.createElement( 'button' );
         wValue.title = options.tooltip ? "" : ( options.title ?? "" );
-        wValue.className = "lexbutton " + ( options.buttonClass ?? "" );
+        wValue.className = "lexbutton p-1 " + ( options.buttonClass ?? "" );
 
         this.root.appendChild( wValue );
 
@@ -6983,7 +7087,7 @@ class ComboButtons extends Widget {
                 buttonEl.classList.add( options.buttonClass );
             }
 
-            if( shouldSelect && b.selected )
+            if( shouldSelect && ( b.selected || options.selected?.includes( b.value ) ) )
             {
                 buttonEl.classList.add("selected");
                 currentValue = ( currentValue ).concat( [ b.value ] );
@@ -7032,7 +7136,7 @@ class ComboButtons extends Widget {
 
                 if( !shouldToggle && currentValue.length > 1 )
                 {
-                    console.error( `Enable _options.toggle_ to allow selecting multiple options in ComboButtons.` )
+                    console.error( `Enable _options.toggle_ to allow selecting multiple options in ComboButtons.` );
                     return;
                 }
 
@@ -7046,9 +7150,12 @@ class ComboButtons extends Widget {
 
         if( currentValue.length > 1 )
         {
-            options.toggle = true;
-            shouldToggle = shouldSelect;
-            console.warn( `Multiple options selected in '${ name }' ComboButtons. Enabling _toggle_ mode.` );
+            if( !shouldToggle )
+            {
+                options.toggle = true;
+                shouldToggle = shouldSelect;
+                console.warn( `Multiple options selected in '${ name }' ComboButtons. Enabling _toggle_ mode.` );
+            }
         }
         else
         {
@@ -7467,7 +7574,7 @@ class Select extends Widget {
                 this.unfocus_event = true;
                 setTimeout( () => delete this.unfocus_event, 200 );
             }
-            else if ( e.relatedTarget && ( e.relatedTarget.tagName == "INPUT" || e.relatedTarget.classList.contains("lexoptions") ) )
+            else if ( e.relatedTarget && listDialog.contains( e.relatedTarget ) )
             {
                 return;
             }
@@ -8363,7 +8470,7 @@ class RadioGroup extends Widget {
             container.appendChild( optionItem );
 
             const optionButton = document.createElement( 'button' );
-            optionButton.className = "lexbutton";
+            optionButton.className = "flex p-0 rounded-lg cursor-pointer";
             optionButton.disabled = options.disabled ?? false;
             optionItem.appendChild( optionButton );
 
@@ -8666,7 +8773,7 @@ class NumberInput extends Widget {
         box.className = "numberbox";
         container.appendChild( box );
 
-        let valueBox = LX.makeContainer( [ "auto", "100%" ], "relative flex flex-row", "", box );
+        let valueBox = LX.makeContainer( [ "auto", "100%" ], "relative flex flex-row cursor-text", "", box );
 
         let vecinput = document.createElement( 'input' );
         vecinput.id = "number_" + simple_guidGenerator();
@@ -8685,7 +8792,7 @@ class NumberInput extends Widget {
         vecinput.value = vecinput.iValue = value;
         valueBox.appendChild( vecinput );
 
-        const dragIcon = LX.makeIcon( "MoveVertical", { iconClass: "drag-icon hidden", svgClass: "sm" } );
+        const dragIcon = LX.makeIcon( "MoveVertical", { iconClass: "drag-icon hidden-opacity", svgClass: "sm" } );
         valueBox.appendChild( dragIcon );
 
         if( options.units )
@@ -8769,7 +8876,7 @@ class NumberInput extends Widget {
 
         let innerMouseDown = e => {
 
-            if( document.activeElement == vecinput )
+            if( ( document.activeElement == vecinput ) || ( e.button != LX.MOUSE_LEFT_CLICK ) )
             {
                 return;
             }
@@ -8778,13 +8885,13 @@ class NumberInput extends Widget {
             doc.addEventListener( 'mousemove', innerMouseMove );
             doc.addEventListener( 'mouseup', innerMouseUp );
             document.body.classList.add( 'noevents' );
-            dragIcon.classList.remove( 'hidden' );
+            dragIcon.classList.remove( 'hidden-opacity' );
             e.stopImmediatePropagation();
             e.stopPropagation();
 
             if( !document.pointerLockElement )
             {
-                vecinput.requestPointerLock();
+                valueBox.requestPointerLock();
             }
 
             if( options.onPress )
@@ -8816,7 +8923,7 @@ class NumberInput extends Widget {
             doc.removeEventListener( 'mousemove', innerMouseMove );
             doc.removeEventListener( 'mouseup', innerMouseUp );
             document.body.classList.remove( 'noevents' );
-            dragIcon.classList.add( 'hidden' );
+            dragIcon.classList.add( 'hidden-opacity' );
 
             if( document.pointerLockElement )
             {
@@ -8829,7 +8936,7 @@ class NumberInput extends Widget {
             }
         }
 
-        vecinput.addEventListener( "mousedown", innerMouseDown );
+        valueBox.addEventListener( "mousedown", innerMouseDown );
 
         doAsync( this.onResize.bind( this ) );
     }
@@ -8911,6 +9018,7 @@ class Vector extends Widget {
             vecinput.id = "vec" + numComponents + "_" + simple_guidGenerator();
             vecinput.idx = i;
             vectorInputs[ i ] = vecinput;
+            box.appendChild( vecinput );
 
             if( value[ i ].constructor == Number )
             {
@@ -8920,7 +9028,7 @@ class Vector extends Widget {
 
             vecinput.value = vecinput.iValue = value[ i ];
 
-            const dragIcon = LX.makeIcon( "MoveVertical", { iconClass: "drag-icon hidden", svgClass: "sm" } );
+            const dragIcon = LX.makeIcon( "MoveVertical", { iconClass: "drag-icon hidden-opacity", svgClass: "sm" } );
             box.appendChild( dragIcon );
 
             if( options.disabled )
@@ -8983,7 +9091,7 @@ class Vector extends Widget {
 
             function innerMouseDown( e )
             {
-                if( document.activeElement == vecinput )
+                if( ( document.activeElement == vecinput ) || ( e.button != LX.MOUSE_LEFT_CLICK ) )
                 {
                     return;
                 }
@@ -8992,13 +9100,13 @@ class Vector extends Widget {
                 doc.addEventListener( 'mousemove', innerMouseMove );
                 doc.addEventListener( 'mouseup', innerMouseUp );
                 document.body.classList.add( 'noevents' );
-                dragIcon.classList.remove( 'hidden' );
+                dragIcon.classList.remove( 'hidden-opacity' );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
 
                 if( !document.pointerLockElement )
                 {
-                    vecinput.requestPointerLock();
+                    box.requestPointerLock();
                 }
 
                 if( options.onPress )
@@ -9042,7 +9150,7 @@ class Vector extends Widget {
                 doc.removeEventListener( 'mousemove', innerMouseMove );
                 doc.removeEventListener( 'mouseup', innerMouseUp );
                 document.body.classList.remove( 'noevents' );
-                dragIcon.classList.add('hidden');
+                dragIcon.classList.add('hidden-opacity');
 
                 if( document.pointerLockElement )
                 {
@@ -9055,9 +9163,7 @@ class Vector extends Widget {
                 }
             }
 
-            vecinput.addEventListener( "mousedown", innerMouseDown );
-
-            box.appendChild( vecinput );
+            box.addEventListener( "mousedown", innerMouseDown );
             container.appendChild( box );
         }
 
@@ -9990,34 +10096,90 @@ class Table extends Widget {
             if( this.customFilters )
             {
                 const icon = LX.makeIcon( "CirclePlus", { svgClass: "sm" } );
+                const separatorHtml = `<div class="lexcontainer border-right self-center mx-1" style="width: 1px; height: 70%;"></div>`;
 
                 for( let f of this.customFilters )
                 {
-                    const customFilterBtn = new Button(null, icon.innerHTML + f.name, ( v ) => {
+                    f.widget = new Button(null, icon.innerHTML + f.name, ( v ) => {
 
-                        const menuOptions = f.options.map( ( colName, idx ) => {
-                            const item = {
-                                name: colName,
-                                checked:  !!this.activeCustomFilters[ colName ],
-                                callback: (key, v, dom) => {
-                                    if( v ) { this.activeCustomFilters[ key ] = f.name; }
-                                    else {
-                                        delete this.activeCustomFilters[ key ];
+                        const spanName = f.widget.root.querySelector( "span" );
+
+                        if( f.options )
+                        {
+                            const menuOptions = f.options.map( ( colName, idx ) => {
+                                const item = {
+                                    name: colName,
+                                    checked:  !!this.activeCustomFilters[ colName ],
+                                    callback: (key, v, dom) => {
+                                        if( v ) { this.activeCustomFilters[ key ] = f.name; }
+                                        else {
+                                            delete this.activeCustomFilters[ key ];
+                                        }
+                                        const activeFilters = Object.keys( this.activeCustomFilters ).filter(  k => this.activeCustomFilters[ k ] == f.name );
+                                        const filterBadgesHtml = activeFilters.reduce( ( acc, key ) => acc += LX.badge( key, "bg-tertiary text-sm" ), "" );
+                                        spanName.innerHTML = icon.innerHTML + f.name + ( activeFilters.length ? separatorHtml : "" ) + filterBadgesHtml;
+                                        this.refresh();
                                     }
-                                    this.refresh();
                                 }
+                                return item;
+                            } );
+                            new DropdownMenu( f.widget.root, menuOptions, { side: "bottom", align: "start" });
+                        }
+                        else if( f.type == "range" )
+                        {
+                            console.assert( f.min != undefined && f.max != undefined, "Range filter needs min and max values!" );
+                            const container = LX.makeContainer( ["240px", "auto"], "border bg-primary rounded-lg text-md" );
+                            const panel = new Panel();
+                            LX.makeContainer( ["100%", "auto"], "px-3 p-2 pb-0 text-md font-medium", f.name, container );
+
+                            f.start = f.start ?? f.min;
+                            f.end = f.end ?? f.max;
+
+                            panel.refresh = () => {
+                                panel.clear();
+                                panel.sameLine( 2, "justify-center" );
+                                panel.addNumber( null, f.start, (v) => {
+                                    f.start = v;
+                                    const inUse = ( f.start != f.min || f.end != f.max );
+                                    spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary text-sm" ) : "" );
+                                    this.refresh();
+                                }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
+                                panel.addNumber( null, f.end, (v) => {
+                                    f.end = v;
+                                    const inUse = ( f.start != f.min || f.end != f.max );
+                                    spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary text-sm" ) : "" );
+                                    this.refresh();
+                                }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
+                                panel.addButton( null, "Reset", () => {
+                                    f.start = f.min;
+                                    f.end = f.max;
+                                    spanName.innerHTML = icon.innerHTML + f.name;
+                                    panel.refresh();
+                                    this.refresh();
+                                }, { buttonClass: "contrast" } );
                             }
-                            return item;
-                        } );
-                        new DropdownMenu( customFilterBtn.root, menuOptions, { side: "bottom", align: "start" });
-                    }, { buttonClass: " primary dashed" } );
-                    headerContainer.appendChild( customFilterBtn.root );
+                            panel.refresh();
+                            container.appendChild( panel.root );
+                            new Popover( f.widget.root, [ container ], { side: "bottom" } );
+                        }
+
+                    }, { buttonClass: "px-2 primary dashed" } );
+                    headerContainer.appendChild( f.widget.root );
                 }
 
                 this._resetCustomFiltersBtn = new Button(null, "resetButton", ( v ) => {
                     this.activeCustomFilters = {};
-                    this.refresh();
                     this._resetCustomFiltersBtn.root.classList.add( "hidden" );
+                    for( let f of this.customFilters )
+                    {
+                        f.widget.root.querySelector( "span" ).innerHTML = ( icon.innerHTML + f.name );
+                        if( f.type == "range" )
+                        {
+                            f.start = f.min;
+                            f.end = f.max;
+                        }
+                    }
+                    this.refresh();
                 }, { title: "Reset filters", icon: "X" } );
                 headerContainer.appendChild( this._resetCustomFiltersBtn.root );
                 this._resetCustomFiltersBtn.root.classList.add( "hidden" );
@@ -10250,6 +10412,41 @@ class Table extends Widget {
                         }
                     }
 
+                    // Check range/date filters
+                    if( this.customFilters )
+                    {
+                        let acfMap = {};
+
+                        for( let f of this.customFilters )
+                        {
+                            const acfName = f.name;
+
+                            if( f.type == "range" )
+                            {
+                                acfMap[ acfName ] = acfMap[ acfName ] ?? false;
+
+                                const filterColIndex = data.head.indexOf( acfName );
+                                if( filterColIndex > -1 )
+                                {
+                                    const validRowValue = parseFloat( bodyData[ filterColIndex ] );
+                                    const min = f.start ?? f.min;
+                                    const max = f.end ?? f.max;
+                                    acfMap[ acfName ] |= ( validRowValue >= min ) && ( validRowValue <= max );
+                                }
+                            }
+                            else if( f.type == "date" )
+                            {
+                                // TODO
+                            }
+                        }
+
+                        const show = Object.values( acfMap ).reduce( ( e, acc ) => acc *= e );
+                        if( !show )
+                        {
+                            continue;
+                        }
+                    }
+
                     const row = document.createElement( 'tr' );
                     const rowId = LX.getSupportedDOMName( bodyData.join( '-' ) );
                     row.setAttribute( "rowId", rowId.substr(0, 32) );
@@ -11127,6 +11324,7 @@ class Panel {
      * @param {Object} options:
      * hideName: Don't use name as label [false]
      * float: Justify content (left, center, right) [center]
+     * selected: Selected button by default (String|Array)
      * noSelection: Buttons can be clicked, but they are not selectable
      * toggle: Buttons can be toggled insted of selecting only one
      */
@@ -13409,7 +13607,7 @@ class AssetView {
 
         if( !this.skipBrowser )
         {
-            [left, right] = area.split({ type: "horizontal", sizes: ["15%", "85%"]});
+            [ left, right ] = area.split({ type: "horizontal", sizes: ["15%", "85%"]});
             contentArea = right;
 
             left.setLimitBox( 210, 0 );
@@ -13619,7 +13817,7 @@ class AssetView {
         }
         else
         {
-            this.rightPanel = area.addPanel({ className: 'lexassetcontentpanel' });
+            this.rightPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
         }
 
         const on_sort = ( value, event ) => {
@@ -14663,26 +14861,31 @@ LX.ICONS = {
     "Folder": [512, 512, [], "solid", "M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"],
     "FolderOpen": [576, 512, [], "solid", "M384 480l48 0c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224l-400 0c-11.4 0-21.9 6-27.6 15.9L48 357.1 48 96c0-8.8 7.2-16 16-16l117.5 0c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8L416 144c8.8 0 16 7.2 16 16l0 32 48 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l23.7 0L384 480z"],
     "FolderClosed": [512, 512, [], "solid", "M448 480L64 480c-35.3 0-64-28.7-64-64L0 192l512 0 0 224c0 35.3-28.7 64-64 64zm64-320L0 160 0 96C0 60.7 28.7 32 64 32l128 0c20.1 0 39.1 9.5 51.2 25.6l19.2 25.6c6 8.1 15.5 12.8 25.6 12.8l160 0c35.3 0 64 28.7 64 64z"],
-    "Play": [384, 512, [], "solid", "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"],
-    "Pause": [320, 512, [], "solid", "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"],
+    "Function": [384, 512, [], "solid", "M314.7 32c-38.8 0-73.7 23.3-88.6 59.1L170.7 224 64 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l80 0L98.9 396.3c-5 11.9-16.6 19.7-29.5 19.7L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l37.3 0c38.8 0 73.7-23.3 88.6-59.1L213.3 288 320 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-80 0 45.1-108.3c5-11.9 16.6-19.7 29.5-19.7L352 96c17.7 0 32-14.3 32-32s-14.3-32-32-32l-37.3 0z"],
     "Stop": [384, 512, [], "solid", "M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"],
     "Image": [512, 512, [], "solid", "M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"],
     "Images": [576, 512, [], "solid", "M160 80l352 0c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16l-21.2 0L388.1 178.9c-4.4-6.8-12-10.9-20.1-10.9s-15.7 4.1-20.1 10.9l-52.2 79.8-12.4-16.9c-4.5-6.2-11.7-9.8-19.4-9.8s-14.8 3.6-19.4 9.8L175.6 336 160 336c-8.8 0-16-7.2-16-16l0-224c0-8.8 7.2-16 16-16zM96 96l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32c-35.3 0-64 28.7-64 64zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224zm208 24a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"],
-    "Function": [384, 512, [], "solid", "M314.7 32c-38.8 0-73.7 23.3-88.6 59.1L170.7 224 64 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l80 0L98.9 396.3c-5 11.9-16.6 19.7-29.5 19.7L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l37.3 0c38.8 0 73.7-23.3 88.6-59.1L213.3 288 320 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-80 0 45.1-108.3c5-11.9 16.6-19.7 29.5-19.7L352 96c17.7 0 32-14.3 32-32s-14.3-32-32-32l-37.3 0z"],
+    "Info": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"],
     "Bone": [576, 512, [], "solid", "M153.7 144.8c6.9 16.3 20.6 31.2 38.3 31.2l192 0c17.7 0 31.4-14.9 38.3-31.2C434.4 116.1 462.9 96 496 96c44.2 0 80 35.8 80 80c0 30.4-17 56.9-42 70.4c-3.6 1.9-6 5.5-6 9.6s2.4 7.7 6 9.6c25 13.5 42 40 42 70.4c0 44.2-35.8 80-80 80c-33.1 0-61.6-20.1-73.7-48.8C415.4 350.9 401.7 336 384 336l-192 0c-17.7 0-31.4 14.9-38.3 31.2C141.6 395.9 113.1 416 80 416c-44.2 0-80-35.8-80-80c0-30.4 17-56.9 42-70.4c3.6-1.9 6-5.5 6-9.6s-2.4-7.7-6-9.6C17 232.9 0 206.4 0 176c0-44.2 35.8-80 80-80c33.1 0 61.6 20.1 73.7 48.8z"],
     "Puzzle": [512, 512, [], "solid", "M192 104.8c0-9.2-5.8-17.3-13.2-22.8C167.2 73.3 160 61.3 160 48c0-26.5 28.7-48 64-48s64 21.5 64 48c0 13.3-7.2 25.3-18.8 34c-7.4 5.5-13.2 13.6-13.2 22.8c0 12.8 10.4 23.2 23.2 23.2l56.8 0c26.5 0 48 21.5 48 48l0 56.8c0 12.8 10.4 23.2 23.2 23.2c9.2 0 17.3-5.8 22.8-13.2c8.7-11.6 20.7-18.8 34-18.8c26.5 0 48 28.7 48 64s-21.5 64-48 64c-13.3 0-25.3-7.2-34-18.8c-5.5-7.4-13.6-13.2-22.8-13.2c-12.8 0-23.2 10.4-23.2 23.2L384 464c0 26.5-21.5 48-48 48l-56.8 0c-12.8 0-23.2-10.4-23.2-23.2c0-9.2 5.8-17.3 13.2-22.8c11.6-8.7 18.8-20.7 18.8-34c0-26.5-28.7-48-64-48s-64 21.5-64 48c0 13.3 7.2 25.3 18.8 34c7.4 5.5 13.2 13.6 13.2 22.8c0 12.8-10.4 23.2-23.2 23.2L48 512c-26.5 0-48-21.5-48-48L0 343.2C0 330.4 10.4 320 23.2 320c9.2 0 17.3 5.8 22.8 13.2C54.7 344.8 66.7 352 80 352c26.5 0 48-28.7 48-64s-21.5-64-48-64c-13.3 0-25.3 7.2-34 18.8C40.5 250.2 32.4 256 23.2 256C10.4 256 0 245.6 0 232.8L0 176c0-26.5 21.5-48 48-48l120.8 0c12.8 0 23.2-10.4 23.2-23.2z"],
     "Lock": [448, 512, [], "solid", "M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"],
     "LockOpen": [576, 512, [], "solid", "M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z"],
     "Shuffle": [512, 512, [], "solid", "M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"],
+    "Play": [384, 512, [], "solid", "M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"],
+    "Pause": [320, 512, [], "solid", "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"],
+    "PlusCircle": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"],
     "LogIn": [512, 512, [], "solid", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"],
     "LogOut": [512, 512, [], "solid", "M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 192 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z"],
     "MousePointer": [320, 512, [], "solid", "M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"],
     "User": [512, 512, [], "solid", "M256 288A144 144 0 1 0 256 0a144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3c0 17 13.8 30.7 30.7 30.7l450.6 0c17 0 30.7-13.8 30.7-30.7C512 392.2 439.8 320 350.7 320l-189.4 0z"],
     "HardDriveDownload": [512, 512, [], "solid", "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"],
     "HardDriveUpload": [512, 512, [], "solid", "M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"],
-    "CirclePlay": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9l0-176c0-8.7 4.7-16.7 12.3-20.9z"],
-    "CircleStop": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm192-96l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z"],
+    "CircleCheck": [512, 512, ["CheckCircle2"], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"],
+    "CirclePlay": [512, 512, [], "solid", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"],
+    "CirclePause": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM224 192l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32zm128 0l0 128c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32s32 14.3 32 32z"],
+    "CircleStop": [512, 512, [], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 160l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z"],
     "CircleDot": [512, 512, [], "solid", "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"],
+    "CircleHelp": [512, 512, ["HelpCircle"], "solid", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"],
     "Apple": [384, 512, [], "solid", "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"],
     "Chrome": [512, 512, [], "solid", "M0 256C0 209.4 12.47 165.6 34.27 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.19 98.47C101 38.53 174 0 256 0C350.8 0 433.5 51.48 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"],
     "Facebook": [512, 512, [], "solid", "M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"],
@@ -14698,7 +14901,9 @@ LX.ICONS = {
     "Chain": "Link",
     "ChainBroken": "LinkOff",
     "ChainOff": "LinkOff",
-    "Unlink": "LinkOff"
+    "Unlink": "LinkOff",
+    "HelpCircle": "CircleHelp",
+    "CheckCircle2": "CircleCheck"
 }
 
 // Alias for Lucide Icons