lido-player 0.0.2-beta-22-dev → 0.0.2-beta-23-dev

package/dist/cjs/{decode-Cr5DANqc.js → decode-BDs2S8om.js}

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

package/dist/cjs/{index-0BvcfeCt.js → index-D5olYRJo.js}

@@ -453,6 +453,19 @@ function enableDraggingWithScaling(element) {
     let clone = null;
     let duplicateElement = null;
     let mutationFlag = false;
+    let pendingMoveFrame = null;
+    let latestClientX = 0;
+    let latestClientY = 0;
+    let hasPendingMove = false;
+    let touchTransformUpdated = false;
+    let touchDragScale = 1;
+    let touchDragScaleY = 1;
+    let touchOffsetX = 0;
+    let touchOffsetY = 0;
+    let touchStartElementLeft = 0;
+    let touchStartElementTop = 0;
+    let touchStartRect = null;
+    let isTouchDragging = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
     if (!container) {
@@ -463,6 +476,33 @@ function enableDraggingWithScaling(element) {
         return;
     handlingElementFlexibleWidth(element, 'drag');
     let dragingElementTransform;
+    const getContainerScale = () => {
+        const transform = window.getComputedStyle(container).transform;
+        const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/);
+        const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+        if (matrix3dMatch) {
+            const values = matrix3dMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[4] ** 2 + values[5] ** 2) || 1,
+            };
+        }
+        if (matrixMatch) {
+            const values = matrixMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[2] ** 2 + values[3] ** 2) || 1,
+            };
+        }
+        return { scaleX: 1, scaleY: 1 };
+    };
+    const updateTouchDragScale = () => {
+        if (isTouchDragging) {
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+        }
+    };
     const onStart = (event) => {
         var _a, _b;
         if (container && container.getAttribute("game-completed") === "true")
@@ -479,17 +519,29 @@ function enableDraggingWithScaling(element) {
         if (event instanceof MouseEvent) {
             startX = event.clientX;
             startY = event.clientY;
+            touchStartRect = null;
         }
         else {
             startX = event.touches[0].clientX;
             startY = event.touches[0].clientY;
+            isTouchDragging = true;
+            touchStartRect = element.getBoundingClientRect();
+            touchOffsetX = startX - touchStartRect.left;
+            touchOffsetY = startY - touchStartRect.top;
+            touchStartElementLeft = touchStartRect.left;
+            touchStartElementTop = touchStartRect.top;
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+            element.style.willChange = 'transform';
+            window.addEventListener('resize', updateTouchDragScale);
         }
         // Apply dragging styles to the element
         element.style.opacity = '1';
         element.style.cursor = 'grabbing';
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!clone) {
                 clone = element.cloneNode(true);
                 clone.style.left = `${rect.left}px`;
@@ -508,7 +560,7 @@ function enableDraggingWithScaling(element) {
             const imgElement = element.querySelector('img');
             const src = imgElement === null || imgElement === void 0 ? void 0 : imgElement.getAttribute('src');
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!duplicateElement) {
                 duplicateElement = element.cloneNode(false);
                 duplicateElement.setAttribute('src', src);
@@ -581,31 +633,31 @@ function enableDraggingWithScaling(element) {
             target.style.opacity = value;
         }
     };
-    const onMove = (event) => {
-        if (!isDragging)
+    const processMove = () => {
+        pendingMoveFrame = null;
+        if (!isDragging || !hasPendingMove)
             return;
+        hasPendingMove = false;
+        const deferTouchDropValidation = touchTransformUpdated;
         if (isDraggingDisabled) {
             isDragging = false;
+            touchTransformUpdated = false;
             return;
         }
-        isClicked = false;
         element.style.transition = 'none';
-        const containerScale = calculateScale();
-        let dx = 0;
-        let dy = 0;
-        if (event instanceof MouseEvent) {
-            dx = (event.clientX - startX) / containerScale;
-            dy = (event.clientY - startY) / containerScale;
-        }
-        else {
-            dx = (event.touches[0].clientX - startX) / containerScale;
-            dy = (event.touches[0].clientY - startY) / containerScale;
-        }
-        // Calculate the new position considering scaling
-        const newLeft = initialX + dx;
-        const newTop = initialY + dy;
-        // Apply transform with translation without boundaries
-        element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        if (!touchTransformUpdated) {
+            const containerScale = calculateScale();
+            const dx = (latestClientX - startX) / containerScale;
+            const dy = (latestClientY - startY) / containerScale;
+            // Calculate the new position considering scaling
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            // Apply transform with translation without boundaries
+            element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        }
+        touchTransformUpdated = false;
+        if (deferTouchDropValidation)
+            return;
         // Check for overlaps and highlight only the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         const allElements = document.querySelectorAll("[type='drop']");
@@ -644,6 +696,44 @@ function enableDraggingWithScaling(element) {
             }
         }
     };
+    const onMove = (event) => {
+        if (!isDragging)
+            return;
+        if (isDraggingDisabled) {
+            isDragging = false;
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            touchTransformUpdated = false;
+            latestClientX = event.clientX;
+            latestClientY = event.clientY;
+        }
+        else {
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            latestClientX = touch.clientX;
+            latestClientY = touch.clientY;
+        }
+        if (!(event instanceof MouseEvent)) {
+            element.style.transition = 'none';
+            const desiredLeft = latestClientX - touchOffsetX;
+            const desiredTop = latestClientY - touchOffsetY;
+            const dx = (desiredLeft - touchStartElementLeft) / touchDragScale;
+            const dy = (desiredTop - touchStartElementTop) / touchDragScaleY;
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            element.style.transform = `translate3d(${newLeft}px, ${newTop}px, 0)`;
+            touchTransformUpdated = true;
+        }
+        isClicked = false;
+        if (event instanceof MouseEvent) {
+            hasPendingMove = true;
+            if (pendingMoveFrame === null) {
+                pendingMoveFrame = requestAnimationFrame(processMove);
+            }
+        }
+    };
     let lastOverlappedElement = null;
     const removeDocumentDragListeners = () => {
         document.removeEventListener('mousemove', onMove);
@@ -651,9 +741,19 @@ function enableDraggingWithScaling(element) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onEnd);
     };
+    const flushPendingMove = () => {
+        if (pendingMoveFrame === null)
+            return;
+        cancelAnimationFrame(pendingMoveFrame);
+        processMove();
+    };
     const onEnd = (endEv) => {
         var _a, _b, _c;
+        flushPendingMove();
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
         removeDocumentDragListeners();
         if (isClicked) {
             if (clone) {
@@ -759,6 +859,15 @@ function enableDraggingWithScaling(element) {
     };
     const cleanup = () => {
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
+        if (pendingMoveFrame !== null) {
+            cancelAnimationFrame(pendingMoveFrame);
+            pendingMoveFrame = null;
+        }
+        hasPendingMove = false;
+        touchTransformUpdated = false;
         observer.disconnect();
         removeDocumentDragListeners();
         element.removeEventListener('mousedown', onStart);

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-0BvcfeCt.js');
+var index = require('./index-D5olYRJo.js');
 require('./index-DnaH8sO-.js');
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DnaH8sO-.js');
-var index$1 = require('./index-0BvcfeCt.js');
+var index$1 = require('./index-D5olYRJo.js');
 
 var rive$1 = {exports: {}};
 
@@ -12465,6 +12465,13 @@ const LidoFlash = class {
         this.flipped = false;
         this.autoFlipAfter = 4500;
         this.instructionDone = false;
+        this.instructionStarted = false;
+        this.onAudioStarted = (event) => {
+            var _a;
+            const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            if (target === this.instructionText())
+                this.instructionStarted = true;
+        };
         this.onAudioEnded = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
@@ -12473,7 +12480,7 @@ const LidoFlash = class {
                 return;
             if (target === this.instructionText()) {
                 this.instructionDone = true;
-                window.setTimeout(() => {
+                this.frontStartTimer = window.setTimeout(() => {
                     this.speakFront();
                 }, 1200);
             }
@@ -12545,7 +12552,11 @@ const LidoFlash = class {
                 this.speakFront();
             }
         };
-        this.instructionText = () => { var _a; return document.getElementById(((_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id')) || ''); };
+        this.instructionText = () => {
+            const container = this.el.closest('lido-container');
+            const id = container === null || container === void 0 ? void 0 : container.getAttribute('template-id');
+            return id ? container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`) : null;
+        };
         this.frontText = () => this.el.querySelector('.card-front lido-text');
         this.backText = () => this.el.querySelector('.card-back lido-text');
         this.speakFront = () => {
@@ -12613,19 +12624,35 @@ const LidoFlash = class {
     componentDidLoad() {
         index$1.setVisibilityWithDelay(this.el, this.delayVisible);
         index$1.initEventsForElement(this.el, this.type);
+        window.addEventListener('lidoAudioStarted', this.onAudioStarted);
         window.addEventListener('lidoAudioEnded', this.onAudioEnded);
+        const container = this.el.closest('lido-container');
+        if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'flashcardtemplate') {
+            this.instructionStartTimer = window.setTimeout(() => {
+                if (!this.instructionStarted && !this.instructionDone) {
+                    const instruction = this.instructionText();
+                    if (instruction)
+                        index$1.executeActions("this.speak='true';", instruction);
+                }
+            }, 150);
+        }
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
     disconnectedCallback() {
         window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        window.removeEventListener('lidoAudioStarted', this.onAudioStarted);
         if (this.autoFlipTimer)
             window.clearTimeout(this.autoFlipTimer);
+        if (this.instructionStartTimer)
+            window.clearTimeout(this.instructionStartTimer);
+        if (this.frontStartTimer)
+            window.clearTimeout(this.frontStartTimer);
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (index.h(index.Host, { key: '8d65b494352e0c0aefb3815c87a798967ccb65aa', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, index.h("div", { key: 'db3d4fce4f9f54437485ab1274b1f9bd3b3486bc', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: 'd37770b0b08eac533265d7f8049c598df047aa37', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '2f8431017cfed9f9adb679442be833a65704d41e', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
+        return (index.h(index.Host, { key: '6650cc9f75b42c06eacbad9c56112fd343b8d02c', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, index.h("div", { key: 'e680750d80c7b7b44149d11940059114a4293b3d', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: '0ab8261e7aa931809add9cf1677f8cb594f990d6', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '3cf08684c987fcca398f1f491f254f80c7cff518', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -13072,7 +13099,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-Cr5DANqc.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BDs2S8om.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');
@@ -18776,16 +18803,9 @@ const LidoTrace = class {
         const proximitySquared = proximityThreshold * proximityThreshold;
         // Calculate the distance between the pointer and the draggable circle
         const distanceSquared = this.getDistanceSquared(pointerPos, circlePos);
-        // The red circle can lag behind a touch pointer when a lower-end device
-        // drops frames. Do not reject the touch solely because it has moved ahead
-        // of the circle: the path-distance check below still ensures the pointer
-        // remains on the trace. This prevents long, narrow curves from becoming
-        // stuck halfway through a stroke.
-        const pointerLeadThreshold = evt.pointerType === 'touch'
-            ? Math.max(proximityThreshold * 4, 180)
-            : Math.max(proximityThreshold * 2, 120);
-        if (distanceSquared > pointerLeadThreshold * pointerLeadThreshold) {
-            return;
+        // If the pointer is outside the proximity threshold, do not proceed with drawing or moving
+        if (distanceSquared > proximitySquared) {
+            return; // Skip any further actions
         }
         const isFreeTraceMode = state.mode === index$1.TraceMode.FreeTrace || state.mode === index$1.TraceMode.BlindFreeTrace;
         const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos, isFreeTraceMode ? undefined : state.lastLength);
@@ -18825,7 +18845,7 @@ const LidoTrace = class {
                 state.freeTracePointsCount = 1;
             }
             // Limit the number of points in the free trace path for performance
-            const MAX_FREE_TRACE_POINTS = 10;
+            const MAX_FREE_TRACE_POINTS = 5;
             state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
             if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
                 // If limit reached, skip adding more points
@@ -18861,7 +18881,7 @@ const LidoTrace = class {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         const BACKWARD_TOLERANCE = 20; // allow slight backward movement
         const MAX_FORWARD_JUMP = 80; // prevent jumping to wrong segment
-        const RECOVERY_FORWARD_JUMP = Math.min(evt.pointerType === 'touch' ? 480 : 320, Math.max(evt.pointerType === 'touch' ? 220 : 160, state.totalPathLength * 0.45)); // recover on long strokes without skipping short paths
+        const RECOVERY_FORWARD_JUMP = Math.min(320, Math.max(160, state.totalPathLength * 0.45)); // recover on long strokes without skipping short paths
         const RECOVERY_END_BUFFER = Math.min(60, Math.max(24, state.totalPathLength * 0.12)); // don't let recovery auto-finish the last part
         const RECOVERY_POINTER_MOVE_THRESHOLD = 8; // only recover after a meaningful drag, not during slow tracing
         let guidedClosestPoint = closestPoint;
@@ -19318,7 +19338,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'fecd265e2c8a5f7d391fe99e35739f76759da5b6', 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: '677681edfa9da3e7f8bea5f79d62900322262460', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '07506adee10b4f0348ba7b7c4d0f338d7e61cfd9', 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: '9b3c311582a7246cded868234a47293ae78a3932', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -85,6 +85,13 @@ export class LidoFlash {
         this.flipped = false;
         this.autoFlipAfter = 4500;
         this.instructionDone = false;
+        this.instructionStarted = false;
+        this.onAudioStarted = (event) => {
+            var _a;
+            const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            if (target === this.instructionText())
+                this.instructionStarted = true;
+        };
         this.onAudioEnded = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
@@ -93,7 +100,7 @@ export class LidoFlash {
                 return;
             if (target === this.instructionText()) {
                 this.instructionDone = true;
-                window.setTimeout(() => {
+                this.frontStartTimer = window.setTimeout(() => {
                     this.speakFront();
                 }, 1200);
             }
@@ -165,7 +172,11 @@ export class LidoFlash {
                 this.speakFront();
             }
         };
-        this.instructionText = () => { var _a; return document.getElementById(((_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id')) || ''); };
+        this.instructionText = () => {
+            const container = this.el.closest('lido-container');
+            const id = container === null || container === void 0 ? void 0 : container.getAttribute('template-id');
+            return id ? container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`) : null;
+        };
         this.frontText = () => this.el.querySelector('.card-front lido-text');
         this.backText = () => this.el.querySelector('.card-back lido-text');
         this.speakFront = () => {
@@ -233,19 +244,35 @@ export class LidoFlash {
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
+        window.addEventListener('lidoAudioStarted', this.onAudioStarted);
         window.addEventListener('lidoAudioEnded', this.onAudioEnded);
+        const container = this.el.closest('lido-container');
+        if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'flashcardtemplate') {
+            this.instructionStartTimer = window.setTimeout(() => {
+                if (!this.instructionStarted && !this.instructionDone) {
+                    const instruction = this.instructionText();
+                    if (instruction)
+                        executeActions("this.speak='true';", instruction);
+                }
+            }, 150);
+        }
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
     disconnectedCallback() {
         window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        window.removeEventListener('lidoAudioStarted', this.onAudioStarted);
         if (this.autoFlipTimer)
             window.clearTimeout(this.autoFlipTimer);
+        if (this.instructionStartTimer)
+            window.clearTimeout(this.instructionStartTimer);
+        if (this.frontStartTimer)
+            window.clearTimeout(this.frontStartTimer);
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '8d65b494352e0c0aefb3815c87a798967ccb65aa', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'db3d4fce4f9f54437485ab1274b1f9bd3b3486bc', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'd37770b0b08eac533265d7f8049c598df047aa37', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '2f8431017cfed9f9adb679442be833a65704d41e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: '6650cc9f75b42c06eacbad9c56112fd343b8d02c', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'e680750d80c7b7b44149d11940059114a4293b3d', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '0ab8261e7aa931809add9cf1677f8cb594f990d6', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '3cf08684c987fcca398f1f491f254f80c7cff518', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {

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

@@ -589,16 +589,9 @@ export class LidoTrace {
         const proximitySquared = proximityThreshold * proximityThreshold;
         // Calculate the distance between the pointer and the draggable circle
         const distanceSquared = this.getDistanceSquared(pointerPos, circlePos);
-        // The red circle can lag behind a touch pointer when a lower-end device
-        // drops frames. Do not reject the touch solely because it has moved ahead
-        // of the circle: the path-distance check below still ensures the pointer
-        // remains on the trace. This prevents long, narrow curves from becoming
-        // stuck halfway through a stroke.
-        const pointerLeadThreshold = evt.pointerType === 'touch'
-            ? Math.max(proximityThreshold * 4, 180)
-            : Math.max(proximityThreshold * 2, 120);
-        if (distanceSquared > pointerLeadThreshold * pointerLeadThreshold) {
-            return;
+        // If the pointer is outside the proximity threshold, do not proceed with drawing or moving
+        if (distanceSquared > proximitySquared) {
+            return; // Skip any further actions
         }
         const isFreeTraceMode = state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace;
         const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos, isFreeTraceMode ? undefined : state.lastLength);
@@ -638,7 +631,7 @@ export class LidoTrace {
                 state.freeTracePointsCount = 1;
             }
             // Limit the number of points in the free trace path for performance
-            const MAX_FREE_TRACE_POINTS = 10;
+            const MAX_FREE_TRACE_POINTS = 5;
             state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
             if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
                 // If limit reached, skip adding more points
@@ -674,7 +667,7 @@ export class LidoTrace {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         const BACKWARD_TOLERANCE = 20; // allow slight backward movement
         const MAX_FORWARD_JUMP = 80; // prevent jumping to wrong segment
-        const RECOVERY_FORWARD_JUMP = Math.min(evt.pointerType === 'touch' ? 480 : 320, Math.max(evt.pointerType === 'touch' ? 220 : 160, state.totalPathLength * 0.45)); // recover on long strokes without skipping short paths
+        const RECOVERY_FORWARD_JUMP = Math.min(320, Math.max(160, state.totalPathLength * 0.45)); // recover on long strokes without skipping short paths
         const RECOVERY_END_BUFFER = Math.min(60, Math.max(24, state.totalPathLength * 0.12)); // don't let recovery auto-finish the last part
         const RECOVERY_POINTER_MOVE_THRESHOLD = 8; // only recover after a meaningful drag, not during slow tracing
         let guidedClosestPoint = closestPoint;
@@ -1131,7 +1124,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'fecd265e2c8a5f7d391fe99e35739f76759da5b6', 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: '677681edfa9da3e7f8bea5f79d62900322262460', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '07506adee10b4f0348ba7b7c4d0f338d7e61cfd9', 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: '9b3c311582a7246cded868234a47293ae78a3932', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/stories/Templates/balancing/balancing.stories.js

@@ -34,7 +34,7 @@ function getContainerXml(args) {
     const rightValue = escapeXml(args.rightValue);
     return `
    <main>
-    <lido-container visible="true" show-next-button="true" objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Balancing.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true">
+    <lido-container visible="true" show-next-button="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Balancing.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true">
      <!-- Chimple Avatar -->
     <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.396px,portrait.400px" width="landscape.298px,portrait.369px" x="landscape.82%, portrait.32%" y="landscape.63%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
         <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
@@ -46,7 +46,7 @@ function getContainerXml(args) {
       <!-- question -->
       <lido-text visible="true" audio="" id="heading" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.speak='true';this.font-weight='600'; this.position='relative';">
       </lido-text>
-      <lido-balance  tilt="0" operation="add" visible="true" show-symbol="true" balance-symbol="${objective}" height="landscape.456px,portrait.500px" y="landscape.4%,portrait.0%" width="landscape.1136px,portrait.876px">
+      <lido-balance  tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.4%,portrait.0%" width="landscape.1136px,portrait.876px">
       <!-- drop Element -->
       <lido-cell layout="row" visible="true" id="leftparent" height="126px" width="120px" bg-color="transparent" y="landscape.22%,portrait.28%" x="landscape.14%,portrait.12%" onEntry="this.position='relative';">
         <lido-text visible="true" id="lefthandle1" tab-index="1" value="" height="126px" width="120px" type="drop"></lido-text>