lexgui 0.1.36 → 0.1.37

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.36",
+    version: "0.1.37",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -25,7 +25,10 @@ LX.CURVE_MOVEOUT_CLAMP = 0;
 LX.CURVE_MOVEOUT_DELETE = 1;
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
-function round( num, n ) { return +num.toFixed( n ); }
+function round( number, precision ) { return +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
+
+LX.clamp = clamp;
+LX.round = round;
 
 function getSupportedDOMName( string )
 {
@@ -109,6 +112,8 @@ function simple_guidGenerator() {
     return (S4()+"-"+S4()+"-"+S4());
 }
 
+LX.guidGenerator = simple_guidGenerator;
+
 // Timer that works everywhere (from litegraph.js)
 if (typeof performance != "undefined") {
     LX.getTime = performance.now.bind(performance);
@@ -300,11 +305,18 @@ function create_global_searchbar( root ) {
         else
         {
             for( let c of LX.components )
-                if( LX[c].prototype.onKeyPressed ) 
+            {
+                if( !LX[c] || !LX[c].prototype.onKeyPressed )
                 {
-                    const instances = LX.CodeEditor.getInstances();
-                    for( let i of instances ) i.onKeyPressed( e );
+                    continue;
                 }
+
+                const instances = LX.CodeEditor.getInstances();
+                for( let i of instances )
+                {
+                    i.onKeyPressed( e );
+                }
+            }
         }
     });
 
@@ -631,6 +643,8 @@ class IEvent {
     }
 };
 
+LX.IEvent = IEvent;
+
 class TreeEvent {
 
     static NONE                 = 0;
@@ -2448,6 +2462,7 @@ class Widget {
     static CONTENT      = 20;
     static CUSTOM       = 21;
     static SEPARATOR    = 22;
+    static KNOB         = 23;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2456,7 +2471,7 @@ class Widget {
         Widget.PROGRESS
     ];
 
-    constructor(name, type, options) {
+    constructor( name, type, options ) {
         this.name = name;
         this.type = type;
         this.options = options;
@@ -2464,10 +2479,12 @@ class Widget {
 
     value() {
 
-        if(this.onGetValue)
+        if( this.onGetValue )
+        {
             return this.onGetValue();
+        }
 
-        console.warn("Can't get value of " + this.typeName());
+        console.warn( "Can't get value of " + this.typeName() );
     }
 
     set( value, skipCallback = false, signalName = "" ) {
@@ -2527,6 +2544,7 @@ class Widget {
             case Widget.LIST: return "List";
             case Widget.TAGS: return "Tags";
             case Widget.CURVE: return "Curve";
+            case Widget.KNOB: return "Knob";
             case Widget.CUSTOM: return this.customName;
         }
     }
@@ -5084,6 +5102,7 @@ class Panel {
      * precision: The number of digits to appear after the decimal point
      * min, max: Min and Max values for the input
      * skipSlider: If there are min and max values, skip the slider
+     * units: Unit as string added to the end of the value
      */
 
     addNumber( name, value, callback, options = {} ) {
@@ -5094,7 +5113,7 @@ class Panel {
             return +vecinput.value;
         };
         widget.onSetValue = ( newValue, skipCallback ) => {
-            vecinput.value = newValue;
+            vecinput.value = round( newValue, options.precision );
             Panel._dispatch_event( vecinput, "change", skipCallback );
         };
 
@@ -5119,27 +5138,48 @@ class Panel {
         box.className = "numberbox";
 
         let vecinput = document.createElement( 'input' );
+        vecinput.id = "number_" + simple_guidGenerator();
         vecinput.className = "vecinput";
         vecinput.min = options.min ?? -1e24;
         vecinput.max = options.max ?? 1e24;
         vecinput.step = options.step ?? "any";
         vecinput.type = "number";
-        vecinput.id = "number_" + simple_guidGenerator();
 
         if( value.constructor == Number )
         {
             value = clamp( value, +vecinput.min, +vecinput.max );
-            value = options.precision ? round( value, options.precision ) : value;
+            value = round( value, options.precision );
         }
 
         vecinput.value = vecinput.iValue = value;
         box.appendChild( vecinput );
 
-        let drag_icon = document.createElement( 'a' );
-        drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-        box.appendChild( drag_icon );
+        let measureRealWidth = function( value, paddingPlusMargin = 8 ) {
+            var i = document.createElement( "span" );
+            i.className = "lexinputmeasure";
+            i.innerHTML = value;
+            document.body.appendChild( i );
+            var rect = i.getBoundingClientRect();
+            LX.UTILS.deleteElement( i );
+            return rect.width + paddingPlusMargin;
+        }
 
-        if( options.disabled ) {
+        if( options.units )
+        {
+            let unitSpan = document.createElement( 'span' );
+            unitSpan.className = "lexunit";
+            unitSpan.innerText = options.units;
+            unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+            vecinput.unitSpan = unitSpan;
+            box.appendChild( unitSpan );
+        }
+
+        let dragIcon = document.createElement( 'a' );
+        dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+        box.appendChild( dragIcon );
+
+        if( options.disabled )
+        {
             vecinput.disabled = true;
         }
 
@@ -5154,7 +5194,7 @@ class Panel {
             slider.value = value;
             slider.addEventListener( "input", function( e ) {
                 let new_value = +this.valueAsNumber;
-                vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+                vecinput.value = round( new_value, options.precision );
                 Panel._dispatch_event( vecinput, "change" );
             }, false );
             box.appendChild( slider );
@@ -5170,7 +5210,7 @@ class Panel {
             if( e.shiftKey ) mult *= 10;
             else if( e.altKey ) mult *= 0.1;
             let new_value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) );
-            this.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+            this.value = round( new_value, options.precision );
             Panel._dispatch_event(vecinput, "change");
         }, { passive: false });
 
@@ -5183,12 +5223,20 @@ class Panel {
 
             let val = e.target.value = clamp( +e.target.valueAsNumber, +vecinput.min, +vecinput.max );
             val = options.precision ? round( val, options.precision ) : val;
-            // update slider!
+
+            // Update slider!
             if( box.querySelector( ".lexinputslider" ) )
+            {
                 box.querySelector( ".lexinputslider" ).value = val;
+            }
 
             vecinput.value = val;
 
+            if( options.units )
+            {
+                vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+            }
+
             // Reset button (default value)
             if( !skipCallback )
             {
@@ -5213,7 +5261,7 @@ class Panel {
             lastY = e.pageY;
             document.body.classList.add('nocursor');
             document.body.classList.add('noevents');
-            drag_icon.classList.remove('hidden');
+            dragIcon.classList.remove('hidden');
             e.stopImmediatePropagation();
             e.stopPropagation();
         }
@@ -5225,8 +5273,8 @@ class Panel {
                 if(e.shiftKey) mult *= 10;
                 else if(e.altKey) mult *= 0.1;
                 let new_value = (+vecinput.valueAsNumber + mult * dt);
-                vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
-                Panel._dispatch_event(vecinput, "change");
+                vecinput.value = (+new_value).toFixed( 4 ).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
+                Panel._dispatch_event( vecinput, "change" );
             }
 
             lastY = e.pageY;
@@ -5240,7 +5288,7 @@ class Panel {
             doc.removeEventListener("mouseup",inner_mouseup);
             document.body.classList.remove('nocursor');
             document.body.classList.remove('noevents');
-            drag_icon.classList.add('hidden');
+            dragIcon.classList.add('hidden');
         }
         
         container.appendChild(box);
@@ -5277,9 +5325,15 @@ class Panel {
         };
         widget.onSetValue = ( newValue, skipCallback ) => {
             const inputs = element.querySelectorAll( ".vecinput" );
+            if( inputs.length == newValue.length )
+            {
+                console.error( "Input length does not match vector length." );
+                return;
+            }
+
             for( var i = 0; i < inputs.length; ++i ) {
                 let value = newValue[ i ];
-                inputs[ i ].value = value ?? 0;
+                inputs[ i ].value = round( value, options.precision ) ?? 0;
                 Panel._dispatch_event( inputs[ i ], "change", skipCallback );
             }
         };
@@ -5319,14 +5373,14 @@ class Panel {
             if( value[ i ].constructor == Number )
             {
                 value[ i ] = clamp(value[ i ], +vecinput.min, +vecinput.max);
-                value[ i ] = options.precision ? round(value[ i ], options.precision) : value[ i ];
+                value[ i ] = round( value[ i ], options.precision );
             }
 
             vecinput.value = vecinput.iValue = value[ i ];
 
-            let drag_icon = document.createElement( 'a' );
-            drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-            box.appendChild( drag_icon );
+            let dragIcon = document.createElement( 'a' );
+            dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+            box.appendChild( dragIcon );
 
             if( options.disabled ) {
                 vecinput.disabled = true;
@@ -5342,14 +5396,17 @@ class Panel {
                 if( e.shiftKey ) mult = 10;
                 else if( e.altKey ) mult = 0.1;
 
-                if( lock_icon.locked )
+                if( locker.locked )
                 {
-                    for( let v of element.querySelectorAll(".vecinput") ) {
-                        v.value = ( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                    for( let v of element.querySelectorAll(".vecinput") )
+                    {
+                        v.value = round( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                         Panel._dispatch_event(v, "change");
                     }
-                } else {
-                    this.value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                }
+                else
+                {
+                    this.value = round( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                     Panel._dispatch_event( vecinput, "change" );
                 }
             }, { passive: false } );
@@ -5362,7 +5419,7 @@ class Panel {
                 const skipCallback = e.detail;
 
                 let val = e.target.value = clamp( e.target.value, +vecinput.min, +vecinput.max );
-                val = options.precision ? round( val, options.precision ) : val;
+                val = round( val, options.precision );
 
                 // Reset button (default value)
                 if( !skipCallback )
@@ -5371,7 +5428,7 @@ class Panel {
                     if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
                 }
 
-                if( lock_icon.locked )
+                if( locker.locked )
                 {
                     for( let v of element.querySelectorAll( ".vecinput" ) ) {
                         v.value = val;
@@ -5399,7 +5456,7 @@ class Panel {
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
-                drag_icon.classList.remove('hidden');
+                dragIcon.classList.remove('hidden');
                 e.stopImmediatePropagation();
                 e.stopPropagation();
             }
@@ -5411,14 +5468,14 @@ class Panel {
                     if(e.shiftKey) mult = 10;
                     else if(e.altKey) mult = 0.1;
 
-                    if( lock_icon.locked )
+                    if( locker.locked )
                     {
                         for( let v of element.querySelectorAll(".vecinput") ) {
-                            v.value = (+v.valueAsNumber + mult * dt).toPrecision(5);
+                            v.value = round( +v.valueAsNumber + mult * dt, options.precision );
                             Panel._dispatch_event(v, "change");
                         }
                     } else {
-                        vecinput.value = (+vecinput.valueAsNumber + mult * dt).toPrecision(5);
+                        vecinput.value = round( +vecinput.valueAsNumber + mult * dt, options.precision );
                         Panel._dispatch_event(vecinput, "change");
                     }
                 }
@@ -5428,23 +5485,23 @@ class Panel {
                 e.preventDefault();
             }
 
-            function inner_mouseup(e) {
+            function inner_mouseup( e ) {
                 var doc = that.root.ownerDocument;
                 doc.removeEventListener("mousemove",inner_mousemove);
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
                 document.body.classList.remove('noevents');
-                drag_icon.classList.add('hidden');
+                dragIcon.classList.add('hidden');
             }
             
-            box.appendChild(vecinput);
-            container.appendChild(box);
+            box.appendChild( vecinput );
+            container.appendChild( box );
         }
 
-        let lock_icon = document.createElement('a');
-        lock_icon.className = "fa-solid fa-lock-open lexicon";
-        container.appendChild(lock_icon);
-        lock_icon.addEventListener("click", function(e) {
+        let locker = document.createElement('a');
+        locker.className = "fa-solid fa-lock-open lexicon";
+        container.appendChild(locker);
+        locker.addEventListener("click", function(e) {
             this.locked = !this.locked;
             if(this.locked){
                 this.classList.add("fa-lock");
@@ -5455,7 +5512,7 @@ class Panel {
             }
         }, false);
         
-        element.appendChild(container);
+        element.appendChild( container );
 
         return widget;
     }
@@ -6380,7 +6437,8 @@ class ContextMenu {
         this.items = [];
         this.colors = {};
 
-        if(title) {
+        if( title )
+        {
             const item = {};
             item[ title ] = [];
             item[ 'className' ] = "cmtitle";
@@ -6395,7 +6453,7 @@ class ContextMenu {
         
         if(!useAbsolute)
         {   
-            let width = rect.width + 36; // this has paddings
+            let width = rect.width;
             if(window.innerWidth - rect.right < 0)
                 div.style.left = (window.innerWidth - width - margin) + "px";
 
@@ -6436,7 +6494,6 @@ class ContextMenu {
         contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
         // Set final width
-        // contextmenu.style.width = contextmenu.offsetWidth + "px";
         this._adjust_position( contextmenu, 6, true );
     }
 
@@ -6510,7 +6567,7 @@ class ContextMenu {
     }
 
     onCreate() {
-        this._adjust_position( this.root, 6 );
+        doAsync( () => this._adjust_position( this.root, 6 ) );
     }
 
     add( path, options = {} ) {
@@ -6615,10 +6672,12 @@ LX.ContextMenu = ContextMenu;
 function addContextMenu( title, event, callback, options )
 {
     var menu = new ContextMenu( event, title, options );
-    LX.root.appendChild(menu.root);
+    LX.root.appendChild( menu.root );
 
-    if(callback)
+    if( callback )
+    {
         callback( menu );
+    }
 
     menu.onCreate();
 

package/changelog.md

@@ -1,8 +1,18 @@
 # lexgui.js changelog
 
-## 0.1.37 (dev)
+## 0.1.37
 
+Audio:
+- Start new audio widgets (Knob wip).
 
+Timeline:
+- Major refactor of Timeline
+- Fixed examples
+
+Allow unit labels for Number widgets.
+Fixed Number/Vector precision.
+Fixed ContextMenu position on creation over window size.
+Minor bug fixes.
 
 ## 0.1.36 (master)
 

package/demo.js

@@ -1,6 +1,7 @@
 import { LX } from 'lexgui';
 import 'lexgui/components/codeeditor.js';
 import 'lexgui/components/timeline.js';
+import 'lexgui/components/audio.js';
 
 window.LX = LX;
 
@@ -477,6 +478,7 @@ function fillPanel( panel ) {
     panel.branch("Preferences", {icon: "fa-solid fa-gear"});
     panel.addButton(null, "Click me, Im Full Width...");
     panel.addText("Text", "Warning text", null, { warning: true });
+    panel.addKnob("A Knob", 4, 0, 200, value => { console.log(value) }, /*{ size: 'sm' }*/);
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
@@ -547,7 +549,7 @@ function fillPanel( panel ) {
     });
     panel.addNumber("Font Size", 36, (value, event) => {
         console.log(value);
-    }, { min: 1, max: 48, step: 1});
+    }, { min: 1, max: 48, step: 1, units: "px"});
     panel.addVector2("2D Position", [250, 350], (value, event) => {
         console.log(value);
     }, { min: 0, max: 1024 });

package/examples/timeline.html

@@ -18,7 +18,7 @@
     <script type="module">
 
         import { LX } from 'lexgui';
-        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline, CurvesKeyFramesTimeline } from 'lexgui/components/timeline.js';
+        import { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline } from 'lexgui/components/timeline.js';
 
         // init library and get main area
         let area = LX.init();
@@ -123,8 +123,16 @@
                 console.log(value);
             }, { min: 1, max: 48, step: 1});
             panel.addVector2("2D Position", position, (value, event) => {
-           
-                activeTimeline.updateSelectedKeyframe(value);
+                let currentSelection = activeTimeline.lastKeyFramesSelected[0];
+                if( currentSelection ){
+                    const track = activeTimeline.animationClip.tracks[0];
+                    const keyframe = currentSelection[2];
+                    const dim = track.dim;
+                    
+                    track.values[keyframe * track.dim] = value[0];
+                    track.values[keyframe * track.dim + 1] = value[1];
+                    track.edited[keyframe] = true;
+                }
             }, { min: 0, max: 1024 });
             panel.branch_open = true;
             panel.merge();
@@ -177,7 +185,7 @@
             keyframesPanel.onresize = () => {
                 kfTimeline.resize();
             }
-            let kfTimeline = new LX.KeyFramesTimeline('', {
+            let kfTimeline = new LX.KeyFramesTimeline('keyframesTimeline', {
                 disableNewTracks: true,
                 onBeforeCreateTopBar: (panel) => {
                     panel.addDropdown("Animation", ["Anim 1", "Anim 2", "Anim 3"], "Anim 1", ()=> {})
@@ -189,13 +197,13 @@
             });
 
             keyframesPanel.attach(kfTimeline.root);
+            kfTimeline.setAnimationClip({tracks: [{name: "Font.position", values: [250, 450, 250, 250, 250, 450], times: [0, 0.5, 1.0]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1]}, {name: "Item 3.position", values: [0,1,0,0,0,0], times: [0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [ 0.1, 0.2, 0.3]}], duration: 1});
             kfTimeline.setSelectedItems(["Font", "Item 2", "Item 3"]);
-            kfTimeline.setAnimationClip({tracks: [{name: "Font.position", values: [250, 350, 250, 250, 250, 350], times: [0, 0.1, 0.2]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1]}, {name: "Item 3.position", values: [0,1,0,0,0,0], times: [0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [ 0.1, 0.2, 0.3]}], duration: 1});
             activeTimeline = kfTimeline;
             kfTimeline.show();
             
             
-            kfTimeline.onSelectKeyFrame = (data, currentSelection, keyFrameIndex) => {
+            kfTimeline.onSelectKeyFrame = (data, currentSelection) => {
                 if(data.multipleSelection) {
                     rightArea.hide();
                     return;
@@ -209,6 +217,8 @@
                 let values = kfTimeline.animationClip.tracks[id].values;
                 const dim = kfTimeline.animationClip.tracks[id].dim;
                 
+                //currentSelection == [track.name, track.idx, frameIdx, track.clipIdx, track.times[frameIdx]]
+                const keyFrameIndex = currentSelection[2];
                 position = values.slice(keyFrameIndex * dim, keyFrameIndex * dim + dim);
                 fillPanel(panel);
                 //kfTimeline.animationClip.tracks[currentSelection[0][0]];
@@ -216,21 +226,23 @@
             
             kfTimeline.onSetTime = ( time ) => {
                 rightArea.show();
-                const frametime = kfTimeline.getNearestKeyFrame( kfTimeline.animationClip.tracks[0], time);
-                let keyframe = kfTimeline.animationClip.tracks[0].times.indexOf(frametime);
-                let values = kfTimeline.animationClip.tracks[0].values;
-                let valueX = values[keyframe * 2];
-                let valueY = values[keyframe * 2 + 1];
-                if(keyframe != undefined) {
-                    let t = Math.abs(frametime - time);
-                    let sign = frametime - time > 0 ? -1 : 1;
-                    const nearestFrame = keyframe * 2 + sign;
-                    if (nearestFrame <= values.length - 2 && nearestFrame >= 0) {
-                        valueX =  valueX * (1 - t) + values[keyframe * 2 + sign] * t;                    
-                        valueY =  valueY * (1 - t) + values[keyframe * 2 + sign + 1] * t;                                        
+                const keyframe = kfTimeline.getNearestKeyFrame( kfTimeline.animationClip.tracks[0], time, -1);
+                if(keyframe != -1) {
+                    const trackLength = kfTimeline.animationClip.tracks[0].times.length;
+                    const nextKeyframe = keyframe < (trackLength-1) ? (keyframe + 1) : keyframe;
+                    const frametime = kfTimeline.animationClip.tracks[0].times[keyframe];
+                    const nextframeTime = kfTimeline.animationClip.tracks[0].times[nextKeyframe];
+
+                    let t = 1;
+                    if ( keyframe < trackLength-1){
+                       t = (time - frametime) / (nextframeTime - frametime);
                     }
+
+                    let values = kfTimeline.animationClip.tracks[0].values;
+                    let valueX = values[keyframe * 2] * (1-t) + t * values[nextKeyframe * 2];
+                    let valueY = values[keyframe * 2 + 1] * (1-t) + t * values[nextKeyframe * 2 + 1];
+                    position = [valueX, valueY];
                 }
-                position = [valueX, valueY];
                 fillPanel( panel );
             }
         }
@@ -282,10 +294,10 @@
 
             }});
 
-            let curvesTimeline = new LX.CurvesKeyFramesTimeline("curves-timeline", { range: [-1,1]});
+            let curvesTimeline = new LX.CurvesTimeline("curves-timeline", { range: [-1,1]});
             curvesPanel.attach(curvesTimeline.root);
-            curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
             curvesTimeline.setAnimationClip({tracks: [{name: "Item 1.position", values: [0,1,0,-1], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1, 0.2, 0.3, 0.8]}, {name: "Item 3.position", values: [0,0,1], times: [0]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.3]}], duration: 1});
+            curvesTimeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
             curvesTimeline.show();
             curvesTimeline.draw(0);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.36",
+    "version": "0.1.37",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",