@lynx-js/web-core-server 0.15.2 → 0.15.4

package/dist/index.js

@@ -1,11 +1,2864 @@
-import { createLynxView } from './createLynxView.js';
-export { createLynxView };
-if (!globalThis.requestAnimationFrame) {
-    globalThis.requestAnimationFrame = (cb) => {
-        return setTimeout(cb, 0);
+import node_os from "node:os";
+import promises from "node:fs/promises";
+import node_path from "node:path";
+var __webpack_modules__ = {
+    "../web-style-transformer/dist/standard.js": function(module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+            try {
+                __webpack_require__.d(__webpack_exports__, {
+                    C2: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.C2,
+                    Or: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.Or,
+                    Y1: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.Y1,
+                    a9: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.a9,
+                    gd: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.gd,
+                    oT: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT,
+                    pE: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.pE,
+                    sy: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.sy,
+                    xJ: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.xJ,
+                    xQ: ()=>_standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.xQ
+                });
+                var _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../web-style-transformer/dist/standard_bg.wasm");
+                var _standard_bg_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/standard_bg.js");
+                var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([
+                    _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__
+                ]);
+                _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+                (0, _standard_bg_js__WEBPACK_IMPORTED_MODULE_0__.oT)(_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__);
+                _standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.__wbindgen_start();
+                __webpack_async_result__();
+            } catch (e) {
+                __webpack_async_result__(e);
+            }
+        });
+    },
+    "../web-style-transformer/dist/standard_bg.js": function(module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            C2: ()=>__wbg_push_737cfc8c1432c2c6,
+            Or: ()=>__wbindgen_throw,
+            Y1: ()=>malloc,
+            a9: ()=>__wbg_new_78feb108b6472713,
+            gd: ()=>free,
+            oT: ()=>__wbg_set_wasm,
+            pE: ()=>transform_raw_u16_inline_style_ptr_parsed,
+            sy: ()=>__wbg_fromCharCode_5493f9b25e1ce0a1,
+            xJ: ()=>transform_raw_u16_inline_style_ptr,
+            xQ: ()=>__wbindgen_init_externref_table
+        });
+        module = __webpack_require__.hmd(module);
+        let wasm;
+        function __wbg_set_wasm(val) {
+            wasm = val;
+        }
+        let cachedUint16ArrayMemory0 = null;
+        function getUint16ArrayMemory0() {
+            if (null === cachedUint16ArrayMemory0 || 0 === cachedUint16ArrayMemory0.byteLength) cachedUint16ArrayMemory0 = new Uint16Array(wasm.memory.buffer);
+            return cachedUint16ArrayMemory0;
+        }
+        function getArrayU16FromWasm0(ptr, len) {
+            ptr >>>= 0;
+            return getUint16ArrayMemory0().subarray(ptr / 2, ptr / 2 + len);
+        }
+        const lTextDecoder = 'undefined' == typeof TextDecoder ? (0, module.require)('util').TextDecoder : TextDecoder;
+        let cachedTextDecoder = new lTextDecoder('utf-8', {
+            ignoreBOM: true,
+            fatal: true
+        });
+        cachedTextDecoder.decode();
+        let cachedUint8ArrayMemory0 = null;
+        function getUint8ArrayMemory0() {
+            if (null === cachedUint8ArrayMemory0 || 0 === cachedUint8ArrayMemory0.byteLength) cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+            return cachedUint8ArrayMemory0;
+        }
+        function getStringFromWasm0(ptr, len) {
+            ptr >>>= 0;
+            return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+        }
+        function transform_raw_u16_inline_style_ptr(ptr, len) {
+            const ret = wasm.transform_raw_u16_inline_style_ptr(ptr, len);
+            return ret;
+        }
+        function transform_raw_u16_inline_style_ptr_parsed(name_ptr, name_len, value_ptr, value_len) {
+            const ret = wasm.transform_raw_u16_inline_style_ptr_parsed(name_ptr, name_len, value_ptr, value_len);
+            return ret;
+        }
+        function malloc(size) {
+            const ret = wasm.malloc(size);
+            return ret >>> 0;
+        }
+        function free(ptr, size) {
+            wasm.free(ptr, size);
+        }
+        function __wbg_fromCharCode_5493f9b25e1ce0a1(arg0, arg1) {
+            const ret = String.fromCharCode(...getArrayU16FromWasm0(arg0, arg1));
+            return ret;
+        }
+        function __wbg_new_78feb108b6472713() {
+            const ret = new Array();
+            return ret;
+        }
+        function __wbg_push_737cfc8c1432c2c6(arg0, arg1) {
+            const ret = arg0.push(arg1);
+            return ret;
+        }
+        function __wbindgen_init_externref_table() {
+            const table = wasm.__wbindgen_export_0;
+            const offset = table.grow(4);
+            table.set(0, void 0);
+            table.set(offset + 0, void 0);
+            table.set(offset + 1, null);
+            table.set(offset + 2, true);
+            table.set(offset + 3, false);
+        }
+        function __wbindgen_throw(arg0, arg1) {
+            throw new Error(getStringFromWasm0(arg0, arg1));
+        }
+    },
+    "../web-style-transformer/standard.js": function(module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.a(module, async function(__webpack_handle_async_dependencies__, __webpack_async_result__) {
+            try {
+                __webpack_require__.r(__webpack_exports__);
+                __webpack_require__.d(__webpack_exports__, {
+                    __wbg_fromCharCode_5493f9b25e1ce0a1: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.sy,
+                    __wbg_new_78feb108b6472713: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.a9,
+                    __wbg_push_737cfc8c1432c2c6: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.C2,
+                    __wbg_set_wasm: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.oT,
+                    __wbindgen_init_externref_table: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.xQ,
+                    __wbindgen_throw: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.Or,
+                    free: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.gd,
+                    malloc: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.Y1,
+                    memory: ()=>_dist_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__.memory,
+                    transform_raw_u16_inline_style_ptr: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.xJ,
+                    transform_raw_u16_inline_style_ptr_parsed: ()=>_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__.pE
+                });
+                var _dist_standard_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../web-style-transformer/dist/standard.js");
+                var _dist_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../web-style-transformer/dist/standard_bg.wasm");
+                var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([
+                    _dist_standard_js__WEBPACK_IMPORTED_MODULE_0__,
+                    _dist_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__
+                ]);
+                [_dist_standard_js__WEBPACK_IMPORTED_MODULE_0__, _dist_standard_bg_wasm__WEBPACK_IMPORTED_MODULE_1__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__;
+                __webpack_async_result__();
+            } catch (e) {
+                __webpack_async_result__(e);
+            }
+        });
+    },
+    "../web-style-transformer/dist/standard_bg.wasm": function(module, exports, __webpack_require__) {
+        var WEBPACK_IMPORTED_MODULE_0 = __webpack_require__("../web-style-transformer/dist/standard_bg.js");
+        module.exports = __webpack_require__.v(exports, module.id, "e2b9bfa6543ca3e1", {
+            "./standard_bg.js": {
+                __wbg_fromCharCode_5493f9b25e1ce0a1: WEBPACK_IMPORTED_MODULE_0.sy,
+                __wbg_new_78feb108b6472713: WEBPACK_IMPORTED_MODULE_0.a9,
+                __wbg_push_737cfc8c1432c2c6: WEBPACK_IMPORTED_MODULE_0.C2,
+                __wbindgen_throw: WEBPACK_IMPORTED_MODULE_0.Or,
+                __wbindgen_init_externref_table: WEBPACK_IMPORTED_MODULE_0.xQ
+            }
+        });
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        id: moduleId,
+        loaded: false,
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    module.loaded = true;
+    return module.exports;
+}
+__webpack_require__.m = __webpack_modules__;
+(()=>{
+    var webpackQueues = "function" == typeof Symbol ? Symbol("webpack queues") : "__webpack_queues__";
+    var webpackExports = "function" == typeof Symbol ? Symbol("webpack exports") : "__webpack_exports__";
+    var webpackError = "function" == typeof Symbol ? Symbol("webpack error") : "__webpack_error__";
+    var resolveQueue = (queue)=>{
+        if (queue && queue.d < 1) {
+            queue.d = 1;
+            queue.forEach((fn)=>fn.r--);
+            queue.forEach((fn)=>fn.r-- ? fn.r++ : fn());
+        }
+    };
+    var wrapDeps = (deps)=>deps.map((dep)=>{
+            if (null !== dep && "object" == typeof dep) {
+                if (dep[webpackQueues]) return dep;
+                if (dep.then) {
+                    var queue = [];
+                    queue.d = 0;
+                    dep.then((r)=>{
+                        obj[webpackExports] = r;
+                        resolveQueue(queue);
+                    }, (e)=>{
+                        obj[webpackError] = e;
+                        resolveQueue(queue);
+                    });
+                    var obj = {};
+                    obj[webpackQueues] = (fn)=>fn(queue);
+                    return obj;
+                }
+            }
+            var ret = {};
+            ret[webpackQueues] = function() {};
+            ret[webpackExports] = dep;
+            return ret;
+        });
+    __webpack_require__.a = (module, body, hasAwait)=>{
+        var queue;
+        hasAwait && ((queue = []).d = -1);
+        var depQueues = new Set();
+        var exports = module.exports;
+        var currentDeps;
+        var outerResolve;
+        var reject;
+        var promise = new Promise((resolve, rej)=>{
+            reject = rej;
+            outerResolve = resolve;
+        });
+        promise[webpackExports] = exports;
+        promise[webpackQueues] = (fn)=>{
+            queue && fn(queue), depQueues.forEach(fn), promise["catch"](function() {});
+        };
+        module.exports = promise;
+        body((deps)=>{
+            currentDeps = wrapDeps(deps);
+            var fn;
+            var getResult = ()=>currentDeps.map((d)=>{
+                    if (d[webpackError]) throw d[webpackError];
+                    return d[webpackExports];
+                });
+            var promise = new Promise((resolve)=>{
+                fn = ()=>resolve(getResult);
+                fn.r = 0;
+                var fnQueue = (q)=>q !== queue && !depQueues.has(q) && (depQueues.add(q), q && !q.d && (fn.r++, q.push(fn)));
+                currentDeps.map((dep)=>dep[webpackQueues](fnQueue));
+            });
+            return fn.r ? promise : getResult();
+        }, (err)=>(err ? reject(promise[webpackError] = err) : outerResolve(exports), resolveQueue(queue)));
+        queue && queue.d < 0 && (queue.d = 0);
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.f = {};
+    __webpack_require__.e = (chunkId)=>Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key)=>{
+            __webpack_require__.f[key](chunkId, promises);
+            return promises;
+        }, []));
+})();
+(()=>{
+    __webpack_require__.hmd = (module)=>{
+        module = Object.create(module);
+        if (!module.children) module.children = [];
+        Object.defineProperty(module, 'exports', {
+            enumerable: true,
+            set: ()=>{
+                throw new Error('ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ' + module.id);
+            }
+        });
+        return module;
+    };
+})();
+(()=>{
+    __webpack_require__.u = (chunkId)=>"legacy-wasm-chunk.js";
+})();
+(()=>{
+    __webpack_require__.g = (()=>{
+        if ('object' == typeof globalThis) return globalThis;
+        try {
+            return this || new Function('return this')();
+        } catch (e) {
+            if ('object' == typeof window) return window;
+        }
+    })();
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports, '__esModule', {
+            value: true
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.v = function(exports, wasmModuleId, wasmModuleHash, importsObj) {
+        return Promise.all([
+            import('fs'),
+            import('url')
+        ]).then(([{ readFile }, { URL }])=>new Promise((resolve, reject)=>{
+                readFile(new URL("static/wasm/" + wasmModuleHash + ".module.wasm", import.meta.url), (err, buffer)=>{
+                    if (err) return reject(err);
+                    resolve({
+                        arrayBuffer () {
+                            return buffer;
+                        }
+                    });
+                });
+            })).then(function(x) {
+            return x.arrayBuffer();
+        }).then(function(bytes) {
+            return WebAssembly.instantiate(bytes, importsObj);
+        }).then(function(res) {
+            return Object.assign(exports, res.instance.exports);
+        });
+    };
+})();
+(()=>{
+    var scriptUrl;
+    if ("string" == typeof import.meta.url) scriptUrl = import.meta.url;
+    if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+    scriptUrl = scriptUrl.replace(/^blob:/, "").replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+    __webpack_require__.p = scriptUrl;
+})();
+(()=>{
+    var installedChunks = {
+        980: 0
+    };
+    var installChunk = (data)=>{
+        var __webpack_ids__ = data.__webpack_ids__;
+        var __webpack_modules__ = data.__webpack_modules__;
+        var __webpack_runtime__ = data.__webpack_runtime__;
+        var moduleId, chunkId, i = 0;
+        for(moduleId in __webpack_modules__)if (__webpack_require__.o(__webpack_modules__, moduleId)) __webpack_require__.m[moduleId] = __webpack_modules__[moduleId];
+        if (__webpack_runtime__) __webpack_runtime__(__webpack_require__);
+        for(; i < __webpack_ids__.length; i++){
+            chunkId = __webpack_ids__[i];
+            if (__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) installedChunks[chunkId][0]();
+            installedChunks[__webpack_ids__[i]] = 0;
+        }
+    };
+    __webpack_require__.f.j = function(chunkId, promises) {
+        var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : void 0;
+        if (0 !== installedChunkData) if (installedChunkData) promises.push(installedChunkData[1]);
+        else {
+            var promise = import("./" + __webpack_require__.u(chunkId)).then(installChunk, (e)=>{
+                if (0 !== installedChunks[chunkId]) installedChunks[chunkId] = void 0;
+                throw e;
+            });
+            var promise = Promise.race([
+                promise,
+                new Promise((resolve)=>{
+                    installedChunkData = installedChunks[chunkId] = [
+                        resolve
+                    ];
+                })
+            ]);
+            promises.push(installedChunkData[1] = promise);
+        }
+    };
+})();
+const lynxUniqueIdAttribute = 'l-uid';
+const cssIdAttribute = 'l-css-id';
+const componentIdAttribute = 'l-comp-id';
+const parentComponentUniqueIdAttribute = 'l-p-comp-uid';
+const lynxTagAttribute = 'lynx-tag';
+const lynxDatasetAttribute = 'l-dset';
+const lynxComponentConfigAttribute = 'l-comp-cfg';
+const lynxDisposedAttribute = 'l-disposed';
+const lynxElementTemplateMarkerAttribute = 'l-template';
+const lynxPartIdAttribute = 'l-part';
+const lynxDefaultDisplayLinearAttribute = 'lynx-default-display-linear';
+const __lynx_timing_flag = '__lynx_timing_flag';
+const globalMuteableVars = [
+    'registerDataProcessor',
+    'registerWorkletInternal',
+    'lynxWorkletImpl',
+    'runWorklet'
+];
+const systemInfo = {
+    platform: 'web',
+    lynxSdkVersion: '3.0'
+};
+const inShadowRootStyles = [
+    ` [lynx-default-display-linear="false"] * {
+    --lynx-display: flex;
+    --lynx-display-toggle: var(--lynx-display-flex);
+  }`,
+    `[lynx-default-overflow-visible="true"] x-view{
+    overflow: visible;
+  }`
+];
+const W3cEventNameToLynx = {
+    click: 'tap',
+    lynxscroll: 'scroll',
+    lynxscrollend: 'scrollend',
+    overlaytouch: 'touch',
+    lynxfocus: 'focus',
+    lynxblur: 'blur',
+    lynxinput: 'input'
+};
+const LynxEventNameToW3cByTagName = {
+    'X-INPUT': {
+        blur: 'lynxblur',
+        focus: 'lynxfocus',
+        input: 'lynxinput'
+    },
+    'X-TEXTAREA': {
+        blur: 'lynxblur',
+        focus: 'lynxfocus',
+        input: 'lynxinput'
+    }
+};
+const LynxEventNameToW3cCommon = {
+    tap: 'click',
+    scroll: 'lynxscroll',
+    scrollend: 'lynxscrollend',
+    touch: 'overlaytouch'
+};
+class Rpc {
+    port;
+    name;
+    incId = 0;
+    #messageCache = {};
+    #textEncoder = new TextEncoder();
+    #textDecoder = new TextDecoder();
+    #handlerMap = new Map();
+    constructor(port, name){
+        this.port = port;
+        this.name = name;
+        port.onmessage = (ev)=>this.#onMessage(ev.data);
+    }
+    get nextRetId() {
+        return `ret_${this.name}_${this.incId++}`;
+    }
+    static createRetEndpoint(retId) {
+        return {
+            name: retId,
+            hasReturn: false,
+            isSync: false
+        };
+    }
+    #onMessage = async (message)=>{
+        const handler1 = this.#handlerMap.get(message.name);
+        if (handler1) {
+            const lockViewer = message.sync ? new Int32Array(message.lock) : void 0;
+            const replyTempEndpoint = !message.sync && message.retId ? Rpc.createRetEndpoint(message.retId) : void 0;
+            try {
+                const result = await handler1(...message.data);
+                let retData, transfer = [];
+                if (message.sync) retData = result;
+                else if (message.hasTransfer) ({ data: retData, transfer } = result || {});
+                else retData = result;
+                if (message.sync) {
+                    if (message.buf) {
+                        const retStr = JSON.stringify(retData);
+                        const lengthViewer = new Uint32Array(message.buf, 0, 1);
+                        const bufViewer = new Uint8Array(message.buf, 4);
+                        const retCache = new Uint8Array(message.buf.byteLength - 4);
+                        const { written: byteLength } = this.#textEncoder.encodeInto(retStr, retCache);
+                        lengthViewer[0] = byteLength;
+                        bufViewer.set(retCache, 0);
+                    }
+                    Atomics.store(lockViewer, 0, 1);
+                    Atomics.notify(lockViewer, 0);
+                } else if (message.retId) this.invoke(replyTempEndpoint, [
+                    retData,
+                    false
+                ], transfer || []);
+            } catch (e) {
+                console.error(e);
+                if (message.sync) {
+                    Atomics.store(lockViewer, 0, 2);
+                    Atomics.notify(lockViewer, 0);
+                    lockViewer[1] = 2;
+                } else this.invoke(replyTempEndpoint, [
+                    void 0,
+                    true
+                ]);
+            }
+        } else {
+            const cache = this.#messageCache[message.name];
+            if (cache) cache.push(message);
+            else this.#messageCache[message.name] = [
+                message
+            ];
+        }
+    };
+    createCall(endpoint) {
+        return (...args)=>this.invoke(endpoint, args);
+    }
+    registerHandler(endpoint, handler1) {
+        this.#handlerMap.set(endpoint.name, handler1);
+        const currentCache = this.#messageCache[endpoint.name];
+        if (currentCache?.length) {
+            this.#messageCache[endpoint.name] = void 0;
+            for (const message of currentCache)this.#onMessage(message);
+        }
+    }
+    registerHandlerRef(endpoint, target, propertyName) {
+        this.registerHandler(endpoint, (...args)=>target[propertyName]?.call(target, ...args));
+    }
+    registerHandlerLazy(endpoint, target, propertyName) {
+        if (target[propertyName]) this.registerHandlerRef(endpoint, target, propertyName);
+        else {
+            let property;
+            const rpc = this;
+            Object.defineProperty(target, propertyName, {
+                get () {
+                    return property;
+                },
+                set (v) {
+                    property = v;
+                    if (v) rpc.registerHandlerRef(endpoint, target, propertyName);
+                }
+            });
+        }
+    }
+    removeHandler(rpc) {
+        this.#handlerMap.delete(rpc.name);
+    }
+    invoke(endpoint, parameters, transfer = []) {
+        if (endpoint.isSync) {
+            const sharedBuffer = endpoint.bufferSize ? new SharedArrayBuffer(endpoint.bufferSize + 4) : void 0;
+            const lock = new SharedArrayBuffer(4);
+            const lockViewer = new Int32Array(lock);
+            lockViewer[0] = 0;
+            const message = {
+                name: endpoint.name,
+                data: parameters,
+                sync: true,
+                lock: lock,
+                buf: sharedBuffer
+            };
+            this.port.postMessage(message, {
+                transfer
+            });
+            Atomics.wait(lockViewer, 0, 0);
+            if (2 === lockViewer[0]) throw null;
+            if (!sharedBuffer) return;
+            {
+                const byteLength = new Uint32Array(sharedBuffer, 0, 4)[0];
+                const sharedBufferView = new Uint8Array(sharedBuffer, 4, byteLength);
+                const localBuf = new Uint8Array(byteLength);
+                localBuf.set(sharedBufferView, 0);
+                const ret = localBuf ? JSON.parse(this.#textDecoder.decode(localBuf)) : void 0;
+                return ret;
+            }
+        }
+        if (endpoint.hasReturn) {
+            const { promise, resolve, reject } = Promise.withResolvers();
+            const retHandler = Rpc.createRetEndpoint(this.nextRetId);
+            this.registerHandler(retHandler, (returnValue, error)=>{
+                if (error) reject();
+                resolve(returnValue);
+            });
+            const message = {
+                name: endpoint.name,
+                data: parameters,
+                sync: false,
+                retId: retHandler?.name,
+                hasTransfer: endpoint.hasReturnTransfer
+            };
+            this.port.postMessage(message, {
+                transfer
+            });
+            return promise;
+        }
+        {
+            const message = {
+                name: endpoint.name,
+                data: parameters,
+                sync: false
+            };
+            this.port.postMessage(message, {
+                transfer
+            });
+        }
+    }
+    createCallbackify(endpoint, callbackAt) {
+        const call = this.createCall(endpoint);
+        return (...params)=>{
+            const callback = params.at(callbackAt);
+            params.splice(callbackAt, 1);
+            call(...params).then(callback);
+        };
+    }
+}
+function createRpcEndpoint(name, isSync, hasReturn = true, hasReturnTransfer = false, bufferSize) {
+    return {
+        name,
+        isSync,
+        hasReturn,
+        hasReturnTransfer,
+        bufferSize
+    };
+}
+const postExposureEndpoint = createRpcEndpoint('__postExposure', false, false);
+const publicComponentEventEndpoint = createRpcEndpoint('publicComponentEvent', false, false);
+const publishEventEndpoint = createRpcEndpoint('publishEvent', false, false);
+createRpcEndpoint('postOffscreenEventEndpoint', false, false);
+const switchExposureServiceEndpoint = createRpcEndpoint('switchExposureServiceEndpoint', false, false);
+createRpcEndpoint('mainThreadStart', false, false);
+createRpcEndpoint('updateData', false, true);
+createRpcEndpoint('sendGlobalEventEndpoint', false, false);
+createRpcEndpoint('dispose', false, true);
+const BackgroundThreadStartEndpoint = createRpcEndpoint('start', false, true);
+createRpcEndpoint('reportError', false, false);
+createRpcEndpoint('flushElementTree', false, true);
+const callLepusMethodEndpoint = createRpcEndpoint('callLepusMethod', false, true);
+createRpcEndpoint('multiThreadExposureChangedEndpoint', false, false);
+createRpcEndpoint('__invokeUIMethod', false, true);
+createRpcEndpoint('__setNativeProps', false, true);
+createRpcEndpoint('nativeModulesCall', false, true);
+createRpcEndpoint('napiModulesCall', false, true, true);
+const getCustomSectionsEndpoint = createRpcEndpoint('getCustomSections', false, true);
+createRpcEndpoint('markTiming', false, false);
+const postTimingFlagsEndpoint = createRpcEndpoint('postTimingFlags', false, false);
+createRpcEndpoint('__triggerComponentEvent', false, false);
+createRpcEndpoint('__selectComponent', false, true);
+createRpcEndpoint('dispatchLynxViewEvent', false, false);
+createRpcEndpoint('dispatchNapiModule', false, false);
+const dispatchCoreContextOnBackgroundEndpoint = createRpcEndpoint('dispatchCoreContextOnBackground', false, false);
+const dispatchJSContextOnMainThreadEndpoint = createRpcEndpoint('dispatchJSContextOnMainThread', false, false);
+createRpcEndpoint('__triggerElementMethod', false, false);
+createRpcEndpoint('updateGlobalProps', false, false);
+createRpcEndpoint('updateI18nResources', false, false);
+createRpcEndpoint('updateI18nResource', false, false);
+const dispatchI18nResourceEndpoint = createRpcEndpoint('dispatchI18nResource', false, false);
+var NativeApp_IdentifierType;
+(function(IdentifierType) {
+    IdentifierType[IdentifierType["ID_SELECTOR"] = 0] = "ID_SELECTOR";
+    IdentifierType[IdentifierType["REF_ID"] = 1] = "REF_ID";
+    IdentifierType[IdentifierType["UNIQUE_ID"] = 2] = "UNIQUE_ID";
+})(NativeApp_IdentifierType || (NativeApp_IdentifierType = {}));
+var NativeApp_ErrorCode;
+(function(ErrorCode) {
+    ErrorCode[ErrorCode["SUCCESS"] = 0] = "SUCCESS";
+    ErrorCode[ErrorCode["UNKNOWN"] = 1] = "UNKNOWN";
+    ErrorCode[ErrorCode["NODE_NOT_FOUND"] = 2] = "NODE_NOT_FOUND";
+    ErrorCode[ErrorCode["METHOD_NOT_FOUND"] = 3] = "METHOD_NOT_FOUND";
+    ErrorCode[ErrorCode["PARAM_INVALID"] = 4] = "PARAM_INVALID";
+    ErrorCode[ErrorCode["SELECTOR_NOT_SUPPORTED"] = 5] = "SELECTOR_NOT_SUPPORTED";
+    ErrorCode[ErrorCode["NO_UI_FOR_NODE"] = 6] = "NO_UI_FOR_NODE";
+})(NativeApp_ErrorCode || (NativeApp_ErrorCode = {}));
+var UpdateDataOptions_NativeUpdateDataType;
+(function(NativeUpdateDataType) {
+    NativeUpdateDataType[NativeUpdateDataType["UPDATE"] = 0] = "UPDATE";
+    NativeUpdateDataType[NativeUpdateDataType["RESET"] = 1] = "RESET";
+})(UpdateDataOptions_NativeUpdateDataType || (UpdateDataOptions_NativeUpdateDataType = {}));
+var UpdateDataOptions_UpdateDataType;
+(function(UpdateDataType) {
+    UpdateDataType[UpdateDataType["Unknown"] = 0] = "Unknown";
+    UpdateDataType[UpdateDataType["UpdateExplicitByUser"] = 1] = "UpdateExplicitByUser";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromCtor"] = 2] = "UpdateByKernelFromCtor";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromRender"] = 4] = "UpdateByKernelFromRender";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromHydrate"] = 8] = "UpdateByKernelFromHydrate";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromGetDerived"] = 16] = "UpdateByKernelFromGetDerived";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromConflict"] = 32] = "UpdateByKernelFromConflict";
+    UpdateDataType[UpdateDataType["UpdateByKernelFromHMR"] = 64] = "UpdateByKernelFromHMR";
+})(UpdateDataOptions_UpdateDataType || (UpdateDataOptions_UpdateDataType = {}));
+const DispatchEventResult = {
+    NotCanceled: 0,
+    CanceledByEventHandler: 1,
+    CanceledByDefaultEventHandler: 2,
+    CanceledBeforeDispatch: 3
+};
+var Element_AnimationOperation;
+(function(AnimationOperation) {
+    AnimationOperation[AnimationOperation["START"] = 0] = "START";
+    AnimationOperation[AnimationOperation["PLAY"] = 1] = "PLAY";
+    AnimationOperation[AnimationOperation["PAUSE"] = 2] = "PAUSE";
+    AnimationOperation[AnimationOperation["CANCEL"] = 3] = "CANCEL";
+    AnimationOperation[AnimationOperation["FINISH"] = 4] = "FINISH";
+})(Element_AnimationOperation || (Element_AnimationOperation = {}));
+const getCacheI18nResourcesKey = (options)=>`${options.locale}_${options.channel}_${options.fallback_url}`;
+class I18nResources {
+    data;
+    constructor(data){
+        this.data = data;
+    }
+    setData(data) {
+        this.data = data;
+    }
+}
+class LynxCrossThreadContext extends EventTarget {
+    _config;
+    constructor(_config){
+        super();
+        this._config = _config;
+    }
+    postMessage(...args) {
+        console.error('[lynx-web] postMessage not implemented, args:', ...args);
+    }
+    dispatchEvent(event) {
+        const { rpc, sendEventEndpoint } = this._config;
+        rpc.invoke(sendEventEndpoint, [
+            event
+        ]);
+        return DispatchEventResult.CanceledBeforeDispatch;
+    }
+    __start() {
+        const { rpc, receiveEventEndpoint } = this._config;
+        rpc.registerHandler(receiveEventEndpoint, ({ type, data })=>{
+            super.dispatchEvent(new MessageEvent(type, {
+                data: data ?? {}
+            }));
+        });
+    }
+}
+const mainThreadInjectVars = [
+    'lynx',
+    'globalThis',
+    '_ReportError',
+    '_SetSourceMapRelease',
+    '__AddConfig',
+    '__AddDataset',
+    '__GetAttributes',
+    '__GetComponentID',
+    '__GetDataByKey',
+    '__GetDataset',
+    '__GetElementConfig',
+    '__GetElementUniqueID',
+    '__GetID',
+    '__GetTag',
+    '__SetAttribute',
+    '__SetConfig',
+    '__SetDataset',
+    '__SetID',
+    '__UpdateComponentID',
+    '__GetConfig',
+    '__UpdateListCallbacks',
+    '__AppendElement',
+    '__ElementIsEqual',
+    '__FirstElement',
+    '__GetChildren',
+    '__GetParent',
+    '__InsertElementBefore',
+    '__LastElement',
+    '__NextElement',
+    '__RemoveElement',
+    '__ReplaceElement',
+    '__ReplaceElements',
+    '__SwapElement',
+    '__CreateComponent',
+    '__CreateElement',
+    '__CreatePage',
+    '__CreateView',
+    '__CreateText',
+    '__CreateRawText',
+    '__CreateImage',
+    '__CreateScrollView',
+    '__CreateWrapperElement',
+    '__CreateList',
+    '__AddEvent',
+    '__GetEvent',
+    '__GetEvents',
+    '__SetEvents',
+    '__AddClass',
+    '__SetClasses',
+    '__GetClasses',
+    '__AddInlineStyle',
+    '__SetInlineStyles',
+    '__SetCSSId',
+    '__OnLifecycleEvent',
+    '__FlushElementTree',
+    '__LoadLepusChunk',
+    'SystemInfo',
+    '_I18nResourceTranslation',
+    '_AddEventListener',
+    '__GetTemplateParts',
+    '__MarkPartElement',
+    '__MarkTemplateElement',
+    '__GetPageElement',
+    '__ElementFromBinary'
+];
+const backgroundInjectVars = [
+    'NativeModules',
+    'globalThis',
+    'lynx',
+    'lynxCoreInject',
+    'SystemInfo'
+];
+const backgroundInjectWithBind = [
+    'Card',
+    'Component'
+];
+async function generateJavascriptUrl(obj, injectVars, injectWithBind, muteableVars, createJsModuleUrl, templateName) {
+    injectVars = injectVars.concat(muteableVars);
+    const generateModuleContent = (content)=>[
+            '//# allFunctionsCalledOnLoad\n',
+            'globalThis.module.exports = function(lynx_runtime) {',
+            'const module= {exports:{}};let exports = module.exports;',
+            'var {',
+            injectVars.join(','),
+            '} = lynx_runtime;',
+            ...injectWithBind.map((nm)=>`const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime);`),
+            ';var globDynamicComponentEntry = \'__Card__\';',
+            'var {__globalProps} = lynx;',
+            'lynx_runtime._updateVars=()=>{',
+            ...muteableVars.map((nm)=>`${nm} = lynx_runtime.__lynxGlobalBindingValues.${nm};`),
+            '};\n',
+            content,
+            '\n return module.exports;}'
+        ].join('');
+    const processEntry = templateName ? async ([name, content])=>[
+            name,
+            await createJsModuleUrl(generateModuleContent(content), `${templateName}-${name.replaceAll('/', '')}.js`)
+        ] : async ([name, content])=>[
+            name,
+            await createJsModuleUrl(generateModuleContent(content))
+        ];
+    return Promise.all(Object.entries(obj).filter(([_, content])=>'string' == typeof content).map(processEntry)).then(Object.fromEntries);
+}
+async function generateTemplate(template, createJsModuleUrl, templateName) {
+    if (!templateName) return {
+        ...template,
+        lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, createJsModuleUrl),
+        manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], createJsModuleUrl)
+    };
+    return {
+        ...template,
+        lepusCode: await generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, [], globalMuteableVars, createJsModuleUrl, templateName),
+        manifest: await generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind, [], createJsModuleUrl, templateName)
+    };
+}
+function registerCallLepusMethodHandler(rpc, runtime) {
+    rpc.registerHandler(callLepusMethodEndpoint, (methodName, data)=>{
+        runtime[methodName](data);
+    });
+}
+function registerGetCustomSectionHandler(rpc, customSections) {
+    rpc.registerHandler(getCustomSectionsEndpoint, (key)=>customSections[key]?.content);
+}
+function createMainThreadLynx(config) {
+    return {
+        getJSContext () {
+            return config.jsContext;
+        },
+        requestAnimationFrame (cb) {
+            return requestAnimationFrame(cb);
+        },
+        cancelAnimationFrame (handler1) {
+            return cancelAnimationFrame(handler1);
+        },
+        __globalProps: config.globalProps,
+        getCustomSectionSync (key) {
+            return config.customSections[key]?.content;
+        },
+        markPipelineTiming: config.callbacks.markTiming
+    };
+}
+const referenceTypes = async ()=>WebAssembly.validate(new Uint8Array([
+        0,
+        97,
+        115,
+        109,
+        1,
+        0,
+        0,
+        0,
+        1,
+        4,
+        1,
+        96,
+        0,
+        0,
+        3,
+        2,
+        1,
+        0,
+        10,
+        7,
+        1,
+        5,
+        0,
+        208,
+        112,
+        26,
+        11
+    ]));
+let wasm;
+async function initWasm() {
+    const supportsReferenceTypes = await referenceTypes();
+    wasm = supportsReferenceTypes ? await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/standard.js")) : await __webpack_require__.e("501").then(__webpack_require__.bind(__webpack_require__, "../web-style-transformer/legacy.js"));
+}
+let HEAPU16;
+const stringToUTF16 = (str)=>{
+    const len = str.length;
+    const ptr = wasm.malloc(len << 1);
+    if (!HEAPU16 || 0 == HEAPU16.byteLength) HEAPU16 = new Uint16Array(wasm.memory.buffer);
+    for(let i = 0; i < len; i++)HEAPU16[(ptr >> 1) + i] = str.charCodeAt(i);
+    return {
+        ptr,
+        len
+    };
+};
+function transformInlineStyleString(str) {
+    const { ptr, len } = stringToUTF16(str);
+    try {
+        const transformedStyle = wasm.transform_raw_u16_inline_style_ptr(ptr, len) ?? str;
+        wasm.free(ptr, len << 1);
+        return transformedStyle;
+    } catch (e) {
+        wasm.free(ptr, len << 1);
+        throw e;
+    }
+}
+function transformParsedStyles(styles) {
+    let childStyle = [];
+    let transformedStyle = [];
+    for (const [property, value] of styles){
+        const { ptr: propertyPtr, len: propertyLen } = stringToUTF16(property);
+        const { ptr: valuePtr, len: valueLen } = stringToUTF16(value);
+        try {
+            const transformedResult = wasm.transform_raw_u16_inline_style_ptr_parsed(propertyPtr, propertyLen, valuePtr, valueLen);
+            wasm.free(propertyPtr, propertyLen << 1);
+            wasm.free(valuePtr, valueLen << 1);
+            if (transformedResult) {
+                const [transformedStyleForCurrent, childStyleForCurrent] = transformedResult;
+                transformedStyle = transformedStyle.concat(transformedStyleForCurrent);
+                if (childStyleForCurrent) childStyle = childStyle.concat(childStyleForCurrent);
+            } else transformedStyle.push([
+                property,
+                value
+            ]);
+        } catch (e) {
+            wasm.free(propertyPtr, propertyLen << 1);
+            wasm.free(valuePtr, valueLen << 1);
+            throw e;
+        }
+    }
+    return {
+        childStyle,
+        transformedStyle
+    };
+}
+function flattenStyleInfo(styleInfo, enableCSSSelector) {
+    function flattenOneStyleInfo(cssId) {
+        const oneInfo = styleInfo[cssId];
+        const imports = oneInfo?.imports;
+        if (oneInfo && imports?.length) {
+            for (const im of imports){
+                const flatInfo = flattenOneStyleInfo(im);
+                if (flatInfo) {
+                    oneInfo.content.push(...flatInfo.content);
+                    oneInfo.rules.push(...enableCSSSelector ? flatInfo.rules : flatInfo.rules.map((i)=>({
+                            ...i
+                        })));
+                }
+            }
+            oneInfo.imports = void 0;
+        }
+        return oneInfo;
+    }
+    Object.keys(styleInfo).map((cssId)=>{
+        flattenOneStyleInfo(cssId);
+    });
+}
+function transformToWebCss(styleInfo) {
+    for (const cssInfos of Object.values(styleInfo))for (const rule of cssInfos.rules){
+        const { sel: selectors, decl: declarations } = rule;
+        const { transformedStyle, childStyle } = transformParsedStyles(declarations);
+        rule.decl = transformedStyle;
+        if (childStyle.length > 0) cssInfos.rules.push({
+            sel: selectors.map((selector)=>selector.toSpliced(-2, 1, [
+                    '>'
+                ], [
+                    '*'
+                ], [], [], [])),
+            decl: childStyle
+        });
+    }
+}
+function genCssContent(styleInfo, pageConfig) {
+    function getExtraSelectors(cssId) {
+        let suffix = '';
+        if (pageConfig.enableRemoveCSSScope) suffix += `[${lynxTagAttribute}]`;
+        else if (void 0 !== cssId) suffix += `[${cssIdAttribute}="${cssId}"]`;
+        else suffix += `[${lynxTagAttribute}]`;
+        return suffix;
+    }
+    const finalCssContent = [];
+    for (const [cssId, cssInfos] of Object.entries(styleInfo)){
+        const suffix = getExtraSelectors(cssId);
+        const declarationContent = cssInfos.rules.map((rule)=>{
+            const { sel: selectorList, decl: declarations } = rule;
+            const selectorString = selectorList.map((selectors)=>selectors.toSpliced(-4, 0, [
+                    suffix
+                ]).flat().join('')).join(',');
+            const declarationString = declarations.map(([k, v])=>`${k}:${v};`).join('');
+            return `${selectorString}{${declarationString}}`;
+        }).join('');
+        finalCssContent.push(...cssInfos.content, declarationContent);
+    }
+    return finalCssContent.join('\n');
+}
+function genCssOGInfo(styleInfo) {
+    return Object.fromEntries(Object.entries(styleInfo).map(([cssId, cssInfos])=>{
+        const oneCssOGInfo = {};
+        cssInfos.rules = cssInfos.rules.filter((oneCssInfo)=>{
+            oneCssInfo.sel = oneCssInfo.sel.filter((selectorList)=>{
+                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator] = selectorList;
+                if (1 === classSelectors.length && '.' === classSelectors[0][0] && 0 === pseudoClassSelectors.length && 0 === pseudoElementSelectors.length && 0 === combinator.length) {
+                    const selectorName = classSelectors[0].substring(1);
+                    const currentDeclarations = oneCssOGInfo[selectorName];
+                    if (currentDeclarations) currentDeclarations.push(...oneCssInfo.decl);
+                    else oneCssOGInfo[selectorName] = oneCssInfo.decl;
+                    return false;
+                }
+                return true;
+            });
+            return oneCssInfo.sel.length > 0;
+        });
+        return [
+            cssId,
+            oneCssOGInfo
+        ];
+    }));
+}
+const cacheForCamelize = {};
+function camelize(str) {
+    if (cacheForCamelize[str]) return cacheForCamelize[str];
+    const result = (str + '').replace(/-\D/g, function(match) {
+        return match.charAt(1).toUpperCase();
+    });
+    cacheForCamelize[str] = result;
+    return result;
+}
+let cssPropertyMap_index = 1;
+const cssPropertyMap = {};
+const cssPropertyReverseMap = {};
+const V = (name)=>{
+    const k = cssPropertyMap_index++;
+    const isX = name.startsWith('-x-');
+    cssPropertyMap[k] = {
+        name: camelize(name),
+        dashName: name,
+        isX
+    };
+    cssPropertyReverseMap[name] = k;
+};
+V('top');
+V('left');
+V('right');
+V('bottom');
+V('position');
+V('box-sizing');
+V('background-color');
+V('border-left-color');
+V('border-right-color');
+V('border-top-color');
+V('border-bottom-color');
+V('border-radius');
+V('border-top-left-radius');
+V('border-bottom-left-radius');
+V('border-top-right-radius');
+V('border-bottom-right-radius');
+V('border-width');
+V('border-left-width');
+V('border-right-width');
+V('border-top-width');
+V('border-bottom-width');
+V('color');
+V('opacity');
+V('display');
+V('overflow');
+V('height');
+V('width');
+V('max-width');
+V('min-width');
+V('max-height');
+V('min-height');
+V('padding');
+V('padding-left');
+V('padding-right');
+V('padding-top');
+V('padding-bottom');
+V('margin');
+V('margin-left');
+V('margin-right');
+V('margin-top');
+V('margin-bottom');
+V('white-space');
+V('letter-spacing');
+V('text-align');
+V('line-height');
+V('text-overflow');
+V('font-size');
+V('font-weight');
+V('flex');
+V('flex-grow');
+V('flex-shrink');
+V('flex-basis');
+V('flex-direction');
+V('flex-wrap');
+V('align-items');
+V('align-self');
+V('align-content');
+V('justify-content');
+V('background');
+V('border-color');
+V('font-family');
+V('font-style');
+V('transform');
+V('animation');
+V('animation-name');
+V('animation-duration');
+V('animation-timing-function');
+V('animation-delay');
+V('animation-iteration-count');
+V('animation-direction');
+V('animation-fill-mode');
+V('animation-play-state');
+V('line-spacing');
+V('border-style');
+V('order');
+V('box-shadow');
+V('transform-origin');
+V('linear-orientation');
+V('linear-weight-sum');
+V('linear-weight');
+V('linear-gravity');
+V('linear-layout-gravity');
+V('layout-animation-create-duration');
+V('layout-animation-create-timing-function');
+V('layout-animation-create-delay');
+V('layout-animation-create-property');
+V('layout-animation-delete-duration');
+V('layout-animation-delete-timing-function');
+V('layout-animation-delete-delay');
+V('layout-animation-delete-property');
+V('layout-animation-update-duration');
+V('layout-animation-update-timing-function');
+V('layout-animation-update-delay');
+V('adapt-font-size');
+V('aspect-ratio');
+V('text-decoration');
+V('text-shadow');
+V('background-image');
+V('background-position');
+V('background-origin');
+V('background-repeat');
+V('background-size');
+V('border');
+V('visibility');
+V('border-right');
+V('border-left');
+V('border-top');
+V('border-bottom');
+V('transition');
+V('transition-property');
+V('transition-duration');
+V('transition-delay');
+V('transition-timing-function');
+V('content');
+V('border-left-style');
+V('border-right-style');
+V('border-top-style');
+V('border-bottom-style');
+V('implicit-animation');
+V('overflow-x');
+V('overflow-y');
+V('word-break');
+V('background-clip');
+V('outline');
+V('outline-color');
+V('outline-style');
+V('outline-width');
+V('vertical-align');
+V('caret-color');
+V('direction');
+V('relative-id');
+V('relative-align-top');
+V('relative-align-right');
+V('relative-align-bottom');
+V('relative-align-left');
+V('relative-top-of');
+V('relative-right-of');
+V('relative-bottom-of');
+V('relative-left-of');
+V('relative-layout-once');
+V('relative-center');
+V('enter-transition-name');
+V('exit-transition-name');
+V('pause-transition-name');
+V('resume-transition-name');
+V('flex-flow');
+V('z-index');
+V('text-decoration-color');
+V('linear-cross-gravity');
+V('margin-inline-start');
+V('margin-inline-end');
+V('padding-inline-start');
+V('padding-inline-end');
+V('border-inline-start-color');
+V('border-inline-end-color');
+V('border-inline-start-width');
+V('border-inline-end-width');
+V('border-inline-start-style');
+V('border-inline-end-style');
+V('border-start-start-radius');
+V('border-end-start-radius');
+V('border-start-end-radius');
+V('border-end-end-radius');
+V('relative-align-inline-start');
+V('relative-align-inline-end');
+V('relative-inline-start-of');
+V('relative-inline-end-of');
+V('inset-inline-start');
+V('inset-inline-end');
+V('mask-image');
+V('grid-template-columns');
+V('grid-template-rows');
+V('grid-auto-columns');
+V('grid-auto-rows');
+V('grid-column-span');
+V('grid-row-span');
+V('grid-column-start');
+V('grid-column-end');
+V('grid-row-start');
+V('grid-row-end');
+V('grid-column-gap');
+V('grid-row-gap');
+V('justify-items');
+V('justify-self');
+V('grid-auto-flow');
+V('filter');
+V('list-main-axis-gap');
+V('list-cross-axis-gap');
+V('linear-direction');
+V('perspective');
+V('cursor');
+V('text-indent');
+V('clip-path');
+V('text-stroke');
+V('text-stroke-width');
+V('text-stroke-color');
+V('-x-auto-font-size');
+V('-x-auto-font-size-preset-sizes');
+V('mask');
+V('mask-repeat');
+V('mask-position');
+V('mask-clip');
+V('mask-origin');
+V('mask-size');
+V('gap');
+V('column-gap');
+V('row-gap');
+V('image-rendering');
+V('hyphens');
+V('-x-app-region');
+V('-x-animation-color-interpolation');
+V('-x-handle-color');
+V('-x-handle-size');
+V('offset-path');
+V('offset-distance');
+function queryCSSProperty(index) {
+    return cssPropertyMap[index];
+}
+var uppercasePattern = /[A-Z]/g;
+var msPattern = /^ms-/;
+var hyphenate_style_name_cache = {};
+function toHyphenLower(match) {
+    return '-' + match.toLowerCase();
+}
+function hyphenateStyleName(name) {
+    if (hyphenate_style_name_cache.hasOwnProperty(name)) return hyphenate_style_name_cache[name];
+    var hName = name.replace(uppercasePattern, toHyphenLower);
+    return hyphenate_style_name_cache[name] = msPattern.test(hName) ? '-' + hName : hName;
+}
+const hyphenate_style_name = hyphenateStyleName;
+const __AppendElement = /*#__PURE__*/ (parent, child)=>parent.appendChild(child);
+const __ElementIsEqual = /*#__PURE__*/ (left, right)=>left === right;
+const __FirstElement = /*#__PURE__*/ (element)=>element.firstElementChild;
+const __GetChildren = /*#__PURE__*/ (element)=>element.children ? [
+        ...element.children
+    ] : null;
+const __GetParent = /*#__PURE__*/ (element)=>element.parentElement;
+const __InsertElementBefore = /*#__PURE__*/ (parent, child, ref)=>parent.insertBefore(child, ref);
+const __LastElement = /*#__PURE__*/ (element)=>element.lastElementChild;
+const __NextElement = /*#__PURE__*/ (element)=>element.nextElementSibling;
+const __RemoveElement = /*#__PURE__*/ (parent, child)=>parent.removeChild(child);
+const __ReplaceElement = /*#__PURE__*/ (newElement, oldElement)=>oldElement.replaceWith(newElement);
+const __ReplaceElements = /*#__PURE__*/ (parent, newChildren, oldChildren)=>{
+    newChildren = Array.isArray(newChildren) ? newChildren : [
+        newChildren
+    ];
+    if (!oldChildren || Array.isArray(oldChildren) && oldChildren?.length === 0) parent.append(...newChildren);
+    else {
+        oldChildren = Array.isArray(oldChildren) ? oldChildren : [
+            oldChildren
+        ];
+        for(let ii = 1; ii < oldChildren.length; ii++)__RemoveElement(parent, oldChildren[ii]);
+        const firstOldChildren = oldChildren[0];
+        firstOldChildren.replaceWith(...newChildren);
+    }
+};
+const __AddConfig = /*#__PURE__*/ (element, type, value)=>{
+    const currentComponentConfigString = element.getAttribute(lynxComponentConfigAttribute);
+    let currentComponentConfig = currentComponentConfigString ? JSON.parse(decodeURIComponent(currentComponentConfigString)) : {};
+    currentComponentConfig[type] = value;
+    element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(currentComponentConfig)));
+};
+const __AddDataset = /*#__PURE__*/ (element, key, value)=>{
+    const currentDataset = __GetDataset(element);
+    currentDataset[key] = value;
+    element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(currentDataset)));
+    value ? element.setAttribute('data-' + key, value.toString()) : element.removeAttribute('data-' + key);
+};
+const __GetDataset = /*#__PURE__*/ (element)=>{
+    const datasetString = element.getAttribute(lynxDatasetAttribute);
+    const currentDataset = datasetString ? JSON.parse(decodeURIComponent(datasetString)) : {};
+    return currentDataset;
+};
+const __GetDataByKey = /*#__PURE__*/ (element, key)=>{
+    const dataset = __GetDataset(element);
+    return dataset[key];
+};
+const __GetAttributes = /*#__PURE__*/ (element)=>Object.fromEntries(element.getAttributeNames().map((attributeName)=>[
+            attributeName,
+            element.getAttribute(attributeName)
+        ]).filter(([, value])=>value));
+const __GetComponentID = /*#__PURE__*/ (element)=>element.getAttribute(componentIdAttribute);
+const __GetElementConfig = /*#__PURE__*/ (element)=>{
+    const currentComponentConfigString = element.getAttribute(lynxComponentConfigAttribute);
+    return currentComponentConfigString ? JSON.parse(decodeURIComponent(currentComponentConfigString)) : {};
+};
+const __GetElementUniqueID = /*#__PURE__*/ (element)=>element && element.getAttribute ? Number(element.getAttribute(lynxUniqueIdAttribute)) : -1;
+const __GetID = /*#__PURE__*/ (element)=>element.getAttribute('id');
+const __SetID = /*#__PURE__*/ (element, id)=>id ? element.setAttribute('id', id) : element.removeAttribute('id');
+const __GetTag = /*#__PURE__*/ (element)=>element.getAttribute(lynxTagAttribute);
+const __SetConfig = /*#__PURE__*/ (element, config)=>{
+    element.setAttribute(lynxComponentConfigAttribute, encodeURIComponent(JSON.stringify(config)));
+};
+const __SetDataset = /*#__PURE__*/ (element, dataset)=>{
+    element.setAttribute(lynxDatasetAttribute, encodeURIComponent(JSON.stringify(dataset)));
+    for (const [key, value] of Object.entries(dataset))element.setAttribute('data-' + key, value.toString());
+};
+const __UpdateComponentID = /*#__PURE__*/ (element, componentID)=>element.setAttribute(componentIdAttribute, componentID);
+const __GetClasses = /*#__PURE__*/ (element)=>(element.getAttribute('class') ?? '').split(' ').filter((e)=>e);
+const __SetCSSId = /*#__PURE__*/ (elements, cssId)=>{
+    for (const element of elements)element.setAttribute(cssIdAttribute, cssId + '');
+};
+const __SetClasses = /*#__PURE__*/ (element, classname)=>{
+    classname ? element.setAttribute('class', classname) : element.removeAttribute('class');
+};
+const __AddInlineStyle = /*#__PURE__*/ (element, key, value)=>{
+    let dashName;
+    if ('number' == typeof key) {
+        const queryResult = queryCSSProperty(key);
+        dashName = queryResult.dashName;
+        if (queryResult.isX) console.error(`[lynx-web] css property: ${dashName} is not supported.`);
+    } else dashName = key;
+    const valueStr = 'number' == typeof value ? value.toString() : value;
+    if (valueStr) {
+        const { transformedStyle } = transformParsedStyles([
+            [
+                dashName,
+                valueStr
+            ]
+        ]);
+        for (const [property, value] of transformedStyle)element.style.setProperty(property, value);
+    } else element.style.removeProperty(dashName);
+};
+const __AddClass = /*#__PURE__*/ (element, className)=>{
+    const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className).trim();
+    element.setAttribute('class', newClassName);
+};
+const __SetInlineStyles = /*#__PURE__*/ (element, value)=>{
+    if (!value) return;
+    if ('string' == typeof value) element.setAttribute('style', transformInlineStyleString(value));
+    else {
+        const { transformedStyle } = transformParsedStyles(Object.entries(value).map(([k, value])=>[
+                hyphenate_style_name(k),
+                value?.toString?.() ?? ''
+            ]));
+        const transformedStyleStr = transformedStyle.map(([property, value])=>`${property}:${value};`).join('');
+        element.setAttribute('style', transformedStyleStr);
+    }
+};
+const __GetTemplateParts = (templateElement)=>{
+    const isTemplate = null !== templateElement.getAttribute(lynxElementTemplateMarkerAttribute);
+    if (!isTemplate) return {};
+    const templateUniqueId = __GetElementUniqueID(templateElement);
+    const parts = {};
+    const partElements = templateElement.querySelectorAll(`[${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxPartIdAttribute}]:not([${lynxUniqueIdAttribute}="${templateUniqueId}"] [${lynxElementTemplateMarkerAttribute}] [${lynxPartIdAttribute}])`);
+    for (const partElement of partElements){
+        const partId = partElement.getAttribute(lynxPartIdAttribute);
+        if (partId) parts[partId] = partElement;
+    }
+    return parts;
+};
+const __MarkTemplateElement = (element)=>{
+    element.setAttribute(lynxElementTemplateMarkerAttribute, '');
+};
+const __MarkPartElement = (element, partId)=>{
+    element.setAttribute(lynxPartIdAttribute, partId);
+};
+function toCloneableObject(obj) {
+    const cloneableObj = {};
+    for(const key in obj){
+        const value = obj[key];
+        if ('boolean' == typeof value || 'number' == typeof value || 'string' == typeof value || null === value) cloneableObj[key] = value;
+    }
+    return cloneableObj;
+}
+function createCrossThreadEvent(domEvent, eventName) {
+    const targetElement = domEvent.target;
+    const currentTargetElement = domEvent.currentTarget.getAttribute ? domEvent.currentTarget : void 0;
+    const type = domEvent.type;
+    const params = {};
+    const isTrusted = domEvent.isTrusted;
+    const otherProperties = {};
+    if (type.match(/^transition/)) Object.assign(params, {
+        animation_type: 'keyframe-animation',
+        animation_name: domEvent.propertyName,
+        new_animator: true
+    });
+    else if (type.match(/animation/)) Object.assign(params, {
+        animation_type: 'keyframe-animation',
+        animation_name: domEvent.animationName,
+        new_animator: true
+    });
+    else if (type.startsWith('touch')) {
+        const touchEvent = domEvent;
+        const touch = [
+            ...touchEvent.touches
+        ];
+        const targetTouches = [
+            ...touchEvent.targetTouches
+        ];
+        const changedTouches = [
+            ...touchEvent.changedTouches
+        ];
+        Object.assign(otherProperties, {
+            touches: isTrusted ? touch.map(toCloneableObject) : touch,
+            targetTouches: isTrusted ? targetTouches.map(toCloneableObject) : targetTouches,
+            changedTouches: isTrusted ? changedTouches.map(toCloneableObject) : changedTouches
+        });
+    }
+    const currentTargetDatasetString = currentTargetElement?.getAttribute(lynxDatasetAttribute);
+    const currentTargetDataset = currentTargetDatasetString ? JSON.parse(decodeURIComponent(currentTargetDatasetString)) : {};
+    const targetDatasetString = targetElement.getAttribute(lynxDatasetAttribute);
+    const targetDataset = targetDatasetString ? JSON.parse(decodeURIComponent(targetDatasetString)) : {};
+    return {
+        type: eventName,
+        timestamp: domEvent.timeStamp,
+        target: {
+            id: targetElement.getAttribute('id'),
+            dataset: targetDataset,
+            uniqueId: Number(targetElement.getAttribute(lynxUniqueIdAttribute))
+        },
+        currentTarget: currentTargetElement ? {
+            id: currentTargetElement.getAttribute('id'),
+            dataset: currentTargetDataset,
+            uniqueId: Number(currentTargetElement.getAttribute(lynxUniqueIdAttribute))
+        } : null,
+        detail: domEvent.detail ?? {},
+        params,
+        ...otherProperties
+    };
+}
+function decodeCssOG(classes, styleInfo, cssId) {
+    const classList = classes.split(' ').filter((e)=>e);
+    let declarations = [];
+    const currentStyleInfo = styleInfo[cssId ?? '0'];
+    if (currentStyleInfo) for (const oneClassName of classList){
+        const oneRule = currentStyleInfo[oneClassName];
+        if (oneRule) declarations.push(...oneRule);
+    }
+    else console.warn(`[lynx-web] cannot find styleinfo for cssid ${cssId}`);
+    return declarations.map(([property, value])=>`${property}:${value};`).join('');
+}
+const exposureRelatedAttributes = new Set([
+    'exposure-id',
+    'exposure-area',
+    'exposure-screen-margin-top',
+    'exposure-screen-margin-right',
+    'exposure-screen-margin-bottom',
+    'exposure-screen-margin-left',
+    'exposure-ui-margin-top',
+    'exposure-ui-margin-right',
+    'exposure-ui-margin-bottom',
+    'exposure-ui-margin-left'
+]);
+function createMainThreadGlobalThis(config) {
+    let timingFlags = [];
+    let renderPage;
+    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks } = config;
+    const lynxUniqueIdToElement = ssrHydrateInfo?.lynxUniqueIdToElement ?? [];
+    const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
+    const elementToRuntimeInfoMap = new WeakMap();
+    let pageElement = lynxUniqueIdToElement[1]?.deref();
+    let uniqueIdInc = lynxUniqueIdToElement.length || 1;
+    const varsUpdateHandlers = [];
+    const lynxGlobalBindingValues = {};
+    const exposureChangedElements = new Set();
+    flattenStyleInfo(styleInfo, pageConfig.enableCSSSelector);
+    transformToWebCss(styleInfo);
+    const cssOGInfo = pageConfig.enableCSSSelector ? {} : genCssOGInfo(styleInfo);
+    let cardStyleElement;
+    if (ssrHydrateInfo?.cardStyleElement) cardStyleElement = ssrHydrateInfo.cardStyleElement;
+    else {
+        cardStyleElement = callbacks.createElement('style');
+        cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
+        rootDom.append(cardStyleElement);
+    }
+    const cardStyleElementSheet = cardStyleElement.sheet;
+    const updateCssOGStyle = (uniqueId, newStyles)=>{
+        if (void 0 !== lynxUniqueIdToStyleRulesIndex[uniqueId]) {
+            const rule = cardStyleElementSheet.cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
+            rule.style.cssText = newStyles;
+        } else {
+            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
+        }
     };
-    globalThis.cancelAnimationFrame = (id) => {
+    const commonHandler = (event)=>{
+        if (!event.currentTarget) return;
+        const currentTarget = event.currentTarget;
+        const isCapture = event.eventPhase === Event.CAPTURING_PHASE;
+        const lynxEventName = W3cEventNameToLynx[event.type] ?? event.type;
+        const runtimeInfo = elementToRuntimeInfoMap.get(currentTarget);
+        if (runtimeInfo) {
+            const hname = isCapture ? runtimeInfo.eventHandlerMap[lynxEventName]?.capture?.handler : runtimeInfo.eventHandlerMap[lynxEventName]?.bind?.handler;
+            const crossThreadEvent = createCrossThreadEvent(event, lynxEventName);
+            if ('string' == typeof hname) {
+                const parentComponentUniqueId = Number(currentTarget.getAttribute(parentComponentUniqueIdAttribute));
+                const parentComponent = lynxUniqueIdToElement[parentComponentUniqueId].deref();
+                const componentId = parentComponent?.getAttribute(lynxTagAttribute) !== 'page' ? parentComponent?.getAttribute(componentIdAttribute) ?? void 0 : void 0;
+                if (componentId) callbacks.publicComponentEvent(componentId, hname, crossThreadEvent);
+                else callbacks.publishEvent(hname, crossThreadEvent);
+                return true;
+            }
+            if (hname) {
+                crossThreadEvent.target.elementRefptr = event.target;
+                if (crossThreadEvent.currentTarget) crossThreadEvent.currentTarget.elementRefptr = event.currentTarget;
+                mtsGlobalThis.runWorklet?.(hname.value, [
+                    crossThreadEvent
+                ]);
+            }
+        }
+        return false;
+    };
+    const commonCatchHandler = (event)=>{
+        const handlerTriggered = commonHandler(event);
+        if (handlerTriggered) event.stopPropagation();
+    };
+    const __AddEvent = (element, eventType, eventName, newEventHandler)=>{
+        eventName = eventName.toLowerCase();
+        const isCatch = 'catchEvent' === eventType || 'capture-catch' === eventType;
+        const isCapture = eventType.startsWith('capture');
+        const runtimeInfo = elementToRuntimeInfoMap.get(element) ?? {
+            eventHandlerMap: {},
+            componentAtIndex: void 0,
+            enqueueComponent: void 0
+        };
+        const currentHandler = isCapture ? runtimeInfo.eventHandlerMap[eventName]?.capture : runtimeInfo.eventHandlerMap[eventName]?.bind;
+        const currentRegisteredHandler = isCatch ? commonCatchHandler : commonHandler;
+        if (currentHandler) {
+            if (!newEventHandler) {
+                element.removeEventListener(eventName, currentRegisteredHandler, {
+                    capture: isCapture
+                });
+                const isExposure = 'uiappear' === eventName || 'uidisappear' === eventName;
+                if (isExposure && '-1' === element.getAttribute('exposure-id')) mtsGlobalThis.__SetAttribute(element, 'exposure-id', null);
+            }
+        } else if (newEventHandler) {
+            const htmlEventName = LynxEventNameToW3cByTagName[element.tagName]?.[eventName] ?? LynxEventNameToW3cCommon[eventName] ?? eventName;
+            element.addEventListener(htmlEventName, currentRegisteredHandler, {
+                capture: isCapture
+            });
+            const isExposure = 'uiappear' === eventName || 'uidisappear' === eventName;
+            if (isExposure && null === element.getAttribute('exposure-id')) mtsGlobalThis.__SetAttribute(element, 'exposure-id', '-1');
+        }
+        if (newEventHandler) {
+            const info = {
+                type: eventType,
+                handler: newEventHandler
+            };
+            if (!runtimeInfo.eventHandlerMap[eventName]) runtimeInfo.eventHandlerMap[eventName] = {
+                capture: void 0,
+                bind: void 0
+            };
+            if (isCapture) runtimeInfo.eventHandlerMap[eventName].capture = info;
+            else runtimeInfo.eventHandlerMap[eventName].bind = info;
+        }
+        elementToRuntimeInfoMap.set(element, runtimeInfo);
+    };
+    const __GetEvent = (element, eventName, eventType)=>{
+        const runtimeInfo = elementToRuntimeInfoMap.get(element);
+        if (!runtimeInfo) return;
+        {
+            eventName = eventName.toLowerCase();
+            const isCapture = eventType.startsWith('capture');
+            const handler1 = isCapture ? runtimeInfo.eventHandlerMap[eventName]?.capture : runtimeInfo.eventHandlerMap[eventName]?.bind;
+            return handler1?.handler;
+        }
+    };
+    const __GetEvents = (element)=>{
+        const eventHandlerMap = elementToRuntimeInfoMap.get(element)?.eventHandlerMap ?? {};
+        const eventInfos = [];
+        for (const [lynxEventName, info] of Object.entries(eventHandlerMap))for (const atomInfo of [
+            info.bind,
+            info.capture
+        ])if (atomInfo) {
+            const { type, handler: handler1 } = atomInfo;
+            if (handler1) eventInfos.push({
+                type: type,
+                name: lynxEventName,
+                function: handler1
+            });
+        }
+        return eventInfos;
+    };
+    const __SetEvents = (element, listeners)=>{
+        for (const { type: eventType, name: lynxEventName, function: eventHandler } of listeners)__AddEvent(element, eventType, lynxEventName, eventHandler);
+    };
+    const __CreateElement = (tag, parentComponentUniqueId)=>{
+        const uniqueId = uniqueIdInc++;
+        const htmlTag = tagMap[tag] ?? tag;
+        const element = callbacks.createElement(htmlTag);
+        lynxUniqueIdToElement[uniqueId] = new WeakRef(element);
+        const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]?.deref()?.getAttribute(cssIdAttribute);
+        parentComponentCssID && '0' !== parentComponentCssID && element.setAttribute(cssIdAttribute, parentComponentCssID);
+        element.setAttribute(lynxTagAttribute, tag);
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId + '');
+        return element;
+    };
+    const __CreateView = (parentComponentUniqueId)=>__CreateElement('view', parentComponentUniqueId);
+    const __CreateText = (parentComponentUniqueId)=>__CreateElement('text', parentComponentUniqueId);
+    const __CreateRawText = (text1)=>{
+        const element = __CreateElement('raw-text', -1);
+        element.setAttribute('text', text1);
+        return element;
+    };
+    const __CreateImage = (parentComponentUniqueId)=>__CreateElement('image', parentComponentUniqueId);
+    const __CreateScrollView = (parentComponentUniqueId)=>__CreateElement('scroll-view', parentComponentUniqueId);
+    const __CreateWrapperElement = (parentComponentUniqueId)=>__CreateElement('lynx-wrapper', parentComponentUniqueId);
+    const __CreatePage = (componentID, cssID)=>{
+        const page = __CreateElement('page', 0);
+        page.setAttribute('part', 'page');
+        page.setAttribute(cssIdAttribute, cssID + '');
+        page.setAttribute(parentComponentUniqueIdAttribute, '0');
+        page.setAttribute(componentIdAttribute, componentID);
+        __MarkTemplateElement(page);
+        if (false === pageConfig.defaultDisplayLinear) page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
+        if (true === pageConfig.defaultOverflowVisible) page.setAttribute('lynx-default-overflow-visible', 'true');
+        pageElement = page;
+        return page;
+    };
+    const __CreateList = (parentComponentUniqueId, componentAtIndex, enqueueComponent)=>{
+        const list = __CreateElement('list', parentComponentUniqueId);
+        const runtimeInfo = {
+            eventHandlerMap: {},
+            componentAtIndex: componentAtIndex,
+            enqueueComponent: enqueueComponent
+        };
+        elementToRuntimeInfoMap.set(list, runtimeInfo);
+        return list;
+    };
+    const __CreateComponent = (componentParentUniqueID, componentID, cssID, _, name)=>{
+        const component = __CreateElement('view', componentParentUniqueID);
+        component.setAttribute(cssIdAttribute, cssID + '');
+        component.setAttribute(componentIdAttribute, componentID);
+        component.setAttribute('name', name);
+        return component;
+    };
+    const __SetAttribute = (element, key, value)=>{
+        const tag = element.getAttribute(lynxTagAttribute);
+        if ('list' === tag && 'update-list-info' === key) {
+            const listInfo = value;
+            const { insertAction, removeAction } = listInfo;
+            queueMicrotask(()=>{
+                const runtimeInfo = elementToRuntimeInfoMap.get(element);
+                if (runtimeInfo) {
+                    const componentAtIndex = runtimeInfo.componentAtIndex;
+                    const enqueueComponent = runtimeInfo.enqueueComponent;
+                    const uniqueId = __GetElementUniqueID(element);
+                    for (const action of insertAction)componentAtIndex?.(element, uniqueId, action.position, 0, false);
+                    for (const action of removeAction)enqueueComponent?.(element, uniqueId, action.position);
+                }
+            });
+        } else {
+            null == value ? element.removeAttribute(key) : element.setAttribute(key, value + '');
+            if (key === __lynx_timing_flag && value) timingFlags.push(value);
+            if (exposureRelatedAttributes.has(key)) exposureChangedElements.add(element);
+        }
+    };
+    const __UpdateListCallbacks = (element, componentAtIndex, enqueueComponent)=>{
+        const runtimeInfo = elementToRuntimeInfoMap.get(element) ?? {
+            eventHandlerMap: {},
+            componentAtIndex: componentAtIndex,
+            enqueueComponent: enqueueComponent,
+            uniqueId: __GetElementUniqueID(element)
+        };
+        runtimeInfo.componentAtIndex = componentAtIndex;
+        runtimeInfo.enqueueComponent = enqueueComponent;
+        elementToRuntimeInfoMap.set(element, runtimeInfo);
+    };
+    const __SwapElement = (childA, childB)=>{
+        const temp = callbacks.createElement('div');
+        childA.replaceWith(temp);
+        childB.replaceWith(childA);
+        temp.replaceWith(childB);
+    };
+    const __SetCSSIdForCSSOG = (elements, cssId)=>{
+        for (const element of elements){
+            element.setAttribute(cssIdAttribute, cssId + '');
+            const cls = element.getAttribute('class');
+            cls && __SetClassesForCSSOG(element, cls);
+        }
+    };
+    const __AddClassForCSSOG = (element, className)=>{
+        const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className).trim();
+        element.setAttribute('class', newClassName);
+        const newStyleStr = decodeCssOG(newClassName, cssOGInfo, element.getAttribute(cssIdAttribute));
+        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
+    };
+    const __SetClassesForCSSOG = (element, classNames)=>{
+        __SetClasses(element, classNames);
+        const newStyleStr = decodeCssOG(classNames ?? '', cssOGInfo, element.getAttribute(cssIdAttribute));
+        updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
+    };
+    const __LoadLepusChunk = (path)=>{
+        const lepusModule = lepusCode[`${path}`];
+        if (!lepusModule) return false;
+        {
+            const entry = lepusModule.exports;
+            entry?.(mtsGlobalThis);
+            return true;
+        }
+    };
+    const __FlushElementTree = (_subTree, options)=>{
+        const timingFlagsCopied = timingFlags;
+        timingFlags = [];
+        if (pageElement && !pageElement.parentNode && '' !== pageElement.getAttribute(lynxDisposedAttribute)) rootDom.append(pageElement);
+        const exposureChangedElementsArray = Array.from(exposureChangedElements);
+        exposureChangedElements.clear();
+        callbacks.flushElementTree(options, timingFlagsCopied, exposureChangedElementsArray);
+    };
+    const __GetPageElement = ()=>pageElement;
+    const templateIdToTemplate = {};
+    const createElementForElementTemplateData = (data, parentComponentUniId)=>{
+        const element = __CreateElement(data.type, parentComponentUniId);
+        __SetID(element, data.id);
+        __SetClasses(element, data.class.join(' '));
+        for (const [key, value] of Object.entries(data.attributes))__SetAttribute(element, key, value);
+        for (const [key, value] of Object.entries(data.builtinAttributes))__SetAttribute(element, key, value);
+        for (const childData of data.children)__AppendElement(element, createElementForElementTemplateData(childData, parentComponentUniId));
+        return element;
+    };
+    const applyEventsForElementTemplate = (data, element)=>{
+        const uniqueId = uniqueIdInc++;
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        for (const event of data.events){
+            const { type, name, value } = event;
+            __AddEvent(element, type, name, value);
+        }
+        for(let ii = 0; ii < data.children.length; ii++){
+            const childData = data.children[ii];
+            const childElement = element.children[ii];
+            if (childData && childElement) applyEventsForElementTemplate(childData, childElement);
+        }
+    };
+    const __ElementFromBinary = (templateId, parentComponentUniId)=>{
+        const elementTemplateData = config.elementTemplate[templateId];
+        if (elementTemplateData) {
+            let clonedElements;
+            if (templateIdToTemplate[templateId]) clonedElements = Array.from(templateIdToTemplate[templateId].content.cloneNode(true).children);
+            else {
+                clonedElements = elementTemplateData.map((data)=>createElementForElementTemplateData(data, parentComponentUniId));
+                if (rootDom.cloneNode) {
+                    const template = callbacks.createElement('template');
+                    template.content.append(...clonedElements);
+                    templateIdToTemplate[templateId] = template;
+                    rootDom.append(template);
+                    return __ElementFromBinary(templateId, parentComponentUniId);
+                }
+            }
+            for(let ii = 0; ii < clonedElements.length; ii++){
+                const data = elementTemplateData[ii];
+                const element = clonedElements[ii];
+                if (data && element) applyEventsForElementTemplate(data, element);
+            }
+            return clonedElements;
+        }
+        return [];
+    };
+    let release = '';
+    const isCSSOG = !pageConfig.enableCSSSelector;
+    const mtsGlobalThis = {
+        __ElementFromBinary,
+        __GetTemplateParts: rootDom.querySelectorAll ? __GetTemplateParts : void 0,
+        __MarkTemplateElement: __MarkTemplateElement,
+        __MarkPartElement: __MarkPartElement,
+        __AddEvent: ssrHooks?.__AddEvent ?? __AddEvent,
+        __GetEvent,
+        __GetEvents,
+        __SetEvents,
+        __AppendElement: __AppendElement,
+        __ElementIsEqual: __ElementIsEqual,
+        __FirstElement: __FirstElement,
+        __GetChildren: __GetChildren,
+        __GetParent: __GetParent,
+        __InsertElementBefore: __InsertElementBefore,
+        __LastElement: __LastElement,
+        __NextElement: __NextElement,
+        __RemoveElement: __RemoveElement,
+        __ReplaceElement: __ReplaceElement,
+        __ReplaceElements: __ReplaceElements,
+        __AddConfig: __AddConfig,
+        __AddDataset: __AddDataset,
+        __GetAttributes: __GetAttributes,
+        __GetComponentID: __GetComponentID,
+        __GetDataByKey: __GetDataByKey,
+        __GetDataset: __GetDataset,
+        __GetElementConfig: __GetElementConfig,
+        __GetElementUniqueID: __GetElementUniqueID,
+        __GetID: __GetID,
+        __GetTag: __GetTag,
+        __SetConfig: __SetConfig,
+        __SetDataset: __SetDataset,
+        __SetID: __SetID,
+        __UpdateComponentID: __UpdateComponentID,
+        __CreateElement,
+        __CreateView,
+        __CreateText,
+        __CreateComponent,
+        __CreatePage,
+        __CreateRawText,
+        __CreateImage,
+        __CreateScrollView,
+        __CreateWrapperElement,
+        __CreateList,
+        __SetAttribute,
+        __SwapElement,
+        __UpdateListCallbacks,
+        __GetConfig: __GetElementConfig,
+        __GetClasses: __GetClasses,
+        __AddClass: isCSSOG ? __AddClassForCSSOG : __AddClass,
+        __SetClasses: isCSSOG ? __SetClassesForCSSOG : __SetClasses,
+        __AddInlineStyle: __AddInlineStyle,
+        __SetCSSId: isCSSOG ? __SetCSSIdForCSSOG : __SetCSSId,
+        __SetInlineStyles: __SetInlineStyles,
+        __LoadLepusChunk,
+        __GetPageElement,
+        __globalProps: globalProps,
+        SystemInfo: {
+            ...systemInfo,
+            ...config.browserConfig
+        },
+        lynx: createMainThreadLynx(config),
+        _ReportError: (err, _)=>callbacks._ReportError(err, _, release),
+        _SetSourceMapRelease: (errInfo)=>release = errInfo?.release,
+        __OnLifecycleEvent: callbacks.__OnLifecycleEvent,
+        __FlushElementTree,
+        __lynxGlobalBindingValues: lynxGlobalBindingValues,
+        _I18nResourceTranslation: callbacks._I18nResourceTranslation,
+        _AddEventListener: ()=>{},
+        set _updateVars (handler){
+            varsUpdateHandlers.push(handler);
+        },
+        set renderPage (foo){
+            renderPage = foo;
+            queueMicrotask(callbacks.mainChunkReady);
+        },
+        get renderPage () {
+            return renderPage;
+        }
+    };
+    mtsGlobalThis.globalThis = new Proxy(mtsGlobalThis, {
+        get: (target, prop)=>{
+            if ('globalThis' === prop) return target;
+            return target[prop] ?? globalThis[prop];
+        },
+        set: (target, prop, value)=>{
+            target[prop] = value;
+            return true;
+        },
+        ownKeys (target) {
+            return Reflect.ownKeys(target).filter((key)=>'globalThis' !== key);
+        }
+    });
+    for (const nm of globalMuteableVars)Object.defineProperty(mtsGlobalThis, nm, {
+        get: ()=>lynxGlobalBindingValues[nm],
+        set: (v)=>{
+            lynxGlobalBindingValues[nm] = v;
+            for (const handler1 of varsUpdateHandlers)handler1();
+        }
+    });
+    return mtsGlobalThis;
+}
+function createExposureService(rootDom, postExposure) {
+    let working = true;
+    let exposureCache = [];
+    let disexposureCache = [];
+    let delayCallback = null;
+    const onScreen = new Map();
+    function exposureEventHandler(ev) {
+        const exposureEvent = createCrossThreadEvent(ev, ev.type);
+        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
+        const exposureID = exposureEvent.detail.exposureID;
+        if ('exposure' === ev.type) {
+            exposureCache.push(exposureEvent);
+            onScreen.set(exposureID, exposureEvent);
+        } else {
+            disexposureCache.push(exposureEvent);
+            onScreen.delete(exposureID);
+        }
+        if (!delayCallback) delayCallback = setTimeout(()=>{
+            if (exposureCache.length > 0 || disexposureCache.length > 0) {
+                const currentExposure = exposureCache;
+                const currentDisexposure = disexposureCache;
+                exposureCache = [];
+                disexposureCache = [];
+                postExposure({
+                    exposures: currentExposure,
+                    disExposures: currentDisexposure
+                });
+            }
+            delayCallback = null;
+        }, 50);
+    }
+    rootDom.addEventListener('exposure', exposureEventHandler, {
+        passive: true
+    });
+    rootDom.addEventListener('disexposure', exposureEventHandler, {
+        passive: true
+    });
+    function switchExposureService(enable, sendEvent) {
+        if (enable && !working) postExposure({
+            exposures: [
+                ...onScreen.values()
+            ],
+            disExposures: []
+        });
+        else if (!enable && working) {
+            if (sendEvent) postExposure({
+                exposures: [],
+                disExposures: [
+                    ...onScreen.values()
+                ]
+            });
+        }
+        working = enable;
+    }
+    return {
+        switchExposureService
+    };
+}
+const initWasmPromise = initWasm();
+const moduleCache = {};
+function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+    const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
+    const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
+    const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
+    const publicComponentEvent = backgroundThreadRpc.createCall(publicComponentEventEndpoint);
+    const postExposure = backgroundThreadRpc.createCall(postExposureEndpoint);
+    const dispatchI18nResource = backgroundThreadRpc.createCall(dispatchI18nResourceEndpoint);
+    markTimingInternal('lepus_execute_start');
+    async function startMainThread(config, ssrHydrateInfo) {
+        let isFp = true;
+        const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources } = config;
+        const { styleInfo, pageConfig, customSections, cardType, lepusCode, elementTemplate } = template;
+        markTimingInternal('decode_start');
+        await initWasmPromise;
+        const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url])=>{
+            const cachedModule = moduleCache[url];
+            if (cachedModule) return [
+                name,
+                cachedModule
+            ];
+            {
+                Object.assign(globalThis, {
+                    module: {}
+                });
+                await import(url);
+                const module = globalThis.module;
+                Object.assign(globalThis, {
+                    module: {}
+                });
+                moduleCache[url] = module;
+                return [
+                    name,
+                    module
+                ];
+            }
+        }));
+        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
+        const entry = lepusCodeLoaded['root'].exports;
+        const jsContext = new LynxCrossThreadContext({
+            rpc: backgroundThreadRpc,
+            receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
+            sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint
+        });
+        const i18nResources = initialI18nResources(initI18nResources);
+        const mtsGlobalThis = createMainThreadGlobalThis({
+            jsContext,
+            tagMap,
+            browserConfig,
+            customSections,
+            elementTemplate,
+            globalProps,
+            pageConfig,
+            styleInfo,
+            lepusCode: lepusCodeLoaded,
+            rootDom,
+            ssrHydrateInfo,
+            ssrHooks,
+            callbacks: {
+                mainChunkReady: ()=>{
+                    markTimingInternal('data_processor_start');
+                    let initData = config.initData;
+                    if (true !== pageConfig.enableJSDataProcessor && mtsGlobalThis.processData) initData = mtsGlobalThis.processData(config.initData);
+                    markTimingInternal('data_processor_end');
+                    registerCallLepusMethodHandler(backgroundThreadRpc, mtsGlobalThis);
+                    registerGetCustomSectionHandler(backgroundThreadRpc, customSections);
+                    const { switchExposureService } = createExposureService(rootDom, postExposure);
+                    backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, switchExposureService);
+                    backgroundStart({
+                        initData,
+                        globalProps,
+                        template,
+                        cardType: cardType ?? 'react',
+                        customSections: Object.fromEntries(Object.entries(customSections).filter(([, value])=>'lazy' !== value.type).map(([k, v])=>[
+                                k,
+                                v.content
+                            ])),
+                        nativeModulesMap,
+                        napiModulesMap,
+                        browserConfig
+                    });
+                    if (ssrHydrateInfo) {
+                        for (const event of ssrHydrateInfo.events){
+                            const uniqueId = event[0];
+                            const element = ssrHydrateInfo.lynxUniqueIdToElement[uniqueId]?.deref();
+                            if (element) mtsGlobalThis.__AddEvent(element, event[1], event[2], event[3]);
+                        }
+                        mtsGlobalThis.ssrHydrate?.(ssrHydrateInfo.ssrEncodeData);
+                    } else {
+                        mtsGlobalThis.renderPage(initData);
+                        mtsGlobalThis.__FlushElementTree(void 0, {});
+                    }
+                },
+                flushElementTree: async (options, timingFlags, exposureChangedElements)=>{
+                    const pipelineId = options?.pipelineOptions?.pipelineID;
+                    markTimingInternal('dispatch_start', pipelineId);
+                    if (isFp) {
+                        isFp = false;
+                        jsContext.dispatchEvent({
+                            type: '__OnNativeAppReady',
+                            data: void 0
+                        });
+                    }
+                    markTimingInternal('layout_start', pipelineId);
+                    markTimingInternal('ui_operation_flush_start', pipelineId);
+                    await commitDocument(exposureChangedElements);
+                    markTimingInternal('ui_operation_flush_end', pipelineId);
+                    markTimingInternal('layout_end', pipelineId);
+                    markTimingInternal('dispatch_end', pipelineId);
+                    flushMarkTimingInternal();
+                    requestAnimationFrame(()=>{
+                        postTimingFlags(timingFlags, pipelineId);
+                    });
+                },
+                _ReportError: reportError,
+                __OnLifecycleEvent: (data)=>{
+                    jsContext.dispatchEvent({
+                        type: '__OnLifecycleEvent',
+                        data
+                    });
+                },
+                markTiming: (a, b)=>markTimingInternal(b, a),
+                publishEvent,
+                publicComponentEvent,
+                createElement,
+                _I18nResourceTranslation: (options)=>{
+                    const matchedInitI18nResources = i18nResources.data?.find((i)=>getCacheI18nResourcesKey(i.options) === getCacheI18nResourcesKey(options));
+                    dispatchI18nResource(matchedInitI18nResources?.resource);
+                    if (matchedInitI18nResources) return matchedInitI18nResources.resource;
+                    return triggerI18nResourceFallback(options);
+                }
+            }
+        });
+        markTimingInternal('decode_end');
+        entry(mtsGlobalThis);
+        jsContext.__start();
+        return mtsGlobalThis;
+    }
+    return {
+        startMainThread
+    };
+}
+const templateCache = new Map();
+let tmpDir;
+const tmpDirPromise = promises.mkdtemp(node_path.join(node_os.tmpdir(), 'lynx'));
+async function loadTemplate_createJsModuleUrl(content, filename) {
+    if (!tmpDir) tmpDir = await tmpDirPromise;
+    const fileUrl = node_path.join(tmpDir, filename);
+    await promises.writeFile(fileUrl, content, {
+        flag: 'w+'
+    });
+    return fileUrl;
+}
+async function loadTemplate(rawTemplate, templateName = Math.random().toString(36).substring(2, 7)) {
+    if (templateCache.has(rawTemplate)) return templateCache.get(rawTemplate);
+    templateName += Math.random().toString(36).substring(2, 7);
+    const decodedTemplate = templateCache.get(rawTemplate) ?? await generateTemplate(rawTemplate, loadTemplate_createJsModuleUrl, templateName + '-lepusCode');
+    templateCache.set(rawTemplate, decodedTemplate);
+    return decodedTemplate;
+}
+const OperationType = {
+    CreateElement: 1,
+    SetAttribute: 2,
+    RemoveAttribute: 3,
+    Append: 4,
+    Remove: 5,
+    ReplaceWith: 6,
+    InsertBefore: 7,
+    EnableEvent: 8,
+    RemoveChild: 9,
+    StyleDeclarationSetProperty: 10,
+    StyleDeclarationRemoveProperty: 11,
+    SetInnerHTML: 12,
+    sheetInsertRule: 13,
+    sheetRuleUpdateCssText: 14
+};
+class OffscreenCSSStyleDeclaration {
+    _parent;
+    constructor(parent){
+        this._parent = parent;
+    }
+    setProperty(property, value, priority) {
+        this._parent[ancestorDocument][operations].push(OperationType.StyleDeclarationSetProperty, this._parent[OffscreenElement_uniqueId], property, value, priority ?? '');
+        const currentStyle = this._parent.getAttribute('style') ?? '';
+        this._parent[_attributes].set('style', currentStyle + `${property}:${value}${priority ? ` !${priority}` : ''};`);
+    }
+    removeProperty(property) {
+        this._parent[ancestorDocument][operations].push(OperationType.StyleDeclarationRemoveProperty, this._parent[OffscreenElement_uniqueId], property);
+        const currentStyle = this._parent.getAttribute('style') ?? '';
+        this._parent[_attributes].set('style', currentStyle + `${property}:inital;`);
+    }
+}
+const ancestorDocument = Symbol('ancestorDocument');
+const _attributes = Symbol('_attributes');
+const _children = Symbol('_children');
+const innerHTML = Symbol('innerHTML');
+const _cssRuleContents = Symbol('_cssRuleContents');
+const OffscreenElement_uniqueId = Symbol('uniqueId');
+const _style = Symbol('_style');
+class OffscreenElement extends EventTarget {
+    [innerHTML] = '';
+    [_style];
+    [_attributes] = new Map();
+    _parentElement = null;
+    [_children] = [];
+    [_cssRuleContents];
+    #sheet;
+    [OffscreenElement_uniqueId];
+    [ancestorDocument];
+    localName;
+    constructor(localName, elementUniqueId){
+        super();
+        this.localName = localName;
+        this[OffscreenElement_uniqueId] = elementUniqueId;
+    }
+    get sheet() {
+        if (!this.#sheet) {
+            const uid = this[OffscreenElement_uniqueId];
+            const ancestor = this[ancestorDocument];
+            const cssRules = [];
+            this.#sheet = {
+                cssRules,
+                insertRule: (rule, index)=>{
+                    cssRules.splice(index, 0, {
+                        style: {
+                            set cssText (text){
+                                ancestor[operations].push(OperationType.sheetRuleUpdateCssText, uid, index, text);
+                            }
+                        }
+                    });
+                    if (!this[_cssRuleContents]) this[_cssRuleContents] = [];
+                    this[_cssRuleContents].splice(index, 0, rule);
+                    this[ancestorDocument][operations].push(OperationType.sheetInsertRule, uid, index, rule);
+                    return index;
+                }
+            };
+        }
+        return this.#sheet;
+    }
+    get tagName() {
+        return this.localName.toUpperCase();
+    }
+    get style() {
+        if (!this[_style]) this[_style] = new OffscreenCSSStyleDeclaration(this);
+        return this[_style];
+    }
+    get children() {
+        return this[_children].slice();
+    }
+    get parentElement() {
+        return this._parentElement;
+    }
+    get parentNode() {
+        return this._parentElement;
+    }
+    get firstElementChild() {
+        return this[_children][0] ?? null;
+    }
+    get lastElementChild() {
+        return this[_children][this[_children].length - 1] ?? null;
+    }
+    get nextElementSibling() {
+        const parent = this._parentElement;
+        if (parent) {
+            const nextElementSiblingIndex = parent[_children].indexOf(this);
+            if (nextElementSiblingIndex >= 0) return parent[_children][nextElementSiblingIndex + 1] || null;
+        }
+        return null;
+    }
+    _remove() {
+        if (this._parentElement) {
+            const currentIdx = this._parentElement[_children].indexOf(this);
+            this._parentElement[_children].splice(currentIdx, 1);
+            this._parentElement = null;
+        }
+    }
+    setAttribute(qualifiedName, value) {
+        this[_attributes].set(qualifiedName, value);
+        this[ancestorDocument][operations].push(OperationType.SetAttribute, this[OffscreenElement_uniqueId], qualifiedName, value);
+    }
+    getAttribute(qualifiedName) {
+        return this[_attributes].get(qualifiedName) ?? null;
+    }
+    removeAttribute(qualifiedName) {
+        this[_attributes].delete(qualifiedName);
+        this[ancestorDocument][operations].push(OperationType.RemoveAttribute, this[OffscreenElement_uniqueId], qualifiedName);
+    }
+    append(...nodes) {
+        this[ancestorDocument][operations].push(OperationType.Append, this[OffscreenElement_uniqueId], nodes.length, ...nodes.map((node)=>node[OffscreenElement_uniqueId]));
+        for (const node of nodes){
+            node._remove();
+            node._parentElement = this;
+        }
+        this[_children].push(...nodes);
+    }
+    appendChild(node) {
+        this[ancestorDocument][operations].push(OperationType.Append, this[OffscreenElement_uniqueId], 1, node[OffscreenElement_uniqueId]);
+        node._remove();
+        node._parentElement = this;
+        this[_children].push(node);
+        return node;
+    }
+    replaceWith(...nodes) {
+        this[ancestorDocument][operations].push(OperationType.ReplaceWith, this[OffscreenElement_uniqueId], nodes.length, ...nodes.map((node)=>node[OffscreenElement_uniqueId]));
+        if (this._parentElement) {
+            const parent = this._parentElement;
+            this._parentElement = null;
+            const currentIdx = parent[_children].indexOf(this);
+            parent[_children].splice(currentIdx, 1, ...nodes);
+            for (const node of nodes)node._parentElement = parent;
+        }
+    }
+    getAttributeNames() {
+        return [
+            ...this[_attributes].keys()
+        ];
+    }
+    remove() {
+        this[ancestorDocument][operations].push(OperationType.Remove, this[OffscreenElement_uniqueId]);
+        this._remove();
+    }
+    insertBefore(newNode, refNode) {
+        newNode._remove();
+        if (refNode) {
+            const refNodeIndex = this[_children].indexOf(refNode);
+            if (refNodeIndex >= 0) {
+                newNode._parentElement = this;
+                this[_children].splice(refNodeIndex, 0, newNode);
+            }
+        } else {
+            newNode._parentElement = this;
+            this[_children].push(newNode);
+        }
+        this[ancestorDocument][operations].push(OperationType.InsertBefore, this[OffscreenElement_uniqueId], newNode[OffscreenElement_uniqueId], refNode?.[OffscreenElement_uniqueId] ?? 0);
+        return newNode;
+    }
+    removeChild(child) {
+        if (!child) throw new DOMException('The node to be removed is not a child of this node.', 'NotFoundError');
+        if (child._parentElement !== this) throw new DOMException('The node to be removed is not a child of this node.', 'NotFoundError');
+        this[ancestorDocument][operations].push(OperationType.RemoveChild, this[OffscreenElement_uniqueId], child[OffscreenElement_uniqueId]);
+        child._remove();
+        return child;
+    }
+    addEventListener(type, callback, options) {
+        this[ancestorDocument][enableEvent](type, this[OffscreenElement_uniqueId]);
+        super.addEventListener(type, callback, options);
+    }
+    set innerHTML(text1) {
+        this[ancestorDocument][operations].push(OperationType.SetInnerHTML, this[OffscreenElement_uniqueId], text1);
+        for (const child of this.children)child.remove();
+        this[innerHTML] = text1;
+        if (this[_cssRuleContents]) this[_cssRuleContents] = [];
+    }
+}
+const propagationStopped = Symbol('propagationStopped');
+const eventPhase = Symbol('eventPhase');
+class OffscreenEvent extends Event {
+    _target;
+    [eventPhase] = Event.CAPTURING_PHASE;
+    constructor(type, _target){
+        super(type);
+        this._target = _target;
+    }
+    get target() {
+        return this._target;
+    }
+    [propagationStopped] = false;
+    stopImmediatePropagation() {
+        this[propagationStopped] = true;
+        super.stopImmediatePropagation();
+    }
+    stopPropagation() {
+        this[propagationStopped] = true;
+        super.stopPropagation();
+    }
+    get eventPhase() {
+        return this[eventPhase];
+    }
+}
+const operations = Symbol('operations');
+const enableEvent = Symbol('enableEvent');
+const getElementByUniqueId = Symbol('getElementByUniqueId');
+const _onEvent = Symbol('_onEvent');
+const _uniqueIdInc = Symbol('uniqueIdInc');
+const _uniqueIdToElement = Symbol('_uniqueIdToElement');
+class OffscreenDocument extends OffscreenElement {
+    _callbacks;
+    [_uniqueIdInc] = 1;
+    [_uniqueIdToElement] = [];
+    [operations] = [];
+    [getElementByUniqueId](uniqueId) {
+        return this[_uniqueIdToElement][uniqueId]?.deref();
+    }
+    [enableEvent];
+    constructor(_callbacks){
+        const enableEventImpl = (eventType, uid)=>{
+            this[operations].push(OperationType.EnableEvent, uid, eventType);
+        };
+        super('', 0);
+        this._callbacks = _callbacks;
+        this[ancestorDocument] = this;
+        this[enableEvent] = enableEventImpl;
+    }
+    commit() {
+        const currentOperations = this[operations];
+        this[operations] = [];
+        this._callbacks.onCommit(currentOperations);
+    }
+    createElement(tagName) {
+        const uniqueId = this[_uniqueIdInc]++;
+        const element = new OffscreenElement(tagName, uniqueId);
+        element[ancestorDocument] = this;
+        this[_uniqueIdToElement][uniqueId] = new WeakRef(element);
+        this[operations].push(OperationType.CreateElement, uniqueId, tagName);
+        return element;
+    }
+    [_onEvent] = (eventType, targetUniqueId, bubbles, otherProperties)=>{
+        const target = this[getElementByUniqueId](targetUniqueId);
+        if (target) {
+            const bubblePath = [];
+            let tempTarget = target;
+            while(tempTarget.parentElement){
+                bubblePath.push(tempTarget.parentElement);
+                tempTarget = tempTarget.parentElement;
+            }
+            const event = new OffscreenEvent(eventType, target);
+            Object.assign(event, otherProperties);
+            event[eventPhase] = Event.CAPTURING_PHASE;
+            for(let ii = bubblePath.length - 1; ii >= 0; ii--){
+                const currentPhaseTarget = bubblePath[ii];
+                currentPhaseTarget.dispatchEvent(event);
+                if (event[propagationStopped]) return;
+            }
+            event[eventPhase] = Event.AT_TARGET;
+            target.dispatchEvent(event);
+            if (bubbles) {
+                event[eventPhase] = Event.BUBBLING_PHASE;
+                for (const currentPhaseTarget of bubblePath){
+                    currentPhaseTarget.dispatchEvent(event);
+                    if (event[propagationStopped]) return;
+                }
+            }
+        }
+    };
+}
+const templateScrollView = `<style>
+  .placeholder-dom {
+    display: none;
+    flex: 0 0 0;
+    align-self: stretch;
+    min-height: 0;
+    min-width: 0;
+  }
+  .mask {
+    z-index: 1;
+    position: sticky;
+  }
+  .observer-container {
+    flex-direction: inherit;
+    overflow: visible;
+  }
+  .observer {
+    display: flex;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  @keyframes topFading {
+    0% {
+      box-shadow: transparent 0px 0px 0px 0px;
+    }
+    5% {
+      box-shadow: var(--scroll-view-bg-color) 0px 0px
+        var(--scroll-view-fading-edge-length)
+        var(--scroll-view-fading-edge-length);
+    }
+    100% {
+      box-shadow: var(--scroll-view-bg-color) 0px 0px
+        var(--scroll-view-fading-edge-length)
+        var(--scroll-view-fading-edge-length);
+    }
+  }
+  @keyframes botFading {
+    0% {
+      box-shadow: var(--scroll-view-bg-color) 0px 0px
+        var(--scroll-view-fading-edge-length)
+        var(--scroll-view-fading-edge-length);
+    }
+    95% {
+      box-shadow: var(--scroll-view-bg-color) 0px 0px
+        var(--scroll-view-fading-edge-length)
+        var(--scroll-view-fading-edge-length);
+    }
+    100% {
+      box-shadow: transparent 0px 0px 0px 0px;
+    }
+  }
+</style>
+  <div
+    class="mask placeholder-dom"
+    id="top-fade-mask"
+    part="top-fade-mask"
+  ></div>
+  <div
+    class="observer-container placeholder-dom"
+    part="upper-threshold-observer"
+  >
+    <div
+      class="observer placeholder-dom"
+      id="upper-threshold-observer"
+    ></div>
+  </div>
+  <slot></slot>
+  <div
+    class="observer-container placeholder-dom"
+    part="lower-threshold-observer"
+  >
+    <div
+      class="observer placeholder-dom"
+      id="lower-threshold-observer"
+    ></div>
+  </div>
+  <div
+    class="mask placeholder-dom"
+    id="bot-fade-mask"
+    part="bot-fade-mask"
+  ></div>`;
+const templateXAudioTT = '<audio id="audio"></audio>';
+const XSSDetector = /<\s*script/g;
+const templateXImage = (attributes)=>{
+    const { src } = attributes;
+    if (src && XSSDetector.test(src)) throw new Error("detected <script, this is a potential XSS attack, please check your src");
+    return `<img part="img" alt="" loading="lazy" id="img" ${src ? `src="${src}"` : ''}/> `;
+};
+const templateFilterImage = templateXImage;
+const templateXInput = `<style>
+  #input:focus {
+    outline: none;
+  }
+  #form {
+    display: none;
+  }
+</style>
+<form id="form" part="form" method="dialog">
+  <input
+    id="input"
+    part="input"
+    step="any"
+    type="text"
+    inputmode="text"
+    spell-check="true"
+  />
+</form>`;
+const templateXList = `<style>
+  .placeholder-dom {
+    display: none;
+    flex: 0 0 0;
+    align-self: stretch;
+    min-height: 0;
+    min-width: 0;
+  }
+  .observer-container {
+    flex-direction: inherit;
+    overflow: visible;
+  }
+  .observer {
+    display: flex;
+  }
+</style>
+<div id="content" part="content">
+  <div
+    class="observer-container placeholder-dom"
+    part="upper-threshold-observer"
+  >
+    <div
+      class="observer placeholder-dom"
+      id="upper-threshold-observer"
+    ></div>
+  </div>
+  <slot part="slot"></slot>
+  <div
+    class="observer-container placeholder-dom"
+    part="lower-threshold-observer"
+  >
+    <div
+      class="observer placeholder-dom"
+      id="lower-threshold-observer"
+    ></div>
+  </div>
+</div>`;
+const templateXOverlayNg = `<style>
+  #dialog[open] {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+  }
+  #dialog::backdrop {
+    background-color: transparent;
+  }
+</style>
+<dialog id="dialog" part="dialog">
+  <slot></slot>
+</dialog>`;
+const templateXRefreshView = `<style>
+  .bounce-container {
+    overflow: scroll;
+    overscroll-behavior: contain;
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+  }
+  .overflow-placeholder {
+    min-height: 30%;
+    min-width: 100%;
+    flex-shrink: 0;
+    scroll-snap-align: none;
+  }
+  .not-shrink {
+    height: 100%;
+    width: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    flex-shrink: 0;
+  }
+  .vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  #content {
+    scroll-snap-align: center;
+  }
+</style>
+<div id="container" part="container" class="bounce-container not-shrink vertical">
+  <div
+    id="placeholder-top"
+    class="overflow-placeholder bounce-item"
+    part="placeholder-top"
+  ></div>
+  <slot name="header"></slot>
+  <div id="content" part="content" class="not-shrink vertical">
+    <slot part="slot"></slot>
+  </div>
+  <slot name="footer"></slot>
+  <div
+    id="placeholder-bot"
+    class="overflow-placeholder bounce-item"
+    part="placeholder-bot"
+  ></div>
+</div>`;
+const templateXSwiper = `<style>
+  #bounce-padding {
+    display: none;
+    flex: 0 0 0;
+    align-self: stretch;
+    scroll-snap-align: none;
+    flex-basis: 100%;
+  }
+  #content {
+    position: relative;
+    display: flex;
+    flex: 0 0 100%;
+    flex-direction: inherit;
+    flex-wrap: inherit;
+    align-self: stretch;
+    justify-content: inherit;
+    align-items: inherit;
+    overflow: inherit;
+    scrollbar-width: none;
+    scroll-snap-align: start;
+    scroll-snap-type: inherit;
+  }
+  div::-webkit-scrollbar {
+    display: none;
+  }
+  #indicator-container {
+    display: none;
+  }
+  #indicator-container > div {
+    animation-name: indicator-dot;
+    animation-duration: 100ms;
+  }
+  @keyframes indicator-dot {
+    30%,
+    70% {
+      background-color: var(--indicator-color);
+    }
+    31%,
+    69% {
+      background-color: var(--indicator-active-color);
+    }
+  }
+</style>
+<style id="indicator-style"></style>
+<div id="bounce-padding" part="bounce-padding"></div>
+<div id="indicator-container" part="indicator-container"></div>
+<div id="content" part="content">
+  <slot part="slot-start" name="circular-start" id="circular-start"></slot>
+  <slot part="slot"></slot>
+  <slot part="slot-end" name="circular-end" id="circular-end"></slot>
+</div>`;
+const templateXText = '<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>';
+const templateInlineImage = templateXImage;
+const templateXTextarea = `<style>
+  #textarea:focus,
+  #textarea:focus-visible {
+    border: inherit;
+    outline: inherit;
+  }
+</style>
+<form id="form" part="form" method="dialog">
+  <textarea id="textarea" part="textarea"></textarea>
+</form>`;
+const templateXViewpageNg = `<style>
+  #bounce-padding {
+    display: none;
+    flex: 0 0 0;
+    align-self: stretch;
+    scroll-snap-align: none;
+    flex-basis: 100%;
+  }
+  #content {
+    flex: 0 0 100%;
+    flex-direction: row;
+    align-self: stretch;
+    display: inherit;
+    justify-content: inherit;
+    align-items: inherit;
+    overflow: inherit;
+    scrollbar-width: none;
+    scroll-snap-type: inherit;
+  }
+  #content::-webkit-scrollbar {
+    display: none;
+  }
+</style>
+<div id="bounce-padding" part="bounce-padding"></div>
+<div id="content" part="content">
+  <slot></slot>
+</div>`;
+const matchHtmlRegExp = /["'&<>]/;
+function escapeHtml(string) {
+    const str = '' + string;
+    const match = matchHtmlRegExp.exec(str);
+    if (!match) return str;
+    let escape;
+    let html = '';
+    let index;
+    let lastIndex = 0;
+    for(index = match.index; index < str.length; index++){
+        switch(str.charCodeAt(index)){
+            case 34:
+                escape = '&quot;';
+                break;
+            case 38:
+                escape = '&amp;';
+                break;
+            case 39:
+                escape = '&#x27;';
+                break;
+            case 60:
+                escape = '&lt;';
+                break;
+            case 62:
+                escape = '&gt;';
+                break;
+            default:
+                continue;
+        }
+        if (lastIndex !== index) html += str.substring(lastIndex, index);
+        lastIndex = index + 1;
+        html += escape;
+    }
+    return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+}
+function getInnerHTMLImpl(buffer, element, shadowrootTemplates) {
+    const localName = element.localName;
+    buffer.push('<');
+    buffer.push(localName);
+    for (const [key, value] of element[_attributes]){
+        buffer.push(' ');
+        buffer.push(key);
+        if (value.length > 0) {
+            buffer.push('="');
+            buffer.push(escapeHtml(value));
+            buffer.push('"');
+        }
+    }
+    const partId = element[_attributes].get(lynxPartIdAttribute) ?? element[_attributes].get(lynxUniqueIdAttribute);
+    buffer.push(' ', lynxPartIdAttribute, '="', partId, '"');
+    buffer.push('>');
+    const templateImpl = shadowrootTemplates[localName];
+    if (templateImpl) {
+        const template = 'function' == typeof templateImpl ? templateImpl(Object.fromEntries(element[_attributes].entries())) : templateImpl;
+        buffer.push('<template shadowrootmode="open">', template, '</template>');
+    }
+    if (element[_cssRuleContents]?.length) buffer.push(...element[_cssRuleContents]);
+    if (element[innerHTML]) buffer.push(element[innerHTML]);
+    else for (const child of element[_children])getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+    buffer.push('</');
+    buffer.push(localName);
+    buffer.push('>');
+}
+function dumpHTMLString(buffer, element, shadowrootTemplates) {
+    for (const child of element[_children])getInnerHTMLImpl(buffer, child, shadowrootTemplates);
+}
+const builtinElementTemplates = {
+    'scroll-view': templateScrollView,
+    'x-audio-tt': templateXAudioTT,
+    'x-image': templateXImage,
+    'filter-image': templateFilterImage,
+    'x-input': templateXInput,
+    'x-list': templateXList,
+    'x-overlay-ng': templateXOverlayNg,
+    'x-refresh-view': templateXRefreshView,
+    'x-swiper': templateXSwiper,
+    'x-text': templateXText,
+    'inline-image': templateInlineImage,
+    'x-textarea': templateXTextarea,
+    'x-viewpage-ng': templateXViewpageNg
+};
+const builtinTagTransformMap = {
+    page: 'div',
+    view: 'x-view',
+    text: 'x-text',
+    image: 'x-image',
+    list: 'x-list',
+    svg: 'x-svg'
+};
+OffscreenElement.prototype.toJSON = function() {
+    return {
+        ssrID: this[_attributes].get(lynxPartIdAttribute) ?? this[_attributes].get(lynxUniqueIdAttribute)
+    };
+};
+async function createLynxView(config) {
+    const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, overrideElementTemplates = {}, hydrateUrl, autoSize, injectStyles, lynxViewStyle, threadStrategy = 'all-on-ui', initI18nResources } = config;
+    const template = await loadTemplate(rawTemplate, config.templateName);
+    const { promise: firstPaintReadyPromise, resolve: firstPaintReady } = Promise.withResolvers();
+    const mainWithBackgroundChannel = new MessageChannel();
+    const backgroundThreadRpc = new Rpc(mainWithBackgroundChannel.port1, 'background-thread');
+    const offscreenDocument = new OffscreenDocument({
+        onCommit: ()=>{}
+    });
+    const i18nResources = new I18nResources();
+    const events = [];
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument.createElement.bind(offscreenDocument), ()=>{
+        firstPaintReady();
+    }, ()=>{}, ()=>{}, ()=>{}, ()=>{}, (initI18nResources)=>{
+        i18nResources.setData(initI18nResources);
+        return i18nResources;
+    }, {
+        __AddEvent (element, eventName, eventData, eventOptions) {
+            events.push([
+                Number(element.getAttribute(lynxUniqueIdAttribute)),
+                eventName,
+                eventData,
+                eventOptions
+            ]);
+        }
+    });
+    const runtime = await startMainThread({
+        template,
+        initData,
+        globalProps,
+        browserConfig,
+        nativeModulesMap: {},
+        napiModulesMap: {},
+        tagMap: {
+            ...builtinTagTransformMap,
+            ...tagMap
+        },
+        initI18nResources
+    });
+    const elementTemplates = {
+        ...builtinElementTemplates,
+        ...overrideElementTemplates
+    };
+    async function renderToString() {
+        await firstPaintReadyPromise;
+        const ssrEncodeData = runtime?.ssrEncode?.();
+        const ssrDumpInfo = {
+            ssrEncodeData,
+            events
+        };
+        const buffer = [];
+        buffer.push('<lynx-view url="', hydrateUrl, '" ssr ="', encodeURI(JSON.stringify(ssrDumpInfo)), '" ', 'thread-strategy="', threadStrategy, '"');
+        if (autoSize) buffer.push(' height="auto" width="auto"');
+        if (lynxViewStyle) buffer.push(' style="', lynxViewStyle, '"');
+        buffer.push('><template shadowrootmode="open">', '<style>', injectStyles, '\n', inShadowRootStyles.join('\n'), '</style>');
+        dumpHTMLString(buffer, offscreenDocument, elementTemplates);
+        buffer.push('</template>');
+        buffer.push('</lynx-view>');
+        return buffer.join('');
+    }
+    return {
+        renderToString
+    };
+}
+if (!globalThis.requestAnimationFrame) {
+    globalThis.requestAnimationFrame = (cb)=>setTimeout(cb, 0);
+    globalThis.cancelAnimationFrame = (id)=>{
         clearTimeout(id);
     };
 }
+export { createLynxView };
+
 //# sourceMappingURL=index.js.map