lexgui 0.6.12 → 0.7.1

package/examples/{immediate_ui.html → immediate-ui.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI ImUI Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/imui.js';
+    import 'lexgui/extensions/imui.js';
 
     // init library and get main area
     let area = await LX.init();

package/examples/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Examples - LexGUI.js </title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <style>
         iframe { border: none; }
     </style>
@@ -13,7 +13,7 @@
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -29,7 +29,7 @@
 
         const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
         const examples = [
-            'All Widgets',    
+            'All Components',
             'Area Tabs',
             'Asset View',
             'Code Editor',
@@ -57,7 +57,7 @@
         if( mobile )
         {
             const sheetArea = new LX.Area({ skipAppend: true });
-            panel = sheetArea.addPanel();
+            panel = sheetArea.addPanel({ className: "flex flex-col gap-2" });
             iFrameArea = area;
 
             overlayButtons.splice( 0, 0, {
@@ -70,7 +70,7 @@
         }
         else
         {
-            let [ leftArea, rightArea ] = area.split({ sizes: ["20%","80%"], resize: false });
+            let [ leftArea, rightArea ] = area.split({ sizes: ["15%","85%"], resize: false });
             leftArea.root.style.borderRight = "2px solid gray";
 
             const menubar = leftArea.addMenubar( [
@@ -78,7 +78,7 @@
             ] );
             menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
 
-            panel = leftArea.addPanel();
+            panel = leftArea.addPanel({ className: "flex flex-col gap-1" });
             iFrameArea = rightArea;
         }
 
@@ -86,7 +86,7 @@
 
         let iframe = document.createElement('iframe');
         iframe.id = iframe.name = 'viewer';
-        iframe.src = examples[0].replace(" ", "_").toLowerCase() + ".html";
+        iframe.src = examples[0].replace(" ", "-").toLowerCase() + ".html";
         iframe.style.width = "100%";
         iframe.style.height = "100%";
         iFrameArea.root.appendChild(iframe);
@@ -101,7 +101,7 @@
 
             for( let ex of examples )
             {
-                const id = ex.replace(" ", "_").toLowerCase();
+                const id = ex.replace(" ", "-").toLowerCase();
                 const options = {
                     img: "previews/" + id + ".png",
                     callback: function() {

package/examples/{node_graph.html → node-graph.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Node Graph Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/nodegraph.js';
+    import 'lexgui/extensions/nodegraph.js';
 
     // init library and get main area
     let area = await LX.init();

package/examples/{side_bar.html → side-bar.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -65,7 +65,7 @@
     }, {
         headerTitle: "jxarco",
         headerSubtitle: "alexroco.30@gmail.com",
-        headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
+        headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/favicon.png",
         footerTitle: "jxarco",
         footerSubtitle: "alexroco.30@gmail.com",
         footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",

package/examples/timeline.html

@@ -4,12 +4,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Timelines Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/components/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline } from 'lexgui/extensions/timeline.js';
 
         // init library and get main area
         let area = await LX.init();
@@ -97,7 +97,7 @@
                 ctx.font = panel.getValue('Font Size') + "px Monospace";
                 ctx.fillStyle = panel.getValue('Font Color');
     
-                // Get values from panel widgets (e.g. position value)                
+                // Get values from panel component (e.g. position value)
                 const text = panel.getValue('Text');
                 const pos2D = panel.getValue('2D Position');
                 ctx.fillText(text, pos2D[0], pos2D[1]);

package/examples/{video_editor.html → video-editor.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Video Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import { VideoEditor } from 'lexgui/components/videoeditor.js';
+    import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
     // init library and get main area
     let area = await LX.init();
 

package/examples/{video_editor2.html → video-editor2.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Video Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import { VideoEditor } from 'lexgui/components/videoeditor.js';
+    import { VideoEditor } from 'lexgui/extensions/videoeditor.js';
 
     // Init library and get main area
     let area = await LX.init();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.6.12",
+    "version": "0.7.1",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -11,7 +11,7 @@
     },
     "files": [
         "build",
-        "build/components",
+        "build/extensions",
         "examples",
         "LICENSE",
         "package.json",