lexgui 0.5.11 → 0.6.0

package/changelog.md

@@ -2,7 +2,35 @@
 
 ## dev
 
-## 0.5.11 (master)
+## 0.6.0 (master)
+
+`LX.init` now has to called using `await`.
+Use Dropdowns elements in menubar.
+Remove legacy:
+  - Removed `options.selected` in ComboButtons Widget.
+  - Removed FA icons.
+Added LucideIcons as main icon provider.
+`LX.makeIcon`: Support for solid variants in supported icons (also using `iconName@variant`).
+`LX.registerIcon`: Support for classes and attributes for svg and path elements.
+Refactor `strictViewport` to `layoutMode` (app|document) in `LX.init`.
+Added support for Sheet element (hiding dialog at the window sides).
+Support disabling layer (zindex) update in `LX.makeDraggable` using `options.updateLayers`.
+Fixed minor issues with some Nodegraph elements.
+Added `className` to `LX.sameLine(numberOfWidgets, class)` to allow customization when using `numberOfWidgets`.
+Added support for right sidebar.
+Restyled Number Widget units to avoid layout trashing when recomputing units span location.
+
+CodeEditor:
+  - Remove language images and use SVG instead.
+  - Scrolling fixes.
+  - Fixed minor css issues.
+
+Docs updated:
+  - Added interactive code examples for widgets.
+  - Improved widget list parameters and options.
+  - Added live examples for sidebar and menubar.
+
+## 0.5.11
 
 Widgets:
 - Form: Add more custom options. Fixed issue using a String as Form field.

package/demo.js

@@ -5,39 +5,39 @@ import 'lexgui/components/audio.js';
 
 window.LX = LX;
 
-const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
+const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
+
 
 // Menubar
 {
-    area.addMenubar( m => {
-
-        m.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
+    const menubar = area.addMenubar( [
+        { name: "Docs", icon: "search", kbd: "F1", callback: () => { window.open("./docs/") } }
+    ] );
 
-        m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
+    menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
 
-        const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
-            width: "256px", className: "right", buttonClass: "border left fg-tertiary bg-secondary" }
-        );
-        m.root.appendChild( commandButton.root );
+    const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
+        width: "256px", className: "right", buttonClass: "border left fg-tertiary bg-secondary" }
+    );
+    menubar.root.appendChild( commandButton.root );
 
-        const starterTheme = LX.getTheme();
+    const starterTheme = LX.getTheme();
 
-        m.addButtons( [
-            {
-                title: "Github",
-                icon: "fa-brands fa-github",
-                callback:  (event) => {
-                    window.open( "https://github.com/jxarco/lexgui.js/", "_blank" );
-                }
-            },
-            {
-                title: "Switch Theme",
-                icon: starterTheme == "dark" ? "fa-solid fa-moon" : "fa-solid fa-sun",
-                swap: starterTheme == "dark" ? "fa-solid fa-sun" : "fa-solid fa-moon",
-                callback:  (value, event) => { LX.switchTheme() }
+    menubar.addButtons( [
+        {
+            title: "Github",
+            icon: "Github@solid",
+            callback:  (event) => {
+                window.open( "https://github.com/jxarco/lexgui.js/", "_blank" );
             }
-        ], { float: "right" });
-    });
+        },
+        {
+            title: "Switch Theme",
+            icon: starterTheme == "dark" ? "Moon" : "Sun",
+            swap: starterTheme == "dark" ? "Sun" : "Moon",
+            callback:  (value, event) => { LX.switchTheme() }
+        }
+    ], { float: "right" });
 }
 
 // Header
@@ -62,34 +62,49 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
         const editorArea = new LX.Area({ className: "rounded-lg" });
         editorContainer.appendChild( editorArea.root );
 
-        editorArea.addMenubar( m => {
-            m.add( "Scene/New Scene", () => { console.log("New scene created!") });
-            m.add( "Scene/Open Scene", { icon: "fa-solid fa-folder-open", short: "S" } );
-            m.add( "Scene/Open Recent/hello.scene" );
-            m.add( "Scene/Open Recent/Old/goodbye.scene" );
-            m.add( "Scene/Open Recent/Old/salute.scene" );
-            m.add( "Project/Project Settings", { disabled: true } );
-            m.add( "Project/" );
-            m.add( "Project/Export", { icon: "fa-solid fa-download" });
-            m.add( "Project/Export/DAE", { icon: "fa-solid fa-cube", short: "D" } );
-            m.add( "Project/Export/GLTF", { short:  "G" } );
-            m.add( "Account/Login", { icon: "fa-solid fa-user" } );
-            m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1" } );
-            m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
-            m.add( "Help/Support LexGUI/Do it" );
-            m.addButtons( [
-                {
-                    title: "Play",
-                    icon: "fa-solid fa-play",
-                    swap: "fa-solid fa-stop"
-                },
-                {
-                    title: "Pause",
-                    icon: "fa-solid fa-pause",
-                    disabled: true
-                }
-            ]);
-        }, { sticky: false });
+        const menubar = editorArea.addMenubar( [
+            { name: "Scene", submenu: [
+                { name: "New Scene" },
+                { name: "Open Scene", icon: "FolderOpen", kbd: "S" },
+                { name: "Open Recent", icon: "File",  submenu: [
+                    { name: "hello.scene" },
+                    { name: "goodbye.scene" }
+                ] }
+            ] },
+            { name: "Project", submenu: [
+                { name: "Project Settings", disabled: true },
+                null,
+                { name: "Export", submenu: [
+                    { name: "DAE", icon: "Frame", kbd: "D" },
+                    { name: "GLTF", kbd:  "G" }
+                ] },
+                { name: "Export", icon: "Download" }
+            ] },
+            { name: "Editor", submenu: [
+                { name: "Autosave", checked: true, icon: "Save" },
+                { name: "Settings",  icon: "Settings2" },
+            ] },
+            { name: "Account", submenu: [
+                { name: "Login", icon: "User" },
+            ] },
+            { name: "Help", submenu: [
+                { name: "Search Help", icon: "Search", kbd:  "F1" },
+                { name: "Support LexGUI", icon: "Heart" },
+            ] },
+        ], { sticky: false });
+
+        menubar.addButtons( [
+            {
+                title: "Play",
+                icon: "Play@solid",
+                swap: "Stop@solid"
+            },
+            {
+                title: "Pause",
+                icon: "Pause@solid",
+                disabled: true
+            }
+        ]);
 
         // split main area
         const [ left, right ] = editorArea.split({ sizes:["70%","30%"], minimizable: true });
@@ -110,13 +125,13 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
         left.onresize = resizeCanvas;
         left.addOverlayButtons( [
             [
-                { name: "Select", icon: "fa fa-arrow-pointer", selectable: true },
-                { name: "Move", icon: "fa-solid fa-arrows-up-down-left-right", selectable: true },
-                { name: "Rotate", icon: "fa-solid fa-rotate-right", selectable: true }
+                { name: "Select", icon: "MousePointer", selectable: true },
+                { name: "Move", icon: "Move", selectable: true },
+                { name: "Rotate", icon: "RotateRight", selectable: true }
             ],
             { name: "Lit", options: ["Lit", "Unlit", "Wireframe"] },
             [
-                { name: "Enable Snap", icon: "fa fa-table-cells", selectable: true },
+                { name: "Enable Snap", icon: "Frame", selectable: true },
                 { name: 10, options: [10, 100, 1000] }
             ]
         ], { float: "htc" } );
@@ -153,12 +168,12 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                         'children': [
                             {
                                 'id': 'node_1_1',
-                                'icon': 'fa-solid fa-cube',
+                                'icon': 'Box',
                                 'children': [],
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'fa-solid fa-scroll'
+                                        'icon': 'Script'
                                     }
                                 ]
                             }
@@ -166,7 +181,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                     },
                     {
                         'id': 'node_2',
-                        'icon': 'fa-solid fa-circle-play',
+                        'icon': 'CirclePlay',
                         'children': []
                     }
                 ]
@@ -176,11 +191,11 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             const treeIcons = [
                 {
                     'name':'Add node',
-                    'icon': 'fa-solid fa-plus'
+                    'icon': 'Plus'
                 },
                 {
                     'name':'Instantiate scene',
-                    'icon': 'fa-solid fa-link'
+                    'icon': 'Link'
                 }
             ];
 
@@ -199,9 +214,9 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             });
 
             // add widgets to panel branch
-            panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
+            panel.branch("Canvas", { icon: "Palette", filter: true });
             panel.addColor("Background", "#b7a9b1", null);
-            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
             panel.addColor("Font Color", "#303b8d", null);
             panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
             panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "Ubuntu"], "GeistSans");
@@ -216,7 +231,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             panel.addSize("Resolution", [1280, 720], null, { units: "p", precision: 0 });
             panel.merge();
 
-            panel.branch("Node", { icon: "fa-solid fa-cube" });
+            panel.branch("Node", { icon: "Box" });
             panel.addText("Name", "node_1");
             panel.addCheckbox("Visibility", true, null, { className: "accent" });
             panel.addLayers("Layers", 10, null);
@@ -240,18 +255,18 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
         const badgeClass = "ml-auto no-bg font-medium";
 
         const sidebar = mailArea.addSidebar( m => {
-            m.add( "Inbox", { selected: true, icon: "inbox", content: LX.badge("128", badgeClass, { asElement: true }) } );
-            m.add( "Drafts", { icon: "file", content: LX.badge("9", badgeClass, { asElement: true }) } );
-            m.add( "Sent", { icon: "paper-plane" } );
-            m.add( "Junk", { icon: "box-archive-x", content: LX.badge("23", badgeClass, { asElement: true }) } );
-            m.add( "Trash", { icon: "trash-can" } );
-            m.add( "Archive", { icon: "box-archive" } );
+            m.add( "Inbox", { selected: true, icon: "Inbox", content: LX.badge("128", badgeClass, { asElement: true }) } );
+            m.add( "Drafts", { icon: "File", content: LX.badge("9", badgeClass, { asElement: true }) } );
+            m.add( "Sent", { icon: "PaperPlane" } );
+            m.add( "Junk", { icon: "ArchiveX", content: LX.badge("23", badgeClass, { asElement: true }) } );
+            m.add( "Trash", { icon: "Trash3" } );
+            m.add( "Archive", { icon: "Archive" } );
             m.separator();
-            m.add( "Social", { icon: "user", content: LX.badge("972", badgeClass, { asElement: true }) } );
-            m.add( "Updates", { icon: "circle-info", content: LX.badge("342", badgeClass, { asElement: true }) } );
-            m.add( "Forums", { icon: "comments", content: LX.badge("96", badgeClass, { asElement: true }) } );
-            m.add( "Shopping ", { icon: "shopping-cart" } );
-            m.add( "Promotions", { icon: "flag", content: LX.badge("21", badgeClass, { asElement: true }) } );
+            m.add( "Social", { icon: "User", content: LX.badge("972", badgeClass, { asElement: true }) } );
+            m.add( "Updates", { icon: "Info", content: LX.badge("342", badgeClass, { asElement: true }) } );
+            m.add( "Forums", { icon: "MessagesCircle", content: LX.badge("96", badgeClass, { asElement: true }) } );
+            m.add( "Shopping ", { icon: "ShoppingCart" } );
+            m.add( "Promotions", { icon: "Flag", content: LX.badge("21", badgeClass, { asElement: true }) } );
         }, {
             className: "border-right",
             headerTitle: "jxarco",
@@ -281,7 +296,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                 {
                     const allMailFilter = LX.makeContainer( [ "100%", "50px" ], "flex p-2", "", container );
                     const filterInput = new LX.TextInput(null, "", null,
-                        { inputClass: "outline", width: "100%", icon: "fa fa-magnifying-glass", placeholder: "Search..." }
+                        { inputClass: "outline", width: "100%", icon: "Search", placeholder: "Search..." }
                     );
                     allMailFilter.appendChild( filterInput.root );
                 }
@@ -348,15 +363,15 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
             {
                 const mailPreviewHeader = LX.makeContainer( [ "100%", "59.59px" ], "flex flex-row border-bottom p-1", "", right );
 
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "box-archive" } ).root );
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "box-archive-x" } ).root );
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to trash", tooltip: true, buttonClass: "bg-none", icon: "trash-can" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "Archive" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "ArchiveX" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to trash", tooltip: true, buttonClass: "bg-none", icon: "Trash3" } ).root );
                 mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Snooze", tooltip: true, buttonClass: "bg-none", icon: "clock" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Snooze", tooltip: true, buttonClass: "bg-none", icon: "Clock" } ).root );
 
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply", tooltip: true, buttonClass: "bg-none", className: "ml-auto", icon: "reply" } ).root );
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply all", tooltip: true, buttonClass: "bg-none", icon: "reply-all" } ).root );
-                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Forward", tooltip: true, buttonClass: "bg-none", icon: "forward" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply", tooltip: true, buttonClass: "bg-none", className: "ml-auto", icon: "Reply" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply all", tooltip: true, buttonClass: "bg-none", icon: "ReplyAll" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Forward", tooltip: true, buttonClass: "bg-none", icon: "Forward" } ).root );
                 mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", (value, event) => {
                     new LX.DropdownMenu( event.target, [
@@ -365,7 +380,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                         { name: "Add label" },
                         { name: "Mute thread" }
                     ], { side: "bottom", align: "end" });
-                }, { buttonClass: "bg-none", icon: "more" } ).root );
+                }, { buttonClass: "bg-none", icon: "EllipsisVertical" } ).root );
             }
 
             // Prewiew Info
@@ -446,7 +461,7 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
                 { name: "Priority", options: ["Low", "Medium", "High"] },
             ],
             rowActions: [
-                { icon: "edit", title: "Edit Row" },
+                { icon: "Edit", title: "Edit Row" },
                 "delete",
                 "menu"
             ],
@@ -517,8 +532,8 @@ const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
         ],
         credits: `2019-${ new Date().getUTCFullYear() } Alex Rodríguez and contributors. Website source code on GitHub.`,
         socials: [
-            { title: "Github", link: "https://github.com/jxarco/lexgui.js/", icon: `<a class="fa-brands fa-github"></a>` },
-            { title: "Discord", link: "https://discord.gg/vwqVrMZBXv", icon: `<a class="fa-brands fa-discord"></a>` }
+            { title: "Github", link: "https://github.com/jxarco/lexgui.js/", icon: "Github" },
+            { title: "Discord", link: "https://discord.gg/vwqVrMZBXv", icon: "Discord" }
         ]
     } );
 }

package/examples/all_widgets.html

@@ -30,26 +30,25 @@
     window.LX = LX;
 
     // Init library and get main area
-    let area = LX.init();
-
-    area.addMenubar(m => {
-        m.addButtons([
-            {
-                title: "Toggle Sections",
-                icon: "fa-solid fa-eye",
-                callback: (swapValue) => { closedDefault = !closedDefault; fillPanels(); }
-            },
-            {
-                title: "Change Theme",
-                icon: "fa-solid fa-moon",
-                swap: "fa-solid fa-sun",
-                callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
-            }
-        ]);
-
-        m.setButtonIcon("Github", "fa-brands fa-github", () => { window.open("https://github.com/jxarco/lexgui.js/") })
-        m.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
-    }, { sticky: false });
+    let area = await LX.init();
+
+    const menubar = area.addMenubar( [], { sticky: false } );
+    menubar.addButtons([
+        {
+            title: "Toggle Sections",
+            icon: "Eye",
+            callback: (swapValue) => { closedDefault = !closedDefault; fillPanels(); }
+        },
+        {
+            title: "Change Theme",
+            icon: "Moon",
+            swap: "Sun",
+            callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
+        }
+    ]);
+
+    menubar.setButtonIcon("Github", "Github", () => { window.open("https://github.com/jxarco/lexgui.js/") })
+    menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
 
     var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
     var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
@@ -72,9 +71,9 @@
         panelC.root.innerHTML = "";
 
         const comboValues = [
-            { value: 'left', selected: true, icon: 'fa fa-align-left' },
-            { value: 'center', icon: 'fa fa-align-center' },
-            { value: 'right', icon: 'fa fa-align-right' }
+            { value: 'left', selected: true, icon: 'AlignLeft' },
+            { value: 'center', icon: 'AlignCenter' },
+            { value: 'right', icon: 'AlignRight' }
         ];
 
         const selectValues = ["Godot", "Unity", "Unreal Engine", "Visual Studio", "Visual Studio Code"];
@@ -108,19 +107,19 @@
             buttonsLeftPanel.addButton(null, "Warning", null, { disabled: true, buttonClass: "warning" });
             buttonsLeftPanel.addButton(null, "Error", null, { disabled: true, buttonClass: "error" });
             buttonsLeftPanel.branch("Advanced Buttons", { closed: closedDefault });
-            buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "fa fa-skull" });
+            buttonsLeftPanel.addButton("Icon Button", "Not used", null, { icon: "Skull" });
             buttonsLeftPanel.sameLine();
             buttonsLeftPanel.addLabel("Customized Inline Buttons");
-            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-skull", buttonClass: "bg-none" });
-            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-cube", buttonClass: "bg-primary" });
-            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-table-cells", buttonClass: "bg-tertiary fg-tertiary" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Skull", buttonClass: "bg-none" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Box", buttonClass: "bg-primary" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Grid3x3", buttonClass: "bg-tertiary fg-tertiary" });
             buttonsLeftPanel.endLine("justify-start");
             buttonsLeftPanel.sameLine();
             buttonsLeftPanel.addLabel("Swap Buttons");
-            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-moon", swap: "fa fa-sun", buttonClass: "bg-none" });
-            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "fa fa-eye", swap: "fa fa-eye-slash" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Moon", swap: "Sun", buttonClass: "bg-none" });
+            buttonsLeftPanel.addButton(null, "Not used", null, { icon: "Eye", swap: "EyeOff" });
             buttonsLeftPanel.endLine("justify-start");
-            buttonsLeftPanel.addButton(null, LX.makeIcon("circle-plus").innerHTML + "Button with Inlined Icon", null);
+            buttonsLeftPanel.addButton(null, LX.makeIcon("CirclePlus").innerHTML + "Button with Inlined Icon", null);
             buttonsLeftPanel.addButton(null, "With a Badge" + LX.badge("+99", "accent sm"));
             buttonsRightPanel.branch("Outline Buttons", { closed: closedDefault });
             buttonsRightPanel.addButton(null, "Classic Outline", null, { buttonClass: "outline" });
@@ -265,12 +264,12 @@
                         'children': [
                             {
                                 'id': 'node_1_1',
-                                'icon': 'fa-solid fa-cube',
+                                'icon': 'Box',
                                 'children': [],
                                 'actions': [
                                     {
                                         'name': 'Open script',
-                                        'icon': 'fa-solid fa-scroll',
+                                        'icon': 'Script',
                                         'callback': function (node) {
                                             console.log(node.id + ": Script opened!")
                                         }
@@ -281,7 +280,7 @@
                     },
                     {
                         'id': 'node_2',
-                        'icon': 'fa-solid fa-circle-play',
+                        'icon': 'CirclePlay',
                         'children': []
                     },
                     {
@@ -289,12 +288,12 @@
                         'children': [
                             {
                                 'id': 'node_3_1',
-                                'icon': 'fa-solid fa-cube',
+                                'icon': 'Box',
                                 'children': []
                             },
                             {
                                 'id': 'node_3_2',
-                                'icon': 'fa-solid fa-cube',
+                                'icon': 'Box',
                                 'children': []
                             }
                         ]
@@ -306,12 +305,12 @@
             const treeIcons = [
                 {
                     'name': 'Add node',
-                    'icon': 'fa-solid fa-plus',
+                    'icon': 'Plus',
                     'callback': () => { console.log("Node added!") }
                 },
                 {
                     'name': 'Instantiate scene',
-                    'icon': 'fa-solid fa-link',
+                    'icon': 'Link',
                     'callback': () => { console.log("Scene instantiated!") }
                 }
             ];
@@ -357,7 +356,7 @@
                     { name: "Priority", options: ["Low", "Medium", "High"] },
                 ],
                 rowActions: [
-                    { icon: "edit", title: "Edit Row" },
+                    { icon: "Edit", title: "Edit Row" },
                     "delete",
                     "menu"
                 ],

package/examples/area_tabs.html

@@ -23,7 +23,7 @@
     import { LX } from 'lexgui';
 
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     // split main area
     var [leftArea, rightArea] = area.split({ sizes: ["75%", "25%"] });
@@ -84,9 +84,9 @@
     // **** **** **** **** **** **** **** **** **** **** **** **** 
 
     function fillPanelA(panel) {
-        panel.branch("Canvas", { icon: "fa-solid fa-palette", filter: true });
+        panel.branch("Canvas", { icon: "Palette", filter: true });
         panel.addColor("Background", "#b7a9b1");
-        panel.addText("Text", "Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
+        panel.addText("Text", "Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         panel.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
@@ -100,7 +100,7 @@
     }
 
     function fillPanelB(panel) {
-        panel.branch("Settings", { icon: "fa-solid fa-palette", filter: true });
+        panel.branch("Settings", { icon: "Palette", filter: true });
         panel.addTitle("Configuration (Im a title)");
         panel.addCheckbox("Toggle me", true, (value, event) => {
             console.log(value);
@@ -115,7 +115,7 @@
     }
 
     function fillPanelC(panel) {
-        panel.branch("Some Branch", { icon: "fa-solid fa-palette", filter: true });
+        panel.branch("Some Branch", { icon: "Palette", filter: true });
         panel.addTitle("C title");
         panel.addToggle("A cool Toggle", true, (value, event) => {
             console.log(value);

package/examples/asset_view.html

@@ -23,7 +23,7 @@
     import 'lexgui/components/codeeditor.js';
 
     // Init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     // Split main area
     var [topArea, bottomArea] = area.split({ type: 'vertical', sizes: ["60vh", "40vh"] });

package/examples/code_editor.html

@@ -23,7 +23,7 @@
     import 'lexgui/components/codeeditor.js';
 
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     const fileExplorer = true;
 

package/examples/dialogs.html

@@ -22,14 +22,14 @@
     import { LX } from 'lexgui';
 
     // Init library and get main area
-    let area = LX.init({ skip_default_area: true });
+    let area = await LX.init({ skip_default_area: true });
 
     LX.popup("Hello! I'm a popup dialog :)", null, { position: ["45%", "20%"] })
 
     const pocketDialog = new LX.PocketDialog("Load Settings", p => {
         p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
-        p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
+        p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
@@ -49,7 +49,7 @@
     const dialogClosable = new LX.Dialog("Closable Dialog", p => {
         p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
-        p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
+        p.addText("Text", "Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         p.addColor("Font Color", { r: 1, g: 0.1, b: 0.6 }, (value, event) => {
             console.log("Font Color: ", value);
         });
@@ -68,7 +68,7 @@
     const draggablePocketDialog = new LX.PocketDialog("Draggable PocketDialog", p => {
         p.branch("Canvas");
         p.addColor("Background", "#b7a9b1");
-        p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "fa fa-font" });
+        p.addText("Text", "Pocket Dialog Lexgui.js @jxarco", null, { placeholder: "e.g. ColorPicker", icon: "Type" });
         p.addSelect("Best Engine", ["Godot", "Unity", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Unreal Engine", "Pepe"], "Godot", (value, event) => {
             console.log(value);
         }, { filter: true });

package/examples/immediate_ui.html

@@ -23,7 +23,7 @@
     import 'lexgui/components/imui.js';
 
     // init library and get main area
-    let area = LX.init();
+    let area = await LX.init();
 
     // add canvas to area
     var canvas = document.createElement('canvas');