lido-player 0.0.1 → 0.0.2-alpha-1

package/dist/cjs/app-col_12.cjs.entry.js

@@ -0,0 +1,1258 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d28e716.js');
+const utils = require('./utils-8ac0e3b7.js');
+
+const appColCss = ".col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.col>*{}";
+const AppColStyle0 = appColCss;
+
+const AppCol = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * This lifecycle hook is called after the component is rendered in the DOM.
+     * It initializes events for the column based on the provided type.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles applied to the column, mainly for positioning and background.
+        const style = {
+            height: this.height,
+            width: this.width,
+            backgroundColor: this.bgColor,
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'flex' : 'none',
+            zIndex: this.z,
+        };
+        return (index.h(index.Host, { key: '3cd3b141cf167e7c43132fc0f28fe049765e3e68', id: this.id, class: "col", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: 'fecc9cdf6b7204461c07e89de0ebec35559f8daf' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppCol.style = AppColStyle0;
+
+const appContainerCss = ".container{position:relative;height:100%;width:100%;background-color:var(--bgColor, #ffffff);display:flex;flex-direction:column;justify-content:center;align-items:center}";
+const AppContainerStyle0 = appContainerCss;
+
+const AppContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.objective = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onIncorrectTouch = undefined;
+        this.onEntry = undefined;
+        this.canplay = true;
+    }
+    /**
+     * Scales the container based on the window or screen size, maintaining the aspect ratio.
+     * The container scales according to the minimum dimension of the screen.
+     *
+     * @param container The container element to be scaled.
+     */
+    scaleContainer(container) {
+        var _a;
+        const widths = [window.innerWidth];
+        if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
+            widths.push(window.screen.width);
+        }
+        const width = Math.min(...widths);
+        const height = document.documentElement.clientHeight;
+        const scaleX = width / 1600; // Scale based on a reference width of 1600px
+        const scaleY = height / 900; // Scale based on a reference height of 900px
+        const scale = Math.min(scaleX, scaleY);
+        // Center the container and apply scaling
+        container.style.transform = `translate(-50%, -50%) scale(${scale})`;
+    }
+    /**
+     * Lifecycle hook that runs after the component is loaded.
+     * - It scales the container.
+     * - It sets the background color of the body.
+     * - Adds event listeners for `resize` and `load` to rescale the container on window size changes.
+     */
+    componentDidLoad() {
+        this.scaleContainer(this.el);
+        document.body.style.backgroundColor = this.bgColor;
+        // Re-scale the container on window resize or load events
+        window.addEventListener('resize', () => this.scaleContainer(this.el));
+        window.addEventListener('load', () => this.scaleContainer(this.el));
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Define the styles for the container element
+        const style = {
+            backgroundColor: this.bgColor,
+            width: '1600px', // Fixed width of the container
+            height: '900px', // Fixed height of the container
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)', // Centering the container
+        };
+        console.log('🚀 ~ AppContainer ~ canplay:', this.canplay);
+        return (index.h(index.Host, { key: '3de4da721c5eb3dcdd9b29e01cfcc7968d40a761', id: "container", tabindex: 0, class: "container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onIncorrectTouch: this.onIncorrectTouch, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: 'bd4abd0fd97b92a6f942554be26a28d3948f7a5d' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppContainer.style = AppContainerStyle0;
+
+const indexCss = "@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'); body{overflow:hidden}";
+const AppHomeStyle0 = indexCss;
+
+const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes shake{0%{transform:translateX(0);color:red;outline:4px solid red}10%{transform:translateX(-5px);color:red;outline:4px solid red}20%{transform:translateX(5px);color:red;outline:4px solid red}30%{transform:translateX(-5px);color:red;outline:4px solid red}40%{transform:translateX(5px);color:red;outline:4px solid red}50%{transform:translateX(-5px);color:red;outline:4px solid red}60%{transform:translateX(5px);color:red;outline:4px solid red}70%{transform:translateX(-5px);color:red;outline:4px solid red}80%{transform:translateX(5px);color:red;outline:4px solid red}90%{transform:translateX(-5px);color:red;outline:4px solid red}100%{transform:translateX(0);color:red;outline:4px solid red}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}";
+const AppHomeStyle1 = animationCss;
+
+const appHomeCss = ".snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.dot-container{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.dot.completed{background-color:grey}.dot.current{background-color:green}.dot:not(.completed):not(.current){background-color:#bbb}";
+const AppHomeStyle2 = appHomeCss;
+
+const AppHome = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Event handler for transitioning to the next container in the sequence.
+         * If the last container is reached, it shows a completion message.
+         */
+        this.nextContainer = (index) => {
+            if (index != undefined && index == this.currentContainerIndex)
+                return;
+            // Clear selected values from localStorage on container transition
+            localStorage.removeItem(utils.SelectedValuesKey);
+            localStorage.removeItem(utils.DragSelectedMapKey);
+            if (index != undefined && index < this.containers.length) {
+                // Move to the next container
+                this.currentContainerIndex = index;
+                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+            }
+            else if (this.currentContainerIndex < this.containers.length - 1) {
+                // Move to the next container
+                this.currentContainerIndex++;
+                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+            }
+            else {
+                // Show the completion message if all containers have been viewed
+                this.showCompletionMessage = true;
+                const event = new CustomEvent('gameCompleted');
+                window.dispatchEvent(event);
+                // Hide the completion message after 3 seconds
+                setTimeout(() => {
+                    this.showCompletionMessage = false;
+                }, 3000);
+            }
+            // Reset the containers array to trigger a re-render
+            this.containers = [...this.containers];
+        };
+        this.xmlData = undefined;
+        this.initialIndex = 0;
+        this.canplay = true;
+        this.currentContainerIndex = this.initialIndex;
+        this.showCompletionMessage = false;
+        this.containers = [];
+    }
+    /**
+     * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
+     * between containers and parses the XML data into containers.
+     */
+    componentWillLoad() {
+        // Listen for 'nextContainer' event to transition between containers
+        window.addEventListener('nextContainer', () => {
+            this.nextContainer();
+        });
+        window.addEventListener('changeContainer', (e) => {
+            this.nextContainer(e.detail.index);
+        });
+        // Parse the provided XML data
+        this.parseXMLData(this.xmlData);
+        // Remove stored values in localStorage when the page is about to be unloaded
+        window.addEventListener('beforeunload', () => {
+            localStorage.removeItem(utils.SelectedValuesKey);
+            localStorage.removeItem(utils.DragSelectedMapKey);
+        });
+    }
+    /**
+     * Lifecycle method that cleans up event listeners when the component is removed from the DOM.
+     */
+    disconnectedCallback() {
+        window.removeEventListener('nextContainer', () => {
+            this.nextContainer();
+        });
+        window.removeEventListener('changeContainer', (e) => {
+            this.nextContainer(e.detail.index);
+        });
+    }
+    /**
+     * Parses the provided XML string into an XML DOM object and extracts the containers from it.
+     *
+     * @param xmlData - The XML data as a string.
+     */
+    parseXMLData(xmlData) {
+        if (xmlData) {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlData, 'text/xml');
+            const rootElement = xmlDoc.documentElement;
+            // Parse containers from the root XML element
+            this.parseContainers(rootElement);
+        }
+    }
+    /**
+     * Recursively parses an XML element and its children, converting them into corresponding Stencil components.
+     *
+     * @param element - The XML element to parse.
+     * @returns The corresponding Stencil component with parsed props and children.
+     */
+    parseElement(element) {
+        const tagName = element.nodeName.toLowerCase();
+        const props = {};
+        // Extract attributes from the element and map them to props
+        Array.from(element.attributes).forEach(attr => {
+            props[attr.name] = attr.value;
+        });
+        // Recursively parse child elements
+        const children = Array.from(element.childNodes)
+            .map(child => {
+            if (child.nodeType === 1) {
+                return this.parseElement(child);
+            }
+            else if (child.nodeType === 3 && child.textContent.trim() !== '') {
+                return child.textContent;
+            }
+            return null;
+        })
+            .filter(Boolean);
+        // Map XML tags to Stencil components
+        const componentMapping = {
+            'app-container': (index.h("app-container", Object.assign({}, props, { canplay: this.canplay }), children)),
+            'app-col': index.h("app-col", Object.assign({}, props), children),
+            'app-trace': index.h("app-trace", Object.assign({}, props), children),
+            'app-image': index.h("app-image", Object.assign({}, props), children),
+            'app-row': index.h("app-row", Object.assign({}, props), children),
+            'app-text': index.h("app-text", Object.assign({}, props), children),
+            'app-pos': index.h("app-pos", Object.assign({}, props), children),
+            'app-shape': index.h("app-shape", Object.assign({}, props), children),
+            'app-wrap': index.h("app-wrap", Object.assign({}, props), children),
+            'app-random': index.h("app-random", Object.assign({}, props), children),
+        };
+        // If the tag is known, return the corresponding Stencil component, otherwise log a warning
+        if (componentMapping[tagName]) {
+            return componentMapping[tagName];
+        }
+        else {
+            console.warn(`Unknown tag: ${tagName}`);
+            return null;
+        }
+    }
+    /**
+     * Parses the `app-container` elements from the XML root element and stores them in the `containers` state.
+     *
+     * @param rootElement - The root element of the parsed XML document.
+     */
+    parseContainers(rootElement) {
+        const containers = [];
+        const containerElements = rootElement.querySelectorAll('app-container');
+        // Parse each container and add it to the array
+        containerElements.forEach(container => {
+            const parsedElement = this.parseElement(container);
+            if (parsedElement) {
+                containers.push(parsedElement);
+            }
+        });
+        this.containers = containers;
+    }
+    /**
+     * Renders navigation dots for each container, indicating the progress of the user.
+     * Clicking on a dot allows the user to jump to a specific container.
+     */
+    renderDots() {
+        return (index.h("div", { id: "dot-indicator", class: "dot-container" }, this.containers.map((_, index$1) => (index.h("span", { class: `dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1) })))));
+    }
+    /**
+     * Jumps to a specific container based on the index of the dot clicked.
+     *
+     * @param index - The index of the container to jump to.
+     */
+    jumpToContainer(index) {
+        this.nextContainer(index);
+        // this.currentContainerIndex = index;
+        // this.containers = [...this.containers]; // Trigger re-render
+    }
+    render() {
+        if (!this.xmlData) {
+            // If no XML data is provided, prompt the user to provide it
+            return index.h("div", null, "Please provide XML data.");
+        }
+        return (index.h("div", null, index.h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && index.h("div", { class: "snackbar" }, "All containers have been displayed!")));
+    }
+};
+AppHome.style = AppHomeStyle0 + (AppHomeStyle1 + AppHomeStyle2);
+
+const appImageCss = ".image{user-select:none;-webkit-user-drag:none;object-fit:contain;max-width:100%;max-height:100%;aspect-ratio:1 / 1;}";
+const AppImageStyle0 = appImageCss;
+
+const AppImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+        this.src = undefined;
+    }
+    /**
+     * Lifecycle method that runs after the component has been loaded into the DOM.
+     * It initializes custom events based on the `type` of the image component.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles for the image, including dimensions, positioning, and visibility
+        const style = {
+            height: this.height,
+            width: this.width,
+            backgroundColor: this.bgColor,
+            top: this.y,
+            left: this.x,
+            zIndex: this.z,
+            display: this.visible ? 'flex' : 'none',
+            alignItems: 'center', // Vertically center the image
+            justifyContent: 'center', // Horizontally center the image
+        };
+        return (index.h(index.Host, { key: 'bc0557fa586341933b698df56ecc5929b4185a58', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("img", { key: 'fa5cc8aacf12b26625b4bc68a52f19144bc82f99', class: "image", src: this.src, alt: "", style: style })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppImage.style = AppImageStyle0;
+
+const appPosCss = ".pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.pos>*{position:absolute}";
+const AppPosStyle0 = appPosCss;
+
+const AppPos = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that is called after the component has been rendered in the DOM.
+     * It initializes custom events based on the `type` of the component.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles to position and size the component
+        const style = {
+            height: this.height,
+            width: this.width,
+            backgroundColor: this.bgColor,
+            top: this.y,
+            left: this.x,
+            zIndex: this.z,
+            display: this.visible ? 'block' : 'none', // Toggle visibility
+        };
+        return (index.h(index.Host, { key: 'c63889200e5b87ccddf17f236898df959b643aee', id: this.id, class: "pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: '09b1a03217ffc2c02836f4ac6f61f0887b8445cb' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppPos.style = AppPosStyle0;
+
+const appRandomCss = ".random{display:flex;justify-content:space-between;align-items:center;position:absolute;}.random>*{position:absolute}";
+const AppRandomStyle0 = appRandomCss;
+
+const AppRandom = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that runs after the component is rendered in the DOM.
+     * It randomly positions all child elements within the container using CSS `top` and `left` percentages.
+     */
+    componentDidLoad() {
+        // Select all direct child elements of the component
+        const slotElements = this.el.querySelectorAll('.random > *');
+        // Iterate over each child and apply random positions
+        slotElements.forEach((child) => {
+            const randomTop = Math.random() * 100; // Random value between 0 and 100 for vertical position
+            const randomLeft = Math.random() * 100; // Random value between 0 and 100 for horizontal position
+            child.style.top = `${randomTop}%`;
+            child.style.left = `${randomLeft}%`;
+        });
+    }
+    render() {
+        // Inline styles for the container, including dimensions, positioning, and visibility
+        const style = {
+            height: this.height,
+            width: this.width,
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'block' : 'none', // Toggle visibility
+            zIndex: this.z,
+            backgroundColor: this.bgColor,
+        };
+        return (index.h(index.Host, { key: '66b661510df51498d8aaeaa3b8c43d7caf3ab6d1', class: "random", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: '70b2819af97f7d1f85de0ea1161ae95014e427f4' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppRandom.style = AppRandomStyle0;
+
+const AppRoot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.xmlPath = undefined;
+        this.initialIndex = 0;
+        this.canplay = true;
+        this.xmlData = undefined;
+    }
+    /**
+     * Lifecycle method that runs before the component is loaded.
+     * It fetches the XML data from the specified path or URL and sets it to the component's state.
+     */
+    async componentWillLoad() {
+        // Validate the xmlPath prop
+        if (!this.xmlPath) {
+            console.error('XML path is not provided.');
+            return;
+        }
+        // Fetch the XML data
+        try {
+            const resolvedPath = this.xmlPath.startsWith('http')
+                ? this.xmlPath // Use the provided URL if it's an HTTP/HTTPS link
+                : index.getAssetPath(this.xmlPath); // Otherwise, resolve it as an asset path
+            const response = await fetch(resolvedPath);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch XML data: ${response.statusText}`);
+            }
+            const data = await response.text();
+            // Store the XML data in the component's state
+            this.xmlData = data;
+        }
+        catch (error) {
+            console.error('Error fetching XML data:', error);
+            this.xmlData = null;
+        }
+    }
+    render() {
+        // Show a loading message until the XML data is fetched
+        if (this.xmlData === undefined) {
+            return index.h("div", null, "Loading...");
+        }
+        // Show an error message if the XML data could not be fetched
+        if (this.xmlData === null) {
+            return index.h("div", null, "Error loading XML data. Please check the path or URL.");
+        }
+        // Once the XML data is loaded, pass it to the `app-home` component
+        return index.h("app-home", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData });
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+
+const appRowCss = ".row{display:flex;justify-content:space-between;align-items:center;}.row>*{}";
+const AppRowStyle0 = appRowCss;
+
+const AppRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that runs after the component is loaded into the DOM.
+     * It initializes custom events based on the `type` of the row component.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles to position and size the row component
+        const style = {
+            height: this.height,
+            width: this.width,
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'flex' : 'none', // Flexbox for row layout
+            zIndex: this.z,
+            backgroundColor: this.bgColor, // Apply background color if provided
+        };
+        return (index.h(index.Host, { key: 'fc3153fcef0ccc98d99afd2e93607e8c71c0a591', class: "row", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: 'b28ce98adfc7ad7c9ac191eae523b974f9bb97f6' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppRow.style = AppRowStyle0;
+
+const appShapeCss = ".shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.rectangle{border-radius:0}.circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
+const AppShapeStyle0 = appShapeCss;
+
+const AppShape = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.shapeType = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that runs after the component is loaded into the DOM.
+     * It initializes custom events based on the `type` of the shape component.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles to position and size the shape component
+        const style = {
+            height: this.shapeType !== 'polygon' ? this.height : undefined, // Set height unless it's a polygon
+            width: this.shapeType !== 'polygon' ? this.width : undefined, // Set width unless it's a polygon
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'block' : 'none', // Toggle visibility
+            zIndex: this.z,
+            backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
+        };
+        return (index.h(index.Host, { key: '64db966fc0a1f601fd0002d0f71de3ec3aae241a', class: `shape ${this.shapeType}`, value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }));
+    }
+    get el() { return index.getElement(this); }
+};
+AppShape.style = AppShapeStyle0;
+
+const appTextCss = ".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:8px;color:#333;cursor:pointer}.text:hover{background-color:#f0f0f0}";
+const AppTextStyle0 = appTextCss;
+
+const AppText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.string = undefined;
+        this.font = undefined;
+        this.fontSize = undefined;
+        this.fontColor = undefined;
+        this.highlightWhileSpeaking = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that runs after the component is rendered in the DOM.
+     * It initializes custom events based on the `type` of the text component.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles to customize the appearance and positioning of the text component
+        const style = {
+            height: this.height,
+            width: this.width,
+            backgroundColor: this.bgColor,
+            top: this.y,
+            left: this.x,
+            zIndex: this.z,
+            fontSize: this.fontSize,
+            fontFamily: this.font,
+            color: this.fontColor,
+            display: this.visible ? 'flex' : 'none', // Show or hide based on visibility prop
+        };
+        return (index.h(index.Host, { key: '06c76433420706301a70a892a9081dfea480167e', class: "text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden }, this.string));
+    }
+    get el() { return index.getElement(this); }
+};
+AppText.style = AppTextStyle0;
+
+const appTraceCss = ":host{display:block;position:relative}#svgContainer{position:absolute;top:0;left:0;right:0;bottom:50px;display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#draggableCircle{cursor:pointer;fill:red;transition:fill 0.2s, r 0.2s}.blindTracing{stroke:none !important}.blindFreeTrace{stroke:none !important}.hovered{cursor:grab;fill:darkred}#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}}.trace-path-green{stroke:green !important}";
+const AppTraceStyle0 = appTraceCss;
+
+const AppTrace = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.svgSource = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.tabIndex = undefined;
+        this.mode = undefined;
+        this.fileIndex = -1;
+        this.isDragging = false;
+        this.activePointerId = null;
+    }
+    // MODES = ['noFlow', 'showFlow', 'freeTrace', 'blindTracing', 'blindFreeTrace'];
+    // Handle the pointermove event with optimizations
+    // Update the path trace as the red circle moves
+    async initializeSVG() {
+        let state = {
+            fileIndex: -1,
+            currentPathIndex: 0,
+            lastLength: 0,
+            totalPathLength: 0,
+            isDragging: false,
+            circle: null,
+            paths: [],
+            svg: null,
+            proximityThreshold: 100, // General proximity threshold
+            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
+            rafId: null,
+            pointerMoveEvent: null,
+            activePointerId: null,
+            mode: this.mode,
+            flowMarkers: [],
+            freeTraceLines: [],
+        };
+        await this.loadAnotherSVG(state, true); // Load the first SVG
+    }
+    componentWillLoad() {
+        this.initializeSVG();
+    }
+    // Fetch the SVG file asynchronously
+    async fetchSVG(url) {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch SVG (${url}): ${response.statusText}`);
+        }
+        return await response.text();
+    }
+    // to calculate the bounding box of all paths
+    calculateBoundingBox(paths, padding = 22) {
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        paths.forEach(path => {
+            const length = path.getTotalLength();
+            const numPoints = 100; // Number of points to sample along the path
+            for (let i = 0; i <= numPoints; i++) {
+                const point = path.getPointAtLength((i / numPoints) * length);
+                if (point.x < minX)
+                    minX = point.x;
+                if (point.y < minY)
+                    minY = point.y;
+                if (point.x > maxX)
+                    maxX = point.x;
+                if (point.y > maxY)
+                    maxY = point.y;
+            }
+        });
+        // Apply padding
+        minX -= padding;
+        minY -= padding;
+        maxX += padding;
+        maxY += padding;
+        return { minX, minY, maxX, maxY };
+    }
+    // Insert the fetched SVG into the container and adjust viewBox
+    insertSVG(svgText) {
+        const svgContainer = document.getElementById('svgContainer');
+        svgContainer.innerHTML = svgText;
+        // After inserting, get the SVG element
+        const svgElement = svgContainer.querySelector('svg');
+        // Remove the width and height attributes from the SVG element
+        svgElement.removeAttribute('width');
+        svgElement.removeAttribute('height');
+        // Get all paths
+        const paths = svgElement.querySelectorAll('path, line');
+        // Calculate bounding box
+        const bbox = this.calculateBoundingBox(Array.from(paths));
+        // Set the viewBox to the bounding box
+        const viewBoxWidth = bbox.maxX - bbox.minX;
+        const viewBoxHeight = bbox.maxY - bbox.minY;
+        svgElement.setAttribute('viewBox', `${bbox.minX} ${bbox.minY} ${viewBoxWidth} ${viewBoxHeight}`);
+    }
+    // Retrieve the SVG element from the container
+    getSVGElement() {
+        const svgContainer = document.getElementById('svgContainer');
+        return svgContainer.querySelector('svg');
+    }
+    // Get all path and line elements from the SVG
+    getPaths(svg) {
+        return Array.from(svg.querySelectorAll('path, line'));
+    }
+    // Create flow markers along the path to guide the user
+    createFlowMarkersForPath(path, markerCount = 10) {
+        var _a;
+        const totalLength = path.getTotalLength();
+        const interval = totalLength / (markerCount + 1); // Space markers evenly
+        const markers = [];
+        for (let i = 1; i <= markerCount; i++) {
+            const point = path.getPointAtLength(i * interval);
+            const nextPoint = path.getPointAtLength((i + 0.5) * interval); // Slightly ahead point for direction
+            // Create an arrow marker
+            const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);
+            const arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            arrowMarker.setAttribute('points', '-5,-5 0,0 -5,5');
+            arrowMarker.setAttribute('fill', 'blue');
+            arrowMarker.setAttribute('transform', `translate(${point.x},${point.y}) rotate(${(angle * 180) / Math.PI})`);
+            arrowMarker.setAttribute('class', 'flow-indicator');
+            markers.push(arrowMarker);
+            (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(arrowMarker); // Append to the same SVG container
+        }
+        return markers;
+    }
+    // Show or hide flow indicators based on mode
+    updateFlowIndicators(state) {
+        const indicators = state.svg.querySelectorAll('.flow-indicator');
+        indicators.forEach(indicator => {
+            if (state.mode === utils.TraceMode.NoFlow) {
+                indicator.style.display = 'none';
+            }
+            else if (state.mode === utils.TraceMode.ShowFlow) {
+                indicator.style.display = 'block';
+            }
+        });
+    }
+    // Create a new path element for the drawing effect
+    setupDrawingPath(state) {
+        state.paths.forEach((path, index) => {
+            const pathLength = path.getTotalLength();
+            // Create green path for tracing effect
+            const greenPath = path.cloneNode();
+            greenPath.setAttribute('stroke', 'green');
+            greenPath.setAttribute('stroke-width', '13');
+            greenPath.setAttribute('stroke-dasharray', pathLength.toString());
+            greenPath.setAttribute('stroke-dashoffset', pathLength.toString()); // Hidden initially
+            path.parentNode.appendChild(greenPath, path);
+            path.setAttribute('class', 'trace-path'); // Add class for easier reference
+            greenPath.setAttribute('class', 'trace-path-green'); // Add class for easier reference
+            path.greenPath = greenPath;
+            path.classList.add(state.mode);
+            // Conditionally hide or show the black path based on blind tracing mode
+            if (state.mode === utils.TraceMode.BlindTracing || state.mode === utils.TraceMode.BlindFreeTrace) {
+                // In blind tracing or blind free trace mode, hide the black path
+                path.setAttribute('stroke', 'none');
+            }
+            else {
+                // In other modes, show the black path
+                path.setAttribute('stroke', '#000');
+                path.setAttribute('stroke-width', '10');
+                path.setAttribute('fill', 'none');
+                path.setAttribute('stroke-dasharray', pathLength.toString());
+                path.setAttribute('stroke-dashoffset', '0'); // Fully visible initially
+            }
+            // Only create flow markers for the current path in normal modes
+            if (index === state.currentPathIndex && state.mode === utils.TraceMode.ShowFlow) {
+                state.flowMarkers = this.createFlowMarkersForPath(path);
+            }
+        });
+        state.totalPathLength = state.paths[state.currentPathIndex].getTotalLength();
+    }
+    // Set up the draggable circle at the start of the first path
+    setupDraggableCircle(state) {
+        var _a;
+        const firstPathStart = state.paths[0].getPointAtLength(0);
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('id', 'draggableCircle');
+        circle.setAttribute('cx', firstPathStart.x.toString());
+        circle.setAttribute('cy', firstPathStart.y.toString());
+        circle.setAttribute('r', '20'); // Radius of the draggable circle
+        circle.setAttribute('fill', 'red');
+        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
+        state.circle = circle;
+    }
+    // Add necessary event listeners using Pointer Events
+    addEventListeners(state) {
+        var _a, _b, _c, _d;
+        // Ensure the circle exists before adding events
+        if (!state.circle || !state.paths || state.paths.length === 0)
+            return;
+        // Handle pointerdown on the circle to start dragging
+        state.circle.addEventListener('pointerdown', (evt) => {
+            evt.preventDefault(); // Prevent default actions like text selection
+            const pointerPos = this.getPointerPosition(evt, state.svg);
+            const circlePos = {
+                x: parseFloat(state.circle.getAttribute('cx')),
+                y: parseFloat(state.circle.getAttribute('cy')),
+            };
+            const distance = this.getDistanceSquared(pointerPos, circlePos);
+            if (distance <= state.proximityThreshold * state.proximityThreshold) {
+                state.isDragging = true;
+                state.activePointerId = evt.pointerId;
+                // Capture the pointer to continue receiving events even if it leaves the element
+                state.circle.setPointerCapture(evt.pointerId);
+            }
+        });
+        // Handle pointermove on the SVG to update the circle position
+        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointermove', (evt) => {
+            if (!state.isDragging || evt.pointerId !== state.activePointerId)
+                return;
+            state.pointerMoveEvent = evt;
+            if (!state.rafId) {
+                state.rafId = requestAnimationFrame(() => {
+                    this.handlePointerMove(state);
+                    state.rafId = null;
+                });
+            }
+        });
+        // Handle pointerup and pointercancel on the SVG to stop dragging
+        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerup', (evt) => {
+            if (evt.pointerId === state.activePointerId) {
+                state.isDragging = false;
+                state.activePointerId = null;
+            }
+        });
+        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointercancel', (evt) => {
+            if (evt.pointerId === state.activePointerId) {
+                state.isDragging = false;
+                state.activePointerId = null;
+            }
+        });
+        // Optional: Prevent context menu on long press
+        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', (evt) => {
+            evt.preventDefault();
+        });
+    }
+    // Modified handlePointerMove function
+    handlePointerMove(state) {
+        var _a, _b, _c, _d;
+        if (!state.isDragging)
+            return;
+        if (!state.circle || !state.paths || state.paths.length === 0)
+            return;
+        const evt = state.pointerMoveEvent;
+        const pointerPos = this.getPointerPosition(evt, state.svg);
+        const circlePos = {
+            x: parseFloat(state.circle.getAttribute('cx')),
+            y: parseFloat(state.circle.getAttribute('cy')),
+        };
+        const currentPath = state.paths[state.currentPathIndex];
+        if (!currentPath) {
+            console.error('No valid path found at the current index');
+            return;
+        }
+        // Use a reduced proximity threshold for free trace mode
+        let proximitySquared;
+        if (state.mode === utils.TraceMode.FreeTrace || state.mode === utils.TraceMode.BlindFreeTrace) {
+            proximitySquared = state.freeTraceProximityThreshold * state.freeTraceProximityThreshold;
+        }
+        else {
+            proximitySquared = state.proximityThreshold * state.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
+        }
+        const closestPoint = this.getClosestPointOnPath(currentPath, pointerPos);
+        // 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 === utils.TraceMode.FreeTrace || state.mode === utils.TraceMode.BlindFreeTrace) {
+            // Initialize the currentFreePath array if it's not created
+            if (!state.currentFreePath) {
+                state.currentFreePath = [];
+            }
+            // Create a new path element if it's the first trace for the current path index
+            if (!state.currentFreePath[state.currentPathIndex]) {
+                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                newPath.setAttribute('stroke', 'green');
+                newPath.setAttribute('stroke-width', '8');
+                newPath.setAttribute('fill', 'none');
+                // Start the new path at the current pointer position
+                newPath.setAttribute('d', `M${pointerPos.x},${pointerPos.y}`);
+                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPath);
+                state.currentFreePath[state.currentPathIndex] = newPath;
+                // Reset lastPointerPos for the new path
+                state.lastPointerPos = pointerPos;
+            }
+            // Get the previous position to draw a smooth curve
+            const previousPos = state.lastPointerPos || pointerPos;
+            // Create a quadratic curve from the previous point to the current point
+            const newPathData = state.currentFreePath[state.currentPathIndex].getAttribute('d');
+            const midPointX = (previousPos.x + pointerPos.x) / 2;
+            const midPointY = (previousPos.y + pointerPos.y) / 2;
+            const updatedPathData = `${newPathData} Q ${previousPos.x},${previousPos.y} ${midPointX},${midPointY}`;
+            // Update the path's 'd' attribute with the new curve
+            state.currentFreePath[state.currentPathIndex].setAttribute('d', updatedPathData);
+            // Move the draggable circle with the freehand trace
+            state.circle.setAttribute('cx', pointerPos.x.toString());
+            state.circle.setAttribute('cy', pointerPos.y.toString());
+            // Make sure the red dot (circle) is always on top
+            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            // Update the last pointer position
+            state.lastPointerPos = pointerPos;
+            const currentPathLength = currentPath.getTotalLength();
+            const distanceToEnd = currentPathLength - closestPoint.length;
+            // If close to the end of the path, move to the next path
+            if (distanceToEnd < 5) {
+                this.moveToNextPath(state);
+                state.currentFreePath[state.currentPathIndex] = null; // Reset free path for next path
+            }
+            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;
+            state.circle.setAttribute('cx', closestPoint.x.toString());
+            state.circle.setAttribute('cy', closestPoint.y.toString());
+            // Make sure the red dot (circle) is always on top
+            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+        }
+        // Check if the current path is completed
+        if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+            this.moveToNextPath(state);
+        }
+        else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+            //   this.loadAnotherSVG(state, true);
+            utils.triggerNextContainer();
+        }
+    }
+    // Get the pointer position relative to the SVG
+    getPointerPosition(evt, svg) {
+        var _a;
+        const svgPoint = svg.createSVGPoint();
+        svgPoint.x = evt.clientX;
+        svgPoint.y = evt.clientY;
+        const ctm = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
+        return ctm ? svgPoint.matrixTransform(ctm) : { x: evt.clientX, y: evt.clientY };
+    }
+    // Calculate the squared Euclidean distance between two points
+    getDistanceSquared(p1, p2) {
+        const dx = p1.x - p2.x;
+        const dy = p1.y - p2.y;
+        return dx * dx + dy * dy;
+    }
+    // Find the closest point on the given path to the specified point using two-pass sampling
+    getClosestPointOnPath(pathNode, point) {
+        const pathLength = pathNode.getTotalLength();
+        let closestPoint = { x: 0, y: 0, length: 0 };
+        let minDistanceSquared = Infinity;
+        // First pass: coarse sampling
+        const coarseStep = 20; // Increased step for better performance
+        let coarseClosestPoint = { x: 0, y: 0, 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,
+                };
+            }
+        }
+        // Second pass: fine sampling around coarseClosestPoint
+        const fineStep = 2; // Increased step to reduce computations
+        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 };
+            }
+        }
+        return closestPoint;
+    }
+    // Load the next or previous SVG based on the isNext flag
+    async loadAnotherSVG(state, isNext) {
+        state.isDragging = false;
+        // Update fileIndex based on whether isNext is true or false
+        // if (isNext) {
+        //   state.fileIndex++;
+        //   if (state.fileIndex >= this.svgFiles.length) {
+        //     state.fileIndex = this.svgFiles.length - 1; // Stay at the last file
+        //     return;
+        //   }
+        // } else {
+        //   state.fileIndex--;
+        //   if (state.fileIndex < 0) {
+        //     state.fileIndex = 0; // Stay at the first file
+        //     return;
+        //   }
+        // }
+        try {
+            if (state.svg) {
+                this.cleanupPreviousSVG(state);
+            }
+            //   const svgText = await this.fetchSVG(this.svgSource ?? this.svgFiles[state.fileIndex]);
+            const svgText = await this.fetchSVG(this.svgSource);
+            this.insertSVG(svgText);
+            state.svg = this.getSVGElement();
+            state.paths = this.getPaths(state.svg);
+            this.setupDrawingPath(state);
+            this.setupDraggableCircle(state);
+            this.addEventListeners(state);
+        }
+        catch (error) {
+            console.error(`Error loading SVG (${this.svgSource}):`, error);
+        }
+    }
+    // Cleanup previous SVG's elements and state
+    cleanupPreviousSVG(state) {
+        var _a, _b;
+        if (state.circle) {
+            (_a = state.svg) === null || _a === void 0 ? void 0 : _a.removeChild(state.circle);
+            state.circle = null;
+        }
+        const indicators = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.flow-indicator');
+        indicators.forEach(indicator => {
+            indicator.remove(); // Remove all previous flow indicators
+        });
+        state.currentPathIndex = 0;
+        state.lastLength = 0;
+        state.totalPathLength = state.paths[0].getTotalLength();
+    }
+    // Move to the next path in the SVG
+    moveToNextPath(state) {
+        var _a, _b;
+        state.isDragging = false;
+        state.currentPathIndex++;
+        state.lastLength = 0;
+        if (state.currentPathIndex >= state.paths.length) {
+            //   this.loadAnotherSVG(state, true);
+            utils.triggerNextContainer();
+            return;
+        }
+        const nextPath = state.paths[state.currentPathIndex];
+        if (!nextPath) {
+            console.error('No valid path found at the next index');
+            return;
+        }
+        state.totalPathLength = nextPath.getTotalLength();
+        const startPoint = nextPath.getPointAtLength(0);
+        (_a = state.circle) === null || _a === void 0 ? void 0 : _a.setAttribute('cx', startPoint.x.toString());
+        (_b = state.circle) === null || _b === void 0 ? void 0 : _b.setAttribute('cy', startPoint.y.toString());
+        if (state.mode === utils.TraceMode.ShowFlow) {
+            state.flowMarkers = this.createFlowMarkersForPath(nextPath);
+        }
+    }
+    render() {
+        const style = {
+            height: this.height,
+            width: this.width,
+            top: this.y,
+            left: this.x,
+            zIndex: this.z,
+            position: 'absolute',
+        };
+        // List of SVG file names to process sequentially
+        // const svgFiles = ['A_test.svg', 'B_test.svg', 'C_test.svg', 'D_test.svg', 'अ_test.svg', 'ट_test.svg', 'क_test.svg', 'ख_test.svg', 'ग_test.svg']; // Add more SVG file names as needed
+        return (index.h(index.Host, { key: 'c957926b2f3e281966de8d1dca6580931af54019', class: "trace", id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'f841bf92fec27ed26594c5ccca937fa20210451f', id: "svgContainer" })));
+    }
+    static get assetsDirs() { return ["svg"]; }
+};
+AppTrace.style = AppTraceStyle0;
+
+const appWrapCss = ".wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}";
+const AppWrapStyle0 = appWrapCss;
+
+const AppWrap = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * Lifecycle hook that runs after the component is rendered in the DOM.
+     * It initializes custom events based on the `type` of the wrap container.
+     */
+    componentDidLoad() {
+        utils.initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles to position and size the wrap container, with grid layout applied
+        const style = {
+            height: this.height,
+            width: this.width,
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'grid' : 'none', // Use grid layout
+            zIndex: this.z,
+            backgroundColor: this.bgColor,
+        };
+        return (index.h(index.Host, { key: '7e955c4ff7d20f7138088114ccf344d0fda171d8', class: "wrap", value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: '1ee6b59cfe7cbb8b3bc1c830c51e38e0711e6e62' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AppWrap.style = AppWrapStyle0;
+
+exports.app_col = AppCol;
+exports.app_container = AppContainer;
+exports.app_home = AppHome;
+exports.app_image = AppImage;
+exports.app_pos = AppPos;
+exports.app_random = AppRandom;
+exports.app_root = AppRoot;
+exports.app_row = AppRow;
+exports.app_shape = AppShape;
+exports.app_text = AppText;
+exports.app_trace = AppTrace;
+exports.app_wrap = AppWrap;
+
+//# sourceMappingURL=app-col_12.cjs.entry.js.map