lido-player 0.0.2-alpha-98 → 0.0.2-beta-00

package/dist/cjs/{decode-afeNWInB.js → decode-DweIsOMk.js}

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

package/dist/cjs/{index-DMfHwNdL.js → index-BLk7DH9M.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-Dl8SlqP-.js');
+var index$1 = require('./index-Bsk4M2Qz.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -401,6 +401,7 @@ function enableDraggingWithScaling(element) {
                 duplicateElement.style.transform = computedStyle.transform;
                 duplicateElement.style.position = 'absolute';
                 duplicateElement.style.zIndex = '0';
+                duplicateElement.style.pointerEvents = "";
                 element.style.zIndex = '100';
                 document.body.appendChild(duplicateElement);
             }
@@ -567,6 +568,8 @@ function enableDraggingWithScaling(element) {
             handleResetDragElement(element, mostOverlappedElement, dropHasDrag, null, dragSelectedData);
             return;
         }
+        element.style.pointerEvents = 'none'; // Disable pointer events on drag element to prevent interference during drop handling
+        mostOverlappedElement.style.pointerEvents = 'none';
         onElementDropComplete(element, mostOverlappedElement);
         if (templateId === "blender" && element && mostOverlappedElement) {
             const allElements = document.querySelectorAll(`*`);
@@ -576,6 +579,11 @@ function enableDraggingWithScaling(element) {
             mostOverlappedElement.classList.add("highlight-element");
         }
         executeActions("this.updateCountBlender='true'", container);
+        setTimeout(() => {
+            element.style.pointerEvents = '';
+            mostOverlappedElement.style.pointerEvents = '';
+        }, 1000);
+        // element.style.pointerEvents = ''; // Re-enable pointer events on drag element after drop handling
         if (((_b = element.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
                 if (element) {
@@ -1053,6 +1061,7 @@ async function onClickDropOrDragElement(element, type) {
     // Remove the highlight class from elements matching the selector
     const highlightedElements = document.querySelectorAll(`[type='${type}']`);
     highlightedElements.forEach(el => {
+        el.style.pointerEvents = ''; // Re-enable pointer events
         removeHighlight(el);
     });
     // Dynamically create the highlight class if it doesn't exist
@@ -1071,17 +1080,22 @@ async function onClickDropOrDragElement(element, type) {
         document.head.appendChild(style);
     }
     element === null || element === void 0 ? void 0 : element.classList.add('highlight-element');
+    element.style.pointerEvents = "none";
     element.ariaPressed = 'true';
     const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
     const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
+    setTimeout(() => {
+        element.style.pointerEvents = "";
+    }, 1000);
     if (!selectedDropElement || element.classList.contains("dropped")) {
-        console.log("hello");
         onClickDragElement(element);
         return;
     }
     if (element.classList.contains("drop-element"))
         return;
     if (selectedDropElement && selectedDragElement) {
+        selectedDropElement.style.pointerEvents = 'none'; // Disable pointer events on drop element during animation
+        selectedDragElement.style.pointerEvents = 'none'; // Disable pointer events on drag element during animation
         if (selectedDragElement.getAttribute('drop-to'))
             return;
         // Add a transition for a smooth, slower movement
@@ -1108,10 +1122,12 @@ async function onClickDropOrDragElement(element, type) {
         }
         // await new Promise(resolve => setTimeout(resolve, 500));
         await onElementDropComplete(selectedDragElement, selectedDropElement);
+        if (container.getAttribute("drop-action") !== exports.DropAction.InfiniteDrop && container.getAttribute("drop-action") !== exports.DropAction.Move) {
+            selectedDragElement.style.pointerEvents = '';
+        }
+        selectedDropElement.style.pointerEvents = ''; // Re-enable pointer events on drop element after animation
         // ensure count update for click-to-drop flow
         await executeActions("this.updateCountBlender='true'", container);
-        // await new Promise(resolve => setTimeout(resolve, 500));
-        // selectedDragElement.style.transform = 'translate(0px, 0px)';
     }
 }
 const dragToDropMap = new Map();
@@ -72548,6 +72564,9 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
                 dragElement.setAttribute('hasDummy', 'true');
+                setTimeout(() => {
+                    dummyElement.style.pointerEvents = "";
+                }, 1000);
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -73630,7 +73649,7 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
     const scale = typeof calculateScale === "function" ? calculateScale() : 1;
     if (!dropElement.dataset.dropCount)
         dropElement.dataset.dropCount = "0";
-    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    let dropCount = parseInt(dropElement.childElementCount) - 1;
     // === READ DROP ZONE SIZE ===
     const dropWidth = dropRect.width;
     const dropHeight = dropRect.height;

package/dist/cjs/{index-Dl8SlqP-.js → index-Bsk4M2Qz.js}

@@ -25,7 +25,7 @@ const globalScripts = () => {};
 const globalStyles = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:left 55ms linear,\r\n    top 55ms linear,\r\n    width 55ms ease-out,\r\n    height 55ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height}";
 
 /*
- Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -599,6 +599,31 @@ var newVNode = (tag, text) => {
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/runtime/parse-property-value.ts
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
@@ -1582,7 +1607,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -1708,11 +1733,13 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1757,7 +1784,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (!Cstr.isProxied) {
           {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -1930,7 +1957,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1947,9 +1974,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DMfHwNdL.js');
-require('./index-Dl8SlqP-.js');
+var index = require('./index-BLk7DH9M.js');
+require('./index-Bsk4M2Qz.js');
 
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dl8SlqP-.js');
-var index$1 = require('./index-DMfHwNdL.js');
+var index = require('./index-Bsk4M2Qz.js');
+var index$1 = require('./index-BLk7DH9M.js');
 
 var rive$1 = {exports: {}};
 
@@ -12177,7 +12177,9 @@ const LidoContainer = class {
                 "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
                 "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
                 "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
-                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */,
+                "drawShape": "drawshape" /* templateAudio.drawShape */,
+                "drawshape": "drawshape" /* templateAudio.drawshape */,
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -12334,7 +12336,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
+        return (index.h(index.Host, { key: '00435f1640abcc2d786ab2987e5bcda22816b987', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '9a680e74b6595888174b8ad7a13cc54943292020', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '5832050a7c60b9fca20544619b3ebc9f56c3ef67' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -12874,7 +12876,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-afeNWInB.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-DweIsOMk.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');
@@ -18015,6 +18017,7 @@ const LidoTrace = class {
             freeTraceLines: [],
             currentFreePath: [],
             lastPointerPos: null,
+            isCompletingPath: false,
         };
         const url = this.svgUrls[this.currentSvgIndex];
         console.log('Loading SVG from URL:', url);
@@ -18308,6 +18311,7 @@ const LidoTrace = class {
                 state.isDragging = true;
                 state.activePointerId = evt.pointerId;
                 state.circle.setPointerCapture(evt.pointerId);
+                state.lastPointerPos = pointerPos;
             }
             this.hideFingerHint(); // ← NEW
             this.resetIdleTimer(state); // ← NEW
@@ -18329,6 +18333,7 @@ const LidoTrace = class {
             if (evt.pointerId === state.activePointerId) {
                 state.isDragging = false;
                 state.activePointerId = null;
+                state.lastPointerPos = null;
                 this.hideFingerHint(); // ← NEW
                 this.resetIdleTimer(state); // ← NEW
             }
@@ -18347,6 +18352,8 @@ const LidoTrace = class {
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
             return;
+        if (state.isCompletingPath)
+            return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
         const pointerPos = this.getPointerPosition(evt, state.svg);
@@ -18356,10 +18363,12 @@ const LidoTrace = class {
         };
         // Only update if pointer moved a minimum distance (to reduce unnecessary updates)
         const MOVE_THRESHOLD = 1; // px
+        let pointerMoveDistanceSquared = Infinity;
         if (state.lastPointerPos) {
             const dx = pointerPos.x - state.lastPointerPos.x;
             const dy = pointerPos.y - state.lastPointerPos.y;
-            if (dx * dx + dy * dy < MOVE_THRESHOLD * MOVE_THRESHOLD) {
+            pointerMoveDistanceSquared = dx * dx + dy * dy;
+            if (pointerMoveDistanceSquared < MOVE_THRESHOLD * MOVE_THRESHOLD) {
                 return;
             }
         }
@@ -18382,14 +18391,15 @@ const LidoTrace = class {
         if (distanceSquared > proximitySquared) {
             return; // Skip any further actions
         }
-        const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos);
+        const isFreeTraceMode = state.mode === index$1.TraceMode.FreeTrace || state.mode === index$1.TraceMode.BlindFreeTrace;
+        const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos, isFreeTraceMode ? undefined : state.lastLength);
         // Ensure drawing happens only within proximity threshold
         const distanceToPathSquared = this.getDistanceSquared(pointerPos, closestPoint);
         if (distanceToPathSquared > proximitySquared) {
             return; // Skip drawing if too far from the path
         }
         // For free trace mode and blind free trace mode, allow free drawing only if within the reduced proximity threshold
-        if (state.mode === index$1.TraceMode.FreeTrace || state.mode === index$1.TraceMode.BlindFreeTrace) {
+        if (isFreeTraceMode) {
             // Throttle: Only update every 2nd event (for reducing excessive dom updates)
             this.freeTraceUpdateCounter = (this.freeTraceUpdateCounter || 0) + 1;
             if (this.freeTraceUpdateCounter % 2 !== 0) {
@@ -18463,12 +18473,34 @@ const LidoTrace = class {
             return; // Exit early since we're in free trace or blind free trace mode
         }
         // In normal modes, allow movement and drawing only within the general proximity threshold
-        if (state.isDragging && closestPoint.length >= state.lastLength) {
-            state.lastLength = closestPoint.length;
+        const BACKWARD_TOLERANCE = 20; // allow slight backward movement
+        const MAX_FORWARD_JUMP = 80; // prevent jumping to wrong segment
+        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;
+        let isValidProgress = guidedClosestPoint.length >= state.lastLength - BACKWARD_TOLERANCE &&
+            guidedClosestPoint.length - state.lastLength <= MAX_FORWARD_JUMP;
+        if (!isValidProgress) {
+            const recoveryPoint = this.getClosestPointOnPath(currentPath, pointerPos);
+            const recoveryDistanceSquared = this.getDistanceSquared(pointerPos, recoveryPoint);
+            const canRecover = pointerMoveDistanceSquared >= RECOVERY_POINTER_MOVE_THRESHOLD * RECOVERY_POINTER_MOVE_THRESHOLD &&
+                recoveryDistanceSquared <= proximitySquared &&
+                recoveryPoint.length >= state.lastLength - BACKWARD_TOLERANCE &&
+                recoveryPoint.length - state.lastLength <= RECOVERY_FORWARD_JUMP &&
+                recoveryPoint.length < state.totalPathLength - RECOVERY_END_BUFFER;
+            if (canRecover) {
+                guidedClosestPoint = recoveryPoint;
+                isValidProgress = true;
+            }
+        }
+        if (state.isDragging && isValidProgress) {
+            state.lastLength = Math.max(state.lastLength, guidedClosestPoint.length);
+            state.lastPointerPos = pointerPos;
             // Only update the circle if it moved enough
-            if (Math.abs(closestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(closestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
-                state.circle.setAttribute('cx', closestPoint.x.toString());
-                state.circle.setAttribute('cy', closestPoint.y.toString());
+            if (Math.abs(guidedClosestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(guidedClosestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
+                state.circle.setAttribute('cx', guidedClosestPoint.x.toString());
+                state.circle.setAttribute('cy', guidedClosestPoint.y.toString());
             }
             // Only re-append if not already children list
             const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
@@ -18493,6 +18525,9 @@ const LidoTrace = class {
             let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     // Animate the draggable circle & green trace to the very end, then proceed
                     await this.animatePathToEnd(state, currentPath);
                     if (state.currentPathIndex < state.paths.length - 1) {
@@ -18506,9 +18541,15 @@ const LidoTrace = class {
             else {
                 // For open paths, allow completion if near the end
                 if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextPath(state);
                 }
                 else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextContainer();
                 }
             }
@@ -18617,36 +18658,39 @@ const LidoTrace = class {
         return dx * dx + dy * dy;
     }
     // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
-    getClosestPointOnPath(pathNode, point) {
+    getClosestPointOnPath(pathNode, point, lastLength) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // Optimized: Increase coarse steps for better performance
-        const coarseStep = 40; // was 20
-        let coarseClosestPoint = { length: 0 };
-        let coarseMinDistanceSquared = Infinity;
-        for (let i = 0; i <= pathLength; i += coarseStep) {
-            const pointOnPath = pathNode.getPointAtLength(i);
-            const distanceSquared = this.getDistanceSquared(point, pointOnPath);
-            if (distanceSquared < coarseMinDistanceSquared) {
-                coarseMinDistanceSquared = distanceSquared;
-                coarseClosestPoint = {
-                    x: pointOnPath.x,
-                    y: pointOnPath.y,
-                    length: i,
-                };
+        const coarseStep = 40;
+        const fineStep = 6;
+        //  dynamic search window (prevents jump)
+        const SEARCH_WINDOW = 150;
+        let searchStart = 0;
+        let searchEnd = pathLength;
+        // If lastLength exists → restrict search (smooth tracing)
+        if (lastLength !== undefined) {
+            searchStart = Math.max(0, lastLength - SEARCH_WINDOW);
+            searchEnd = Math.min(pathLength, lastLength + SEARCH_WINDOW);
+        }
+        let coarseClosest = { length: searchStart };
+        for (let i = searchStart; i <= searchEnd; i += coarseStep) {
+            const pt = pathNode.getPointAtLength(i);
+            const dist = this.getDistanceSquared(point, pt);
+            if (dist < minDistanceSquared) {
+                minDistanceSquared = dist;
+                coarseClosest = { x: pt.x, y: pt.y, length: i };
             }
         }
-        // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 6; // was 2
-        const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
-        const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
-        for (let i = searchStart; i <= searchEnd; i += fineStep) {
-            const pointOnPath = pathNode.getPointAtLength(i);
-            const distanceSquared = this.getDistanceSquared(point, pointOnPath);
-            if (distanceSquared < minDistanceSquared) {
-                minDistanceSquared = distanceSquared;
-                closestPoint = { x: pointOnPath.x, y: pointOnPath.y, length: i };
+        const fineStart = Math.max(0, coarseClosest.length - coarseStep);
+        const fineEnd = Math.min(pathLength, coarseClosest.length + coarseStep);
+        minDistanceSquared = Infinity;
+        for (let i = fineStart; i <= fineEnd; i += fineStep) {
+            const pt = pathNode.getPointAtLength(i);
+            const dist = this.getDistanceSquared(point, pt);
+            if (dist < minDistanceSquared) {
+                minDistanceSquared = dist;
+                closestPoint = { x: pt.x, y: pt.y, length: i };
             }
         }
         return closestPoint;
@@ -18699,6 +18743,7 @@ const LidoTrace = class {
         state.isDragging = false;
         state.currentPathIndex++;
         state.lastLength = 0;
+        state.isCompletingPath = false;
         this.hideFingerHint(); // remove hint when changing path
         if (state.currentPathIndex >= state.paths.length) {
             this.moveToNextContainer();
@@ -18809,7 +18854,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', 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: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
+        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" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/lido-player.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Dl8SlqP-.js');
+var index = require('./index-Bsk4M2Qz.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dl8SlqP-.js');
+var index = require('./index-Bsk4M2Qz.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/collection/collection-manifest.json

@@ -26,7 +26,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -288,7 +288,9 @@ export class LidoContainer {
                 "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
                 "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
                 "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
-                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */,
+                "drawShape": "drawshape" /* templateAudio.drawShape */,
+                "drawshape": "drawshape" /* templateAudio.drawshape */,
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -445,7 +447,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
+        return (h(Host, { key: '00435f1640abcc2d786ab2987e5bcda22816b987', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '9a680e74b6595888174b8ad7a13cc54943292020', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '5832050a7c60b9fca20544619b3ebc9f56c3ef67' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {