lexgui 8.3.1 → 8.4.0

package/build/lexgui.all.module.js

@@ -12,7 +12,7 @@ const g$2 = globalThis;
 let LX = g$2.LX;
 if (!LX) {
     LX = {
-        version: '8.3.1',
+        version: '8.4.0',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar
@@ -432,6 +432,8 @@ var ComponentType$1;
     ComponentType[ComponentType["LABEL"] = 39] = "LABEL";
     ComponentType[ComponentType["BLANK"] = 40] = "BLANK";
     ComponentType[ComponentType["RATE"] = 41] = "RATE";
+    ComponentType[ComponentType["EMPTY"] = 42] = "EMPTY";
+    ComponentType[ComponentType["DESCRIPTION"] = 43] = "DESCRIPTION";
 })(ComponentType$1 || (ComponentType$1 = {}));
 LX.ComponentType = ComponentType$1;
 /**
@@ -733,6 +735,9 @@ class Button extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             wValue.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            wValue.disabled = disabled;
+        };
         // In case of swap, set if a change has to be performed
         this.setState = function (v, skipCallback) {
             const swapInput = wValue.querySelector('input');
@@ -1470,6 +1475,12 @@ class NumberInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            vecinput.disabled = disabled;
+            const slider = this.root.querySelector('input[type="range"]');
+            if (slider)
+                slider.disabled = disabled;
+        };
         this.setLimits = (newMin, newMax, newStep) => { };
         var container = document.createElement('div');
         container.className = 'lexnumber';
@@ -1500,7 +1511,7 @@ class NumberInput extends BaseComponent$1 {
         if (!options.skipSlider && options.min !== undefined && options.max !== undefined) {
             let sliderBox = LX.makeContainer(['100%', 'auto'], 'z-1 input-box', '', box);
             let slider = document.createElement('input');
-            slider.className = 'lexinputslider';
+            slider.className = 'lexinputslider disabled:pointer-events-none disabled:opacity-50';
             slider.min = options.min;
             slider.max = options.max;
             slider.step = options.step ?? 1;
@@ -1637,6 +1648,11 @@ class TextInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            const input = this.root.querySelector('input');
+            if (input)
+                input.disabled = disabled;
+        };
         this.valid = (v, matchField) => {
             v = v ?? this.value();
             if (!options.pattern)
@@ -1796,6 +1812,9 @@ class Select extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            selectedOption?.setDisabled(disabled);
+        };
         let container = document.createElement('div');
         container.className = 'lexselect';
         this.root.appendChild(container);
@@ -2070,6 +2089,13 @@ class ArrayInput extends BaseComponent$1 {
                 this._trigger(new IEvent$1(name, values, event), callback);
             }
         };
+        this.onSetDisabled = (disabled) => {
+            if (this.root.dataset['opened'] == 'true' && disabled) {
+                this.root.dataset['opened'] = false;
+                this.root.querySelector('.lexarrayitems').toggleAttribute('hidden', true);
+            }
+            toggleButton.setDisabled(disabled);
+        };
         // Add open array button
         let container = document.createElement('div');
         container.className = 'lexarray shrink-1 grow-1 ml-4';
@@ -2161,9 +2187,10 @@ class Card extends BaseComponent$1 {
         const container = LX.makeContainer(['100%', 'auto'], 'lexcard max-w-sm flex flex-col gap-4 bg-card border-color rounded-xl py-6', '', this.root);
         if (options.header) {
             const hasAction = options.header.action !== undefined;
+            const actionButtonOptions = options.header.action.options ?? {};
             let header = LX.makeContainer(['100%', 'auto'], `flex ${hasAction ? 'flex-row gap-4' : 'flex-col gap-1'} px-6`, '', container);
             if (hasAction) {
-                const actionBtn = new Button(null, options.header.action.name, options.header.action.callback, { buttonClass: 'secondary' });
+                const actionBtn = new Button(null, options.header.action.name, options.header.action.callback, { buttonClass: 'secondary', ...actionButtonOptions });
                 header.appendChild(actionBtn.root);
                 const titleDescBox = LX.makeContainer(['75%', 'auto'], `flex flex-col gap-1`, '');
                 header.prepend(titleDescBox);
@@ -2230,6 +2257,9 @@ class Checkbox extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            checkbox.disabled = disabled;
+        };
         let container = document.createElement('div');
         container.className = 'flex items-center gap-2 my-0 mx-auto [&_span]:truncate [&_span]:flex-auto-fill';
         this.root.appendChild(container);
@@ -2858,7 +2888,12 @@ class ColorInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
-        var container = document.createElement('span');
+        this.onSetDisabled = (disabled) => {
+            textComponent.setDisabled(disabled);
+            sampleContainer.classList.toggle('pointer-events-none', disabled);
+            sampleContainer.classList.toggle('opacity-50', disabled);
+        };
+        let container = document.createElement('span');
         container.className = 'lexcolor';
         this.root.appendChild(container);
         this.picker = new ColorPicker(value, {
@@ -3022,6 +3057,11 @@ class Counter extends BaseComponent$1 {
                 this._trigger(new IEvent$1(name, newValue, event), callback);
             }
         };
+        this.onSetDisabled = (disabled) => {
+            substrButton.setDisabled(disabled);
+            addButton.setDisabled(disabled);
+            input.disabled = disabled;
+        };
         this.count = value;
         const min = options.min ?? 0;
         const max = options.max ?? 100;
@@ -3767,6 +3807,12 @@ class DatePicker extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            const buttons = this.root.querySelectorAll('button');
+            buttons.forEach((b) => {
+                b.disabled = disabled;
+            });
+        };
         const container = LX.makeContainer(['auto', 'auto'], 'lexdate flex flex-row');
         this.root.appendChild(container);
         if (!dateAsRange) {
@@ -4159,6 +4205,52 @@ class Dial extends BaseComponent$1 {
 LX.CanvasDial = CanvasDial;
 LX.Dial = Dial;
 
+// Empty.ts @jxarco
+/**
+ * @class Empty
+ * @description Empty Component
+ */
+class Empty extends BaseComponent$1 {
+    constructor(name, options = {}) {
+        options.hideName = true;
+        super(ComponentType$1.EMPTY, name, null, options);
+        this.root.classList.add('place-content-center');
+        const container = LX.makeContainer(['100%', 'auto'], 'lexcard max-w-sm flex flex-col gap-4 bg-card border-color rounded-xl py-6', '', this.root);
+        if (options.header) {
+            let header = LX.makeContainer(['100%', 'auto'], `flex flex-col gap-4 px-6 items-center`, '', container);
+            if (options.header.icon) {
+                const icon = LX.makeIcon(options.header.icon, { iconClass: 'bg-secondary p-2 rounded-lg!', svgClass: 'lg' });
+                header.appendChild(icon);
+            }
+            else if (options.header.avatar) {
+                const avatar = new LX.Avatar(options.header.avatar);
+                header.appendChild(avatar.root);
+            }
+            if (options.header.title) {
+                LX.makeElement('div', 'text-center text-foreground leading-none font-medium', options.header.title, header);
+            }
+            if (options.header.description) {
+                LX.makeElement('div', 'text-sm text-center text-balance text-muted-foreground', options.header.description, header);
+            }
+        }
+        if (options.actions) {
+            const content = LX.makeContainer(['100%', 'auto'], 'flex flex-row gap-1 px-6 justify-center', '', container);
+            for (let a of options.actions) {
+                const action = new LX.Button(null, a.name, a.callback, { buttonClass: "sm outline", ...a.options });
+                content.appendChild(action.root);
+            }
+        }
+        if (options.footer) {
+            const footer = LX.makeContainer(['100%', 'auto'], 'flex flex-col gap-1 px-6', '', container);
+            const elements = [].concat(options.footer);
+            for (let e of elements) {
+                footer.appendChild(e.root ? e.root : e);
+            }
+        }
+    }
+}
+LX.Empty = Empty;
+
 // FileInput.ts @jxarco
 /**
  * @class FileInput
@@ -4174,6 +4266,9 @@ class FileInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             input.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            input.disabled = disabled;
+        };
         // Create hidden input
         let input = document.createElement('input');
         input.className = 'lexfileinput';
@@ -4381,6 +4476,9 @@ class Layers extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            this.setLayers(value);
+        };
         const container = LX.makeElement('div', 'lexlayers grid', '', this.root);
         const maxBits = options.maxBits ?? 16;
         this.setLayers = (val) => {
@@ -4457,6 +4555,9 @@ class List extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             listContainer.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            this._updateValues(values);
+        };
         this._updateValues = (newValues) => {
             values = newValues;
             listContainer.innerHTML = '';
@@ -4924,16 +5025,19 @@ class Map2D extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            openerButton.setDisabled(disabled);
+        };
         var container = document.createElement('div');
         container.className = 'lexmap2d';
         this.root.appendChild(container);
         this.map2d = new CanvasMap2D(points, callback, options);
-        const calendarIcon = LX.makeIcon(options.mapIcon ?? 'SquareMousePointer');
-        const calendarButton = new Button(null, 'Open Map', () => {
-            this._popover = new Popover(calendarButton.root, [this.map2d]);
+        const icon = LX.makeIcon(options.mapIcon ?? 'SquareMousePointer');
+        const openerButton = new Button(null, 'Open Map', () => {
+            this._popover = new Popover(openerButton.root, [this.map2d]);
         }, { buttonClass: `outline justify-between`, disabled: this.disabled });
-        calendarButton.root.querySelector('button').appendChild(calendarIcon);
-        container.appendChild(calendarButton.root);
+        openerButton.root.querySelector('button').appendChild(icon);
+        container.appendChild(openerButton.root);
         LX.doAsync(this.onResize.bind(this));
     }
 }
@@ -5640,6 +5744,9 @@ class OTPInput extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            _refreshInput(value);
+        };
         const container = document.createElement('div');
         container.className = 'lexotp flex flex-row items-center';
         this.root.appendChild(container);
@@ -5653,7 +5760,7 @@ class OTPInput extends BaseComponent$1 {
                 for (let j = 0; j < g.length; ++j) {
                     let number = valueString[itemsCount++];
                     number = number == 'x' ? '' : number;
-                    const slotDom = LX.makeContainer(['36px', '30px'], 'lexotpslot border-t-color border-b-color border-l-color px-3 cursor-text select-none font-medium outline-none', number, container);
+                    const slotDom = LX.makeContainer(['36px', '30px'], 'lexotpslot content-center border-t-color border-b-color border-l-color px-3 cursor-text select-none font-medium outline-none', number, container);
                     slotDom.tabIndex = '1';
                     if (this.disabled) {
                         slotDom.classList.add('disabled');
@@ -6057,6 +6164,9 @@ class RangeInput extends BaseComponent$1 {
                 slider.style.setProperty('--range-fix-max-offset', `${diffMaxOffset}rem`);
             }
         };
+        this.onSetDisabled = (disabled) => {
+            slider.disabled = disabled;
+        };
         const container = document.createElement('div');
         container.className = 'lexrange relative py-3';
         this.root.appendChild(container);
@@ -6165,6 +6275,9 @@ class Rate extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            container.dataset['disabled'] = disabled.toString();
+        };
         const container = document.createElement('div');
         container.className = 'lexrate relative data-[disabled=true]:pointer-events-none';
         container.dataset['disabled'] = this.disabled.toString();
@@ -7308,6 +7421,9 @@ class Tags extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             tagsContainer.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            this.generateTags(arrayValue);
+        };
         // Show tags
         const tagsContainer = document.createElement('div');
         tagsContainer.className = 'inline-flex flex-wrap gap-1 bg-card/50 rounded-lg pad-xs [&_input]:w-2/3';
@@ -7376,6 +7492,11 @@ class TextArea extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            const textarea = this.root.querySelector('textarea');
+            if (textarea)
+                textarea.disabled = disabled;
+        };
         let container = document.createElement('div');
         container.className = 'lextextarea';
         container.style.display = 'flex';
@@ -7493,6 +7614,9 @@ class Toggle extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            toggle.disabled = disabled;
+        };
         var container = document.createElement('div');
         container.className = 'flex flex-row gap-2 items-center';
         this.root.appendChild(container);
@@ -7562,6 +7686,12 @@ class Vector extends BaseComponent$1 {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = `calc( 100% - ${realNameWidth})`;
         };
+        this.onSetDisabled = (disabled) => {
+            const inputs = this.root.querySelectorAll('input');
+            inputs.forEach((i) => {
+                i.disabled = disabled;
+            });
+        };
         this.setLimits = (newMin, newMax, newStep) => { };
         const vectorInputs = [];
         var container = document.createElement('div');
@@ -8306,6 +8436,19 @@ let Panel$2 = class Panel {
         component.type = ComponentType$1.LABEL;
         return component;
     }
+    /**
+     * @method addDescription
+     * @param {String} value Information string
+     * @param {Object} options Text options
+     */
+    addDescription(value, options = {}) {
+        options.disabled = true;
+        options.fitHeight = true;
+        options.inputClass = LX.mergeClass('bg-none', options.inputClass);
+        const component = this.addTextArea(null, value, null, options);
+        component.type = ComponentType$1.DESCRIPTION;
+        return component;
+    }
     /**
      * @method addButton
      * @param {String} name Component name
@@ -8344,18 +8487,22 @@ let Panel$2 = class Panel {
     }
     /**
      * @method addCard
-     * @param {String} name Card Name
-     * @param {Object} options:
-     * text: Card text
-     * link: Card link
-     * title: Card dom title
-     * src: url of the image
-     * callback (Function): function to call on click
+     * @param {String} name
+     * @param {Object} options
      */
     addCard(name, options = {}) {
         const component = new Card(name, options);
         return this._attachComponent(component);
     }
+    /**
+     * @method addEmpty
+     * @param {String} name
+     * @param {Object} options
+     */
+    addEmpty(name, options = {}) {
+        const component = new Empty(name, options);
+        return this._attachComponent(component);
+    }
     /**
      * @method addForm
      * @param {String} name Component name
@@ -11129,47 +11276,67 @@ LX.makeContainer = makeContainer;
  * offsetY: Tooltip margin vertical offset
  * active: Tooltip active by default [true]
  * callback: Callback function to execute when the tooltip is shown
+ * delay: Interest delay in ms until showing the tooltip [100]
  */
 function asTooltip(trigger, content, options = {}) {
     console.assert(trigger, 'You need a trigger to generate a tooltip!');
     trigger.dataset['disableTooltip'] = !(options.active ?? true);
     let tooltipDom = null;
+    let delayTimer = null;
+    let rafId = null;
     const _offset = options.offset;
     const _offsetX = options.offsetX ?? (_offset ?? 0);
     const _offsetY = options.offsetY ?? (_offset ?? 6);
-    trigger.addEventListener('mouseenter', function (e) {
-        if (trigger.dataset['disableTooltip'] == 'true') {
+    const _delay = options.delay ?? 100;
+    const _cleanup = () => {
+        clearTimeout(delayTimer);
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+        if (tooltipDom) {
+            tooltipDom.remove();
+            tooltipDom = null;
+        }
+    };
+    const _watchConnection = () => {
+        if (!trigger.isConnected) {
+            _cleanup();
             return;
         }
+        if (tooltipDom)
+            rafId = requestAnimationFrame(_watchConnection);
+    };
+    const _showTooltip = () => {
         tooltipDom = LX.makeElement('div', 'lextooltip fixed bg-secondary-foreground text-secondary text-xs px-2 py-1 rounded-lg pointer-events-none data-closed:opacity-0', trigger.dataset['tooltipContent'] ?? content);
         const nestedDialog = trigger.closest('dialog');
         const tooltipParent = nestedDialog ?? LX.root;
-        // Remove other first
+        // Remove others first
         LX.root.querySelectorAll('.lextooltip').forEach((e) => e.remove());
-        // Append new tooltip
         tooltipParent.appendChild(tooltipDom);
+        // Watch for trigger being removed from the DOM before mouseleave fires
+        rafId = requestAnimationFrame(_watchConnection);
         LX.doAsync(() => {
+            if (!tooltipDom)
+                return;
             const position = [0, 0];
             const offsetX = parseFloat(trigger.dataset['tooltipOffsetX'] ?? _offsetX);
             const offsetY = parseFloat(trigger.dataset['tooltipOffsetY'] ?? _offsetY);
             const rect = trigger.getBoundingClientRect();
-            let alignWidth = true;
-            switch (options.side ?? 'top') {
+            const side = options.side ?? 'top';
+            const alignWidth = side === 'top' || side === 'bottom';
+            switch (side) {
                 case 'left':
                     position[0] += rect.x - tooltipDom.offsetWidth - offsetX;
-                    alignWidth = false;
                     break;
                 case 'right':
                     position[0] += rect.x + rect.width + offsetX;
-                    alignWidth = false;
                     break;
                 case 'top':
                     position[1] += rect.y - tooltipDom.offsetHeight - offsetY;
-                    alignWidth = true;
                     break;
                 case 'bottom':
                     position[1] += rect.y + rect.height + offsetY;
-                    alignWidth = true;
                     break;
             }
             if (alignWidth)
@@ -11180,22 +11347,22 @@ function asTooltip(trigger, content, options = {}) {
             position[0] = LX.clamp(position[0], 0, window.innerWidth - tooltipDom.offsetWidth - 4);
             position[1] = LX.clamp(position[1], 0, window.innerHeight - tooltipDom.offsetHeight - 4);
             if (nestedDialog) {
-                let parentRect = tooltipParent.getBoundingClientRect();
+                const parentRect = tooltipParent.getBoundingClientRect();
                 position[0] -= parentRect.x;
                 position[1] -= parentRect.y;
             }
             tooltipDom.style.left = `${position[0]}px`;
             tooltipDom.style.top = `${position[1]}px`;
-            if (options.callback) {
-                options.callback(tooltipDom, trigger);
-            }
+            options.callback?.(tooltipDom, trigger);
         });
-    });
-    trigger.addEventListener('mouseleave', function (e) {
-        if (tooltipDom) {
-            tooltipDom.remove();
+    };
+    trigger.addEventListener('mouseenter', function () {
+        if (trigger.dataset['disableTooltip'] == 'true') {
+            return;
         }
+        delayTimer = setTimeout(_showTooltip, _delay);
     });
+    trigger.addEventListener('mouseleave', _cleanup);
 }
 LX.asTooltip = asTooltip;
 function insertChildAtIndex(parent, child, index = Infinity) {
@@ -13317,7 +13484,9 @@ class Tour {
     // using a fullscreen SVG with "rect" elements
     _generateMask(reference) {
         this.tourContainer.innerHTML = ''; // Clear previous content
+        const scrollTop = document.scrollingElement?.scrollTop ?? 0;
         this.tourMask = LX.makeContainer(['100%', '100%'], 'tour-mask absolute inset-0');
+        this.tourMask.style.top = `${scrollTop}px`;
         this.tourContainer.appendChild(this.tourMask);
         const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svg.style.width = '100%';
@@ -13380,7 +13549,7 @@ class Tour {
         // Reference Highlight
         const refContainer = LX.makeContainer(['0', '0'], 'tour-ref-mask absolute');
         refContainer.style.left = `${boundingX - hOffset - 1}px`;
-        refContainer.style.top = `${boundingY - vOffset - 1}px`;
+        refContainer.style.top = `${boundingY - vOffset - 1 + scrollTop}px`;
         refContainer.style.width = `${boundingWidth + hOffset * 2 + 2}px`;
         refContainer.style.height = `${boundingHeight + vOffset * 2 + 2}px`;
         this.tourContainer.appendChild(refContainer);
@@ -14425,12 +14594,12 @@ class CodeDocument {
     getText(separator = '\n') {
         return this._lines.join(separator);
     }
-    setText(text) {
+    setText(text, silent = false) {
         this._lines = text.split(/\r?\n/);
         if (this._lines.length === 0) {
             this._lines = [''];
         }
-        if (this.onChange)
+        if (!silent && this.onChange)
             this.onChange(this);
     }
     getCharAt(line, col) {
@@ -14594,6 +14763,7 @@ class UndoManager {
     _lastPushTime = 0;
     _groupThresholdMs;
     _maxSteps;
+    _savedDepth = 0;
     constructor(groupThresholdMs = 2000, maxSteps = 200) {
         this._groupThresholdMs = groupThresholdMs;
         this._maxSteps = maxSteps;
@@ -14665,11 +14835,19 @@ class UndoManager {
     canRedo() {
         return this._redoStack.length > 0;
     }
+    markSaved() {
+        this._flush();
+        this._savedDepth = this._undoStack.length;
+    }
+    isModified() {
+        return this._undoStack.length !== this._savedDepth || this._pendingOps.length > 0;
+    }
     clear() {
         this._undoStack.length = 0;
         this._redoStack.length = 0;
         this._pendingOps.length = 0;
         this._lastPushTime = 0;
+        this._savedDepth = 0;
     }
     _flush() {
         if (this._pendingOps.length === 0)
@@ -14965,6 +15143,49 @@ class CursorSet {
         this.cursors = merged;
     }
 }
+/**
+ * Strips string literals and single-line comments from a line of code,
+ * leaving only the structural characters (braces, operators, keywords etc).
+ */
+function stripLiteralsAndComments(line) {
+    let result = '';
+    let i = 0;
+    while (i < line.length) {
+        const ch = line[i];
+        // Remove single-line comment
+        if (ch === '/' && line[i + 1] === '/') {
+            break;
+        }
+        // Block comment (same line): skip to closing */
+        if (ch === '/' && line[i + 1] === '*') {
+            i += 2;
+            while (i < line.length && !(line[i] === '*' && line[i + 1] === '/'))
+                i++;
+            i += 2;
+            continue;
+        }
+        // Remove strings (single, double, template)
+        if (ch === '"' || ch === "'" || ch === '`') {
+            const quote = ch;
+            i++;
+            while (i < line.length) {
+                if (line[i] === '\\') {
+                    i += 2;
+                    continue;
+                } // escaped char
+                if (line[i] === quote) {
+                    i++;
+                    break;
+                } // closing quote
+                i++;
+            }
+            continue;
+        }
+        result += ch;
+        i++;
+    }
+    return result;
+}
 /**
  * Manages code symbols for autocomplete, navigation, and outlining.
  * Incrementally updates as lines change.
@@ -14973,7 +15194,8 @@ class SymbolTable {
     _symbols = new Map(); // name -> symbols[]
     _lineSymbols = []; // [lineNum] -> symbols declared on that line
     _scopeStack = [{ name: 'global', type: 'global', line: 0 }];
-    _lineScopes = []; // [lineNum] -> scope stack at that line
+    _lineScopes = []; // [lineNum] -> scope stack at start of that line
+    _lineScopesEnd = []; // [lineNum] -> scope stack at end of that line
     get currentScope() {
         return this._scopeStack[this._scopeStack.length - 1]?.name ?? 'global';
     }
@@ -14983,6 +15205,9 @@ class SymbolTable {
     getScopeAtLine(line) {
         return this._lineScopes[line] ?? [{ name: 'global', type: 'global', line: 0 }];
     }
+    getLineScopeEnd(line) {
+        return this._lineScopesEnd[line] ?? [{ name: 'global', type: 'global', line: 0 }];
+    }
     getSymbols(name) {
         return this._symbols.get(name) ?? [];
     }
@@ -15001,20 +15226,26 @@ class SymbolTable {
     }
     /** Update scope stack for a line (call before parsing symbols) */
     updateScopeForLine(line, lineText) {
-        // Track braces to maintain scope stack
-        const openBraces = (lineText.match(/\{/g) || []).length;
-        const closeBraces = (lineText.match(/\}/g) || []).length;
-        // Save current scope for this line
+        if (line === 0) {
+            this._scopeStack = [{ name: 'global', type: 'global', line: 0 }];
+        }
+        else if (this._lineScopesEnd[line - 1]) {
+            this._scopeStack = [...this._lineScopesEnd[line - 1]];
+        }
+        const stripped = stripLiteralsAndComments(lineText);
+        const openBraces = (stripped.match(/\{/g) || []).length;
+        const closeBraces = (stripped.match(/\}/g) || []).length;
         this._lineScopes[line] = [...this._scopeStack];
         // Pop scopes for closing braces
         for (let i = 0; i < closeBraces; i++) {
             if (this._scopeStack.length > 1)
                 this._scopeStack.pop();
         }
-        // Push scopes for opening braces (will be named by symbol detection)
+        // Push scopes for opening braces (symbol detection will name them later)
         for (let i = 0; i < openBraces; i++) {
             this._scopeStack.push({ name: 'anonymous', type: 'anonymous', line });
         }
+        this._lineScopesEnd[line] = [...this._scopeStack];
     }
     /** Name the most recent anonymous scope (called when detecting class/function) */
     nameCurrentScope(name, type) {
@@ -15058,6 +15289,7 @@ class SymbolTable {
     resetScopes() {
         this._scopeStack = [{ name: 'global', type: 'global', line: 0 }];
         this._lineScopes = [];
+        this._lineScopesEnd = [];
     }
     clear() {
         this._symbols.clear();
@@ -15070,23 +15302,25 @@ class SymbolTable {
  */
 function parseSymbolsFromLine(lineText, tokens, line, symbolTable) {
     const symbols = [];
-    const scope = symbolTable.currentScope;
-    const scopeType = symbolTable.currentScopeType;
-    // Build set of reserved words from tokens (keywords, statements, builtins) to skip when detecting symbols
+    // Use the scope snapshot from the START of this line, not currentScope/currentScopeType 
+    // which will reflect state AFTER updateScopeForLine already pushed/popped braces on this line...
+    const lineScopes = symbolTable.getScopeAtLine(line);
+    const lineScope = lineScopes[lineScopes.length - 1];
+    const scope = lineScope?.name ?? 'global';
+    const scopeType = lineScope?.type ?? 'global';
     const reservedWords = new Set();
     for (const token of tokens) {
         if (['keyword', 'statement', 'builtin', 'preprocessor'].includes(token.type)) {
             reservedWords.add(token.value);
         }
     }
-    // Track added symbols by name and approximate position to avoid duplicates
+    // Track added symbols by name and approximate position using 5 chars tolerance to avoid duplicates
     const addedSymbols = new Set();
     const addSymbol = (name, kind, col = 0) => {
         if (!name || !name.match(/^[a-zA-Z_$][\w$]*$/))
             return; // Valid identifier check
         if (reservedWords.has(name))
             return;
-        // Unique key using 5 chars tolerance
         const posKey = `${name}@${Math.floor(col / 5) * 5}`;
         if (addedSymbols.has(posKey))
             return; // Already added
@@ -15102,13 +15336,14 @@ function parseSymbolsFromLine(lineText, tokens, line, symbolTable) {
         { regex: /^\s*type\s+([A-Z_]\w*)\s*=/i, kind: 'type' },
         { regex: /^\s*(?:export\s+)?(?:async\s+)?function\s+(\w+)/i, kind: 'function' },
         { regex: /^\s*(?:const|let|var)\s+(\w+)\s*=\s*(?:async\s+)?\([^)]*\)\s*=>/i, kind: 'function' },
-        { regex: /^\s*(?:static\s+|const\s+|virtual\s+|inline\s+|extern\s+|pub\s+|async\s+)*(\w+[\w\s\*&:<>,]*?)\s+(\w+)\s*\([^)]*\)\s*[{;]/i, kind: 'typed-function' },
-        { regex: /^\s*(?:public|private|protected|static|readonly)*\s*(\w+)\s*\([^)]*\)\s*[:{]/i, kind: scopeType === 'class' ? 'method' : 'function' }
+        { regex: /^\s*(?:static\s+|const\s+|virtual\s+|inline\s+|extern\s+|pub\s+|async\s+)*(?!\b(?:await|return|if|else|while|for|switch|case|throw|new|delete|typeof|yield)\b)(\w+[\w\s\*&:<>,]*?)\s+(\w+)\s*\([^)]*\)\s*[{;]/i, kind: 'typed-function' },
+        { regex: /^\s*(?:(?:public|private|protected|static|readonly|async|override)\s+)*(\w+)\s*\([^)]*\)\s*[:{]/i, kind: scopeType === 'class' ? 'method' : 'function' }
     ];
     const multiPatterns = [
         { regex: /(?:const|let|var)\s+(\w+)/gi, kind: 'variable' },
         { regex: /(\w+)\s*:\s*(?:function|[A-Z]\w*)/gi, kind: 'variable' },
         { regex: /this\.(\w+)\s*=/gi, kind: 'property' },
+        { regex: /\b(?:private|protected|public)\s+(?:(?:static|readonly)\s+)*(\w+)\s*[=:;]/gi, kind: 'property' },
         { regex: /new\s+([A-Z]\w+)/gi, kind: 'constructor-call' },
         { regex: /(\w+)\s*\(/gi, kind: 'method-call' }
     ];
@@ -15181,6 +15416,56 @@ LX.Area;
 LX.Panel;
 LX.Tabs;
 LX.NodeTree;
+const HEX_COLOR_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g;
+const URL_REGEX = /(https?:\/\/[^\s"'<>)\]]+)/g;
+/**
+ * Returns true if the string token at `idx` in the token list is a module import path.
+ */
+function isImportPath(tokens, idx) {
+    const isWs = (t) => /^\s+$/.test(t.value);
+    const isImportWord = (t) => t.value === 'require' || t.value === 'import';
+    for (let i = idx - 1; i >= 0; i--) {
+        const t = tokens[i];
+        if (isWs(t))
+            continue;
+        if (t.type === 'keyword' && t.value === 'from')
+            return true;
+        if (isImportWord(t))
+            return true;
+        if (t.type === 'symbol' && t.value === '(') {
+            for (let j = i - 1; j >= 0; j--) {
+                const t2 = tokens[j];
+                if (isWs(t2))
+                    continue;
+                if (isImportWord(t2))
+                    return true;
+                break;
+            }
+        }
+        break;
+    }
+    return false;
+}
+/**
+ * Scans a raw token value for hex color literals and returns HTML with each
+ * color wrapped in a swatch span. Non-color text is HTML-escaped.
+ */
+function injectColorSpans(raw, lineIndex, colOffset) {
+    HEX_COLOR_RE.lastIndex = 0;
+    let result = '';
+    let lastIndex = 0;
+    let match;
+    const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    while ((match = HEX_COLOR_RE.exec(raw)) !== null) {
+        result += esc(raw.slice(lastIndex, match.index));
+        const color = match[0];
+        const col = colOffset + match.index;
+        result += `<span class="code-color" data-color="${color}" data-line="${lineIndex}" data-col="${col}" style="--code-color:${color}"><span class="code-color-swatch"></span>${esc(color)}</span>`;
+        lastIndex = match.index + color.length;
+    }
+    result += esc(raw.slice(lastIndex));
+    return result;
+}
 //  _____             _ _ _____
 // |   __|___ ___ ___| | | __  |___ ___
 // |__   |  _|  _| . | | | __ -| .'|  _|
@@ -15203,6 +15488,15 @@ class ScrollBar {
         this.thumb = LX.makeElement('div');
         this.thumb.addEventListener('mousedown', (e) => this._onMouseDown(e));
         this.root.appendChild(this.thumb);
+        this.root.addEventListener('mousedown', (e) => {
+            if (e.target === this.thumb)
+                return;
+            const clickPos = this._vertical ? e.offsetY : e.offsetX;
+            const thumbSize = this._vertical ? this.thumb.offsetHeight : this.thumb.offsetWidth;
+            const delta = (clickPos - thumbSize / 2) - this._thumbPos;
+            this._onDrag?.(delta);
+            this._onMouseDown(e); // continue as drag from new position
+        });
     }
     setThumbRatio(ratio) {
         this._thumbRatio = LX.clamp(ratio, 0, 1);
@@ -15326,10 +15620,18 @@ class CodeEditor {
     onReady;
     onCreateFile;
     onCodeChange;
+    onOpenPath;
+    onHoverSymbol;
     _inputArea;
     // State:
     _lineStates = []; // tokenizer state at end of each line
     _lineElements = []; // <pre> element per line
+    _bracketOpenLine = -1; // line of the { opening current scope
+    _bracketCloseLine = -1; // line of the } closing current scope
+    _hoverTimer = null;
+    _hoverPopup = null;
+    _hoverWord = '';
+    _colorPopover = null; // active color picker popover
     _openedTabs = {};
     _loadedTabs = {};
     _storedTabs = {};
@@ -15399,6 +15701,8 @@ class CodeEditor {
         this.onSelectTab = options.onSelectTab;
         this.onReady = options.onReady;
         this.onCodeChange = options.onCodeChange;
+        this.onOpenPath = options.onOpenPath;
+        this.onHoverSymbol = options.onHoverSymbol;
         this.language = Tokenizer.getLanguage(this.highlight) ?? Tokenizer.getLanguage('Plain Text');
         this.symbolTable = new SymbolTable();
         // File explorer
@@ -15608,19 +15912,38 @@ class CodeEditor {
         this.codeArea.root.addEventListener('mousedown', this._onMouseDown.bind(this));
         this.codeArea.root.addEventListener('contextmenu', this._onMouseDown.bind(this));
         this.codeArea.root.addEventListener('mouseover', (e) => {
-            const link = e.target.closest('.code-link');
+            const target = e.target;
+            const link = target.closest('.code-link');
             if (link && e.ctrlKey)
                 link.classList.add('hovered');
+            const path = target.closest('.code-path');
+            if (path && e.ctrlKey)
+                path.classList.add('hovered');
         });
         this.codeArea.root.addEventListener('mouseout', (e) => {
-            const link = e.target.closest('.code-link');
+            const target = e.target;
+            const link = target.closest('.code-link');
             if (link)
                 link.classList.remove('hovered');
+            const path = target.closest('.code-path');
+            if (path)
+                path.classList.remove('hovered');
         });
         this.codeArea.root.addEventListener('mousemove', (e) => {
-            const link = e.target.closest('.code-link');
+            const target = e.target;
+            const link = target.closest('.code-link');
             if (link)
                 link.classList.toggle('hovered', e.ctrlKey);
+            const path = target.closest('.code-path');
+            if (path)
+                path.classList.toggle('hovered', e.ctrlKey);
+            this._onCodeAreaMouseMove(e);
+        });
+        this.codeArea.root.addEventListener('mouseleave', () => {
+            this._clearHoverPopup();
+        });
+        this.codeArea.root.addEventListener('click', (e) => {
+            this._onColorSwatchClick(e);
         });
         // Bottom status panel
         this.statusPanel = this._createStatusPanel(options);
@@ -15712,7 +16035,7 @@ class CodeEditor {
     setText(text, language, detectLang = false) {
         if (!this.currentTab)
             return;
-        this.doc.setText(text);
+        this.doc.setText(this._normalizeText(text), true);
         this.cursorSet.set(0, 0);
         this.undoManager.clear();
         this._lineStates = [];
@@ -15903,10 +16226,14 @@ class CodeEditor {
         const codeTab = {
             name,
             dom,
-            doc: new CodeDocument(this.onCodeChange),
+            doc: new CodeDocument((doc) => {
+                this._setTabModified(name, true);
+                this.onCodeChange?.(doc);
+            }),
             cursorSet: new CursorSet(),
             undoManager: new UndoManager(),
             language: langName,
+            modified: false,
             title: options.title ?? name
         };
         this._openedTabs[name] = codeTab;
@@ -15930,7 +16257,7 @@ class CodeEditor {
         // Move into the sizer..
         this.codeSizer.appendChild(dom);
         if (options.text) {
-            codeTab.doc.setText(options.text);
+            codeTab.doc.setText(options.text, true);
             codeTab.cursorSet.set(0, 0);
             codeTab.undoManager.clear();
             this._renderAllLines();
@@ -15991,15 +16318,14 @@ class CodeEditor {
     }
     setCustomSuggestions(suggestions) {
         if (!suggestions || suggestions.constructor !== Array) {
-            console.warn('suggestions should be a string array!');
+            console.warn('suggestions should be an array!');
             return;
         }
-        this.customSuggestions = suggestions;
+        this.customSuggestions = suggestions.map(s => typeof s === 'string' ? { label: s } : s);
     }
     loadFile(file, options = {}) {
         const onLoad = (text, name) => {
-            // Remove Carriage Return in some cases and sub tabs using spaces
-            text = text.replaceAll('\r', '').replaceAll(/\t|\\t/g, ' '.repeat(this.tabSize));
+            text = this._normalizeText(text);
             const ext = LX.getExtension(name);
             const lang = options.language ?? (Tokenizer.getLanguage(options.language)
                 ?? (Tokenizer.getLanguageByExtension(ext) ?? Tokenizer.getLanguage('Plain Text')));
@@ -16022,7 +16348,7 @@ class CodeEditor {
                     title: options.title ?? name,
                     language: langName
                 });
-                this.doc.setText(text);
+                this.doc.setText(text, true);
                 this.setLanguage(langName, ext);
                 this.cursorSet.set(0, 0);
                 this.undoManager.clear();
@@ -16083,7 +16409,7 @@ class CodeEditor {
                         language: langName
                     });
                     if (results.length === 0) {
-                        this.doc.setText(processedText);
+                        this.doc.setText(processedText, true);
                         this.setLanguage(langName, ext);
                         this.cursorSet.set(0, 0);
                         this.undoManager.clear();
@@ -16125,6 +16451,30 @@ class CodeEditor {
             }
         }, 20);
     }
+    _findTabByPath(importPath) {
+        // By now only uses base name
+        const importBase = importPath.split('/').pop().replace(/\.\w+$/, '').toLowerCase();
+        const allNames = new Set([
+            ...Object.keys(this._openedTabs),
+            ...Object.keys(this._loadedTabs),
+            ...Object.keys(this._storedTabs),
+        ]);
+        for (const name of allNames) {
+            const tabBase = name.split('/').pop().replace(/\.\w+$/, '').toLowerCase();
+            if (tabBase === importBase)
+                return name;
+        }
+        return null;
+    }
+    _setTabModified(name, modified) {
+        const tab = this._openedTabs[name];
+        if (!tab || tab.modified === modified)
+            return;
+        tab.modified = modified;
+        const tabEl = this.tabs?.tabDOMs?.[name];
+        if (tabEl)
+            tabEl.toggleAttribute('data-modified', modified);
+    }
     _onSelectTab(isNewTabButton, event, name) {
         if (this.disableEdition) {
             return;
@@ -16350,20 +16700,55 @@ class CodeEditor {
         const lineText = this.doc.getLine(lineIndex);
         const result = Tokenizer.tokenizeLine(lineText, this.language, prevState);
         const langClass = this.language.name.toLowerCase().replace(/[^a-z]/g, '');
-        const URL_REGEX = /(https?:\/\/[^\s"'<>)\]]+)/g;
+        // Pre-compute which token index gets the bracket-highlight class
+        let bracketTokenIdx = -1;
+        if (lineIndex === this._bracketOpenLine) {
+            // Last '{' symbol token on this line
+            for (let i = result.tokens.length - 1; i >= 0; i--) {
+                if (result.tokens[i].type === 'symbol' && result.tokens[i].value === '{') {
+                    bracketTokenIdx = i;
+                    break;
+                }
+            }
+        }
+        else if (lineIndex === this._bracketCloseLine) {
+            // First '}' symbol token on this line
+            for (let i = 0; i < result.tokens.length; i++) {
+                if (result.tokens[i].type === 'symbol' && result.tokens[i].value === '}') {
+                    bracketTokenIdx = i;
+                    break;
+                }
+            }
+        }
         let html = '';
-        for (const token of result.tokens) {
+        let colOffset = 0;
+        for (let ti = 0; ti < result.tokens.length; ti++) {
+            const token = result.tokens[ti];
             const cls = TOKEN_CLASS_MAP[token.type];
-            const escaped = token.value
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;');
-            // Wrap URLs in comment tokens with a clickable span
-            const content = (token.type === 'comment')
-                ? escaped.replace(URL_REGEX, `<span class="code-link" data-url="$1">$1</span>`)
-                : escaped;
+            const tokenCol = colOffset;
+            colOffset += token.value.length;
+            // Inject content depending on type of token: color, url, path?
+            let content;
+            if (token.type === 'comment') {
+                const escaped = token.value
+                    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                content = escaped.replace(URL_REGEX, `<span class="code-link" data-url="$1">$1</span>`);
+            }
+            else if (token.type === 'string' && isImportPath(result.tokens, ti)) {
+                const inner = token.value.slice(1, -1); // strip surrounding quotes
+                const q = token.value[0];
+                const escapedInner = inner.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                content = `${q}<span class="code-path" data-path="${inner}">${escapedInner}</span>${q}`;
+            }
+            else {
+                content = injectColorSpans(token.value, lineIndex, tokenCol);
+            }
+            const bracketClass = ti === bracketTokenIdx ? ' code-bracket-active' : '';
             if (cls) {
-                html += `<span class="${cls} ${langClass}">${content}</span>`;
+                html += `<span class="${cls} ${langClass}${bracketClass}">${content}</span>`;
+            }
+            else if (bracketClass) {
+                html += `<span class="${bracketClass.trim()}">${content}</span>`;
             }
             else {
                 html += content;
@@ -16444,6 +16829,13 @@ class CodeEditor {
                     break;
             }
         }
+        // Propagate/cascade scope updates to subsequent lines until the start-of-line scope stabilizes
+        for (let i = lineIndex + 1; i < this.doc.lineCount; i++) {
+            const oldStartDepth = this.symbolTable.getScopeAtLine(i).length;
+            this.symbolTable.updateScopeForLine(i, this.doc.getLine(i));
+            if (this.symbolTable.getScopeAtLine(i).length === oldStartDepth)
+                break;
+        }
     }
     /**
      * Rebuild line elements after structural changes (insert/delete lines).
@@ -16485,12 +16877,9 @@ class CodeEditor {
             return;
         this.cursorsLayer.innerHTML = '';
         for (const sel of this.cursorSet.cursors) {
-            const el = document.createElement('div');
-            el.className = 'cursor';
-            el.innerHTML = '&nbsp;';
+            const el = LX.makeElement('div', 'cursor', '&nbsp;', this.cursorsLayer);
             el.style.left = (sel.head.col * this.charWidth + this.xPadding) + 'px';
             el.style.top = (sel.head.line * this.lineHeight) + 'px';
-            this.cursorsLayer.appendChild(el);
         }
         this._updateActiveLine();
     }
@@ -16507,14 +16896,16 @@ class CodeEditor {
                 const lineText = this.doc.getLine(line);
                 const fromCol = line === start.line ? start.col : 0;
                 const toCol = line === end.line ? end.col : lineText.length;
-                if (fromCol === toCol)
+                // Skip only when the selection ends exactly at col 0 of this line
+                if (fromCol === toCol && line === end.line)
                     continue;
-                const div = document.createElement('div');
-                div.className = 'lexcodeselection';
+                const width = fromCol === toCol
+                    ? Math.ceil(this.charWidth * 0.5) // minimum width for empty lines
+                    : (toCol - fromCol) * this.charWidth;
+                const div = LX.makeElement('div', 'lexcodeselection', '', this.selectionsLayer);
                 div.style.top = (line * this.lineHeight) + 'px';
                 div.style.left = (fromCol * this.charWidth + this.xPadding) + 'px';
-                div.style.width = ((toCol - fromCol) * this.charWidth) + 'px';
-                this.selectionsLayer.appendChild(div);
+                div.style.width = width + 'px';
             }
         }
     }
@@ -16619,6 +17010,8 @@ class CodeEditor {
                     e.preventDefault();
                     if (this.onSave) {
                         this.onSave(this.getText(), this);
+                        this.undoManager.markSaved();
+                        this._setTabModified(this.currentTab.name, false);
                     }
                     return;
                 case 'z':
@@ -16641,6 +17034,17 @@ class CodeEditor {
                     e.preventDefault();
                     this._doPaste();
                     return;
+                case 'home':
+                    e.preventDefault();
+                    this.cursorSet.set(0, 0);
+                    this._afterCursorMove();
+                    return;
+                case 'end':
+                    e.preventDefault();
+                    const lastLine = this.doc.lineCount - 1;
+                    this.cursorSet.set(lastLine, this.doc.getLine(lastLine).length);
+                    this._afterCursorMove();
+                    return;
                 case ' ':
                     e.preventDefault();
                     // Also call user callback if provided
@@ -17372,10 +17776,21 @@ class CodeEditor {
         this._rebuildLines();
         this._afterCursorMove();
     }
+    /**
+     * Normalize external text before inserting into the document:
+     * - Unify line endings to \n
+     * - Replace tab characters with the configured number of spaces
+     */
+    _normalizeText(text) {
+        return text
+            .replace(/\r\n?/g, '\n')
+            .replace(/\t/g, ' '.repeat(this.tabSize));
+    }
     async _doPaste() {
-        const text = await navigator.clipboard.readText();
-        if (!text)
+        const raw = await navigator.clipboard.readText();
+        if (!raw)
             return;
+        const text = this._normalizeText(raw);
         this._flushAction();
         this._deleteSelectionIfAny();
         const cursor = this.cursorSet.getPrimary();
@@ -17402,6 +17817,8 @@ class CodeEditor {
             }
             this._rebuildLines();
             this._afterCursorMove();
+            if (this.currentTab)
+                this._setTabModified(this.currentTab.name, this.undoManager.isModified());
         }
     }
     _doRedo() {
@@ -17413,6 +17830,8 @@ class CodeEditor {
             }
             this._rebuildLines();
             this._afterCursorMove();
+            if (this.currentTab)
+                this._setTabModified(this.currentTab.name, this.undoManager.isModified());
         }
     }
     // Mouse input events:
@@ -17423,7 +17842,7 @@ class CodeEditor {
             return;
         if (this.autocomplete && this.autocomplete.contains(e.target))
             return;
-        // Ctrl+click: open link if cursor is over a code-link span
+        // Ctrl+click: open link or import path
         if (e.ctrlKey && e.button === 0) {
             const target = e.target;
             const link = target.closest('.code-link');
@@ -17431,6 +17850,15 @@ class CodeEditor {
                 window.open(link.dataset.url, '_blank');
                 return;
             }
+            const pathEl = target.closest('.code-path');
+            if (pathEl?.dataset.path) {
+                const rawPath = pathEl.dataset.path;
+                const tabName = this._findTabByPath(rawPath);
+                if (tabName)
+                    this.loadTab(tabName);
+                this.onOpenPath?.(rawPath, this);
+                return;
+            }
         }
         e.preventDefault(); // Prevent browser from stealing focus from _inputArea
         this._wasPaired = false;
@@ -17478,18 +17906,55 @@ class CodeEditor {
         }
         this._afterCursorMove();
         this._inputArea.focus();
-        // Track mouse for drag selection
-        const onMouseMove = (me) => {
-            const mx = me.clientX - rect.left - this.xPadding;
-            const my = me.clientY - rect.top;
-            const ml = Math.max(0, Math.min(Math.floor(my / this.lineHeight), this.doc.lineCount - 1));
-            const mc = Math.max(0, Math.min(Math.round(mx / this.charWidth), this.doc.getLine(ml).length));
+        // Track mouse for drag selection (with auto-scroll when outside editor window/area)
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        let rafId = null;
+        const updateSelection = () => {
+            const currentRect = this.codeContainer.getBoundingClientRect();
+            const mx = lastMouseX - currentRect.left - this.xPadding;
+            const my = lastMouseY - currentRect.top;
+            const ml = LX.clamp(Math.floor(my / this.lineHeight), 0, this.doc.lineCount - 1);
+            const mc = LX.clamp(Math.round(mx / this.charWidth), 0, this.doc.getLine(ml).length);
             const sel = this.cursorSet.getPrimary();
             sel.head = { line: ml, col: mc };
             this._renderCursors();
             this._renderSelections();
         };
+        const autoScroll = () => {
+            const scrollerRect = this.codeScroller.getBoundingClientRect();
+            const overshootY = lastMouseY < scrollerRect.top ? lastMouseY - scrollerRect.top
+                : lastMouseY > scrollerRect.bottom ? lastMouseY - scrollerRect.bottom : 0;
+            const overshootX = lastMouseX < scrollerRect.left ? lastMouseX - scrollerRect.left
+                : lastMouseX > scrollerRect.right ? lastMouseX - scrollerRect.right : 0;
+            if (overshootY === 0 && overshootX === 0) {
+                rafId = null;
+                return;
+            }
+            const speedY = Math.sign(overshootY) * Math.min(Math.abs(overshootY) * 0.3, 15);
+            const speedX = Math.sign(overshootX) * Math.min(Math.abs(overshootX) * 0.3, 15);
+            this.codeScroller.scrollTop += speedY;
+            this.codeScroller.scrollLeft += speedX;
+            this._syncScrollBars();
+            updateSelection();
+            rafId = requestAnimationFrame(autoScroll);
+        };
+        const onMouseMove = (me) => {
+            lastMouseX = me.clientX;
+            lastMouseY = me.clientY;
+            updateSelection();
+            const scrollerRect = this.codeScroller.getBoundingClientRect();
+            const isOutside = me.clientY < scrollerRect.top || me.clientY > scrollerRect.bottom
+                || me.clientX < scrollerRect.left || me.clientX > scrollerRect.right;
+            if (isOutside && rafId === null) {
+                rafId = requestAnimationFrame(autoScroll);
+            }
+        };
         const onMouseUp = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
             document.removeEventListener('mousemove', onMouseMove);
             document.removeEventListener('mouseup', onMouseUp);
         };
@@ -17549,47 +18014,51 @@ class CodeEditor {
         }
         const suggestions = [];
         const added = new Set();
-        const addSuggestion = (label, kind, scope, detail, insertText) => {
-            if (!added.has(label)) {
-                suggestions.push({ label, kind, scope, detail, insertText });
-                added.add(label);
+        const addSuggestion = (s) => {
+            if (!added.has(s.label)) {
+                suggestions.push(s);
+                added.add(s.label);
             }
         };
+        const filterSuggestion = (suggestion, word) => {
+            const w = word.toLowerCase();
+            if (suggestion.filterText) {
+                return suggestion.filterText.split(' ').some(token => token.toLowerCase().trim().startsWith(w));
+            }
+            return suggestion.label.toLowerCase().startsWith(w);
+        };
         // Get first suggestions from symbol table
         const allSymbols = this.symbolTable.getAllSymbols();
         for (const symbol of allSymbols) {
-            if (symbol.name.toLowerCase().startsWith(word.toLowerCase())) {
-                addSuggestion(symbol.name, symbol.kind, symbol.scope, `${symbol.kind} in ${symbol.scope}`);
-            }
+            const s = { label: symbol.name, kind: symbol.kind, scope: symbol.scope, detail: `${symbol.kind} in ${symbol.scope}` };
+            if (filterSuggestion(s, word))
+                addSuggestion(s);
         }
         // Add language reserved keys
         for (const reservedWord of this.language.reservedWords) {
-            if (reservedWord.toLowerCase().startsWith(word.toLowerCase())) {
-                addSuggestion(reservedWord);
-            }
+            const s = { label: reservedWord };
+            if (filterSuggestion(s, word))
+                addSuggestion(s);
         }
         // Add custom suggestions
         for (const suggestion of this.customSuggestions) {
-            const label = typeof suggestion === 'string' ? suggestion : suggestion.label;
-            const kind = typeof suggestion === 'object' ? suggestion.kind : undefined;
-            const detail = typeof suggestion === 'object' ? suggestion.detail : undefined;
-            const insertText = typeof suggestion === 'object' ? suggestion.insertText : suggestion;
-            if (label.toLowerCase().startsWith(word.toLowerCase())) {
-                addSuggestion(label, kind, undefined, detail, insertText);
-            }
+            if (filterSuggestion(suggestion, word))
+                addSuggestion(suggestion);
         }
-        // Close autocomplete if no suggestions
         if (suggestions.length === 0) {
             this._doHideAutocomplete();
             return;
         }
-        // Sort suggestions: exact matches first, then alphabetically
+        // Sort suggestions: exact matches first, then by sortText (or label if absent)
+        const w = word.toLowerCase();
         suggestions.sort((a, b) => {
-            const aExact = a.label.toLowerCase() === word.toLowerCase() ? 0 : 1;
-            const bExact = b.label.toLowerCase() === word.toLowerCase() ? 0 : 1;
+            const aKey = (a.sortText ?? a.label).toLowerCase();
+            const bKey = (b.sortText ?? b.label).toLowerCase();
+            const aExact = aKey === w ? 0 : 1;
+            const bExact = bKey === w ? 0 : 1;
             if (aExact !== bExact)
                 return aExact - bExact;
-            return a.label.localeCompare(b.label);
+            return aKey.localeCompare(bKey);
         });
         this._selectedAutocompleteIndex = 0;
         // Render suggestions
@@ -17598,9 +18067,9 @@ class CodeEditor {
             item.insertText = suggestion.insertText ?? suggestion.label;
             if (index === this._selectedAutocompleteIndex)
                 item.classList.add('selected');
-            const currSuggestion = suggestion.label;
-            let iconName = 'CaseLower';
-            let iconClass = 'foo';
+            const currSuggestionLabel = suggestion.label;
+            let iconName = suggestion.icon ?? 'CaseLower';
+            let iconClass = suggestion.iconClass ?? 'text-gray-500';
             switch (suggestion.kind) {
                 case 'class':
                     iconName = 'CircleNodes';
@@ -17647,26 +18116,22 @@ class CodeEditor {
                     iconClass = 'text-green-500';
                     break;
                 case 'method-call':
-                    iconName = 'PlayCircle';
+                    iconName = 'Parentheses';
                     iconClass = 'text-gray-400';
                     break;
-                default:
-                    iconName = 'CaseLower';
-                    iconClass = 'text-gray-500';
-                    break;
             }
             item.appendChild(LX.makeIcon(iconName, { iconClass: 'ml-1 mr-2', svgClass: 'sm ' + iconClass }));
             // Highlight the written part
-            const hIndex = currSuggestion.toLowerCase().indexOf(word.toLowerCase());
+            const hIndex = currSuggestionLabel.toLowerCase().indexOf(word.toLowerCase());
             var preWord = document.createElement('span');
-            preWord.textContent = currSuggestion.substring(0, hIndex);
+            preWord.textContent = currSuggestionLabel.substring(0, hIndex);
             item.appendChild(preWord);
             var actualWord = document.createElement('span');
-            actualWord.textContent = currSuggestion.substring(hIndex, hIndex + word.length);
+            actualWord.textContent = currSuggestionLabel.substring(hIndex, hIndex + word.length);
             actualWord.classList.add('word-highlight');
             item.appendChild(actualWord);
             var postWord = document.createElement('span');
-            postWord.textContent = currSuggestion.substring(hIndex + word.length);
+            postWord.textContent = currSuggestionLabel.substring(hIndex + word.length);
             item.appendChild(postWord);
             if (suggestion.kind) {
                 const kind = document.createElement('span');
@@ -17751,6 +18216,340 @@ class CodeEditor {
         this._resetBlinker();
         this.resize();
         this._scrollCursorIntoView();
+        this._updateBracketHighlight();
+    }
+    /**
+     * Returns the scope stack at the exact cursor position (line + column).
+     * Basically starts from getScopeAtLine and then counts real braces up to the cursor column.
+     */
+    _getScopeAtCursor() {
+        const cursor = this.cursorSet.getPrimary().head;
+        const line = cursor.line;
+        const col = cursor.col;
+        const lineText = this.doc.getLine(line);
+        const scopeStack = [...this.symbolTable.getScopeAtLine(line)];
+        let i = 0;
+        let inString = false;
+        let stringCh = '';
+        while (i < col && i < lineText.length) {
+            const ch = lineText[i];
+            if (inString) {
+                if (ch === '\\') {
+                    i += 2;
+                    continue;
+                }
+                if (ch === stringCh)
+                    inString = false;
+                i++;
+                continue;
+            }
+            if (ch === '/' && lineText[i + 1] === '/')
+                break;
+            if (ch === '/' && lineText[i + 1] === '*') {
+                i += 2;
+                while (i < col && !(lineText[i] === '*' && lineText[i + 1] === '/'))
+                    i++;
+                i += 2;
+                continue;
+            }
+            if (ch === '"' || ch === "'" || ch === '`') {
+                inString = true;
+                stringCh = ch;
+                i++;
+                continue;
+            }
+            if (ch === '{') {
+                scopeStack.push({ name: 'anonymous', type: 'anonymous', line });
+            }
+            else if (ch === '}' && scopeStack.length > 1) {
+                scopeStack.pop();
+            }
+            i++;
+        }
+        return scopeStack;
+    }
+    _updateBracketHighlight() {
+        const scopes = this._getScopeAtCursor();
+        // Find innermost non-global scope
+        let innermost = null;
+        for (let i = scopes.length - 1; i >= 0; i--) {
+            if (scopes[i].type !== 'global') {
+                innermost = scopes[i];
+                break;
+            }
+        }
+        const prevOpen = this._bracketOpenLine;
+        const prevClose = this._bracketCloseLine;
+        if (!innermost) {
+            this._bracketOpenLine = -1;
+            this._bracketCloseLine = -1;
+        }
+        else {
+            const openLine = innermost.line;
+            const targetDepth = scopes.length; // depth including the innermost scope
+            // Closing line: last line where scope depth >= targetDepth
+            let closeLine = openLine;
+            for (let i = openLine + 1; i < this.doc.lineCount; i++) {
+                if (this.symbolTable.getScopeAtLine(i).length >= targetDepth)
+                    closeLine = i;
+                else
+                    break;
+            }
+            this._bracketOpenLine = openLine;
+            this._bracketCloseLine = closeLine;
+        }
+        // Re-render only the lines that changed
+        const linesToUpdate = new Set();
+        if (prevOpen !== this._bracketOpenLine) {
+            linesToUpdate.add(prevOpen);
+            linesToUpdate.add(this._bracketOpenLine);
+        }
+        if (prevClose !== this._bracketCloseLine) {
+            linesToUpdate.add(prevClose);
+            linesToUpdate.add(this._bracketCloseLine);
+        }
+        for (const line of linesToUpdate) {
+            if (line >= 0 && line < this.doc.lineCount)
+                this._updateLine(line);
+        }
+    }
+    // Color picker:
+    _onColorSwatchClick(e) {
+        const span = e.target.closest('.code-color');
+        if (!span)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        const colorValue = span.dataset.color;
+        const lineIndex = parseInt(span.dataset.line);
+        const colStart = parseInt(span.dataset.col);
+        let currentLen = colorValue.length;
+        if (this._colorPopover) {
+            this._colorPopover.destroy();
+            this._colorPopover = null;
+        }
+        const picker = new LX.ColorPicker(colorValue, {
+            colorModel: 'Hex',
+            onChange: (color) => {
+                // Generate a hex string matching the original length (# + 3/4/6/8 hex chars)
+                const raw = color.hex.replace(/^#/, '');
+                const digits = currentLen - 1;
+                const newHex = '#' + (digits <= 4
+                    ? raw.slice(0, digits).padEnd(digits, '0')
+                    : raw.slice(0, Math.min(digits, 8)).padEnd(digits, '0'));
+                const lineText = this.doc.getLine(lineIndex);
+                if (lineText.slice(colStart, colStart + currentLen) !== span.dataset.color)
+                    return;
+                const delOp = this.doc.delete(lineIndex, colStart, currentLen);
+                this.undoManager.record(delOp, this.cursorSet.getCursorPositions());
+                const insOp = this.doc.insert(lineIndex, colStart, newHex);
+                this.undoManager.record(insOp, this.cursorSet.getCursorPositions());
+                this._updateLine(lineIndex);
+                currentLen = newHex.length;
+                span.dataset.color = newHex;
+                span.dataset.col = String(colStart);
+                span.style.setProperty('--code-color', newHex);
+            }
+        });
+        this._colorPopover = new LX.Popover(span, [picker], { side: 'bottom', align: 'start', sideOffset: 4 });
+    }
+    // Symbol hover:
+    /**
+     * Extracts the parameter list from a function/method declaration line.
+     */
+    _getSymbolParams(symLine) {
+        if (symLine < 0 || symLine >= this.doc.lineCount)
+            return '()';
+        const m = this.doc.getLine(symLine).match(/\(([^)]*)\)/);
+        return m ? `(${m[1].trim()})` : '()';
+    }
+    /**
+     * Starting from the line where a class is defined, scans forward to find
+     * the constructor signature and returns its parameter list.
+     */
+    _findConstructorParams(classLine) {
+        const classDepth = this.symbolTable.getScopeAtLine(classLine).length;
+        const maxScan = Math.min(classLine + 50, this.doc.lineCount);
+        for (let i = classLine + 1; i < maxScan; i++) {
+            if (this.symbolTable.getScopeAtLine(i).length < classDepth + 1)
+                break;
+            const m = this.doc.getLine(i).match(/\bconstructor\s*\(([^)]*)\)/);
+            if (m)
+                return `(${m[1].trim()})`;
+        }
+        return null;
+    }
+    /**
+     * Given multiple symbols with the same name, pick the most likely one for
+     * the hovered position using the available context data.
+     */
+    _pickBestSymbol(symbols, word, tokenType, lineText, hoveredLine) {
+        if (symbols.length === 1)
+            return symbols[0];
+        const curScopes = this.symbolTable.getScopeAtLine(hoveredLine);
+        const curScope = [...curScopes].reverse().find(s => s.type !== 'global')?.name ?? 'global';
+        const wordEsc = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const isNewCall = new RegExp(`\\bnew\\s+${wordEsc}\\b`).test(lineText);
+        const isFuncCall = new RegExp(`\\b${wordEsc}\\s*[(<]`).test(lineText);
+        const isTypeAnno = new RegExp(`(?::\\s*|<\\s*|[,>]\\s*)${wordEsc}\\b`).test(lineText);
+        const typeKinds = new Set(['class', 'interface', 'type', 'enum', 'struct']);
+        const funcKinds = new Set(['function', 'method']);
+        const scored = symbols.map(sym => {
+            let score = 0;
+            // Defined in the current innermost scope
+            if (sym.scope === curScope)
+                score += 5;
+            // Check token type
+            if (tokenType === 'method' && funcKinds.has(sym.kind))
+                score += 3;
+            if (tokenType === 'type' && typeKinds.has(sym.kind))
+                score += 3;
+            // Hovered-line context patterns
+            if (isNewCall && sym.kind === 'constructor-call')
+                score += 20;
+            if (isNewCall && sym.kind === 'class')
+                score += 3;
+            if (isFuncCall && funcKinds.has(sym.kind))
+                score += 3;
+            if (isTypeAnno && typeKinds.has(sym.kind))
+                score += 2;
+            // Validate kind based on symbol declaration line
+            if (sym.line >= 0 && sym.line < this.doc.lineCount) {
+                const declLine = this.doc.getLine(sym.line);
+                if (/\bfunction\b/.test(declLine) && funcKinds.has(sym.kind))
+                    score += 4;
+                if (/\bclass\b/.test(declLine) && sym.kind === 'class')
+                    score += 4;
+                if (/\binterface\b/.test(declLine) && sym.kind === 'interface')
+                    score += 4;
+                if (/\btype\b/.test(declLine) && sym.kind === 'type')
+                    score += 4;
+                if (/\benum\b/.test(declLine) && sym.kind === 'enum')
+                    score += 4;
+                if (/\b(?:const|let|var)\b/.test(declLine) && sym.kind === 'variable')
+                    score += 3;
+            }
+            // Order also by line proximity
+            const dist = Math.abs(sym.line - hoveredLine);
+            score += Math.max(0, 4 - Math.floor(dist / 20));
+            return { sym, score };
+        });
+        scored.sort((a, b) => b.score - a.score);
+        return scored[0].sym;
+    }
+    _clearHoverPopup() {
+        if (this._hoverTimer) {
+            clearTimeout(this._hoverTimer);
+            this._hoverTimer = null;
+        }
+        if (this._hoverPopup) {
+            this._hoverPopup.remove();
+            this._hoverPopup = null;
+        }
+        this._hoverWord = '';
+    }
+    _onCodeAreaMouseMove(e) {
+        if (!this.currentTab)
+            return;
+        // Only show hover when no button is pressed (no dragging)
+        if (e.buttons !== 0) {
+            this._clearHoverPopup();
+            return;
+        }
+        const rect = this.codeContainer.getBoundingClientRect();
+        const x = e.clientX - rect.left - this.xPadding;
+        const y = e.clientY - rect.top;
+        const line = LX.clamp(Math.floor(y / this.lineHeight), 0, this.doc.lineCount - 1);
+        const col = LX.clamp(Math.round(x / this.charWidth), 0, this.doc.getLine(line).length);
+        const [word, wordStart] = this.doc.getWordAt(line, col);
+        if (!word || word === this._hoverWord)
+            return;
+        this._clearHoverPopup();
+        if (!word.trim())
+            return;
+        this._hoverWord = word;
+        this._hoverTimer = setTimeout(() => {
+            this._hoverTimer = null;
+            const prevState = line > 0 ? (this._lineStates[line - 1] ?? Tokenizer.initialState()) : Tokenizer.initialState();
+            const { tokens } = Tokenizer.tokenizeLine(this.doc.getLine(line), this.language, prevState);
+            let tokenType = 'text';
+            let charPos = 0;
+            for (const tok of tokens) {
+                // Use wordStart (not col) so boundary positions like col=wordEnd don't fall into the next token
+                if (wordStart >= charPos && wordStart < charPos + tok.value.length) {
+                    tokenType = tok.type;
+                    break;
+                }
+                charPos += tok.value.length;
+            }
+            if (tokenType === 'comment' || tokenType === 'string' || tokenType === 'number')
+                return;
+            const symbols = this.symbolTable.getSymbols(word);
+            const info = { word, tokenType, symbols };
+            let userContent;
+            if (this.onHoverSymbol)
+                userContent = this.onHoverSymbol(info, this);
+            // No popup if user explicitly returns null
+            if (userContent === null)
+                return;
+            const hasSymbols = symbols.length > 0;
+            if (!userContent && !hasSymbols)
+                return;
+            const popup = this._hoverPopup = LX.makeElement('div', 'code-hover-popup [&_span]:text-sm');
+            if (userContent) {
+                if (typeof userContent === 'string')
+                    popup.innerHTML = userContent;
+                else
+                    popup.appendChild(userContent);
+            }
+            else {
+                const sym = this._pickBestSymbol(symbols, word, tokenType, this.doc.getLine(line), line);
+                let kindLabel = sym.kind;
+                let nameLabel = `<span class="font-semibold">${word}</span>`;
+                if (sym.kind === 'constructor-call') {
+                    const classSym = this.symbolTable.getSymbols(word).find(s => s.kind === 'class');
+                    const params = classSym != null ? (this._findConstructorParams(classSym.line) ?? '()') : '()';
+                    kindLabel = 'constructor';
+                    nameLabel = `${nameLabel}<span class="text-muted-foreground">${params}</span>`;
+                }
+                else if (sym.kind === 'function') {
+                    const params = this._getSymbolParams(sym.line);
+                    nameLabel = `${nameLabel}<span class="text-muted-foreground">${params}</span>`;
+                }
+                else if (sym.scope && sym.scope !== 'global' && sym.scope !== 'anonymous') {
+                    if (sym.kind === 'property' || sym.kind === 'method') {
+                        const scopePrefix = `<span class="text-muted-foreground">${sym.scope}.</span>`;
+                        if (sym.kind === 'method') {
+                            const params = this._getSymbolParams(sym.line);
+                            nameLabel = `${scopePrefix}${nameLabel}<span class="text-muted-foreground">${params}</span>`;
+                        }
+                        else {
+                            nameLabel = `${scopePrefix}${nameLabel}`;
+                        }
+                    }
+                    else if (sym.kind === 'variable') {
+                        // Only prefix the scope when the variable is a member (class/interface/struct field)
+                        const declScopes = this.symbolTable.getScopeAtLine(sym.line);
+                        const scopeEntry = declScopes.find(s => s.name === sym.scope);
+                        const memberTypes = new Set(['class', 'interface', 'struct']);
+                        if (scopeEntry && memberTypes.has(scopeEntry.type)) {
+                            nameLabel = `<span class="text-muted-foreground">${sym.scope}.</span>${nameLabel}`;
+                        }
+                    }
+                }
+                popup.innerHTML = `<span class="text-info">(${kindLabel})</span> ${nameLabel}`;
+            }
+            document.body.appendChild(popup);
+            // Position just below the hovered word
+            const lineEl = this._lineElements[line];
+            if (lineEl) {
+                const elRect = lineEl.getBoundingClientRect();
+                const leftPx = elRect.left + this.xPadding + col * this.charWidth;
+                const topPx = elRect.bottom + 4;
+                popup.style.left = Math.min(leftPx, window.innerWidth - popup.offsetWidth - 8) + 'px';
+                popup.style.top = topPx + 'px';
+            }
+        }, 500);
     }
     // Scrollbar & Resize:
     _scrollCursorIntoView() {
@@ -18830,7 +19629,7 @@ class AssetView {
                 }
             }
             else if (isFolder) {
-                that._enterFolder(item);
+                that._requestEnterFolder(item);
                 return;
             }
             const onSelect = that._callbacks['select'];
@@ -19048,17 +19847,17 @@ class AssetView {
             if (!this.prevData.length || !this.currentFolder)
                 return;
             this.nextData.push(this.currentFolder);
-            this._enterFolder(this.prevData.pop(), false);
+            this._enterFolder(this.prevData.pop(), false, true);
         }, { buttonClass: 'ghost', title: 'Go Back', tooltip: true, icon: 'ArrowLeft' });
         panel.addButton(null, 'GoForwardButton', () => {
             if (!this.nextData.length || !this.currentFolder)
                 return;
-            this._enterFolder(this.nextData.pop());
+            this._enterFolder(this.nextData.pop(), false, true);
         }, { buttonClass: 'ghost', title: 'Go Forward', tooltip: true, icon: 'ArrowRight' });
         panel.addButton(null, 'GoUpButton', () => {
             const parentFolder = this.currentFolder?.parent;
             if (parentFolder)
-                this._enterFolder(parentFolder);
+                this._enterFolder(parentFolder, false, true);
         }, { buttonClass: 'ghost', title: 'Go Upper Folder', tooltip: true, icon: 'ArrowUp' });
         panel.addButton(null, 'RefreshButton', () => {
             this._refreshContent(undefined, undefined, true);
@@ -19098,7 +19897,7 @@ class AssetView {
                 this._updatePath();
             }
             else {
-                this._enterFolder(node.type === 'folder' ? node : node.parent);
+                this._requestEnterFolder(node.type === 'folder' ? node : node.parent);
                 this._previewAsset(node);
                 if (node.type !== 'folder') {
                     this.content.querySelectorAll('.lexassetitem').forEach((i) => i.classList.remove('selected'));
@@ -19470,12 +20269,41 @@ class AssetView {
         this.toolsPanel.refresh();
         this._refreshContent();
     }
-    async _enterFolder(folderItem, storeCurrent = true) {
+    _requestEnterFolder(folderItem, storeCurrent = true) {
+        if (!folderItem) {
+            return;
+        }
+        const onBeforeEnterFolder = this._callbacks['beforeEnterFolder'];
+        const onEnterFolder = this._callbacks['enterFolder'];
+        const resolve = (...args) => {
+            const child = this.currentData[0];
+            const sameFolder = child?.parent?.metadata?.uid === folderItem.metadata?.uid;
+            const mustRefresh = args[0] || !sameFolder;
+            this._enterFolder(folderItem, storeCurrent, mustRefresh);
+            const event = {
+                type: 'enter-folder',
+                to: folderItem,
+                userInitiated: true
+            };
+            if (onEnterFolder)
+                onEnterFolder(event, ...args);
+        };
+        if (onBeforeEnterFolder) {
+            const event = {
+                type: 'enter-folder',
+                to: folderItem,
+                userInitiated: true
+            };
+            onBeforeEnterFolder(event, resolve);
+        }
+        else {
+            resolve();
+        }
+    }
+    _enterFolder(folderItem, storeCurrent, mustRefresh) {
         if (!folderItem) {
             return;
         }
-        const child = this.currentData[0];
-        const sameFolder = child?.parent?.metadata?.uid === folderItem.metadata?.uid;
         if (storeCurrent) {
             this.prevData.push(this.currentFolder ?? {
                 id: '/',
@@ -19484,17 +20312,6 @@ class AssetView {
                 metadata: {}
             });
         }
-        let mustRefresh = !sameFolder;
-        const onEnterFolder = this._callbacks['enterFolder'];
-        if (onEnterFolder !== undefined) {
-            const event = {
-                type: 'enter_folder',
-                to: folderItem,
-                userInitiated: true
-            };
-            const r = await onEnterFolder(event);
-            mustRefresh = mustRefresh || r;
-        }
         // Update this after the event since the user might have added or modified the data
         this.currentFolder = folderItem;
         this.currentData = this.currentFolder?.children ?? [];