@mulanjs/mulanjs 1.0.1-dev.20260219085559 → 1.0.1-dev.20260219161219

package/dist/components/infinity-list.js

@@ -0,0 +1,110 @@
+export class MuInfinity extends HTMLElement {
+    constructor() {
+        super();
+        this._items = [];
+        this._itemHeight = 50; // Default height
+        this._template = '';
+        this.attachShadow({ mode: 'open' });
+        // Structure:
+        // :host { overflow-y: auto; display: block; height: 100%; }
+        //   .spacer { height: totalHeight; position: relative; }
+        //     .content { position: absolute; top: padding; width: 100%; }
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    overflow-y: auto;
+                    height: 100%;
+                    position: relative;
+                }
+                .spacer {
+                    position: relative;
+                    width: 100%;
+                }
+                .content {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                }
+            </style>
+            <div class="spacer">
+                <div class="content"></div>
+            </div>
+        `;
+        this.container = this.shadowRoot.host; // The host itself scrolls
+        this.spacer = this.shadowRoot.querySelector('.spacer');
+        this.content = this.shadowRoot.querySelector('.content');
+        this.onScroll = this.onScroll.bind(this);
+    }
+    static get observedAttributes() {
+        return ['item-height'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'item-height') {
+            this._itemHeight = parseInt(newValue, 10) || 50;
+            this.renderVisible();
+        }
+    }
+    connectedCallback() {
+        // Find the template provided by the user (Support both standard and branded tags)
+        const templateTag = this.querySelector('template') || this.querySelector('mu-template');
+        if (templateTag) {
+            this._template = templateTag.innerHTML;
+        }
+        this.addEventListener('scroll', this.onScroll);
+        // Wait for next frame to get initial height if not set
+        requestAnimationFrame(() => this.renderVisible());
+    }
+    disconnectedCallback() {
+        this.removeEventListener('scroll', this.onScroll);
+    }
+    set items(value) {
+        this._items = value;
+        this.renderVisible();
+    }
+    get items() { return this._items; }
+    onScroll() {
+        requestAnimationFrame(() => this.renderVisible());
+    }
+    renderVisible() {
+        if (!this._items.length)
+            return;
+        const scrollTop = this.scrollTop;
+        const hostHeight = this.clientHeight || 400; // Default fallback if not sized
+        const totalHeight = this._items.length * this._itemHeight;
+        this.spacer.style.height = `${totalHeight}px`;
+        // Windowing Math
+        const startIndex = Math.floor(scrollTop / this._itemHeight);
+        const buffer = 5;
+        const visibleCount = Math.ceil(hostHeight / this._itemHeight);
+        const renderStart = Math.max(0, startIndex - buffer);
+        const renderEnd = Math.min(this._items.length, startIndex + visibleCount + buffer);
+        const startOffset = renderStart * this._itemHeight;
+        this.content.style.transform = `translateY(${startOffset}px)`;
+        // Render specific slice
+        const visibleItems = this._items.slice(renderStart, renderEnd);
+        // Simple string replacement template engine for the demo
+        // In a real Mulan compilation, this would be an optimized ASTR render
+        let html = '';
+        visibleItems.forEach((item, index) => {
+            const absoluteIndex = renderStart + index;
+            // Basic mustache replacement {{ item.prop }}
+            let rowHtml = this._template
+                .replace(/{{\s*item\s*}}/g, String(item)) // {{ item }}
+                .replace(/{{\s*index\s*}}/g, String(absoluteIndex)); // {{ index }}
+            // Handle object properties: {{ item.name }}
+            if (typeof item === 'object' && item !== null) {
+                rowHtml = rowHtml.replace(/{{\s*item\.(\w+)\s*}}/g, (_, prop) => {
+                    return String(item[prop] || '');
+                });
+            }
+            html += `<div style="height: ${this._itemHeight}px; overflow: hidden;">${rowHtml}</div>`;
+        });
+        this.content.innerHTML = html;
+    }
+}
+// Register
+if (typeof customElements !== 'undefined' && !customElements.get('mu-infinity')) {
+    customElements.define('mu-infinity', MuInfinity);
+}

package/dist/index.js

@@ -9,18 +9,20 @@ export * from './core/query';
 export * from './core/vault';
 export * from './core/quantum';
 export * from './components/bloch-sphere';
+export * from './components/infinity-list';
 // Global Mulan Object for non-module usage
 import { reactive, effect } from './core/reactive';
 import { MuComponent, defineComponent } from './core/component';
-import { MuRouter } from './router/index';
+import { MuRouter, createRouter } from './router/index';
 import { MuStore } from './store/index';
 import { Security } from './security/sanitizer';
 import * as Hooks from './core/hooks';
 import * as Query from './core/query';
 import { render } from './core/renderer';
 import * as Quantum from './core/quantum';
-const Mulan = Object.assign(Object.assign(Object.assign(Object.assign({ reactive,
-    effect, Component: MuComponent, defineComponent, Router: MuRouter, Store: MuStore, Security: Security }, Hooks), Query), Quantum), { render, 
+import * as InfinityList from './components/infinity-list';
+const Mulan = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ reactive,
+    effect, Component: MuComponent, defineComponent, Router: MuRouter, createRouter, Store: MuStore, Security: Security }, Hooks), Query), Quantum), InfinityList), { render, 
     // MULAN INSIGHT: Branded Logging
     log: (msg, ...args) => {
         console.log(`%c[MulanJS]%c ${msg}`, "color: #ff3e00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;", "", ...args);
@@ -49,5 +51,7 @@ if (typeof window !== 'undefined') {
         }
     };
 }
-window.Mulan = Mulan;
+if (typeof window !== 'undefined') {
+    window.Mulan = Mulan;
+}
 export default Mulan;

package/dist/mulan.esm.js

@@ -265,6 +265,130 @@ if (typeof customElements !== 'undefined') {
 }
 
 
+/***/ },
+
+/***/ "./src/components/infinity-list.ts"
+/*!*****************************************!*\
+  !*** ./src/components/infinity-list.ts ***!
+  \*****************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MuInfinity: () => (/* binding */ MuInfinity)
+/* harmony export */ });
+class MuInfinity extends HTMLElement {
+    constructor() {
+        super();
+        this._items = [];
+        this._itemHeight = 50; // Default height
+        this._template = '';
+        this.attachShadow({ mode: 'open' });
+        // Structure:
+        // :host { overflow-y: auto; display: block; height: 100%; }
+        //   .spacer { height: totalHeight; position: relative; }
+        //     .content { position: absolute; top: padding; width: 100%; }
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    overflow-y: auto;
+                    height: 100%;
+                    position: relative;
+                }
+                .spacer {
+                    position: relative;
+                    width: 100%;
+                }
+                .content {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                }
+            </style>
+            <div class="spacer">
+                <div class="content"></div>
+            </div>
+        `;
+        this.container = this.shadowRoot.host; // The host itself scrolls
+        this.spacer = this.shadowRoot.querySelector('.spacer');
+        this.content = this.shadowRoot.querySelector('.content');
+        this.onScroll = this.onScroll.bind(this);
+    }
+    static get observedAttributes() {
+        return ['item-height'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'item-height') {
+            this._itemHeight = parseInt(newValue, 10) || 50;
+            this.renderVisible();
+        }
+    }
+    connectedCallback() {
+        // Find the template provided by the user (Support both standard and branded tags)
+        const templateTag = this.querySelector('template') || this.querySelector('mu-template');
+        if (templateTag) {
+            this._template = templateTag.innerHTML;
+        }
+        this.addEventListener('scroll', this.onScroll);
+        // Wait for next frame to get initial height if not set
+        requestAnimationFrame(() => this.renderVisible());
+    }
+    disconnectedCallback() {
+        this.removeEventListener('scroll', this.onScroll);
+    }
+    set items(value) {
+        this._items = value;
+        this.renderVisible();
+    }
+    get items() { return this._items; }
+    onScroll() {
+        requestAnimationFrame(() => this.renderVisible());
+    }
+    renderVisible() {
+        if (!this._items.length)
+            return;
+        const scrollTop = this.scrollTop;
+        const hostHeight = this.clientHeight || 400; // Default fallback if not sized
+        const totalHeight = this._items.length * this._itemHeight;
+        this.spacer.style.height = `${totalHeight}px`;
+        // Windowing Math
+        const startIndex = Math.floor(scrollTop / this._itemHeight);
+        const buffer = 5;
+        const visibleCount = Math.ceil(hostHeight / this._itemHeight);
+        const renderStart = Math.max(0, startIndex - buffer);
+        const renderEnd = Math.min(this._items.length, startIndex + visibleCount + buffer);
+        const startOffset = renderStart * this._itemHeight;
+        this.content.style.transform = `translateY(${startOffset}px)`;
+        // Render specific slice
+        const visibleItems = this._items.slice(renderStart, renderEnd);
+        // Simple string replacement template engine for the demo
+        // In a real Mulan compilation, this would be an optimized ASTR render
+        let html = '';
+        visibleItems.forEach((item, index) => {
+            const absoluteIndex = renderStart + index;
+            // Basic mustache replacement {{ item.prop }}
+            let rowHtml = this._template
+                .replace(/{{\s*item\s*}}/g, String(item)) // {{ item }}
+                .replace(/{{\s*index\s*}}/g, String(absoluteIndex)); // {{ index }}
+            // Handle object properties: {{ item.name }}
+            if (typeof item === 'object' && item !== null) {
+                rowHtml = rowHtml.replace(/{{\s*item\.(\w+)\s*}}/g, (_, prop) => {
+                    return String(item[prop] || '');
+                });
+            }
+            html += `<div style="height: ${this._itemHeight}px; overflow: hidden;">${rowHtml}</div>`;
+        });
+        this.content.innerHTML = html;
+    }
+}
+// Register
+if (typeof customElements !== 'undefined' && !customElements.get('mu-infinity')) {
+    customElements.define('mu-infinity', MuInfinity);
+}
+
+
 /***/ },
 
 /***/ "./src/core/component.ts"
@@ -1604,6 +1728,33 @@ class MuRouter {
             }
         });
     }
+    // [Chronos] Prefetch a route's component code in the background
+    prefetch(path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isServer)
+                return;
+            const { route } = this.matchRoute(path);
+            if (route) {
+                let componentToRender = route.component;
+                // Check if it's a lazy-loaded function that hasn't been resolved yet
+                if (typeof componentToRender === 'function' && !componentToRender.prototype) {
+                    // If it's already a resolved module (from previous prefetch), componentToRender might be the result.
+                    // But typically in our simple implementation, route.component stays as the function until we replace it.
+                    // To avoid double-fetching, we can check if it has a specific flag or property. 
+                    // For this implementation, we'll just run it and let the browser cache the module request (standard ES Module behavior).
+                    try {
+                        // console.log(`[Chronos] Prefetching ${path}...`);
+                        yield componentToRender();
+                        // We don't need to do anything with the result here. 
+                        // The browser's module cache will handle the speedup when the user actually navigates.
+                    }
+                    catch (e) {
+                        console.warn(`[Chronos] Failed to prefetch ${path}`, e);
+                    }
+                }
+            }
+        });
+    }
     navigate(path) {
         if (this.isServer) {
             this.currentPath = path;
@@ -1615,7 +1766,12 @@ class MuRouter {
 }
 // --- Factory for Easy Usage ---
 const createRouter = (options) => {
-    return new MuRouter(options.routes, options.rootContainer);
+    // Expose the router instance globally for <mu-link> to access
+    const router = new MuRouter(options.routes, options.rootContainer);
+    if (typeof window !== 'undefined') {
+        window.__MULAN_ROUTER__ = router;
+    }
+    return router;
 };
 // --- Web Component: <mu-link> ---
 // Usage: <mu-link to="/about">About Us</mu-link>
@@ -1631,6 +1787,26 @@ if (typeof window !== 'undefined' && !customElements.get('mu-link')) {
                     window.location.hash = to;
                 }
             });
+            // [Chronos] Intelligent Pre-fetching
+            this.addEventListener('mouseenter', () => {
+                const to = this.getAttribute('to');
+                if (to) {
+                    const router = window.__MULAN_ROUTER__;
+                    if (router && typeof router.prefetch === 'function') {
+                        router.prefetch(to);
+                    }
+                }
+            });
+            // [Chronos] Also prefetch on focus for keyboard users
+            this.addEventListener('focus', () => {
+                const to = this.getAttribute('to');
+                if (to) {
+                    const router = window.__MULAN_ROUTER__;
+                    if (router && typeof router.prefetch === 'function') {
+                        router.prefetch(to);
+                    }
+                }
+            });
         }
         connectedCallback() {
             this.style.cursor = 'pointer';
@@ -1841,6 +2017,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Component: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),
 /* harmony export */   MuBlochSphereElement: () => (/* reexport safe */ _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__.MuBlochSphereElement),
 /* harmony export */   MuComponent: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),
+/* harmony export */   MuInfinity: () => (/* reexport safe */ _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__.MuInfinity),
 /* harmony export */   MuRouter: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),
 /* harmony export */   MuStore: () => (/* reexport safe */ _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore),
 /* harmony export */   Router: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),
@@ -1892,6 +2069,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _core_vault__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./core/vault */ "./src/core/vault.ts");
 /* harmony import */ var _core_quantum__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./core/quantum */ "./src/core/quantum.ts");
 /* harmony import */ var _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/bloch-sphere */ "./src/components/bloch-sphere.ts");
+/* harmony import */ var _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/infinity-list */ "./src/components/infinity-list.ts");
+
 
 
 
@@ -1913,8 +2092,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const Mulan = Object.assign(Object.assign(Object.assign(Object.assign({ reactive: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive,
-    effect: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect, Component: _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent, defineComponent: _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent, Router: _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter, Store: _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore, Security: _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security }, _core_hooks__WEBPACK_IMPORTED_MODULE_6__), _core_query__WEBPACK_IMPORTED_MODULE_7__), _core_quantum__WEBPACK_IMPORTED_MODULE_9__), { render: _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render, 
+
+const Mulan = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ reactive: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive,
+    effect: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect, Component: _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent, defineComponent: _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent, Router: _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter, createRouter: _router_index__WEBPACK_IMPORTED_MODULE_3__.createRouter, Store: _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore, Security: _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security }, _core_hooks__WEBPACK_IMPORTED_MODULE_6__), _core_query__WEBPACK_IMPORTED_MODULE_7__), _core_quantum__WEBPACK_IMPORTED_MODULE_9__), _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__), { render: _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render, 
     // MULAN INSIGHT: Branded Logging
     log: (msg, ...args) => {
         console.log(`%c[MulanJS]%c ${msg}`, "color: #ff3e00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;", "", ...args);
@@ -1943,7 +2123,9 @@ if (typeof window !== 'undefined') {
         }
     };
 }
-window.Mulan = Mulan;
+if (typeof window !== 'undefined') {
+    window.Mulan = Mulan;
+}
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Mulan);
 
 })();
@@ -1951,6 +2133,7 @@ window.Mulan = Mulan;
 const __webpack_exports__Component = __webpack_exports__.Component;
 const __webpack_exports__MuBlochSphereElement = __webpack_exports__.MuBlochSphereElement;
 const __webpack_exports__MuComponent = __webpack_exports__.MuComponent;
+const __webpack_exports__MuInfinity = __webpack_exports__.MuInfinity;
 const __webpack_exports__MuRouter = __webpack_exports__.MuRouter;
 const __webpack_exports__MuStore = __webpack_exports__.MuStore;
 const __webpack_exports__Router = __webpack_exports__.Router;
@@ -1990,4 +2173,4 @@ const __webpack_exports__sanitize = __webpack_exports__.sanitize;
 const __webpack_exports__setCurrentInstance = __webpack_exports__.setCurrentInstance;
 const __webpack_exports__useMutation = __webpack_exports__.useMutation;
 const __webpack_exports__useQuery = __webpack_exports__.useQuery;
-export { __webpack_exports__Component as Component, __webpack_exports__MuBlochSphereElement as MuBlochSphereElement, __webpack_exports__MuComponent as MuComponent, __webpack_exports__MuRouter as MuRouter, __webpack_exports__MuStore as MuStore, __webpack_exports__Router as Router, __webpack_exports__Security as Security, __webpack_exports__Signal as Signal, __webpack_exports__default as default, __webpack_exports__defineComponent as defineComponent, __webpack_exports__effect as effect, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__hydrate as hydrate, __webpack_exports__muEffect as muEffect, __webpack_exports__muEntangle as muEntangle, __webpack_exports__muGate as muGate, __webpack_exports__muGeom as muGeom, __webpack_exports__muMeasure as muMeasure, __webpack_exports__muMemo as muMemo, __webpack_exports__muPulse as muPulse, __webpack_exports__muQubit as muQubit, __webpack_exports__muRegister as muRegister, __webpack_exports__muSearch as muSearch, __webpack_exports__muState as muState, __webpack_exports__muTeleport as muTeleport, __webpack_exports__muVault as muVault, __webpack_exports__onMuDestroy as onMuDestroy, __webpack_exports__onMuIdle as onMuIdle, __webpack_exports__onMuInit as onMuInit, __webpack_exports__onMuMount as onMuMount, __webpack_exports__onMuResume as onMuResume, __webpack_exports__onMuShake as onMuShake, __webpack_exports__onMuVoice as onMuVoice, __webpack_exports__persistent as persistent, __webpack_exports__reactive as reactive, __webpack_exports__ref as ref, __webpack_exports__render as render, __webpack_exports__renderToString as renderToString, __webpack_exports__sanitize as sanitize, __webpack_exports__setCurrentInstance as setCurrentInstance, __webpack_exports__useMutation as useMutation, __webpack_exports__useQuery as useQuery };
+export { __webpack_exports__Component as Component, __webpack_exports__MuBlochSphereElement as MuBlochSphereElement, __webpack_exports__MuComponent as MuComponent, __webpack_exports__MuInfinity as MuInfinity, __webpack_exports__MuRouter as MuRouter, __webpack_exports__MuStore as MuStore, __webpack_exports__Router as Router, __webpack_exports__Security as Security, __webpack_exports__Signal as Signal, __webpack_exports__default as default, __webpack_exports__defineComponent as defineComponent, __webpack_exports__effect as effect, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__hydrate as hydrate, __webpack_exports__muEffect as muEffect, __webpack_exports__muEntangle as muEntangle, __webpack_exports__muGate as muGate, __webpack_exports__muGeom as muGeom, __webpack_exports__muMeasure as muMeasure, __webpack_exports__muMemo as muMemo, __webpack_exports__muPulse as muPulse, __webpack_exports__muQubit as muQubit, __webpack_exports__muRegister as muRegister, __webpack_exports__muSearch as muSearch, __webpack_exports__muState as muState, __webpack_exports__muTeleport as muTeleport, __webpack_exports__muVault as muVault, __webpack_exports__onMuDestroy as onMuDestroy, __webpack_exports__onMuIdle as onMuIdle, __webpack_exports__onMuInit as onMuInit, __webpack_exports__onMuMount as onMuMount, __webpack_exports__onMuResume as onMuResume, __webpack_exports__onMuShake as onMuShake, __webpack_exports__onMuVoice as onMuVoice, __webpack_exports__persistent as persistent, __webpack_exports__reactive as reactive, __webpack_exports__ref as ref, __webpack_exports__render as render, __webpack_exports__renderToString as renderToString, __webpack_exports__sanitize as sanitize, __webpack_exports__setCurrentInstance as setCurrentInstance, __webpack_exports__useMutation as useMutation, __webpack_exports__useQuery as useQuery };

package/dist/mulan.js

@@ -30,6 +30,16 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 
 /***/ },
 
+/***/ "./src/components/infinity-list.ts"
+/*!*****************************************!*\
+  !*** ./src/components/infinity-list.ts ***!
+  \*****************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MuInfinity: () => (/* binding */ MuInfinity)\n/* harmony export */ });\nclass MuInfinity extends HTMLElement {\n    constructor() {\n        super();\n        this._items = [];\n        this._itemHeight = 50; // Default height\n        this._template = '';\n        this.attachShadow({ mode: 'open' });\n        // Structure:\n        // :host { overflow-y: auto; display: block; height: 100%; }\n        //   .spacer { height: totalHeight; position: relative; }\n        //     .content { position: absolute; top: padding; width: 100%; }\n        this.shadowRoot.innerHTML = `\r\n            <style>\r\n                :host {\r\n                    display: block;\r\n                    overflow-y: auto;\r\n                    height: 100%;\r\n                    position: relative;\r\n                }\r\n                .spacer {\r\n                    position: relative;\r\n                    width: 100%;\r\n                }\r\n                .content {\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: 0;\r\n                    width: 100%;\r\n                }\r\n            </style>\r\n            <div class=\"spacer\">\r\n                <div class=\"content\"></div>\r\n            </div>\r\n        `;\n        this.container = this.shadowRoot.host; // The host itself scrolls\n        this.spacer = this.shadowRoot.querySelector('.spacer');\n        this.content = this.shadowRoot.querySelector('.content');\n        this.onScroll = this.onScroll.bind(this);\n    }\n    static get observedAttributes() {\n        return ['item-height'];\n    }\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'item-height') {\n            this._itemHeight = parseInt(newValue, 10) || 50;\n            this.renderVisible();\n        }\n    }\n    connectedCallback() {\n        // Find the template provided by the user (Support both standard and branded tags)\n        const templateTag = this.querySelector('template') || this.querySelector('mu-template');\n        if (templateTag) {\n            this._template = templateTag.innerHTML;\n        }\n        this.addEventListener('scroll', this.onScroll);\n        // Wait for next frame to get initial height if not set\n        requestAnimationFrame(() => this.renderVisible());\n    }\n    disconnectedCallback() {\n        this.removeEventListener('scroll', this.onScroll);\n    }\n    set items(value) {\n        this._items = value;\n        this.renderVisible();\n    }\n    get items() { return this._items; }\n    onScroll() {\n        requestAnimationFrame(() => this.renderVisible());\n    }\n    renderVisible() {\n        if (!this._items.length)\n            return;\n        const scrollTop = this.scrollTop;\n        const hostHeight = this.clientHeight || 400; // Default fallback if not sized\n        const totalHeight = this._items.length * this._itemHeight;\n        this.spacer.style.height = `${totalHeight}px`;\n        // Windowing Math\n        const startIndex = Math.floor(scrollTop / this._itemHeight);\n        const buffer = 5;\n        const visibleCount = Math.ceil(hostHeight / this._itemHeight);\n        const renderStart = Math.max(0, startIndex - buffer);\n        const renderEnd = Math.min(this._items.length, startIndex + visibleCount + buffer);\n        const startOffset = renderStart * this._itemHeight;\n        this.content.style.transform = `translateY(${startOffset}px)`;\n        // Render specific slice\n        const visibleItems = this._items.slice(renderStart, renderEnd);\n        // Simple string replacement template engine for the demo\n        // In a real Mulan compilation, this would be an optimized ASTR render\n        let html = '';\n        visibleItems.forEach((item, index) => {\n            const absoluteIndex = renderStart + index;\n            // Basic mustache replacement {{ item.prop }}\n            let rowHtml = this._template\n                .replace(/{{\\s*item\\s*}}/g, String(item)) // {{ item }}\n                .replace(/{{\\s*index\\s*}}/g, String(absoluteIndex)); // {{ index }}\n            // Handle object properties: {{ item.name }}\n            if (typeof item === 'object' && item !== null) {\n                rowHtml = rowHtml.replace(/{{\\s*item\\.(\\w+)\\s*}}/g, (_, prop) => {\n                    return String(item[prop] || '');\n                });\n            }\n            html += `<div style=\"height: ${this._itemHeight}px; overflow: hidden;\">${rowHtml}</div>`;\n        });\n        this.content.innerHTML = html;\n    }\n}\n// Register\nif (typeof customElements !== 'undefined' && !customElements.get('mu-infinity')) {\n    customElements.define('mu-infinity', MuInfinity);\n}\n\n\n//# sourceURL=webpack://Mulan/./src/components/infinity-list.ts?\n}");
+
+/***/ },
+
 /***/ "./src/core/component.ts"
 /*!*******************************!*\
   !*** ./src/core/component.ts ***!
@@ -106,7 +116,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \**********************/
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Component: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),\n/* harmony export */   MuBlochSphereElement: () => (/* reexport safe */ _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__.MuBlochSphereElement),\n/* harmony export */   MuComponent: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),\n/* harmony export */   MuRouter: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),\n/* harmony export */   MuStore: () => (/* reexport safe */ _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore),\n/* harmony export */   Router: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),\n/* harmony export */   Security: () => (/* reexport safe */ _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security),\n/* harmony export */   Signal: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.Signal),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   defineComponent: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent),\n/* harmony export */   effect: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect),\n/* harmony export */   getCurrentInstance: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.getCurrentInstance),\n/* harmony export */   hydrate: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.hydrate),\n/* harmony export */   muEffect: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muEffect),\n/* harmony export */   muEntangle: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muEntangle),\n/* harmony export */   muGate: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muGate),\n/* harmony export */   muGeom: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muGeom),\n/* harmony export */   muMeasure: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muMeasure),\n/* harmony export */   muMemo: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muMemo),\n/* harmony export */   muPulse: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muPulse),\n/* harmony export */   muQubit: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muQubit),\n/* harmony export */   muRegister: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muRegister),\n/* harmony export */   muSearch: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muSearch),\n/* harmony export */   muState: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muState),\n/* harmony export */   muTeleport: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muTeleport),\n/* harmony export */   muVault: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muVault),\n/* harmony export */   onMuDestroy: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuDestroy),\n/* harmony export */   onMuIdle: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuIdle),\n/* harmony export */   onMuInit: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuInit),\n/* harmony export */   onMuMount: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuMount),\n/* harmony export */   onMuResume: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuResume),\n/* harmony export */   onMuShake: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuShake),\n/* harmony export */   onMuVoice: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuVoice),\n/* harmony export */   persistent: () => (/* reexport safe */ _core_vault__WEBPACK_IMPORTED_MODULE_8__.persistent),\n/* harmony export */   reactive: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive),\n/* harmony export */   ref: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.ref),\n/* harmony export */   render: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render),\n/* harmony export */   renderToString: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.renderToString),\n/* harmony export */   sanitize: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.sanitize),\n/* harmony export */   setCurrentInstance: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.setCurrentInstance),\n/* harmony export */   useMutation: () => (/* reexport safe */ _core_query__WEBPACK_IMPORTED_MODULE_7__.useMutation),\n/* harmony export */   useQuery: () => (/* reexport safe */ _core_query__WEBPACK_IMPORTED_MODULE_7__.useQuery)\n/* harmony export */ });\n/* harmony import */ var _core_reactive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./core/reactive */ \"./src/core/reactive.ts\");\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./core/component */ \"./src/core/component.ts\");\n/* harmony import */ var _core_renderer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./core/renderer */ \"./src/core/renderer.ts\");\n/* harmony import */ var _router_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./router/index */ \"./src/router/index.ts\");\n/* harmony import */ var _store_index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./store/index */ \"./src/store/index.ts\");\n/* harmony import */ var _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./security/sanitizer */ \"./src/security/sanitizer.ts\");\n/* harmony import */ var _core_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./core/hooks */ \"./src/core/hooks.ts\");\n/* harmony import */ var _core_query__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./core/query */ \"./src/core/query.ts\");\n/* harmony import */ var _core_vault__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./core/vault */ \"./src/core/vault.ts\");\n/* harmony import */ var _core_quantum__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./core/quantum */ \"./src/core/quantum.ts\");\n/* harmony import */ var _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/bloch-sphere */ \"./src/components/bloch-sphere.ts\");\n\n\n\n\n\n\n\n\n\n\n\n// Global Mulan Object for non-module usage\n\n\n\n\n\n\n\n\n\nconst Mulan = Object.assign(Object.assign(Object.assign(Object.assign({ reactive: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive,\n    effect: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect, Component: _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent, defineComponent: _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent, Router: _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter, Store: _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore, Security: _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security }, _core_hooks__WEBPACK_IMPORTED_MODULE_6__), _core_query__WEBPACK_IMPORTED_MODULE_7__), _core_quantum__WEBPACK_IMPORTED_MODULE_9__), { render: _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render, \n    // MULAN INSIGHT: Branded Logging\n    log: (msg, ...args) => {\n        console.log(`%c[MulanJS]%c ${msg}`, \"color: #ff3e00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    }, warn: (msg, ...args) => {\n        console.warn(`%c[MulanJS]%c ${msg}`, \"color: #ffcc00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    }, error: (msg, ...args) => {\n        console.error(`%c[MulanJS]%c ${msg}`, \"color: #ff0000; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    } });\n// Security: Freeze the object to prevent runtime tampering\nObject.freeze(Mulan);\nObject.freeze(Mulan.Security);\n// MULAN INSIGHT: Initialize Global Registry\nif (typeof window !== 'undefined') {\n    window.__MULAN_INSIGHT__ = window.__MULAN_INSIGHT__ || { components: new Map() };\n    // MULAN INSIGHT: HMR Support\n    window.__MULAN_REFRESH__ = () => {\n        var _a;\n        const components = (_a = window.__MULAN_INSIGHT__) === null || _a === void 0 ? void 0 : _a.components;\n        if (components) {\n            components.forEach((comp) => {\n                if (comp && typeof comp.update === 'function') {\n                    // Force refresh\n                    comp.update();\n                }\n            });\n        }\n    };\n}\nwindow.Mulan = Mulan;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Mulan);\n\n\n//# sourceURL=webpack://Mulan/./src/index.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Component: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),\n/* harmony export */   MuBlochSphereElement: () => (/* reexport safe */ _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__.MuBlochSphereElement),\n/* harmony export */   MuComponent: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent),\n/* harmony export */   MuInfinity: () => (/* reexport safe */ _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__.MuInfinity),\n/* harmony export */   MuRouter: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),\n/* harmony export */   MuStore: () => (/* reexport safe */ _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore),\n/* harmony export */   Router: () => (/* reexport safe */ _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter),\n/* harmony export */   Security: () => (/* reexport safe */ _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security),\n/* harmony export */   Signal: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.Signal),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   defineComponent: () => (/* reexport safe */ _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent),\n/* harmony export */   effect: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect),\n/* harmony export */   getCurrentInstance: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.getCurrentInstance),\n/* harmony export */   hydrate: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.hydrate),\n/* harmony export */   muEffect: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muEffect),\n/* harmony export */   muEntangle: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muEntangle),\n/* harmony export */   muGate: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muGate),\n/* harmony export */   muGeom: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muGeom),\n/* harmony export */   muMeasure: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muMeasure),\n/* harmony export */   muMemo: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muMemo),\n/* harmony export */   muPulse: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muPulse),\n/* harmony export */   muQubit: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muQubit),\n/* harmony export */   muRegister: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muRegister),\n/* harmony export */   muSearch: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muSearch),\n/* harmony export */   muState: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muState),\n/* harmony export */   muTeleport: () => (/* reexport safe */ _core_quantum__WEBPACK_IMPORTED_MODULE_9__.muTeleport),\n/* harmony export */   muVault: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.muVault),\n/* harmony export */   onMuDestroy: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuDestroy),\n/* harmony export */   onMuIdle: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuIdle),\n/* harmony export */   onMuInit: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuInit),\n/* harmony export */   onMuMount: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuMount),\n/* harmony export */   onMuResume: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuResume),\n/* harmony export */   onMuShake: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuShake),\n/* harmony export */   onMuVoice: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.onMuVoice),\n/* harmony export */   persistent: () => (/* reexport safe */ _core_vault__WEBPACK_IMPORTED_MODULE_8__.persistent),\n/* harmony export */   reactive: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive),\n/* harmony export */   ref: () => (/* reexport safe */ _core_reactive__WEBPACK_IMPORTED_MODULE_0__.ref),\n/* harmony export */   render: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render),\n/* harmony export */   renderToString: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.renderToString),\n/* harmony export */   sanitize: () => (/* reexport safe */ _core_renderer__WEBPACK_IMPORTED_MODULE_2__.sanitize),\n/* harmony export */   setCurrentInstance: () => (/* reexport safe */ _core_hooks__WEBPACK_IMPORTED_MODULE_6__.setCurrentInstance),\n/* harmony export */   useMutation: () => (/* reexport safe */ _core_query__WEBPACK_IMPORTED_MODULE_7__.useMutation),\n/* harmony export */   useQuery: () => (/* reexport safe */ _core_query__WEBPACK_IMPORTED_MODULE_7__.useQuery)\n/* harmony export */ });\n/* harmony import */ var _core_reactive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./core/reactive */ \"./src/core/reactive.ts\");\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./core/component */ \"./src/core/component.ts\");\n/* harmony import */ var _core_renderer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./core/renderer */ \"./src/core/renderer.ts\");\n/* harmony import */ var _router_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./router/index */ \"./src/router/index.ts\");\n/* harmony import */ var _store_index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./store/index */ \"./src/store/index.ts\");\n/* harmony import */ var _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./security/sanitizer */ \"./src/security/sanitizer.ts\");\n/* harmony import */ var _core_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./core/hooks */ \"./src/core/hooks.ts\");\n/* harmony import */ var _core_query__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./core/query */ \"./src/core/query.ts\");\n/* harmony import */ var _core_vault__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./core/vault */ \"./src/core/vault.ts\");\n/* harmony import */ var _core_quantum__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./core/quantum */ \"./src/core/quantum.ts\");\n/* harmony import */ var _components_bloch_sphere__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/bloch-sphere */ \"./src/components/bloch-sphere.ts\");\n/* harmony import */ var _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/infinity-list */ \"./src/components/infinity-list.ts\");\n\n\n\n\n\n\n\n\n\n\n\n\n// Global Mulan Object for non-module usage\n\n\n\n\n\n\n\n\n\n\nconst Mulan = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ reactive: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.reactive,\n    effect: _core_reactive__WEBPACK_IMPORTED_MODULE_0__.effect, Component: _core_component__WEBPACK_IMPORTED_MODULE_1__.MuComponent, defineComponent: _core_component__WEBPACK_IMPORTED_MODULE_1__.defineComponent, Router: _router_index__WEBPACK_IMPORTED_MODULE_3__.MuRouter, createRouter: _router_index__WEBPACK_IMPORTED_MODULE_3__.createRouter, Store: _store_index__WEBPACK_IMPORTED_MODULE_4__.MuStore, Security: _security_sanitizer__WEBPACK_IMPORTED_MODULE_5__.Security }, _core_hooks__WEBPACK_IMPORTED_MODULE_6__), _core_query__WEBPACK_IMPORTED_MODULE_7__), _core_quantum__WEBPACK_IMPORTED_MODULE_9__), _components_infinity_list__WEBPACK_IMPORTED_MODULE_11__), { render: _core_renderer__WEBPACK_IMPORTED_MODULE_2__.render, \n    // MULAN INSIGHT: Branded Logging\n    log: (msg, ...args) => {\n        console.log(`%c[MulanJS]%c ${msg}`, \"color: #ff3e00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    }, warn: (msg, ...args) => {\n        console.warn(`%c[MulanJS]%c ${msg}`, \"color: #ffcc00; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    }, error: (msg, ...args) => {\n        console.error(`%c[MulanJS]%c ${msg}`, \"color: #ff0000; font-weight: bold; background: #222; padding: 2px 4px; border-radius: 3px;\", \"\", ...args);\n    } });\n// Security: Freeze the object to prevent runtime tampering\nObject.freeze(Mulan);\nObject.freeze(Mulan.Security);\n// MULAN INSIGHT: Initialize Global Registry\nif (typeof window !== 'undefined') {\n    window.__MULAN_INSIGHT__ = window.__MULAN_INSIGHT__ || { components: new Map() };\n    // MULAN INSIGHT: HMR Support\n    window.__MULAN_REFRESH__ = () => {\n        var _a;\n        const components = (_a = window.__MULAN_INSIGHT__) === null || _a === void 0 ? void 0 : _a.components;\n        if (components) {\n            components.forEach((comp) => {\n                if (comp && typeof comp.update === 'function') {\n                    // Force refresh\n                    comp.update();\n                }\n            });\n        }\n    };\n}\nif (typeof window !== 'undefined') {\n    window.Mulan = Mulan;\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Mulan);\n\n\n//# sourceURL=webpack://Mulan/./src/index.ts?\n}");
 
 /***/ },
 
@@ -116,7 +126,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*****************************/
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MuRouter: () => (/* binding */ MuRouter),\n/* harmony export */   createRouter: () => (/* binding */ createRouter)\n/* harmony export */ });\n/* harmony import */ var _core_renderer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/renderer */ \"./src/core/renderer.ts\");\n/* harmony import */ var _security_sanitizer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../security/sanitizer */ \"./src/security/sanitizer.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\nclass MuRouter {\n    constructor(routes, rootContainer = null) {\n        this.currentPath = '';\n        this.currentComponent = null;\n        this.lastRouteId = 0;\n        this.routes = routes;\n        this.rootContainer = rootContainer;\n        this.isServer = rootContainer === null; // If no container, assume server/headless mode\n        if (!this.isServer) {\n            window.addEventListener('hashchange', this.handleRoute.bind(this));\n            this.handleRoute(); // Initial load\n        }\n    }\n    // SSR Method: Simulate a route visit on the server\n    serverLookup(path) {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.currentPath = path;\n            const { route, params } = this.matchRoute(path);\n            if (route) {\n                // Run guards/resolvers here if needed\n                let componentToRender = route.component;\n                // Support Lazy Loading\n                if (typeof componentToRender === 'function' && !componentToRender.prototype) {\n                    const module = yield componentToRender();\n                    componentToRender = module.default || module;\n                }\n                if (typeof componentToRender === 'function') {\n                    // Class component SSR\n                    // We need a dummy container for the component to \"render\" into its own buffer\n                    // For simplicity in this string-based framework, we mock the container\n                    const mockContainer = { innerHTML: '' };\n                    const instance = new componentToRender(mockContainer);\n                    if (instance.setParams)\n                        instance.setParams(params);\n                    // Manually trigger mount logic without DOM effects if possible, or just template()\n                    // Ideally, we just want the template string.\n                    return instance.template();\n                }\n                else {\n                    return componentToRender;\n                }\n            }\n            return '<!-- 404 -->';\n        });\n    }\n    matchRoute(hash) {\n        // Simple exact match first\n        let route = this.routes.find((r) => r.path === hash);\n        if (route)\n            return { route, params: {} };\n        // Regex match for params e.g. /user/:id\n        for (const r of this.routes) {\n            const paramNames = [];\n            const regexPath = r.path.replace(/:([^/]+)/g, (_, key) => {\n                paramNames.push(key);\n                return '([^/]+)';\n            });\n            const match = new RegExp(`^${regexPath}$`).exec(hash);\n            if (match) {\n                const params = {};\n                paramNames.forEach((name, i) => {\n                    // SECURE: Automatically sanitize all route parameters\n                    params[name] = _security_sanitizer__WEBPACK_IMPORTED_MODULE_1__.Security.sanitize(match[i + 1]);\n                });\n                return { route: r, params };\n            }\n        }\n        return { route: undefined, params: {} };\n    }\n    handleRoute() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.isServer)\n                return;\n            const currentRouteId = ++this.lastRouteId;\n            const hash = window.location.hash.slice(1) || '/';\n            const { route, params } = this.matchRoute(hash);\n            // Security Check: Validate URL to prevent malicious hash injection\n            if (hash !== '/' && !_security_sanitizer__WEBPACK_IMPORTED_MODULE_1__.Security.validateUrl('http://dummy.com' + hash)) {\n                console.error(\"Security Alert: Malformed URL detected.\");\n                return;\n            }\n            // Navigation Guard (Middleware)\n            if (route === null || route === void 0 ? void 0 : route.beforeEnter) {\n                yield new Promise((resolve) => {\n                    route.beforeEnter(hash, this.currentPath, (allow) => {\n                        if (allow)\n                            resolve();\n                        else {\n                            console.warn(`Navigation to ${hash} blocked by guard.`);\n                            // Ideally redirect or stay, here we just stop processing\n                            throw new Error('Navigation Blocked');\n                        }\n                    });\n                }).catch(() => { return; }); // Stop execution if blocked\n            }\n            this.currentPath = hash;\n            if (route) {\n                if (route.title) {\n                    document.title = route.title;\n                }\n                else if (route.meta && route.meta.title) {\n                    // Fallback to meta.title if used\n                    document.title = route.meta.title;\n                }\n                if (this.rootContainer) {\n                    // Mulan Cycle: Destroy previous component before rendering new one\n                    if (this.currentComponent) {\n                        console.log(`[Router] Navigation from ${this.currentPath} to ${hash}. Destroying previous component.`);\n                        if (this.currentComponent.onDestroy) {\n                            this.currentComponent.onDestroy();\n                        }\n                    }\n                    this.rootContainer.innerHTML = ''; // Clear previous content\n                }\n                let componentToRender = route.component;\n                // Support Lazy Loading\n                if (typeof componentToRender === 'function' && !componentToRender.prototype) {\n                    try {\n                        const module = yield componentToRender();\n                        if (currentRouteId !== this.lastRouteId) {\n                            console.log(`[Router] Navigation to ${hash} interrupted by newer navigation. Abandoning.`);\n                            return;\n                        }\n                        componentToRender = module.default || module;\n                    }\n                    catch (e) {\n                        console.error(\"Failed to lazy load component\", e);\n                        return;\n                    }\n                }\n                if (typeof componentToRender === 'function') {\n                    // It's a class component\n                    if (this.rootContainer) {\n                        const instance = new componentToRender(this.rootContainer);\n                        this.currentComponent = instance;\n                        // Inject params if the component accepts them\n                        if (instance.setParams) {\n                            instance.setParams(params);\n                        }\n                        instance.mount();\n                    }\n                }\n                else if (typeof componentToRender === 'object' && componentToRender.template) {\n                    // Object Component (Simple SFC without script or Options API)\n                    const html = componentToRender.template();\n                    if (this.rootContainer)\n                        (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)(html, this.rootContainer);\n                    this.currentComponent = null;\n                }\n                else {\n                    // Simple HTML string/template\n                    if (this.rootContainer)\n                        (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)(componentToRender, this.rootContainer);\n                    this.currentComponent = null; // String templates don't have lifecycle instances\n                }\n            }\n            else {\n                if (this.rootContainer)\n                    (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)('<div style=\"text-align:center; padding:50px;\"><h1>404</h1><p>Page Not Found</p></div>', this.rootContainer);\n            }\n        });\n    }\n    navigate(path) {\n        if (this.isServer) {\n            this.currentPath = path;\n        }\n        else {\n            window.location.hash = path;\n        }\n    }\n}\n// --- Factory for Easy Usage ---\nconst createRouter = (options) => {\n    return new MuRouter(options.routes, options.rootContainer);\n};\n// --- Web Component: <mu-link> ---\n// Usage: <mu-link to=\"/about\">About Us</mu-link>\nif (typeof window !== 'undefined' && !customElements.get('mu-link')) {\n    class MuLink extends HTMLElement {\n        constructor() {\n            super();\n            this.addEventListener('click', (e) => {\n                e.preventDefault();\n                const to = this.getAttribute('to');\n                if (to) {\n                    // Update Hash for SPA Navigation\n                    window.location.hash = to;\n                }\n            });\n        }\n        connectedCallback() {\n            this.style.cursor = 'pointer';\n            this.style.color = 'var(--primary, #9C27B0)'; // Default to brand color if available\n            this.style.textDecoration = 'none';\n        }\n        static get observedAttributes() { return ['to']; }\n    }\n    customElements.define('mu-link', MuLink);\n}\n\n\n//# sourceURL=webpack://Mulan/./src/router/index.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MuRouter: () => (/* binding */ MuRouter),\n/* harmony export */   createRouter: () => (/* binding */ createRouter)\n/* harmony export */ });\n/* harmony import */ var _core_renderer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/renderer */ \"./src/core/renderer.ts\");\n/* harmony import */ var _security_sanitizer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../security/sanitizer */ \"./src/security/sanitizer.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\nclass MuRouter {\n    constructor(routes, rootContainer = null) {\n        this.currentPath = '';\n        this.currentComponent = null;\n        this.lastRouteId = 0;\n        this.routes = routes;\n        this.rootContainer = rootContainer;\n        this.isServer = rootContainer === null; // If no container, assume server/headless mode\n        if (!this.isServer) {\n            window.addEventListener('hashchange', this.handleRoute.bind(this));\n            this.handleRoute(); // Initial load\n        }\n    }\n    // SSR Method: Simulate a route visit on the server\n    serverLookup(path) {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.currentPath = path;\n            const { route, params } = this.matchRoute(path);\n            if (route) {\n                // Run guards/resolvers here if needed\n                let componentToRender = route.component;\n                // Support Lazy Loading\n                if (typeof componentToRender === 'function' && !componentToRender.prototype) {\n                    const module = yield componentToRender();\n                    componentToRender = module.default || module;\n                }\n                if (typeof componentToRender === 'function') {\n                    // Class component SSR\n                    // We need a dummy container for the component to \"render\" into its own buffer\n                    // For simplicity in this string-based framework, we mock the container\n                    const mockContainer = { innerHTML: '' };\n                    const instance = new componentToRender(mockContainer);\n                    if (instance.setParams)\n                        instance.setParams(params);\n                    // Manually trigger mount logic without DOM effects if possible, or just template()\n                    // Ideally, we just want the template string.\n                    return instance.template();\n                }\n                else {\n                    return componentToRender;\n                }\n            }\n            return '<!-- 404 -->';\n        });\n    }\n    matchRoute(hash) {\n        // Simple exact match first\n        let route = this.routes.find((r) => r.path === hash);\n        if (route)\n            return { route, params: {} };\n        // Regex match for params e.g. /user/:id\n        for (const r of this.routes) {\n            const paramNames = [];\n            const regexPath = r.path.replace(/:([^/]+)/g, (_, key) => {\n                paramNames.push(key);\n                return '([^/]+)';\n            });\n            const match = new RegExp(`^${regexPath}$`).exec(hash);\n            if (match) {\n                const params = {};\n                paramNames.forEach((name, i) => {\n                    // SECURE: Automatically sanitize all route parameters\n                    params[name] = _security_sanitizer__WEBPACK_IMPORTED_MODULE_1__.Security.sanitize(match[i + 1]);\n                });\n                return { route: r, params };\n            }\n        }\n        return { route: undefined, params: {} };\n    }\n    handleRoute() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.isServer)\n                return;\n            const currentRouteId = ++this.lastRouteId;\n            const hash = window.location.hash.slice(1) || '/';\n            const { route, params } = this.matchRoute(hash);\n            // Security Check: Validate URL to prevent malicious hash injection\n            if (hash !== '/' && !_security_sanitizer__WEBPACK_IMPORTED_MODULE_1__.Security.validateUrl('http://dummy.com' + hash)) {\n                console.error(\"Security Alert: Malformed URL detected.\");\n                return;\n            }\n            // Navigation Guard (Middleware)\n            if (route === null || route === void 0 ? void 0 : route.beforeEnter) {\n                yield new Promise((resolve) => {\n                    route.beforeEnter(hash, this.currentPath, (allow) => {\n                        if (allow)\n                            resolve();\n                        else {\n                            console.warn(`Navigation to ${hash} blocked by guard.`);\n                            // Ideally redirect or stay, here we just stop processing\n                            throw new Error('Navigation Blocked');\n                        }\n                    });\n                }).catch(() => { return; }); // Stop execution if blocked\n            }\n            this.currentPath = hash;\n            if (route) {\n                if (route.title) {\n                    document.title = route.title;\n                }\n                else if (route.meta && route.meta.title) {\n                    // Fallback to meta.title if used\n                    document.title = route.meta.title;\n                }\n                if (this.rootContainer) {\n                    // Mulan Cycle: Destroy previous component before rendering new one\n                    if (this.currentComponent) {\n                        console.log(`[Router] Navigation from ${this.currentPath} to ${hash}. Destroying previous component.`);\n                        if (this.currentComponent.onDestroy) {\n                            this.currentComponent.onDestroy();\n                        }\n                    }\n                    this.rootContainer.innerHTML = ''; // Clear previous content\n                }\n                let componentToRender = route.component;\n                // Support Lazy Loading\n                if (typeof componentToRender === 'function' && !componentToRender.prototype) {\n                    try {\n                        const module = yield componentToRender();\n                        if (currentRouteId !== this.lastRouteId) {\n                            console.log(`[Router] Navigation to ${hash} interrupted by newer navigation. Abandoning.`);\n                            return;\n                        }\n                        componentToRender = module.default || module;\n                    }\n                    catch (e) {\n                        console.error(\"Failed to lazy load component\", e);\n                        return;\n                    }\n                }\n                if (typeof componentToRender === 'function') {\n                    // It's a class component\n                    if (this.rootContainer) {\n                        const instance = new componentToRender(this.rootContainer);\n                        this.currentComponent = instance;\n                        // Inject params if the component accepts them\n                        if (instance.setParams) {\n                            instance.setParams(params);\n                        }\n                        instance.mount();\n                    }\n                }\n                else if (typeof componentToRender === 'object' && componentToRender.template) {\n                    // Object Component (Simple SFC without script or Options API)\n                    const html = componentToRender.template();\n                    if (this.rootContainer)\n                        (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)(html, this.rootContainer);\n                    this.currentComponent = null;\n                }\n                else {\n                    // Simple HTML string/template\n                    if (this.rootContainer)\n                        (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)(componentToRender, this.rootContainer);\n                    this.currentComponent = null; // String templates don't have lifecycle instances\n                }\n            }\n            else {\n                if (this.rootContainer)\n                    (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.render)('<div style=\"text-align:center; padding:50px;\"><h1>404</h1><p>Page Not Found</p></div>', this.rootContainer);\n            }\n        });\n    }\n    // [Chronos] Prefetch a route's component code in the background\n    prefetch(path) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.isServer)\n                return;\n            const { route } = this.matchRoute(path);\n            if (route) {\n                let componentToRender = route.component;\n                // Check if it's a lazy-loaded function that hasn't been resolved yet\n                if (typeof componentToRender === 'function' && !componentToRender.prototype) {\n                    // If it's already a resolved module (from previous prefetch), componentToRender might be the result.\n                    // But typically in our simple implementation, route.component stays as the function until we replace it.\n                    // To avoid double-fetching, we can check if it has a specific flag or property. \n                    // For this implementation, we'll just run it and let the browser cache the module request (standard ES Module behavior).\n                    try {\n                        // console.log(`[Chronos] Prefetching ${path}...`);\n                        yield componentToRender();\n                        // We don't need to do anything with the result here. \n                        // The browser's module cache will handle the speedup when the user actually navigates.\n                    }\n                    catch (e) {\n                        console.warn(`[Chronos] Failed to prefetch ${path}`, e);\n                    }\n                }\n            }\n        });\n    }\n    navigate(path) {\n        if (this.isServer) {\n            this.currentPath = path;\n        }\n        else {\n            window.location.hash = path;\n        }\n    }\n}\n// --- Factory for Easy Usage ---\nconst createRouter = (options) => {\n    // Expose the router instance globally for <mu-link> to access\n    const router = new MuRouter(options.routes, options.rootContainer);\n    if (typeof window !== 'undefined') {\n        window.__MULAN_ROUTER__ = router;\n    }\n    return router;\n};\n// --- Web Component: <mu-link> ---\n// Usage: <mu-link to=\"/about\">About Us</mu-link>\nif (typeof window !== 'undefined' && !customElements.get('mu-link')) {\n    class MuLink extends HTMLElement {\n        constructor() {\n            super();\n            this.addEventListener('click', (e) => {\n                e.preventDefault();\n                const to = this.getAttribute('to');\n                if (to) {\n                    // Update Hash for SPA Navigation\n                    window.location.hash = to;\n                }\n            });\n            // [Chronos] Intelligent Pre-fetching\n            this.addEventListener('mouseenter', () => {\n                const to = this.getAttribute('to');\n                if (to) {\n                    const router = window.__MULAN_ROUTER__;\n                    if (router && typeof router.prefetch === 'function') {\n                        router.prefetch(to);\n                    }\n                }\n            });\n            // [Chronos] Also prefetch on focus for keyboard users\n            this.addEventListener('focus', () => {\n                const to = this.getAttribute('to');\n                if (to) {\n                    const router = window.__MULAN_ROUTER__;\n                    if (router && typeof router.prefetch === 'function') {\n                        router.prefetch(to);\n                    }\n                }\n            });\n        }\n        connectedCallback() {\n            this.style.cursor = 'pointer';\n            this.style.color = 'var(--primary, #9C27B0)'; // Default to brand color if available\n            this.style.textDecoration = 'none';\n        }\n        static get observedAttributes() { return ['to']; }\n    }\n    customElements.define('mu-link', MuLink);\n}\n\n\n//# sourceURL=webpack://Mulan/./src/router/index.ts?\n}");
 
 /***/ },
 

package/dist/router/index.js

@@ -171,6 +171,33 @@ export class MuRouter {
             }
         });
     }
+    // [Chronos] Prefetch a route's component code in the background
+    prefetch(path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isServer)
+                return;
+            const { route } = this.matchRoute(path);
+            if (route) {
+                let componentToRender = route.component;
+                // Check if it's a lazy-loaded function that hasn't been resolved yet
+                if (typeof componentToRender === 'function' && !componentToRender.prototype) {
+                    // If it's already a resolved module (from previous prefetch), componentToRender might be the result.
+                    // But typically in our simple implementation, route.component stays as the function until we replace it.
+                    // To avoid double-fetching, we can check if it has a specific flag or property. 
+                    // For this implementation, we'll just run it and let the browser cache the module request (standard ES Module behavior).
+                    try {
+                        // console.log(`[Chronos] Prefetching ${path}...`);
+                        yield componentToRender();
+                        // We don't need to do anything with the result here. 
+                        // The browser's module cache will handle the speedup when the user actually navigates.
+                    }
+                    catch (e) {
+                        console.warn(`[Chronos] Failed to prefetch ${path}`, e);
+                    }
+                }
+            }
+        });
+    }
     navigate(path) {
         if (this.isServer) {
             this.currentPath = path;
@@ -182,7 +209,12 @@ export class MuRouter {
 }
 // --- Factory for Easy Usage ---
 export const createRouter = (options) => {
-    return new MuRouter(options.routes, options.rootContainer);
+    // Expose the router instance globally for <mu-link> to access
+    const router = new MuRouter(options.routes, options.rootContainer);
+    if (typeof window !== 'undefined') {
+        window.__MULAN_ROUTER__ = router;
+    }
+    return router;
 };
 // --- Web Component: <mu-link> ---
 // Usage: <mu-link to="/about">About Us</mu-link>
@@ -198,6 +230,26 @@ if (typeof window !== 'undefined' && !customElements.get('mu-link')) {
                     window.location.hash = to;
                 }
             });
+            // [Chronos] Intelligent Pre-fetching
+            this.addEventListener('mouseenter', () => {
+                const to = this.getAttribute('to');
+                if (to) {
+                    const router = window.__MULAN_ROUTER__;
+                    if (router && typeof router.prefetch === 'function') {
+                        router.prefetch(to);
+                    }
+                }
+            });
+            // [Chronos] Also prefetch on focus for keyboard users
+            this.addEventListener('focus', () => {
+                const to = this.getAttribute('to');
+                if (to) {
+                    const router = window.__MULAN_ROUTER__;
+                    if (router && typeof router.prefetch === 'function') {
+                        router.prefetch(to);
+                    }
+                }
+            });
         }
         connectedCallback() {
             this.style.cursor = 'pointer';