lido-player 0.0.2-beta-01 → 0.0.2-beta-02

package/dist/cjs/{decode-DkmQvXwq.js → decode-BvT284iq.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DWfpvz_s.js');
+var index = require('./index-BhikEYm-.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-DWfpvz_s.js → index-BhikEYm-.js}

@@ -1062,7 +1062,7 @@ function handleDropElement(element) {
 }
 async function onClickDropOrDragElement(element, type) {
     const container = document.getElementById(LidoContainer);
-    if (container.getAttribute('canplay') === 'false')
+    if (container.getAttribute('canplay') === 'false' || container.getAttribute("game-completed") === "true")
         return;
     // Remove the highlight class from elements matching the selector
     const highlightedElements = document.querySelectorAll(`[type='${type}']`);
@@ -1364,21 +1364,39 @@ function highlightElement() {
 
 class AudioPlayer {
     constructor() {
+        this.currentTargetElement = null;
+        this.pendingReplayElement = null;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
         this.highlightRAF = null;
         this.endPromiseResolve = null;
-        this.handleUserClick = () => {
+        this.visibilityWaitResolvers = [];
+        this.isVisibilityChangeRegistered = false;
+        this.handleUserClick = (event) => {
             const container = document.getElementById(LidoContainer);
+            if (container && (event === null || event === void 0 ? void 0 : event.target) === container)
+                return;
             if ((container === null || container === void 0 ? void 0 : container.getAttribute('game-completed')) === 'true')
                 return;
             this.stop();
         };
+        this.handleVisibilityChange = async () => {
+            if (this.isWindowVisible()) {
+                this.resolveVisibilityWaiters();
+                return;
+            }
+            if (!this.currentTargetElement) {
+                return;
+            }
+            this.pendingReplayElement = this.currentTargetElement;
+            await this.stop(true);
+        };
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
         this.registerGlobalStopEvents();
+        this.registerVisibilityEvents();
     }
     static getI() {
         if (!AudioPlayer.instance) {
@@ -1386,7 +1404,12 @@ class AudioPlayer {
         }
         return AudioPlayer.instance;
     }
-    stop() {
+    static destroyI() {
+        if (AudioPlayer.instance) {
+            AudioPlayer.instance.destroy();
+        }
+    }
+    stop(preserveReplay = false) {
         const container = document.getElementById(LidoContainer);
         if (container && container.getAttribute('highlight-word-by-word') === 'true') {
             // stop any highlight loop
@@ -1402,6 +1425,10 @@ class AudioPlayer {
             this.endPromiseResolve = null;
             resolve();
         }
+        if (!preserveReplay) {
+            this.pendingReplayElement = null;
+        }
+        this.currentTargetElement = null;
         this.audioElement.pause();
         this.audioElement.currentTime = 0;
         this.audioElement.src = '';
@@ -1416,12 +1443,38 @@ class AudioPlayer {
             pauseElement.style.visibility = 'hidden';
         }
     }
+    isWindowVisible() {
+        return document.visibilityState === 'visible' && !document.hidden;
+    }
+    waitUntilWindowIsVisible() {
+        if (this.isWindowVisible()) {
+            return Promise.resolve();
+        }
+        this.registerVisibilityEvents();
+        return new Promise(resolve => {
+            this.visibilityWaitResolvers.push(resolve);
+        });
+    }
+    resolveVisibilityWaiters() {
+        const resolvers = this.visibilityWaitResolvers.splice(0);
+        resolvers.forEach(resolve => resolve());
+    }
     getLidoTextElement(el) {
         if (el.tagName.toLowerCase() === 'lido-text')
             return el;
         return el.closest('lido-text');
     }
     async play(targetElement) {
+        this.registerVisibilityEvents();
+        if (!this.isWindowVisible()) {
+            this.pendingReplayElement = targetElement;
+            await this.stop(true);
+            await this.waitUntilWindowIsVisible();
+            if (this.pendingReplayElement !== targetElement) {
+                return;
+            }
+            this.pendingReplayElement = null;
+        }
         // Stop any currently playing audio first if target element has audio given
         try {
             await AudioPlayer.getI().stop();
@@ -1449,6 +1502,7 @@ class AudioPlayer {
             this.stopOverlayHighlightLoop(); // stop any highlight loop;
             targetElement = textElement;
         }
+        this.currentTargetElement = targetElement;
         // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
         // If no direct audio attribute, check childrens for audio
@@ -1465,7 +1519,7 @@ class AudioPlayer {
         if (audioUrl) {
             audioUrl = convertUrlToRelative(audioUrl);
             this.audioElement.src = audioUrl;
-            console.log('🚀 Playing audio:', this.audioElement.src);
+            // console.log('🚀 Playing audio:', this.audioElement.src);
             try {
                 // setDraggingDisabled(true);
                 const language = container.getAttribute('Lang') || 'en';
@@ -1529,10 +1583,10 @@ class AudioPlayer {
         else if (targetElement.textContent) {
             try {
                 highlightSpeakingElement(targetElement);
-                window.addEventListener('click', this.handleUserClick, true);
+                // window.addEventListener('click', this.handleUserClick, true);
                 await speakText(targetElement.textContent, targetElement);
-                const highlightedElements = document.querySelectorAll('.speaking-highlight');
-                highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
+                document.querySelectorAll('.speaking-highlight');
+                // highlightedElements.forEach(element => stopHighlightForSpeakingElement(element as HTMLElement));         
             }
             catch (error) {
                 console.log('🎧 TTS Error:', error);
@@ -1541,6 +1595,17 @@ class AudioPlayer {
                 setDraggingDisabled(false);
             }
         }
+        const shouldReplayFromStart = this.pendingReplayElement === targetElement;
+        if (shouldReplayFromStart) {
+            await this.waitUntilWindowIsVisible();
+            if (this.pendingReplayElement === targetElement) {
+                this.pendingReplayElement = null;
+                return this.play(targetElement);
+            }
+        }
+        if (this.currentTargetElement === targetElement) {
+            this.currentTargetElement = null;
+        }
     }
     // GLOBAL STOP EVENTS (container change, activity change…)
     registerGlobalStopEvents() {
@@ -1552,10 +1617,26 @@ class AudioPlayer {
             window.addEventListener(key, () => this.stop());
         });
     }
+    registerVisibilityEvents() {
+        if (this.isVisibilityChangeRegistered) {
+            return;
+        }
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        this.isVisibilityChangeRegistered = true;
+    }
+    unregisterVisibilityEvents() {
+        if (!this.isVisibilityChangeRegistered) {
+            return;
+        }
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        this.isVisibilityChangeRegistered = false;
+        this.resolveVisibilityWaiters();
+    }
     // DESTROY (for hot-reload)
     destroy() {
         console.log("AudioPlayer destroyed (hot-reload safe)");
         this.stop();
+        this.unregisterVisibilityEvents();
         // Remove DOM element
         if (this.audioElement.parentNode) {
             this.audioElement.parentNode.removeChild(this.audioElement);
@@ -3660,6 +3741,8 @@ function addClickListenerForClickType(element) {
     }
     const onClick = async () => {
         var _a;
+        if (element === container)
+            return;
         if (container.getAttribute("game-completed") === "true")
             return;
         const lido_buttons = element.getAttribute('id');
@@ -3751,7 +3834,9 @@ function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
-            AudioPlayer.getI().stop();
+            if (hasValidAudio) {
+                AudioPlayer.getI().stop();
+            }
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
                 await executeActions(onCorrect, element);

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DWfpvz_s.js');
+var index = require('./index-BhikEYm-.js');
 require('./index-Bsk4M2Qz.js');
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Bsk4M2Qz.js');
-var index$1 = require('./index-DWfpvz_s.js');
+var index$1 = require('./index-BhikEYm-.js');
 
 var rive$1 = {exports: {}};
 
@@ -12738,13 +12738,19 @@ const LidoHome = class {
             }, 100);
         };
         this.btnpopupRunId = 0;
-        this.handleWindowTouch = () => {
-            void this.cancelBtnpopupRun();
+        this.activeBtnpopupRunId = null;
+        this.shouldStopActiveBtnpopupAudio = true;
+        this.handleWindowTouch = (event) => {
+            if (this.activeBtnpopupRunId === null)
+                return;
+            void this.cancelBtnpopupRun(this.hasAudioOnInteractionTarget(event.target));
         };
         this.handleWindowPointer = (event) => {
             if (event.pointerType !== 'touch')
                 return;
-            void this.cancelBtnpopupRun();
+            if (this.activeBtnpopupRunId === null)
+                return;
+            void this.cancelBtnpopupRun(this.hasAudioOnInteractionTarget(event.target));
         };
         this.popUpClick = (comment) => {
             const alertElement = this.el.querySelector('.lido-alert-popup');
@@ -12880,7 +12886,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-DkmQvXwq.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BvT284iq.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -12973,6 +12979,7 @@ const LidoHome = class {
      * Lifecycle method that cleans up event listeners when the component is removed from the DOM.
      */
     disconnectedCallback() {
+        index$1.AudioPlayer.destroyI();
         window.removeEventListener(index$1.NextContainerKey, () => {
             this.NextContainerKey();
         });
@@ -13173,7 +13180,9 @@ const LidoHome = class {
                     await index$1.AudioPlayer.getI().play(htmlel);
                 }
                 if (index$1.getCancelBtnPopup() || isStale()) {
-                    await index$1.AudioPlayer.getI().stop();
+                    if (this.shouldStopActiveBtnpopupAudio) {
+                        await index$1.AudioPlayer.getI().stop();
+                    }
                     break;
                 }
                 await new Promise(resolve => setTimeout(resolve, 300));
@@ -13199,10 +13208,31 @@ const LidoHome = class {
             console.log('Not yet filled ');
         }
     }
-    async cancelBtnpopupRun() {
+    hasAudioOnInteractionTarget(target) {
+        const element = target;
+        if (!element)
+            return false;
+        const hasValidAudio = (candidate) => {
+            if (!(candidate instanceof HTMLElement))
+                return false;
+            const audioAttr = candidate.getAttribute('audio');
+            return !!audioAttr && audioAttr.trim().length > 0;
+        };
+        if (hasValidAudio(element))
+            return true;
+        if (hasValidAudio(element.closest('[audio]')))
+            return true;
+        if (hasValidAudio(element.querySelector('[audio]')))
+            return true;
+        return false;
+    }
+    async cancelBtnpopupRun(shouldStopAudio = true) {
         this.btnpopupRunId++;
+        this.shouldStopActiveBtnpopupAudio = shouldStopAudio;
         index$1.setCancelBtnPopup(true);
-        await index$1.AudioPlayer.getI().stop();
+        if (shouldStopAudio) {
+            await index$1.AudioPlayer.getI().stop();
+        }
     }
     async handleBtnpopupClick() {
         // Invalidate any in-flight run and stop audio immediately.
@@ -13210,7 +13240,17 @@ const LidoHome = class {
         // Start fresh run.
         const nextRunId = this.btnpopupRunId;
         index$1.setCancelBtnPopup(false);
-        await this.btnpopup(nextRunId);
+        this.activeBtnpopupRunId = nextRunId;
+        this.shouldStopActiveBtnpopupAudio = true;
+        try {
+            await this.btnpopup(nextRunId);
+        }
+        finally {
+            if (this.activeBtnpopupRunId === nextRunId) {
+                this.activeBtnpopupRunId = null;
+            }
+            this.shouldStopActiveBtnpopupAudio = true;
+        }
     }
     scaleNavbarContainer() {
         setTimeout(() => {
@@ -17379,7 +17419,7 @@ const LidoShape = class {
 };
 LidoShape.style = lidoShapeCss();
 
-const lidoSlideFillCss = () => `.svg-element,svg{width:100%;height:100%}`;
+const lidoSlideFillCss = () => `.lido-svg-element,.lido-slide-svg{width:100%;height:100%}`;
 
 const LidoSlideFill = class {
     constructor(hostRef) {
@@ -17471,8 +17511,8 @@ const LidoSlideFill = class {
           <use xlink:href="#glassPath" />
         </clipPath>
       `;
-            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg class="lido-slide-svg"$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -17507,7 +17547,7 @@ const LidoSlideFill = class {
     }
     updateFill() {
         var _a;
-        const svgEl = (_a = this.el.querySelector('.svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        const svgEl = (_a = this.el.querySelector('.lido-svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         if (!svgEl)
             return;
         const rect = svgEl.querySelector('#fillArea');
@@ -17561,7 +17601,7 @@ const LidoSlideFill = class {
     }
     addRulerNumbers() {
         var _a;
-        const svgEl = (_a = this.el.querySelector('.svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        const svgEl = (_a = this.el.querySelector('.lido-svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         if (!svgEl)
             return;
         const rulerPath = svgEl.querySelector('#rulerPath');
@@ -17597,7 +17637,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9addda03d3a509cb0b23e88c59ad22c64dcd0044', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, index.h("div", { key: 'e0d62ba6795bf0ac28e9e6b7dee5df04c2015ed5', innerHTML: this.svgContent, class: "svg-element" })));
+        return (index.h(index.Host, { key: 'b9d026d02c325b4f1bc4d78a9ab1035a4da582f4', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, index.h("div", { key: '53f70e11440aad0f60736a87489b488a81177c1a', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17882,7 +17922,7 @@ const LidoText = class {
 };
 LidoText.style = lidoTextCss();
 
-const lidoTraceCss = () => `:host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}`;
+const lidoTraceCss = () => `:host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}.lido-trace-svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}`;
 
 const LidoTrace = class {
     constructor(hostRef) {
@@ -18013,7 +18053,7 @@ const LidoTrace = class {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 375, // Increased general proximity threshold (was 100)
+            proximityThreshold: 60, // Increased general proximity threshold (was 100)
             freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
             rafId: null,
             pointerMoveEvent: null,
@@ -18154,6 +18194,7 @@ const LidoTrace = class {
         svgContainer.innerHTML = svgText;
         // After inserting, get the SVG element
         const svgElement = svgContainer.querySelector('svg');
+        svgElement.classList.add('lido-trace-svg');
         // Remove the width and height attributes from the SVG element
         svgElement.removeAttribute('width');
         svgElement.removeAttribute('height');
@@ -18860,7 +18901,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '47a5947638a6a6c84cd294d6b3d8062a36553fc1', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '13e10f42f4747405ebe8c9ef5826f386a1e894e9', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: 'ad97a2d2c254f734133d045536f0401cc8b9d757', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '49c77a05b424e8443ec5af28de1ca8bc2be190c2', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/collection/components/home/lido-home.js

@@ -149,13 +149,19 @@ export class LidoHome {
             }, 100);
         };
         this.btnpopupRunId = 0;
-        this.handleWindowTouch = () => {
-            void this.cancelBtnpopupRun();
+        this.activeBtnpopupRunId = null;
+        this.shouldStopActiveBtnpopupAudio = true;
+        this.handleWindowTouch = (event) => {
+            if (this.activeBtnpopupRunId === null)
+                return;
+            void this.cancelBtnpopupRun(this.hasAudioOnInteractionTarget(event.target));
         };
         this.handleWindowPointer = (event) => {
             if (event.pointerType !== 'touch')
                 return;
-            void this.cancelBtnpopupRun();
+            if (this.activeBtnpopupRunId === null)
+                return;
+            void this.cancelBtnpopupRun(this.hasAudioOnInteractionTarget(event.target));
         };
         this.popUpClick = (comment) => {
             const alertElement = this.el.querySelector('.lido-alert-popup');
@@ -384,6 +390,7 @@ export class LidoHome {
      * Lifecycle method that cleans up event listeners when the component is removed from the DOM.
      */
     disconnectedCallback() {
+        AudioPlayer.destroyI();
         window.removeEventListener(NextContainerKey, () => {
             this.NextContainerKey();
         });
@@ -584,7 +591,9 @@ export class LidoHome {
                     await AudioPlayer.getI().play(htmlel);
                 }
                 if (getCancelBtnPopup() || isStale()) {
-                    await AudioPlayer.getI().stop();
+                    if (this.shouldStopActiveBtnpopupAudio) {
+                        await AudioPlayer.getI().stop();
+                    }
                     break;
                 }
                 await new Promise(resolve => setTimeout(resolve, 300));
@@ -610,10 +619,31 @@ export class LidoHome {
             console.log('Not yet filled ');
         }
     }
-    async cancelBtnpopupRun() {
+    hasAudioOnInteractionTarget(target) {
+        const element = target;
+        if (!element)
+            return false;
+        const hasValidAudio = (candidate) => {
+            if (!(candidate instanceof HTMLElement))
+                return false;
+            const audioAttr = candidate.getAttribute('audio');
+            return !!audioAttr && audioAttr.trim().length > 0;
+        };
+        if (hasValidAudio(element))
+            return true;
+        if (hasValidAudio(element.closest('[audio]')))
+            return true;
+        if (hasValidAudio(element.querySelector('[audio]')))
+            return true;
+        return false;
+    }
+    async cancelBtnpopupRun(shouldStopAudio = true) {
         this.btnpopupRunId++;
+        this.shouldStopActiveBtnpopupAudio = shouldStopAudio;
         setCancelBtnPopup(true);
-        await AudioPlayer.getI().stop();
+        if (shouldStopAudio) {
+            await AudioPlayer.getI().stop();
+        }
     }
     async handleBtnpopupClick() {
         // Invalidate any in-flight run and stop audio immediately.
@@ -621,7 +651,17 @@ export class LidoHome {
         // Start fresh run.
         const nextRunId = this.btnpopupRunId;
         setCancelBtnPopup(false);
-        await this.btnpopup(nextRunId);
+        this.activeBtnpopupRunId = nextRunId;
+        this.shouldStopActiveBtnpopupAudio = true;
+        try {
+            await this.btnpopup(nextRunId);
+        }
+        finally {
+            if (this.activeBtnpopupRunId === nextRunId) {
+                this.activeBtnpopupRunId = null;
+            }
+            this.shouldStopActiveBtnpopupAudio = true;
+        }
     }
     scaleNavbarContainer() {
         setTimeout(() => {

package/dist/collection/components/slideFill/lido-slide-fill.css

@@ -1,4 +1,4 @@
-.svg-element, svg {
+.lido-svg-element, .lido-slide-svg {
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/slideFill/lido-slide-fill.js

@@ -90,8 +90,8 @@ export class LidoSlideFill {
           <use xlink:href="#glassPath" />
         </clipPath>
       `;
-            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg class="lido-slide-svg"$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -126,7 +126,7 @@ export class LidoSlideFill {
     }
     updateFill() {
         var _a;
-        const svgEl = (_a = this.el.querySelector('.svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        const svgEl = (_a = this.el.querySelector('.lido-svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         if (!svgEl)
             return;
         const rect = svgEl.querySelector('#fillArea');
@@ -180,7 +180,7 @@ export class LidoSlideFill {
     }
     addRulerNumbers() {
         var _a;
-        const svgEl = (_a = this.el.querySelector('.svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        const svgEl = (_a = this.el.querySelector('.lido-svg-element')) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         if (!svgEl)
             return;
         const rulerPath = svgEl.querySelector('#rulerPath');
@@ -216,7 +216,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: '9addda03d3a509cb0b23e88c59ad22c64dcd0044', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e0d62ba6795bf0ac28e9e6b7dee5df04c2015ed5', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: 'b9d026d02c325b4f1bc4d78a9ab1035a4da582f4', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '53f70e11440aad0f60736a87489b488a81177c1a', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

package/dist/collection/components/trace/lido-trace.css

@@ -15,7 +15,7 @@
   overflow: hidden;
 }
 
-svg {
+.lido-trace-svg {
   width: 100%;
   height: 100%;
   /* max-height: calc(100vh - 50px); */

package/dist/collection/components/trace/lido-trace.js

@@ -130,7 +130,7 @@ export class LidoTrace {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 375, // Increased general proximity threshold (was 100)
+            proximityThreshold: 60, // Increased general proximity threshold (was 100)
             freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
             rafId: null,
             pointerMoveEvent: null,
@@ -271,6 +271,7 @@ export class LidoTrace {
         svgContainer.innerHTML = svgText;
         // After inserting, get the SVG element
         const svgElement = svgContainer.querySelector('svg');
+        svgElement.classList.add('lido-trace-svg');
         // Remove the width and height attributes from the SVG element
         svgElement.removeAttribute('width');
         svgElement.removeAttribute('height');
@@ -977,7 +978,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '47a5947638a6a6c84cd294d6b3d8062a36553fc1', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '13e10f42f4747405ebe8c9ef5826f386a1e894e9', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'ad97a2d2c254f734133d045536f0401cc8b9d757', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '49c77a05b424e8443ec5af28de1ca8bc2be190c2', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {