lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

package/dist/collection/stories/components/flash-card.stories.js

@@ -10,21 +10,21 @@ export default meta;
 export const FrontTextBackCol = {
     args: {},
     render: _ => {
-        const xml = `<main>
-	<lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-		<lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-			<lido-flash-card x="50" y="200" width="220px" height="140px">
-				<lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
-				</lido-text>
-				<lido-col id="col5" slot="back" disable-edit="true" visible="true" width="300px" height="400px" bg-color="orange" type="" tab-index="6" dropAttr="diagonal" value="cat" onEntry="this.position='relative';" y="landscape.-50px,portrait.">
-					<lido-image visible="true" src="https://i0.wp.com/pixahive.com/wp-content/uploads/2021/02/Yellow-pattern-abstract-background-wallpaper-325431-pixahive.jpg?fit=778%2C435ssl=1" z="0" width="200px" height="300px" onEntry="">
-					</lido-image>
-					<lido-text width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-					</lido-text>
-				</lido-col>
-			</lido-flash-card>
-		</lido-row>
-	</lido-container>
+        const xml = `<main>
+	<lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+		<lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+			<lido-flash-card x="50" y="200" width="220px" height="140px">
+				<lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
+				</lido-text>
+				<lido-col id="col5" slot="back" disable-edit="true" visible="true" width="300px" height="400px" bg-color="orange" type="" tab-index="6" dropAttr="diagonal" value="cat" onEntry="this.position='relative';" y="landscape.-50px,portrait.">
+					<lido-image visible="true" src="https://i0.wp.com/pixahive.com/wp-content/uploads/2021/02/Yellow-pattern-abstract-background-wallpaper-325431-pixahive.jpg?fit=778%2C435ssl=1" z="0" width="200px" height="300px" onEntry="">
+					</lido-image>
+					<lido-text width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+					</lido-text>
+				</lido-col>
+			</lido-flash-card>
+		</lido-row>
+	</lido-container>
 	</main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -32,17 +32,17 @@ export const FrontTextBackCol = {
 export const BothText = {
     args: {},
     render: _ => {
-        const xml = `<main>
-      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-              <lido-flash-card x="50" y="200" width="220px" height="140px">
-                  <lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
-                  </lido-text>
-                      <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-                      </lido-text>
-              </lido-flash-card>
-          </lido-row>
-      </lido-container>
+        const xml = `<main>
+      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+              <lido-flash-card x="50" y="200" width="220px" height="140px">
+                  <lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
+                  </lido-text>
+                      <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+                      </lido-text>
+              </lido-flash-card>
+          </lido-row>
+      </lido-container>
       </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -50,17 +50,17 @@ export const BothText = {
 export const BothImages = {
     args: {},
     render: _ => {
-        const xml = `<main>
-      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-              <lido-flash-card x="50" y="200" width="220px" height="140px">
-                          <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
-                      </lido-image>
-                      <lido-image visible="true" slot="back" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Boat.png" z="0" width="200px" height="300px" onEntry="">
-                      </lido-image>
-              </lido-flash-card>
-          </lido-row>
-      </lido-container>
+        const xml = `<main>
+      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+              <lido-flash-card x="50" y="200" width="220px" height="140px">
+                          <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
+                      </lido-image>
+                      <lido-image visible="true" slot="back" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Boat.png" z="0" width="200px" height="300px" onEntry="">
+                      </lido-image>
+              </lido-flash-card>
+          </lido-row>
+      </lido-container>
       </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -68,17 +68,17 @@ export const BothImages = {
 export const FrontImageBackText = {
     args: {},
     render: _ => {
-        const xml = `<main>
-        <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-            <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-                <lido-flash-card x="50" y="200" width="220px" height="140px">
-                            <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
-                        </lido-image>
-                    <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="Bird" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-                      </lido-text>
-                </lido-flash-card>
-            </lido-row>
-        </lido-container>
+        const xml = `<main>
+        <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+            <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+                <lido-flash-card x="50" y="200" width="220px" height="140px">
+                            <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
+                        </lido-image>
+                    <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="Bird" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+                      </lido-text>
+                </lido-flash-card>
+            </lido-row>
+        </lido-container>
         </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },

package/dist/collection/stories/components/keyboard.stories.js

@@ -24,15 +24,15 @@ export const Keyboard = {
     },
 };
 const getContainerXml = args => {
-    return `<main>
-            <lido-container objective="${args.objective}" is-continue-on-correct="true" drop-action="infinite-drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-              <!-- Chimple Avatar -->
-              <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-                  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-                  </lido-avatar>
-              </lido-cell>
-              ${args.type === 'drag' ? `<lido-text visible="true" string="Drag the letters to this boxes." font-family="'Baloo Bhai 2'" font-size="36px" bg-color="transparent" margin="0 0 20px 0" type="drop"></lido-text>` : ""}
-              <lido-keyboard visible="true" keys="${args.keys}" type="${args.type}" width="1000px" height="300px" keyboard-input="${args.keyboardInput === "enable" ? "true" : "false"}"></lido-keyboard>
-            </lido-container>
+    return `<main>
+            <lido-container objective="${args.objective}" is-continue-on-correct="true" drop-action="infinite-drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+              <!-- Chimple Avatar -->
+              <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+                  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+                  </lido-avatar>
+              </lido-cell>
+              ${args.type === 'drag' ? `<lido-text visible="true" string="Drag the letters to this boxes." font-family="'Baloo Bhai 2'" font-size="36px" bg-color="transparent" margin="0 0 20px 0" type="drop"></lido-text>` : ""}
+              <lido-keyboard visible="true" keys="${args.keys}" type="${args.type}" width="1000px" height="300px" keyboard-input="${args.keyboardInput === "enable" ? "true" : "false"}"></lido-keyboard>
+            </lido-container>
           </main>`;
 };

package/dist/collection/stories/components/slider.stories.js

@@ -32,9 +32,9 @@ export const QuestionAndOptions = {
 };
 function getContainerXml(args) {
     const { src, fillPercentage, fillDirection, min, max, division, numberType } = args;
-    return `<main>
-    <lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="..." aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="black" visible="true">
-      <lido-slide-fill fill="${fillPercentage}" width="500px" src="${src}" fillDirection="${fillDirection}" numberType="${numberType}" min="${min}" max="${max}" division="${division}" ></lido-slider-fill>
-    </lido-container>
+    return `<main>
+    <lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="..." aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="black" visible="true">
+      <lido-slide-fill fill="${fillPercentage}" width="500px" src="${src}" fillDirection="${fillDirection}" numberType="${numberType}" min="${min}" max="${max}" division="${division}" ></lido-slider-fill>
+    </lido-container>
   </main>`;
 }

package/dist/collection/stories/components/trace.stories.js

@@ -21,10 +21,10 @@ export const QuestionAndOptions = {
 function getContainerXml(args) {
     let svgText = args.svgFile[0];
     let mode = args.mode;
-    return `<main>
-	<lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="D-6ba518e3,D-5a192ba3,D-b686f882,D-9095b74f,D-e0a32c78,D-1e4e88f1" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-		<lido-trace id="image1" tab-index="2" value="image1" visible="true" svgSource="${svgText}" mode="${mode}" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
-		</lido-trace>
-	</lido-container>
+    return `<main>
+	<lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="D-6ba518e3,D-5a192ba3,D-b686f882,D-9095b74f,D-e0a32c78,D-1e4e88f1" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-trace id="image1" tab-index="2" value="image1" visible="true" svgSource="${svgText}" mode="${mode}" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
+		</lido-trace>
+	</lido-container>
 	</main>`;
 }

package/dist/collection/utils/audioPlayer.js

@@ -1,11 +1,13 @@
 import { convertUrlToRelative, speakText } from "./utils";
 import { highlightSpeakingElement, stopHighlightForSpeakingElement } from "./utilsHandlers/highlightHandler";
 import { setDraggingDisabled } from "./utilsHandlers/dragDropHandler";
+import { NextContainerKey, PrevContainerKey, ActivityChangeKey, GameCompletedKey, GameExitKey, ActivityEndKey, LessonEndKey } from "./constants";
 export class AudioPlayer {
     constructor() {
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
+        this.registerGlobalStopEvents();
     }
     static getI() {
         if (!AudioPlayer.instance) {
@@ -31,13 +33,23 @@ export class AudioPlayer {
         }
     }
     async play(targetElement) {
+        // Stop any currently playing audio first if target element has audio given
+        try {
+            await AudioPlayer.getI().stop();
+        }
+        catch (e) {
+            console.error('Error stopping audio before speak action:', e);
+        }
+        // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
+        // If no direct audio attribute, check childrens for audio
         if (!audioUrl) {
             const childElements = targetElement.children;
             for (let i = 0; i < childElements.length; i++) {
                 const childAudioUrl = childElements[i].getAttribute('audio');
                 if (childAudioUrl) {
                     audioUrl = childAudioUrl;
+                    break;
                 }
             }
         }
@@ -47,18 +59,21 @@ export class AudioPlayer {
             console.log('🚀 Playing audio:', this.audioElement.src);
             try {
                 setDraggingDisabled(true);
-                await this.audioElement.play();
                 highlightSpeakingElement(targetElement);
+                await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
-                        stopHighlightForSpeakingElement(targetElement);
                         resolve();
-                        setDraggingDisabled(false);
                     };
                 });
             }
             catch (error) {
-                console.log('🚀 Audio play error:', error);
+                console.log('🎧 Audio play error:', error);
+            }
+            finally {
+                this.audioElement.onended = null; // cleanup
+                setDraggingDisabled(false);
+                stopHighlightForSpeakingElement(targetElement);
             }
         }
         // If no audio, use text-to-speech
@@ -68,11 +83,33 @@ export class AudioPlayer {
                 await speakText(targetElement.textContent, targetElement);
                 const highlightedElements = document.querySelectorAll('.speaking-highlight');
                 highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
-                setDraggingDisabled(false);
             }
             catch (error) {
-                console.log('🚀 TTS Error:', error);
+                console.log('🎧 TTS Error:', error);
+            }
+            finally {
+                setDraggingDisabled(false);
             }
         }
     }
+    // GLOBAL STOP EVENTS (container change, activity change…)
+    registerGlobalStopEvents() {
+        const stopEvents = [
+            NextContainerKey, PrevContainerKey, LessonEndKey, ActivityChangeKey,
+            ActivityEndKey, GameCompletedKey, GameExitKey
+        ];
+        stopEvents.forEach(key => {
+            window.addEventListener(key, () => this.stop());
+        });
+    }
+    // DESTROY (for hot-reload)
+    destroy() {
+        console.log("AudioPlayer destroyed (hot-reload safe)");
+        this.stop();
+        // Remove DOM element
+        if (this.audioElement.parentNode) {
+            this.audioElement.parentNode.removeChild(this.audioElement);
+        }
+        AudioPlayer.instance = undefined;
+    }
 }

package/dist/collection/utils/constants.js

@@ -16,6 +16,7 @@ export const DropHasDrag = 'dropHasDrag';
 export const DropToAttr = 'drop-to';
 export const DropTimeAttr = 'drop-time';
 export const LidoContainer = 'lido-container';
+export const LangChangeEvent = 'languageChanged';
 export var TraceMode;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";

package/dist/collection/utils/i18n.js

@@ -0,0 +1,36 @@
+import i18next from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+// Import all your translation JSONs
+import en from "../i18n/en.json";
+import fr from "../i18n/fr.json";
+import hi from "../i18n/hi.json";
+import ka from "../i18n/ka.json";
+import te from "../i18n/te.json";
+import port from "../i18n/port.json";
+i18next
+    .use(LanguageDetector)
+    .init({
+    resources: {
+        en: { translation: en },
+        fr: { translation: fr },
+        hi: { translation: hi },
+        ka: { translation: ka },
+        te: { translation: te },
+        port: { translation: port },
+    },
+    fallbackLng: 'en', // fallback if current lang not found
+    debug: false,
+    interpolation: {
+        escapeValue: false, // Stencil already handles escaping
+    },
+    detection: {
+        // optional: tune detection logic
+        order: ['querystring', 'localStorage', 'navigator', 'htmlTag'],
+        caches: ['localStorage'],
+    },
+});
+// Helper wrappers (simplify usage in components)
+export const t = (key, options) => i18next.t(key, options);
+export const setLanguage = (lang) => i18next.changeLanguage(lang);
+export const getLanguage = () => i18next.language;
+export default i18next;