lexgui 8.2.1 → 8.2.3

package/build/lexgui.all.module.js

@@ -12,7 +12,7 @@ const g$2 = globalThis;
 let LX = g$2.LX;
 if (!LX) {
     LX = {
-        version: '8.2.1',
+        version: '8.2.3',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar
@@ -449,6 +449,7 @@ let BaseComponent$1 = class BaseComponent {
     onGetValue;
     onAllowPaste;
     onResize;
+    onSetDisabled;
     _initialValue;
     static NO_CONTEXT_TYPES = [
         ComponentType$1.BUTTON,
@@ -517,6 +518,7 @@ let BaseComponent$1 = class BaseComponent {
         }
         this.root = root;
         this.root.jsInstance = this;
+        this.disabled = options.disabled ?? false;
         this.options = options;
     }
     static _dispatchEvent(element, type, data, bubbles, cancelable) {
@@ -677,6 +679,12 @@ let BaseComponent$1 = class BaseComponent {
         }
         console.error(`Unknown Component type: ${this.type}`);
     }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+        if (this.onSetDisabled) {
+            this.onSetDisabled(disabled);
+        }
+    }
     refresh(value) {
     }
 };
@@ -748,6 +756,7 @@ class Button extends BaseComponent$1 {
         var wValue = LX.makeElement('button', LX.mergeClass(['lexbutton', 'inline-flex', 'items-center', 'justify-center', 'whitespace-nowrap', 'transition-all', 'disabled:pointer-events-none',
             'disabled:opacity-50', '[&_svg]:pointer-events-none', 'shrink-0', '[&_svg]:shrink-0', 'outline-none', 'select-none', 'cursor-pointer',
             'font-medium', 'text-sm', 'border-1', 'h-9', 'px-2', 'overflow-hidden', 'bg-clip-padding'].join(' '), options.buttonClass ?? 'outline'));
+        wValue.disabled = this.disabled;
         wValue.title = options.tooltip ? '' : (options.title ?? '');
         this.root.appendChild(wValue);
         if (options.selected) {
@@ -806,10 +815,6 @@ class Button extends BaseComponent$1 {
                 };
             });
         }
-        if (options.disabled) {
-            this.disabled = true;
-            wValue.setAttribute('disabled', true);
-        }
         let trigger = wValue;
         if (options.swap) {
             wValue.classList.add('swap');
@@ -1469,6 +1474,7 @@ class NumberInput extends BaseComponent$1 {
         vecinput.max = options.max ?? 1e24;
         vecinput.step = options.step ?? 'any';
         vecinput.type = 'number';
+        vecinput.disabled = this.disabled;
         if (value.constructor == Number) {
             value = LX.clamp(value, +vecinput.min, +vecinput.max);
             value = LX.round(value, options.precision);
@@ -1481,9 +1487,6 @@ class NumberInput extends BaseComponent$1 {
             let unitBox = LX.makeContainer(['auto', 'auto'], 'px-2 bg-card content-center break-keep', options.units, valueBox);
             vecinput.unitBox = unitBox;
         }
-        if (options.disabled) {
-            this.disabled = vecinput.disabled = true;
-        }
         // Add slider below
         if (!options.skipSlider && options.min !== undefined && options.max !== undefined) {
             let sliderBox = LX.makeContainer(['100%', 'auto'], 'z-1 input-box', '', box);
@@ -1598,6 +1601,7 @@ LX.NumberInput = NumberInput;
  */
 class TextInput extends BaseComponent$1 {
     valid;
+    input;
     _triggerEvent;
     _lastValueTriggered;
     constructor(name, value, callback, options = {}) {
@@ -1636,13 +1640,12 @@ class TextInput extends BaseComponent$1 {
         container.style.display = 'flex';
         container.style.position = 'relative';
         this.root.appendChild(container);
-        this.disabled = (options.disabled || options.warning) ?? (options.url ? true : false);
+        // override disabled (default is options.disable)
+        this.disabled = (this.disabled || options.warning) ?? (options.url ? true : false);
         let wValue = null;
         if (!this.disabled) {
             wValue = LX.makeElement('input', LX.mergeClass('lextext text-sm', options.inputClass));
             wValue.type = options.type || '';
-            wValue.value = value || '';
-            wValue.style.textAlign = options.float ?? '';
             wValue.setAttribute('placeholder', options.placeholder ?? '');
             if (options.required) {
                 wValue.setAttribute('required', options.required);
@@ -1689,17 +1692,46 @@ class TextInput extends BaseComponent$1 {
         else {
             wValue = document.createElement('input');
             wValue.disabled = true;
-            wValue.value = value;
-            wValue.style.textAlign = options.float ?? '';
             wValue.className = LX.mergeClass('lextext ellipsis-overflow', options.inputClass);
         }
         if (options.fit) {
             wValue.classList.add('field-sizing-content');
         }
+        if (wValue instanceof HTMLInputElement) {
+            wValue.name = options.name;
+            wValue.value = value ?? '';
+            if (options.autocomplete) {
+                wValue.autocomplete = options.autocomplete;
+            }
+            else if (wValue.type === 'password') {
+                // allow password managers by default
+                wValue.autocomplete = 'current-password';
+            }
+            else if (options.name === 'username' || options.name === 'email') {
+                wValue.autocomplete = options.name;
+            }
+            else {
+                // neutral default, don't break browser heuristics
+                wValue.autocomplete = 'on';
+            }
+            wValue.style.textAlign = options.float ?? '';
+            wValue.addEventListener('transitionstart', (e) => {
+                if (e.propertyName === 'background-color' &&
+                    wValue.matches(':-webkit-autofill')) {
+                    this.syncFromDOM();
+                }
+            });
+        }
         Object.assign(wValue.style, options.style ?? {});
         container.appendChild(wValue);
+        this.input = wValue;
         LX.doAsync(this.onResize.bind(this));
     }
+    syncFromDOM(skipCallback = true) {
+        if (this.input instanceof HTMLInputElement) {
+            this.set(this.input.value, skipCallback);
+        }
+    }
 }
 LX.TextInput = TextInput;
 
@@ -1843,7 +1875,7 @@ class Select extends BaseComponent$1 {
             if (filter) {
                 filter.root.querySelector('input').focus();
             }
-        }, { buttonClass: 'outline [&_a]:ml-auto', skipInlineCount: true, disabled: options.disabled });
+        }, { buttonClass: 'outline [&_a]:ml-auto', skipInlineCount: true, disabled: this.disabled });
         selectedOption.root.style.width = '100%';
         selectedOption.root.querySelector('button').appendChild(LX.makeIcon('Down', { svgClass: 'sm' }));
         container.appendChild(selectedOption.root);
@@ -2067,36 +2099,40 @@ class ArrayInput extends BaseComponent$1 {
                         component = new TextInput(i + '', value, function (value) {
                             values[i] = value;
                             callback(values);
-                        }, { nameWidth: '12px', className: 'p-0', skipReset: true });
+                        }, { nameWidth: '12px', className: 'p-0', disabled: this.disabled, skipReset: true });
                         break;
                     case Number:
                         component = new NumberInput(i + '', value, function (value) {
                             values[i] = value;
                             callback(values);
-                        }, { nameWidth: '12px', className: 'p-0', skipReset: true });
+                        }, { nameWidth: '12px', className: 'p-0', disabled: this.disabled, skipReset: true });
                         break;
                     case 'select':
                         component = new Select(i + '', options.innerValues, value, function (value) {
                             values[i] = value;
                             callback(values);
-                        }, { nameWidth: '12px', className: 'p-0', skipReset: true });
+                        }, { nameWidth: '12px', className: 'p-0', disabled: this.disabled, skipReset: true });
                         break;
                 }
                 console.assert(component, `Value of type ${baseclass} cannot be modified in ArrayInput`);
                 arrayItems.appendChild(component.root);
-                const removeComponent = new Button(null, '', (v, event) => {
-                    values.splice(values.indexOf(value), 1);
+                if (!this.disabled) {
+                    const removeComponent = new Button(null, '', (v, event) => {
+                        values.splice(values.indexOf(value), 1);
+                        this._updateItems();
+                        this._trigger(new IEvent$1(name, values, event), callback);
+                    }, { buttonClass: 'ghost sm p-0', title: 'Remove item', icon: 'Trash2' });
+                    component.root.appendChild(removeComponent.root);
+                }
+            }
+            if (!this.disabled) {
+                const addButton = new Button(null, LX.makeIcon('Plus', { svgClass: 'sm' }).innerHTML + 'Add item', (v, event) => {
+                    values.push(options.innerValues ? options.innerValues[0] : '');
                     this._updateItems();
                     this._trigger(new IEvent$1(name, values, event), callback);
-                }, { buttonClass: 'ghost xs p-0', title: 'Remove item', icon: 'Trash2' });
-                component.root.appendChild(removeComponent.root);
+                }, { buttonClass: 'ghost' });
+                arrayItems.appendChild(addButton.root);
             }
-            const addButton = new Button(null, LX.makeIcon('Plus', { svgClass: 'sm' }).innerHTML + 'Add item', (v, event) => {
-                values.push(options.innerValues ? options.innerValues[0] : '');
-                this._updateItems();
-                this._trigger(new IEvent$1(name, values, event), callback);
-            }, { buttonClass: 'ghost' });
-            arrayItems.appendChild(addButton.root);
         };
         this._updateItems();
     }
@@ -2191,7 +2227,7 @@ class Checkbox extends BaseComponent$1 {
         let checkbox = LX.makeElement('input', LX.mergeClass('lexcheckbox rounded-xl', options.className ?? 'primary'));
         checkbox.type = 'checkbox';
         checkbox.checked = value;
-        checkbox.disabled = options.disabled ?? false;
+        checkbox.disabled = this.disabled;
         container.appendChild(checkbox);
         LX.makeElement('span', 'text-sm', options.label ?? 'On', container);
         checkbox.addEventListener('change', (e) => {
@@ -2826,7 +2862,7 @@ class ColorInput extends BaseComponent$1 {
         let sampleContainer = LX.makeContainer(['18px', '18px'], 'flex flex-row rounded overflow-hidden', '', container);
         sampleContainer.tabIndex = '1';
         sampleContainer.addEventListener('click', (e) => {
-            if ((options.disabled ?? false)) {
+            if (this.disabled) {
                 return;
             }
             this._popover = new Popover(sampleContainer, [this.picker]);
@@ -2850,7 +2886,7 @@ class ColorInput extends BaseComponent$1 {
             this.set(v);
             delete this._skipTextUpdate;
             this.picker.fromHexColor(v);
-        }, { width: 'calc( 100% - 24px )', disabled: options.disabled });
+        }, { width: 'calc( 100% - 24px )', disabled: this.disabled });
         textComponent.root.style.marginLeft = '6px';
         container.appendChild(textComponent.root);
         LX.doAsync(this.onResize.bind(this));
@@ -2987,15 +3023,13 @@ class Counter extends BaseComponent$1 {
         const input = LX.makeElement('input', 'lexcounter w-12 bg-card px-2 text-foreground', '', container);
         input.type = 'number';
         input.value = value;
-        if (options.disabled) {
-            input.setAttribute('disabled', 'true');
-        }
+        input.disabled = this.disabled;
         const substrButton = new Button(null, '', (value, e) => {
             let mult = step ?? 1;
             if (e.shiftKey)
                 mult *= 10;
             this.set(this.count - mult, false, e);
-        }, { disabled: options.disabled, className: `p-0 ${options.disabled ? '' : 'hover:bg-secondary'} border-l-color border-r-color`,
+        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} border-l-color border-r-color`,
             buttonClass: 'px-0 bg-none h-7', icon: 'Minus' });
         container.appendChild(substrButton.root);
         const addButton = new Button(null, '', (value, e) => {
@@ -3003,7 +3037,7 @@ class Counter extends BaseComponent$1 {
             if (e.shiftKey)
                 mult *= 10;
             this.set(this.count + mult, false, e);
-        }, { disabled: options.disabled, className: `p-0 ${options.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`,
+        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`,
             buttonClass: 'px-0 bg-none h-7', icon: 'Plus' });
         container.appendChild(addButton.root);
     }
@@ -3752,7 +3786,7 @@ class DatePicker extends BaseComponent$1 {
             const calendarIcon = LX.makeIcon('Calendar');
             const calendarButton = new Button(null, d0, () => {
                 this._popover = new Popover(calendarButton.root, [this.calendar]);
-            }, { buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
+            }, { disabled: this.disabled, buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
             calendarButton.root.querySelector('button').appendChild(calendarIcon);
             calendarButton.root.style.width = '100%';
             container.appendChild(calendarButton.root);
@@ -3763,7 +3797,7 @@ class DatePicker extends BaseComponent$1 {
                 const calendarIcon = LX.makeIcon('Calendar');
                 const calendarButton = new Button(null, d1, () => {
                     this._popover = new Popover(calendarButton.root, [this.calendar]);
-                }, { buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
+                }, { disabled: this.disabled, buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
                 calendarButton.root.querySelector('button').appendChild(calendarIcon);
                 calendarButton.root.style.width = '100%';
                 container.appendChild(calendarButton.root);
@@ -4134,7 +4168,7 @@ class FileInput extends BaseComponent$1 {
         let input = document.createElement('input');
         input.className = 'lexfileinput';
         input.type = 'file';
-        input.disabled = options.disabled ?? false;
+        input.disabled = this.disabled;
         this.root.appendChild(input);
         if (options.placeholder) {
             input.placeholder = options.placeholder;
@@ -4184,7 +4218,7 @@ class FileInput extends BaseComponent$1 {
                         root.remove();
                         settingsDialog = null;
                     } });
-            }, { skipInlineCount: true, title: 'Settings', disabled: options.disabled, icon: 'Settings' });
+            }, { skipInlineCount: true, title: 'Settings', disabled: this.disabled, icon: 'Settings' });
             this.root.appendChild(settingButton.root);
         }
         LX.doAsync(this.onResize.bind(this));
@@ -4198,6 +4232,9 @@ LX.FileInput = FileInput;
  * @description Form Component
  */
 class Form extends BaseComponent$1 {
+    data;
+    formData = {};
+    primaryButton;
     constructor(name, data, callback, options = {}) {
         if (data.constructor != Object) {
             console.error('Form data must be an Object');
@@ -4207,10 +4244,10 @@ class Form extends BaseComponent$1 {
         options.hideName = true;
         super(ComponentType$1.FORM, name, null, options);
         this.onGetValue = () => {
-            return container.formData;
+            return this.formData;
         };
         this.onSetValue = (newValue, skipCallback, event) => {
-            container.formData = newValue;
+            this.formData = newValue;
             const entries = container.querySelectorAll('.lexcomponent');
             for (let i = 0; i < entries.length; ++i) {
                 const entry = entries[i];
@@ -4226,7 +4263,6 @@ class Form extends BaseComponent$1 {
         let container = document.createElement('div');
         container.className = 'flex flex-col gap-1';
         container.style.width = '100%';
-        container.formData = {};
         this.root.appendChild(container);
         for (let entry in data) {
             let entryData = data[entry];
@@ -4244,42 +4280,68 @@ class Form extends BaseComponent$1 {
                 container.appendChild(label.root);
             }
             entryData.textComponent = new TextInput(null, entryData.constructor == Object ? entryData.value : entryData, (value, event) => {
-                container.formData[entry] = value;
-                if (entryData.submit && event.constructor === KeyboardEvent) {
-                    primaryButton?.click();
+                this.formData[entry] = value;
+                if (entryData.submit && event?.constructor === KeyboardEvent) {
+                    this.submit();
                 }
             }, entryData);
             container.appendChild(entryData.textComponent.root);
-            container.formData[entry] = entryData.constructor == Object ? entryData.value : entryData;
+            this.formData[entry] = entryData.constructor == Object ? entryData.value : entryData;
         }
         const buttonContainer = LX.makeContainer(['100%', 'auto'], 'flex flex-row mt-2', '', container);
         if (options.secondaryActionName || options.secondaryActionCallback) {
             const secondaryButton = new Button(null, options.secondaryActionName ?? 'Cancel', (value, event) => {
                 if (options.secondaryActionCallback) {
-                    options.secondaryActionCallback(container.formData, event);
+                    options.secondaryActionCallback(this.formData, event);
                 }
             }, { width: '100%', minWidth: '0', buttonClass: options.secondaryButtonClass ?? 'secondary' });
             buttonContainer.appendChild(secondaryButton.root);
         }
-        const primaryButton = new Button(null, options.primaryActionName ?? 'Submit', (value, event) => {
+        // This is basically the "submit" button
+        this.primaryButton = new Button(null, options.primaryActionName ?? 'Submit', (value, event) => {
             const errors = [];
             for (let entry in data) {
                 let entryData = data[entry];
                 const pattern = entryData.pattern;
-                const matchField = pattern?.fieldMatchName ? container.formData[pattern.fieldMatchName] : undefined;
+                const matchField = pattern?.fieldMatchName ? this.formData[pattern.fieldMatchName] : undefined;
                 if (!entryData.textComponent.valid(undefined, matchField)) {
                     const err = { entry, type: 'input_not_valid', messages: [] };
                     if (pattern) {
-                        err.messages = LX.validateValueAtPattern(container.formData[entry], pattern, matchField);
+                        err.messages = LX.validateValueAtPattern(this.formData[entry], pattern, matchField);
                     }
                     errors.push(err);
                 }
             }
             if (callback) {
-                callback(container.formData, errors, event);
+                callback(this.formData, errors, event);
             }
         }, { width: '100%', minWidth: '0', buttonClass: options.primaryButtonClass ?? 'primary' });
-        buttonContainer.appendChild(primaryButton.root);
+        buttonContainer.appendChild(this.primaryButton.root);
+        if (!(options.skipEnterSubmit ?? false)) {
+            this.root.addEventListener('keydown', (e) => {
+                if (e.key !== 'Enter' || e.shiftKey)
+                    return;
+                const target = e.target;
+                if (target.tagName === 'TEXTAREA')
+                    return;
+                e.preventDefault();
+                this.submit();
+            });
+        }
+        this.data = data;
+    }
+    submit() {
+        this.syncInputs();
+        this.primaryButton?.click();
+    }
+    syncInputs() {
+        for (const entry in this.data) {
+            const component = this.data[entry].textComponent;
+            if (component instanceof TextInput) {
+                component.syncFromDOM();
+                this.formData[entry] = component.value();
+            }
+        }
     }
 }
 LX.Form = Form;
@@ -4318,9 +4380,10 @@ class Layers extends BaseComponent$1 {
                 binary = '0' + binary;
             }
             for (let bit = 0; bit < maxBits; ++bit) {
-                let layer = document.createElement('div');
-                layer.className =
-                    'lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg';
+                let layer = document.createElement('button');
+                layer.className = `lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg select-none 
+                    disabled:pointer-events-none disabled:opacity-50`;
+                layer.disabled = this.disabled;
                 if (val != undefined) {
                     const valueBit = binary[maxBits - bit - 1];
                     if (valueBit != undefined && valueBit == '1') {
@@ -4391,8 +4454,9 @@ class List extends BaseComponent$1 {
                     icon = itemValue[1];
                     itemValue = itemValue[0];
                 }
-                let listElement = document.createElement('div');
-                listElement.className = 'lexlistitem' + (value == itemValue ? ' selected' : '');
+                let listElement = document.createElement('button');
+                listElement.className = `lexlistitem disabled:pointer-events-none disabled:opacity-50 ${(value == itemValue) ? 'selected' : ''}`;
+                listElement.disabled = this.disabled;
                 if (icon) {
                     listElement.appendChild(LX.makeIcon(icon));
                 }
@@ -4851,10 +4915,10 @@ class Map2D extends BaseComponent$1 {
         container.className = 'lexmap2d';
         this.root.appendChild(container);
         this.map2d = new CanvasMap2D(points, callback, options);
-        const calendarIcon = LX.makeIcon('SquareMousePointer');
+        const calendarIcon = LX.makeIcon(options.mapIcon ?? 'SquareMousePointer');
         const calendarButton = new Button(null, 'Open Map', () => {
             this._popover = new Popover(calendarButton.root, [this.map2d]);
-        }, { buttonClass: `outline justify-between` });
+        }, { buttonClass: `outline justify-between`, disabled: this.disabled });
         calendarButton.root.querySelector('button').appendChild(calendarIcon);
         container.appendChild(calendarButton.root);
         LX.doAsync(this.onResize.bind(this));
@@ -5409,7 +5473,7 @@ class NodeTree {
             return;
         }
         // Element should exist, since tree was refreshed to show it
-        const el = this.domEl.querySelector('#' + id);
+        const el = this.domEl.querySelector('#' + LX.getSupportedDOMName(id));
         console.assert(el, "NodeTree: Can't select node " + id);
         el.classList.add('selected');
         this.selected = [el.treeData];
@@ -5536,7 +5600,6 @@ class OTPInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
-        this.disabled = options.disabled ?? false;
         const container = document.createElement('div');
         container.className = 'lexotp flex flex-row items-center';
         this.root.appendChild(container);
@@ -5647,17 +5710,18 @@ class Pad extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
-        var container = document.createElement('div');
+        let container = document.createElement('div');
         container.className = 'lexpad';
         this.root.appendChild(container);
         let pad = document.createElement('div');
         pad.id = 'lexpad-' + name;
-        pad.className = 'lexinnerpad';
+        pad.className = 'lexinnerpad data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 border-color';
         pad.style.width = options.padSize ?? '96px';
         pad.style.height = options.padSize ?? '96px';
+        pad.dataset['disabled'] = this.disabled.toString();
         container.appendChild(pad);
         let thumb = document.createElement('div');
-        thumb.className = 'lexpadthumb';
+        thumb.className = 'lexpadthumb opacity-inherit';
         thumb.value = new vec2$3(value[0], value[1]);
         thumb.min = options.min ?? 0;
         thumb.max = options.max ?? 1;
@@ -5850,7 +5914,7 @@ class RadioGroup extends BaseComponent$1 {
             container.appendChild(optionItem);
             const optionButton = document.createElement('button');
             optionButton.className = 'flex p-0 rounded-lg cursor-pointer';
-            optionButton.disabled = options.disabled ?? false;
+            optionButton.disabled = this.disabled;
             optionItem.appendChild(optionButton);
             optionButton.addEventListener('click', (e) => {
                 this.set(i, false, e);
@@ -5962,7 +6026,7 @@ class RangeInput extends BaseComponent$1 {
         slider.max = options.max ?? 100;
         slider.step = options.step ?? 1;
         slider.type = 'range';
-        slider.disabled = options.disabled ?? false;
+        slider.disabled = this.disabled;
         if (value.constructor == Number) {
             value = LX.clamp(value, +slider.min, +slider.max);
         }
@@ -6021,7 +6085,7 @@ class RangeInput extends BaseComponent$1 {
             maxSlider.max = options.max ?? 100;
             maxSlider.step = options.step ?? 1;
             maxSlider.type = 'range';
-            maxSlider.disabled = options.disabled ?? false;
+            maxSlider.disabled = this.disabled;
             this._maxSlider = maxSlider;
             let maxRangeValue = ogValue[1];
             maxSlider.value = maxRangeValue = LX.clamp(maxRangeValue, +maxSlider.min, +maxSlider.max);
@@ -6062,7 +6126,8 @@ class Rate extends BaseComponent$1 {
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
         const container = document.createElement('div');
-        container.className = 'lexrate relative';
+        container.className = 'lexrate relative data-[disabled=true]:pointer-events-none';
+        container.dataset['disabled'] = this.disabled.toString();
         this.root.appendChild(container);
         const starsContainer = LX.makeContainer(['fit-content', 'auto'], 'flex flex-row gap-1', '', container);
         const filledStarsContainer = LX.makeContainer(['fit-content', 'auto'], 'absolute top-0 flex flex-row gap-1 pointer-events-none', '', container);
@@ -6161,7 +6226,7 @@ class SizeInput extends BaseComponent$1 {
                 if (callback) {
                     callback(value);
                 }
-            }, { min: 0, disabled: options.disabled, precision: options.precision, className: 'flex-auto-fill' });
+            }, { min: 0, disabled: this.disabled, precision: options.precision, className: 'flex-auto-fill' });
             container.appendChild(this.root.dimensions[i].root);
             if ((i + 1) != value.length) {
                 const xIcon = LX.makeIcon('X', { svgClass: 'text-foreground font-bold' });
@@ -7212,15 +7277,20 @@ class Tags extends BaseComponent$1 {
             for (let i = 0; i < value.length; ++i) {
                 const tagName = value[i];
                 const tag = LX.makeElement('span', 'lextag bg-primary px-2 py-1 rounded-xl min-w-2 justify-center text-primary-foreground gap-1 text-sm select-none', tagName);
-                const removeButton = LX.makeIcon('X', { svgClass: 'sm' });
-                tag.appendChild(removeButton);
-                removeButton.addEventListener('click', (e) => {
-                    tag.remove();
-                    value.splice(value.indexOf(tagName), 1);
-                    this.set(value, false, e);
-                });
+                if (!this.disabled) {
+                    const removeButton = LX.makeIcon('X', { svgClass: 'sm' });
+                    tag.appendChild(removeButton);
+                    removeButton.addEventListener('click', (e) => {
+                        tag.remove();
+                        value.splice(value.indexOf(tagName), 1);
+                        this.set(value, false, e);
+                    });
+                }
                 tagsContainer.appendChild(tag);
             }
+            if (this.disabled) {
+                return;
+            }
             let tagInput = document.createElement('input');
             tagInput.value = '';
             tagInput.placeholder = 'Add tag...';
@@ -7272,6 +7342,7 @@ class TextArea extends BaseComponent$1 {
         let wValue = LX.makeElement('textarea', options.inputClass ?? '');
         wValue.value = value ?? '';
         wValue.style.textAlign = options.float ?? '';
+        wValue.disabled = this.disabled;
         Object.assign(wValue.style, options.style ?? {});
         if (options.fitHeight ?? false) {
             wValue.classList.add('field-sizing-content');
@@ -7280,10 +7351,6 @@ class TextArea extends BaseComponent$1 {
             wValue.classList.add('resize-none');
         }
         container.appendChild(wValue);
-        if (options.disabled ?? false) {
-            this.disabled = true;
-            wValue.setAttribute('disabled', 'true');
-        }
         if (options.placeholder) {
             wValue.setAttribute('placeholder', options.placeholder);
         }
@@ -7383,7 +7450,7 @@ class Toggle extends BaseComponent$1 {
         toggle.type = 'checkbox';
         toggle.checked = value;
         toggle.iValue = value;
-        toggle.disabled = options.disabled ?? false;
+        toggle.disabled = this.disabled;
         container.appendChild(toggle);
         let valueName = document.createElement('span');
         valueName.className = 'font-medium w-full overflow-hidden truncate';
@@ -7450,7 +7517,6 @@ class Vector extends BaseComponent$1 {
         var container = document.createElement('div');
         container.className = 'lexvector flex';
         this.root.appendChild(container);
-        this.disabled = options.disabled ?? false;
         const that = this;
         for (let i = 0; i < numComponents; ++i) {
             let box = document.createElement('div');
@@ -7464,6 +7530,7 @@ class Vector extends BaseComponent$1 {
             vecinput.type = 'number';
             vecinput.id = 'vec' + numComponents + '_' + LX.guidGenerator();
             vecinput.idx = i;
+            vecinput.disabled = this.disabled;
             vectorInputs[i] = vecinput;
             box.appendChild(vecinput);
             if (value[i].constructor == Number) {
@@ -7473,9 +7540,6 @@ class Vector extends BaseComponent$1 {
             vecinput.value = vecinput.iValue = value[i];
             const dragIcon = LX.makeIcon('MoveVertical', { iconClass: 'drag-icon hidden-opacity', svgClass: 'sm' });
             box.appendChild(dragIcon);
-            if (this.disabled) {
-                vecinput.disabled = true;
-            }
             // Add wheel input
             vecinput.addEventListener('wheel', function (e) {
                 e.preventDefault();
@@ -10372,8 +10436,10 @@ function makeCollapsible(domEl, content, parent, options = {}) {
     const collapsed = options.collapsed ?? true;
     const actionIcon = LX.makeIcon('Right');
     actionIcon.classList.add('collapser');
-    if (collapsed)
-        actionIcon.dataset['collapsed'] = `${collapsed}`;
+    if (collapsed) {
+        actionIcon.dataset['collapsed'] = `true`;
+        content.style.display = 'none';
+    }
     actionIcon.style.marginLeft = 'auto';
     actionIcon.style.marginRight = '0.2rem';
     actionIcon.addEventListener('click', function (e) {
@@ -14278,7 +14344,7 @@ class AssetView {
                     options.push({ name: o.name, icon: o.icon, callback: o.callback?.bind(that, item) });
                 }
             }
-            options.push(null, { name: 'Delete', icon: 'Trash2', className: 'text-destructive',
+            options.push(null, { name: 'Delete', icon: 'Trash2', className: 'destructive',
                 callback: that._requestDeleteItem.bind(that, item) });
             LX.addClass(that.contentPanel.root, 'pointer-events-none');
             LX.addDropdownMenu(e.target, options, { side: 'right', align: 'start', event: e, onBlur: () => {
@@ -15245,7 +15311,7 @@ class AssetView {
         const onBeforeCreateFolder = this._callbacks['beforeCreateFolder'];
         const onCreateFolder = this._callbacks['createFolder'];
         const resolve = (...args) => {
-            const newFolder = this._createFolder(folder);
+            const newFolder = this._createFolder(folder, ...args);
             const event = {
                 type: 'create-folder',
                 result: [newFolder],
@@ -15267,14 +15333,14 @@ class AssetView {
             resolve();
         }
     }
-    _createFolder(folder) {
+    _createFolder(folder, newFolderName) {
         folder = folder ?? this.currentFolder;
         if (!folder) {
             throw ('_createFolder: Something went wrong!');
         }
         const dir = folder.children ?? folder;
         const newFolder = {
-            id: this._getClonedName('New Folder', dir),
+            id: this._getClonedName(newFolderName ?? 'New Folder', dir),
             type: 'folder',
             children: [],
             parent: this.currentFolder,
@@ -15286,7 +15352,7 @@ class AssetView {
         if (this._moveItemDialog && this._movingItem) {
             this._moveItem(this._movingItem, folder);
         }
-        return folder;
+        return newFolder;
     }
     _openScriptInEditor(script) {
         if (this._scriptCodeDialog) {
@@ -15380,7 +15446,7 @@ class Knob extends BaseComponent {
         };
         const angle = LX.remapRange(value, min, max, -135, 135.0);
         innerKnobCircle.style.rotate = angle + 'deg';
-        if (options.disabled) {
+        if (this.disabled) {
             LX.addClass(container, 'disabled');
         }
         innerKnobCircle.addEventListener('change', (e) => {
@@ -15407,7 +15473,7 @@ class Knob extends BaseComponent {
         innerKnobCircle.addEventListener('mousedown', innerMouseDown);
         var that = this;
         function innerMouseDown(e) {
-            if (document.activeElement == innerKnobCircle || options.disabled) {
+            if (document.activeElement == innerKnobCircle || that.disabled) {
                 return;
             }
             var doc = that.root.ownerDocument;
@@ -20542,6 +20608,7 @@ const HTML_TAGS = ['DOCTYPE', 'html', 'head', 'body', 'title', 'base', 'link', '
 class DocMaker {
     root;
     _listQueued = undefined;
+    _lastDomTarget = undefined;
     constructor(element) {
         this.root = element ?? document.body;
     }
@@ -20552,20 +20619,37 @@ class DocMaker {
         target = target ?? this.root;
         target.appendChild(document.createElement('br'));
     }
-    header(string, type, id) {
+    header(string, type, id, options = {}) {
         console.assert(string !== undefined && type !== undefined);
-        let header = document.createElement(type);
+        if (options.collapsable) {
+            const collapsible = LX.makeElement('div', LX.mergeClass('my-4 px-6 cursor-pointer', options.className), `<${type} id="${id ?? ''}">${string}</${type}>`, this.root);
+            const collapsibleContent = LX.makeContainer(['100%', 'auto'], 'px-4', '', this.root);
+            LX.listen(collapsible, "click", () => collapsible.querySelector('a.collapser').click());
+            this._lastDomTarget = this.root;
+            this.setDomTarget(collapsibleContent);
+            if (options.collapsableContentCallback) {
+                options.collapsableContentCallback();
+            }
+            LX.makeCollapsible(collapsible, collapsibleContent, null, { collapsed: options.collapsed ?? false });
+            this.setDomTarget(this._lastDomTarget);
+            delete this._lastDomTarget;
+            return collapsible;
+        }
+        const header = document.createElement(type);
+        header.className = options.className ?? '';
         header.innerHTML = string;
         if (id)
             header.id = id;
         this.root.appendChild(header);
+        return header;
     }
-    paragraph(string, sup = false, className) {
+    paragraph(string, sup = false, className = '') {
         console.assert(string !== undefined);
         let paragraph = document.createElement(sup ? 'sup' : 'p');
-        paragraph.className = 'leading-relaxed ' + (className ?? '');
+        paragraph.className = LX.mergeClass('leading-relaxed', className);
         paragraph.innerHTML = string;
         this.root.appendChild(paragraph);
+        return paragraph;
     }
     code(text, language = 'js') {
         console.assert(text !== undefined);
@@ -20578,11 +20662,11 @@ class DocMaker {
         };
         for (let i = 0; i < text.length; ++i) {
             const char = text[i];
-            const string = text.substr(i);
+            const string = text.substring(i);
             const endLineIdx = string.indexOf('\n');
             const line = string.substring(0, endLineIdx > -1 ? endLineIdx : undefined);
             if (char == '@') {
-                const str = line.substr(1);
+                const str = line.substring(1);
                 if (!(str.indexOf('@') > -1) && !(str.indexOf('[') > -1)) {
                     continue;
                 }
@@ -20591,7 +20675,7 @@ class DocMaker {
                 const skipTag = str[tagIndex - 1] == '|';
                 // Highlight is specified
                 if (text[i + 1] == '[') {
-                    highlight = str.substr(1, 3);
+                    highlight = str.substring(1, 4);
                     content = str.substring(5, tagIndex);
                     if (skipTag) {
                         const newString = str.substring(6 + content.length);
@@ -20664,12 +20748,14 @@ class DocMaker {
         pre.appendChild(code);
         container.appendChild(pre);
         this.root.appendChild(container);
+        return container;
     }
-    list(list, type, target) {
+    list(list, type, target, className = '') {
         const validTypes = ['bullet', 'numbered'];
         console.assert(list && list.length > 0 && validTypes.includes(type), 'Invalid list type or empty list' + type);
         const typeString = type == 'bullet' ? 'ul' : 'ol';
         let ul = document.createElement(typeString);
+        ul.className = className;
         target = target ?? this.root;
         target.appendChild(ul);
         for (var el of list) {
@@ -20682,16 +20768,18 @@ class DocMaker {
             li.innerHTML = el;
             ul.appendChild(li);
         }
+        return ul;
     }
     bulletList(list) {
-        this.list(list, 'bullet');
+        return this.list(list, 'bullet');
     }
     numberedList(list) {
-        this.list(list, 'numbered');
+        return this.list(list, 'numbered');
     }
     startCodeBulletList() {
         let ul = document.createElement('ul');
         this._listQueued = ul;
+        return ul;
     }
     endCodeBulletList() {
         if (this._listQueued === undefined)
@@ -20728,35 +20816,34 @@ class DocMaker {
         else {
             this.root.appendChild(ul);
         }
+        return ul;
     }
-    image(src, caption = '', parent) {
+    image(src, caption = '', parent, className = '') {
         let img = document.createElement('img');
         img.src = src;
         img.alt = caption;
-        img.className = 'my-1';
+        img.className = LX.mergeClass('my-1', className);
         parent = parent ?? this.root;
         parent.appendChild(img);
+        return img;
     }
     images(sources, captions = [], width, height) {
         const mobile = navigator && /Android|iPhone/i.test(navigator.userAgent);
+        const div = document.createElement('div');
         if (!mobile) {
-            let div = document.createElement('div');
             div.style.width = width ?? 'auto';
             div.style.height = height ?? '256px';
             div.className = 'flex flex-row justify-center';
-            for (let i = 0; i < sources.length; ++i) {
-                this.image(sources[i], captions[i], div);
-            }
-            this.root.appendChild(div);
         }
-        else {
-            for (let i = 0; i < sources.length; ++i) {
-                this.image(sources[i], captions[i]);
-            }
+        for (let i = 0; i < sources.length; ++i) {
+            this.image(sources[i], captions[i], div);
         }
+        this.root.appendChild(div);
+        return div;
     }
-    video(src, caption = '', controls = true, autoplay = false) {
+    video(src, caption = '', controls = true, autoplay = false, className = '') {
         let video = document.createElement('video');
+        video.className = className;
         video.src = src;
         video.controls = controls;
         video.autoplay = autoplay;
@@ -20766,17 +20853,18 @@ class DocMaker {
         video.loop = true;
         video.alt = caption;
         this.root.appendChild(video);
+        return video;
     }
-    note(text, warning = false, title, icon) {
+    note(text, warning = false, title, icon, className = '') {
         console.assert(text !== undefined);
-        const note = LX.makeContainer([], 'border-color rounded-xl overflow-hidden text-sm text-secondary-foreground my-6', '', this.root);
-        let header = document.createElement('div');
+        const note = LX.makeContainer([], LX.mergeClass('border-color rounded-xl overflow-hidden text-sm text-secondary-foreground my-6', className), '', this.root);
+        const header = document.createElement('div');
         header.className = 'flex bg-muted font-semibold px-3 py-2 gap-2 text-secondary-foreground';
         header.appendChild(LX.makeIcon(icon ?? (warning ? 'MessageSquareWarning' : 'NotepadText')));
         header.innerHTML += title ?? (warning ? 'Important' : 'Note');
         note.appendChild(header);
         // Node body
-        LX.makeContainer([], 'leading-6 p-3', text, note);
+        return LX.makeContainer([], 'leading-6 p-3', text, note);
     }
     classCtor(name, params, language = 'js') {
         let paramsHTML = '';
@@ -20795,6 +20883,7 @@ class DocMaker {
         let pr = document.createElement('p');
         pr.innerHTML = this.iCode("<span class='constructor'>" + name + '(' + paramsHTML + ')' + '</span>');
         this.root.appendChild(pr);
+        return pr;
     }
     classMethod(name, desc, params, ret) {
         this.startCodeBulletList();