@lvce-editor/renderer-process 30.60.3 → 30.62.0

package/dist/rendererProcessMain.js

@@ -1556,7 +1556,7 @@ const launchRendererWorker = async () => {
 };
 
 const selector = 'script.RendererWorkerTrace';
-const state$i = {
+const state$j = {
   enabled: false,
   entries: []
 };
@@ -1606,14 +1606,14 @@ const isCommand = value => {
 };
 const initialize = search => {
   const searchParams = new URLSearchParams(search);
-  state$i.enabled = searchParams.has('traceRendererWorker');
-  state$i.entries = [];
+  state$j.enabled = searchParams.has('traceRendererWorker');
+  state$j.entries = [];
 };
 const record = (direction, method, params) => {
-  if (!state$i.enabled) {
+  if (!state$j.enabled) {
     return;
   }
-  state$i.entries.push({
+  state$j.entries.push({
     direction,
     method,
     params: serialize(params),
@@ -1621,7 +1621,7 @@ const record = (direction, method, params) => {
   });
 };
 const listen$1 = rpc => {
-  if (!state$i.enabled) {
+  if (!state$j.enabled) {
     return;
   }
   const ipc = rpc.ipc;
@@ -1636,7 +1636,7 @@ const listen$1 = rpc => {
   });
 };
 const exportToDom = () => {
-  if (!state$i.enabled) {
+  if (!state$j.enabled) {
     return;
   }
   const existing = document.querySelector(selector);
@@ -1644,7 +1644,7 @@ const exportToDom = () => {
   script.className = 'RendererWorkerTrace';
   script.type = 'application/json';
   script.textContent = JSON.stringify({
-    entries: state$i.entries,
+    entries: state$j.entries,
     version: 1
   });
   if (!existing) {
@@ -1652,42 +1652,42 @@ const exportToDom = () => {
   }
 };
 const scheduleExport = () => {
-  if (!state$i.enabled) {
+  if (!state$j.enabled) {
     return;
   }
   queueMicrotask(exportToDom);
 };
 
-const state$h = {
+const state$i = {
   rpc: undefined
 };
 const hydrate$4 = async () => {
   const result = await launchRendererWorker();
   if (isError(result)) {
-    state$h.rpc = undefined;
+    state$i.rpc = undefined;
     return result;
   }
-  state$h.rpc = result.value;
+  state$i.rpc = result.value;
   listen$1(result.value);
   return success(undefined);
 };
 const send$1 = (method, ...params) => {
   record('sent', method, params);
   // @ts-ignore
-  state$h.rpc.send(method, ...params);
+  state$i.rpc.send(method, ...params);
 };
 const invoke$1 = (method, ...params) => {
   record('sent', method, params);
   // @ts-ignore
-  return state$h.rpc.invoke(method, ...params);
+  return state$i.rpc.invoke(method, ...params);
 };
 const invokeAndTransfer = (method, ...params) => {
   record('sent', method, params);
   // @ts-ignore
-  return state$h.rpc.invokeAndTransfer(method, ...params);
+  return state$i.rpc.invokeAndTransfer(method, ...params);
 };
 
-const state$g = {
+const state$h = {
   client: undefined,
   enabled: false,
   lastError: '',
@@ -1697,38 +1697,38 @@ const state$g = {
 const workerUrl = new URL('sessionReplayWorkerMain.js', import.meta.url);
 const reloadMessage = 'Reload the window to start session replay with the complete DOM command history';
 const report = error => {
-  state$g.lastError = error instanceof Error ? error.message : String(error);
-  state$g.stopObserving?.();
-  state$g.stopObserving = undefined;
-  console.warn(`Session replay: ${state$g.lastError}`);
+  state$h.lastError = error instanceof Error ? error.message : String(error);
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  console.warn(`Session replay: ${state$h.lastError}`);
 };
 
 // Retain snapshot recording for older renderer workers during dependency rollout.
-const configure = async options => {
-  state$g.stopObserving?.();
-  state$g.stopObserving = undefined;
-  state$g.enabled = false;
-  if (state$g.client) {
+const configure$1 = async options => {
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  state$h.enabled = false;
+  if (state$h.client) {
     try {
-      await state$g.client.invoke('stop');
+      await state$h.client.invoke('stop');
     } catch (error) {
       report(error);
     }
     // Live channels still need their proxy after capture stops.
-    if (!state$g.proxy) {
-      state$g.client.dispose();
-      state$g.client = undefined;
+    if (!state$h.proxy) {
+      state$h.client.dispose();
+      state$h.client = undefined;
     }
   }
   if (!options.local && !options.upload) return '';
-  if (state$g.proxy) throw new Error(reloadMessage);
-  state$g.lastError = '';
+  if (state$h.proxy) throw new Error(reloadMessage);
+  state$h.lastError = '';
   const client = createClient(workerUrl);
   try {
     const id = await client.invoke('start', options);
-    state$g.stopObserving = observe(document, (type, data) => client.invoke('record', type, data), report);
-    state$g.client = client;
-    state$g.enabled = true;
+    state$h.stopObserving = observe(document, (type, data) => client.invoke('record', type, data), report);
+    state$h.client = client;
+    state$h.enabled = true;
     return id;
   } catch (error) {
     client.dispose();
@@ -1736,7 +1736,7 @@ const configure = async options => {
   }
 };
 const configureProxy = async (options, port) => {
-  if (state$g.client || !options.local && !options.upload) {
+  if (state$h.client || !options.local && !options.upload) {
     port.close();
     throw new Error(reloadMessage);
   }
@@ -1749,25 +1749,25 @@ const configureProxy = async (options, port) => {
       commandMap: commandMapRef,
       messagePort: proxyPort
     });
-    const original = state$h.rpc;
-    state$h.rpc = {
+    const original = state$i.rpc;
+    state$i.rpc = {
       ...rpc,
       async dispose() {
         try {
           await rpc.dispose();
         } finally {
           client.dispose();
-          state$g.client = undefined;
-          state$g.enabled = false;
-          state$g.proxy = false;
+          state$h.client = undefined;
+          state$h.enabled = false;
+          state$h.proxy = false;
           await original?.dispose();
         }
       }
     };
-    state$g.client = client;
-    state$g.enabled = true;
-    state$g.proxy = true;
-    state$g.lastError = '';
+    state$h.client = client;
+    state$h.enabled = true;
+    state$h.proxy = true;
+    state$h.lastError = '';
     return id;
   } catch (error) {
     proxyPort?.close();
@@ -1777,21 +1777,21 @@ const configureProxy = async (options, port) => {
   }
 };
 const getSession = async () => {
-  if (!state$g.enabled || !state$g.client) throw new Error('Session replay is disabled in settings');
-  return state$g.client.invoke('export');
+  if (!state$h.enabled || !state$h.client) throw new Error('Session replay is disabled in settings');
+  return state$h.client.invoke('export');
 };
 const getStatus = async () => {
-  if (!state$g.client) return {
+  if (!state$h.client) return {
     enabled: false,
-    error: state$g.lastError
+    error: state$h.lastError
   };
   return {
-    enabled: state$g.enabled,
-    ...(await state$g.client.invoke('status')),
-    captureError: state$g.lastError
+    enabled: state$h.enabled,
+    ...(await state$h.client.invoke('status')),
+    captureError: state$h.lastError
   };
 };
-const flush = async () => state$g.client?.invoke('flush');
+const flush = async () => state$h.client?.invoke('flush');
 const openLocalFile = async () => {
   const input = document.createElement('input');
   input.type = 'file';
@@ -1802,7 +1802,7 @@ const openLocalFile = async () => {
     try {
       if (file.size > 64 * 1024 * 1024) throw new Error('Session replay file is too large');
       const session = JSON.parse(await file.text());
-      await configure({
+      await configure$1({
         endpoint: '',
         local: false,
         upload: false
@@ -1911,25 +1911,25 @@ const confirm = message => {
   return window.confirm(message);
 };
 
-const state$f = {
+const state$g = {
   styleSheets: Object.create(null),
   texts: Object.create(null)
 };
 const set$b = (id, sheet) => {
-  state$f.styleSheets[id] = sheet;
+  state$g.styleSheets[id] = sheet;
 };
 const get$a = id => {
-  return state$f.styleSheets[id];
+  return state$g.styleSheets[id];
 };
 const setText$2 = (id, text) => {
-  state$f.texts[id] = text;
+  state$g.texts[id] = text;
 };
 const getText = id => {
-  return state$f.texts[id];
+  return state$g.texts[id];
 };
 const remove$4 = id => {
-  delete state$f.styleSheets[id];
-  delete state$f.texts[id];
+  delete state$g.styleSheets[id];
+  delete state$g.texts[id];
 };
 
 const addCssStyleSheet = (id, text) => {
@@ -2124,7 +2124,7 @@ const createIdGenerator = () => {
 };
 const create$A = createIdGenerator();
 
-const state$e = Object.create(null);
+const state$f = Object.create(null);
 const retainString = (item, index) => {
   const value = new Promise(resolve => {
     item.getAsString(resolve);
@@ -2175,25 +2175,25 @@ const retainItems = dataTransfer => {
 };
 const addItems = items => {
   const id = create$A();
-  state$e[id] = items;
+  state$f[id] = items;
   return id;
 };
 const add$2 = dataTransfer => {
   return addItems(retainItems(dataTransfer));
 };
 const acquire$2 = id => {
-  const items = state$e[id];
+  const items = state$f[id];
   if (!items) {
     throw new Error(`Drop data not found: ${id}`);
   }
-  delete state$e[id];
+  delete state$f[id];
   return items;
 };
 
-const state$d = Object.create(null);
+const state$e = Object.create(null);
 const acquire$1 = id => {
-  const promise = state$d[id];
-  delete state$d[id];
+  const promise = state$e[id];
+  delete state$e[id];
   return promise;
 };
 const getFileHandles = async ids => {
@@ -2203,7 +2203,7 @@ const getFileHandles = async ids => {
 };
 const add$1 = promise => {
   const id = create$A();
-  state$d[id] = promise;
+  state$e[id] = promise;
   return id;
 };
 const addFileHandle$1 = fileHandle => {
@@ -2394,14 +2394,14 @@ const getEventListenerArgs = (params, event) => {
   return serialized;
 };
 
-const state$c = {
+const state$d = {
   ipc: undefined
 };
 const getIpc = () => {
-  return state$c.ipc;
+  return state$d.ipc;
 };
 const setIpc = value => {
-  state$c.ipc = value;
+  state$d.ipc = value;
 };
 
 const nameAnonymousFunction$1 = (fn, name) => {
@@ -2592,7 +2592,7 @@ const Span = 8;
 const Table = 9;
 const TBody = 10;
 const Td = 11;
-const Text$2 = 12;
+const Text$3 = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
@@ -2733,7 +2733,7 @@ const VirtualDomElements = {
   THead,
   Table,
   Td,
-  Text: Text$2,
+  Text: Text$3,
   TextArea,
   Tfoot,
   Th,
@@ -3241,6 +3241,19 @@ const detachEvent = ($Node, key) => {
   $Node.removeEventListener(keyLower, previous.listener, previous.options);
   listenersByEvent?.delete(keyLower);
 };
+const detachAll = $Node => {
+  const listeners = attachedListeners.get($Node);
+  if (!listeners) {
+    return;
+  }
+  for (const [name, {
+    listener,
+    options
+  }] of listeners) {
+    $Node.removeEventListener(name, listener, options);
+  }
+  attachedListeners.delete($Node);
+};
 
 const toCamelCase = key => {
   let camelCaseKey = '';
@@ -3440,7 +3453,7 @@ const {
   Polyline,
   Rect,
   Svg,
-  Text: Text$1,
+  Text: Text$2,
   Use,
   Reference} = VirtualDomElements;
 
@@ -3465,18 +3478,18 @@ const renderReferenceNode = (element, eventMap, newEventMap) => {
   setProps($Node, props, eventMap, newEventMap);
   return $Node;
 };
-const render$1 = (element, eventMap, newEventMap) => {
+const render$2 = (element, eventMap, newEventMap) => {
   switch (element.type) {
     case Reference:
       return renderReferenceNode(element, eventMap, newEventMap);
-    case Text$1:
+    case Text$2:
       return renderDomTextNode(element);
     default:
       return renderDomElement(element, eventMap, newEventMap);
   }
 };
 
-const renderInternal = ($Parent, elements, eventMap, newEventMap, renderElement = render$1) => {
+const renderInternal = ($Parent, elements, eventMap, newEventMap, renderElement = render$2) => {
   const max = elements.length - 1;
   let stack = [];
   for (let i = max; i >= 0; i--) {
@@ -3492,7 +3505,7 @@ const renderInternal = ($Parent, elements, eventMap, newEventMap, renderElement
   $Parent.append(...stack);
 };
 
-const renderInto = ($Parent, dom, eventMap = {}) => {
+const renderInto$1 = ($Parent, dom, eventMap = {}) => {
   clearNode($Parent);
   renderInternal($Parent, dom, eventMap);
 };
@@ -3501,7 +3514,7 @@ const renderInto = ($Parent, dom, eventMap = {}) => {
  * @param {any[]} elements
  * @returns
  */
-const render = (elements, eventMap = {}, newEventMap = {}) => {
+const render$1 = (elements, eventMap = {}, newEventMap = {}) => {
   const $Root = document.createElement('div');
   renderInternal($Root, elements, eventMap, newEventMap);
   return $Root;
@@ -3516,13 +3529,13 @@ const removeChild = ($Element, index) => {
     $Child.remove();
   }
 };
-const add = ($Element, nodes, eventMap = {}) => {
-  renderInternal($Element, nodes, eventMap, eventMap);
+const add = ($Element, nodes, eventMap = {}, renderElement) => {
+  renderInternal($Element, nodes, eventMap, eventMap, renderElement);
 };
-const replace = ($Element, nodes, eventMap = {}) => {
+const replace = ($Element, nodes, eventMap = {}, renderElement) => {
   // Create a temporary container to render the new nodes
   const $Temp = document.createElement('div');
-  renderInternal($Temp, nodes, eventMap, eventMap);
+  renderInternal($Temp, nodes, eventMap, eventMap, renderElement);
   // Replace the current element with the new node(s)
   const $NewNode = $Temp.firstChild;
   if (!$NewNode) {
@@ -3626,7 +3639,7 @@ const handleMultiNavigation = (state, navigations, nextPatchType, $Element, patc
   }
   return true;
 };
-const handleSetReferenceNodeUid = (state, patch) => {
+const handleSetReferenceNodeUid = (state, patch, options) => {
   const instance = get$9(patch.uid);
   if (!instance || !instance.state) {
     console.error('Cannot set reference node uid: instance not found', {
@@ -3635,6 +3648,7 @@ const handleSetReferenceNodeUid = (state, patch) => {
     return false;
   }
   const $NewNode = instance.state.$Viewlet;
+  options.onRemove?.(state.current);
   // @ts-ignore
   state.current.replaceWith($NewNode);
   state.current = $NewNode;
@@ -3655,10 +3669,10 @@ const handleNavigationPatch = (state, patch, patches, patchIndex, $Element) => {
       return true;
   }
 };
-const applyMutationPatch = (state, patch, events) => {
+const applyMutationPatch = (state, patch, events, options) => {
   switch (patch.type) {
     case Add:
-      add(state.current, patch.nodes, events);
+      add(state.current, patch.nodes, events, options.renderElement);
       state.hasAppliedMutation = true;
       break;
     case RemoveAttribute:
@@ -3666,11 +3680,13 @@ const applyMutationPatch = (state, patch, events) => {
       state.hasAppliedMutation = true;
       break;
     case RemoveChild:
+      options.onRemove?.(state.current.childNodes[patch.index]);
       removeChild(state.current, patch.index);
       state.hasAppliedMutation = true;
       break;
     case Replace:
-      state.current = replace(state.current, patch.nodes, events);
+      options.onRemove?.(state.current);
+      state.current = replace(state.current, patch.nodes, events, options.renderElement);
       state.hasAppliedMutation = true;
       break;
     case SetAttribute:
@@ -3683,7 +3699,7 @@ const applyMutationPatch = (state, patch, events) => {
       break;
   }
 };
-const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
+const applyPatch$2 = ($Element, patches, eventMap = {}, id = 0, options = {}) => {
   const events = getEventListenerMap(id) || eventMap;
   const state = {
     current: $Element,
@@ -3696,12 +3712,12 @@ const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
         return;
       }
       if (patch.type === SetReferenceNodeUid) {
-        if (!handleSetReferenceNodeUid(state, patch)) {
+        if (!handleSetReferenceNodeUid(state, patch, options)) {
           return;
         }
         continue;
       }
-      applyMutationPatch(state, patch, events);
+      applyMutationPatch(state, patch, events, options);
     } catch (error) {
       console.error('Error applying patch at index ' + patchIndex, patch, error);
       throw error;
@@ -3782,7 +3798,7 @@ const restoreFocusedElement = ($Hidden, $New, focused) => {
 };
 const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, activeElement) => {
   const newEventMap = getEventListenerMap(uid);
-  const $New = render(dom, eventMap, newEventMap).firstChild;
+  const $New = render$1(dom, eventMap, newEventMap).firstChild;
   // A referenced pane can be temporarily absent from the new layout. Leave its
   // focused input in that pane unless there is a replacement to transfer it to.
   const hasReplacement = focused && $New.querySelector(`[name="${CSS.escape(focused)}"]`);
@@ -3841,7 +3857,7 @@ const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
     }
     if (!uid) {
       const $Hidden = createHiddenContainer(activeElement, focused);
-      renderInto($Viewlet, dom, eventMap);
+      renderInto$1($Viewlet, dom, eventMap);
       $Hidden.remove();
     }
     restoreFocus($Viewlet, isRootTree, isTreeFocused, focused);
@@ -3855,6 +3871,156 @@ const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
   }
 };
 
+const safeTags = new Set(['div', 'span', 'p', 'section', 'header', 'footer', 'main', 'nav']);
+const safeProps = new Set(['type', 'childCount', 'id', 'className', 'title', 'role', 'style']);
+const validateLimit = limit => {
+  if (!Number.isSafeInteger(limit) || limit < 0) {
+    throw new RangeError('Cache limits must be nonnegative safe integers');
+  }
+  return limit;
+};
+const createRenderer = (options = {}) => {
+  const domLimit = validateLimit(options.cache?.dom ?? 0);
+  const textLimit = validateLimit(options.cache?.text ?? 0);
+  const elements = [];
+  const texts = [];
+  const owned = new WeakSet();
+  const recyclable = new WeakSet();
+  const rootNodes = new Map();
+  const rootByNode = new WeakMap();
+  const parentRoots = new WeakMap();
+  let activeRoot;
+  const rememberNode = node => {
+    owned.add(node);
+    if (activeRoot) {
+      rootNodes.get(activeRoot)?.add(node);
+      rootByNode.set(node, activeRoot);
+    }
+  };
+  const renderElement = (node, eventMap, newEventMap) => {
+    if (node.type === Reference) {
+      return render$2(node, eventMap, newEventMap);
+    }
+    let result;
+    if (node.type === Text$2) {
+      const text = texts.pop() || document.createTextNode('');
+      text.data = node.text;
+      result = text;
+    } else {
+      const tag = getElementTag(node.type);
+      const index = elements.findIndex(element => element.localName === tag && element.ownerDocument === document);
+      if (index === -1) {
+        result = render$2(node, eventMap, newEventMap);
+      } else {
+        const element = elements.splice(index, 1)[0];
+        setProps(element, node, eventMap, newEventMap);
+        result = element;
+      }
+      recyclable.delete(result);
+      if (safeTags.has(tag) && Object.keys(node).every(key => safeProps.has(key) || key.startsWith('aria-') || key.startsWith('data-') || key.startsWith('on'))) {
+        recyclable.add(result);
+      }
+    }
+    rememberNode(result);
+    return result;
+  };
+  const collect = node => {
+    if (!node || !owned.has(node)) {
+      return;
+    }
+    owned.delete(node);
+    rootByNode.delete(node);
+    for (const child of node.childNodes) {
+      collect(child);
+    }
+    if (node instanceof Text) {
+      node.data = '';
+      if (texts.length < textLimit) {
+        texts.push(node);
+      }
+    } else if (node instanceof Element) {
+      detachAll(node);
+      node.replaceChildren();
+      if (node instanceof HTMLElement && recyclable.has(node) && Object.getOwnPropertyNames(node).length === 0) {
+        for (const name of node.getAttributeNames()) {
+          node.removeAttribute(name);
+        }
+        node.scrollTop = 0;
+        node.scrollLeft = 0;
+        if (elements.length < domLimit) {
+          elements.push(node);
+        }
+      }
+    }
+  };
+  const dispose = root => {
+    const trackedRoot = rootNodes.has(root) ? root : parentRoots.get(root);
+    if (!trackedRoot) {
+      return;
+    }
+    const nodes = rootNodes.get(trackedRoot);
+    rootNodes.delete(trackedRoot);
+    trackedRoot.remove();
+    const nodesToCollect = nodes || [];
+    for (const node of nodesToCollect) {
+      collect(node);
+    }
+    trackedRoot.replaceChildren();
+  };
+  const render = (nodes, eventMap = {}, newEventMap = {}) => {
+    const root = document.createElement('div');
+    rootNodes.set(root, new Set());
+    activeRoot = root;
+    try {
+      renderInternal(root, nodes, eventMap, newEventMap, renderElement);
+    } finally {
+      activeRoot = undefined;
+    }
+    return root;
+  };
+  const renderInto = (parent, nodes, eventMap = {}, newEventMap = {}) => {
+    dispose(parent);
+    const root = render(nodes, eventMap, newEventMap);
+    parent.replaceChildren(...root.childNodes);
+    parentRoots.set(parent, root);
+  };
+  const getRoot = node => {
+    let current = node;
+    while (current) {
+      const root = rootByNode.get(current);
+      if (root) {
+        return root;
+      }
+      current = current.parentNode;
+    }
+    return undefined;
+  };
+  const applyPatch = (element, patches, eventMap = {}, id = 0) => {
+    const root = getRoot(element);
+    activeRoot = root;
+    try {
+      const options = {
+        onRemove: collect,
+        renderElement
+      };
+      applyPatch$2(element, patches, eventMap, id, options);
+    } finally {
+      activeRoot = undefined;
+    }
+  };
+  const clearCache = () => {
+    elements.length = 0;
+    texts.length = 0;
+  };
+  return {
+    applyPatch,
+    render,
+    renderInto,
+    dispose,
+    clearCache
+  };
+};
+
 const set$8 = setComponentUid;
 const get$7 = getComponentUid;
 const fromEvent = getComponentUidFromEvent;
@@ -3931,26 +4097,26 @@ const launchDragAndDropWorker = async () => {
   }
 };
 
-const state$b = {
+const state$c = {
   rpc: undefined
 };
 const hydrate$3 = async () => {
   const result = await launchDragAndDropWorker();
   if (isError(result)) {
-    state$b.rpc = undefined;
+    state$c.rpc = undefined;
     return result;
   }
-  state$b.rpc = result.value;
+  state$c.rpc = result.value;
   return success(undefined);
 };
 const handleMessagePort$1 = async port => {
-  if (!state$b.rpc) {
+  if (!state$c.rpc) {
     const result = await hydrate$3();
     if (isError(result)) {
       throw result.error;
     }
   }
-  const rpc = state$b.rpc;
+  const rpc = state$c.rpc;
   if (!rpc) {
     throw new Error('Drag And Drop Worker failed to initialize');
   }
@@ -4553,7 +4719,7 @@ const create$u = async ({
   // @ts-ignore
   return module.create(options);
 };
-const dispose$i = id => {
+const dispose$j = id => {
   const worker = remove$3(id);
   worker?.terminate();
 };
@@ -4609,6 +4775,10 @@ const setThemeColor = color => {
   meta.content = color;
 };
 
+const setModernUi = enabled => {
+  document.body.classList.toggle('ModernUi', enabled);
+};
+
 const Alert = 'alert';
 const Application = 'application';
 const Complementary = 'complementary';
@@ -4651,7 +4821,7 @@ const create$Button = (label, icon) => {
 };
 
 // TODO this file is not needed when all elements are position fixed
-const state$a = {
+const state$b = {
   $Widgets: undefined,
   widgetSet: new Set()
 };
@@ -4663,20 +4833,20 @@ const create$Widgets = () => {
 };
 const append$1 = $Element => {
   // TODO should not call append in the first place if it is already in DOM
-  if (state$a.widgetSet.has($Element)) {
+  if (state$b.widgetSet.has($Element)) {
     return;
   }
-  state$a.widgetSet.add($Element);
-  if (state$a.$Widgets) {
+  state$b.widgetSet.add($Element);
+  if (state$b.$Widgets) {
     // @ts-expect-error
-    state$a.$Widgets.append($Element);
+    state$b.$Widgets.append($Element);
   } else {
     // @ts-expect-error
-    state$a.$Widgets = create$Widgets();
+    state$b.$Widgets = create$Widgets();
     // @ts-expect-error
-    state$a.$Widgets.append($Element);
+    state$b.$Widgets.append($Element);
     // @ts-expect-error
-    document.body.append(state$a.$Widgets);
+    document.body.append(state$b.$Widgets);
   }
 };
 const remove$1 = $Element => {
@@ -4684,17 +4854,17 @@ const remove$1 = $Element => {
     // TODO $Element should always be defined
     return;
   }
-  state$a.widgetSet.delete($Element);
+  state$b.widgetSet.delete($Element);
   $Element.remove();
   // TODO state.$Widgets should always be defined at this point
-  if (state$a.widgetSet.size === 0 && state$a.$Widgets) {
+  if (state$b.widgetSet.size === 0 && state$b.$Widgets) {
     // @ts-expect-error
-    state$a.$Widgets.remove();
-    state$a.$Widgets = undefined;
+    state$b.$Widgets.remove();
+    state$b.$Widgets = undefined;
   }
 };
 
-const state$9 = {
+const state$a = {
   nextNotificationId: 0
 };
 const handleCloseClick = event => {
@@ -4717,7 +4887,7 @@ const create$Notification = message => {
   const $NotificationMessage = create$NotificationMessage(message);
   const $CloseButton = create$CloseButton();
   const $Notification = document.createElement('div');
-  $Notification.id = `Notification-${++state$9.nextNotificationId}`;
+  $Notification.id = `Notification-${++state$a.nextNotificationId}`;
   $Notification.className = 'Notification';
   $Notification.append($NotificationMessage, $CloseButton);
   return $Notification;
@@ -4766,7 +4936,7 @@ const create$NotificationWithOptions = (message, options) => {
     $NotificationOptions.append($NotificationOption);
   }
   const $Notification = document.createElement('div');
-  $Notification.id = `Notification-${++state$9.nextNotificationId}`;
+  $Notification.id = `Notification-${++state$a.nextNotificationId}`;
   $Notification.className = 'Notification';
   $Notification.append($NotificationMessage, $CloseButton, $NotificationOptions);
   $Notification.onclick = handleNotificationClick;
@@ -4777,7 +4947,7 @@ const createWithOptions = (type, message, options) => {
   append$1($Notification);
   return $Notification.id;
 };
-const dispose$h = id => {
+const dispose$i = id => {
   const $Notification = document.getElementById(id);
   if ($Notification?.classList.contains('Notification')) {
     remove$1($Notification);
@@ -4791,11 +4961,11 @@ const revokeObjectUrl = url => {
   URL.revokeObjectURL(url);
 };
 
-const state$8 = {
+const state$9 = {
   canvasObjects: Object.create(null)
 };
 const set$5 = (canvasId, canvas) => {
-  state$8.canvasObjects[canvasId] = canvas;
+  state$9.canvasObjects[canvasId] = canvas;
 };
 
 const create$r = async (canvasId, objectId) => {
@@ -4894,16 +5064,16 @@ const findIndex = ($Container, $Target) => {
   return -1;
 };
 
-const state$7 = {
+const state$8 = {
   /**
    * @type {HTMLElement|undefined}
    */
   $PreviousFocusElement: undefined};
 const setElement = $Element => {
-  state$7.$PreviousFocusElement = $Element;
+  state$8.$PreviousFocusElement = $Element;
 };
 const getElement = () => {
-  return state$7.$PreviousFocusElement;
+  return state$8.$PreviousFocusElement;
 };
 
 const focus$e = $Element => {
@@ -4960,6 +5130,34 @@ const setHeight = ($Element, height) => {
   $Element.style.height = `${height}px`;
 };
 
+const state$7 = {
+  renderer: undefined
+};
+const configure = options => {
+  const cache = options?.cache;
+  state$7.renderer = cache?.dom > 0 || cache?.text > 0 ? createRenderer(options) : undefined;
+};
+const render = (nodes, eventMap = {}, newEventMap = {}) => {
+  return state$7.renderer?.render(nodes, eventMap, newEventMap) || render$1(nodes, eventMap, newEventMap);
+};
+const renderInto = (parent, nodes, eventMap = {}, newEventMap = {}) => {
+  if (state$7.renderer) {
+    state$7.renderer.renderInto(parent, nodes, eventMap, newEventMap);
+    return;
+  }
+  renderInto$1(parent, nodes, eventMap);
+};
+const applyPatch$1 = (element, patches, eventMap = {}, id = 0) => {
+  if (state$7.renderer) {
+    state$7.renderer.applyPatch(element, patches, eventMap, id);
+    return;
+  }
+  applyPatch$2(element, patches, eventMap, id);
+};
+const dispose$h = root => {
+  state$7.renderer?.dispose(root);
+};
+
 const FocusLocationList = 17;
 const FocusMenu = 18;
 const FocusSimpleBrowserInput = 23;
@@ -5495,7 +5693,7 @@ const ElementActions = {
 };
 
 const Css = 1;
-const Text = 2;
+const Text$1 = 2;
 const HasText = 3;
 const Nth = 4;
 
@@ -5533,7 +5731,7 @@ const selectorToString = parsedSelector => {
       result += ` >> ${part.selector}`;
       continue;
     }
-    if (part.type === Text || part.type === 'text') {
+    if (part.type === Text$1 || part.type === 'text') {
       if (!result) {
         result = `text=${part.text}`;
         continue;
@@ -5557,7 +5755,7 @@ const querySelector = parsedSelector => {
   }
   let elements = [document.body];
   for (const part of parsedSelector) {
-    if (part.type === Text || part.type === 'text') {
+    if (part.type === Text$1 || part.type === 'text') {
       elements = elements.flatMap(element => {
         return querySelectorByText(element, part.text);
       });
@@ -6140,6 +6338,10 @@ const transferToWebView = objectId => {
   }, targetOrigin, [port]);
 };
 
+const applyPatch = (element, patches, eventMap = {}, id = 0) => {
+  applyPatch$1(element, patches, eventMap, id);
+};
+
 const attachEvents$7 = ($Node, eventMap) => {
   for (const [key, value] of Object.entries(eventMap)) {
     $Node.addEventListener(key, value);
@@ -7353,7 +7555,6 @@ const setDom$8 = (state, dom) => {
     $Viewlet
   } = state;
   const $Root = render(dom);
-  // @ts-expect-error
   $ListItems.replaceChildren(...$Root.firstChild.childNodes);
   append$1($Viewlet);
   // TODO recycle nodes
@@ -7429,7 +7630,6 @@ const setDom$7 = (state, dom) => {
     $Viewlet
   } = state;
   const $Root = render(dom);
-  // @ts-expect-error
   $Viewlet.replaceChildren(...$Root.firstChild.childNodes);
   append$1($Viewlet);
 };
@@ -10443,6 +10643,7 @@ const dispose$3 = id => {
     if (instance.factory.dispose) {
       instance.factory.dispose(instance.state);
     }
+    dispose$h(instance.state.$Viewlet);
     if (instance.state.$Viewlet?.isConnected) {
       instance.state.$Viewlet.remove();
     }
@@ -11224,7 +11425,7 @@ const commandMap = {
   'HandleMessagePort.handleMessagePort': handleMessagePort,
   'InitData.getInitData': getInitData,
   'IpcParent.create': create$u,
-  'IpcParent.dispose': dispose$i,
+  'IpcParent.dispose': dispose$j,
   'KeyBindings.setIdentifiers': setIdentifiers,
   'Layout.getBounds': getBounds,
   'Location.getHref': getHref,
@@ -11242,7 +11443,7 @@ const commandMap = {
   'Meta.setThemeColor': setThemeColor,
   'Notification.create': create$s,
   'Notification.createWithOptions': createWithOptions,
-  'Notification.dispose': dispose$h,
+  'Notification.dispose': dispose$i,
   'ObjectUrl.create': createObjectUrl,
   'ObjectUrl.revoke': revokeObjectUrl,
   'OffscreenCanvas.create': create$r,
@@ -11256,7 +11457,7 @@ const commandMap = {
   'PointerCapture.unmock': unmock,
   'Prompt.prompt': prompt,
   'ScreenCapture.start': start,
-  'SessionReplay.configure': configure,
+  'SessionReplay.configure': configure$1,
   'SessionReplay.configureProxy': configureProxy,
   'SessionReplay.flush': flush,
   'SessionReplay.getSession': getSession,
@@ -11297,6 +11498,7 @@ const commandMap = {
   'Viewlet.setBounds': setBounds$1,
   'Viewlet.setComponentDom': setComponentDom,
   'Viewlet.show': show,
+  'VirtualDom.configure': configure,
   'WebRtc.readMicLevels': readMicLevels,
   'WebRtc.setRemoteDescription': setRemoteDescription,
   'WebRtc.startWebRtcAudioStream': startWebRtcAudioStream,
@@ -11327,7 +11529,8 @@ const commandMap = {
   'Window.revealBrowserTab': revealBrowserTab,
   'Window.toggleFullScreen': toggleFullScreen,
   'Window.unmaximize': unmaximize,
-  'WindowTitle.set': set$1
+  'WindowTitle.set': set$1,
+  'Workbench.setModernUi': setModernUi
 };
 
 const RE_AT = /^\s+at/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "30.60.3",
+  "version": "30.62.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"