lexgui 8.3.1 → 8.4.0

package/build/lexgui.js

@@ -16,7 +16,7 @@
     exports.LX = g$1.LX;
     if (!exports.LX) {
         exports.LX = {
-            version: '8.3.1',
+            version: '8.4.0',
             ready: false,
             extensions: [], // Store extensions used
             extraCommandbarEntries: [], // User specific entries for command bar
@@ -436,6 +436,8 @@
         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";
     })(exports.ComponentType || (exports.ComponentType = {}));
     exports.LX.ComponentType = exports.ComponentType;
     /**
@@ -737,6 +739,9 @@
                 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');
@@ -1474,6 +1479,12 @@
                 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';
@@ -1504,7 +1515,7 @@
             if (!options.skipSlider && options.min !== undefined && options.max !== undefined) {
                 let sliderBox = exports.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;
@@ -1641,6 +1652,11 @@
                 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)
@@ -1800,6 +1816,9 @@
                 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);
@@ -2074,6 +2093,13 @@
                     this._trigger(new IEvent(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';
@@ -2165,9 +2191,10 @@
             const container = exports.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 = exports.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 = exports.LX.makeContainer(['75%', 'auto'], `flex flex-col gap-1`, '');
                     header.prepend(titleDescBox);
@@ -2234,6 +2261,9 @@
                 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);
@@ -2862,7 +2892,12 @@
                 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, {
@@ -3026,6 +3061,11 @@
                     this._trigger(new IEvent(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;
@@ -3771,6 +3811,12 @@
                 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 = exports.LX.makeContainer(['auto', 'auto'], 'lexdate flex flex-row');
             this.root.appendChild(container);
             if (!dateAsRange) {
@@ -4163,6 +4209,52 @@
     exports.LX.CanvasDial = CanvasDial;
     exports.LX.Dial = Dial;
 
+    // Empty.ts @jxarco
+    /**
+     * @class Empty
+     * @description Empty Component
+     */
+    class Empty extends BaseComponent {
+        constructor(name, options = {}) {
+            options.hideName = true;
+            super(exports.ComponentType.EMPTY, name, null, options);
+            this.root.classList.add('place-content-center');
+            const container = exports.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 = exports.LX.makeContainer(['100%', 'auto'], `flex flex-col gap-4 px-6 items-center`, '', container);
+                if (options.header.icon) {
+                    const icon = exports.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 exports.LX.Avatar(options.header.avatar);
+                    header.appendChild(avatar.root);
+                }
+                if (options.header.title) {
+                    exports.LX.makeElement('div', 'text-center text-foreground leading-none font-medium', options.header.title, header);
+                }
+                if (options.header.description) {
+                    exports.LX.makeElement('div', 'text-sm text-center text-balance text-muted-foreground', options.header.description, header);
+                }
+            }
+            if (options.actions) {
+                const content = exports.LX.makeContainer(['100%', 'auto'], 'flex flex-row gap-1 px-6 justify-center', '', container);
+                for (let a of options.actions) {
+                    const action = new exports.LX.Button(null, a.name, a.callback, { buttonClass: "sm outline", ...a.options });
+                    content.appendChild(action.root);
+                }
+            }
+            if (options.footer) {
+                const footer = exports.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);
+                }
+            }
+        }
+    }
+    exports.LX.Empty = Empty;
+
     // FileInput.ts @jxarco
     /**
      * @class FileInput
@@ -4178,6 +4270,9 @@
                 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';
@@ -4385,6 +4480,9 @@
                 const realNameWidth = this.root.domName?.style.width ?? '0px';
                 container.style.width = `calc( 100% - ${realNameWidth})`;
             };
+            this.onSetDisabled = (disabled) => {
+                this.setLayers(value);
+            };
             const container = exports.LX.makeElement('div', 'lexlayers grid', '', this.root);
             const maxBits = options.maxBits ?? 16;
             this.setLayers = (val) => {
@@ -4461,6 +4559,9 @@
                 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 = '';
@@ -4928,16 +5029,19 @@
                 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 = exports.LX.makeIcon(options.mapIcon ?? 'SquareMousePointer');
-            const calendarButton = new Button(null, 'Open Map', () => {
-                this._popover = new Popover(calendarButton.root, [this.map2d]);
+            const icon = exports.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);
             exports.LX.doAsync(this.onResize.bind(this));
         }
     }
@@ -5644,6 +5748,9 @@
                 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);
@@ -5657,7 +5764,7 @@
                     for (let j = 0; j < g.length; ++j) {
                         let number = valueString[itemsCount++];
                         number = number == 'x' ? '' : number;
-                        const slotDom = exports.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 = exports.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');
@@ -6061,6 +6168,9 @@
                     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);
@@ -6169,6 +6279,9 @@
                 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();
@@ -7312,6 +7425,9 @@
                 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';
@@ -7380,6 +7496,11 @@
                 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';
@@ -7497,6 +7618,9 @@
                 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);
@@ -7566,6 +7690,12 @@
                 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');
@@ -8310,6 +8440,19 @@
             component.type = exports.ComponentType.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 = exports.LX.mergeClass('bg-none', options.inputClass);
+            const component = this.addTextArea(null, value, null, options);
+            component.type = exports.ComponentType.DESCRIPTION;
+            return component;
+        }
         /**
          * @method addButton
          * @param {String} name Component name
@@ -8348,18 +8491,22 @@
         }
         /**
          * @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
@@ -11133,47 +11280,67 @@
      * 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 = exports.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 ?? exports.LX.root;
-            // Remove other first
+            // Remove others first
             exports.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);
             exports.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)
@@ -11184,22 +11351,22 @@
                 position[0] = exports.LX.clamp(position[0], 0, window.innerWidth - tooltipDom.offsetWidth - 4);
                 position[1] = exports.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);
     }
     exports.LX.asTooltip = asTooltip;
     function insertChildAtIndex(parent, child, index = Infinity) {
@@ -13321,7 +13488,9 @@
         // using a fullscreen SVG with "rect" elements
         _generateMask(reference) {
             this.tourContainer.innerHTML = ''; // Clear previous content
+            const scrollTop = document.scrollingElement?.scrollTop ?? 0;
             this.tourMask = exports.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%';
@@ -13384,7 +13553,7 @@
             // Reference Highlight
             const refContainer = exports.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);
@@ -14429,12 +14598,12 @@
         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) {
@@ -14598,6 +14767,7 @@
         _lastPushTime = 0;
         _groupThresholdMs;
         _maxSteps;
+        _savedDepth = 0;
         constructor(groupThresholdMs = 2000, maxSteps = 200) {
             this._groupThresholdMs = groupThresholdMs;
             this._maxSteps = maxSteps;
@@ -14669,11 +14839,19 @@
         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)
@@ -14969,6 +15147,49 @@
             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.
@@ -14977,7 +15198,8 @@
         _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';
         }
@@ -14987,6 +15209,9 @@
         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) ?? [];
         }
@@ -15005,20 +15230,26 @@
         }
         /** 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) {
@@ -15062,6 +15293,7 @@
         resetScopes() {
             this._scopeStack = [{ name: 'global', type: 'global', line: 0 }];
             this._lineScopes = [];
+            this._lineScopesEnd = [];
         }
         clear() {
             this._symbols.clear();
@@ -15074,23 +15306,25 @@
      */
     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
@@ -15106,13 +15340,14 @@
             { 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' }
         ];
@@ -15185,6 +15420,56 @@
     exports.LX.Panel;
     exports.LX.Tabs;
     exports.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;
+    }
     //  _____             _ _ _____
     // |   __|___ ___ ___| | | __  |___ ___
     // |__   |  _|  _| . | | | __ -| .'|  _|
@@ -15207,6 +15492,15 @@
             this.thumb = exports.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 = exports.LX.clamp(ratio, 0, 1);
@@ -15330,10 +15624,18 @@
         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 = {};
@@ -15403,6 +15705,8 @@
             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
@@ -15612,19 +15916,38 @@
             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);
@@ -15716,7 +16039,7 @@
         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 = [];
@@ -15907,10 +16230,14 @@
             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;
@@ -15934,7 +16261,7 @@
             // 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();
@@ -15995,15 +16322,14 @@
         }
         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 = exports.LX.getExtension(name);
                 const lang = options.language ?? (Tokenizer.getLanguage(options.language)
                     ?? (Tokenizer.getLanguageByExtension(ext) ?? Tokenizer.getLanguage('Plain Text')));
@@ -16026,7 +16352,7 @@
                         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();
@@ -16087,7 +16413,7 @@
                             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();
@@ -16129,6 +16455,30 @@
                 }
             }, 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;
@@ -16354,20 +16704,55 @@
             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;
@@ -16448,6 +16833,13 @@
                         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).
@@ -16489,12 +16881,9 @@
                 return;
             this.cursorsLayer.innerHTML = '';
             for (const sel of this.cursorSet.cursors) {
-                const el = document.createElement('div');
-                el.className = 'cursor';
-                el.innerHTML = '&nbsp;';
+                const el = exports.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();
         }
@@ -16511,14 +16900,16 @@
                     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 = exports.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';
                 }
             }
         }
@@ -16623,6 +17014,8 @@
                         e.preventDefault();
                         if (this.onSave) {
                             this.onSave(this.getText(), this);
+                            this.undoManager.markSaved();
+                            this._setTabModified(this.currentTab.name, false);
                         }
                         return;
                     case 'z':
@@ -16645,6 +17038,17 @@
                         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
@@ -17376,10 +17780,21 @@
             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();
@@ -17406,6 +17821,8 @@
                 }
                 this._rebuildLines();
                 this._afterCursorMove();
+                if (this.currentTab)
+                    this._setTabModified(this.currentTab.name, this.undoManager.isModified());
             }
         }
         _doRedo() {
@@ -17417,6 +17834,8 @@
                 }
                 this._rebuildLines();
                 this._afterCursorMove();
+                if (this.currentTab)
+                    this._setTabModified(this.currentTab.name, this.undoManager.isModified());
             }
         }
         // Mouse input events:
@@ -17427,7 +17846,7 @@
                 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');
@@ -17435,6 +17854,15 @@
                     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;
@@ -17482,18 +17910,55 @@
             }
             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 = exports.LX.clamp(Math.floor(my / this.lineHeight), 0, this.doc.lineCount - 1);
+                const mc = exports.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);
             };
@@ -17553,47 +18018,51 @@
             }
             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
@@ -17602,9 +18071,9 @@
                 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';
@@ -17651,26 +18120,22 @@
                         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(exports.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');
@@ -17755,6 +18220,340 @@
             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 exports.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 exports.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 = exports.LX.clamp(Math.floor(y / this.lineHeight), 0, this.doc.lineCount - 1);
+            const col = exports.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 = exports.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() {