lecodes-viewer 0.19.0

package/src/ui/creator-ui.js

@@ -0,0 +1,14 @@
+var Module = (() => {
+  
+  return (
+async function(moduleArg = {}) {
+  var moduleRtn;
+
+var Module=moduleArg;var readyPromiseResolve,readyPromiseReject;var readyPromise=new Promise((resolve,reject)=>{readyPromiseResolve=resolve;readyPromiseReject=reject});var ENVIRONMENT_IS_WEB=true;var ENVIRONMENT_IS_WORKER=false;var arguments_=[];var thisProgram="./this.program";var _scriptName=import.meta.url;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var readAsync,readBinary;if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){try{scriptDirectory=new URL(".",_scriptName).href}catch{}{readAsync=async url=>{var response=await fetch(url,{credentials:"same-origin"});if(response.ok){return response.arrayBuffer()}throw new Error(response.status+" : "+response.url)}}}else{}var out=console.log.bind(console);var err=console.error.bind(console);var wasmBinary;var wasmMemory;var ABORT=false;var HEAP8,HEAPU8,HEAP16,HEAPU16,HEAP32,HEAPU32,HEAPF32,HEAP64,HEAPU64,HEAPF64;var runtimeInitialized=false;function updateMemoryViews(){var b=wasmMemory.buffer;HEAP8=new Int8Array(b);HEAP16=new Int16Array(b);Module["HEAPU8"]=HEAPU8=new Uint8Array(b);HEAPU16=new Uint16Array(b);HEAP32=new Int32Array(b);Module["HEAPU32"]=HEAPU32=new Uint32Array(b);Module["HEAPF32"]=HEAPF32=new Float32Array(b);HEAPF64=new Float64Array(b);HEAP64=new BigInt64Array(b);HEAPU64=new BigUint64Array(b)}function preRun(){if(Module["preRun"]){if(typeof Module["preRun"]=="function")Module["preRun"]=[Module["preRun"]];while(Module["preRun"].length){addOnPreRun(Module["preRun"].shift())}}callRuntimeCallbacks(onPreRuns)}function initRuntime(){runtimeInitialized=true;wasmExports["R"]()}function postRun(){if(Module["postRun"]){if(typeof Module["postRun"]=="function")Module["postRun"]=[Module["postRun"]];while(Module["postRun"].length){addOnPostRun(Module["postRun"].shift())}}callRuntimeCallbacks(onPostRuns)}var runDependencies=0;var dependenciesFulfilled=null;function addRunDependency(id){runDependencies++;Module["monitorRunDependencies"]?.(runDependencies)}function removeRunDependency(id){runDependencies--;Module["monitorRunDependencies"]?.(runDependencies);if(runDependencies==0){if(dependenciesFulfilled){var callback=dependenciesFulfilled;dependenciesFulfilled=null;callback()}}}function abort(what){Module["onAbort"]?.(what);what="Aborted("+what+")";err(what);ABORT=true;what+=". Build with -sASSERTIONS for more info.";var e=new WebAssembly.RuntimeError(what);readyPromiseReject(e);throw e}var wasmBinaryFile;function findWasmBinary(){if(Module["locateFile"]){return locateFile("creator-ui.wasm")}return new URL("creator-ui.wasm",import.meta.url).href}function getBinarySync(file){if(file==wasmBinaryFile&&wasmBinary){return new Uint8Array(wasmBinary)}if(readBinary){return readBinary(file)}throw"both async and sync fetching of the wasm failed"}async function getWasmBinary(binaryFile){if(!wasmBinary){try{var response=await readAsync(binaryFile);return new Uint8Array(response)}catch{}}return getBinarySync(binaryFile)}async function instantiateArrayBuffer(binaryFile,imports){try{var binary=await getWasmBinary(binaryFile);var instance=await WebAssembly.instantiate(binary,imports);return instance}catch(reason){err(`failed to asynchronously prepare wasm: ${reason}`);abort(reason)}}async function instantiateAsync(binary,binaryFile,imports){if(!binary&&typeof WebAssembly.instantiateStreaming=="function"){try{var response=fetch(binaryFile,{credentials:"same-origin"});var instantiationResult=await WebAssembly.instantiateStreaming(response,imports);return instantiationResult}catch(reason){err(`wasm streaming compile failed: ${reason}`);err("falling back to ArrayBuffer instantiation")}}return instantiateArrayBuffer(binaryFile,imports)}function getWasmImports(){return{a:wasmImports}}async function createWasm(){function receiveInstance(instance,module){wasmExports=instance.exports;wasmMemory=wasmExports["Q"];updateMemoryViews();wasmTable=wasmExports["S"];removeRunDependency("wasm-instantiate");return wasmExports}addRunDependency("wasm-instantiate");function receiveInstantiationResult(result){return receiveInstance(result["instance"])}var info=getWasmImports();if(Module["instantiateWasm"]){return new Promise((resolve,reject)=>{Module["instantiateWasm"](info,(mod,inst)=>{resolve(receiveInstance(mod,inst))})})}wasmBinaryFile??=findWasmBinary();try{var result=await instantiateAsync(wasmBinary,wasmBinaryFile,info);var exports=receiveInstantiationResult(result);return exports}catch(e){readyPromiseReject(e);return Promise.reject(e)}}class ExitStatus{name="ExitStatus";constructor(status){this.message=`Program terminated with exit(${status})`;this.status=status}}var callRuntimeCallbacks=callbacks=>{while(callbacks.length>0){callbacks.shift()(Module)}};var onPostRuns=[];var addOnPostRun=cb=>onPostRuns.push(cb);var onPreRuns=[];var addOnPreRun=cb=>onPreRuns.push(cb);var noExitRuntime=true;var stackRestore=val=>__emscripten_stack_restore(val);var stackSave=()=>_emscripten_stack_get_current();var exceptionCaught=[];var uncaughtExceptionCount=0;var ___cxa_begin_catch=ptr=>{var info=new ExceptionInfo(ptr);if(!info.get_caught()){info.set_caught(true);uncaughtExceptionCount--}info.set_rethrown(false);exceptionCaught.push(info);___cxa_increment_exception_refcount(ptr);return ___cxa_get_exception_ptr(ptr)};var exceptionLast=0;var ___cxa_end_catch=()=>{_setThrew(0,0);var info=exceptionCaught.pop();___cxa_decrement_exception_refcount(info.excPtr);exceptionLast=0};class ExceptionInfo{constructor(excPtr){this.excPtr=excPtr;this.ptr=excPtr-24}set_type(type){HEAPU32[this.ptr+4>>2]=type}get_type(){return HEAPU32[this.ptr+4>>2]}set_destructor(destructor){HEAPU32[this.ptr+8>>2]=destructor}get_destructor(){return HEAPU32[this.ptr+8>>2]}set_caught(caught){caught=caught?1:0;HEAP8[this.ptr+12]=caught}get_caught(){return HEAP8[this.ptr+12]!=0}set_rethrown(rethrown){rethrown=rethrown?1:0;HEAP8[this.ptr+13]=rethrown}get_rethrown(){return HEAP8[this.ptr+13]!=0}init(type,destructor){this.set_adjusted_ptr(0);this.set_type(type);this.set_destructor(destructor)}set_adjusted_ptr(adjustedPtr){HEAPU32[this.ptr+16>>2]=adjustedPtr}get_adjusted_ptr(){return HEAPU32[this.ptr+16>>2]}}var setTempRet0=val=>__emscripten_tempret_set(val);var findMatchingCatch=args=>{var thrown=exceptionLast;if(!thrown){setTempRet0(0);return 0}var info=new ExceptionInfo(thrown);info.set_adjusted_ptr(thrown);var thrownType=info.get_type();if(!thrownType){setTempRet0(0);return thrown}for(var caughtType of args){if(caughtType===0||caughtType===thrownType){break}var adjusted_ptr_addr=info.ptr+16;if(___cxa_can_catch(caughtType,thrownType,adjusted_ptr_addr)){setTempRet0(caughtType);return thrown}}setTempRet0(thrownType);return thrown};var ___cxa_find_matching_catch_2=()=>findMatchingCatch([]);var ___cxa_find_matching_catch_3=arg0=>findMatchingCatch([arg0]);var ___cxa_rethrow=()=>{var info=exceptionCaught.pop();if(!info){abort("no exception to throw")}var ptr=info.excPtr;if(!info.get_rethrown()){exceptionCaught.push(info);info.set_rethrown(true);info.set_caught(false);uncaughtExceptionCount++}exceptionLast=ptr;throw exceptionLast};var ___cxa_throw=(ptr,type,destructor)=>{var info=new ExceptionInfo(ptr);info.init(type,destructor);exceptionLast=ptr;uncaughtExceptionCount++;throw exceptionLast};var ___resumeException=ptr=>{if(!exceptionLast){exceptionLast=ptr}throw exceptionLast};var __abort_js=()=>abort("");var abortOnCannotGrowMemory=requestedSize=>{abort("OOM")};var _emscripten_resize_heap=requestedSize=>{var oldSize=HEAPU8.length;requestedSize>>>=0;abortOnCannotGrowMemory(requestedSize)};var _fd_close=fd=>52;var INT53_MAX=9007199254740992;var INT53_MIN=-9007199254740992;var bigintToI53Checked=num=>num<INT53_MIN||num>INT53_MAX?NaN:Number(num);function _fd_seek(fd,offset,whence,newOffset){offset=bigintToI53Checked(offset);return 70}var printCharBuffers=[null,[],[]];var UTF8Decoder=new TextDecoder;var UTF8ArrayToString=(heapOrArray,idx=0,maxBytesToRead=NaN)=>{var endIdx=idx+maxBytesToRead;var endPtr=idx;while(heapOrArray[endPtr]&&!(endPtr>=endIdx))++endPtr;return UTF8Decoder.decode(heapOrArray.buffer?heapOrArray.subarray(idx,endPtr):new Uint8Array(heapOrArray.slice(idx,endPtr)))};var printChar=(stream,curr)=>{var buffer=printCharBuffers[stream];if(curr===0||curr===10){(stream===1?out:err)(UTF8ArrayToString(buffer));buffer.length=0}else{buffer.push(curr)}};var UTF8ToString=(ptr,maxBytesToRead)=>{if(!ptr)return"";var maxPtr=ptr+maxBytesToRead;for(var end=ptr;!(end>=maxPtr)&&HEAPU8[end];)++end;return UTF8Decoder.decode(HEAPU8.subarray(ptr,end))};var _fd_write=(fd,iov,iovcnt,pnum)=>{var num=0;for(var i=0;i<iovcnt;i++){var ptr=HEAPU32[iov>>2];var len=HEAPU32[iov+4>>2];iov+=8;for(var j=0;j<len;j++){printChar(fd,HEAPU8[ptr+j])}num+=len}HEAPU32[pnum>>2]=num;return 0};var wasmTable;var getWasmTableEntry=funcPtr=>wasmTable.get(funcPtr);var uleb128Encode=(n,target)=>{if(n<128){target.push(n)}else{target.push(n%128|128,n>>7)}};var sigToWasmTypes=sig=>{var typeNames={i:"i32",j:"i64",f:"f32",d:"f64",e:"externref",p:"i32"};var type={parameters:[],results:sig[0]=="v"?[]:[typeNames[sig[0]]]};for(var i=1;i<sig.length;++i){type.parameters.push(typeNames[sig[i]])}return type};var generateFuncType=(sig,target)=>{var sigRet=sig.slice(0,1);var sigParam=sig.slice(1);var typeCodes={i:127,p:127,j:126,f:125,d:124,e:111};target.push(96);uleb128Encode(sigParam.length,target);for(var paramType of sigParam){target.push(typeCodes[paramType])}if(sigRet=="v"){target.push(0)}else{target.push(1,typeCodes[sigRet])}};var convertJsFunctionToWasm=(func,sig)=>{if(typeof WebAssembly.Function=="function"){return new WebAssembly.Function(sigToWasmTypes(sig),func)}var typeSectionBody=[1];generateFuncType(sig,typeSectionBody);var bytes=[0,97,115,109,1,0,0,0,1];uleb128Encode(typeSectionBody.length,bytes);bytes.push(...typeSectionBody);bytes.push(2,7,1,1,101,1,102,0,0,7,5,1,1,102,0,0);var module=new WebAssembly.Module(new Uint8Array(bytes));var instance=new WebAssembly.Instance(module,{e:{f:func}});var wrappedFunc=instance.exports["f"];return wrappedFunc};var updateTableMap=(offset,count)=>{if(functionsInTableMap){for(var i=offset;i<offset+count;i++){var item=getWasmTableEntry(i);if(item){functionsInTableMap.set(item,i)}}}};var functionsInTableMap;var getFunctionAddress=func=>{if(!functionsInTableMap){functionsInTableMap=new WeakMap;updateTableMap(0,wasmTable.length)}return functionsInTableMap.get(func)||0};var freeTableIndexes=[];var getEmptyTableSlot=()=>{if(freeTableIndexes.length){return freeTableIndexes.pop()}try{wasmTable.grow(1)}catch(err){if(!(err instanceof RangeError)){throw err}throw"Unable to grow wasm table. Set ALLOW_TABLE_GROWTH."}return wasmTable.length-1};var setWasmTableEntry=(idx,func)=>wasmTable.set(idx,func);var addFunction=(func,sig)=>{var rtn=getFunctionAddress(func);if(rtn){return rtn}var ret=getEmptyTableSlot();try{setWasmTableEntry(ret,func)}catch(err){if(!(err instanceof TypeError)){throw err}var wrapped=convertJsFunctionToWasm(func,sig);setWasmTableEntry(ret,wrapped)}functionsInTableMap.set(func,ret);return ret};var stringToUTF8Array=(str,heap,outIdx,maxBytesToWrite)=>{if(!(maxBytesToWrite>0))return 0;var startIdx=outIdx;var endIdx=outIdx+maxBytesToWrite-1;for(var i=0;i<str.length;++i){var u=str.charCodeAt(i);if(u>=55296&&u<=57343){var u1=str.charCodeAt(++i);u=65536+((u&1023)<<10)|u1&1023}if(u<=127){if(outIdx>=endIdx)break;heap[outIdx++]=u}else if(u<=2047){if(outIdx+1>=endIdx)break;heap[outIdx++]=192|u>>6;heap[outIdx++]=128|u&63}else if(u<=65535){if(outIdx+2>=endIdx)break;heap[outIdx++]=224|u>>12;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}else{if(outIdx+3>=endIdx)break;heap[outIdx++]=240|u>>18;heap[outIdx++]=128|u>>12&63;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}}heap[outIdx]=0;return outIdx-startIdx};var stringToUTF8=(str,outPtr,maxBytesToWrite)=>stringToUTF8Array(str,HEAPU8,outPtr,maxBytesToWrite);var lengthBytesUTF8=str=>{var len=0;for(var i=0;i<str.length;++i){var c=str.charCodeAt(i);if(c<=127){len++}else if(c<=2047){len+=2}else if(c>=55296&&c<=57343){len+=4;++i}else{len+=3}}return len};{if(Module["noExitRuntime"])noExitRuntime=Module["noExitRuntime"];if(Module["print"])out=Module["print"];if(Module["printErr"])err=Module["printErr"];if(Module["wasmBinary"])wasmBinary=Module["wasmBinary"];if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"]}Module["UTF8ToString"]=UTF8ToString;Module["addFunction"]=addFunction;Module["stringToUTF8"]=stringToUTF8;Module["lengthBytesUTF8"]=lengthBytesUTF8;function cuiConsoleError(msg){console.error(UTF8ToString(msg))}var wasmImports={u:___cxa_begin_catch,M:___cxa_end_catch,a:___cxa_find_matching_catch_2,m:___cxa_find_matching_catch_3,N:___cxa_rethrow,t:___cxa_throw,d:___resumeException,E:__abort_js,L:cuiConsoleError,D:_emscripten_resize_heap,G:_fd_close,F:_fd_seek,w:_fd_write,n:invoke_fi,v:invoke_fii,j:invoke_fiif,h:invoke_fiiif,i:invoke_fiiiff,z:invoke_fiiifff,c:invoke_ii,s:invoke_iiffiiiffiiiii,e:invoke_iii,r:invoke_iiii,p:invoke_iiiii,J:invoke_iiiiii,B:invoke_iiiiiiiiffff,K:invoke_iiiiiiiiii,o:invoke_v,b:invoke_vi,A:invoke_vif,I:invoke_viffi,l:invoke_vifi,f:invoke_vii,x:invoke_viif,P:invoke_viiff,k:invoke_viii,O:invoke_viiiffffii,C:invoke_viiiffiiiii,g:invoke_viiii,H:invoke_viiiif,y:invoke_viiiii,q:invoke_viiiiii};var wasmExports=await createWasm();var ___wasm_call_ctors=wasmExports["R"];var _setMeasureFunc=Module["_setMeasureFunc"]=wasmExports["T"];var _getScreenId=Module["_getScreenId"]=wasmExports["U"];var _createNodeRoot=Module["_createNodeRoot"]=wasmExports["V"];var _createNode=Module["_createNode"]=wasmExports["W"];var _cancelSubtreeLoops=Module["_cancelSubtreeLoops"]=wasmExports["X"];var _freeNode=Module["_freeNode"]=wasmExports["Y"];var _removeNode=Module["_removeNode"]=wasmExports["Z"];var _addStringHandler=Module["_addStringHandler"]=wasmExports["_"];var _addFloatHandler=Module["_addFloatHandler"]=wasmExports["$"];var _addUIntHandler=Module["_addUIntHandler"]=wasmExports["aa"];var _addResetHandler=Module["_addResetHandler"]=wasmExports["ba"];var _clearUIHandlers=Module["_clearUIHandlers"]=wasmExports["ca"];var _setMatrixHandler=Module["_setMatrixHandler"]=wasmExports["da"];var _setTransformOriginHandler=Module["_setTransformOriginHandler"]=wasmExports["ea"];var _setGradientHandler=Module["_setGradientHandler"]=wasmExports["fa"];var _setGradientsHandler=Module["_setGradientsHandler"]=wasmExports["ga"];var _setFloat=Module["_setFloat"]=wasmExports["ha"];var _setFloatExt=Module["_setFloatExt"]=wasmExports["ia"];var _getColor=Module["_getColor"]=wasmExports["ja"];var _setString=Module["_setString"]=wasmExports["ka"];var _setStringExt=Module["_setStringExt"]=wasmExports["la"];var _getThemeValue=Module["_getThemeValue"]=wasmExports["ma"];var _resetProp=Module["_resetProp"]=wasmExports["na"];var _resetPropExt=Module["_resetPropExt"]=wasmExports["oa"];var _enableNodeLayer=Module["_enableNodeLayer"]=wasmExports["pa"];var _disableNodeLayer=Module["_disableNodeLayer"]=wasmExports["qa"];var _resetNodeLayer=Module["_resetNodeLayer"]=wasmExports["ra"];var _setNodeLayerLoop=Module["_setNodeLayerLoop"]=wasmExports["sa"];var _cancelNodeLayerLoop=Module["_cancelNodeLayerLoop"]=wasmExports["ta"];var _mergeNodeLayer=Module["_mergeNodeLayer"]=wasmExports["ua"];var _getLayer=Module["_getLayer"]=wasmExports["va"];var _setNodeClass=Module["_setNodeClass"]=wasmExports["wa"];var _setNodePressed=Module["_setNodePressed"]=wasmExports["xa"];var _setNodeFocused=Module["_setNodeFocused"]=wasmExports["ya"];var _calculate=Module["_calculate"]=wasmExports["za"];var _setConditionValue=Module["_setConditionValue"]=wasmExports["Aa"];var _calculateWidget=Module["_calculateWidget"]=wasmExports["Ba"];var _freeWidget=Module["_freeWidget"]=wasmExports["Ca"];var _setSafePaddings=Module["_setSafePaddings"]=wasmExports["Da"];var _overrideRootSafeBottom=Module["_overrideRootSafeBottom"]=wasmExports["Ea"];var _setSafeAreaBars=Module["_setSafeAreaBars"]=wasmExports["Fa"];var _setThemeValue=Module["_setThemeValue"]=wasmExports["Ga"];var _applyTheme=Module["_applyTheme"]=wasmExports["Ha"];var _recalculate=Module["_recalculate"]=wasmExports["Ia"];var _consumeNeedsLayout=Module["_consumeNeedsLayout"]=wasmExports["Ja"];var _getCachedRoot=Module["_getCachedRoot"]=wasmExports["Ka"];var _calculateRoot=Module["_calculateRoot"]=wasmExports["La"];var _collectBegin=Module["_collectBegin"]=wasmExports["Ma"];var _collectRoot=Module["_collectRoot"]=wasmExports["Na"];var _collectCount=Module["_collectCount"]=wasmExports["Oa"];var _collectNodes=Module["_collectNodes"]=wasmExports["Pa"];var _collectRects=Module["_collectRects"]=wasmExports["Qa"];var _markNodeDirty=Module["_markNodeDirty"]=wasmExports["Ra"];var _nodeHasFixedSize=Module["_nodeHasFixedSize"]=wasmExports["Sa"];var _nodeHasMeasure=Module["_nodeHasMeasure"]=wasmExports["Ta"];var _getOffset=Module["_getOffset"]=wasmExports["Ua"];var _getParentNode=Module["_getParentNode"]=wasmExports["Va"];var _getContentHeight=Module["_getContentHeight"]=wasmExports["Wa"];var _getContentWidth=Module["_getContentWidth"]=wasmExports["Xa"];var _getLayoutPointer=Module["_getLayoutPointer"]=wasmExports["Ya"];var _getLayoutDOMPointer=Module["_getLayoutDOMPointer"]=wasmExports["Za"];var _getPaddingPointer=Module["_getPaddingPointer"]=wasmExports["_a"];var _setVListHandlers=Module["_setVListHandlers"]=wasmExports["$a"];var _vlistInit=Module["_vlistInit"]=wasmExports["ab"];var _vlistExists=Module["_vlistExists"]=wasmExports["bb"];var _vlistFree=Module["_vlistFree"]=wasmExports["cb"];var _vlistSetKeys=Module["_vlistSetKeys"]=wasmExports["db"];var _vlistInsertKeys=Module["_vlistInsertKeys"]=wasmExports["eb"];var _vlistRemoveKeys=Module["_vlistRemoveKeys"]=wasmExports["fb"];var _vlistInvalidate=Module["_vlistInvalidate"]=wasmExports["gb"];var _vlistCreateItemRoot=Module["_vlistCreateItemRoot"]=wasmExports["hb"];var _vlistItemMounted=Module["_vlistItemMounted"]=wasmExports["ib"];var _vlistItemUnmounted=Module["_vlistItemUnmounted"]=wasmExports["jb"];var _vlistOnScroll=Module["_vlistOnScroll"]=wasmExports["kb"];var _vlistUpdateLayout=Module["_vlistUpdateLayout"]=wasmExports["lb"];var _vlistToPhysical=Module["_vlistToPhysical"]=wasmExports["mb"];var _vlistOffsetOf=Module["_vlistOffsetOf"]=wasmExports["nb"];var _vlistItemOffsetOf=Module["_vlistItemOffsetOf"]=wasmExports["ob"];var _free=Module["_free"]=wasmExports["pb"];var _malloc=Module["_malloc"]=wasmExports["qb"];var _setThrew=wasmExports["rb"];var __emscripten_tempret_set=wasmExports["sb"];var __emscripten_stack_restore=wasmExports["tb"];var _emscripten_stack_get_current=wasmExports["ub"];var ___cxa_increment_exception_refcount=wasmExports["vb"];var ___cxa_decrement_exception_refcount=wasmExports["wb"];var ___cxa_can_catch=wasmExports["xb"];var ___cxa_get_exception_ptr=wasmExports["yb"];function invoke_iii(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vi(index,a1){var sp=stackSave();try{getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_ii(index,a1){var sp=stackSave();try{return getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiii(index,a1,a2,a3,a4){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fii(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiffiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8,a9,a10){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8,a9,a10)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vifi(index,a1,a2,a3){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiiiiiffff(index,a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fi(index,a1){var sp=stackSave();try{return getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vii(index,a1,a2){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiff(index,a1,a2,a3,a4){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vif(index,a1,a2){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fiiiff(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fiiif(index,a1,a2,a3,a4){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fiif(index,a1,a2,a3){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiffiiiffiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12,a13){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12,a13)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiffffii(index,a1,a2,a3,a4,a5,a6,a7,a8,a9){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8,a9)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiii(index,a1,a2,a3,a4){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viii(index,a1,a2,a3){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_fiiifff(index,a1,a2,a3,a4,a5,a6){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_v(index){var sp=stackSave();try{getWasmTableEntry(index)()}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiii(index,a1,a2,a3,a4,a5){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiiiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8,a9){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8,a9)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiii(index,a1,a2,a3){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiiii(index,a1,a2,a3,a4,a5,a6){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiii(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viif(index,a1,a2,a3){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viffi(index,a1,a2,a3,a4){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiif(index,a1,a2,a3,a4,a5){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function run(){if(runDependencies>0){dependenciesFulfilled=run;return}preRun();if(runDependencies>0){dependenciesFulfilled=run;return}function doRun(){Module["calledRun"]=true;if(ABORT)return;initRuntime();readyPromiseResolve(Module);Module["onRuntimeInitialized"]?.();postRun()}if(Module["setStatus"]){Module["setStatus"]("Running...");setTimeout(()=>{setTimeout(()=>Module["setStatus"](""),1);doRun()},1)}else{doRun()}}function preInit(){if(Module["preInit"]){if(typeof Module["preInit"]=="function")Module["preInit"]=[Module["preInit"]];while(Module["preInit"].length>0){Module["preInit"].shift()()}}}preInit();run();moduleRtn=readyPromise;
+
+
+  return moduleRtn;
+}
+);
+})();
+export default Module;

package/src/ui/defaultStyle.css

@@ -0,0 +1,176 @@
+/* Background images never tile by default, app-wide — a repeated texture is almost never intended
+   and silently breaks a single-image background. Covers everything on the app root, including nodes
+   outside a screen (widgets, toasts); the per-scope rules below still add background-position. */
+* {
+  background-repeat: no-repeat;
+}
+
+.screen {
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none; /* no iOS long-press callout on images/text (long-press is the app's) */
+  text-align: left;
+  /* Renderer defaults sourced from the theme (docs/ui-theme-plan.md): --color/--fontFamily are
+     set by _creatorUI.setTheme on the app root. Unset --fontFamily leaves font-family invalid →
+     inherited, exactly the pre-theme behavior. */
+  color: var(--color, white);
+  font-family: var(--fontFamily);
+  font-size: 14px;
+}
+.screen.interactive {
+  pointer-events: all;
+}
+.scrollable {
+overflow-y:auto;
+overflow-x:hidden;
+pointer-events: all;
+}
+.vlist {
+overflow-y:auto;
+overflow-x:hidden;
+pointer-events: all;
+}
+.vlist::before {
+  content: "";
+  display: block;
+  height: var(--scroll-height);
+}
+.scrollable::-webkit-scrollbar {
+  width: 2px;
+}
+.scrollable::before {
+  content: "";
+  display: block;
+  height: var(--scroll-height);
+  width: var(--scroll-width);
+}
+/* UIPager: a horizontal scroll-snap strip of tab cells; each cell holds that tab's stack of
+   page layers, of which only the top is shown. */
+.pager {
+  display: flex;
+  flex-direction: row;
+  pointer-events: all;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+/* One tab, or the current tab drilled past its root — programmatic paging only. */
+.pager.pager_locked {
+  overflow: hidden;
+}
+.pager::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.pager-tab {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+.pager-page {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+.pager-page.pager-page_hidden {
+  display: none;
+}
+.scrollable_horizontal {
+overflow-x:auto;
+overflow-y:hidden;
+}
+.scrollable_horizontal::-webkit-scrollbar {
+  height: 2px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.8);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  pointer-events: all;
+  background: none;
+  padding: 0;
+  text-align: left;
+  color: inherit;
+  /* Form controls don't inherit font by default — a <button> keeps the UA's
+     control font (Arial), which the canvas measure system never assumes (it
+     measures against the app default, Roboto/the theme font). The mismatch sizes
+     a label's box for the narrower font and the wider rendered text then wraps.
+     Inherit the app font so measurement and paint agree. */
+  font: inherit;
+}
+img {
+  object-fit: contain;
+  user-select: none;
+  user-drag: none;
+  -webkit-user-drag: none;
+}
+video {
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+input, textarea {
+  pointer-events: all;
+  color: black;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: none;
+  resize: none;
+  /* Same reason as button: inherit the app font so the editable's rendered text
+     matches what the measure system sized its box for (default family = Roboto). */
+  font: inherit;
+}
+input::placeholder {
+  color: var(--placeholder-color, #aaa);
+}
+textarea::placeholder {
+  color: var(--placeholder-color, #aaa);
+}
+
+.screen * {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.spacer {
+  display: none;
+}
+
+.widget {
+  z-index: 10;
+  /* Like .screen: a widget is pointer-transparent by default, so a full-screen widget (a HUD over a
+     scene) lets taps on its empty areas fall through to the scene / whatever is beneath. Its
+     interactive children (buttons, inputs, scrollables) re-enable pointer-events themselves. A widget
+     that wants to catch taps on its whole surface gets .interactive (a root onTouchStart). */
+  pointer-events: none;
+}
+.widget.interactive {
+  pointer-events: all;
+}

package/src/ui/layers.ts

@@ -0,0 +1,9 @@
+// Style-layer numbering shared with creator-ui.cpp (`getLayer`) — the layer number IS the cascade
+// (highest active layer wins). Keep in lockstep with packages/creator-ui/src/creator-ui.cpp:
+// 256 default, 257/258 orientation, 272–59999 user $-classes (allocated by `getLayer` on first
+// sight), 60268/60269 the reserved `$pressed`/`$focused` classes (cascading, toggled via
+// setNodePressed/setNodeFocused), then interaction feedback, then animate layers on top.
+export const LAYER_PRESSED = 60270
+export const LAYER_FOCUSED = 60271
+/** animateTo/animateFrom layers live at ANIMATE_LAYER_BASE + (style.layer ?? 44). */
+export const ANIMATE_LAYER_BASE = 61000

package/src/ui/mountCanvasUI.ts

@@ -0,0 +1,213 @@
+// Browser mount adapter for the `lecodes-renderer` package. Produces a `_creatorUI`-shaped renderer (the
+// same contract `createUI` returns) so it drops straight into `mountCreator` via its `uiFactory`
+// param. It reuses the viewer's own creator-ui WASM (Vite-bundled here) for layout, paints the UI to
+// a 2D <canvas> overlaid on the 3D canvas, and forwards pointer events.
+
+// @ts-ignore — emscripten glue, no type declarations
+import createModule from "./creator-ui"
+import wasmUrl from "./creator-ui.wasm?url"
+import {
+  BrowserHost,
+  Canvas2DPainter,
+  CreatorUiLayout,
+  createCanvasUI,
+  loadCreatorUiFromModule,
+} from "lecodes-renderer"
+import { getUrl } from "../utils/fetch"
+import { orientedSafeArea, type SafeAreaSpec } from "./safeAreaSpec"
+import { viewScale } from "./viewScale"
+
+// Explicit `any` return: the inferred type references lecodes-renderer internals TS can't name
+// portably (TS2742), and the `_creatorUI` contract is untyped by design (host bridge shape).
+export async function createCanvasUIRenderer(root: HTMLElement, canvasHost?: { getSurface(id: number): { canvas: unknown, width: number, height: number } | null }): Promise<any> {
+  const wasmBinary = await fetch(wasmUrl).then((r) => r.arrayBuffer())
+  const module = await loadCreatorUiFromModule(createModule, wasmBinary)
+  const layout = new CreatorUiLayout(module)
+  // Resolve uploaded-asset image srcs ({ _id }) to blob urls via the viewer's fetch-buffer store, and
+  // UIImage(canvas) surfaces via the canvas host. SvgSource/File are handled in the host.
+  const ui = await createCanvasUI({ host: new BrowserHost({ resolveAssetUrl: (id) => getUrl(id), canvasSurfaces: canvasHost }), layout })
+
+  const canvas = document.createElement("canvas")
+  canvas.style.position = "absolute"
+  canvas.style.inset = "0"
+  canvas.style.width = "100%"
+  canvas.style.height = "100%"
+  canvas.style.touchAction = "none"
+  root.appendChild(canvas)
+
+  const ctx = canvas.getContext("2d")!
+  // Resolution factor (devicePixelRatio × CSS zoom) the canvas is painted at. The painter bakes it
+  // into its transform, so it's recreated whenever the factor changes (a resize onto a different-DPR
+  // display, or the simulator's zoom). See docs/simulator-plan.md phase 3.
+  const computeFactor = () => (window.devicePixelRatio || 1) * viewScale(canvas)
+  let factor = computeFactor()
+  let painter = new Canvas2DPainter(ctx, factor)
+
+  // ---- simulated keyboard (DOM) + key capture ----
+  // Core re-lays-out the UI into the area above the keyboard (it is NOT scaled); here we only draw the
+  // keyboard panel over the bottom band and keep a hidden <input> focused to capture physical
+  // keystrokes → ui.setInputValue.
+  const keyboard = buildKeyboard()
+  keyboard.el.style.display = "none"
+  root.appendChild(keyboard.el)
+
+  const capture = document.createElement("input")
+  capture.setAttribute("autocomplete", "off")
+  capture.style.cssText = "position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;"
+  root.appendChild(capture)
+  let captureNodeId = 0
+  capture.addEventListener("input", () => {
+    if (captureNodeId) ui.setInputValue(captureNodeId, capture.value)
+  })
+
+  ui.onKeyboardChange((state) => {
+    if (state) {
+      captureNodeId = state.input.nodeId
+      capture.type = state.input.type === "password" ? "password" : "text"
+      if (capture.value !== state.input.value) capture.value = state.input.value
+      capture.focus({ preventScroll: true })
+      keyboard.show(state.rect)
+    } else {
+      captureNodeId = 0
+      capture.blur()
+      keyboard.el.style.display = "none"
+    }
+  })
+
+  let raf = 0
+  let last = 0
+  // Set whenever the backing store is re-sized: writing canvas.width/height WIPES the canvas, and the
+  // renderer's own dirty state doesn't know that. When only the resolution factor moved (same logical
+  // size — a DPR/zoom change, or the host's ResizeObserver landing right after the mount-time resize)
+  // the layout is unchanged, so needsPaint() stays false and the idle-gate would leave the app on a
+  // blank canvas until the next mutation or a REAL resize. Lost pixels are a host fact, not renderer
+  // state — track them here and repaint once.
+  let pixelsLost = false
+  const loop = (now: number) => {
+    const dt = last === 0 ? 0 : now - last
+    last = now
+    // Idle-gate (matches the desktop host): only advance tweens when some are running, and only repaint
+    // when something actually changed (a mutation, input, scroll, or an in-flight tween). A static UI
+    // reuses the cached render tree and does zero work here instead of rebuilding + repainting every rAF.
+    if (ui.hasActiveAnimations()) ui.tick(dt)
+    if (pixelsLost || ui.needsPaint()) {
+      pixelsLost = false
+      ui.paint(painter)
+    }
+    raf = requestAnimationFrame(loop)
+  }
+
+  // Device-emulation safe-area override (the Simulator's iOS/Android shells). Without a spec the
+  // renderer keeps its own orientation defaults (Renderer.safeInsets — they match the DOM host's).
+  // Keyed change-detection: setSafeArea relayouts immediately, so only call it when the resolved
+  // insets/bars actually moved (a spec change or an orientation flip), not on every resize.
+  let safeAreaSpec: SafeAreaSpec | null = null
+  let appliedSafeKey = ""
+  const applySafeArea = (width: number, height: number) => {
+    const oriented = safeAreaSpec ? orientedSafeArea(safeAreaSpec, width > height) : null
+    const key = oriented ? JSON.stringify(oriented) : ""
+    if (key === appliedSafeKey) return
+    appliedSafeKey = key
+    ui.setSafeArea(oriented ? oriented.insets : null, oriented?.bars)
+  }
+
+  let cachedWidth = 0, cachedHeight = 0
+  const _onResize = (width: number, height: number, hostFactor?: number) => {
+    if (width <= 0 || height <= 0) return
+    const nextFactor = hostFactor ?? computeFactor()
+    if (nextFactor !== factor) { factor = nextFactor; painter = new Canvas2DPainter(ctx, factor) }
+    canvas.width = Math.round(width * factor)
+    canvas.height = Math.round(height * factor)
+    canvas.style.width = width + "px"
+    canvas.style.height = height + "px"
+    pixelsLost = true // the two writes above cleared the canvas — see the loop
+    applySafeArea(width, height) // before resize → the relayout below already sees the new insets
+    ui.resize(width, height)
+    cachedWidth = width; cachedHeight = height
+  }
+
+  const local = (e: PointerEvent): [number, number] => {
+    const r = canvas.getBoundingClientRect()
+    // Deliver logical px to the renderer — clientX/rect are VISUAL px under the simulator's CSS zoom.
+    const scale = viewScale(canvas)
+    return [(e.clientX - r.left) / scale, (e.clientY - r.top) / scale]
+  }
+  const onDown = (e: PointerEvent) => {
+    canvas.setPointerCapture(e.pointerId)
+    const [x, y] = local(e)
+    ui.pointerDown(e.pointerId, x, y)
+  }
+  const onMove = (e: PointerEvent) => {
+    const [x, y] = local(e)
+    ui.pointerMove(e.pointerId, x, y)
+  }
+  const onUp = (e: PointerEvent) => {
+    const [x, y] = local(e)
+    ui.pointerUp(e.pointerId, x, y)
+  }
+  canvas.addEventListener("pointerdown", onDown)
+  canvas.addEventListener("pointermove", onMove)
+  canvas.addEventListener("pointerup", onUp)
+
+  // Give the renderer a viewport before user code runs its first openScreen(). clientWidth/Height are
+  // layout px (zoom-independent) — the logical viewport; the host's ResizeObserver refreshes with the
+  // authoritative factor next tick.
+  _onResize(root.clientWidth, root.clientHeight)
+  raf = requestAnimationFrame(loop)
+
+  return Object.assign(ui, {
+    _onResize,
+    // Host-config: pin the safe-area insets/bars (null restores the renderer defaults).
+    _setSafeAreaSpec(spec: SafeAreaSpec | null) {
+      safeAreaSpec = spec
+      if (cachedWidth && cachedHeight) applySafeArea(cachedWidth, cachedHeight)
+    },
+    getDisplaySize: (): [number, number] => [cachedWidth, cachedHeight],
+    _destroy() {
+      cancelAnimationFrame(raf)
+      canvas.removeEventListener("pointerdown", onDown)
+      canvas.removeEventListener("pointermove", onMove)
+      canvas.removeEventListener("pointerup", onUp)
+      canvas.remove()
+      keyboard.el.remove()
+      capture.remove()
+    },
+  })
+}
+
+/**
+ * A non-functional on-screen keyboard panel (a few rows of key-like cells). Its only job is to occupy
+ * the bottom band so keyboard-related layout bugs surface in the preview. `pointerdown` is swallowed
+ * (preventDefault) so tapping it doesn't blur the hidden capture field.
+ */
+function buildKeyboard() {
+  const el = document.createElement("div")
+  // `space-evenly` distributes the leftover band height as even gaps between rows AND above the top /
+  // below the bottom row (the requested top/bottom padding). Keys are a fixed height so they read as
+  // keys instead of stretching to fill the band.
+  el.style.cssText =
+    "position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;background:#caced6;" +
+    "display:flex;flex-direction:column;justify-content:space-evenly;align-items:stretch;" +
+    "padding:6px 5px;z-index:20;user-select:none;-webkit-user-select:none;touch-action:none;"
+  const rows = ["10", "9", "7", "5"] // key counts per row (decorative)
+  for (const count of rows) {
+    const row = document.createElement("div")
+    row.style.cssText = "display:flex;justify-content:center;align-items:center;gap:6px;flex:0 0 auto;"
+    for (let i = 0; i < Number(count); i++) {
+      const key = document.createElement("div")
+      key.style.cssText =
+        "flex:1 1 0;max-width:32px;height:40px;background:#fff;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,0.25);"
+      row.appendChild(key)
+    }
+    el.appendChild(row)
+  }
+  el.addEventListener("pointerdown", (e) => e.preventDefault())
+
+  return {
+    el,
+    show(rect: { x: number; y: number; width: number; height: number }) {
+      el.style.height = rect.height + "px"
+      el.style.display = "flex"
+    },
+  }
+}

package/src/ui/nativeViewSystem.ts

@@ -0,0 +1,91 @@
+// NativeView on the web host (docs/navigation-presentable-plan.md — registerView + the
+// call/event channel + the "native" layout node). The embedding app registers DOM factories:
+//
+//   host._creatorUI._registerView("map", (params, channel) => {
+//     const el = document.createElement("div")
+//     return { el, call: (method, args) => {...}, destroy: () => {...} }
+//   })
+//
+// One SDK NativeView instance = one live DOM instance (keyed by its _viewId), reused across
+// embed/fullscreen/pager mounts — that reuse IS the promotion semantics. An unregistered
+// name renders a labeled placeholder so a bundle stays inspectable on hosts without the plugin.
+
+export type WebViewChannel = { emit(event: string, data?: any): void }
+export type WebViewInstanceHandle = {
+  el: HTMLElement
+  call?(method: string, args: any[]): any | Promise<any>
+  destroy?(): void
+}
+export type WebViewFactory = (params: any, channel: WebViewChannel) => WebViewInstanceHandle
+
+// The SDK-side NativeView element/descriptor surface the system needs (see sdk NativeView.ts).
+type SdkNativeView = {
+  viewName: string
+  params: any
+  _viewId: number
+  _emitViewEvent(event: string, dataJson?: string): void
+}
+
+export const createNativeViewSystem = () => {
+  const factories = new Map<string, WebViewFactory>()
+  const instances = new Map<number, WebViewInstanceHandle>()
+
+  const registerView = (name: string, factory: WebViewFactory) => { factories.set(name, factory) }
+  const isViewSupported = (name: string) => factories.has(name)
+
+  const placeholder = (name: string): WebViewInstanceHandle => {
+    const el = document.createElement("div")
+    el.style.cssText = "display:flex;align-items:center;justify-content:center;background:#333;color:#999;font:12px sans-serif"
+    el.textContent = `NativeView("${name}") — no web factory registered`
+    return { el }
+  }
+
+  /** Resolve (or lazily create) the live instance for an SDK NativeView. */
+  const ensureInstance = (view: SdkNativeView): WebViewInstanceHandle => {
+    let instance = instances.get(view._viewId)
+    if (!instance) {
+      const factory = factories.get(view.viewName)
+      instance = factory
+        ? factory(view.params, { emit: (event, data) => view._emitViewEvent(event, data === undefined ? undefined : JSON.stringify(data)) })
+        : placeholder(view.viewName)
+      instances.set(view._viewId, instance)
+    }
+    return instance
+  }
+
+  /** The `_creatorUI.viewCall` bridge — JSON in/out, promise-friendly. */
+  const viewCall = (viewId: number, method: string, args: string, onComplete: (result?: string) => void, onError: (err: string) => void) => {
+    const instance = instances.get(viewId)
+    if (!instance?.call) {
+      onError(`NativeView call "${method}": no live instance or no call handler (viewId ${viewId})`)
+      return
+    }
+    try {
+      Promise.resolve(instance.call(method, JSON.parse(args))).then(
+        (result) => onComplete(result === undefined ? undefined : JSON.stringify(result)),
+        (e) => onError(e instanceof Error ? e.message : String(e)),
+      )
+    } catch (e) {
+      onError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  /** Mount the live instance into a layout cell (the "native" node's DOM element). A view lives
+   *  in ONE place: mounting here steals it from wherever it was (promotion works the same way
+   *  in reverse — openView steals it from the cell, close returns it via re-mount). */
+  const mountInto = (view: SdkNativeView, cell: HTMLElement) => {
+    const { el } = ensureInstance(view)
+    el.style.position = "absolute"
+    el.style.inset = "0"
+    cell.appendChild(el)
+  }
+
+  const destroy = () => {
+    for (const i of instances.values()) i.destroy?.()
+    instances.clear()
+  }
+
+  return { registerView, isViewSupported, ensureInstance, viewCall, mountInto, destroy }
+}
+
+export type NativeViewSystem = ReturnType<typeof createNativeViewSystem>