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

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

@@ -1,53 +1,53 @@
-.lido-text {
-  /* background-color: #fff; */
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-  transition: background-color 0.3s ease;
-  user-select: none;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-radius: 24px;
-  color: #333;
-  cursor: pointer;
-  font-family: 'Baloo Bhai 2', serif;
-}
-
-.text-letters {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-letters.letter-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-letter-bounce 0.4s;
-}
-
-.text-words {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-words.word-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-word-bounce 0.4s;
-}
-
-@keyframes text-letter-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.4); }
-  100% { transform: scale(1); }
-}
-
-@keyframes text-word-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.3); }
-  100% { transform: scale(1); }
-}
+.lido-text {
+  /* background-color: #fff; */
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  transition: background-color 0.3s ease;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 24px;
+  color: #333;
+  cursor: pointer;
+  font-family: 'Baloo Bhai 2', serif;
+}
+
+.text-letters {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-letters.letter-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-letter-bounce 0.4s;
+}
+
+.text-words {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-words.word-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-word-bounce 0.4s;
+}
+
+@keyframes text-letter-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+@keyframes text-word-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}

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

@@ -266,7 +266,7 @@ export class LidoText {
     }
     render() {
         const displayText = i18next.t(this.string).replace(/_phonics?/gi, '');
-        return (h(Host, { key: '14a67034db7bf3d268e999404425879c95964b82', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
+        return (h(Host, { key: 'ecef6ae20a67e2296570fe3a65cc5c99f96a1f7c', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {
@@ -873,7 +873,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -893,7 +893,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -913,7 +913,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -933,7 +933,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\nThis can be useful for animations or styling individual letters."
+                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\r\nThis can be useful for animations or styling individual letters."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/trace/assets/Tracing-hand.svg

@@ -1,8 +1,8 @@
-<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M39 16C42.314 16 45 18.686 45 22V44H48V14C48 10.686 50.686 8 54 8C57.314 8 60 10.686 60 14V44H63V20C63 16.686 65.686 14 69 14C72.314 14 75 16.686 75 20V50C75 62.703 64.703 73 52 73H40C31.163 73 24 65.837 24 57V40C24 36.686 26.686 34 30 34C33.314 34 36 36.686 36 40V22C36 18.686 38.686 16 42 16H39Z" fill="#F4C7A1"/>
-  <path d="M27 57C27 69.703 37.297 80 50 80H59C69.493 80 78 71.493 78 61V50" stroke="#C77E55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M30 43C30 39.686 32.686 37 36 37C39.314 37 42 39.686 42 43V55" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M45 22C45 18.686 47.686 16 51 16C54.314 16 57 18.686 57 22V49" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M60 14C60 10.686 62.686 8 66 8C69.314 8 72 10.686 72 14V48" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M75 20C75 16.686 77.686 14 81 14C84.314 14 87 16.686 87 20V43" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-</svg>
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M39 16C42.314 16 45 18.686 45 22V44H48V14C48 10.686 50.686 8 54 8C57.314 8 60 10.686 60 14V44H63V20C63 16.686 65.686 14 69 14C72.314 14 75 16.686 75 20V50C75 62.703 64.703 73 52 73H40C31.163 73 24 65.837 24 57V40C24 36.686 26.686 34 30 34C33.314 34 36 36.686 36 40V22C36 18.686 38.686 16 42 16H39Z" fill="#F4C7A1"/>
+  <path d="M27 57C27 69.703 37.297 80 50 80H59C69.493 80 78 71.493 78 61V50" stroke="#C77E55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30 43C30 39.686 32.686 37 36 37C39.314 37 42 39.686 42 43V55" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M45 22C45 18.686 47.686 16 51 16C54.314 16 57 18.686 57 22V49" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M60 14C60 10.686 62.686 8 66 8C69.314 8 72 10.686 72 14V48" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M75 20C75 16.686 77.686 14 81 14C84.314 14 87 16.686 87 20V43" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+</svg>

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

@@ -1,98 +1,98 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-#lido-svgContainer {
-  /* position: absolute; */
-  /* top: 0; */
-  /* left: 0; */
-  /* right: 0; */
-  /* bottom: 50px; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.lido-trace-svg {
-  width: 100%;
-  height: 100%;
-  /* max-height: calc(100vh - 50px); */
-  /* border: 1px solid black; */
-  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 {
-  /* stroke: green !important; */
-}
-
-.lido-flow-indicator {
-  stroke: blue;
-  stroke-width: 2;
-  stroke-dasharray: 6, 6; /* Uniform dotted line */
-  fill: none;
-}
-
-.lido-trace {
-  height: 700px;
-  width: 700px;
-  z-index: 1;
-  /* position: absolute; */
-  justify-items: center;
-  /* align-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); }
+:host {
+  display: block;
+  position: relative;
+}
+
+#lido-svgContainer {
+  /* position: absolute; */
+  /* top: 0; */
+  /* left: 0; */
+  /* right: 0; */
+  /* bottom: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.lido-trace-svg {
+  width: 100%;
+  height: 100%;
+  /* max-height: calc(100vh - 50px); */
+  /* border: 1px solid black; */
+  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 {
+  /* stroke: green !important; */
+}
+
+.lido-flow-indicator {
+  stroke: blue;
+  stroke-width: 2;
+  stroke-dasharray: 6, 6; /* Uniform dotted line */
+  fill: none;
+}
+
+.lido-trace {
+  height: 700px;
+  width: 700px;
+  z-index: 1;
+  /* position: absolute; */
+  justify-items: center;
+  /* align-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); }
 }

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

@@ -111,6 +111,7 @@ export class LidoTrace {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.activeTraceState = null;
         // Counter for throttling free trace updates
         // This is only an internal counter. Keeping it out of @State prevents a
         // Stencil component re-render while the user is dragging.
@@ -125,6 +126,7 @@ export class LidoTrace {
     // Handle the pointermove event with optimizations
     // Update the path trace as the red circle moves
     async initializeSVG() {
+        this.cleanupTraceState(this.activeTraceState);
         let state = {
             fileIndex: -1,
             currentPathIndex: 0,
@@ -147,7 +149,10 @@ export class LidoTrace {
             dragOffset: null,
             isCompletingPath: false,
             touchProximityThreshold: null,
+            pointerTransform: null,
+            pointerRect: null,
         };
+        this.activeTraceState = state;
         const url = this.svgUrls[this.currentSvgIndex];
         if (!url || url.trim() === '') {
             console.error('No SVG URL provided or index out of bounds.');
@@ -174,6 +179,27 @@ export class LidoTrace {
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        this.cleanupTraceState(this.activeTraceState);
+        this.activeTraceState = null;
+    }
+    /** Release listeners, pending frames, timers, and cached SVG geometry. */
+    cleanupTraceState(state) {
+        var _a;
+        if (!state)
+            return;
+        (_a = state.cleanup) === null || _a === void 0 ? void 0 : _a.call(state);
+        if (state.rafId)
+            cancelAnimationFrame(state.rafId);
+        state.rafId = null;
+        state.pointerMoveEvent = null;
+        state.pathSamples = [];
+        state.paths = [];
+        state.svg = null;
+        if (this.idleTimer !== null) {
+            clearTimeout(this.idleTimer);
+            this.idleTimer = null;
+        }
+        this.hideFingerHint();
     }
     /** ───────────────────────────────────────────────────────────
      *  Idle‑timer helpers
@@ -372,6 +398,18 @@ export class LidoTrace {
             path._lidoTraceStart = path.getPointAtLength(0);
             path._lidoTraceEnd = path.getPointAtLength(pathLength);
             path._lidoTraceIsClosed = this.getDistanceSquared(path._lidoTraceStart, path._lidoTraceEnd) < 200;
+            // Index the path once. Repeated getPointAtLength calls are expensive on
+            // low-end SVG implementations and used to dominate every pointer frame.
+            const sampleCount = 192;
+            const sampleStep = pathLength / sampleCount || 1;
+            const samples = [];
+            for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex++) {
+                const length = Math.min(pathLength, sampleIndex * sampleStep);
+                const point = path.getPointAtLength(length);
+                samples.push({ x: point.x, y: point.y, length });
+            }
+            path._lidoTraceSamples = samples;
+            path._lidoTraceSampleStep = sampleStep;
             // /** give every path an id so <mpath> can follow it */
             path.setAttribute('id', 'lido-path-' + index); //  ← NEW
             // Create green path for tracing effect
@@ -406,7 +444,7 @@ export class LidoTrace {
                 state.flowMarkers = this.createFlowMarkersForPath(path);
             }
         });
-        state.totalPathLength = state.paths[state.currentPathIndex].getTotalLength();
+        state.totalPathLength = state.paths[state.currentPathIndex]._lidoTraceLength;
     }
     // Set up the draggable circle at the start of the first path
     setupDraggableCircle(state) {
@@ -431,10 +469,14 @@ export class LidoTrace {
             return;
         state.svg.style.touchAction = 'none';
         state.circle.style.touchAction = 'none';
-        // Handle pointerdown on the circle to start dragging
-        state.circle.addEventListener('pointerdown', (evt) => {
+        // Keep named handlers so the detached SVG can be fully released when the
+        // next trace starts. Anonymous handlers here previously retained every
+        // completed trace for the lifetime of the page.
+        const onPointerDown = (evt) => {
             evt.preventDefault(); // Prevent default actions like text selection
-            const pointerPos = this.getPointerPosition(evt, state.svg);
+            state.pointerRect = state.svg.getBoundingClientRect();
+            state.pointerTransform = this.getSvgViewBoxTransform(state.svg, state.pointerRect);
+            const pointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
             const circlePos = {
                 x: parseFloat(state.circle.getAttribute('cx')),
                 y: parseFloat(state.circle.getAttribute('cy')),
@@ -459,9 +501,9 @@ export class LidoTrace {
             }
             this.hideFingerHint(); // ← NEW
             this.resetIdleTimer(state); // ← NEW
-        }, { passive: false });
+        };
         // Handle pointermove on the SVG to update the circle position
-        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointermove', (evt) => {
+        const onPointerMove = (evt) => {
             if (!state.isDragging || evt.pointerId !== state.activePointerId)
                 return;
             evt.preventDefault();
@@ -472,7 +514,7 @@ export class LidoTrace {
                     state.rafId = null;
                 });
             }
-        });
+        };
         // Handle pointerup and pointercancel on the SVG to stop dragging
         const endDrag = (evt) => {
             if (evt.pointerId === state.activePointerId) {
@@ -484,12 +526,25 @@ export class LidoTrace {
                 this.resetIdleTimer(state); // ← NEW
             }
         };
-        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerup', endDrag);
-        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointercancel', endDrag);
+        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerup', endDrag);
+        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointercancel', endDrag);
         // Optional: Prevent context menu on long press
-        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', (evt) => {
+        const onContextMenu = (evt) => {
             evt.preventDefault();
-        });
+        };
+        state.circle.addEventListener('pointerdown', onPointerDown, { passive: false });
+        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointermove', onPointerMove);
+        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', onContextMenu);
+        state.cleanup = () => {
+            var _a, _b, _c, _d, _e;
+            (_a = state.circle) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', onPointerDown);
+            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointermove', onPointerMove);
+            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', endDrag);
+            (_d = state.svg) === null || _d === void 0 ? void 0 : _d.removeEventListener('pointercancel', endDrag);
+            (_e = state.svg) === null || _e === void 0 ? void 0 : _e.removeEventListener('contextmenu', onContextMenu);
+            state.isDragging = false;
+            state.activePointerId = null;
+        };
     }
     // Modified handlePointerMove function
     async handlePointerMove(state) {
@@ -502,7 +557,7 @@ export class LidoTrace {
             return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
-        const rawPointerPos = this.getPointerPosition(evt, state.svg);
+        const rawPointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
         const pointerPos = state.dragOffset
             ? {
                 x: rawPointerPos.x - state.dragOffset.x,
@@ -534,9 +589,16 @@ export class LidoTrace {
         const proximitySquared = proximityThreshold * proximityThreshold;
         // Calculate the distance between the pointer and the draggable circle
         const distanceSquared = this.getDistanceSquared(pointerPos, circlePos);
-        // If the pointer is outside the proximity threshold, do not proceed with drawing or moving
-        if (distanceSquared > proximitySquared) {
-            return; // Skip any further actions
+        // 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;
         }
         const isFreeTraceMode = state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace;
         const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos, isFreeTraceMode ? undefined : state.lastLength);
@@ -612,7 +674,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(320, Math.max(160, state.totalPathLength * 0.45)); // recover on long strokes without skipping short paths
+        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_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;
@@ -766,9 +828,9 @@ export class LidoTrace {
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
-    getPointerPosition(evt, svg) {
+    getPointerPosition(evt, svg, cachedTransform, cachedRect) {
         var _a;
-        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg);
+        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect);
         if (viewBoxPoint)
             return viewBoxPoint;
         const svgPoint = svg.createSVGPoint();
@@ -777,13 +839,13 @@ export class LidoTrace {
         const ctm = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
         return ctm ? svgPoint.matrixTransform(ctm) : { x: evt.clientX, y: evt.clientY };
     }
-    getPointerPositionFromViewBox(evt, svg) {
-        const rect = svg.getBoundingClientRect();
+    getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect) {
+        const rect = cachedRect || svg.getBoundingClientRect();
         const viewBox = svg.viewBox.baseVal;
         if (!rect.width || !rect.height || !viewBox.width || !viewBox.height) {
             return null;
         }
-        const { offsetX, offsetY, scaleX, scaleY } = this.getSvgViewBoxTransform(svg, rect);
+        const { offsetX, offsetY, scaleX, scaleY } = cachedTransform || this.getSvgViewBoxTransform(svg, rect);
         return {
             x: viewBox.x + (evt.clientX - rect.left - offsetX) / scaleX,
             y: viewBox.y + (evt.clientY - rect.top - offsetY) / scaleY,
@@ -843,6 +905,40 @@ export class LidoTrace {
     getClosestPointOnPath(pathNode, point, lastLength) {
         var _a;
         const pathLength = (_a = pathNode._lidoTraceLength) !== null && _a !== void 0 ? _a : pathNode.getTotalLength();
+        const samples = pathNode._lidoTraceSamples;
+        const sampleStep = pathNode._lidoTraceSampleStep;
+        if ((samples === null || samples === void 0 ? void 0 : samples.length) && sampleStep) {
+            const searchWindow = lastLength === undefined ? pathLength : 150;
+            const searchStart = lastLength === undefined ? 0 : Math.max(0, lastLength - searchWindow);
+            const searchEnd = lastLength === undefined ? pathLength : Math.min(pathLength, lastLength + searchWindow);
+            let nearest = samples[Math.max(0, Math.min(samples.length - 1, Math.round((lastLength || 0) / sampleStep)))];
+            let nearestDistance = Infinity;
+            for (const sample of samples) {
+                if (sample.length < searchStart || sample.length > searchEnd)
+                    continue;
+                const distance = this.getDistanceSquared(point, sample);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearest = sample;
+                }
+            }
+            // Refine only around the cached winner. This keeps the path accurate
+            // while reducing hot-path geometry calls from roughly 50 to a handful.
+            const refinementStep = 6;
+            const refineStart = Math.max(searchStart, nearest.length - sampleStep);
+            const refineEnd = Math.min(searchEnd, nearest.length + sampleStep);
+            let closestPoint = Object.assign({}, nearest);
+            let minDistanceSquared = nearestDistance;
+            for (let length = refineStart; length <= refineEnd; length += refinementStep) {
+                const candidate = pathNode.getPointAtLength(length);
+                const distance = this.getDistanceSquared(point, candidate);
+                if (distance < minDistanceSquared) {
+                    minDistanceSquared = distance;
+                    closestPoint = { x: candidate.x, y: candidate.y, length };
+                }
+            }
+            return closestPoint;
+        }
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
         const coarseStep = 40;
@@ -1035,7 +1131,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '2f62ab117a595ba9af7f926ad7240902caf7fd99', 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: '5a14b9bc1ff4d71ffc740c8afaa1d07754044a9d', style: this.style, id: "lido-svgContainer" })));
+        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" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1323,7 +1419,7 @@ export class LidoTrace {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
+                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\r\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
                 },
                 "getter": false,
                 "setter": false,