@lvce-editor/renderer-process 25.2.0 → 26.1.0

package/dist/rendererProcessMain.js

@@ -797,167 +797,92 @@ const VirtualDomElements = {
   Video: Video$1
 };
 
+const elementTagMap = {
+  [A]: A$1,
+  [Article]: Article$1,
+  [Aside]: Aside$1,
+  [Audio$2]: Audio$3,
+  [BlockQuote]: BlockQuote$1,
+  [Br$1]: Br$2,
+  [Button]: Button$1,
+  [Canvas]: Canvas$1,
+  [Circle]: Circle$1,
+  [Cite]: Cite$1,
+  [Code$1]: Code$2,
+  [Col]: Col$1,
+  [ColGroup]: ColGroup$1,
+  [Data]: Data$1,
+  [Dd]: Dd$1,
+  [Defs]: Defs$1,
+  [Del]: Del$1,
+  [Div]: Div$1,
+  [Dl$1]: Dl$2,
+  [Dt$1]: Dt$2,
+  [Ellipse]: Ellipse$1,
+  [Em]: Em$1,
+  [Figcaption]: Figcaption$1,
+  [Figure]: Figure$1,
+  [Footer]: Footer$1,
+  [Form]: Form$1,
+  [G$1]: G$2,
+  [H1]: H1$1,
+  [H2]: H2$1,
+  [H3]: H3$1,
+  [H4]: H4$1,
+  [H5]: H5$1,
+  [H6]: H6$1,
+  [Head]: Head$1,
+  [Header]: Header$1,
+  [Hr]: Hr$1,
+  [Html]: Html$1,
+  [I]: I$1,
+  [Iframe]: Iframe$1,
+  [Img]: Img$1,
+  [Input]: Input$1,
+  [Ins]: Ins$1,
+  [Kbd]: Kbd$1,
+  [Label]: Label$1,
+  [Li$1]: Li$2,
+  [Line]: Line$1,
+  [Main]: Main$1,
+  [Meta]: Meta$1,
+  [Nav]: Nav$1,
+  [Ol$1]: Ol$2,
+  [Option]: Option$1,
+  [P]: P$1,
+  [Path]: Path$1,
+  [Polygon]: Polygon$1,
+  [Polyline]: Polyline$1,
+  [Pre]: Pre$1,
+  [Quote$2]: Quote$3,
+  [Rect]: Rect$1,
+  [Search]: Search$1,
+  [Section]: Section$1,
+  [Select]: Select$1,
+  [Span]: Span$1,
+  [Strong]: Strong$1,
+  [Style]: Style$1,
+  [Svg]: Svg$1,
+  [Table]: Table$1,
+  [TBody]: TBody$1,
+  [Td]: Td$1,
+  [TextArea]: TextArea$1,
+  [Tfoot]: Tfoot$1,
+  [Th]: Th$1,
+  [THead]: THead$1,
+  [Time]: Time$1,
+  [Title]: Title$1,
+  [Tr$1]: Tr$2,
+  [Ul]: Ul$1,
+  [Use]: Use$1,
+  [Video$1]: Video$2
+};
 const getElementTag$1 = type => {
-  switch (type) {
-    case A:
-      return A$1;
-    case Article:
-      return Article$1;
-    case Aside:
-      return Aside$1;
-    case Audio$2:
-      return Audio$3;
-    case BlockQuote:
-      return BlockQuote$1;
-    case Br$1:
-      return Br$2;
-    case Button:
-      return Button$1;
-    case Canvas:
-      return Canvas$1;
-    case Circle:
-      return Circle$1;
-    case Cite:
-      return Cite$1;
-    case Code$1:
-      return Code$2;
-    case Col:
-      return Col$1;
-    case ColGroup:
-      return ColGroup$1;
-    case Data:
-      return Data$1;
-    case Dd:
-      return Dd$1;
-    case Defs:
-      return Defs$1;
-    case Del:
-      return Del$1;
-    case Div:
-      return Div$1;
-    case Dl$1:
-      return Dl$2;
-    case Dt$1:
-      return Dt$2;
-    case Ellipse:
-      return Ellipse$1;
-    case Em:
-      return Em$1;
-    case Figcaption:
-      return Figcaption$1;
-    case Figure:
-      return Figure$1;
-    case Footer:
-      return Footer$1;
-    case Form:
-      return Form$1;
-    case G$1:
-      return G$2;
-    case H1:
-      return H1$1;
-    case H2:
-      return H2$1;
-    case H3:
-      return H3$1;
-    case H4:
-      return H4$1;
-    case H5:
-      return H5$1;
-    case H6:
-      return H6$1;
-    case Head:
-      return Head$1;
-    case Header:
-      return Header$1;
-    case Hr:
-      return Hr$1;
-    case Html:
-      return Html$1;
-    case I:
-      return I$1;
-    case Iframe:
-      return Iframe$1;
-    case Img:
-      return Img$1;
-    case Input:
-      return Input$1;
-    case Ins:
-      return Ins$1;
-    case Kbd:
-      return Kbd$1;
-    case Label:
-      return Label$1;
-    case Li$1:
-      return Li$2;
-    case Line:
-      return Line$1;
-    case Main:
-      return Main$1;
-    case Meta:
-      return Meta$1;
-    case Nav:
-      return Nav$1;
-    case Ol$1:
-      return Ol$2;
-    case Option:
-      return Option$1;
-    case P:
-      return P$1;
-    case Path:
-      return Path$1;
-    case Polygon:
-      return Polygon$1;
-    case Polyline:
-      return Polyline$1;
-    case Pre:
-      return Pre$1;
-    case Quote$2:
-      return Quote$3;
-    case Rect:
-      return Rect$1;
-    case Search:
-      return Search$1;
-    case Section:
-      return Section$1;
-    case Select:
-      return Select$1;
-    case Span:
-      return Span$1;
-    case Strong:
-      return Strong$1;
-    case Style:
-      return Style$1;
-    case Svg:
-      return Svg$1;
-    case Table:
-      return Table$1;
-    case TBody:
-      return TBody$1;
-    case Td:
-      return Td$1;
-    case TextArea:
-      return TextArea$1;
-    case Tfoot:
-      return Tfoot$1;
-    case Th:
-      return Th$1;
-    case THead:
-      return THead$1;
-    case Time:
-      return Time$1;
-    case Title:
-      return Title$1;
-    case Tr$1:
-      return Tr$2;
-    case Ul:
-      return Ul$1;
-    case Use:
-      return Use$1;
-    case Video$1:
-      return Video$2;
-    default:
-      throw new Error(`element tag not found ${type}`);
+  const elementTag = elementTagMap[type];
+  if (elementTag) {
+    return elementTag;
   }
+  throw new Error(`element tag not found ${type}`);
 };
 
 const ElementTagMap = {
@@ -1146,189 +1071,100 @@ const Quote = 93;
 const Star = 131;
 const Plus = 132;
 
+const keyCodeMap = {
+  [Backquote$1]: Backquote,
+  [Backquote2]: Backquote,
+  [Backslash$1]: Backslash,
+  [Backspace$1]: Backspace,
+  [BracketLeft$1]: BracketLeft,
+  [BracketRight$1]: BracketRight,
+  [Comma$1]: Comma,
+  [Delete$1]: Delete,
+  [Digit0$1]: Digit0,
+  [Digit1$1]: Digit1,
+  [Digit2$1]: Digit2,
+  [Digit3$1]: Digit3,
+  [Digit4$1]: Digit4,
+  [Digit5$1]: Digit5,
+  [Digit6$1]: Digit6,
+  [Digit7$1]: Digit7,
+  [Digit8$1]: Digit8,
+  [Digit9$1]: Digit9,
+  [DownArrow$1]: DownArrow,
+  [End$1]: End,
+  [Enter$1]: Enter,
+  [Equal$1]: Equal,
+  [Escape$1]: Escape,
+  [F1$1]: F1,
+  [F10$1]: F10,
+  [F11$1]: F11,
+  [F12$1]: F12,
+  [F13$1]: F13,
+  [F14$1]: F14,
+  [F15$1]: F15,
+  [F16$1]: F16,
+  [F17$1]: F17,
+  [F18$1]: F18,
+  [F19$1]: F19,
+  [F2$1]: F2,
+  [F20$1]: F20,
+  [F21$1]: F21,
+  [F22$1]: F22,
+  [F23$1]: F23,
+  [F24$1]: F24,
+  [F3$1]: F3,
+  [F4$1]: F4,
+  [F5$1]: F5,
+  [F6$1]: F6,
+  [F7$1]: F7,
+  [F8$1]: F8,
+  [F9$1]: F9,
+  [Home$1]: Home,
+  [Insert$1]: Insert,
+  [KeyA$1]: KeyA,
+  [KeyB$1]: KeyB,
+  [KeyC$1]: KeyC,
+  [KeyD$1]: KeyD,
+  [KeyE$1]: KeyE,
+  [KeyF$1]: KeyF,
+  [KeyG$1]: KeyG,
+  [KeyH$1]: KeyH,
+  [KeyI$1]: KeyI,
+  [KeyJ$1]: KeyJ,
+  [KeyK$1]: KeyK,
+  [KeyL$1]: KeyL,
+  [KeyM$1]: KeyM,
+  [KeyN$1]: KeyN,
+  [KeyO$1]: KeyO,
+  [KeyP$1]: KeyP,
+  [KeyQ$1]: KeyQ,
+  [KeyR$1]: KeyR,
+  [KeyS$1]: KeyS,
+  [KeyT$1]: KeyT,
+  [KeyU$1]: KeyU,
+  [KeyV$1]: KeyV,
+  [KeyW$1]: KeyW,
+  [KeyX$1]: KeyX,
+  [KeyY$1]: KeyY,
+  [KeyZ$1]: KeyZ,
+  [LeftArrow$1]: LeftArrow,
+  [Minus$1]: Minus,
+  [PageDown$1]: PageDown,
+  [PageUp$1]: PageUp,
+  [Period$1]: Period,
+  [Plus$1]: Plus,
+  [Quote$1]: Quote,
+  [RightArrow$1]: RightArrow,
+  [SemiColon$1]: SemiColon,
+  [Slash$1]: Slash,
+  [Space$1]: Space,
+  [Space2]: Space,
+  [Star$1]: Star,
+  [Tab$1]: Tab,
+  [UpArrow$1]: UpArrow
+};
 const getKeyCode = key => {
-  switch (key) {
-    case Backquote$1:
-    case Backquote2:
-      return Backquote;
-    case Backslash$1:
-      return Backslash;
-    case Backspace$1:
-      return Backspace;
-    case BracketLeft$1:
-      return BracketLeft;
-    case BracketRight$1:
-      return BracketRight;
-    case Comma$1:
-      return Comma;
-    case Delete$1:
-      return Delete;
-    case Digit0$1:
-      return Digit0;
-    case Digit1$1:
-      return Digit1;
-    case Digit2$1:
-      return Digit2;
-    case Digit3$1:
-      return Digit3;
-    case Digit4$1:
-      return Digit4;
-    case Digit5$1:
-      return Digit5;
-    case Digit6$1:
-      return Digit6;
-    case Digit7$1:
-      return Digit7;
-    case Digit8$1:
-      return Digit8;
-    case Digit9$1:
-      return Digit9;
-    case DownArrow$1:
-      return DownArrow;
-    case End$1:
-      return End;
-    case Enter$1:
-      return Enter;
-    case Equal$1:
-      return Equal;
-    case Escape$1:
-      return Escape;
-    case F1$1:
-      return F1;
-    case F10$1:
-      return F10;
-    case F11$1:
-      return F11;
-    case F12$1:
-      return F12;
-    case F13$1:
-      return F13;
-    case F14$1:
-      return F14;
-    case F15$1:
-      return F15;
-    case F16$1:
-      return F16;
-    case F17$1:
-      return F17;
-    case F18$1:
-      return F18;
-    case F19$1:
-      return F19;
-    case F2$1:
-      return F2;
-    case F20$1:
-      return F20;
-    case F21$1:
-      return F21;
-    case F22$1:
-      return F22;
-    case F23$1:
-      return F23;
-    case F24$1:
-      return F24;
-    case F3$1:
-      return F3;
-    case F4$1:
-      return F4;
-    case F5$1:
-      return F5;
-    case F6$1:
-      return F6;
-    case F7$1:
-      return F7;
-    case F8$1:
-      return F8;
-    case F9$1:
-      return F9;
-    case Home$1:
-      return Home;
-    case Insert$1:
-      return Insert;
-    case KeyA$1:
-      return KeyA;
-    case KeyB$1:
-      return KeyB;
-    case KeyC$1:
-      return KeyC;
-    case KeyD$1:
-      return KeyD;
-    case KeyE$1:
-      return KeyE;
-    case KeyF$1:
-      return KeyF;
-    case KeyG$1:
-      return KeyG;
-    case KeyH$1:
-      return KeyH;
-    case KeyI$1:
-      return KeyI;
-    case KeyJ$1:
-      return KeyJ;
-    case KeyK$1:
-      return KeyK;
-    case KeyL$1:
-      return KeyL;
-    case KeyM$1:
-      return KeyM;
-    case KeyN$1:
-      return KeyN;
-    case KeyO$1:
-      return KeyO;
-    case KeyP$1:
-      return KeyP;
-    case KeyQ$1:
-      return KeyQ;
-    case KeyR$1:
-      return KeyR;
-    case KeyS$1:
-      return KeyS;
-    case KeyT$1:
-      return KeyT;
-    case KeyU$1:
-      return KeyU;
-    case KeyV$1:
-      return KeyV;
-    case KeyW$1:
-      return KeyW;
-    case KeyX$1:
-      return KeyX;
-    case KeyY$1:
-      return KeyY;
-    case KeyZ$1:
-      return KeyZ;
-    case LeftArrow$1:
-      return LeftArrow;
-    case Minus$1:
-      return Minus;
-    case PageDown$1:
-      return PageDown;
-    case PageUp$1:
-      return PageUp;
-    case Period$1:
-      return Period;
-    case Plus$1:
-      return Plus;
-    case Quote$1:
-      return Quote;
-    case RightArrow$1:
-      return RightArrow;
-    case SemiColon$1:
-      return SemiColon;
-    case Slash$1:
-      return Slash;
-    case Space$1:
-    case Space2:
-      return Space;
-    case Star$1:
-      return Star;
-    case Tab$1:
-      return Tab;
-    case UpArrow$1:
-      return UpArrow;
-    default:
-      return Unknown;
-  }
+  return keyCodeMap[key] || Unknown;
 };
 
 const CtrlCmd = 1 << 11 >>> 0;
@@ -1464,114 +1300,91 @@ const setStyle = ($Element, styleString) => {
   }
 };
 
+const optionalAttributeProps = new Map([['ariaActivedescendant', 'aria-activedescendant'], ['ariaOwns', 'aria-owns']]);
+const mappedAttributeProps = new Map([['ariaControls', 'aria-controls'], ['ariaLabelledBy', 'aria-labelledby']]);
+const pixelStyleProps = new Set(['left', 'marginTop', 'paddingLeft', 'paddingRight', 'top']);
+const eventProps = new Set(['onBlur', 'onChange', 'onClick', 'onContextMenu', 'onBeforeInput', 'onDblClick', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onFocus', 'onFocusIn', 'onFocusOut', 'onInput', 'onKeydown', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPointerDown', 'onPointerMove', 'onPointerOut', 'onPointerOver', 'onScroll', 'onSelectionChange', 'onSubmit', 'onWheel']);
+const setOptionalAttribute = ($Element, attributeName, value) => {
+  if (value) {
+    $Element.setAttribute(attributeName, value);
+    return;
+  }
+  $Element.removeAttribute(attributeName);
+};
+const setDimension = ($Element, key, value) => {
+  if ($Element instanceof HTMLImageElement) {
+    $Element[key] = value;
+    return;
+  }
+  $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+};
+const setPixelStyle = ($Element, key, value) => {
+  $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+};
+const setEventProp = ($Element, key, value, eventMap, newEventMap) => {
+  if (!eventMap || !value) {
+    return;
+  }
+  const eventName = key.slice(2).toLowerCase();
+  attachEvent$1($Element, eventMap, eventName, value, newEventMap);
+};
 const setProp = ($Element, key, value, eventMap, newEventMap) => {
-  switch (key) {
-    case 'ariaActivedescendant':
-      if (value) {
-        $Element.setAttribute('aria-activedescendant', value);
-      } else {
-        $Element.removeAttribute('aria-activedescendant');
-      }
-      break;
-    case 'ariaControls':
-      $Element.setAttribute('aria-controls', value);
-      break;
-    case 'ariaLabelledBy':
-      $Element.setAttribute('aria-labelledby', value);
-      break;
-    case 'ariaOwns':
-      // TODO remove this once idl is supported
-      if (value) {
-        $Element.setAttribute('aria-owns', value);
-      } else {
-        $Element.removeAttribute('aria-owns');
-      }
-      break;
-    case 'childCount':
-    case 'type':
-      break;
-    case 'height':
-    case 'width':
-      if ($Element instanceof HTMLImageElement) {
-        $Element[key] = value;
-      } else if (typeof value === 'number') {
-        $Element.style[key] = `${value}px`;
-      } else {
-        $Element.style[key] = value;
-      }
-      break;
-    case 'id':
-      if (value) {
-        $Element[key] = value;
-      } else {
-        $Element.removeAttribute(key);
-      }
-      break;
-    case 'inputType':
-      // @ts-ignore
-      $Element.type = value;
-      break;
-    case 'left':
-    case 'marginTop':
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'top':
-      $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
-      break;
-    case 'maskImage':
-      $Element.style.maskImage = `url('${value}')`;
-      $Element.style.webkitMaskImage = `url('${value}')`;
-      break;
-    case 'onBlur':
-    case 'onChange':
-    case 'onClick':
-    case 'onContextMenu':
-    case 'onDblClick':
-    case 'onDragEnd':
-    case 'onDragEnter':
-    case 'onDragLeave':
-    case 'onDragOver':
-    case 'onDragStart':
-    case 'onDrop':
-    case 'onFocus':
-    case 'onFocusIn':
-    case 'onFocusOut':
-    case 'onInput':
-    case 'onKeydown':
-    case 'onKeyDown':
-    case 'onKeyUp':
-    case 'onMouseDown':
-    case 'onMouseMove':
-    case 'onMouseOut':
-    case 'onMouseOver':
-    case 'onMouseUp':
-    case 'onPointerDown':
-    case 'onPointerMove':
-    case 'onPointerOut':
-    case 'onPointerOver':
-    case 'onScroll':
-    case 'onSelectionChange':
-    case 'onSubmit':
-    case 'onWheel':
-      const eventName = key.slice(2).toLowerCase();
-      if (!eventMap || !value) {
-        return;
-      }
-      attachEvent$1($Element, eventMap, eventName, value, newEventMap);
-      break;
-    case 'style':
-      setStyle($Element, value);
-      break;
-    case 'translate':
-      $Element.style[key] = value;
-      break;
-    default:
-      if (key.startsWith('data-')) {
-        $Element.dataset[key.slice('data-'.length)] = value;
-      } else {
-        $Element[key] = value;
-      }
+  const optionalAttributeName = optionalAttributeProps.get(key);
+  if (optionalAttributeName) {
+    setOptionalAttribute($Element, optionalAttributeName, value);
+    return;
+  }
+  const mappedAttributeName = mappedAttributeProps.get(key);
+  if (mappedAttributeName) {
+    $Element.setAttribute(mappedAttributeName, value);
+    return;
+  }
+  if (key === 'childCount' || key === 'type') {
+    return;
+  }
+  if (key === 'height' || key === 'width') {
+    setDimension($Element, key, value);
+    return;
   }
+  if (key === 'id') {
+    if (value) {
+      $Element[key] = value;
+    } else {
+      $Element.removeAttribute(key);
+    }
+    return;
+  }
+  if (key === 'inputType') {
+    // @ts-ignore
+    $Element.type = value;
+    return;
+  }
+  if (pixelStyleProps.has(key)) {
+    setPixelStyle($Element, key, value);
+    return;
+  }
+  if (key === 'maskImage') {
+    $Element.style.maskImage = `url('${value}')`;
+    $Element.style.webkitMaskImage = `url('${value}')`;
+    return;
+  }
+  if (eventProps.has(key)) {
+    setEventProp($Element, key, value, eventMap, newEventMap);
+    return;
+  }
+  if (key === 'style') {
+    setStyle($Element, value);
+    return;
+  }
+  if (key === 'translate') {
+    $Element.style[key] = value;
+    return;
+  }
+  if (key.startsWith('data-')) {
+    $Element.dataset[key.slice('data-'.length)] = value;
+    return;
+  }
+  $Element[key] = value;
 };
 
 const setProps = ($Element, props, eventMap, newEventMap) => {
@@ -1716,117 +1529,136 @@ const RemoveChild = 9;
 const NavigateSibling = 10;
 const SetReferenceNodeUid = 11;
 
+const handleNavigateChild = (state, patches, patchIndex) => {
+  const patch = patches[patchIndex];
+  const $Children = state.current.childNodes;
+  const $Child = $Children[patch.index];
+  if ($Child) {
+    state.current = $Child;
+    return true;
+  }
+  const nextPatch = patches[patchIndex + 1];
+  if (nextPatch && nextPatch.type === Replace && patch.index === $Children.length) {
+    const $Placeholder = document.createComment('virtual-dom-placeholder');
+    state.current.append($Placeholder);
+    state.current = $Placeholder;
+    return true;
+  }
+  console.error('Cannot navigate to child: child not found at index', {
+    $Current: state.current,
+    index: patch.index,
+    childCount: $Children.length
+  });
+  return false;
+};
+const handleNavigateParent = state => {
+  const $Parent = state.current.parentNode;
+  if (!$Parent) {
+    console.error('Cannot navigate to parent: current node has no parent', {
+      $Current: state.current
+    });
+    return false;
+  }
+  state.current = $Parent;
+  return true;
+};
+const handleNavigateSibling = (state, patch, $Element, patchIndex) => {
+  const $Parent = state.current.parentNode;
+  if (!$Parent) {
+    console.error('Cannot navigate to sibling: current node has no parent', {
+      patchIndex
+    });
+    return false;
+  }
+  let $Sibling = $Parent.childNodes[patch.index];
+  if (!$Sibling && !state.hasAppliedMutation && state.current !== $Element) {
+    $Sibling = $Element.childNodes[patch.index];
+  }
+  if (!$Sibling) {
+    console.error('Cannot navigate to sibling: sibling not found at index', {
+      $Parent,
+      index: patch.index,
+      childCount: $Parent.childNodes.length
+    });
+    return false;
+  }
+  state.current = $Sibling;
+  return true;
+};
+const handleSetReferenceNodeUid = (state, patch) => {
+  const instance = get$a(patch.uid);
+  if (!instance || !instance.state) {
+    console.error('Cannot set reference node uid: instance not found', {
+      uid: patch.uid
+    });
+    return false;
+  }
+  const $NewNode = instance.state.$Viewlet;
+  // @ts-ignore
+  state.current.replaceWith($NewNode);
+  state.current = $NewNode;
+  state.hasAppliedMutation = true;
+  return true;
+};
+const handleNavigationPatch = (state, patch, patches, patchIndex, $Element) => {
+  switch (patch.type) {
+    case NavigateChild:
+      return handleNavigateChild(state, patches, patchIndex);
+    case NavigateParent:
+      return handleNavigateParent(state);
+    case NavigateSibling:
+      return handleNavigateSibling(state, patch, $Element, patchIndex);
+    default:
+      return true;
+  }
+};
+const applyMutationPatch = (state, patch, events) => {
+  switch (patch.type) {
+    case Add:
+      add(state.current, patch.nodes, events);
+      state.hasAppliedMutation = true;
+      break;
+    case RemoveAttribute:
+      removeAttribute(state.current, patch.key);
+      state.hasAppliedMutation = true;
+      break;
+    case RemoveChild:
+      removeChild(state.current, patch.index);
+      state.hasAppliedMutation = true;
+      break;
+    case Replace:
+      state.current = replace(state.current, patch.nodes, events);
+      state.hasAppliedMutation = true;
+      break;
+    case SetAttribute:
+      setProp(state.current, patch.key, patch.value, events);
+      state.hasAppliedMutation = true;
+      break;
+    case SetText:
+      setText$3(state.current, patch.value);
+      state.hasAppliedMutation = true;
+      break;
+  }
+};
 const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
   const events = getEventListenerMap(id) || eventMap;
-  let $Current = $Element;
-  let hasAppliedMutation = false;
+  const state = {
+    current: $Element,
+    hasAppliedMutation: false
+  };
   for (let patchIndex = 0; patchIndex < patches.length; patchIndex++) {
     const patch = patches[patchIndex];
     try {
-      switch (patch.type) {
-        case Add:
-          add($Current, patch.nodes, events);
-          hasAppliedMutation = true;
-          break;
-        case NavigateChild:
-          {
-            const $Children = $Current.childNodes;
-            const $Child = $Children[patch.index];
-            if (!$Child) {
-              const nextPatch = patches[patchIndex + 1];
-              if (nextPatch && nextPatch.type === Replace && patch.index === $Children.length) {
-                const $Placeholder = document.createComment('virtual-dom-placeholder');
-                $Current.append($Placeholder);
-                $Current = $Placeholder;
-                break;
-              }
-              console.error('Cannot navigate to child: child not found at index', {
-                $Current,
-                index: patch.index,
-                childCount: $Children.length
-              });
-              return;
-            }
-            $Current = $Child;
-            break;
-          }
-        case NavigateParent:
-          {
-            const $Parent = $Current.parentNode;
-            if (!$Parent) {
-              console.error('Cannot navigate to parent: current node has no parent', {
-                $Current
-              });
-              return;
-            }
-            $Current = $Parent;
-            break;
-          }
-        case NavigateSibling:
-          {
-            const $Parent = $Current.parentNode;
-            if (!$Parent) {
-              console.error('Cannot navigate to sibling: current node has no parent', {
-                patchIndex
-              });
-              return;
-            }
-            let $Sibling = $Parent.childNodes[patch.index];
-            if (!$Sibling && !hasAppliedMutation && $Current !== $Element) {
-              $Sibling = $Element.childNodes[patch.index];
-            }
-            $Current = $Sibling;
-            if (!$Current) {
-              console.error('Cannot navigate to sibling: sibling not found at index', {
-                $Parent,
-                index: patch.index,
-                childCount: $Parent.childNodes.length
-              });
-              return;
-            }
-            break;
-          }
-        case RemoveAttribute:
-          removeAttribute($Current, patch.key);
-          hasAppliedMutation = true;
-          break;
-        case RemoveChild:
-          removeChild($Current, patch.index);
-          hasAppliedMutation = true;
-          break;
-        case Replace:
-          $Current = replace($Current, patch.nodes, events);
-          hasAppliedMutation = true;
-          break;
-        case SetAttribute:
-          setProp($Current, patch.key, patch.value, events);
-          hasAppliedMutation = true;
-          break;
-        case SetReferenceNodeUid:
-          {
-            // Get the new reference node instance
-            const instance = get$a(patch.uid);
-            if (!instance || !instance.state) {
-              console.error('Cannot set reference node uid: instance not found', {
-                uid: patch.uid
-              });
-              return;
-            }
-            const $NewNode = instance.state.$Viewlet;
-            // Replace the current reference node with the new viewlet
-            // @ts-ignore
-            $Current.replaceWith($NewNode);
-            $Current = $NewNode;
-            hasAppliedMutation = true;
-            break;
-          }
-        case SetText:
-          setText$3($Current, patch.value);
-          hasAppliedMutation = true;
-          break;
-        default:
-          break;
+      if (!handleNavigationPatch(state, patch, patches, patchIndex, $Element)) {
+        return;
+      }
+      if (patch.type === SetReferenceNodeUid) {
+        if (!handleSetReferenceNodeUid(state, patch)) {
+          return;
+        }
+        continue;
       }
+      applyMutationPatch(state, patch, events);
     } catch (error) {
       console.error('Error applying patch at index ' + patchIndex, patch, error);
       throw error;
@@ -1857,71 +1689,96 @@ const focusElement = $Element => {
     preventScroll: true
   });
 };
-const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
-  startIgnore();
-  const oldLeft = $Viewlet.style.left;
-  const oldTop = $Viewlet.style.top;
-  const oldWidth = $Viewlet.style.width;
-  const oldHeight = $Viewlet.style.height;
-  const activeElement = getActiveElementInside($Viewlet);
-  const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
-  const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
-  const focused = activeElement?.getAttribute('name');
-  const $Hidden = document.createElement('div');
-  $Hidden.style.display = 'none';
-  if (focused) {
-    if (document.body) {
-      document.body.append($Hidden);
-    }
-    // @ts-ignore
-    $Hidden.append(activeElement);
-  }
+const getInputMap = $Viewlet => {
   const $$Inputs = queryInputs($Viewlet);
   const inputMap = Object.create(null);
   for (const $Input of $$Inputs) {
     inputMap[$Input.name] = $Input.value;
   }
-  if (uid) {
-    const newEventMap = getEventListenerMap(uid);
-    const $New = render(dom, eventMap, newEventMap).firstChild;
-    setComponentUid($New, uid);
-    const $$NewInputs = queryInputs($New);
-    for (const $Input of $$NewInputs) {
-      $Input.value = inputMap[$Input.name] || $Input.value || '';
-    }
-    $Viewlet.replaceWith($New);
-    if (focused) {
-      const $NewFocused = $New.querySelector(`[name="${focused}"]`);
-      if ($NewFocused) {
-        const $Previous = $Hidden.firstChild;
-        $Previous.className = $NewFocused.className;
-        $Previous.placeholder = $NewFocused.placeholder;
-        if ($NewFocused.childNodes) {
-          $Previous.replaceChildren(...$NewFocused.childNodes);
-        }
-        $NewFocused.replaceWith($Previous);
-      }
-    }
-    $Hidden.remove();
-    $Viewlet = $New;
-  } else {
-    renderInto($Viewlet, dom, eventMap);
+  return inputMap;
+};
+const createHiddenContainer = (activeElement, focused) => {
+  const $Hidden = document.createElement('div');
+  $Hidden.style.display = 'none';
+  if (focused && activeElement && document.body) {
+    document.body.append($Hidden);
+    $Hidden.append(activeElement);
   }
+  return $Hidden;
+};
+const restoreFocusedElement = ($Hidden, $New, focused) => {
+  const $NewFocused = $New.querySelector(`[name="${focused}"]`);
+  if (!$NewFocused) {
+    return;
+  }
+  const $Previous = $Hidden.firstChild;
+  if (!$Previous) {
+    return;
+  }
+  $Previous.className = $NewFocused.className;
+  $Previous.placeholder = $NewFocused.placeholder;
+  if ($NewFocused.childNodes) {
+    $Previous.replaceChildren(...$NewFocused.childNodes);
+  }
+  $NewFocused.replaceWith($Previous);
+};
+const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden) => {
+  const newEventMap = getEventListenerMap(uid);
+  const $New = render(dom, eventMap, newEventMap).firstChild;
+  setComponentUid($New, uid);
+  const $$NewInputs = queryInputs($New);
+  for (const $Input of $$NewInputs) {
+    $Input.value = inputMap[$Input.name] || $Input.value || '';
+  }
+  $Viewlet.replaceWith($New);
+  if (focused) {
+    restoreFocusedElement($Hidden, $New, focused);
+  }
+  return $New;
+};
+const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
   if (isRootTree) {
     focusElement($Viewlet);
-  } else if (isTreeFocused) {
+    return;
+  }
+  if (isTreeFocused) {
     const $Tree = $Viewlet.querySelector('[role="tree"]');
     if ($Tree) {
       // @ts-ignore
       focusElement($Tree);
     }
-  } else if (focused) {
-    const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
-    if ($Focused) {
-      // @ts-ignore
-      focusElement($Focused);
-    }
+    return;
+  }
+  if (!focused) {
+    return;
+  }
+  const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
+  if ($Focused) {
+    // @ts-ignore
+    focusElement($Focused);
+  }
+};
+const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
+  startIgnore();
+  const oldLeft = $Viewlet.style.left;
+  const oldTop = $Viewlet.style.top;
+  const oldWidth = $Viewlet.style.width;
+  const oldHeight = $Viewlet.style.height;
+  const activeElement = getActiveElementInside($Viewlet);
+  const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
+  const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
+  const focused = activeElement?.getAttribute('name') || null;
+  const $Hidden = createHiddenContainer(activeElement, focused);
+  const inputMap = getInputMap($Viewlet);
+  if (uid) {
+    const numericUid = Number(uid);
+    $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, $Hidden);
+    $Hidden.remove();
+  } else {
+    renderInto($Viewlet, dom, eventMap);
+    $Hidden.remove();
   }
+  restoreFocus($Viewlet, isRootTree, isTreeFocused, focused);
   $Viewlet.style.top = oldTop;
   $Viewlet.style.left = oldLeft;
   $Viewlet.style.height = oldHeight;
@@ -4799,13 +4656,35 @@ const create$Overlay = () => {
   $TestOverlay.style.contain = 'strict';
   $TestOverlay.style.userSelect = 'text';
   $TestOverlay.style.color = 'black';
+  $TestOverlay.style.display = 'flex';
+  $TestOverlay.style.gap = '10px';
   return $TestOverlay;
 };
-const showOverlay = (state, background, text) => {
+const createAction = action => {
+  const $action = document.createElement('button');
+  $action.textContent = action.label;
+  $action.style.flexShrink = '0';
+  $action.style.background = 'dodgerblue';
+  $action.style.paddingLeft = '6px';
+  $action.style.paddingRight = '6px';
+  $action.style.color = 'white';
+  $action.style.border = 'none';
+  $action.style.borderRadius = '5px';
+  $action.addEventListener('click', () => {
+    send(action.command);
+  });
+  return $action;
+};
+const showOverlay = (state, background, text, actions = []) => {
   const $TestOverlay = create$Overlay();
   $TestOverlay.dataset.state = state;
   $TestOverlay.style.background = background;
-  $TestOverlay.textContent = text;
+  const span = document.createElement('span');
+  span.style.flex = '1';
+  span.style.overflow = 'hidden';
+  span.textContent = text;
+  const $actions = actions.map(createAction);
+  $TestOverlay.append(span, ...$actions);
   document.body.append($TestOverlay);
 };
 const performAction = async (locator, fnName, options) => {
@@ -9117,6 +8996,11 @@ const setUid = (viewletId, uid) => {
   } = instance.state;
   set$3($Viewlet, uid);
 };
+const emptyFocusCallback = {
+  id: 0,
+  selector: ''
+};
+let focusCallback = emptyFocusCallback;
 const focusSelector = (viewletId, selector) => {
   const instance = get$a(viewletId);
   if (!instance) {
@@ -9129,7 +9013,16 @@ const focusSelector = (viewletId, selector) => {
   if (!$Element) {
     return;
   }
-  $Element.focus();
+  if ($Element && $Element instanceof HTMLElement) {
+    if ($Element.isConnected) {
+      $Element.focus();
+    } else {
+      focusCallback = {
+        id: viewletId,
+        selector
+      };
+    }
+  }
 };
 
 /**
@@ -9227,6 +9120,7 @@ const setPatches = (uid, patches) => {
     return;
   }
   applyPatch($Viewlet, patches, {}, uid);
+  applyLateFocusMaybe();
 };
 const waitForElement = selector => {
   const element = document.querySelector(selector);
@@ -9408,6 +9302,7 @@ const append = (parentId, childId, referenceNodes) => {
   if (childInstance.factory?.postAppend) {
     childInstance.factory.postAppend(childInstance.state);
   }
+  applyLateFocusMaybe();
 };
 const replaceChildren = (parentId, childIds) => {
   const parentInstance = get$a(parentId);
@@ -9420,11 +9315,32 @@ const replaceChildren = (parentId, childIds) => {
   }
   $Parent.replaceChildren($Fragment);
 };
+const applyLateFocusMaybe = () => {
+  if (focusCallback !== emptyFocusCallback) {
+    const {
+      id,
+      selector
+    } = focusCallback;
+    focusCallback = emptyFocusCallback;
+    const instance = get$a(id);
+    if (instance) {
+      const {
+        $Viewlet
+      } = instance.state;
+      const $Element = $Viewlet.querySelector(selector);
+      if ($Element) {
+        $Element.focus();
+        focusCallback = emptyFocusCallback;
+      }
+    }
+  }
+};
 const appendToBody = childId => {
   const $Parent = document.body;
   const childInstance = get$a(childId);
   const $Child = childInstance.state.$Viewlet;
   $Parent.append($Child);
+  applyLateFocusMaybe();
 };
 const executeCommands = commands => {
   for (const [command, ...args] of commands) {

package/package.json

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