pome-ui 2.0.0-preview61 → 2.0.0-preview64

package/pome-ui.dev.js

@@ -18109,2483 +18109,2490 @@ ${codeFrame}` : message);
 })({});
 
 // PomeUI
-// Copyright (c) Yuko(Yisheng) Zheng. All rights reserved.
-// Licensed under the GPL v3. See LICENSE in the project root for license information.
-
-window.Vue = Vue;
-
-function build(options, exports) {
-    if (typeof exports == 'undefined') {
-        exports = {};
-    }
-
-    // Options
-    var _options = {
-        resolveModulesParallelly: true,
-        removeStyleWhenUnmount: false,
-        preloadCss: true,
-        mobile: function () {
-            return false;
-        },
-        httpGet: function (url) {
-            return fetch(url);
-        },
-        httpGetSync: function (url) {
-            if (useRelativePath) {
-                if (url.length && url[0] == '/') {
-                    url = url.substr(1);
-                }
-            }
-            var xhr = new XMLHttpRequest();
-            xhr.open('get', url, false);
-            xhr.send();
-            return xhr.responseText;
-        },
-        onNotFound: function (url, options) {
-            if (url.indexOf('/404') == 0) {
-                throw 'No not-found template found';
-            }
-            if (options) {
-                return Redirect('/404?' + _serializeOptionsToUrl(options));
-            } else {
-                return Redirect('/404');
-            }
-        },
-        reuseContainerActiveView(viewName) {
-            return true;
-        },
-        callCreatedWhenReuseContainerActiveView(viewName) {
-            return true;
-        },
-        callMountedWhenReuseContainerActiveView(viewName) {
-            return true;
-        },
-        callUnmountedWhenReuseContainerActiveView(viewName) {
-            return true;
-        },
-        resetDataWhenReuseContainerActiveView(viewName) {
-            return true;
-        },
-        generateTitle(titles) {
-            return titles.join(' - ');
-        }
-    };
-
-    _combineObject(options, _options);
-
-    // Common
-    var _cache = {};
-
-    var _css = {};
-
-    var _cssCloakInjected = false;
-    function _ensureCssCloakStyle() {
-        if (_cssCloakInjected) return;
-        _cssCloakInjected = true;
-        var style = document.createElement('style');
-        style.textContent = '._pome-css-cloak{visibility:hidden!important}';
-        document.head.appendChild(style);
-    }
-
-    var _vueCloakInjected = false;
-    function _ensureVueCloakStyle() {
-        if (_vueCloakInjected) return;
-        _vueCloakInjected = true;
-        var style = document.createElement('style');
-        style.textContent = '._pome-vue-cloak{display:none!important}';
-        document.head.appendChild(style);
-    }
-
-    function _ensureSkeletonStyle() {
-        // pome-skeleton.css must be referenced by the host page manually.
-        // This function is kept as a hook point for future use.
-    }
-
-    // Registry: kebab-name �?pre-rendered skeleton HTML string
-    var _componentSkeletonRegistry = {};
-
-    function _toKebabCase(name) {
-        // ScalableSidebar �?scalable-sidebar, menuBar �?menu-bar
-        return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-    }
-
-    function _registerComponentSkeleton(name, opt, rawHtml, skeletonFileHtml) {
-        // skeletonFileHtml: content of <component>.skeleton.html (takes top priority)
-        // opt.skeleton === string: inline HTML declared in the JS
-        // opt.skeleton === true: auto-generate from rawHtml
-        var hasFile    = !!skeletonFileHtml;
-        var hasInline  = opt && typeof opt.skeleton === 'string';
-        var hasAuto    = opt && opt.skeleton === true;
-        if (!hasFile && !hasInline && !hasAuto) return;
-        var kebab = _toKebabCase(name);
-        var skHtml = hasFile   ? skeletonFileHtml
-                   : hasInline ? opt.skeleton
-                   : _generateSkeletonHtml(rawHtml || (opt && opt.template) || '');
-        _componentSkeletonRegistry[kebab] = skHtml;
-    }
-
-    // --- Extract a plain numeric value from a bound attribute like :default-width="230" ---
-    function _extractBoundNumber(el, attr) {
-        var val = el.getAttribute(':' + attr);
-        if (!val) return null;
-        var m = val.match(/^(\d+(?:\.\d+)?)/);
-        return m ? m[1] : null;
-    }
-
-    // --- Known HTML tags for skeleton (custom components will be unwrapped) ---
-    var _knownHtmlTags = null;
-    function _isKnownHtmlTag(tag) {
-        if (!_knownHtmlTags) {
-            _knownHtmlTags = {};
-            'div,span,p,a,h1,h2,h3,h4,h5,h6,ul,ol,li,table,thead,tbody,tfoot,tr,td,th,colgroup,col,img,video,canvas,iframe,svg,form,input,textarea,select,option,button,label,section,article,aside,header,footer,nav,main,figure,figcaption,blockquote,pre,code,em,strong,i,b,u,small,sub,sup,br,hr,dl,dt,dd,details,summary,fieldset,legend,caption,abbr,cite,mark,time,address'.split(',').forEach(function(t) { _knownHtmlTags[t] = true; });
-        }
-        return !!_knownHtmlTags[tag];
-    }
-
-    function _generateSkeletonHtml(templateHtml) {
-        if (!templateHtml) return '';
-        var html = templateHtml;
-        // Remove Vue mustache expressions �?replace with non-breaking space
-        html = html.replace(/\{\{[\s\S]*?\}\}/g, '\u00A0');
-        // Parse as DOM
-        var doc = new DOMParser().parseFromString(
-            '<div id="_pome-sk-wrap">' + html + '</div>', 'text/html'
-        );
-        var root = doc.getElementById('_pome-sk-wrap');
-        if (!root) return '';
-        // Pass 1 �?structural: unwrap <template> slots, replace custom elements,
-        //   clone v-for rows, remove v-else branches
-        _skeletonStructurePass(root, doc);
-        // Pass 2 �?cleanup: strip Vue directives, replace text with skeleton blocks
-        _skeletonCleanupPass(root);
-        return root.innerHTML;
-    }
-
-    function _wrapTemplateWithSkeleton(opt) {
-        if (!opt.skeleton || !opt.template) return;
-        _ensureSkeletonStyle();
-        var skeletonHtml = typeof opt.skeleton === 'string'
-            ? opt.skeleton
-            : _generateSkeletonHtml(opt.template);
-
-        var inner = '<template v-if="!pomeSkeletonLoading && !pomeSkeletonCloaked">' + opt.template
-            + '</template><div v-if="pomeSkeletonLoading" class="_pome-skeleton">'
-            + skeletonHtml + '</div>';
-
-        if (opt.delayOpen) {
-            // Wrap everything in a single div with reactive delayOpen classes
-            // so the delayOpen animation applies to both skeleton and real content.
-            opt.template = '<div :class="{\'_pome-ui-opened\': pomeDelayOpened, \'_pome-ui-opening\': pomeDelayOpening}">' + inner + '</div>';
-        } else {
-            opt.template = inner;
-        }
-    }
-
-    // --- Pass 1: structural transformations ---
-    function _skeletonStructurePass(node, doc) {
-        if (!node || node.nodeType !== 1) return;
-        var i = 0;
-        while (i < node.childNodes.length) {
-            var child = node.childNodes[i];
-            if (child.nodeType !== 1) { i++; continue; }
-            var tag = child.tagName.toLowerCase();
-
-            // 1. Handle <template> tags (Vue slots)
-            if (tag === 'template') {
-                // Determine slot name from #xxx or v-slot:xxx
-                var slotName = null;
-                for (var a = 0; a < child.attributes.length; a++) {
-                    var attr = child.attributes[a].name;
-                    if (attr[0] === '#') { slotName = attr.substring(1); break; }
-                    if (attr.indexOf('v-slot:') === 0) { slotName = attr.substring(7); break; }
-                }
-                // Only keep the default slot (or unnamed templates); discard others
-                if (slotName && slotName !== 'default') {
-                    node.removeChild(child);
-                    continue;
-                }
-                // Unwrap template content into parent
-                if (child.content) {
-                    var tplNodes = Array.from(child.content.childNodes);
-                    for (var j = 0; j < tplNodes.length; j++) {
-                        node.insertBefore(doc.importNode(tplNodes[j], true), child);
-                    }
-                }
-                node.removeChild(child);
-                continue; // re-examine index (new children inserted)
-            }
-
-            // 2. Remove v-else / v-else-if branches entirely
-            if (child.getAttribute('v-else') !== null || child.getAttribute('v-else-if') !== null) {
-                node.removeChild(child);
-                continue;
-            }
-
-            // 3. Handle v-for �?clone element to simulate repeated rows
-            if (child.getAttribute('v-for')) {
-                child.removeAttribute('v-for');
-                var cloneCount = (tag === 'tr') ? 4 : (tag === 'li') ? 3 : 2;
-                var refNode = child.nextSibling;
-                for (var j = 0; j < cloneCount; j++) {
-                    var clone = child.cloneNode(true);
-                    node.insertBefore(clone, refNode);
-                }
-                // fall through to continue processing this element
-            }
-
-            // 4. Replace custom/unknown elements with <div>, keep children
-            if (!_isKnownHtmlTag(tag)) {
-                // Check if this component has declared its own skeleton
-                var registeredSkeleton = _componentSkeletonRegistry[tag];
-                if (registeredSkeleton) {
-                    // Parse the registered skeleton HTML and replace the element with it
-                    var skWrap = doc.createElement('div');
-                    skWrap.innerHTML = registeredSkeleton;
-                    if (child.getAttribute('class')) skWrap.setAttribute('class', child.getAttribute('class'));
-                    var existingStyleReg = child.getAttribute('style') || '';
-                    var styleExtraReg = '';
-                    var defWReg = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
-                    var minWReg = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
-                    if (defWReg) styleExtraReg += ';width:' + defWReg + 'px;flex-shrink:0';
-                    if (minWReg) styleExtraReg += ';min-width:' + minWReg + 'px';
-                    var combinedStyleReg = (existingStyleReg + styleExtraReg).replace(/^;+/, '');
-                    if (combinedStyleReg) skWrap.setAttribute('style', combinedStyleReg);
-                    // Replace the custom element with a wrapper containing the skeleton.
-                    // Use a fragment-like approach: move skWrap's children directly
-                    // so we don't add an extra div when the registered HTML already has one.
-                    var skNodes = Array.from(skWrap.childNodes);
-                    if (skNodes.length === 1 && skNodes[0].nodeType === 1) {
-                        var skRoot = skNodes[0];
-                        // Merge class / style from host element onto the single root node
-                        if (child.getAttribute('class')) skRoot.classList && skRoot.setAttribute('class', (skRoot.getAttribute('class') || '') + ' ' + child.getAttribute('class'));
-                        if (combinedStyleReg) skRoot.setAttribute('style', (skRoot.getAttribute('style') ? skRoot.getAttribute('style') + ';' : '') + combinedStyleReg);
-                        node.replaceChild(skRoot, child);
-                        i++;
-                    } else {
-                        while (skWrap.firstChild) node.insertBefore(skWrap.firstChild, child);
-                        node.removeChild(child);
-                        // i stays the same since we removed child and inserted nodes before it
-                    }
-                    continue;
-                }
-
-                var div = doc.createElement('div');
-                if (child.getAttribute('class')) div.setAttribute('class', child.getAttribute('class'));
-
-                // Reconstruct inline style, preserving explicit style + any bound sizing attrs
-                var existingStyle = child.getAttribute('style') || '';
-                var styleExtra = '';
-                // :default-width / default-width �?width + flex-shrink:0 so sidebar-like
-                // components keep their width in the skeleton
-                var defW = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
-                var minW = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
-                var maxW = _extractBoundNumber(child, 'max-width') || child.getAttribute('max-width');
-                if (defW) styleExtra += ';width:' + defW + 'px;flex-shrink:0';
-                if (minW) styleExtra += ';min-width:' + minW + 'px';
-                if (maxW) styleExtra += ';max-width:' + maxW + 'px';
-                var combinedStyle = (existingStyle + styleExtra).replace(/^;+/, '');
-                if (combinedStyle) div.setAttribute('style', combinedStyle);
-
-                while (child.firstChild) div.appendChild(child.firstChild);
-                node.replaceChild(div, child);
-                _skeletonStructurePass(div, doc); // recurse into replacement
-                i++;
-                continue;
-            }
-
-            // 5. Recurse into known elements
-            _skeletonStructurePass(child, doc);
-            i++;
-        }
-    }
-
-    // --- Pass 2: cleanup directives, replace text, handle media ---
-    function _skeletonCleanupPass(node) {
-        if (!node) return;
-        if (node.nodeType === 1) {
-            // Strip Vue directives / bindings / event listeners.
-            // Preserve v-show so CSS-driven responsive visibility still works
-            // (the skeleton lives inside a Vue-processed template).
-            var attrsToRemove = [];
-            for (var i = 0; i < node.attributes.length; i++) {
-                var attrName = node.attributes[i].name;
-                if (attrName === 'v-show') continue; // keep v-show for responsive toggling
-                if (attrName.indexOf('v-') === 0 || attrName[0] === '@' || attrName[0] === ':' || attrName[0] === '#') {
-                    attrsToRemove.push(attrName);
-                }
-            }
-            for (var i = 0; i < attrsToRemove.length; i++) {
-                node.removeAttribute(attrsToRemove[i]);
-            }
-            // Remove delayOpen classes
-            node.classList.remove('_pome-ui-opened');
-            node.classList.remove('_pome-ui-opening');
-            // Add shimmer class to leaf-level text containers
-            var tag = node.tagName.toLowerCase();
-            var shimmerTags = {span:1,a:1,p:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,li:1,label:1,button:1,input:1,textarea:1,select:1,dt:1,dd:1,figcaption:1,blockquote:1};
-            if (shimmerTags[tag]) {
-                node.classList.add('_pome-sk-shimmer');
-            }
-            if (tag === 'img') {
-                // Replace img with a shimmer skeleton block that preserves dimensions
-                var imgBlock = node.ownerDocument.createElement('span');
-                imgBlock.className = '_pome-sk-img';
-                // Preserve sizing from class or explicit attributes
-                if (node.getAttribute('class')) imgBlock.className += ' ' + node.getAttribute('class');
-                if (node.getAttribute('width')) imgBlock.style.width = node.getAttribute('width') + (/\d$/.test(node.getAttribute('width')) ? 'px' : '');
-                else imgBlock.style.width = '24px';
-                if (node.getAttribute('height')) imgBlock.style.height = node.getAttribute('height') + (/\d$/.test(node.getAttribute('height')) ? 'px' : '');
-                else imgBlock.style.height = '24px';
-                node.parentNode.replaceChild(imgBlock, node);
-                return; // node replaced, skip children
-            }
-            if (tag === 'video' || tag === 'canvas' || tag === 'iframe') {
-                node.removeAttribute('src');
-                node.removeAttribute('srcset');
-                node.style.backgroundColor = '#e8e8e8';
-                node.style.borderRadius = '4px';
-            }
-        }
-        var children = Array.from(node.childNodes);
-        for (var i = 0; i < children.length; i++) {
-            var child = children[i];
-            if (child.nodeType === 3) { // text node
-                // \u00A0 comes from mustache replacement �?treat it as content
-                var text = child.textContent.replace(/[\s\u00A0]+/g, '');
-                var hasNbsp = child.textContent.indexOf('\u00A0') >= 0;
-                if (text || hasNbsp) {
-                    var parentTag = child.parentNode && child.parentNode.tagName
-                        ? child.parentNode.tagName.toLowerCase() : '';
-                    var block = child.ownerDocument.createElement('span');
-                    block.className = '_pome-sk-block';
-                    block.innerHTML = '\u00A0';
-                    child.parentNode.replaceChild(block, child);
-                }
-            } else if (child.nodeType === 1) {
-                _skeletonCleanupPass(child);
-            }
-        }
-    }
-
-    function _httpCached(url) {
-        return !!_cache[url];
-    }
-
-    function _httpGet(url) {
-        if (_cache[url]) {
-            return Promise.resolve(_cache[url]);
-        }
-
-        var _url = url;
-        if (_options.version) {
-            if (url.indexOf('?') > 0) {
-                _url += "&";
-            } else {
-                _url += "?"
-            }
-            _url += "v=" + _options.version;
-        }
-
-        return _options.httpGet(_url).then(function (result) {
-            if (result.status > 300 || result.status < 200) {
-                return Promise.reject(result);
-            }
-
-            var txt = result.text();
-            _cache[url] = txt;
-            return Promise.resolve(txt);
-        }).catch(function (err) {
-            Promise.reject(err);
-        });
-    };
-
-    function _httpExist(url) {
-        return _httpGet(url)
-            .then(function () {
-                return Promise.resolve(true);
-            })
-            .catch(function () {
-                return Promise.resolve(false);
-            });
-    };
-
-    // Fetch a .skeleton.html file, returning null when the file does not
-    // physically exist. Unlike _httpGet, this guards against SPA catch-all
-    // routes that return the app entry page (status 200) for any URL:
-    // if the response body starts with "<!DOCTYPE" or "<html" it is treated
-    // as a missing file and null is returned.
-    // Caches "not found" results so that repeated requests for the same
-    // missing skeleton file do not produce additional network round-trips.
-    var _skeletonNotFoundCache = {};
-    function _httpGetSkeletonFile(url) {
-        if (_skeletonNotFoundCache[url]) {
-            return Promise.resolve(null);
-        }
-        return _httpGet(url).then(function (text) {
-            if (!text) {
-                _skeletonNotFoundCache[url] = true;
-                return null;
-            }
-            var trimmed = text.replace(/^[\s\uFEFF]+/, ''); // strip BOM / whitespace
-            if (/^<!DOCTYPE/i.test(trimmed) || /^<html/i.test(trimmed)) {
-                _skeletonNotFoundCache[url] = true;
-                return null; // SPA fallback page, not a real skeleton file
-            }
-            return text;
-        }).catch(function () {
-            _skeletonNotFoundCache[url] = true;
-            return null;
-        });
-    };
-
-    function _serializeOptionsToUrl(options) {
-        var fields = Object.getOwnPropertyNames(options);
-        var str = '';
-        for (var i = 0; i < fields.length; ++i) {
-            str += encodeURIComponent(fields[i]) + '=' + encodeURIComponent(options[fields[i]]) + '&';
-        }
-
-        if (str[str.length - 1] === '&') {
-            str = str.substr(0, str.length - 1);
-        }
-
-        return str;
-    }
-    function _addHyphenBeforeUppercase(str) {
-        var ret = str.replace(/([A-Z])/g, '-$1').toLowerCase();
-        while (ret.length && ret[0] == '-') {
-            ret = ret.substr(1);
-        }
-        return ret;
-    }
-
-    // Resolve the template option:
-    // - If it ends with '.html', treat it as a path and fetch the HTML content
-    // - Otherwise, treat it as inline HTML code and return it directly
-    function _resolveTemplateOption(template) {
-        if (!template || typeof template !== 'string') {
-            return Promise.resolve(null);
-        }
-        if (template.toLowerCase().endsWith('.html')) {
-            return _httpGet(template).then(function (html) {
-                return _sanitizeTemplate(html);
-            });
-        }
-        return Promise.resolve(template);
-    }
-
-    function _sanitizeTemplate(template) {
-        if (!template instanceof String) {
-            return template;
-        }
-
-        var result = [...template.matchAll(/(?<=:)[a-zA-Z0-9-_]{1,}(?=\=")/g)];
-        for (var i = 0; i < result.length; ++i) {
-            var propertyName = result[i].toString();
-            var sanitizedPropertyName = _addHyphenBeforeUppercase(propertyName);
-            template = template.replaceAll(':' + propertyName + '=', ':' + sanitizedPropertyName + '=');
-        }
-
-        result = [...template.matchAll(/(?<=@)[a-zA-Z0-9-_]{1,}(?=\=")/g)];
-        for (var i = 0; i < result.length; ++i) {
-            var propertyName = result[i].toString();
-            var sanitizedPropertyName = _addHyphenBeforeUppercase(propertyName);
-            template = template.replaceAll('@' + propertyName + '=', '@' + sanitizedPropertyName + '=');
-        }
-
-        return template;
-    }
-
-    var _root = null;
-    function root() {
-        return _root;
-    };
-
-    function _findRoot(instance) {
-        var globalRoot = exports.root();
-        if (globalRoot) return globalRoot;
-        if (!instance) return null;
-        var current = instance;
-        while (current.parent) {
-            current = current.parent;
-        }
-        return current.proxy || current;
-    }
-
-    exports._rules = [];
-
-    function useRoutes(url) {
-        var rules = _options.httpGetSync(url);
-        rules = JSON.parse(rules);
-        if (!exports._rules) {
-            exports._rules = {};
-        }
-        _combineObject(rules, exports._rules);
-    }
-
-    // Internal
-    function _combineObject(src, dest) {
-        if (!src) {
-            return;
-        }
-
-        var fields = Object.getOwnPropertyNames(src);
-        for (var i = 0; i < fields.length; ++i) {
-            dest[fields[i]] = src[fields[i]];
-        }
-    };
-
-    // Helper: Chain an async lifecycle hook onto an existing one
-    function _chainHook(obj, hookName, fn) {
-        var original = obj[hookName] || function () {};
-        obj[hookName] = function () {
-            var self = this;
-            var result = original.call(self);
-            var p = (result && result instanceof Promise) ? result : Promise.resolve();
-            return p.then(function () {
-                var p2;
-                try {
-                    p2 = fn.call(self);
-                } catch (ex) {
-                    console.error(ex);
-                }
-                return (p2 && p2 instanceof Promise) ? p2 : Promise.resolve();
-            });
-        };
-    }
-
-    // Helper: Hook setup() to inject $app and optional extras
-    function _hookSetup(opt, extraFn) {
-        var originalSetup = opt.setup || function () {};
-        opt.setup = function (props, context) {
-            originalSetup(props, context);
-            var instance = Vue.getCurrentInstance();
-            instance.$app = exports;
-            if (extraFn) {
-                extraFn.call(this, instance, opt);
-            }
-            if (!instance.$root) {
-                instance.$root = _findRoot(instance);
-            }
-            if (!instance.$parent) {
-                instance.$parent = (instance.parent && instance.parent.proxy) || instance.$root;
-            }
-        };
-    }
-
-    // Helper: Hook data() to pass exports and optionally merge params/query
-    function _hookData(opt, params) {
-        var originalData = opt.data || function () { return {}; };
-        opt.data = function () {
-            var data = originalData.call(this, exports);
-            if (params) {
-                _combineObject(params, data);
-                _parseQueryString(data);
-            }
-            return data;
-        };
-    }
-
-    // Helper: Create PomeloModule require function
-    function _createRequire(path) {
-        if (!PomeloModule) return undefined;
-        return function (script, workingDirectory, mode) {
-            workingDirectory = workingDirectory || PomeloModule.getContainingFolder(path);
-            return PomeloModule.require(script, workingDirectory, mode);
-        };
-    }
-
-    function _getQueryString() {
-        var ret = window.location.search;
-
-        if (window.location.hash.indexOf('?') > 0) {
-            var hashSearch = window.location.hash.substr(window.location.hash.indexOf('?'));
-            if (ret) {
-                ret += '&' + hashSearch.substr(1);
-            } else {
-                ret = hashSearch;
-            }
-        }
-
-        return ret;
-    }
-
-    function _parseQueryString(dest) {
-        var qs = _getQueryString();
-        if (!qs) {
-            return;
-        }
-
-        var str = qs;
-        if (str[0] == '?') {
-            str = str.substr(1);
-        }
-
-        var splited = str.split('&');
-        for (var i = 0; i < splited.length; ++i) {
-            var splited2 = splited[i].split('=');
-            var key = decodeURIComponent(splited2[0]);
-            var val = decodeURIComponent(splited2[1]);
-            _fillObjectField(key, val, dest);
-        }
-    }
-
-    function _resolveModules(modules, viewName) { // viewName is only for parse macro
-        if (!modules) {
-            return Promise.resolve();
-        }
-
-        if (_options.resolveModulesParallelly) {
-            var promises = [];
-            for (var i = 0; i < modules.length; ++i) {
-                promises.push(LoadScript(parseMacroPath(viewName, modules[i])));
-            }
-
-            return Promise.all(promises);
-        } else {
-            var promise = Promise.resolve(null);
-            var makeFunc = function (module) {
-                return function (result) {
-                    return LoadScript(parseMacroPath(viewName, module));
-                };
-            };
-            for (var i = 0; i < modules.length; ++i) {
-                var m = modules[i];
-                promise = promise.then(makeFunc(m));
-            }
-            return promise;
-        }
-    }
-
-    function _buildApp(url, params, mobile, parent) {
-        var componentObject = {};
-        return _httpGet(url + '.js')
-            .then(function (js) {
-                var Page = function (options) {
-                    componentObject = options;
-                };
-
-                var require = _createRequire(url);
-                try {
-                    eval(js + '\r\n//# sourceURL=' + url + '.js');
-                } catch (evalError) {
-                    console.error('[PomeUI] Failed to eval component JS. URL: ' + url + '.js', evalError);
-                    throw new Error('Failed to eval component JS (' + url + '.js): ' + (evalError.message || evalError));
-                }
-                if (!componentObject || (typeof componentObject !== 'object')) {
-                    console.error('[PomeUI] Component JS did not produce a valid component object. URL: ' + url + '.js', 'Got:', componentObject);
-                    throw new Error('Component JS (' + url + '.js) did not produce a valid component object. Got: ' + String(componentObject));
-                }
-                hookMountedAndUnmounted(componentObject, url + (mobile ? '.m' : ''));
-                return _resolveModules(componentObject.modules || [], url).then(function () {
-                    return Promise.resolve(componentObject)
-                });
-            })
-            .then(function (component) {
-                var htmlPromise;
-                if (mobile) {
-                    htmlPromise = _httpExist(url + '.m.html').then(function (res) {
-                        return _httpGet(url + (res ? '.m.html' : '.html'));
-                    });
-                } else {
-                    htmlPromise = _httpGet(url + '.html');
-                }
-                // Load .skeleton.html in parallel; null if not found
-                var skeletonFilePromise = _httpGetSkeletonFile(url + '.skeleton.html');
-
-                // If component.template is specified, resolve it (could be .html path or inline HTML)
-                var templateOptionPromise = component.template
-                    ? _resolveTemplateOption(component.template)
-                    : Promise.resolve(null);
-
-                return Promise.all([htmlPromise, skeletonFilePromise, templateOptionPromise]).then(function (results) {
-                    var template = results[0];
-                    var skeletonFileHtml = results[1];
-                    var resolvedTemplate = results[2];
-                    if (resolvedTemplate) {
-                        component.template = resolvedTemplate;
-                    } else if (!component.template) {
-                        component.template = _sanitizeTemplate(template);
-                    }
-                    // .skeleton.html file takes top priority over skeleton: true / inline string
-                    if (skeletonFileHtml && component.skeleton) {
-                        component.skeleton = skeletonFileHtml;
-                    }
-                    if (component.delayOpen) {
-                        var dom = new DOMParser().parseFromString(component.template, 'text/html');
-                        var children = dom.querySelector('body').children;
-                        for (var i = 0; i < children.length; ++i) {
-                            if (children[i].tagName.toUpperCase() != 'DIV') {
-                                continue;
-                            }
-                            if (children[i].getAttribute('v-if') != null || children[i].getAttribute('v-else-if') || children[i].getAttribute('v-else')) {
-                                continue;
-                            }
-                            if (component.skeleton) {
-                                // Skeleton mode: delayOpen classes will be added by
-                                // _wrapTemplateWithSkeleton on an outer wrapper div.
-                                // No need to add them to individual children here.
-                            } else {
-                                children[i].classList.add('_pome-ui-opened');
-                                children[i].classList.add('_pome-ui-opening');
-                            }
-                        }
-
-                        var tpl = template || component.template;
-                        var ret = tpl.indexOf('<html') >= 0 ? new XMLSerializer().serializeToString(dom) : dom.querySelector('body').innerHTML;
-                        component.template = ret;
-                    }
-                    _patchComponent(url, component, true);
-                    // _wrapTemplateWithSkeleton is deferred to after _loadComponents
-                    // so the component skeleton registry is fully populated.
-                    return Promise.resolve(component);
-                });
-            })
-            .then(function (component) {
-                _hookSetup(component, function (instance, comp) {
-                    instance.$parent = parent || _findRoot(instance);
-                    instance.$root = _findRoot(instance) || parent;
-                    instance.$view = url;
-                    instance.$data = comp.data || function () { return {}; };
-                    instance.$created = comp.created || function () { };
-                    instance.$mounted = comp.mounted || function () { };
-                    instance.$unmounted = comp.unmounted || function () { };
-                    instance.$delayClose = comp.delayClose || 0;
-                    _attachContainer(instance);
-                });
-
-                _hookData(component, params);
-
-                // Create instance
-                return _resolveModules(component.modules, url).then(function () {
-                    var components = component.components || [];
-                    var directives = component.directives || [];
-                    var _ret;
-
-                    // Preload page's own CSS before mount
-                    var pageCssPromise = Promise.resolve();
-                    var viewName = url + (mobile ? '.m' : '');
-                    if (_options.preloadCss && component.style) {
-                        pageCssPromise = appendCssReferenceAsync(viewName, component.style);
-                    }
-
-                    return Promise.all([pageCssPromise, _loadComponents(components, url)]).then(function (results) {
-                        var components = results[1];
-                        // Wrap skeleton template now that component registry is fully populated.
-                        _wrapTemplateWithSkeleton(component);
-                        var ret;
-                        try {
-                            ret = Vue.createApp(component);
-                        } catch (createAppError) {
-                            console.error('[PomeUI] Vue.createApp failed. URL: ' + url, createAppError);
-                            console.error('[PomeUI] Component object:', { template: component.template ? component.template.substring(0, 200) + '...' : '(none)', data: typeof component.data, methods: component.methods ? Object.keys(component.methods) : '(none)' });
-                            throw new Error('Vue.createApp failed for URL ' + url + ': ' + (createAppError.message || createAppError));
-                        }
-
-                        for (var i = 0; i < components.length; ++i) {
-                            var com = components[i];
-                            ret.component(com.name, com.options);
-                        }
-
-                        var originalMountFunc = ret.mount || function () { };
-                        ret.mount = function (el) {
-                            ret.proxy = originalMountFunc(el);
-                            return ret.proxy;
-                        }
-
-                        _ret = ret;
-                        return _loadDirectives(directives, url);
-                    }).then(function (directives) {
-                        for (var i = 0; i < directives.length; ++i) {
-                            var dir = directives[i];
-                            _ret.directive(dir.name, dir.options);
-                        }
-                        return Promise.resolve(_ret);
-                    });
-                });
-            });
-    };
-
-    function _replace(source, find, replace) {
-        var idx = source.indexOf(find);
-        if (idx < 0) {
-            return source;
-        }
-
-        var ret = source.substr(0, idx) + replace + source.substr(idx + find.length);
-        return ret;
-    }
-
-    function sleep(ms) {
-        return new Promise(function (res) {
-            setTimeout(function () { res(); }, ms);
-        });
-    };
-
-    function yield() {
-        return sleep(0);
-    }
-
-    function _attachContainer(instance) {
-        if (!instance) {
-            console.warn('Invalid view model');
-        }
-
-        if (!instance.$containers) {
-            instance.$containers = [];
-        }
-
-        if (!instance.$containers) {
-            instance.$containers = [];
-        }
-
-        var containers = instance.$containers;
-        instance.$container = function (el) {
-            var container = containers.filter(x => x.selector == el)[0];
-            if (!container) {
-                container = {
-                    element: document.querySelector(el),
-                    selector: el,
-                    open: function (url, params) {
-                        var mobile = _options.mobile();
-                        var currentProxy = null;
-                        if (instance.proxy) {
-                            currentProxy = instance.proxy;
-                        }
-                        if (instance.$ && instance.$.proxy) {
-                            currentProxy = instance.$.proxy;
-                        }
-
-                        var p = Promise.resolve();
-                        if (!this.active || this.active.$view != url || !_options.reuseContainerActiveView()) {
-                            p = this.close();
-                        }
-
-                        var self = this;
-
-                        return p.then(function () {
-                            var p = Promise.resolve();
-                            params = generateParametersFromRoute(params);
-                            _parseQueryString(params);
-                            if (_options.reuseContainerActiveView() && self.active?.$view == url) {
-                                var reuseComponentFunc = function (container) {
-                                    if (!container || !container.active) {
-                                        return p;
-                                    }
-
-                                    if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
-                                        p = p.then(function () {
-                                            if (!container.active || !container.active.$unmounted) return Promise.resolve();
-                                            var val = container.active.$unmounted();
-                                            if (val instanceof Promise) {
-                                                return val;
-                                            } else {
-                                                return Promise.resolve();
-                                            }
-                                        });
-                                    }
-                                    p = p.then(function () {
-                                        if (!container.active || !container.active.$data) return Promise.resolve();
-                                        var initData = container.active.$data();
-                                        if (_options.resetDataWhenReuseContainerActiveView()) {
-                                            _combineObject(initData, container.active);
-                                        }
-                                        _combineObject(params, container.active);
-                                        return Promise.resolve();
-                                    });
-                                    if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
-                                        p = p.then(function () {
-                                            if (!container.active || !container.active.$created) return Promise.resolve();
-                                            var val = container.active.$created();
-                                            if (val instanceof Promise) {
-                                                return val;
-                                            } else {
-                                                return Promise.resolve();
-                                            }
-                                        });
-                                    }
-                                    if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
-                                        p = p.then(function () {
-                                            if (!container.active || !container.active.$mounted) return Promise.resolve();
-                                            var val = container.active.$mounted();
-                                            if (val instanceof Promise) {
-                                                return val;
-                                            } else {
-                                                return Promise.resolve();
-                                            }
-                                        });
-                                    }
-
-                                    if (container.active.$containers && container.active.$containers.length) {
-                                        for (var i = 0; i < container.active.$containers.length; ++i) {
-                                            reuseComponentFunc(container.active.$containers[i]);
-                                        }
-                                    }
-
-                                    return p.then(function () { if (!container.active) return Promise.resolve(null); container.active.$forceUpdate(); return Promise.resolve(container.active) });
-
-                                }
-                                return Promise.resolve(reuseComponentFunc(self));
-                            }
-
-                            var _result;
-                            var retryLeft = 20;
-                            var _lastMountError = null;
-                            var buildRetryPromise = function () {
-                                return new Promise(function (res, rej) {
-                                    var containerEl = document.querySelector(self.selector);
-                                    if (!containerEl) {
-                                        if (--retryLeft > 0) {
-                                            return res(sleep(50).then(function () {
-                                                return buildRetryPromise();
-                                            }));
-                                        } else {
-                                            var msg = 'Mount component to ' + self.selector + ' failed: container element not found in DOM after retries. URL: ' + url;
-                                            console.error('[PomeUI]', msg);
-                                            return rej(new Error(msg));
-                                        }
-                                    }
-
-                                    var active;
-                                    try {
-                                        active = _result.mount(self.selector);
-                                    } catch (mountError) {
-                                        _lastMountError = mountError;
-                                        console.error('[PomeUI] Mount component to ' + self.selector + ' threw an error. URL: ' + url, mountError);
-                                        return rej(new Error('Mount component to ' + self.selector + ' failed: ' + (mountError.message || mountError) + '. URL: ' + url));
-                                    }
-
-                                    if (active) {
-                                        self.active = active;
-                                        return res(active);
-                                    }
-
-                                    if (--retryLeft > 0) {
-                                        return res(sleep(50).then(function () {
-                                            return buildRetryPromise();
-                                        }));
-                                    } else {
-                                        var detail = 'mount() returned ' + (active === null ? 'null' : (active === undefined ? 'undefined' : String(active)));
-                                        if (_lastMountError) {
-                                            detail += '; last error: ' + (_lastMountError.message || _lastMountError);
-                                        }
-                                        var msg = 'Mount component to ' + self.selector + ' failed: ' + detail + '. URL: ' + url;
-                                        console.error('[PomeUI]', msg);
-                                        console.error('[PomeUI] Diagnostics:', {
-                                            selector: self.selector,
-                                            url: url,
-                                            containerElement: containerEl,
-                                            containerInnerHTML: containerEl ? containerEl.innerHTML.substring(0, 200) : '(N/A)',
-                                            appResult: _result,
-                                            mobile: mobile
-                                        });
-                                        return rej(new Error(msg));
-                                    }
-                                });
-                            };
-
-                            return _buildApp(url, params, mobile, currentProxy).then(function (result) {
-                                _result = result;
-                                return buildRetryPromise();
-                            }).catch(function (err) {
-                                console.error('[PomeUI] Failed to build or mount component. URL: ' + url + ', Selector: ' + self.selector, err);
-                                return Promise.reject(err);
-                            });
-                        });
-                    },
-                    close: async function (recurse = true) {
-                        async function liftClose(container) {
-                            if (container.active && container.active.$) {
-                                if (recurse) {
-                                    for (var i = 0; i < container.active.$containers.length; ++i) {
-                                        liftClose(container.active.$containers[i]);
-                                    }
-                                }
-
-                                if (container.active.$delayClose) {
-                                    try {
-                                        if (container.active.$el) {
-                                            container.active.$el.classList?.add('_pome-ui-closing');
-                                        }
-                                    } catch (ex) {
-                                        console.warn(ex);
-                                    }
-                                    console.log(`sleeping ${container.active.$delayClose}ms...`);
-                                    await sleep(container.active.$delayClose);
-                                }
-
-                                try {
-                                    container.active.$.appContext.app.unmount();
-                                } catch (ex) {
-                                    console.warn(ex);
-                                }
-                                container.active = null;
-                            }
-                        }
-                        
-                        await liftClose(this);
-                    },
-                    active: null
-                };
-                containers.push(container);
-            }
-            return container;
-        };
-    };
-
-    function Root(options, el, layout) {
-        options = options || {};
-        _hookSetup(options, function (instance) {
-            instance.$parent = parent || _findRoot(instance);
-            instance.$root = _findRoot(instance) || parent;
-            instance.$onUpdating = options.onUpdating;
-            if (layout) {
-                instance.$layout = layout;
-                instance.$view = layout;
-            }
-            _attachContainer(instance);
-        });
-
-        return _resolveModules(options.modules, layout).then(function () {
-            var _app;
-
-            return _loadComponents(options.components || [], layout)
-                .then(function (components) {
-                    // Inject layout skeleton overlay now that component registry is populated.
-                    if (options._pomeLayoutSkeleton) {
-                        var ls = options._pomeLayoutSkeleton;
-                        var skHtml = ls.skeletonOverride
-                            ? ls.skeletonOverride
-                            : (function () {
-                                var html = _generateSkeletonHtml(ls.skeletonBody);
-                                // Post-process: remove empty top-level nodes (modals etc.),
-                                // set flex:1 on the main content area next to the sidebar.
-                                var tmp = document.createElement('div');
-                                tmp.innerHTML = html;
-                                var topChildren = Array.from(tmp.children);
-                                var sidebarIdx = -1;
-                                for (var ci = 0; ci < topChildren.length; ci++) {
-                                    var ch = topChildren[ci];
-                                    if (!ch.innerHTML.trim()) {
-                                        tmp.removeChild(ch);
-                                        topChildren = Array.from(tmp.children);
-                                        ci--;
-                                        continue;
-                                    }
-                                    if (sidebarIdx < 0 && /\bwidth\s*:/.test(ch.getAttribute('style') || '')) {
-                                        sidebarIdx = ci;
-                                    } else if (sidebarIdx >= 0 && ci === sidebarIdx + 1) {
-                                        ch.style.flex = '1';
-                                        ch.style.minWidth = '0';
-                                        ch.style.overflow = 'hidden';
-                                    }
-                                }
-                                return tmp.innerHTML;
-                            })();
-                        var appEl = document.querySelector(ls.appId);
-                        if (appEl) {
-                            var skDiv = document.createElement('div');
-                            skDiv.setAttribute('v-if', 'pomeSkeletonLoading || pomeSkeletonCloaked');
-                            skDiv.className = '_pome-skeleton _pome-layout-skeleton ' + ls.bodyClass;
-                            if (ls.overlayStyle) skDiv.setAttribute('style', ls.overlayStyle);
-                            skDiv.innerHTML = skHtml;
-                            appEl.insertBefore(skDiv, appEl.firstChild);
-                        }
-                        delete options._pomeLayoutSkeleton;
-                    }
-                    var app = Vue.createApp(options || {});
-                    for (var i = 0; i < components.length; ++i) {
-                        var com = components[i];
-                        app.component(com.name, com.options);
-                    }
-
-                    _app = app;
-                    return _loadDirectives(options.directives || [], layout);
-                })
-                .then(function (directives) {
-                    for (var i = 0; i < directives.length; ++i) {
-                        var dir = directives[i];
-                        app.directive(dir.name, dir.options);
-                    }
-
-                    _root = _app.mount(el);
-                    _root.$.proxy = _root;
-                    var _mountEl = document.querySelector(el);
-                    if (_mountEl) {
-                        _mountEl.classList.remove('_pome-vue-cloak');
-                    }
-                });
-        });
-    }
-
-    function mount() {
-        function parseHref(el) {
-            if (!el) {
-                return null;
-            }
-
-            if (!el.getAttribute) {
-                return null;
-            }
-
-            var target = el.getAttribute('target') || '_self';
-            var staticAttribute = el.getAttribute('static-link') || el.getAttribute('v-static') || el.getAttribute('pomelo-static');
-
-            if (staticAttribute == null
-                && target.toLowerCase() == '_self'
-                && el.tagName.toLowerCase() == "a") {
-                return el.getAttribute('href');
-            }
-
-            return parseHref(el.parentNode);
-        }
-
-        window.addEventListener('click', function (e) {
-            if (!e) return;
-            var href = parseHref(e.target);
-            if (href) {
-                if (e.ctrlKey || e.metaKey) {
-                    return;
-                }
-                exports.redirect(href);
-                e.preventDefault();
-                return;
-            }
-        });
-
-        window.onpopstate = function () {
-            UpdateLayout();
-        };
-
-        return UpdateLayout();
-    }
-
-    function UseConfig(options) {
-        _combineObject(options, _options);
-    }
-
-    function MapRoute(rule, view) {
-        if (!exports._rules) {
-            exports._rules = {};
-        }
-
-        exports._rules[rule] = view;
-    }
-
-    function ForceUpdate(proxy = exports.root()) {
-        if (!proxy) return;
-        proxy.$forceUpdate();
-        if (proxy.$containers) {
-            for (var i = 0; i < proxy.$containers.length; ++i) {
-                if (proxy.$containers[i].active) {
-                    ForceUpdate(proxy.$containers[i].active);
-                }
-            }
-        }
-    }
-
-    function MatchRoute() {
-        function replaceAll(str, s1, s2) {
-            return str.replace(new RegExp(s1, "g"), s2);
-        };
-
-        function matchAll(str) {
-            var ret = [];
-            if (!str) {
-                return ret;
-            }
-
-            var currentBrace = -1;
-            var parenthesis = 0;
-            for (var i = 0; i < str.length; ++i) {
-                if (str[i] == '{' && !parenthesis) {
-                    currentBrace = i;
-                    parenthesis = 0;
-                } else if (str[i] == '(') {
-                    ++parenthesis;
-                } else if (str[i] == ')') {
-                    --parenthesis;
-                } else if (str[i] == '}' && !parenthesis) {
-                    ret.push(str.substring(currentBrace, i + 1));
-                }
-            }
-
-            return ret;
-        }
-
-        function unwrapBrackets(src) {
-            if (src[0] === '{') {
-                return src.substr(1, src.length - 2);
-            } else {
-                return src;
-            }
-        }
-
-        function regExpEscape(str) {
-            return str.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
-        }
-
-        function getRegExpPatterns(str) {
-            var cnt = 0;
-            if (str) {
-                for (var i = 0; i < str.length; ++i) {
-                    if (str[i] == '(') {
-                        ++cnt;
-                    }
-                    if (str[i] == '?' && i > 0 && str[i - 1] == '(') {
-                        --cnt;
-                    }
-                }
-            }
-            return cnt;
-        }
-
-        function getSanitizedHash() {
-            var hash = window.location.hash;
-            var idx = hash.indexOf('?');
-            if (idx == -1) {
-                return hash;
-            }
-            return hash.substr(0, idx);
-        }
-
-        var keys = Object.getOwnPropertyNames(exports._rules);
-        for (var i = 0; i < keys.length; ++i) {
-            var rule = keys[i];
-            var isHash = rule[0] == '#';
-            var view = exports._rules[keys[i]];
-            var matches = matchAll(rule);
-            var params = [];
-            var patterns = [];
-            for (var j = 0; j < matches.length; ++j) {
-                var param = matches[j];
-                var k = unwrapBrackets(param);
-                regex = '([^/]+)';
-                if (k[0] == '*') {
-                    regex = '(.*)';
-                    k = k.substr(1);
-                }
-                if (k.indexOf('=') > 0) {
-                    var value = k.substr(k.indexOf('=') + 1);
-                    regex = `(${regExpEscape(value)})`;
-                    params.push(k.substr(0, k.indexOf('=')));
-                } else if (param.indexOf(':') > 0) {
-                    regex = param.substr(param.indexOf(':') + 1)
-                    regex = regex.substr(0, regex.length - 1);
-                    params.push(k.substr(0, k.indexOf(':')));
-                } else {
-                    params.push(k);
-                }
-                patterns.push(getRegExpPatterns(regex));
-                rule = _replace(rule, param, regex);
-            }
-
-            var parsedReg = new RegExp('^' + rule + '$');
-            var matches = parsedReg.exec(isHash ? getSanitizedHash() || '#' : window.location.pathname);
-            if (matches) {
-                var ret = {
-                    view: view,
-                    params: []
-                };
-                var _matches = matches;
-                matches = [];
-                var index = 0;
-                for (var j = 1; j < _matches.length; ++j) {
-                    matches.push(_matches[j]);
-                    for (var k = 0; k < patterns[index] - 1; ++k) {
-                        ++j;
-                    }
-                    ++index;
-                }
-                var values = matches.map(function (x) { return decodeURIComponent(x); });
-                for (var j = 0; j < params.length; ++j) {
-                    ret.params.push({ key: params[j], value: values[j] });
-                }
-                return ret;
-            }
-        }
-
-        return null;
-    }
-
-    function _fillObjectField(param, value, dest) {
-        if (!dest) {
-            return;
-        }
-
-        var splited = param.split('.');
-        for (var i = 0; i < splited.length - 1; ++i) {
-            if (!dest[splited[i]]) {
-                dest[splited[i]] = {}
-            }
-            dest = dest[splited[i]];
-        }
-        dest[splited[splited.length - 1]] = value;
-    }
-    function _applyLayoutHtml(layout) {
-        return _httpGet(layout + (_options.mobile() ? '.m.html' : '.html')).then(function (layoutHtml) {
-            var htmlBeginTagIndex = layoutHtml.indexOf('<html');
-            var htmlBeginTagIndex2 = layoutHtml.indexOf('>', htmlBeginTagIndex);
-            layoutHtml = layoutHtml.substr(htmlBeginTagIndex2 + 1);
-            var htmlEndTagIndex = layoutHtml.lastIndexOf('</html>');
-            layoutHtml = layoutHtml.substr(0, htmlEndTagIndex);
-            layoutHtml = _patchTemplate(layout, layoutHtml);
-            document.querySelector('html').innerHTML = layoutHtml;
-
-            var ticks = new Date().getTime();
-            var appId = 'pomelo-' + ticks;
-            _ensureVueCloakStyle();
-            document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + document.querySelector('body').innerHTML + '</div>';
-
-            return Promise.resolve(appId);
-        })
-    }
-
-    function generateParametersFromRoute(params = {}) {
-        var route = null;
-        route = MatchRoute();
-        if (route == null) {
-            try {
-                _options.onNotFound(window.location.pathname + window.location.search);
-                return;
-            } catch (ex) {
-                throw "No available route found.";
-            }
-        }
-
-        for (var i = 0; i < route.params.length; ++i) {
-            var param = route.params[i];
-            _fillObjectField(param.key, param.value, params);
-        }
-
-        return params;
-    }
-
-    function parseMacroPath(viewName, href) {
-        if (!href) {
-            href = '';
-        }
-
-        if (href.indexOf('@') < 0) {
-            return href;
-        }
-
-        var containingFolder = '/';
-        var folderIndex = viewName.lastIndexOf('/');
-        if (folderIndex >= 0) {
-            containingFolder = viewName.substr(0, folderIndex);
-        }
-
-        href = href.replaceAll('@(view)', viewName)
-            .replaceAll('@(js)', viewName + '.js')
-            .replaceAll('@(html)', viewName + '.html')
-            .replaceAll('@(mobileHtml)', viewName + '.m.html')
-            .replaceAll('@(css)', viewName + '.css')
-            .replaceAll('@(mobileCss)', viewName + '.m.css')
-            .replaceAll('@(less)', viewName + '.less')
-            .replaceAll('@(mobileLess)', viewName + '.m.less')
-            .replaceAll('@(mobileSass)', viewName + '.m.sass')
-            .replaceAll('@(mobileScss)', viewName + '.m.scss')
-            .replaceAll('@(containingFolder)', containingFolder);
-
-        if (href.length && href[0] != '/' && href.indexOf('http') == -1) {
-            href = getContainingFolder(viewName) + href;
-        }
-
-        return href;
-    }
-
-    function appendCssReference(view, style) {
-        if (typeof style == 'boolean') {
-            var href = view + '.css';
-            if (_options.version) {
-                href += '?v=' + _options.version;
-            }
-            internalAppendCssReference(view, href);
-        } else if (typeof style == 'string') {
-            var href = parseMacroPath(view, style);
-            href = resolveRelativePath(href, getContainingFolder(view));
-            if (_options.version) {
-                if (href.indexOf('>') < 0) {
-                    href += '?v=' + _options.version;
-                } else {
-                    href += '&v=' + _options.version;
-                }
-            }
-            internalAppendCssReference(view, href);
-        } else if (style instanceof Array) {
-            for (var i = 0; i < style.length; ++i) {
-                if (typeof style[i] != 'string') {
-                    continue;
-                }
-                var href = parseMacroPath(view, style[i]);
-                href = resolveRelativePath(href, getContainingFolder(view));
-                if (_options.version) {
-                    if (href.indexOf('>') < 0) {
-                        href += '?v=' + _options.version;
-                    } else {
-                        href += '&v=' + _options.version;
-                    }
-                }
-                internalAppendCssReference(view, href);
-            }
-        } else {
-            throw 'style type not supported'
-        }
-    }
-
-    function getContainingFolder(absolutePath) {
-        if (!absolutePath) {
-            console.warn('getContainingFolder: absolutePath is invalid');
-        }
-
-        var slashIndex = absolutePath.lastIndexOf('/');
-        if (slashIndex < 0) {
-            return '/';
-        }
-
-        return absolutePath.substr(0, slashIndex) + '/';
-    }
-
-    function internalAppendCssReference(viewName, href) {
-        if (document.querySelectorAll('link[data-style="' + viewName + '"][href="' + href + '"]').length) {
-            return;
-        }
-
-        var link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.type = 'text/' + getStyleSheetType(href);
-        link.setAttribute('data-style', viewName)
-        link.href = href;
-        try {
-            document.querySelector('head').appendChild(link);
-        } catch (ex) { }
-    }
-
-    function internalAppendCssReferenceAsync(viewName, href) {
-        if (document.querySelectorAll('link[data-style="' + viewName + '"][href="' + href + '"]').length) {
-            return Promise.resolve();
-        }
-
-        return new Promise(function (resolve) {
-            var link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.type = 'text/' + getStyleSheetType(href);
-            link.setAttribute('data-style', viewName);
-            function onReady() {
-                requestAnimationFrame(function () {
-                    resolve();
-                });
-            }
-            link.onload = onReady;
-            link.onerror = onReady;
-            link.href = href;
-            try {
-                document.querySelector('head').appendChild(link);
-            } catch (ex) {
-                resolve();
-            }
-        });
-    }
-
-    function appendCssReferenceAsync(view, style) {
-        var promises = [];
-        if (typeof style == 'boolean') {
-            var href = view + '.css';
-            if (_options.version) {
-                href += '?v=' + _options.version;
-            }
-            promises.push(internalAppendCssReferenceAsync(view, href));
-        } else if (typeof style == 'string') {
-            var href = parseMacroPath(view, style);
-            href = resolveRelativePath(href, getContainingFolder(view));
-            if (_options.version) {
-                if (href.indexOf('>') < 0) {
-                    href += '?v=' + _options.version;
-                } else {
-                    href += '&v=' + _options.version;
-                }
-            }
-            promises.push(internalAppendCssReferenceAsync(view, href));
-        } else if (style instanceof Array) {
-            for (var i = 0; i < style.length; ++i) {
-                if (typeof style[i] != 'string') {
-                    continue;
-                }
-                var href = parseMacroPath(view, style[i]);
-                href = resolveRelativePath(href, getContainingFolder(view));
-                if (_options.version) {
-                    if (href.indexOf('>') < 0) {
-                        href += '?v=' + _options.version;
-                    } else {
-                        href += '&v=' + _options.version;
-                    }
-                }
-                promises.push(internalAppendCssReferenceAsync(view, href));
-            }
-        }
-        return Promise.all(promises);
-    }
-
-    function getStyleSheetType(styleSheetUrl) {
-        var questionMarkIndex = styleSheetUrl.lastIndexOf('?');
-        if (questionMarkIndex >= 0) {
-            styleSheetUrl = styleSheetUrl.substr(0, questionMarkIndex);
-        }
-
-        var dotIndex = styleSheetUrl.lastIndexOf('.');
-        if (dotIndex < 0) {
-            return null;
-        }
-
-        return styleSheetUrl.substr(dotIndex + 1).toLowerCase();
-    }
-
-    function removeCssReference(view) {
-        if (!_options.removeStyleWhenUnmount) {
-            return;
-        }
-
-        var dom = document.querySelectorAll('link[data-style="' + view + '"]');
-        if (dom && dom.length) {
-            for (var i = 0; i < dom.length; ++i) {
-                dom[i].remove();
-            }
-        }
-    }
-
-    function hookMountedAndUnmounted(options, view) {
-        if (!options) {
-            return;
-        }
-
-        if (!options.mounted) {
-            options.mounted = function () { };
-        }
-
-        if (!options.unmounted) {
-            options.unmounted = function () { };
-        }
-
-        if (!options.created) {
-            options.created = function () { };
-        }
-
-        if (options.style || options.skeleton) {
-            var originalCreated = options.created;
-            options.created = function () {
-                if (options.style) {
-                    if (!_css[view]) {
-                        _css[view] = 0;
-                    }
-                    if (_css[view] == 0) {
-                        if (_options.preloadCss) {
-                            this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
-                        } else {
-                            appendCssReference(view, options.style);
-                        }
-                    }
-                    ++_css[view];
-                }
-
-                this.createdPromise = Promise.resolve();
-                var ret = originalCreated.call(this);
-                if (ret instanceof Promise) {
-                    this.createdPromise = ret;
-                    if (options.skeleton) {
-                        var self = this;
-                        var skeletonShowing = false;
-                        var resolved = false;
-                        // Only activate the skeleton if the promise is still pending
-                        // after skeletonDelay ms.  If it resolves faster, skip the
-                        // skeleton entirely to avoid a flash.
-                        var skeletonDelay = typeof options.skeletonDelay === 'number'
-                            ? options.skeletonDelay : 1000;
-                        var skeletonTimer = setTimeout(function () {
-                            if (resolved) return;
-                            skeletonShowing = true;
-                            self.pomeSkeletonCloaked = false;
-                            self.pomeSkeletonLoading = true;
-                            // Skeleton is now visible. If delayOpen is also set, kick
-                            // off its animation so it's primed when skeleton disappears.
-                            if (options.delayOpen) {
-                                self.$nextTick(function () {
-                                    requestAnimationFrame(function () {
-                                        requestAnimationFrame(function () {
-                                            self.pomeDelayOpening = false;
-                                        });
-                                    });
-                                    setTimeout(function () {
-                                        self.pomeDelayOpened = false;
-                                    }, options.delayOpen);
-                                });
-                            }
-                        }, skeletonDelay);
-                        ret.then(function () {
-                            resolved = true;
-                            clearTimeout(skeletonTimer);
-                            self.pomeSkeletonCloaked = false;
-                            self.pomeSkeletonLoading = false;
-                            // Fast path: resolved before skeleton appeared �?still need
-                            // to run the delayOpen animation now.
-                            if (!skeletonShowing && options.delayOpen) {
-                                self.$nextTick(function () {
-                                    requestAnimationFrame(function () {
-                                        requestAnimationFrame(function () {
-                                            self.pomeDelayOpening = false;
-                                        });
-                                    });
-                                    setTimeout(function () {
-                                        self.pomeDelayOpened = false;
-                                    }, options.delayOpen);
-                                });
-                            }
-                        }).catch(function (err) {
-                            resolved = true;
-                            clearTimeout(skeletonTimer);
-                            self.pomeSkeletonCloaked = false;
-                            self.pomeSkeletonLoading = false;
-                            console.error('[SKELETON] created Promise REJECTED:', err);
-                        });
-                    }
-                } else if (options.skeleton) {
-                    // Sync created �?nothing to wait for, ensure skeleton is off.
-                    this.pomeSkeletonCloaked = false;
-                    this.pomeSkeletonLoading = false;
-                    // created() didn't return a Promise, so the skeleton
-                    // timer / promise path above won't run.  We still need
-                    // to kick off the delayOpen animation that was deferred
-                    // under the assumption that skeleton would manage it.
-                    if (options.delayOpen) {
-                        var self = this;
-                        self.$nextTick(function () {
-                            requestAnimationFrame(function () {
-                                requestAnimationFrame(function () {
-                                    self.pomeDelayOpening = false;
-                                });
-                            });
-                            setTimeout(function () {
-                                self.pomeDelayOpened = false;
-                            }, options.delayOpen);
-                        });
-                    }
-                }
-
-                return ret;
-            };
-        }
-
-        var originalMounted = options.mounted;
-        options.mounted = function () {
-            // CSS cloak: hide element until CSS is fully loaded
-            if (_options.preloadCss && this._cssLoadPromise) {
-                _ensureCssCloakStyle();
-                var el = this.$el;
-                if (el && el.nodeType === 1) {
-                    el.classList.add('_pome-css-cloak');
-                    this._cssLoadPromise.then(function () {
-                        el.classList.remove('_pome-css-cloak');
-                    });
-                }
-            }
-
-            // Remove opening class if needed
-            if (options.delayOpen && !options.skeleton) {
-                var self = this;
-                var delayOpenFunc = function () {
-                    requestAnimationFrame(function () {
-                        requestAnimationFrame(function () {
-                            if (!self.$el || !self.$el.parentNode) return;
-                            var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
-                            for (var i = 0; i < doms.length; ++i) {
-                                doms[i].classList.remove('_pome-ui-opening');
-                            }
-                        });
-                    });
-
-                    setTimeout(function () {
-                        if (!self.$el || !self.$el.parentNode) return;
-                        var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
-                        for (var i = 0; i < doms.length; ++i) {
-                            doms[i].classList.remove('_pome-ui-opened');
-                        }
-                    }, options.delayOpen);
-                };
-
-                (self.createdPromise || Promise.resolve()).then(function () {
-                    delayOpenFunc();
-                });
-            }
-
-            return originalMounted.call(this);
-        };
-
-        var originalUnmounted = options.unmounted;
-        options.unmounted = function () {
-            if (options.style) {
-                if (!_css[view]) {
-                    return originalUnmounted.call(this);
-                }
-
-                --_css[view];
-                if (_css[view] <= 0) {
-                    removeCssReference(view);
-                    delete _css[view];
-                }
-            }
-            return originalUnmounted.call(this);
-        };
-    }
-
-    function pomeUiPassTitle(arr) {
-        if (arr) {
-            this.pomeUiSubTitles = arr;
-        }
-
-        var parents = JSON.parse(JSON.stringify(this.pomeUiSubTitles));
-        if (this.title) {
-            parents.push(this.title);
-        }
-
-        var p = this.$parent;
-        while (p && p != window && !p.pomeUiPassTitle) {
-            p = p.$parent;
-        }
-
-        if (p && p != window && p.pomeUiPassTitle) {
-            p.pomeUiPassTitle(parents);
-        } else {
-            document.querySelector('title').innerHTML = _options.generateTitle(parents);
-        }
-    }
-
-    function UpdateLayout() {
-        var mobile = _options.mobile();
-        var params = {};
-        var route = null;
-        var layout = _options.layout;
-
-        route = MatchRoute();
-        params = generateParametersFromRoute();
-
-        var _def;
-        var viewName = route.view + (_options.mobile() ? '.m' : '');
-        return _httpGet(route.view + '.js').then(function (def) {
-            _def = def;
-            var modules = null;
-            var _opt;
-            var Page = function (options) {
-                _opt = options;
-                layout = options.layout || layout;
-                modules = options.modules;
-            };
-
-            var require = _createRequire(route.view);
-            def = eval(def + '\r\n//# sourceURL=' + route.view + '.js');
-            hookMountedAndUnmounted(_opt, viewName);
-            return _resolveModules(modules, viewName);
-        }).then(function () {
-            if (exports.root() && exports.root().$layout) {
-                if (exports.root().$layout === layout) {
-                    _parseQueryString(params);
-                    var fields = Object.getOwnPropertyNames(params);
-                    for (var i = 0; i < fields.length; ++i) {
-                        var val = params[fields[i]];
-                        exports.root()[fields[i]] = val;
-                    }
-                    
-                    return exports.root().$containers[0].open(route.view, params).then(function () {
-                        var promise = Promise.resolve();
-                        if (typeof exports.root().$.$onUpdating == 'function') {
-                            var result = exports.root().$.$onUpdating.call(exports.root());
-                            if (result instanceof Promise) {
-                                promise = promise.then(() => result);
-                            }
-                        }
-                        return promise;
-                    });
-                }
-
-                exports.root().$.appContext.app.unmount();
-            }
-
-            if (layout) {
-                var layoutName = layout + (mobile ? '.m' : '');
-                var _layoutHtml;
-                var _layoutSkeletonFileHtml; // hoisted so LayoutNext closure can access it
-                // Load layout .html, .js and optional .skeleton.html all in parallel
-                return Promise.all([
-                    _httpGet(layoutName + '.html'),
-                    _httpGet(layout + '.js'),
-                    _httpGetSkeletonFile(layoutName + '.skeleton.html')
-                ]).then(function (layoutResults) {
-                    _layoutHtml = layoutResults[0];
-                    var js = layoutResults[1];
-                    _layoutSkeletonFileHtml = layoutResults[2]; // null when absent
-                    return js;
-                }).then(function (js) {
-                    var _opt = null;
-                    var Layout = function (options) {
-                        _opt = options;
-                    };
-                    var LayoutNext = function (options) {
-                        _hookSetup(options);
-
-                        if (!_opt.template) {
-                            _opt.template = _sanitizeTemplate(_layoutHtml);
-                        }
-                        _patchComponent(layout, _opt);
-                        _layoutHtml = _opt.template;
-                        var htmlBeginTagIndex = _layoutHtml.indexOf('<html');
-                        var htmlBeginTagIndex2 = _layoutHtml.indexOf('>', htmlBeginTagIndex);
-                        _layoutHtml = _layoutHtml.substr(htmlBeginTagIndex2 + 1);
-                        var htmlEndTagIndex = _layoutHtml.lastIndexOf('</html>');
-                        _layoutHtml = _layoutHtml.substr(0, htmlEndTagIndex);
-                        document.querySelector('html').innerHTML = _layoutHtml;
-                        _hookData(options, params);
-
-                        var ticks = new Date().getTime();
-                        var appId = 'pomelo-' + ticks;
-                        var containerId = 'container-' + ticks;
-                        var bodyHtml = document.querySelector('body').innerHTML;
-                        var renderBodyRegex = /<render-body\s*(?:\/\s*)?>(?:<\/render-body\s*>)?/i;
-                        var body;
-                        if (renderBodyRegex.test(bodyHtml)) {
-                            body = bodyHtml.replace(renderBodyRegex, '<div id="' + containerId + '"></div>');
-                        } else {
-                            console.error('[PomeUI] <render-body> tag not found in layout body innerHTML. The container element will not be created.');
-                            console.error('[PomeUI] Body innerHTML (first 500 chars):', bodyHtml.substring(0, 500));
-                            body = bodyHtml;
-                        }
-                        // Layout skeleton: defer generation to Root→_loadComponents so the
-                        // component skeleton registry is fully populated before we generate HTML.
-                        if (options.skeleton) {
-                            _ensureSkeletonStyle();
-                            var bodyEl = document.querySelector('body');
-                            var bodyClass = bodyEl.getAttribute('class') || '';
-                            var bodyInlineStyle = bodyEl.getAttribute('style') || '';
-                            var bodyComputed = window.getComputedStyle(bodyEl);
-                            var overlayStyle = bodyInlineStyle;
-                            if (bodyComputed.display && bodyComputed.display.indexOf('flex') >= 0) {
-                                if (overlayStyle) overlayStyle += ';';
-                                overlayStyle += 'display:' + bodyComputed.display
-                                    + ';flex-direction:' + bodyComputed.flexDirection
-                                    + ';align-items:' + bodyComputed.alignItems;
-                            } else {
-                                if (overlayStyle) overlayStyle += ';';
-                                overlayStyle += 'display:flex;flex-direction:row;align-items:stretch';
-                            }
-                            var skeletonBody = body.replace('<div id="' + containerId + '"></div>', '<div style="flex:1;min-width:0"></div>');
-                            // Store pending data; Root will inject the overlay div after
-                            // _loadComponents so registered component skeletons are available.
-                            options._pomeLayoutSkeleton = {
-                                appId: '#' + appId,
-                                bodyClass: bodyClass,
-                                overlayStyle: overlayStyle,
-                                skeletonBody: skeletonBody,
-                                // Priority: .skeleton.html file > inline string in JS
-                                skeletonOverride: _layoutSkeletonFileHtml
-                                    || (typeof options.skeleton === 'string' ? options.skeleton : null)
-                            };
-                        }
-                        _ensureVueCloakStyle();
-                        document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + body + '</div>';
-                        if (!document.getElementById(containerId)) {
-                            console.error('[PomeUI] Container element #' + containerId + ' not found in DOM immediately after setting body innerHTML. The <render-body> replacement likely failed.');
-                        }
-                        options.template = null;
-                        // Hook mounted
-                        if (!options.mounted) {
-                            options.mounted = function () { };
-                        }
-
-                        mountedFunc = options.mounted;
-                        options.mounted = function () {
-                            var containerEl = document.getElementById(containerId);
-                            if (!containerEl) {
-                                console.error('[PomeUI] Container element #' + containerId + ' not found in DOM at mounted hook. Vue may have removed it during template compilation/render.');
-                                console.error('[PomeUI] Mount element innerHTML (first 500 chars):', document.querySelector('#' + appId)?.innerHTML?.substring(0, 500));
-                            }
-                            var container = this.$container('#' + containerId);
-                            container.open(route.view, params);
-                            return mountedFunc.call(this);
-                        };
-
-                        Root(options, '#' + appId, layout);
-                    };
-
-                    var require = _createRequire(layout);
-                    eval(js + '\r\n//# sourceURL=' + layout + ".js");
-                    hookMountedAndUnmounted(_opt, layoutName);
-                    // Resolve template option for Layout (could be .html path or inline HTML)
-                    var layoutTemplatePromise = _opt.template
-                        ? _resolveTemplateOption(_opt.template)
-                        : Promise.resolve(null);
-                    return Promise.all([_resolveModules(_opt.modules, layout), layoutTemplatePromise]).then(function (layoutResolveResults) {
-                        var resolvedLayoutTemplate = layoutResolveResults[1];
-                        if (resolvedLayoutTemplate) {
-                            _opt.template = resolvedLayoutTemplate;
-                        }
-                        LayoutNext(_opt);
-                        return Promise.resolve();
-                    });
-                });
-            } else {
-                var viewName = route.view + (_options.mobile() ? '.m' : '');
-                return _applyLayoutHtml(route.view).then(function (appId) {
-                    var _opt = null;
-                    var components = null;
-                    var Page = function (options) {
-                        _opt = options;
-                    };
-                    var PageNext = function (options) {
-                        modules = options.modules;
-                        components = options.components || [];
-                        Root(options, '#' + appId, route.view);
-                    };
-
-                    var require = _createRequire(route.view);
-                    eval(_def + '\r\n//# sourceURL=' + route.view + '.js');
-
-                    if (!_opt) {
-                        _opt = {};
-                    }
-
-                    _hookData(_opt, params);
-                    hookMountedAndUnmounted(_opt, viewName);
-                    _patchComponent(viewName, _opt);
-                    return _resolveModules(_opt.modules, viewName).then(function () {
-                        PageNext(_opt);
-                        return Promise.resolve();
-                    });
-                });
-            }
-        }).then(function () {
-            ForceUpdate();
-        }).catch(function (err) {
-            console.error(err);
-        })
-    };
-
-    function Redirect(url) {
-        var title = null;
-        var titleTag = document.querySelector('title');
-        if (titleTag) {
-            title = titleTag.innerText;
-        }
-        window.history.pushState(null, title, url);
-        UpdateLayout();
-    }
-
-    function Replace(url) {
-        var title = null;
-        var titleTag = document.querySelector('title');
-        if (titleTag) {
-            title = titleTag.innerText;
-        }
-        window.history.replaceState(null, title, url);
-        UpdateLayout();
-    }
-
-
-    function LoadScript(url) {
-        if (_httpCached(url)) {
-            with (window) {
-                if (PomeloModule) {
-                    var require = function (script, workingDirectory, mode) {
-                        workingDirectory = workingDirectory || PomeloModule.getContainingFolder(url);
-                        return PomeloModule.require(script, workingDirectory, mode);
-                    };
-                }
-
-                eval(_cache[url] + '\r\n//# sourceURL=' + url);
-            }
-            return Promise.resolve();
-        }
-
-        return _httpGet(url).then(function (js) {
-            with (window) {
-
-                if (PomeloModule) {
-                    var require = function (script, workingDirectory, mode) {
-                        workingDirectory = workingDirectory || PomeloModule.getContainingFolder(url);
-                        return PomeloModule.require(script, workingDirectory, mode);
-                    };
-                }
-
-                eval(js + '\r\n//# sourceURL=' + url);
-            }
-            _cache[url] = js;
-            return Promise.resolve();
-        }).catch(err => {
-            console.error('Load module ' + url + ' failed.');
-            console.error(err);
-        });
-    }
-
-    function resolveRelativePathPlain(url) {
-        if (url.indexOf('./') == -1 && url.indexOf('../') == -1) {
-            return url;
-        }
-
-        var index = url.lastIndexOf('../');
-        if (index == 0) {
-            return url;
-        }
-
-        url = url.replaceAll('/./', '/');
-        if (url.indexOf('./') == 0) {
-            url = url.substr(2);
-        }
-
-        if (index) {
-            var w = url.substr(0, index);
-            var f = url.substr(index);
-            return resolveRelativePath(f, w);
-        }
-    }
-
-    function resolveRelativePath(file, workingDirectory) {
-        if (file.length && (file[0] == '/') || file.indexOf('http') == 0) {
-            return resolveRelativePathPlain(file);
-        }
-
-        if (file.length && file[0] != '.') {
-            return resolveRelativePathPlain(workingDirectory + file);
-        }
-
-        if (file.indexOf('./') == 0) {
-            return resolveRelativePath(file.substr(2), workingDirectory);
-        }
-
-        if (file.indexOf('../') == 0) {
-            file = file.substr(3);
-            workingDirectory = getContainingFolder(workingDirectory.substr(0, workingDirectory.length - 1));
-            return resolveRelativePath(file, workingDirectory);
-        }
-    }
-
-    function _loadComponents(components, viewName) {
-        var ret = [];
-        if (!components.length) {
-            return Promise.resolve(ret);
-        }
-        var workingDirectory = getContainingFolder(viewName || '/');
-        return Promise.all(components.map(function (c) {
-            c = resolveRelativePath(parseMacroPath(viewName, c), workingDirectory);
-            var componentPath = c;
-            var _html;
-            var _name;
-            var _opt;
-            // Load .html, .js and optional .skeleton.html in parallel
-            return Promise.all([
-                _httpGet(c + '.html'),
-                _httpGet(c + '.js'),
-                _httpGetSkeletonFile(c + '.skeleton.html')
-            ]).then(function (results) {
-                _html = results[0];
-                var comJs = results[1];
-                var skeletonFileHtml = results[2]; // null when file does not exist
-                var Component = function (name, options) {
-                    _opt = options;
-                    _name = name;
-                };
-
-                var require = _createRequire(c);
-                eval(comJs + '\r\n//# sourceURL=' + c + ".js");
-                hookMountedAndUnmounted(_opt, c);
-                // Resolve template option for Component (could be .html path or inline HTML)
-                var compTemplatePromise = _opt.template
-                    ? _resolveTemplateOption(_opt.template)
-                    : Promise.resolve(null);
-                return compTemplatePromise.then(function (resolvedCompTemplate) {
-                    if (resolvedCompTemplate) {
-                        _opt.template = resolvedCompTemplate;
-                    } else if (!_opt.template) {
-                        _opt.template = _sanitizeTemplate(_html);
-                    }
-                    _hookSetup(_opt);
-                    _patchComponent(c, _opt, true);
-                    // Register the component's skeleton BEFORE wrapping the template,
-                    // so _generateSkeletonHtml still sees the clean original template.
-                    _registerComponentSkeleton(_name, _opt, _opt.template, skeletonFileHtml);
-                    _wrapTemplateWithSkeleton(_opt);
-                    _hookData(_opt);
-                    var cssPreloadPromise = Promise.resolve();
-                    if (_options.preloadCss && _opt.style) {
-                        cssPreloadPromise = appendCssReferenceAsync(c, _opt.style);
-                    }
-                    return Promise.all([cssPreloadPromise, _resolveModules(_opt.modules, c)]);
-                }); // end of compTemplatePromise.then
-            }).then(function () {
-                // Recursively load sub-components for this component
-                var subComponentRefs = _opt.components || [];
-                return _loadComponents(subComponentRefs, componentPath);
-            }).then(function (subComponents) {
-                ret.push({ name: _name, options: _opt });
-                for (var i = 0; i < subComponents.length; ++i) {
-                    if (!ret.some(function (x) { return x.name == subComponents[i].name; })) {
-                        ret.push(subComponents[i]);
-                    }
-                }
-                return Promise.resolve();
-            });
-        })).then(function () {
-            return Promise.resolve(ret);
-        });
-    }
-
-    function _loadDirectives(directives, viewName) {
-        var ret = [];
-        if (!directives.length) {
-            return Promise.resolve(ret);
-        }
-        var workingDirectory = getContainingFolder(viewName || '/');
-        var viewName;
-        var subComponentRefs = [];
-        return Promise.all(directives.map(function (c) {
-            c = resolveRelativePath(parseMacroPath(viewName, c), workingDirectory);
-            viewName = c;
-            var _name;
-            var _opt;
-            return _httpGet(c + ".js").then(function (comJs) {
-                var Directive = function (name, options) {
-                    _opt = options;
-                    _name = name;
-                };
-
-                var require = _createRequire(c);
-                eval(comJs + '\r\n//# sourceURL=' + c + ".js");
-                ret.push({ name: _name, options: _opt });
-                return Promise.resolve();
-            })
-        })).then(function () {
-            return Promise.resolve(ret);
-        });
-    }
-
-    exports._addins = [];
-
-    function _patchComponent(view, opt, isComponent) {
-        prepared = true;
-        if (!opt.data) {
-            opt.data = function () {
-                return {};
-            };
-        }
-
-        if (!opt.style) {
-            opt.style = [];
-        }
-
-        if (!opt.style instanceof Array) {
-            if (opt.style instanceof String) {
-                opt.style = [opt.style];
-            } else {
-                opt.style = ['@(css)'];
-            }
-        }
-
-        if (!opt.components) {
-            opt.components = [];
-        }
-
-        if (!opt.created) {
-            opt.created = function () { };
-        }
-
-        if (!opt.mounted) {
-            opt.mounted = function () { };
-        }
-
-        if (!opt.unmounted) {
-            opt.unmounted = function () { };
-        }
-
-        if (!opt.destroyed) {
-            opt.destroyed = function () { };
-        }
-
-        if (!opt.watch) {
-            opt.watch = {};
-        }
-
-        if (!opt.computed) {
-            opt.computed = {};
-        }
-
-        let func1 = opt.data;
-        opt.data = function (app) {
-            var data = func1.call(this, app);
-            var data2 = {};
-            if (!isComponent) {
-                data2.pomeUiSubTitles = [];
-            }
-            if (opt.skeleton) {
-                // Start hidden; skeleton is only shown after skeletonDelay ms
-                // to avoid a flash when loading completes quickly.
-                data2.pomeSkeletonLoading = false;
-                // Cloak: hide real content until skeleton appears or data loads,
-                // preventing a flash of uninitialized content during the delay.
-                data2.pomeSkeletonCloaked = true;
-            }
-            if (opt.skeleton && opt.delayOpen) {
-                data2.pomeDelayOpened = true;
-                data2.pomeDelayOpening = true;
-            }
-            _combineObject(data2, data);
-            return data;
-        }
-
-        if (!opt.methods) {
-            opt.methods = {};
-        }
-
-        if (!isComponent) {
-            opt.methods.pomeUiPassTitle = pomeUiPassTitle;
-
-            if (!opt.watch) {
-                opt.watch = {};
-            }
-
-            if (!opt.watch.title) {
-                opt.watch.title = function () { };
-            }
-
-
-            _chainHook(opt.watch, 'title', function () {
-                this.pomeUiPassTitle();
-            });
-        }
-
-        for (let i = 0; i < exports._addins.length; ++i) {
-            let v = exports._addins[i].view;
-            let addin = exports._addins[i].opt;
-            if (v != '*' && view != v) {
-                continue;
-            }
-
-            if (addin.data) {
-                let func2 = opt.data;
-                opt.data = function (app) {
-                    var data = func2.call(this, app);
-                    var data2 = {};
-                    try {
-                        data2 = addin.data.call(this, app);
-                    } catch (ex) {
-                        console.error(ex);
-                    }
-                    _combineObject(data2, data);
-                    return data;
-                }
-            }
-
-            if (addin.style) {
-                if (addin.style instanceof Boolean) {
-                    addin.style = ['@(css)'];
-                }
-
-                if (addin.style instanceof String) {
-                    addin.style = [addin.style];
-                }
-
-                addin.style.forEach(function (s) {
-                    if (!opt.style) {
-                        opt.style = [];
-                    }
-                    if (typeof opt.style == 'boolean') {
-                        opt.style = ['@(css)'];
-                    }
-                    if (!opt.style.some(x => x == s)) {
-                        opt.style.push(s);
-                    }
-                });
-            }
-
-            if (addin.components) {
-                addin.components.forEach(function (c) {
-                    if (!opt.components.some(x => x == c)) {
-                        opt.components.push(c);
-                    }
-                });
-            }
-
-            if (addin.layout) {
-                opt.layout = addin.layout;
-            }
-
-            if (addin.props) {
-                if (!opt.props) {
-                    opt.props = [];
-                }
-
-                addin.props.forEach(function (p) {
-                    if (!opt.props.some(x => x == p)) {
-                        opt.props.push(p);
-                    }
-                });
-            }
-
-            if (addin.watch) {
-                var properties = Object.getOwnPropertyNames(addin.watch);
-                properties.forEach(function (key) {
-                    var _originalWatch = opt.watch[key];
-                    opt.watch[key] = function (a, b) {
-                        _originalWatch.invoke(this, a, b);
-                        try {
-                            addin.watch[key].invoke(this, a, b);
-                        } catch (ex) {
-                            console.error(ex);
-                        }
-                    } 
-                });
-            }
-
-            if (addin.computed) {
-                var properties = Object.getOwnPropertyNames(addin.computed);
-                properties.forEach(function (key) {
-                    opt.computed[key] = addin.computed[key];
-                });
-            }
-
-            if (addin.methods) {
-                var setup = opt.setup || function (props, context) {
-                };
-
-                opt.setup = function (props, context) {
-                    setup(props, context);
-                    var methods = {};
-                    var originMethods = Object.getOwnPropertyNames(opt.methods);
-                    originMethods.forEach(function (m) {
-                        methods[m] = opt.methods[m];
-                    });
-                    var instance = Vue.getCurrentInstance();
-                    instance.$baseMethods = methods;
-                };
-
-                var addinMethods = Object.getOwnPropertyNames(addin.methods);
-                addinMethods.forEach(function (m) {
-                    opt.methods[m] = addin.methods[m];
-                });
-            }
-
-            if (addin.created) {
-                _chainHook(opt, 'created', addin.created);
-            }
-
-            if (addin.mounted) {
-                _chainHook(opt, 'mounted', addin.mounted);
-            }
-
-            if (addin.unmounted) {
-                _chainHook(opt, 'unmounted', addin.unmounted);
-            }
-
-            if (addin.destroyed) {
-                _chainHook(opt, 'destroyed', addin.destroyed);
-            }
-
-            if (addin.template) {
-                if (addin.template instanceof Function) {
-                    if (opt.template) {
-                        if (opt.template.indexOf('<html') >= 0) {
-                            var template = new DOMParser().parseFromString(_sanitizeTemplate(opt.template), 'text/html');
-                            addin.template(template);
-                            opt.template = new XMLSerializer().serializeToString(template);
-                        } else {
-                            opt.template = `<pome-ui-template>${opt.template}</pome-ui-template>`
-                            var template = new DOMParser().parseFromString(_sanitizeTemplate(opt.template), 'text/html');
-                            addin.template(template);
-                            opt.template = new XMLSerializer().serializeToString(template);
-                            opt.template = opt.template.substr(opt.template.indexOf('<pome-ui-template>') + '<pome-ui-template>'.length);
-                            opt.template = opt.template.substr(0, opt.template.indexOf('</pome-ui-template>'));
-                        }
-                    }
-                } else {
-                    opt.template = addin.template;
-                }
-            }
-        }
-
-        if (!isComponent) {
-            _chainHook(opt, 'created', function () {
-                this.pomeUiPassTitle();
-            });
-
-            _chainHook(opt, 'unmounted', function () {
-                this.pomeUiPassTitle([]);
-            });
-        }
-    }
-
-    function _patchTemplate(view, html) {
-        for (let i = 0; i < exports._addins.length; ++i) {
-            let v = exports._addins[i].view;
-            let addin = exports._addins[i].opt;
-            if (v != '*' && view != v) {
-                continue;
-            }
-
-            if (addin.template) {
-                if (addin.template instanceof Function) {
-                    if (html.indexOf('<html') >= 0) {
-                        var template = new DOMParser().parseFromString(_sanitizeTemplate(html), 'text/html');
-                        addin.template(template);
-                        html = new XMLSerializer().serializeToString(template);
-                    } else {
-                        html = `<pome-ui-template>${html}</pome-ui-template>`
-                        var template = new DOMParser().parseFromString(_sanitizeTemplate(html), 'text/html');
-                        addin.template(template);
-                        html = new XMLSerializer().serializeToString(template);
-                        html = html.substr(html.indexOf('<pome-ui-template>') + '<pome-ui-template>'.length);
-                        html = html.substr(0, html.indexOf('</pome-ui-template>'));
-                    }
-                } else {
-                    html = addin.template;
-                }
-            }
-        }
-        return html;
-    }
-
-    function UseAddin(addinUrl) {
-        var Addin = function (view, opt) {
-            exports._addins.push({view, opt});
-        };
-
-        var js = _options.httpGetSync(addinUrl);
-        eval(js);
-    }
-
-
-    function UseInlineAddin(script) {
-        var Addin = function (view, opt) {
-            exports._addins.push({ view, opt });
-        };
-
-        eval(script);
-    }
-
-    function Backward() {
-        window.history.back();
-    }
-
-    exports.root = root;
-    exports.useConfig = UseConfig;
-    exports.mapRoute = MapRoute;
-    exports.matchRoute = MatchRoute;
-    exports.updateLayout = UpdateLayout;
-    exports.redirect = Redirect;
-    exports.replace = Replace;
-    exports.backward = Backward;
-    exports.loadScript = LoadScript;
-    exports.forceUpdate = ForceUpdate;
-    exports.mount = mount;
-    exports.useRoutes = useRoutes;
-    exports.useAddin = UseAddin;
-    exports.useInlineAddin = UseInlineAddin;
-
-    return exports;
-};
-
+// Copyright (c) Yuko(Yisheng) Zheng. All rights reserved.
+// Licensed under the GPL v3. See LICENSE in the project root for license information.
+
+window.Vue = Vue;
+
+function build(options, exports) {
+    if (typeof exports == 'undefined') {
+        exports = {};
+    }
+
+    // Options
+    var _options = {
+        resolveModulesParallelly: true,
+        removeStyleWhenUnmount: false,
+        preloadCss: true,
+        mobile: function () {
+            return false;
+        },
+        httpGet: function (url) {
+            return fetch(url);
+        },
+        httpGetSync: function (url) {
+            if (useRelativePath) {
+                if (url.length && url[0] == '/') {
+                    url = url.substr(1);
+                }
+            }
+            var xhr = new XMLHttpRequest();
+            xhr.open('get', url, false);
+            xhr.send();
+            return xhr.responseText;
+        },
+        onNotFound: function (url, options) {
+            if (url.indexOf('/404') == 0) {
+                throw 'No not-found template found';
+            }
+            if (options) {
+                return Redirect('/404?' + _serializeOptionsToUrl(options));
+            } else {
+                return Redirect('/404');
+            }
+        },
+        reuseContainerActiveView(viewName) {
+            return true;
+        },
+        callCreatedWhenReuseContainerActiveView(viewName) {
+            return true;
+        },
+        callMountedWhenReuseContainerActiveView(viewName) {
+            return true;
+        },
+        callUnmountedWhenReuseContainerActiveView(viewName) {
+            return true;
+        },
+        resetDataWhenReuseContainerActiveView(viewName) {
+            return true;
+        },
+        generateTitle(titles) {
+            return titles.join(' - ');
+        }
+    };
+
+    _combineObject(options, _options);
+
+    // Common
+    var _cache = {};
+
+    var _css = {};
+
+    var _cssCloakInjected = false;
+    function _ensureCssCloakStyle() {
+        if (_cssCloakInjected) return;
+        _cssCloakInjected = true;
+        var style = document.createElement('style');
+        style.textContent = '._pome-css-cloak{visibility:hidden!important}';
+        document.head.appendChild(style);
+    }
+
+    var _vueCloakInjected = false;
+    function _ensureVueCloakStyle() {
+        if (_vueCloakInjected) return;
+        _vueCloakInjected = true;
+        var style = document.createElement('style');
+        style.textContent = '._pome-vue-cloak{display:none!important}';
+        document.head.appendChild(style);
+    }
+
+    function _ensureSkeletonStyle() {
+        // pome-skeleton.css must be referenced by the host page manually.
+        // This function is kept as a hook point for future use.
+    }
+
+    // Registry: kebab-name �?pre-rendered skeleton HTML string
+    var _componentSkeletonRegistry = {};
+
+    function _toKebabCase(name) {
+        // ScalableSidebar �?scalable-sidebar, menuBar �?menu-bar
+        return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+
+    function _registerComponentSkeleton(name, opt, rawHtml, skeletonFileHtml) {
+        // skeletonFileHtml: content of <component>.skeleton.html (takes top priority)
+        // opt.skeleton === string: inline HTML declared in the JS
+        // opt.skeleton === true: auto-generate from rawHtml
+        var hasFile    = !!skeletonFileHtml;
+        var hasInline  = opt && typeof opt.skeleton === 'string';
+        var hasAuto    = opt && opt.skeleton === true;
+        if (!hasFile && !hasInline && !hasAuto) return;
+        var kebab = _toKebabCase(name);
+        var skHtml = hasFile   ? skeletonFileHtml
+                   : hasInline ? opt.skeleton
+                   : _generateSkeletonHtml(rawHtml || (opt && opt.template) || '');
+        _componentSkeletonRegistry[kebab] = skHtml;
+    }
+
+    // --- Extract a plain numeric value from a bound attribute like :default-width="230" ---
+    function _extractBoundNumber(el, attr) {
+        var val = el.getAttribute(':' + attr);
+        if (!val) return null;
+        var m = val.match(/^(\d+(?:\.\d+)?)/);
+        return m ? m[1] : null;
+    }
+
+    // --- Known HTML tags for skeleton (custom components will be unwrapped) ---
+    var _knownHtmlTags = null;
+    function _isKnownHtmlTag(tag) {
+        if (!_knownHtmlTags) {
+            _knownHtmlTags = {};
+            'div,span,p,a,h1,h2,h3,h4,h5,h6,ul,ol,li,table,thead,tbody,tfoot,tr,td,th,colgroup,col,img,video,canvas,iframe,svg,form,input,textarea,select,option,button,label,section,article,aside,header,footer,nav,main,figure,figcaption,blockquote,pre,code,em,strong,i,b,u,small,sub,sup,br,hr,dl,dt,dd,details,summary,fieldset,legend,caption,abbr,cite,mark,time,address'.split(',').forEach(function(t) { _knownHtmlTags[t] = true; });
+        }
+        return !!_knownHtmlTags[tag];
+    }
+
+    function _generateSkeletonHtml(templateHtml) {
+        if (!templateHtml) return '';
+        var html = templateHtml;
+        // Remove Vue mustache expressions �?replace with non-breaking space
+        html = html.replace(/\{\{[\s\S]*?\}\}/g, '\u00A0');
+        // Parse as DOM
+        var doc = new DOMParser().parseFromString(
+            '<div id="_pome-sk-wrap">' + html + '</div>', 'text/html'
+        );
+        var root = doc.getElementById('_pome-sk-wrap');
+        if (!root) return '';
+        // Pass 1 �?structural: unwrap <template> slots, replace custom elements,
+        //   clone v-for rows, remove v-else branches
+        _skeletonStructurePass(root, doc);
+        // Pass 2 �?cleanup: strip Vue directives, replace text with skeleton blocks
+        _skeletonCleanupPass(root);
+        return root.innerHTML;
+    }
+
+    function _wrapTemplateWithSkeleton(opt) {
+        if (!opt.skeleton || !opt.template) return;
+        _ensureSkeletonStyle();
+        var skeletonHtml = typeof opt.skeleton === 'string'
+            ? opt.skeleton
+            : _generateSkeletonHtml(opt.template);
+
+        var inner = '<template v-if="!pomeSkeletonLoading && !pomeSkeletonCloaked">' + opt.template
+            + '</template><div v-if="pomeSkeletonLoading" class="_pome-skeleton">'
+            + skeletonHtml + '</div>';
+
+        if (opt.delayOpen) {
+            // Wrap everything in a single div with reactive delayOpen classes
+            // so the delayOpen animation applies to both skeleton and real content.
+            opt.template = '<div :class="{\'_pome-ui-opened\': pomeDelayOpened, \'_pome-ui-opening\': pomeDelayOpening}">' + inner + '</div>';
+        } else {
+            opt.template = inner;
+        }
+    }
+
+    // --- Pass 1: structural transformations ---
+    function _skeletonStructurePass(node, doc) {
+        if (!node || node.nodeType !== 1) return;
+        var i = 0;
+        while (i < node.childNodes.length) {
+            var child = node.childNodes[i];
+            if (child.nodeType !== 1) { i++; continue; }
+            var tag = child.tagName.toLowerCase();
+
+            // 1. Handle <template> tags (Vue slots)
+            if (tag === 'template') {
+                // Determine slot name from #xxx or v-slot:xxx
+                var slotName = null;
+                for (var a = 0; a < child.attributes.length; a++) {
+                    var attr = child.attributes[a].name;
+                    if (attr[0] === '#') { slotName = attr.substring(1); break; }
+                    if (attr.indexOf('v-slot:') === 0) { slotName = attr.substring(7); break; }
+                }
+                // Only keep the default slot (or unnamed templates); discard others
+                if (slotName && slotName !== 'default') {
+                    node.removeChild(child);
+                    continue;
+                }
+                // Unwrap template content into parent
+                if (child.content) {
+                    var tplNodes = Array.from(child.content.childNodes);
+                    for (var j = 0; j < tplNodes.length; j++) {
+                        node.insertBefore(doc.importNode(tplNodes[j], true), child);
+                    }
+                }
+                node.removeChild(child);
+                continue; // re-examine index (new children inserted)
+            }
+
+            // 2. Remove v-else / v-else-if branches entirely
+            if (child.getAttribute('v-else') !== null || child.getAttribute('v-else-if') !== null) {
+                node.removeChild(child);
+                continue;
+            }
+
+            // 3. Handle v-for �?clone element to simulate repeated rows
+            if (child.getAttribute('v-for')) {
+                child.removeAttribute('v-for');
+                var cloneCount = (tag === 'tr') ? 4 : (tag === 'li') ? 3 : 2;
+                var refNode = child.nextSibling;
+                for (var j = 0; j < cloneCount; j++) {
+                    var clone = child.cloneNode(true);
+                    node.insertBefore(clone, refNode);
+                }
+                // fall through to continue processing this element
+            }
+
+            // 4. Replace custom/unknown elements with <div>, keep children
+            if (!_isKnownHtmlTag(tag)) {
+                // Check if this component has declared its own skeleton
+                var registeredSkeleton = _componentSkeletonRegistry[tag];
+                if (registeredSkeleton) {
+                    // Parse the registered skeleton HTML and replace the element with it
+                    var skWrap = doc.createElement('div');
+                    skWrap.innerHTML = registeredSkeleton;
+                    if (child.getAttribute('class')) skWrap.setAttribute('class', child.getAttribute('class'));
+                    var existingStyleReg = child.getAttribute('style') || '';
+                    var styleExtraReg = '';
+                    var defWReg = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                    var minWReg = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                    if (defWReg) styleExtraReg += ';width:' + defWReg + 'px;flex-shrink:0';
+                    if (minWReg) styleExtraReg += ';min-width:' + minWReg + 'px';
+                    var combinedStyleReg = (existingStyleReg + styleExtraReg).replace(/^;+/, '');
+                    if (combinedStyleReg) skWrap.setAttribute('style', combinedStyleReg);
+                    // Replace the custom element with a wrapper containing the skeleton.
+                    // Use a fragment-like approach: move skWrap's children directly
+                    // so we don't add an extra div when the registered HTML already has one.
+                    var skNodes = Array.from(skWrap.childNodes);
+                    if (skNodes.length === 1 && skNodes[0].nodeType === 1) {
+                        var skRoot = skNodes[0];
+                        // Merge class / style from host element onto the single root node
+                        if (child.getAttribute('class')) skRoot.classList && skRoot.setAttribute('class', (skRoot.getAttribute('class') || '') + ' ' + child.getAttribute('class'));
+                        if (combinedStyleReg) skRoot.setAttribute('style', (skRoot.getAttribute('style') ? skRoot.getAttribute('style') + ';' : '') + combinedStyleReg);
+                        node.replaceChild(skRoot, child);
+                        i++;
+                    } else {
+                        while (skWrap.firstChild) node.insertBefore(skWrap.firstChild, child);
+                        node.removeChild(child);
+                        // i stays the same since we removed child and inserted nodes before it
+                    }
+                    continue;
+                }
+
+                var div = doc.createElement('div');
+                if (child.getAttribute('class')) div.setAttribute('class', child.getAttribute('class'));
+
+                // Reconstruct inline style, preserving explicit style + any bound sizing attrs
+                var existingStyle = child.getAttribute('style') || '';
+                var styleExtra = '';
+                // :default-width / default-width �?width + flex-shrink:0 so sidebar-like
+                // components keep their width in the skeleton
+                var defW = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                var minW = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                var maxW = _extractBoundNumber(child, 'max-width') || child.getAttribute('max-width');
+                if (defW) styleExtra += ';width:' + defW + 'px;flex-shrink:0';
+                if (minW) styleExtra += ';min-width:' + minW + 'px';
+                if (maxW) styleExtra += ';max-width:' + maxW + 'px';
+                var combinedStyle = (existingStyle + styleExtra).replace(/^;+/, '');
+                if (combinedStyle) div.setAttribute('style', combinedStyle);
+
+                while (child.firstChild) div.appendChild(child.firstChild);
+                node.replaceChild(div, child);
+                _skeletonStructurePass(div, doc); // recurse into replacement
+                i++;
+                continue;
+            }
+
+            // 5. Recurse into known elements
+            _skeletonStructurePass(child, doc);
+            i++;
+        }
+    }
+
+    // --- Pass 2: cleanup directives, replace text, handle media ---
+    function _skeletonCleanupPass(node) {
+        if (!node) return;
+        if (node.nodeType === 1) {
+            // Strip Vue directives / bindings / event listeners.
+            // Preserve v-show so CSS-driven responsive visibility still works
+            // (the skeleton lives inside a Vue-processed template).
+            var attrsToRemove = [];
+            for (var i = 0; i < node.attributes.length; i++) {
+                var attrName = node.attributes[i].name;
+                if (attrName === 'v-show') continue; // keep v-show for responsive toggling
+                if (attrName.indexOf('v-') === 0 || attrName[0] === '@' || attrName[0] === ':' || attrName[0] === '#') {
+                    attrsToRemove.push(attrName);
+                }
+            }
+            for (var i = 0; i < attrsToRemove.length; i++) {
+                node.removeAttribute(attrsToRemove[i]);
+            }
+            // Remove delayOpen classes
+            node.classList.remove('_pome-ui-opened');
+            node.classList.remove('_pome-ui-opening');
+            // Add shimmer class to leaf-level text containers
+            var tag = node.tagName.toLowerCase();
+            var shimmerTags = {span:1,a:1,p:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,li:1,label:1,button:1,input:1,textarea:1,select:1,dt:1,dd:1,figcaption:1,blockquote:1};
+            if (shimmerTags[tag]) {
+                node.classList.add('_pome-sk-shimmer');
+            }
+            if (tag === 'img') {
+                // Replace img with a shimmer skeleton block that preserves dimensions
+                var imgBlock = node.ownerDocument.createElement('span');
+                imgBlock.className = '_pome-sk-img';
+                // Preserve sizing from class or explicit attributes
+                if (node.getAttribute('class')) imgBlock.className += ' ' + node.getAttribute('class');
+                if (node.getAttribute('width')) imgBlock.style.width = node.getAttribute('width') + (/\d$/.test(node.getAttribute('width')) ? 'px' : '');
+                else imgBlock.style.width = '24px';
+                if (node.getAttribute('height')) imgBlock.style.height = node.getAttribute('height') + (/\d$/.test(node.getAttribute('height')) ? 'px' : '');
+                else imgBlock.style.height = '24px';
+                node.parentNode.replaceChild(imgBlock, node);
+                return; // node replaced, skip children
+            }
+            if (tag === 'video' || tag === 'canvas' || tag === 'iframe') {
+                node.removeAttribute('src');
+                node.removeAttribute('srcset');
+                node.style.backgroundColor = '#e8e8e8';
+                node.style.borderRadius = '4px';
+            }
+        }
+        var children = Array.from(node.childNodes);
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.nodeType === 3) { // text node
+                // \u00A0 comes from mustache replacement �?treat it as content
+                var text = child.textContent.replace(/[\s\u00A0]+/g, '');
+                var hasNbsp = child.textContent.indexOf('\u00A0') >= 0;
+                if (text || hasNbsp) {
+                    var parentTag = child.parentNode && child.parentNode.tagName
+                        ? child.parentNode.tagName.toLowerCase() : '';
+                    var block = child.ownerDocument.createElement('span');
+                    block.className = '_pome-sk-block';
+                    block.innerHTML = '\u00A0';
+                    child.parentNode.replaceChild(block, child);
+                }
+            } else if (child.nodeType === 1) {
+                _skeletonCleanupPass(child);
+            }
+        }
+    }
+
+    function _httpCached(url) {
+        return !!_cache[url];
+    }
+
+    function _httpGet(url) {
+        if (_cache[url]) {
+            return Promise.resolve(_cache[url]);
+        }
+
+        var _url = url;
+        if (_options.version) {
+            if (url.indexOf('?') > 0) {
+                _url += "&";
+            } else {
+                _url += "?"
+            }
+            _url += "v=" + _options.version;
+        }
+
+        return _options.httpGet(_url).then(function (result) {
+            if (result.status > 300 || result.status < 200) {
+                return Promise.reject(result);
+            }
+
+            var txt = result.text();
+            _cache[url] = txt;
+            return Promise.resolve(txt);
+        }).catch(function (err) {
+            return Promise.reject(err);
+        });
+    };
+
+    function _httpExist(url) {
+        return _httpGet(url)
+            .then(function () {
+                return Promise.resolve(true);
+            })
+            .catch(function () {
+                return Promise.resolve(false);
+            });
+    };
+
+    // Fetch a .skeleton.html file, returning null when the file does not
+    // physically exist. Unlike _httpGet, this guards against SPA catch-all
+    // routes that return the app entry page (status 200) for any URL:
+    // if the response body starts with "<!DOCTYPE" or "<html" it is treated
+    // as a missing file and null is returned.
+    // Caches "not found" results so that repeated requests for the same
+    // missing skeleton file do not produce additional network round-trips.
+    var _skeletonNotFoundCache = {};
+    function _httpGetSkeletonFile(url) {
+        if (_skeletonNotFoundCache[url]) {
+            return Promise.resolve(null);
+        }
+        return _httpGet(url).then(function (text) {
+            if (!text) {
+                _skeletonNotFoundCache[url] = true;
+                return null;
+            }
+            var trimmed = text.replace(/^[\s\uFEFF]+/, ''); // strip BOM / whitespace
+            if (/^<!DOCTYPE/i.test(trimmed) || /^<html/i.test(trimmed)) {
+                _skeletonNotFoundCache[url] = true;
+                return null; // SPA fallback page, not a real skeleton file
+            }
+            return text;
+        }).catch(function () {
+            _skeletonNotFoundCache[url] = true;
+            return null;
+        });
+    };
+
+    function _serializeOptionsToUrl(options) {
+        var fields = Object.getOwnPropertyNames(options);
+        var str = '';
+        for (var i = 0; i < fields.length; ++i) {
+            str += encodeURIComponent(fields[i]) + '=' + encodeURIComponent(options[fields[i]]) + '&';
+        }
+
+        if (str[str.length - 1] === '&') {
+            str = str.substr(0, str.length - 1);
+        }
+
+        return str;
+    }
+    function _addHyphenBeforeUppercase(str) {
+        var ret = str.replace(/([A-Z])/g, '-$1').toLowerCase();
+        while (ret.length && ret[0] == '-') {
+            ret = ret.substr(1);
+        }
+        return ret;
+    }
+
+    // Resolve the template option:
+    // - If it ends with '.html', treat it as a path and fetch the HTML content
+    // - Otherwise, treat it as inline HTML code and return it directly
+    function _resolveTemplateOption(template) {
+        if (!template || typeof template !== 'string') {
+            return Promise.resolve(null);
+        }
+        if (template.toLowerCase().endsWith('.html')) {
+            return _httpGet(template).then(function (html) {
+                return _sanitizeTemplate(html);
+            });
+        }
+        return Promise.resolve(template);
+    }
+
+    function _sanitizeTemplate(template) {
+        if (!template instanceof String) {
+            return template;
+        }
+
+        var result = [...template.matchAll(/(?<=:)[a-zA-Z0-9-_]{1,}(?=\=")/g)];
+        for (var i = 0; i < result.length; ++i) {
+            var propertyName = result[i].toString();
+            var sanitizedPropertyName = _addHyphenBeforeUppercase(propertyName);
+            template = template.replaceAll(':' + propertyName + '=', ':' + sanitizedPropertyName + '=');
+        }
+
+        result = [...template.matchAll(/(?<=@)[a-zA-Z0-9-_]{1,}(?=\=")/g)];
+        for (var i = 0; i < result.length; ++i) {
+            var propertyName = result[i].toString();
+            var sanitizedPropertyName = _addHyphenBeforeUppercase(propertyName);
+            template = template.replaceAll('@' + propertyName + '=', '@' + sanitizedPropertyName + '=');
+        }
+
+        return template;
+    }
+
+    var _root = null;
+    function root() {
+        return _root;
+    };
+
+    function _findRoot(instance) {
+        var globalRoot = exports.root();
+        if (globalRoot) return globalRoot;
+        if (!instance) return null;
+        var current = instance;
+        while (current.parent) {
+            current = current.parent;
+        }
+        return current.proxy || current;
+    }
+
+    exports._rules = [];
+
+    function useRoutes(url) {
+        var rules = _options.httpGetSync(url);
+        rules = JSON.parse(rules);
+        if (!exports._rules) {
+            exports._rules = {};
+        }
+        _combineObject(rules, exports._rules);
+    }
+
+    // Internal
+    function _combineObject(src, dest) {
+        if (!src) {
+            return;
+        }
+
+        var fields = Object.getOwnPropertyNames(src);
+        for (var i = 0; i < fields.length; ++i) {
+            dest[fields[i]] = src[fields[i]];
+        }
+    };
+
+    // Helper: Chain an async lifecycle hook onto an existing one
+    function _chainHook(obj, hookName, fn) {
+        var original = obj[hookName] || function () {};
+        obj[hookName] = function () {
+            var self = this;
+            var result = original.call(self);
+            var p = (result && result instanceof Promise) ? result : Promise.resolve();
+            return p.then(function () {
+                var p2;
+                try {
+                    p2 = fn.call(self);
+                } catch (ex) {
+                    console.error(ex);
+                }
+                return (p2 && p2 instanceof Promise) ? p2 : Promise.resolve();
+            });
+        };
+    }
+
+    // Helper: Hook setup() to inject $app and optional extras
+    function _hookSetup(opt, extraFn) {
+        var originalSetup = opt.setup || function () {};
+        opt.setup = function (props, context) {
+            originalSetup(props, context);
+            var instance = Vue.getCurrentInstance();
+            instance.$app = exports;
+            if (extraFn) {
+                extraFn.call(this, instance, opt);
+            }
+            if (!instance.$root) {
+                instance.$root = _findRoot(instance);
+            }
+            if (!instance.$parent) {
+                instance.$parent = (instance.parent && instance.parent.proxy) || instance.$root;
+            }
+        };
+    }
+
+    // Helper: Hook data() to pass exports and optionally merge params/query
+    function _hookData(opt, params) {
+        var originalData = opt.data || function () { return {}; };
+        opt.data = function () {
+            var data = originalData.call(this, exports);
+            if (params) {
+                _combineObject(params, data);
+                _parseQueryString(data);
+            }
+            return data;
+        };
+    }
+
+    // Helper: Create PomeloModule require function
+    function _createRequire(path) {
+        if (!PomeloModule) return undefined;
+        return function (script, workingDirectory, mode) {
+            workingDirectory = workingDirectory || PomeloModule.getContainingFolder(path);
+            return PomeloModule.require(script, workingDirectory, mode);
+        };
+    }
+
+    function _getQueryString() {
+        var ret = window.location.search;
+
+        if (window.location.hash.indexOf('?') > 0) {
+            var hashSearch = window.location.hash.substr(window.location.hash.indexOf('?'));
+            if (ret) {
+                ret += '&' + hashSearch.substr(1);
+            } else {
+                ret = hashSearch;
+            }
+        }
+
+        return ret;
+    }
+
+    function _parseQueryString(dest) {
+        var qs = _getQueryString();
+        if (!qs) {
+            return;
+        }
+
+        var str = qs;
+        if (str[0] == '?') {
+            str = str.substr(1);
+        }
+
+        var splited = str.split('&');
+        for (var i = 0; i < splited.length; ++i) {
+            var splited2 = splited[i].split('=');
+            var key = decodeURIComponent(splited2[0]);
+            var val = decodeURIComponent(splited2[1]);
+            _fillObjectField(key, val, dest);
+        }
+    }
+
+    function _resolveModules(modules, viewName) { // viewName is only for parse macro
+        if (!modules) {
+            return Promise.resolve();
+        }
+
+        if (_options.resolveModulesParallelly) {
+            var promises = [];
+            for (var i = 0; i < modules.length; ++i) {
+                promises.push(LoadScript(parseMacroPath(viewName, modules[i])));
+            }
+
+            return Promise.all(promises);
+        } else {
+            var promise = Promise.resolve(null);
+            var makeFunc = function (module) {
+                return function (result) {
+                    return LoadScript(parseMacroPath(viewName, module));
+                };
+            };
+            for (var i = 0; i < modules.length; ++i) {
+                var m = modules[i];
+                promise = promise.then(makeFunc(m));
+            }
+            return promise;
+        }
+    }
+
+    function _buildApp(url, params, mobile, parent) {
+        var componentObject = {};
+        return _httpGet(url + '.js')
+            .then(function (js) {
+                var Page = function (options) {
+                    componentObject = options;
+                };
+
+                var require = _createRequire(url);
+                try {
+                    eval(js + '\r\n//# sourceURL=' + url + '.js');
+                } catch (evalError) {
+                    console.error('[PomeUI] Failed to eval component JS. URL: ' + url + '.js', evalError);
+                    throw new Error('Failed to eval component JS (' + url + '.js): ' + (evalError.message || evalError));
+                }
+                if (!componentObject || (typeof componentObject !== 'object')) {
+                    console.error('[PomeUI] Component JS did not produce a valid component object. URL: ' + url + '.js', 'Got:', componentObject);
+                    throw new Error('Component JS (' + url + '.js) did not produce a valid component object. Got: ' + String(componentObject));
+                }
+                hookMountedAndUnmounted(componentObject, url + (mobile ? '.m' : ''));
+                return _resolveModules(componentObject.modules || [], url).then(function () {
+                    return Promise.resolve(componentObject)
+                });
+            })
+            .then(function (component) {
+                var htmlPromise;
+                if (mobile) {
+                    htmlPromise = _httpExist(url + '.m.html').then(function (res) {
+                        return _httpGet(url + (res ? '.m.html' : '.html'));
+                    });
+                } else {
+                    htmlPromise = _httpGet(url + '.html');
+                }
+                // Load .skeleton.html in parallel; null if not found
+                var skeletonFilePromise = _httpGetSkeletonFile(url + '.skeleton.html');
+
+                // If component.template is specified, resolve it (could be .html path or inline HTML)
+                var templateOptionPromise = component.template
+                    ? _resolveTemplateOption(component.template)
+                    : Promise.resolve(null);
+
+                return Promise.all([htmlPromise, skeletonFilePromise, templateOptionPromise]).then(function (results) {
+                    var template = results[0];
+                    var skeletonFileHtml = results[1];
+                    var resolvedTemplate = results[2];
+                    if (resolvedTemplate) {
+                        component.template = resolvedTemplate;
+                    } else if (!component.template) {
+                        component.template = _sanitizeTemplate(template);
+                    }
+                    // .skeleton.html file takes top priority over skeleton: true / inline string
+                    if (skeletonFileHtml && component.skeleton) {
+                        component.skeleton = skeletonFileHtml;
+                    }
+                    if (component.delayOpen) {
+                        var dom = new DOMParser().parseFromString(component.template, 'text/html');
+                        var children = dom.querySelector('body').children;
+                        for (var i = 0; i < children.length; ++i) {
+                            if (children[i].tagName.toUpperCase() != 'DIV') {
+                                continue;
+                            }
+                            if (children[i].getAttribute('v-if') != null || children[i].getAttribute('v-else-if') || children[i].getAttribute('v-else')) {
+                                continue;
+                            }
+                            if (component.skeleton) {
+                                // Skeleton mode: delayOpen classes will be added by
+                                // _wrapTemplateWithSkeleton on an outer wrapper div.
+                                // No need to add them to individual children here.
+                            } else {
+                                children[i].classList.add('_pome-ui-opened');
+                                children[i].classList.add('_pome-ui-opening');
+                            }
+                        }
+
+                        var tpl = template || component.template;
+                        var ret = tpl.indexOf('<html') >= 0 ? new XMLSerializer().serializeToString(dom) : dom.querySelector('body').innerHTML;
+                        component.template = ret;
+                    }
+                    _patchComponent(url, component, true);
+                    // _wrapTemplateWithSkeleton is deferred to after _loadComponents
+                    // so the component skeleton registry is fully populated.
+                    return Promise.resolve(component);
+                });
+            })
+            .then(function (component) {
+                _hookSetup(component, function (instance, comp) {
+                    instance.$parent = parent || _findRoot(instance);
+                    instance.$root = _findRoot(instance) || parent;
+                    instance.$view = url;
+                    instance.$data = comp.data || function () { return {}; };
+                    instance.$created = comp.created || function () { };
+                    instance.$mounted = comp.mounted || function () { };
+                    instance.$unmounted = comp.unmounted || function () { };
+                    instance.$delayClose = comp.delayClose || 0;
+                    _attachContainer(instance);
+                });
+
+                _hookData(component, params);
+
+                // Create instance
+                return _resolveModules(component.modules, url).then(function () {
+                    var components = component.components || [];
+                    var directives = component.directives || [];
+                    var _ret;
+
+                    // Preload page's own CSS before mount
+                    var pageCssPromise = Promise.resolve();
+                    var viewName = url + (mobile ? '.m' : '');
+                    if (_options.preloadCss && component.style) {
+                        pageCssPromise = appendCssReferenceAsync(viewName, component.style);
+                    }
+
+                    return Promise.all([pageCssPromise, _loadComponents(components, url)]).then(function (results) {
+                        var components = results[1];
+                        // Wrap skeleton template now that component registry is fully populated.
+                        _wrapTemplateWithSkeleton(component);
+                        var ret;
+                        try {
+                            ret = Vue.createApp(component);
+                        } catch (createAppError) {
+                            console.error('[PomeUI] Vue.createApp failed. URL: ' + url, createAppError);
+                            console.error('[PomeUI] Component object:', { template: component.template ? component.template.substring(0, 200) + '...' : '(none)', data: typeof component.data, methods: component.methods ? Object.keys(component.methods) : '(none)' });
+                            throw new Error('Vue.createApp failed for URL ' + url + ': ' + (createAppError.message || createAppError));
+                        }
+
+                        for (var i = 0; i < components.length; ++i) {
+                            var com = components[i];
+                            ret.component(com.name, com.options);
+                        }
+
+                        // Inherit parent's registered components
+                        if (parent && parent.$ && parent.$.appContext && parent.$.appContext.components) {
+                            var parentComps = parent.$.appContext.components;
+                            for (var pName in parentComps) {
+                                if (!ret._context.components[pName]) {
+                                    ret.component(pName, parentComps[pName]);
+                                }
+                            }
+                        }
+
+                        var originalMountFunc = ret.mount || function () { };
+                        ret.mount = function (el) {
+                            ret.proxy = originalMountFunc(el);
+                            return ret.proxy;
+                        }
+
+                        _ret = ret;
+                        return _loadDirectives(directives, url);
+                    }).then(function (directives) {
+                        for (var i = 0; i < directives.length; ++i) {
+                            var dir = directives[i];
+                            _ret.directive(dir.name, dir.options);
+                        }
+                        return Promise.resolve(_ret);
+                    });
+                });
+            });
+    };
+
+    function _replace(source, find, replace) {
+        var idx = source.indexOf(find);
+        if (idx < 0) {
+            return source;
+        }
+
+        var ret = source.substr(0, idx) + replace + source.substr(idx + find.length);
+        return ret;
+    }
+
+    function sleep(ms) {
+        return new Promise(function (res) {
+            setTimeout(function () { res(); }, ms);
+        });
+    };
+
+    function yield() {
+        return sleep(0);
+    }
+
+    function _attachContainer(instance) {
+        if (!instance) {
+            console.warn('Invalid view model');
+        }
+
+        if (!instance.$containers) {
+            instance.$containers = [];
+        }
+
+        if (!instance.$containers) {
+            instance.$containers = [];
+        }
+
+        var containers = instance.$containers;
+        instance.$container = function (el) {
+            var container = containers.filter(x => x.selector == el)[0];
+            if (!container) {
+                container = {
+                    element: document.querySelector(el),
+                    selector: el,
+                    open: function (url, params) {
+                        var mobile = _options.mobile();
+                        var currentProxy = null;
+                        if (instance.proxy) {
+                            currentProxy = instance.proxy;
+                        }
+                        if (instance.$ && instance.$.proxy) {
+                            currentProxy = instance.$.proxy;
+                        }
+
+                        var p = Promise.resolve();
+                        if (!this.active || this.active.$view != url || !_options.reuseContainerActiveView()) {
+                            p = this.close();
+                        }
+
+                        var self = this;
+
+                        return p.then(function () {
+                            var p = Promise.resolve();
+                            params = generateParametersFromRoute(params);
+                            _parseQueryString(params);
+                            if (_options.reuseContainerActiveView() && self.active?.$view == url) {
+                                var reuseComponentFunc = function (container) {
+                                    if (!container || !container.active) {
+                                        return p;
+                                    }
+
+                                    if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            if (!container.active || !container.active.$unmounted) return Promise.resolve();
+                                            var val = container.active.$unmounted();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
+                                    }
+                                    p = p.then(function () {
+                                        if (!container.active || !container.active.$data) return Promise.resolve();
+                                        var initData = container.active.$data();
+                                        if (_options.resetDataWhenReuseContainerActiveView()) {
+                                            _combineObject(initData, container.active);
+                                        }
+                                        _combineObject(params, container.active);
+                                        return Promise.resolve();
+                                    });
+                                    if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            if (!container.active || !container.active.$created) return Promise.resolve();
+                                            var val = container.active.$created();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
+                                    }
+                                    if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            if (!container.active || !container.active.$mounted) return Promise.resolve();
+                                            var val = container.active.$mounted();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
+                                    }
+
+                                    if (container.active.$containers && container.active.$containers.length) {
+                                        for (var i = 0; i < container.active.$containers.length; ++i) {
+                                            reuseComponentFunc(container.active.$containers[i]);
+                                        }
+                                    }
+
+                                    return p.then(function () { if (!container.active) return Promise.resolve(null); container.active.$forceUpdate(); return Promise.resolve(container.active) });
+
+                                }
+                                return Promise.resolve(reuseComponentFunc(self));
+                            }
+
+                            var _result;
+                            var retryLeft = 20;
+                            var _lastMountError = null;
+                            var buildRetryPromise = function () {
+                                return new Promise(function (res, rej) {
+                                    var containerEl = document.querySelector(self.selector);
+                                    if (!containerEl) {
+                                        if (--retryLeft > 0) {
+                                            return res(sleep(50).then(function () {
+                                                return buildRetryPromise();
+                                            }));
+                                        } else {
+                                            var msg = 'Mount component to ' + self.selector + ' failed: container element not found in DOM after retries. URL: ' + url;
+                                            console.error('[PomeUI]', msg);
+                                            return rej(new Error(msg));
+                                        }
+                                    }
+
+                                    var active;
+                                    try {
+                                        active = _result.mount(self.selector);
+                                    } catch (mountError) {
+                                        _lastMountError = mountError;
+                                        console.error('[PomeUI] Mount component to ' + self.selector + ' threw an error. URL: ' + url, mountError);
+                                        return rej(new Error('Mount component to ' + self.selector + ' failed: ' + (mountError.message || mountError) + '. URL: ' + url));
+                                    }
+
+                                    if (active) {
+                                        self.active = active;
+                                        return res(active);
+                                    }
+
+                                    if (--retryLeft > 0) {
+                                        return res(sleep(50).then(function () {
+                                            return buildRetryPromise();
+                                        }));
+                                    } else {
+                                        var detail = 'mount() returned ' + (active === null ? 'null' : (active === undefined ? 'undefined' : String(active)));
+                                        if (_lastMountError) {
+                                            detail += '; last error: ' + (_lastMountError.message || _lastMountError);
+                                        }
+                                        var msg = 'Mount component to ' + self.selector + ' failed: ' + detail + '. URL: ' + url;
+                                        console.error('[PomeUI]', msg);
+                                        console.error('[PomeUI] Diagnostics:', {
+                                            selector: self.selector,
+                                            url: url,
+                                            containerElement: containerEl,
+                                            containerInnerHTML: containerEl ? containerEl.innerHTML.substring(0, 200) : '(N/A)',
+                                            appResult: _result,
+                                            mobile: mobile
+                                        });
+                                        return rej(new Error(msg));
+                                    }
+                                });
+                            };
+
+                            return _buildApp(url, params, mobile, currentProxy).then(function (result) {
+                                _result = result;
+                                return buildRetryPromise();
+                            }).catch(function (err) {
+                                console.error('[PomeUI] Failed to build or mount component. URL: ' + url + ', Selector: ' + self.selector, err);
+                                return Promise.reject(err);
+                            });
+                        });
+                    },
+                    close: async function (recurse = true) {
+                        async function liftClose(container) {
+                            if (container.active && container.active.$) {
+                                if (recurse) {
+                                    for (var i = 0; i < container.active.$containers.length; ++i) {
+                                        liftClose(container.active.$containers[i]);
+                                    }
+                                }
+
+                                if (container.active.$delayClose) {
+                                    try {
+                                        if (container.active.$el) {
+                                            container.active.$el.classList?.add('_pome-ui-closing');
+                                        }
+                                    } catch (ex) {
+                                        console.warn(ex);
+                                    }
+                                    console.log(`sleeping ${container.active.$delayClose}ms...`);
+                                    await sleep(container.active.$delayClose);
+                                }
+
+                                try {
+                                    container.active.$.appContext.app.unmount();
+                                } catch (ex) {
+                                    console.warn(ex);
+                                }
+                                container.active = null;
+                            }
+                        }
+                        
+                        await liftClose(this);
+                    },
+                    active: null
+                };
+                containers.push(container);
+            }
+            return container;
+        };
+    };
+
+    function Root(options, el, layout) {
+        options = options || {};
+        _hookSetup(options, function (instance) {
+            instance.$parent = parent || _findRoot(instance);
+            instance.$root = _findRoot(instance) || parent;
+            instance.$onUpdating = options.onUpdating;
+            if (layout) {
+                instance.$layout = layout;
+                instance.$view = layout;
+            }
+            _attachContainer(instance);
+        });
+
+        return _resolveModules(options.modules, layout).then(function () {
+            var _app;
+
+            return _loadComponents(options.components || [], layout)
+                .then(function (components) {
+                    // Inject layout skeleton overlay now that component registry is populated.
+                    if (options._pomeLayoutSkeleton) {
+                        var ls = options._pomeLayoutSkeleton;
+                        var skHtml = ls.skeletonOverride
+                            ? ls.skeletonOverride
+                            : (function () {
+                                var html = _generateSkeletonHtml(ls.skeletonBody);
+                                // Post-process: remove empty top-level nodes (modals etc.),
+                                // set flex:1 on the main content area next to the sidebar.
+                                var tmp = document.createElement('div');
+                                tmp.innerHTML = html;
+                                var topChildren = Array.from(tmp.children);
+                                var sidebarIdx = -1;
+                                for (var ci = 0; ci < topChildren.length; ci++) {
+                                    var ch = topChildren[ci];
+                                    if (!ch.innerHTML.trim()) {
+                                        tmp.removeChild(ch);
+                                        topChildren = Array.from(tmp.children);
+                                        ci--;
+                                        continue;
+                                    }
+                                    if (sidebarIdx < 0 && /\bwidth\s*:/.test(ch.getAttribute('style') || '')) {
+                                        sidebarIdx = ci;
+                                    } else if (sidebarIdx >= 0 && ci === sidebarIdx + 1) {
+                                        ch.style.flex = '1';
+                                        ch.style.minWidth = '0';
+                                        ch.style.overflow = 'hidden';
+                                    }
+                                }
+                                return tmp.innerHTML;
+                            })();
+                        var appEl = document.querySelector(ls.appId);
+                        if (appEl) {
+                            var skDiv = document.createElement('div');
+                            skDiv.setAttribute('v-if', 'pomeSkeletonLoading || pomeSkeletonCloaked');
+                            skDiv.className = '_pome-skeleton _pome-layout-skeleton ' + ls.bodyClass;
+                            if (ls.overlayStyle) skDiv.setAttribute('style', ls.overlayStyle);
+                            skDiv.innerHTML = skHtml;
+                            appEl.insertBefore(skDiv, appEl.firstChild);
+                        }
+                        delete options._pomeLayoutSkeleton;
+                    }
+                    var app = Vue.createApp(options || {});
+                    for (var i = 0; i < components.length; ++i) {
+                        var com = components[i];
+                        app.component(com.name, com.options);
+                    }
+
+                    _app = app;
+                    return _loadDirectives(options.directives || [], layout);
+                })
+                .then(function (directives) {
+                    for (var i = 0; i < directives.length; ++i) {
+                        var dir = directives[i];
+                        app.directive(dir.name, dir.options);
+                    }
+
+                    _root = _app.mount(el);
+                    _root.$.proxy = _root;
+                    var _mountEl = document.querySelector(el);
+                    if (_mountEl) {
+                        _mountEl.classList.remove('_pome-vue-cloak');
+                    }
+                });
+        });
+    }
+
+    function mount() {
+        function parseHref(el) {
+            if (!el) {
+                return null;
+            }
+
+            if (!el.getAttribute) {
+                return null;
+            }
+
+            var target = el.getAttribute('target') || '_self';
+            var staticAttribute = el.getAttribute('static-link') || el.getAttribute('v-static') || el.getAttribute('pomelo-static');
+
+            if (staticAttribute == null
+                && target.toLowerCase() == '_self'
+                && el.tagName.toLowerCase() == "a") {
+                return el.getAttribute('href');
+            }
+
+            return parseHref(el.parentNode);
+        }
+
+        window.addEventListener('click', function (e) {
+            if (!e) return;
+            var href = parseHref(e.target);
+            if (href) {
+                if (e.ctrlKey || e.metaKey) {
+                    return;
+                }
+                exports.redirect(href);
+                e.preventDefault();
+                return;
+            }
+        });
+
+        window.onpopstate = function () {
+            UpdateLayout();
+        };
+
+        return UpdateLayout();
+    }
+
+    function UseConfig(options) {
+        _combineObject(options, _options);
+    }
+
+    function MapRoute(rule, view) {
+        if (!exports._rules) {
+            exports._rules = {};
+        }
+
+        exports._rules[rule] = view;
+    }
+
+    function ForceUpdate(proxy = exports.root()) {
+        if (!proxy) return;
+        proxy.$forceUpdate();
+        if (proxy.$containers) {
+            for (var i = 0; i < proxy.$containers.length; ++i) {
+                if (proxy.$containers[i].active) {
+                    ForceUpdate(proxy.$containers[i].active);
+                }
+            }
+        }
+    }
+
+    function MatchRoute() {
+        function replaceAll(str, s1, s2) {
+            return str.replace(new RegExp(s1, "g"), s2);
+        };
+
+        function matchAll(str) {
+            var ret = [];
+            if (!str) {
+                return ret;
+            }
+
+            var currentBrace = -1;
+            var parenthesis = 0;
+            for (var i = 0; i < str.length; ++i) {
+                if (str[i] == '{' && !parenthesis) {
+                    currentBrace = i;
+                    parenthesis = 0;
+                } else if (str[i] == '(') {
+                    ++parenthesis;
+                } else if (str[i] == ')') {
+                    --parenthesis;
+                } else if (str[i] == '}' && !parenthesis) {
+                    ret.push(str.substring(currentBrace, i + 1));
+                }
+            }
+
+            return ret;
+        }
+
+        function unwrapBrackets(src) {
+            if (src[0] === '{') {
+                return src.substr(1, src.length - 2);
+            } else {
+                return src;
+            }
+        }
+
+        function regExpEscape(str) {
+            return str.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
+        }
+
+        function getRegExpPatterns(str) {
+            var cnt = 0;
+            if (str) {
+                for (var i = 0; i < str.length; ++i) {
+                    if (str[i] == '(') {
+                        ++cnt;
+                    }
+                    if (str[i] == '?' && i > 0 && str[i - 1] == '(') {
+                        --cnt;
+                    }
+                }
+            }
+            return cnt;
+        }
+
+        function getSanitizedHash() {
+            var hash = window.location.hash;
+            var idx = hash.indexOf('?');
+            if (idx == -1) {
+                return hash;
+            }
+            return hash.substr(0, idx);
+        }
+
+        var keys = Object.getOwnPropertyNames(exports._rules);
+        for (var i = 0; i < keys.length; ++i) {
+            var rule = keys[i];
+            var isHash = rule[0] == '#';
+            var view = exports._rules[keys[i]];
+            var matches = matchAll(rule);
+            var params = [];
+            var patterns = [];
+            for (var j = 0; j < matches.length; ++j) {
+                var param = matches[j];
+                var k = unwrapBrackets(param);
+                regex = '([^/]+)';
+                if (k[0] == '*') {
+                    regex = '(.*)';
+                    k = k.substr(1);
+                }
+                if (k.indexOf('=') > 0) {
+                    var value = k.substr(k.indexOf('=') + 1);
+                    regex = `(${regExpEscape(value)})`;
+                    params.push(k.substr(0, k.indexOf('=')));
+                } else if (param.indexOf(':') > 0) {
+                    regex = param.substr(param.indexOf(':') + 1)
+                    regex = regex.substr(0, regex.length - 1);
+                    params.push(k.substr(0, k.indexOf(':')));
+                } else {
+                    params.push(k);
+                }
+                patterns.push(getRegExpPatterns(regex));
+                rule = _replace(rule, param, regex);
+            }
+
+            var parsedReg = new RegExp('^' + rule + '$');
+            var matches = parsedReg.exec(isHash ? getSanitizedHash() || '#' : window.location.pathname);
+            if (matches) {
+                var ret = {
+                    view: view,
+                    params: []
+                };
+                var _matches = matches;
+                matches = [];
+                var index = 0;
+                for (var j = 1; j < _matches.length; ++j) {
+                    matches.push(_matches[j]);
+                    for (var k = 0; k < patterns[index] - 1; ++k) {
+                        ++j;
+                    }
+                    ++index;
+                }
+                var values = matches.map(function (x) { return decodeURIComponent(x); });
+                for (var j = 0; j < params.length; ++j) {
+                    ret.params.push({ key: params[j], value: values[j] });
+                }
+                return ret;
+            }
+        }
+
+        return null;
+    }
+
+    function _fillObjectField(param, value, dest) {
+        if (!dest) {
+            return;
+        }
+
+        var splited = param.split('.');
+        for (var i = 0; i < splited.length - 1; ++i) {
+            if (!dest[splited[i]]) {
+                dest[splited[i]] = {}
+            }
+            dest = dest[splited[i]];
+        }
+        dest[splited[splited.length - 1]] = value;
+    }
+    function _applyLayoutHtml(layout) {
+        return _httpGet(layout + (_options.mobile() ? '.m.html' : '.html')).then(function (layoutHtml) {
+            var htmlBeginTagIndex = layoutHtml.indexOf('<html');
+            var htmlBeginTagIndex2 = layoutHtml.indexOf('>', htmlBeginTagIndex);
+            layoutHtml = layoutHtml.substr(htmlBeginTagIndex2 + 1);
+            var htmlEndTagIndex = layoutHtml.lastIndexOf('</html>');
+            layoutHtml = layoutHtml.substr(0, htmlEndTagIndex);
+            layoutHtml = _patchTemplate(layout, layoutHtml);
+            document.querySelector('html').innerHTML = layoutHtml;
+
+            var ticks = new Date().getTime();
+            var appId = 'pomelo-' + ticks;
+            _ensureVueCloakStyle();
+            document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + document.querySelector('body').innerHTML + '</div>';
+
+            return Promise.resolve(appId);
+        })
+    }
+
+    function generateParametersFromRoute(params = {}) {
+        var route = null;
+        route = MatchRoute();
+        if (route == null) {
+            try {
+                _options.onNotFound(window.location.pathname + window.location.search);
+                return;
+            } catch (ex) {
+                throw "No available route found.";
+            }
+        }
+
+        for (var i = 0; i < route.params.length; ++i) {
+            var param = route.params[i];
+            _fillObjectField(param.key, param.value, params);
+        }
+
+        return params;
+    }
+
+    function parseMacroPath(viewName, href) {
+        if (!href) {
+            href = '';
+        }
+
+        if (href.indexOf('@') < 0) {
+            return href;
+        }
+
+        var containingFolder = '/';
+        var folderIndex = viewName.lastIndexOf('/');
+        if (folderIndex >= 0) {
+            containingFolder = viewName.substr(0, folderIndex);
+        }
+
+        href = href.replaceAll('@(view)', viewName)
+            .replaceAll('@(js)', viewName + '.js')
+            .replaceAll('@(html)', viewName + '.html')
+            .replaceAll('@(mobileHtml)', viewName + '.m.html')
+            .replaceAll('@(css)', viewName + '.css')
+            .replaceAll('@(mobileCss)', viewName + '.m.css')
+            .replaceAll('@(less)', viewName + '.less')
+            .replaceAll('@(mobileLess)', viewName + '.m.less')
+            .replaceAll('@(mobileSass)', viewName + '.m.sass')
+            .replaceAll('@(mobileScss)', viewName + '.m.scss')
+            .replaceAll('@(containingFolder)', containingFolder);
+
+        if (href.length && href[0] != '/' && href.indexOf('http') == -1) {
+            href = getContainingFolder(viewName) + href;
+        }
+
+        return href;
+    }
+
+    function appendCssReference(view, style) {
+        if (typeof style == 'boolean') {
+            var href = view + '.css';
+            if (_options.version) {
+                href += '?v=' + _options.version;
+            }
+            internalAppendCssReference(view, href);
+        } else if (typeof style == 'string') {
+            var href = parseMacroPath(view, style);
+            href = resolveRelativePath(href, getContainingFolder(view));
+            if (_options.version) {
+                if (href.indexOf('>') < 0) {
+                    href += '?v=' + _options.version;
+                } else {
+                    href += '&v=' + _options.version;
+                }
+            }
+            internalAppendCssReference(view, href);
+        } else if (style instanceof Array) {
+            for (var i = 0; i < style.length; ++i) {
+                if (typeof style[i] != 'string') {
+                    continue;
+                }
+                var href = parseMacroPath(view, style[i]);
+                href = resolveRelativePath(href, getContainingFolder(view));
+                if (_options.version) {
+                    if (href.indexOf('>') < 0) {
+                        href += '?v=' + _options.version;
+                    } else {
+                        href += '&v=' + _options.version;
+                    }
+                }
+                internalAppendCssReference(view, href);
+            }
+        } else {
+            throw 'style type not supported'
+        }
+    }
+
+    function getContainingFolder(absolutePath) {
+        if (!absolutePath) {
+            console.warn('getContainingFolder: absolutePath is invalid');
+        }
+
+        var slashIndex = absolutePath.lastIndexOf('/');
+        if (slashIndex < 0) {
+            return '/';
+        }
+
+        return absolutePath.substr(0, slashIndex) + '/';
+    }
+
+    function internalAppendCssReference(viewName, href) {
+        if (document.querySelectorAll('link[data-style="' + viewName + '"][href="' + href + '"]').length) {
+            return;
+        }
+
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/' + getStyleSheetType(href);
+        link.setAttribute('data-style', viewName)
+        link.href = href;
+        try {
+            document.querySelector('head').appendChild(link);
+        } catch (ex) { }
+    }
+
+    function internalAppendCssReferenceAsync(viewName, href) {
+        if (document.querySelectorAll('link[data-style="' + viewName + '"][href="' + href + '"]').length) {
+            return Promise.resolve();
+        }
+
+        return new Promise(function (resolve) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/' + getStyleSheetType(href);
+            link.setAttribute('data-style', viewName);
+            var resolved = false;
+            function onReady() {
+                if (resolved) return;
+                resolved = true;
+                resolve();
+            }
+            setTimeout(onReady, 50);
+            link.onload = onReady;
+            link.onerror = onReady;
+            link.href = href;
+            try {
+                document.querySelector('head').appendChild(link);
+            } catch (ex) {
+                resolve();
+            }
+        });
+    }
+
+    function appendCssReferenceAsync(view, style) {
+        var promises = [];
+        if (typeof style == 'boolean') {
+            var href = view + '.css';
+            if (_options.version) {
+                href += '?v=' + _options.version;
+            }
+            promises.push(internalAppendCssReferenceAsync(view, href));
+        } else if (typeof style == 'string') {
+            var href = parseMacroPath(view, style);
+            href = resolveRelativePath(href, getContainingFolder(view));
+            if (_options.version) {
+                if (href.indexOf('>') < 0) {
+                    href += '?v=' + _options.version;
+                } else {
+                    href += '&v=' + _options.version;
+                }
+            }
+            promises.push(internalAppendCssReferenceAsync(view, href));
+        } else if (style instanceof Array) {
+            for (var i = 0; i < style.length; ++i) {
+                if (typeof style[i] != 'string') {
+                    continue;
+                }
+                var href = parseMacroPath(view, style[i]);
+                href = resolveRelativePath(href, getContainingFolder(view));
+                if (_options.version) {
+                    if (href.indexOf('>') < 0) {
+                        href += '?v=' + _options.version;
+                    } else {
+                        href += '&v=' + _options.version;
+                    }
+                }
+                promises.push(internalAppendCssReferenceAsync(view, href));
+            }
+        }
+        return Promise.all(promises);
+    }
+
+    function getStyleSheetType(styleSheetUrl) {
+        var questionMarkIndex = styleSheetUrl.lastIndexOf('?');
+        if (questionMarkIndex >= 0) {
+            styleSheetUrl = styleSheetUrl.substr(0, questionMarkIndex);
+        }
+
+        var dotIndex = styleSheetUrl.lastIndexOf('.');
+        if (dotIndex < 0) {
+            return null;
+        }
+
+        return styleSheetUrl.substr(dotIndex + 1).toLowerCase();
+    }
+
+    function removeCssReference(view) {
+        if (!_options.removeStyleWhenUnmount) {
+            return;
+        }
+
+        var dom = document.querySelectorAll('link[data-style="' + view + '"]');
+        if (dom && dom.length) {
+            for (var i = 0; i < dom.length; ++i) {
+                dom[i].remove();
+            }
+        }
+    }
+
+    function hookMountedAndUnmounted(options, view) {
+        if (!options) {
+            return;
+        }
+
+        if (!options.mounted) {
+            options.mounted = function () { };
+        }
+
+        if (!options.unmounted) {
+            options.unmounted = function () { };
+        }
+
+        if (!options.created) {
+            options.created = function () { };
+        }
+
+        if (options.style || options.skeleton) {
+            var originalCreated = options.created;
+            options.created = function () {
+                if (options.style) {
+                    if (!_css[view]) {
+                        _css[view] = 0;
+                    }
+                    if (_css[view] == 0) {
+                        if (_options.preloadCss) {
+                            this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
+                        } else {
+                            appendCssReference(view, options.style);
+                        }
+                    }
+                    ++_css[view];
+                }
+
+                this.createdPromise = Promise.resolve();
+                var ret = originalCreated.call(this);
+                if (ret instanceof Promise) {
+                    this.createdPromise = ret;
+                    if (options.skeleton) {
+                        var self = this;
+                        var skeletonShowing = false;
+                        var resolved = false;
+                        // Only activate the skeleton if the promise is still pending
+                        // after skeletonDelay ms.  If it resolves faster, skip the
+                        // skeleton entirely to avoid a flash.
+                        var skeletonDelay = typeof options.skeletonDelay === 'number'
+                            ? options.skeletonDelay : 1000;
+                        var skeletonTimer = setTimeout(function () {
+                            if (resolved) return;
+                            skeletonShowing = true;
+                            self.pomeSkeletonCloaked = false;
+                            self.pomeSkeletonLoading = true;
+                            // Skeleton is now visible. If delayOpen is also set, kick
+                            // off its animation so it's primed when skeleton disappears.
+                            if (options.delayOpen) {
+                                self.$nextTick(function () {
+                                    requestAnimationFrame(function () {
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
+                                    });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
+                                });
+                            }
+                        }, skeletonDelay);
+                        ret.then(function () {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
+                            self.pomeSkeletonCloaked = false;
+                            self.pomeSkeletonLoading = false;
+                            // Fast path: resolved before skeleton appeared �?still need
+                            // to run the delayOpen animation now.
+                            if (!skeletonShowing && options.delayOpen) {
+                                self.$nextTick(function () {
+                                    requestAnimationFrame(function () {
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
+                                    });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
+                                });
+                            }
+                        }).catch(function (err) {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
+                            self.pomeSkeletonCloaked = false;
+                            self.pomeSkeletonLoading = false;
+                            console.error('[SKELETON] created Promise REJECTED:', err);
+                        });
+                    }
+                } else if (options.skeleton) {
+                    // Sync created �?nothing to wait for, ensure skeleton is off.
+                    this.pomeSkeletonCloaked = false;
+                    this.pomeSkeletonLoading = false;
+                    // created() didn't return a Promise, so the skeleton
+                    // timer / promise path above won't run.  We still need
+                    // to kick off the delayOpen animation that was deferred
+                    // under the assumption that skeleton would manage it.
+                    if (options.delayOpen) {
+                        var self = this;
+                        self.$nextTick(function () {
+                            requestAnimationFrame(function () {
+                                requestAnimationFrame(function () {
+                                    self.pomeDelayOpening = false;
+                                });
+                            });
+                            setTimeout(function () {
+                                self.pomeDelayOpened = false;
+                            }, options.delayOpen);
+                        });
+                    }
+                }
+
+                return ret;
+            };
+        }
+
+        var originalMounted = options.mounted;
+        options.mounted = function () {
+            // CSS cloak: hide element until CSS is fully loaded
+            if (_options.preloadCss && this._cssLoadPromise) {
+                _ensureCssCloakStyle();
+                var el = this.$el;
+                if (el && el.nodeType === 1) {
+                    el.classList.add('_pome-css-cloak');
+                    this._cssLoadPromise.then(function () {
+                        el.classList.remove('_pome-css-cloak');
+                    });
+                }
+            }
+
+            // Remove opening class if needed
+            if (options.delayOpen && !options.skeleton) {
+                var self = this;
+                var delayOpenFunc = function () {
+                    requestAnimationFrame(function () {
+                        requestAnimationFrame(function () {
+                            if (!self.$el || !self.$el.parentNode) return;
+                            var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
+                            for (var i = 0; i < doms.length; ++i) {
+                                doms[i].classList.remove('_pome-ui-opening');
+                            }
+                        });
+                    });
+
+                    setTimeout(function () {
+                        if (!self.$el || !self.$el.parentNode) return;
+                        var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
+                        for (var i = 0; i < doms.length; ++i) {
+                            doms[i].classList.remove('_pome-ui-opened');
+                        }
+                    }, options.delayOpen);
+                };
+
+                (self.createdPromise || Promise.resolve()).then(function () {
+                    delayOpenFunc();
+                });
+            }
+
+            return originalMounted.call(this);
+        };
+
+        var originalUnmounted = options.unmounted;
+        options.unmounted = function () {
+            if (options.style) {
+                if (!_css[view]) {
+                    return originalUnmounted.call(this);
+                }
+
+                --_css[view];
+                if (_css[view] <= 0) {
+                    removeCssReference(view);
+                    delete _css[view];
+                }
+            }
+            return originalUnmounted.call(this);
+        };
+    }
+
+    function pomeUiPassTitle(arr) {
+        if (arr) {
+            this.pomeUiSubTitles = arr;
+        }
+
+        var parents = JSON.parse(JSON.stringify(this.pomeUiSubTitles));
+        if (this.title) {
+            parents.push(this.title);
+        }
+
+        var p = this.$parent;
+        while (p && p != window && !p.pomeUiPassTitle) {
+            p = p.$parent;
+        }
+
+        if (p && p != window && p.pomeUiPassTitle) {
+            p.pomeUiPassTitle(parents);
+        } else {
+            document.querySelector('title').innerHTML = _options.generateTitle(parents);
+        }
+    }
+
+    function UpdateLayout() {
+        var mobile = _options.mobile();
+        var params = {};
+        var route = null;
+        var layout = _options.layout;
+
+        route = MatchRoute();
+        params = generateParametersFromRoute();
+
+        var _def;
+        var viewName = route.view + (_options.mobile() ? '.m' : '');
+        return _httpGet(route.view + '.js').then(function (def) {
+            _def = def;
+            var modules = null;
+            var _opt;
+            var Page = function (options) {
+                _opt = options;
+                layout = options.layout || layout;
+                modules = options.modules;
+            };
+
+            var require = _createRequire(route.view);
+            def = eval(def + '\r\n//# sourceURL=' + route.view + '.js');
+            hookMountedAndUnmounted(_opt, viewName);
+            return _resolveModules(modules, viewName);
+        }).then(function () {
+            if (exports.root() && exports.root().$layout) {
+                if (exports.root().$layout === layout) {
+                    _parseQueryString(params);
+                    var fields = Object.getOwnPropertyNames(params);
+                    for (var i = 0; i < fields.length; ++i) {
+                        var val = params[fields[i]];
+                        exports.root()[fields[i]] = val;
+                    }
+                    
+                    return exports.root().$containers[0].open(route.view, params).then(function () {
+                        var promise = Promise.resolve();
+                        if (typeof exports.root().$.$onUpdating == 'function') {
+                            var result = exports.root().$.$onUpdating.call(exports.root());
+                            if (result instanceof Promise) {
+                                promise = promise.then(() => result);
+                            }
+                        }
+                        return promise;
+                    });
+                }
+
+                exports.root().$.appContext.app.unmount();
+            }
+
+            if (layout) {
+                var layoutName = layout + (mobile ? '.m' : '');
+                var _layoutHtml;
+                var _layoutSkeletonFileHtml; // hoisted so LayoutNext closure can access it
+                // Load layout .html, .js and optional .skeleton.html all in parallel
+                return Promise.all([
+                    _httpGet(layoutName + '.html'),
+                    _httpGet(layout + '.js'),
+                    _httpGetSkeletonFile(layoutName + '.skeleton.html')
+                ]).then(function (layoutResults) {
+                    _layoutHtml = layoutResults[0];
+                    var js = layoutResults[1];
+                    _layoutSkeletonFileHtml = layoutResults[2]; // null when absent
+                    return js;
+                }).then(function (js) {
+                    var _opt = null;
+                    var Layout = function (options) {
+                        _opt = options;
+                    };
+                    var LayoutNext = function (options) {
+                        _hookSetup(options);
+
+                        if (!_opt.template) {
+                            _opt.template = _sanitizeTemplate(_layoutHtml);
+                        }
+                        _patchComponent(layout, _opt);
+                        _layoutHtml = _opt.template;
+                        var htmlBeginTagIndex = _layoutHtml.indexOf('<html');
+                        var htmlBeginTagIndex2 = _layoutHtml.indexOf('>', htmlBeginTagIndex);
+                        _layoutHtml = _layoutHtml.substr(htmlBeginTagIndex2 + 1);
+                        var htmlEndTagIndex = _layoutHtml.lastIndexOf('</html>');
+                        _layoutHtml = _layoutHtml.substr(0, htmlEndTagIndex);
+                        document.querySelector('html').innerHTML = _layoutHtml;
+                        _hookData(options, params);
+
+                        var ticks = new Date().getTime();
+                        var appId = 'pomelo-' + ticks;
+                        var containerId = 'container-' + ticks;
+                        var bodyHtml = document.querySelector('body').innerHTML;
+                        var renderBodyRegex = /<render-body\s*(?:\/\s*)?>(?:<\/render-body\s*>)?/i;
+                        var body;
+                        if (renderBodyRegex.test(bodyHtml)) {
+                            body = bodyHtml.replace(renderBodyRegex, '<div id="' + containerId + '"></div>');
+                        } else {
+                            console.error('[PomeUI] <render-body> tag not found in layout body innerHTML. The container element will not be created.');
+                            console.error('[PomeUI] Body innerHTML (first 500 chars):', bodyHtml.substring(0, 500));
+                            body = bodyHtml;
+                        }
+                        // Layout skeleton: defer generation to Root→_loadComponents so the
+                        // component skeleton registry is fully populated before we generate HTML.
+                        if (options.skeleton) {
+                            _ensureSkeletonStyle();
+                            var bodyEl = document.querySelector('body');
+                            var bodyClass = bodyEl.getAttribute('class') || '';
+                            var bodyInlineStyle = bodyEl.getAttribute('style') || '';
+                            var bodyComputed = window.getComputedStyle(bodyEl);
+                            var overlayStyle = bodyInlineStyle;
+                            if (bodyComputed.display && bodyComputed.display.indexOf('flex') >= 0) {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:' + bodyComputed.display
+                                    + ';flex-direction:' + bodyComputed.flexDirection
+                                    + ';align-items:' + bodyComputed.alignItems;
+                            } else {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:flex;flex-direction:row;align-items:stretch';
+                            }
+                            var skeletonBody = body.replace('<div id="' + containerId + '"></div>', '<div style="flex:1;min-width:0"></div>');
+                            // Store pending data; Root will inject the overlay div after
+                            // _loadComponents so registered component skeletons are available.
+                            options._pomeLayoutSkeleton = {
+                                appId: '#' + appId,
+                                bodyClass: bodyClass,
+                                overlayStyle: overlayStyle,
+                                skeletonBody: skeletonBody,
+                                // Priority: .skeleton.html file > inline string in JS
+                                skeletonOverride: _layoutSkeletonFileHtml
+                                    || (typeof options.skeleton === 'string' ? options.skeleton : null)
+                            };
+                        }
+                        _ensureVueCloakStyle();
+                        document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + body + '</div>';
+                        if (!document.getElementById(containerId)) {
+                            console.error('[PomeUI] Container element #' + containerId + ' not found in DOM immediately after setting body innerHTML. The <render-body> replacement likely failed.');
+                        }
+                        options.template = null;
+                        if (!options.mounted) {
+                            options.mounted = function () { };
+                        }
+
+                        var _layoutContainerId = containerId;
+                        var _layoutRouteView = route.view;
+                        var _layoutParams = params;
+
+                        return Root(options, '#' + appId, layout).then(function () {
+                            var root = exports.root();
+                            if (!root) return;
+                            var container = root.$container('#' + _layoutContainerId);
+                            return container.open(_layoutRouteView, _layoutParams);
+                        });
+                    };
+
+                    var require = _createRequire(layout);
+                    eval(js + '\r\n//# sourceURL=' + layout + ".js");
+                    hookMountedAndUnmounted(_opt, layoutName);
+                    // Resolve template option for Layout (could be .html path or inline HTML)
+                    var layoutTemplatePromise = _opt.template
+                        ? _resolveTemplateOption(_opt.template)
+                        : Promise.resolve(null);
+                    return Promise.all([_resolveModules(_opt.modules, layout), layoutTemplatePromise]).then(function (layoutResolveResults) {
+                        var resolvedLayoutTemplate = layoutResolveResults[1];
+                        if (resolvedLayoutTemplate) {
+                            _opt.template = resolvedLayoutTemplate;
+                        }
+                        return LayoutNext(_opt);
+                    });
+                });
+            } else {
+                var viewName = route.view + (_options.mobile() ? '.m' : '');
+                return _applyLayoutHtml(route.view).then(function (appId) {
+                    var _opt = null;
+                    var components = null;
+                    var Page = function (options) {
+                        _opt = options;
+                    };
+                    var PageNext = function (options) {
+                        modules = options.modules;
+                        components = options.components || [];
+                        Root(options, '#' + appId, route.view);
+                    };
+
+                    var require = _createRequire(route.view);
+                    eval(_def + '\r\n//# sourceURL=' + route.view + '.js');
+
+                    if (!_opt) {
+                        _opt = {};
+                    }
+
+                    _hookData(_opt, params);
+                    hookMountedAndUnmounted(_opt, viewName);
+                    _patchComponent(viewName, _opt);
+                    return _resolveModules(_opt.modules, viewName).then(function () {
+                        PageNext(_opt);
+                        return Promise.resolve();
+                    });
+                });
+            }
+        }).then(function () {
+            ForceUpdate();
+        }).catch(function (err) {
+            console.error(err);
+        })
+    };
+
+    function Redirect(url) {
+        var title = null;
+        var titleTag = document.querySelector('title');
+        if (titleTag) {
+            title = titleTag.innerText;
+        }
+        window.history.pushState(null, title, url);
+        UpdateLayout();
+    }
+
+    function Replace(url) {
+        var title = null;
+        var titleTag = document.querySelector('title');
+        if (titleTag) {
+            title = titleTag.innerText;
+        }
+        window.history.replaceState(null, title, url);
+        UpdateLayout();
+    }
+
+
+    function LoadScript(url) {
+        if (_httpCached(url)) {
+            with (window) {
+                if (PomeloModule) {
+                    var require = function (script, workingDirectory, mode) {
+                        workingDirectory = workingDirectory || PomeloModule.getContainingFolder(url);
+                        return PomeloModule.require(script, workingDirectory, mode);
+                    };
+                }
+
+                eval(_cache[url] + '\r\n//# sourceURL=' + url);
+            }
+            return Promise.resolve();
+        }
+
+        return _httpGet(url).then(function (js) {
+            with (window) {
+
+                if (PomeloModule) {
+                    var require = function (script, workingDirectory, mode) {
+                        workingDirectory = workingDirectory || PomeloModule.getContainingFolder(url);
+                        return PomeloModule.require(script, workingDirectory, mode);
+                    };
+                }
+
+                eval(js + '\r\n//# sourceURL=' + url);
+            }
+            _cache[url] = js;
+            return Promise.resolve();
+        }).catch(err => {
+            console.error('Load module ' + url + ' failed.');
+            console.error(err);
+        });
+    }
+
+    function resolveRelativePathPlain(url) {
+        if (url.indexOf('./') == -1 && url.indexOf('../') == -1) {
+            return url;
+        }
+
+        var index = url.lastIndexOf('../');
+        if (index == 0) {
+            return url;
+        }
+
+        url = url.replaceAll('/./', '/');
+        if (url.indexOf('./') == 0) {
+            url = url.substr(2);
+        }
+
+        if (index) {
+            var w = url.substr(0, index);
+            var f = url.substr(index);
+            return resolveRelativePath(f, w);
+        }
+    }
+
+    function resolveRelativePath(file, workingDirectory) {
+        if (file.length && (file[0] == '/') || file.indexOf('http') == 0) {
+            return resolveRelativePathPlain(file);
+        }
+
+        if (file.length && file[0] != '.') {
+            return resolveRelativePathPlain(workingDirectory + file);
+        }
+
+        if (file.indexOf('./') == 0) {
+            return resolveRelativePath(file.substr(2), workingDirectory);
+        }
+
+        if (file.indexOf('../') == 0) {
+            file = file.substr(3);
+            workingDirectory = getContainingFolder(workingDirectory.substr(0, workingDirectory.length - 1));
+            return resolveRelativePath(file, workingDirectory);
+        }
+    }
+
+    function _loadComponents(components, viewName) {
+        var ret = [];
+        if (!components.length) {
+            return Promise.resolve(ret);
+        }
+        var workingDirectory = getContainingFolder(viewName || '/');
+        return Promise.all(components.map(function (c) {
+            c = resolveRelativePath(parseMacroPath(viewName, c), workingDirectory);
+            var componentPath = c;
+            var _html;
+            var _name;
+            var _opt;
+            // Load .html, .js and optional .skeleton.html in parallel
+            return Promise.all([
+                _httpGet(c + '.html'),
+                _httpGet(c + '.js'),
+                _httpGetSkeletonFile(c + '.skeleton.html')
+            ]).then(function (results) {
+                _html = results[0];
+                var comJs = results[1];
+                var skeletonFileHtml = results[2]; // null when file does not exist
+                var Component = function (name, options) {
+                    _opt = options;
+                    _name = name;
+                };
+
+                var require = _createRequire(c);
+                eval(comJs + '\r\n//# sourceURL=' + c + ".js");
+                hookMountedAndUnmounted(_opt, c);
+                // Resolve template option for Component (could be .html path or inline HTML)
+                var compTemplatePromise = _opt.template
+                    ? _resolveTemplateOption(_opt.template)
+                    : Promise.resolve(null);
+                return compTemplatePromise.then(function (resolvedCompTemplate) {
+                    if (resolvedCompTemplate) {
+                        _opt.template = resolvedCompTemplate;
+                    } else if (!_opt.template) {
+                        _opt.template = _sanitizeTemplate(_html);
+                    }
+                    _hookSetup(_opt);
+                    _patchComponent(c, _opt, true);
+                    // Register the component's skeleton BEFORE wrapping the template,
+                    // so _generateSkeletonHtml still sees the clean original template.
+                    _registerComponentSkeleton(_name, _opt, _opt.template, skeletonFileHtml);
+                    _wrapTemplateWithSkeleton(_opt);
+                    _hookData(_opt);
+                    var cssPreloadPromise = Promise.resolve();
+                    if (_options.preloadCss && _opt.style) {
+                        cssPreloadPromise = appendCssReferenceAsync(c, _opt.style);
+                    }
+                    return Promise.all([cssPreloadPromise, _resolveModules(_opt.modules, c)]);
+                }); // end of compTemplatePromise.then
+            }).then(function () {
+                // Recursively load sub-components for this component
+                var subComponentRefs = _opt.components || [];
+                return _loadComponents(subComponentRefs, componentPath);
+            }).then(function (subComponents) {
+                ret.push({ name: _name, options: _opt });
+                for (var i = 0; i < subComponents.length; ++i) {
+                    if (!ret.some(function (x) { return x.name == subComponents[i].name; })) {
+                        ret.push(subComponents[i]);
+                    }
+                }
+                return Promise.resolve();
+            });
+        })).then(function () {
+            return Promise.resolve(ret);
+        });
+    }
+
+    function _loadDirectives(directives, viewName) {
+        var ret = [];
+        if (!directives.length) {
+            return Promise.resolve(ret);
+        }
+        var workingDirectory = getContainingFolder(viewName || '/');
+        var viewName;
+        var subComponentRefs = [];
+        return Promise.all(directives.map(function (c) {
+            c = resolveRelativePath(parseMacroPath(viewName, c), workingDirectory);
+            viewName = c;
+            var _name;
+            var _opt;
+            return _httpGet(c + ".js").then(function (comJs) {
+                var Directive = function (name, options) {
+                    _opt = options;
+                    _name = name;
+                };
+
+                var require = _createRequire(c);
+                eval(comJs + '\r\n//# sourceURL=' + c + ".js");
+                ret.push({ name: _name, options: _opt });
+                return Promise.resolve();
+            })
+        })).then(function () {
+            return Promise.resolve(ret);
+        });
+    }
+
+    exports._addins = [];
+
+    function _patchComponent(view, opt, isComponent) {
+        prepared = true;
+        if (!opt.data) {
+            opt.data = function () {
+                return {};
+            };
+        }
+
+        if (!opt.style) {
+            opt.style = [];
+        }
+
+        if (!opt.style instanceof Array) {
+            if (opt.style instanceof String) {
+                opt.style = [opt.style];
+            } else {
+                opt.style = ['@(css)'];
+            }
+        }
+
+        if (!opt.components) {
+            opt.components = [];
+        }
+
+        if (!opt.created) {
+            opt.created = function () { };
+        }
+
+        if (!opt.mounted) {
+            opt.mounted = function () { };
+        }
+
+        if (!opt.unmounted) {
+            opt.unmounted = function () { };
+        }
+
+        if (!opt.destroyed) {
+            opt.destroyed = function () { };
+        }
+
+        if (!opt.watch) {
+            opt.watch = {};
+        }
+
+        if (!opt.computed) {
+            opt.computed = {};
+        }
+
+        let func1 = opt.data;
+        opt.data = function (app) {
+            var data = func1.call(this, app);
+            var data2 = {};
+            if (!isComponent) {
+                data2.pomeUiSubTitles = [];
+            }
+            if (opt.skeleton) {
+                // Start hidden; skeleton is only shown after skeletonDelay ms
+                // to avoid a flash when loading completes quickly.
+                data2.pomeSkeletonLoading = false;
+                // Cloak: hide real content until skeleton appears or data loads,
+                // preventing a flash of uninitialized content during the delay.
+                data2.pomeSkeletonCloaked = true;
+            }
+            if (opt.skeleton && opt.delayOpen) {
+                data2.pomeDelayOpened = true;
+                data2.pomeDelayOpening = true;
+            }
+            _combineObject(data2, data);
+            return data;
+        }
+
+        if (!opt.methods) {
+            opt.methods = {};
+        }
+
+        if (!isComponent) {
+            opt.methods.pomeUiPassTitle = pomeUiPassTitle;
+
+            if (!opt.watch) {
+                opt.watch = {};
+            }
+
+            if (!opt.watch.title) {
+                opt.watch.title = function () { };
+            }
+
+
+            _chainHook(opt.watch, 'title', function () {
+                this.pomeUiPassTitle();
+            });
+        }
+
+        for (let i = 0; i < exports._addins.length; ++i) {
+            let v = exports._addins[i].view;
+            let addin = exports._addins[i].opt;
+            if (v != '*' && view != v) {
+                continue;
+            }
+
+            if (addin.data) {
+                let func2 = opt.data;
+                opt.data = function (app) {
+                    var data = func2.call(this, app);
+                    var data2 = {};
+                    try {
+                        data2 = addin.data.call(this, app);
+                    } catch (ex) {
+                        console.error(ex);
+                    }
+                    _combineObject(data2, data);
+                    return data;
+                }
+            }
+
+            if (addin.style) {
+                if (addin.style instanceof Boolean) {
+                    addin.style = ['@(css)'];
+                }
+
+                if (addin.style instanceof String) {
+                    addin.style = [addin.style];
+                }
+
+                addin.style.forEach(function (s) {
+                    if (!opt.style) {
+                        opt.style = [];
+                    }
+                    if (typeof opt.style == 'boolean') {
+                        opt.style = ['@(css)'];
+                    }
+                    if (!opt.style.some(x => x == s)) {
+                        opt.style.push(s);
+                    }
+                });
+            }
+
+            if (addin.components) {
+                addin.components.forEach(function (c) {
+                    if (!opt.components.some(x => x == c)) {
+                        opt.components.push(c);
+                    }
+                });
+            }
+
+            if (addin.layout) {
+                opt.layout = addin.layout;
+            }
+
+            if (addin.props) {
+                if (!opt.props) {
+                    opt.props = [];
+                }
+
+                addin.props.forEach(function (p) {
+                    if (!opt.props.some(x => x == p)) {
+                        opt.props.push(p);
+                    }
+                });
+            }
+
+            if (addin.watch) {
+                var properties = Object.getOwnPropertyNames(addin.watch);
+                properties.forEach(function (key) {
+                    var _originalWatch = opt.watch[key];
+                    opt.watch[key] = function (a, b) {
+                        _originalWatch.invoke(this, a, b);
+                        try {
+                            addin.watch[key].invoke(this, a, b);
+                        } catch (ex) {
+                            console.error(ex);
+                        }
+                    } 
+                });
+            }
+
+            if (addin.computed) {
+                var properties = Object.getOwnPropertyNames(addin.computed);
+                properties.forEach(function (key) {
+                    opt.computed[key] = addin.computed[key];
+                });
+            }
+
+            if (addin.methods) {
+                var setup = opt.setup || function (props, context) {
+                };
+
+                opt.setup = function (props, context) {
+                    setup(props, context);
+                    var methods = {};
+                    var originMethods = Object.getOwnPropertyNames(opt.methods);
+                    originMethods.forEach(function (m) {
+                        methods[m] = opt.methods[m];
+                    });
+                    var instance = Vue.getCurrentInstance();
+                    instance.$baseMethods = methods;
+                };
+
+                var addinMethods = Object.getOwnPropertyNames(addin.methods);
+                addinMethods.forEach(function (m) {
+                    opt.methods[m] = addin.methods[m];
+                });
+            }
+
+            if (addin.created) {
+                _chainHook(opt, 'created', addin.created);
+            }
+
+            if (addin.mounted) {
+                _chainHook(opt, 'mounted', addin.mounted);
+            }
+
+            if (addin.unmounted) {
+                _chainHook(opt, 'unmounted', addin.unmounted);
+            }
+
+            if (addin.destroyed) {
+                _chainHook(opt, 'destroyed', addin.destroyed);
+            }
+
+            if (addin.template) {
+                if (addin.template instanceof Function) {
+                    if (opt.template) {
+                        if (opt.template.indexOf('<html') >= 0) {
+                            var template = new DOMParser().parseFromString(_sanitizeTemplate(opt.template), 'text/html');
+                            addin.template(template);
+                            opt.template = new XMLSerializer().serializeToString(template);
+                        } else {
+                            opt.template = `<pome-ui-template>${opt.template}</pome-ui-template>`
+                            var template = new DOMParser().parseFromString(_sanitizeTemplate(opt.template), 'text/html');
+                            addin.template(template);
+                            opt.template = new XMLSerializer().serializeToString(template);
+                            opt.template = opt.template.substr(opt.template.indexOf('<pome-ui-template>') + '<pome-ui-template>'.length);
+                            opt.template = opt.template.substr(0, opt.template.indexOf('</pome-ui-template>'));
+                        }
+                    }
+                } else {
+                    opt.template = addin.template;
+                }
+            }
+        }
+
+        if (!isComponent) {
+            _chainHook(opt, 'created', function () {
+                this.pomeUiPassTitle();
+            });
+
+            _chainHook(opt, 'unmounted', function () {
+                this.pomeUiPassTitle([]);
+            });
+        }
+    }
+
+    function _patchTemplate(view, html) {
+        for (let i = 0; i < exports._addins.length; ++i) {
+            let v = exports._addins[i].view;
+            let addin = exports._addins[i].opt;
+            if (v != '*' && view != v) {
+                continue;
+            }
+
+            if (addin.template) {
+                if (addin.template instanceof Function) {
+                    if (html.indexOf('<html') >= 0) {
+                        var template = new DOMParser().parseFromString(_sanitizeTemplate(html), 'text/html');
+                        addin.template(template);
+                        html = new XMLSerializer().serializeToString(template);
+                    } else {
+                        html = `<pome-ui-template>${html}</pome-ui-template>`
+                        var template = new DOMParser().parseFromString(_sanitizeTemplate(html), 'text/html');
+                        addin.template(template);
+                        html = new XMLSerializer().serializeToString(template);
+                        html = html.substr(html.indexOf('<pome-ui-template>') + '<pome-ui-template>'.length);
+                        html = html.substr(0, html.indexOf('</pome-ui-template>'));
+                    }
+                } else {
+                    html = addin.template;
+                }
+            }
+        }
+        return html;
+    }
+
+    function UseAddin(addinUrl) {
+        var Addin = function (view, opt) {
+            exports._addins.push({view, opt});
+        };
+
+        var js = _options.httpGetSync(addinUrl);
+        eval(js);
+    }
+
+
+    function UseInlineAddin(script) {
+        var Addin = function (view, opt) {
+            exports._addins.push({ view, opt });
+        };
+
+        eval(script);
+    }
+
+    function Backward() {
+        window.history.back();
+    }
+
+    exports.root = root;
+    exports.useConfig = UseConfig;
+    exports.mapRoute = MapRoute;
+    exports.matchRoute = MatchRoute;
+    exports.updateLayout = UpdateLayout;
+    exports.redirect = Redirect;
+    exports.replace = Replace;
+    exports.backward = Backward;
+    exports.loadScript = LoadScript;
+    exports.forceUpdate = ForceUpdate;
+    exports.mount = mount;
+    exports.useRoutes = useRoutes;
+    exports.useAddin = UseAddin;
+    exports.useInlineAddin = UseInlineAddin;
+
+    return exports;
+};
+
 exports.build = build;