@lvce-editor/renderer-process 23.6.0 → 24.0.0

package/dist/rendererProcessMain.js

@@ -180,328 +180,18 @@ const downloadFile = (fileName, url) => {
   a.click();
 };
 
-const instances = Object.create(null);
-const get$1$1 = viewletId => {
-  return instances[viewletId];
+const uidSymbol = Symbol('uid');
+const getUidTarget = $Element => {
+  while ($Element) {
+    if ($Element[uidSymbol]) {
+      return $Element;
+    }
+    $Element = $Element.parentNode;
+  }
+  return undefined;
 };
-const set$1$1 = (viewletId, instance) => {
-  instances[viewletId] = instance;
-};
-const Audio$2 = 'audio';
-const Button$2 = 'button';
-const Col$2 = 'col';
-const ColGroup$2 = 'colgroup';
-const Del$2 = 'del';
-const Div$2 = 'div';
-const H1$2 = 'h1';
-const H2$2 = 'h2';
-const H3$2 = 'h3';
-const H4$2 = 'h4';
-const H5$2 = 'h5';
-const H6$2 = 'h6';
-const I$2 = 'i';
-const Img$2 = 'img';
-const Input$2 = 'input';
-const Ins$2 = 'ins';
-const Kbd$2 = 'kbd';
-const Span$2 = 'span';
-const Table$2 = 'table';
-const TBody$2 = 'tbody';
-const Td$2 = 'td';
-const Th$2 = 'th';
-const THead$2 = 'thead';
-const Tr$2 = 'tr';
-const Article$2 = 'article';
-const Aside$2 = 'aside';
-const Footer$2 = 'footer';
-const Header$2 = 'header';
-const Nav$2 = 'nav';
-const Section$2 = 'section';
-const Search$2 = 'search';
-const Dd$2 = 'dd';
-const Dl$2 = 'dl';
-const Figcaption$2 = 'figcaption';
-const Figure$2 = 'figure';
-const Hr$2 = 'hr';
-const Li$2 = 'li';
-const Ol$2 = 'ol';
-const P$2 = 'p';
-const Pre$2 = 'pre';
-const A$2 = 'a';
-const Br$2 = 'br';
-const Cite$2 = 'cite';
-const Data$2 = 'data';
-const Time$2 = 'time';
-const Tfoot$2 = 'tfoot';
-const Ul$2 = 'ul';
-const Video$2 = 'video';
-const TextArea$2 = 'textarea';
-const Select$2 = 'select';
-const Option$2 = 'option';
-const Code$2 = 'code';
-const Label$2 = 'label';
-const Dt$2 = 'dt';
-const Iframe$1 = 'iframe';
-const Em$1 = 'em';
-const Strong$1 = 'strong';
-const Style$1 = 'style';
-const Html$1 = 'html';
-const Head$1 = 'head';
-const Title$1 = 'title';
-const Meta$1 = 'meta';
-const Canvas$1 = 'canvas';
-const Form$1 = 'form';
-const Quote$1$1 = 'quote';
-const BlockQuote$1 = 'blockquote';
-const Audio$1$1 = 0;
-const Button$1 = 1;
-const Col$1 = 2;
-const ColGroup$1 = 3;
-const Div$1 = 4;
-const H1$1 = 5;
-const Input$1 = 6;
-const Kbd$1 = 7;
-const Span$1 = 8;
-const Table$1 = 9;
-const TBody$1 = 10;
-const Td$1 = 11;
-const Text$1$1 = 12;
-const Th$1 = 13;
-const THead$1 = 14;
-const Tr$1 = 15;
-const I$1 = 16;
-const Img$1 = 17;
-const Ins$1 = 20;
-const Del$1 = 21;
-const H2$1 = 22;
-const H3$1 = 23;
-const H4$1 = 24;
-const H5$1 = 25;
-const H6$1 = 26;
-const Article$1 = 27;
-const Aside$1 = 28;
-const Footer$1 = 29;
-const Header$1 = 30;
-const Nav$1 = 40;
-const Section$1 = 41;
-const Search$1 = 42;
-const Dd$1 = 43;
-const Dl$1 = 44;
-const Figcaption$1 = 45;
-const Figure$1 = 46;
-const Hr$1 = 47;
-const Li$1 = 48;
-const Ol$1 = 49;
-const P$1 = 50;
-const Pre$1 = 51;
-const A$1 = 53;
-const Br$1 = 55;
-const Cite$1 = 56;
-const Data$1 = 57;
-const Time$1 = 58;
-const Tfoot$1 = 59;
-const Ul$1 = 60;
-const Video$1 = 61;
-const TextArea$1 = 62;
-const Select$1 = 63;
-const Option$1 = 64;
-const Code$1 = 65;
-const Label$1 = 66;
-const Dt$1 = 67;
-const Iframe = 68;
-const Strong = 70;
-const Em = 71;
-const Style = 72;
-const Html = 73;
-const Head = 74;
-const Title = 75;
-const Meta = 76;
-const Canvas = 77;
-const Form = 78;
-const BlockQuote = 79;
-const Quote$2 = 80;
-const Reference$1 = 100;
-const VirtualDomElements$1 = {
-  __proto__: null,
-  Reference: Reference$1,
-  Text: Text$1$1};
-const getElementTag$1 = type => {
-  switch (type) {
-    case A$1:
-      return A$2;
-    case Article$1:
-      return Article$2;
-    case Aside$1:
-      return Aside$2;
-    case Audio$1$1:
-      return Audio$2;
-    case BlockQuote:
-      return BlockQuote$1;
-    case Br$1:
-      return Br$2;
-    case Button$1:
-      return Button$2;
-    case Canvas:
-      return Canvas$1;
-    case Cite$1:
-      return Cite$2;
-    case Code$1:
-      return Code$2;
-    case Col$1:
-      return Col$2;
-    case ColGroup$1:
-      return ColGroup$2;
-    case Data$1:
-      return Data$2;
-    case Dd$1:
-      return Dd$2;
-    case Del$1:
-      return Del$2;
-    case Div$1:
-      return Div$2;
-    case Dl$1:
-      return Dl$2;
-    case Dt$1:
-      return Dt$2;
-    case Em:
-      return Em$1;
-    case Figcaption$1:
-      return Figcaption$2;
-    case Figure$1:
-      return Figure$2;
-    case Footer$1:
-      return Footer$2;
-    case Form:
-      return Form$1;
-    case H1$1:
-      return H1$2;
-    case H2$1:
-      return H2$2;
-    case H3$1:
-      return H3$2;
-    case H4$1:
-      return H4$2;
-    case H5$1:
-      return H5$2;
-    case H6$1:
-      return H6$2;
-    case Head:
-      return Head$1;
-    case Header$1:
-      return Header$2;
-    case Hr$1:
-      return Hr$2;
-    case Html:
-      return Html$1;
-    case I$1:
-      return I$2;
-    case Iframe:
-      return Iframe$1;
-    case Img$1:
-      return Img$2;
-    case Input$1:
-      return Input$2;
-    case Ins$1:
-      return Ins$2;
-    case Kbd$1:
-      return Kbd$2;
-    case Label$1:
-      return Label$2;
-    case Li$1:
-      return Li$2;
-    case Meta:
-      return Meta$1;
-    case Nav$1:
-      return Nav$2;
-    case Ol$1:
-      return Ol$2;
-    case Option$1:
-      return Option$2;
-    case P$1:
-      return P$2;
-    case Pre$1:
-      return Pre$2;
-    case Quote$2:
-      return Quote$1$1;
-    case Search$1:
-      return Search$2;
-    case Section$1:
-      return Section$2;
-    case Select$1:
-      return Select$2;
-    case Span$1:
-      return Span$2;
-    case Strong:
-      return Strong$1;
-    case Style:
-      return Style$1;
-    case Table$1:
-      return Table$2;
-    case TBody$1:
-      return TBody$2;
-    case Td$1:
-      return Td$2;
-    case TextArea$1:
-      return TextArea$2;
-    case Tfoot$1:
-      return Tfoot$2;
-    case Th$1:
-      return Th$2;
-    case THead$1:
-      return THead$2;
-    case Time$1:
-      return Time$2;
-    case Title:
-      return Title$1;
-    case Tr$1:
-      return Tr$2;
-    case Ul$1:
-      return Ul$2;
-    case Video$1:
-      return Video$2;
-    default:
-      throw new Error(`element tag not found ${type}`);
-  }
-};
-const ElementTagMap = {
-  __proto__: null,
-  getElementTag: getElementTag$1
-};
-const {
-  getElementTag
-} = ElementTagMap;
-const getEventListenerOptions$1 = (eventName, value) => {
-  if (value.passive) {
-    return {
-      passive: true
-    };
-  }
-  if (value.capture) {
-    return {
-      capture: true
-    };
-  }
-  switch (eventName) {
-    case 'wheel':
-      return {
-        passive: true
-      };
-    default:
-      return undefined;
-  }
-};
-const uidSymbol = Symbol('uid');
-const getUidTarget = $Element => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element;
-    }
-    $Element = $Element.parentNode;
-  }
-  return undefined;
-};
-const setComponentUid = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
+const setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
 };
 const getComponentUid = $Element => {
   const $Target = getUidTarget($Element);
@@ -517,605 +207,954 @@ const getComponentUidFromEvent = event => {
   } = event;
   return getComponentUid(currentTarget || target);
 };
-const state$1$1 = {
-  ipc: undefined
+const dragInfos = Object.create(null);
+const setDragInfo = (id, data) => {
+  dragInfos[id] = data;
 };
-const getIpc = () => {
-  return state$1$1.ipc;
+const getDragInfo = id => {
+  return dragInfos[id];
 };
-const setIpc = value => {
-  state$1$1.ipc = value;
+const isDragInfoOld = data => {
+  return Array.isArray(data);
 };
-const cache$1 = new Map();
-const has$1 = listener => {
-  return cache$1.has(listener);
+const setDragImage = (dataTransfer, label) => {
+  const dragImage = document.createElement('div');
+  dragImage.className = 'DragImage';
+  dragImage.textContent = label;
+  document.body.append(dragImage);
+  dataTransfer.setDragImage(dragImage, -10, -10);
+  const handleTimeOut = () => {
+    dragImage.remove();
+  };
+  setTimeout(handleTimeOut, 0);
 };
-const set$8 = (listener, value) => {
-  cache$1.set(listener, value);
+const applyDragInfoMaybe = event => {
+  const {
+    dataTransfer,
+    target
+  } = event;
+  if (dataTransfer) {
+    const uid = getComponentUid(target);
+    const dragInfo = getDragInfo(uid);
+    if (!dragInfo) {
+      return;
+    }
+    if (isDragInfoOld(dragInfo)) {
+      for (const item of dragInfo) {
+        dataTransfer.setData(item.type, item.data);
+      }
+    } else {
+      for (const item of dragInfo.items) {
+        dataTransfer.items.add(item.data, item.type);
+      }
+      if (dragInfo.label) {
+        setDragImage(dataTransfer, dragInfo.label);
+      }
+    }
+  }
 };
-const get$9 = listener => {
-  return cache$1.get(listener);
+const PointerMove$1 = 'pointermove';
+const lostpointercapture = 'lostpointercapture';
+let ignore = false;
+const startIgnore = () => {
+  ignore = true;
 };
-const nameAnonymousFunction$1 = (fn, name) => {
-  Object.defineProperty(fn, 'name', {
-    value: name
-  });
+const stopIgnore = () => {
+  ignore = false;
 };
-const getWrappedListener$1 = (listener, returnValue) => {
-  if (!returnValue) {
-    return listener;
-  }
-  if (!has$1(listener)) {
-    const wrapped = event => {
-      const uid = getComponentUidFromEvent(event);
-      const result = listener(event);
-      // TODO check for empty array by value
-      if (result.length === 0) {
-        return;
-      }
-      const ipc = getIpc();
-      ipc.send('Viewlet.executeViewletCommand', uid, ...result);
-    };
-    nameAnonymousFunction$1(wrapped, listener.name);
-    set$8(listener, wrapped);
-  }
-  return get$9(listener);
+const enabled = () => {
+  return ignore;
 };
-const attachedListeners = new WeakMap();
-const getOptions = fn => {
-  if (fn.passive) {
-    return {
-      passive: true
-    };
-  }
-  if (fn.capture) {
-    return {
-      capture: true
-    };
-  }
-  return undefined;
+let id$1 = 0;
+const create$N = () => {
+  return ++id$1;
 };
-const attachEvent$1 = ($Node, eventMap, key, value, newEventMap) => {
-  const keyLower = key.toLowerCase();
-  const listenersByEvent = attachedListeners.get($Node) || new Map();
-  const previous = listenersByEvent.get(keyLower);
-  if (previous) {
-    $Node.removeEventListener(keyLower, previous.listener, previous.options);
-  }
-  if (newEventMap && newEventMap[value]) {
-    const fn = newEventMap[value];
-    const options = getOptions(fn);
-    // TODO support event listener options
-    $Node.addEventListener(keyLower, newEventMap[value], options);
-    listenersByEvent.set(keyLower, {
-      listener: newEventMap[value],
-      options
-    });
-    attachedListeners.set($Node, listenersByEvent);
-    return;
-  }
-  const listener = eventMap[value];
-  if (!listener) {
-    console.warn('listener not found', value);
-    return;
-  }
-  const options = getEventListenerOptions$1(key, value);
-  const wrapped = getWrappedListener$1(listener, eventMap.returnValue);
-  $Node.addEventListener(keyLower, wrapped, options);
-  listenersByEvent.set(keyLower, {
-    listener: wrapped,
-    options
-  });
-  attachedListeners.set($Node, listenersByEvent);
+const state$1$1 = Object.create(null);
+const acquire$1 = id => {
+  const promise = state$1$1[id];
+  delete state$1$1[id];
+  return promise;
 };
-const STYLE_REGEX = /([^:;]+):\s*([^;]+)/g;
-const KEBAB_CASE_REGEX = /-([a-z])/g;
-const setStyle = ($Element, styleString) => {
-  if (typeof styleString !== 'string') {
-    return;
-  }
-  let match;
-  while ((match = STYLE_REGEX.exec(styleString)) !== null) {
-    const key = match[1].trim();
-    const value = match[2].trim();
-    // Convert kebab-case to camelCase for CSS properties with dashes
-    const camelCaseKey = key.replaceAll(KEBAB_CASE_REGEX, (_, char) => char.toUpperCase());
-    $Element.style[camelCaseKey] = value;
-  }
+const getFileHandles$1 = async ids => {
+  const promises = ids.map(acquire$1);
+  const handles = await Promise.all(promises);
+  return handles;
 };
-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);
+const add$1 = promise => {
+  const id = create$N();
+  state$1$1[id] = promise;
+  return id;
+};
+const addFileHandle$1 = fileHandle => {
+  const promise = Promise.resolve(fileHandle);
+  return add$1(promise);
+};
+const unwrapItemString = async item => {
+  const {
+    resolve,
+    promise
+  } = Promise.withResolvers();
+  item.getAsString(resolve);
+  const value = await promise;
+  return {
+    kind: 'string',
+    type: item.type,
+    value
+  };
+};
+const unwrapItemFile = async item => {
+  // @ts-ignore
+  const file = await item.getAsFileSystemHandle();
+  return {
+    kind: 'file',
+    type: item.type,
+    value: file
+  };
+};
+const unknownItem = {
+  kind: 'unknown',
+  type: '',
+  value: ''
+};
+const unwrapItem = item => {
+  switch (item.kind) {
+    case 'file':
+      return unwrapItemFile(item);
+    case 'string':
+      return unwrapItemString(item);
+    default:
+      return unknownItem;
+  }
+};
+const handleDataTransferFiles = event => {
+  if (!event.dataTransfer) {
+    return [];
+  }
+  const items = [...event.dataTransfer.items];
+  const promises = items.map(unwrapItem);
+  const ids = promises.map(promise => add$1(promise));
+  return ids;
+};
+const getEventListenerArg = (param, event) => {
+  switch (param) {
+    case 'event.altKey':
+      return event.altKey;
+    case 'event.button':
+      return event.button;
+    case 'event.clientX':
+      return event.clientX;
+    case 'event.clientY':
+      return event.clientY;
+    case 'event.ctrlKey':
+      return event.ctrlKey;
+    case 'event.data':
+      return event.data;
+    case 'event.dataTransfer.files':
+      return event.dataTransfer.files;
+    case 'event.dataTransfer.files2':
+      return handleDataTransferFiles(event);
+    case 'event.defaultPrevented':
+      return event.defaultPrevented;
+    case 'event.deltaMode':
+      return event.deltaMode;
+    case 'event.deltaX':
+      return event.deltaX;
+    case 'event.deltaY':
+      return event.deltaY;
+    case 'event.detail':
+      return event.detail;
+    case 'event.inputType':
+      return event.inputType;
+    case 'event.isTrusted':
+      return event.isTrusted;
+    case 'event.key':
+      return event.key;
+    case 'event.shiftKey':
+      return event.shiftKey;
+    case 'event.target.checked':
+      return event.target.checked;
+    case 'event.target.className':
+      return event.target.className;
+    case 'event.target.href':
+      return event.target.href;
+    case 'event.target.name':
+      return event.target.name || '';
+    case 'event.target.nodeName':
+      return event.target.nodeName;
+    case 'event.target.scrollTop':
+      return event.target.scrollTop;
+    case 'event.target.selectionEnd':
+      return event.target.selectionEnd;
+    case 'event.target.selectionStart':
+      return event.target.selectionStart;
+    case 'event.target.src':
+      return event.target.src;
+    case 'event.target.value':
+      return event.target.value;
+    case 'event.x':
+      return event.x;
+    case 'event.y':
+      return event.y;
+    default:
+      if (typeof param === 'string' && param.startsWith('event.currentTarget.')) {
+        const rest = param.slice('event.currentTarget.'.length);
+        const parts = rest.split('.');
+        let current = event.currentTarget;
+        for (const part of parts) {
+          current = current[part];
+        }
+        return current;
       }
-      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;
+      if (typeof param === 'string' && param.startsWith('event.target.dataset')) {
+        const rest = param.slice('event.target.dataset.'.length);
+        return event.target.dataset[rest];
       }
-      attachEvent$1($Element, eventMap, eventName, value, newEventMap);
-      break;
-    case 'style':
-      setStyle($Element, value);
-      break;
-    case 'translate':
-      $Element.style[key] = value;
-      break;
+      return param;
+  }
+};
+const getEventListenerArgs = (params, event) => {
+  const serialized = [];
+  for (const param of params) {
+    serialized.push(getEventListenerArg(param, event));
+  }
+  return serialized;
+};
+const state$8 = {
+  ipc: undefined
+};
+const getIpc = () => {
+  return state$8.ipc;
+};
+const setIpc = value => {
+  state$8.ipc = value;
+};
+const nameAnonymousFunction$1 = (fn, name) => {
+  Object.defineProperty(fn, 'name', {
+    value: name
+  });
+};
+const isInputElement = element => {
+  return element instanceof HTMLInputElement;
+};
+const preventEventsMaybe = (info, event) => {
+  if (info.preventDefault === 2) {
+    if (!isInputElement(event.target)) {
+      event.preventDefault();
+    }
+  } else if (info.preventDefault) {
+    event.preventDefault();
+  }
+  if (info.stopPropagation) {
+    event.stopPropagation();
+  }
+};
+const applyPointerTrackMaybe = (info, map, event) => {
+  const {
+    trackPointerEvents
+  } = info;
+  if (!trackPointerEvents) {
+    return;
+  }
+  const {
+    pointerId,
+    target
+  } = event;
+  target.setPointerCapture(pointerId);
+  const [pointerMoveKey, pointerUpKey] = trackPointerEvents;
+  target.addEventListener(PointerMove$1, map[pointerMoveKey]);
+  target.addEventListener(lostpointercapture, map[pointerUpKey]);
+};
+const createFn = (info, map) => {
+  const fn = event => {
+    if (enabled()) {
+      return;
+    }
+    const uid = getComponentUidFromEvent(event);
+    const args = getEventListenerArgs(info.params, event);
+    preventEventsMaybe(info, event);
+    applyDragInfoMaybe(event);
+    applyPointerTrackMaybe(info, map, event);
+    if (args.length === 0) {
+      return;
+    }
+    const ipc = getIpc();
+    ipc.send('Viewlet.executeViewletCommand', uid, ...args);
+  };
+  nameAnonymousFunction$1(fn, info.name);
+  if (info.passive) {
+    // TODO avoid mutating function property, maybe return an object with function and options
+    fn.passive = true;
+  }
+  if (info.capture) {
+    // TODO avoid mutating function property, maybe return an object with function and options
+    fn.capture = true;
+  }
+  return fn;
+};
+const listeners = Object.create(null);
+const registerEventListeners = (id, eventListeners) => {
+  const map = Object.create(null);
+  for (const info of eventListeners) {
+    const fn = createFn(info, map);
+    map[info.name] = fn;
+  }
+  listeners[id] = map;
+};
+const getEventListenerMap = id => {
+  const map = listeners[id];
+  return map;
+};
+const clearNode = $Node => {
+  $Node.textContent = '';
+};
+const Audio$2 = 'audio';
+const Button$2 = 'button';
+const Col$2 = 'col';
+const ColGroup$2 = 'colgroup';
+const Del$2 = 'del';
+const Div$2 = 'div';
+const H1$2 = 'h1';
+const H2$2 = 'h2';
+const H3$2 = 'h3';
+const H4$2 = 'h4';
+const H5$2 = 'h5';
+const H6$2 = 'h6';
+const I$2 = 'i';
+const Img$2 = 'img';
+const Input$2 = 'input';
+const Ins$2 = 'ins';
+const Kbd$2 = 'kbd';
+const Span$2 = 'span';
+const Table$2 = 'table';
+const TBody$2 = 'tbody';
+const Td$2 = 'td';
+const Th$2 = 'th';
+const THead$2 = 'thead';
+const Tr$2 = 'tr';
+const Article$2 = 'article';
+const Aside$2 = 'aside';
+const Footer$2 = 'footer';
+const Header$2 = 'header';
+const Nav$2 = 'nav';
+const Section$2 = 'section';
+const Search$2 = 'search';
+const Dd$2 = 'dd';
+const Dl$2 = 'dl';
+const Figcaption$2 = 'figcaption';
+const Figure$2 = 'figure';
+const Hr$2 = 'hr';
+const Li$2 = 'li';
+const Ol$2 = 'ol';
+const P$2 = 'p';
+const Pre$2 = 'pre';
+const A$2 = 'a';
+const Br$2 = 'br';
+const Cite$2 = 'cite';
+const Data$2 = 'data';
+const Time$2 = 'time';
+const Tfoot$2 = 'tfoot';
+const Ul$2 = 'ul';
+const Video$2 = 'video';
+const TextArea$2 = 'textarea';
+const Select$2 = 'select';
+const Option$2 = 'option';
+const Code$2 = 'code';
+const Label$2 = 'label';
+const Dt$2 = 'dt';
+const Iframe$1 = 'iframe';
+const Em$1 = 'em';
+const Strong$1 = 'strong';
+const Style$1 = 'style';
+const Html$1 = 'html';
+const Head$1 = 'head';
+const Title$1 = 'title';
+const Meta$1 = 'meta';
+const Canvas$1 = 'canvas';
+const Form$1 = 'form';
+const Quote$1$1 = 'quote';
+const BlockQuote$1 = 'blockquote';
+const Audio$1$1 = 0;
+const Button$1 = 1;
+const Col$1 = 2;
+const ColGroup$1 = 3;
+const Div$1 = 4;
+const H1$1 = 5;
+const Input$1 = 6;
+const Kbd$1 = 7;
+const Span$1 = 8;
+const Table$1 = 9;
+const TBody$1 = 10;
+const Td$1 = 11;
+const Text$1$1 = 12;
+const Th$1 = 13;
+const THead$1 = 14;
+const Tr$1 = 15;
+const I$1 = 16;
+const Img$1 = 17;
+const Ins$1 = 20;
+const Del$1 = 21;
+const H2$1 = 22;
+const H3$1 = 23;
+const H4$1 = 24;
+const H5$1 = 25;
+const H6$1 = 26;
+const Article$1 = 27;
+const Aside$1 = 28;
+const Footer$1 = 29;
+const Header$1 = 30;
+const Nav$1 = 40;
+const Section$1 = 41;
+const Search$1 = 42;
+const Dd$1 = 43;
+const Dl$1 = 44;
+const Figcaption$1 = 45;
+const Figure$1 = 46;
+const Hr$1 = 47;
+const Li$1 = 48;
+const Ol$1 = 49;
+const P$1 = 50;
+const Pre$1 = 51;
+const A$1 = 53;
+const Br$1 = 55;
+const Cite$1 = 56;
+const Data$1 = 57;
+const Time$1 = 58;
+const Tfoot$1 = 59;
+const Ul$1 = 60;
+const Video$1 = 61;
+const TextArea$1 = 62;
+const Select$1 = 63;
+const Option$1 = 64;
+const Code$1 = 65;
+const Label$1 = 66;
+const Dt$1 = 67;
+const Iframe = 68;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote$2 = 80;
+const Reference$1 = 100;
+const VirtualDomElements$1 = {
+  __proto__: null,
+  Reference: Reference$1,
+  Text: Text$1$1};
+const getElementTag$1 = type => {
+  switch (type) {
+    case A$1:
+      return A$2;
+    case Article$1:
+      return Article$2;
+    case Aside$1:
+      return Aside$2;
+    case Audio$1$1:
+      return Audio$2;
+    case BlockQuote:
+      return BlockQuote$1;
+    case Br$1:
+      return Br$2;
+    case Button$1:
+      return Button$2;
+    case Canvas:
+      return Canvas$1;
+    case Cite$1:
+      return Cite$2;
+    case Code$1:
+      return Code$2;
+    case Col$1:
+      return Col$2;
+    case ColGroup$1:
+      return ColGroup$2;
+    case Data$1:
+      return Data$2;
+    case Dd$1:
+      return Dd$2;
+    case Del$1:
+      return Del$2;
+    case Div$1:
+      return Div$2;
+    case Dl$1:
+      return Dl$2;
+    case Dt$1:
+      return Dt$2;
+    case Em:
+      return Em$1;
+    case Figcaption$1:
+      return Figcaption$2;
+    case Figure$1:
+      return Figure$2;
+    case Footer$1:
+      return Footer$2;
+    case Form:
+      return Form$1;
+    case H1$1:
+      return H1$2;
+    case H2$1:
+      return H2$2;
+    case H3$1:
+      return H3$2;
+    case H4$1:
+      return H4$2;
+    case H5$1:
+      return H5$2;
+    case H6$1:
+      return H6$2;
+    case Head:
+      return Head$1;
+    case Header$1:
+      return Header$2;
+    case Hr$1:
+      return Hr$2;
+    case Html:
+      return Html$1;
+    case I$1:
+      return I$2;
+    case Iframe:
+      return Iframe$1;
+    case Img$1:
+      return Img$2;
+    case Input$1:
+      return Input$2;
+    case Ins$1:
+      return Ins$2;
+    case Kbd$1:
+      return Kbd$2;
+    case Label$1:
+      return Label$2;
+    case Li$1:
+      return Li$2;
+    case Meta:
+      return Meta$1;
+    case Nav$1:
+      return Nav$2;
+    case Ol$1:
+      return Ol$2;
+    case Option$1:
+      return Option$2;
+    case P$1:
+      return P$2;
+    case Pre$1:
+      return Pre$2;
+    case Quote$2:
+      return Quote$1$1;
+    case Search$1:
+      return Search$2;
+    case Section$1:
+      return Section$2;
+    case Select$1:
+      return Select$2;
+    case Span$1:
+      return Span$2;
+    case Strong:
+      return Strong$1;
+    case Style:
+      return Style$1;
+    case Table$1:
+      return Table$2;
+    case TBody$1:
+      return TBody$2;
+    case Td$1:
+      return Td$2;
+    case TextArea$1:
+      return TextArea$2;
+    case Tfoot$1:
+      return Tfoot$2;
+    case Th$1:
+      return Th$2;
+    case THead$1:
+      return THead$2;
+    case Time$1:
+      return Time$2;
+    case Title:
+      return Title$1;
+    case Tr$1:
+      return Tr$2;
+    case Ul$1:
+      return Ul$2;
+    case Video$1:
+      return Video$2;
     default:
-      if (key.startsWith('data-')) {
-        $Element.dataset[key.slice('data-'.length)] = value;
-      } else {
-        $Element[key] = value;
-      }
+      throw new Error(`element tag not found ${type}`);
   }
 };
-const setProps = ($Element, props, eventMap, newEventMap) => {
-  for (const key in props) {
-    setProp($Element, key, props[key], eventMap, newEventMap);
-  }
+const ElementTagMap = {
+  __proto__: null,
+  getElementTag: getElementTag$1
 };
 const {
-  Text: Text$2,
-  Reference} = VirtualDomElements$1;
-const renderDomTextNode = element => {
-  return document.createTextNode(element.text);
-};
-const renderDomElement = (element, eventMap, newEventMap) => {
-  const tag = getElementTag(element.type);
-  const $Element = document.createElement(tag);
-  setProps($Element, element, eventMap, newEventMap);
-  return $Element;
-};
-const renderReferenceNode = element => {
-  const instance = get$1$1(element.uid);
-  if (!instance || !instance.state) {
-    return document.createTextNode('Reference node not found');
-  }
-  const $Node = instance.state.$Viewlet;
-  return $Node;
-};
-const render$1 = (element, eventMap, newEventMap) => {
-  switch (element.type) {
-    case Reference:
-      return renderReferenceNode(element);
-    case Text$2:
-      return renderDomTextNode(element);
-    default:
-      return renderDomElement(element, eventMap, newEventMap);
-  }
-};
-const renderInternal = ($Parent, elements, eventMap, newEventMap) => {
-  const max = elements.length - 1;
-  let stack = [];
-  for (let i = max; i >= 0; i--) {
-    const element = elements[i];
-    const $Element = render$1(element, eventMap, newEventMap);
-    if (element.childCount > 0) {
-      // @ts-expect-error
-      $Element.append(...stack.slice(0, element.childCount));
-      stack = stack.slice(element.childCount);
-    }
-    stack.unshift($Element);
-  }
-  $Parent.append(...stack);
-};
-
-// Map of property names to attribute names for cases where they differ
-const propertyToAttribute = {
-  className: 'class',
-  htmlFor: 'for',
-  ariaActivedescendant: 'aria-activedescendant',
-  ariaControls: 'aria-controls',
-  ariaLabelledBy: 'aria-labelledby',
-  ariaOwns: 'aria-owns',
-  inputType: 'type'
-};
-
-// Style properties that need to be set on element.style
-const styleProperties = new Set(['width', 'height', 'top', 'left', 'marginTop', 'paddingLeft', 'paddingRight']);
-const removeAttribute = ($Element, key) => {
-  // Handle style properties
-  if (styleProperties.has(key)) {
-    // @ts-ignore - dynamic style property access
-    $Element.style[key] = '';
-    return;
-  }
-  const attributeName = propertyToAttribute[key] || key;
-  $Element.removeAttribute(attributeName);
-};
-const setText$3 = ($Element, value) => {
-  $Element.nodeValue = value;
-};
-const removeChild = ($Element, index) => {
-  const $Child = $Element.childNodes[index];
-  if ($Child) {
-    $Child.remove();
-  }
-};
-const add$1 = ($Element, nodes, eventMap = {}) => {
-  renderInternal($Element, nodes, eventMap, eventMap);
-};
-const replace = ($Element, nodes, eventMap = {}) => {
-  // Create a temporary container to render the new nodes
-  const $Temp = document.createElement('div');
-  renderInternal($Temp, nodes, eventMap, eventMap);
-  // Replace the current element with the new node(s)
-  const $NewNode = $Temp.firstChild;
-  if (!$NewNode) {
-    // No node was created, just remove the old element
-    $Element.remove();
-    return $Element;
-  }
-  $Element.replaceWith($NewNode);
-  return $NewNode;
-};
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
-const dragInfos = Object.create(null);
-const setDragInfo = (id, data) => {
-  dragInfos[id] = data;
-};
-const getDragInfo = id => {
-  return dragInfos[id];
-};
-const isDragInfoOld = data => {
-  return Array.isArray(data);
-};
-const setDragImage = (dataTransfer, label) => {
-  const dragImage = document.createElement('div');
-  dragImage.className = 'DragImage';
-  dragImage.textContent = label;
-  document.body.append(dragImage);
-  dataTransfer.setDragImage(dragImage, -10, -10);
-  const handleTimeOut = () => {
-    dragImage.remove();
-  };
-  setTimeout(handleTimeOut, 0);
-};
-const applyDragInfoMaybe = event => {
-  const {
-    dataTransfer,
-    target
-  } = event;
-  if (dataTransfer) {
-    const uid = getComponentUid(target);
-    const dragInfo = getDragInfo(uid);
-    if (!dragInfo) {
-      return;
-    }
-    if (isDragInfoOld(dragInfo)) {
-      for (const item of dragInfo) {
-        dataTransfer.setData(item.type, item.data);
-      }
-    } else {
-      for (const item of dragInfo.items) {
-        dataTransfer.items.add(item.data, item.type);
-      }
-      if (dragInfo.label) {
-        setDragImage(dataTransfer, dragInfo.label);
-      }
-    }
-  }
-};
-const PointerMove$1 = 'pointermove';
-const lostpointercapture = 'lostpointercapture';
-let ignore = false;
-const startIgnore = () => {
-  ignore = true;
-};
-const stopIgnore = () => {
-  ignore = false;
-};
-const enabled = () => {
-  return ignore;
-};
-let id$1 = 0;
-const create$N = () => {
-  return ++id$1;
+  getElementTag
+} = ElementTagMap;
+const instances = Object.create(null);
+const get$1$1 = viewletId => {
+  return instances[viewletId];
 };
-const state$8 = Object.create(null);
-const acquire$1 = id => {
-  const promise = state$8[id];
-  delete state$8[id];
-  return promise;
+const set$1$1 = (viewletId, instance) => {
+  instances[viewletId] = instance;
 };
-const getFileHandles$1 = async ids => {
-  const promises = ids.map(acquire$1);
-  const handles = await Promise.all(promises);
-  return handles;
+const getEventListenerOptions$1 = (eventName, value) => {
+  if (value.passive) {
+    return {
+      passive: true
+    };
+  }
+  if (value.capture) {
+    return {
+      capture: true
+    };
+  }
+  switch (eventName) {
+    case 'wheel':
+      return {
+        passive: true
+      };
+    default:
+      return undefined;
+  }
 };
-const add = promise => {
-  const id = create$N();
-  state$8[id] = promise;
-  return id;
+const cache$1 = new Map();
+const has$1 = listener => {
+  return cache$1.has(listener);
 };
-const addFileHandle$1 = fileHandle => {
-  const promise = Promise.resolve(fileHandle);
-  return add(promise);
+const set$8 = (listener, value) => {
+  cache$1.set(listener, value);
 };
-const unwrapItemString = async item => {
-  const {
-    resolve,
-    promise
-  } = Promise.withResolvers();
-  item.getAsString(resolve);
-  const value = await promise;
-  return {
-    kind: 'string',
-    type: item.type,
-    value
-  };
+const get$9 = listener => {
+  return cache$1.get(listener);
 };
-const unwrapItemFile = async item => {
-  // @ts-ignore
-  const file = await item.getAsFileSystemHandle();
-  return {
-    kind: 'file',
-    type: item.type,
-    value: file
-  };
+const getWrappedListener$1 = (listener, returnValue) => {
+  if (!returnValue) {
+    return listener;
+  }
+  if (!has$1(listener)) {
+    const wrapped = event => {
+      const uid = getComponentUidFromEvent(event);
+      const result = listener(event);
+      // TODO check for empty array by value
+      if (result.length === 0) {
+        return;
+      }
+      const ipc = getIpc();
+      ipc.send('Viewlet.executeViewletCommand', uid, ...result);
+    };
+    nameAnonymousFunction$1(wrapped, listener.name);
+    set$8(listener, wrapped);
+  }
+  return get$9(listener);
 };
-const unknownItem = {
-  kind: 'unknown',
-  type: '',
-  value: ''
+const attachedListeners = new WeakMap();
+const getOptions = fn => {
+  if (fn.passive) {
+    return {
+      passive: true
+    };
+  }
+  if (fn.capture) {
+    return {
+      capture: true
+    };
+  }
+  return undefined;
 };
-const unwrapItem = item => {
-  switch (item.kind) {
-    case 'file':
-      return unwrapItemFile(item);
-    case 'string':
-      return unwrapItemString(item);
-    default:
-      return unknownItem;
+const attachEvent$1 = ($Node, eventMap, key, value, newEventMap) => {
+  const keyLower = key.toLowerCase();
+  const listenersByEvent = attachedListeners.get($Node) || new Map();
+  const previous = listenersByEvent.get(keyLower);
+  if (previous) {
+    $Node.removeEventListener(keyLower, previous.listener, previous.options);
   }
+  if (newEventMap && newEventMap[value]) {
+    const fn = newEventMap[value];
+    const options = getOptions(fn);
+    // TODO support event listener options
+    $Node.addEventListener(keyLower, newEventMap[value], options);
+    listenersByEvent.set(keyLower, {
+      listener: newEventMap[value],
+      options
+    });
+    attachedListeners.set($Node, listenersByEvent);
+    return;
+  }
+  const listener = eventMap[value];
+  if (!listener) {
+    console.warn('listener not found', value);
+    return;
+  }
+  const options = getEventListenerOptions$1(key, value);
+  const wrapped = getWrappedListener$1(listener, eventMap.returnValue);
+  $Node.addEventListener(keyLower, wrapped, options);
+  listenersByEvent.set(keyLower, {
+    listener: wrapped,
+    options
+  });
+  attachedListeners.set($Node, listenersByEvent);
 };
-const handleDataTransferFiles = event => {
-  if (!event.dataTransfer) {
-    return [];
+const STYLE_REGEX = /([^:;]+):\s*([^;]+)/g;
+const KEBAB_CASE_REGEX = /-([a-z])/g;
+const setStyle = ($Element, styleString) => {
+  if (typeof styleString !== 'string') {
+    return;
+  }
+  let match;
+  while ((match = STYLE_REGEX.exec(styleString)) !== null) {
+    const key = match[1].trim();
+    const value = match[2].trim();
+    // Convert kebab-case to camelCase for CSS properties with dashes
+    const camelCaseKey = key.replaceAll(KEBAB_CASE_REGEX, (_, char) => char.toUpperCase());
+    $Element.style[camelCaseKey] = value;
   }
-  const items = [...event.dataTransfer.items];
-  const promises = items.map(unwrapItem);
-  const ids = promises.map(promise => add(promise));
-  return ids;
 };
-const getEventListenerArg = (param, event) => {
-  switch (param) {
-    case 'event.altKey':
-      return event.altKey;
-    case 'event.button':
-      return event.button;
-    case 'event.clientX':
-      return event.clientX;
-    case 'event.clientY':
-      return event.clientY;
-    case 'event.ctrlKey':
-      return event.ctrlKey;
-    case 'event.data':
-      return event.data;
-    case 'event.dataTransfer.files':
-      return event.dataTransfer.files;
-    case 'event.dataTransfer.files2':
-      return handleDataTransferFiles(event);
-    case 'event.defaultPrevented':
-      return event.defaultPrevented;
-    case 'event.deltaMode':
-      return event.deltaMode;
-    case 'event.deltaX':
-      return event.deltaX;
-    case 'event.deltaY':
-      return event.deltaY;
-    case 'event.detail':
-      return event.detail;
-    case 'event.inputType':
-      return event.inputType;
-    case 'event.isTrusted':
-      return event.isTrusted;
-    case 'event.key':
-      return event.key;
-    case 'event.shiftKey':
-      return event.shiftKey;
-    case 'event.target.checked':
-      return event.target.checked;
-    case 'event.target.className':
-      return event.target.className;
-    case 'event.target.href':
-      return event.target.href;
-    case 'event.target.name':
-      return event.target.name || '';
-    case 'event.target.nodeName':
-      return event.target.nodeName;
-    case 'event.target.scrollTop':
-      return event.target.scrollTop;
-    case 'event.target.selectionEnd':
-      return event.target.selectionEnd;
-    case 'event.target.selectionStart':
-      return event.target.selectionStart;
-    case 'event.target.src':
-      return event.target.src;
-    case 'event.target.value':
-      return event.target.value;
-    case 'event.x':
-      return event.x;
-    case 'event.y':
-      return event.y;
+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 (typeof param === 'string' && param.startsWith('event.target.dataset')) {
-        const rest = param.slice('event.target.dataset.'.length);
-        return event.target.dataset[rest];
+      if (key.startsWith('data-')) {
+        $Element.dataset[key.slice('data-'.length)] = value;
+      } else {
+        $Element[key] = value;
       }
-      return param;
   }
 };
-const getEventListenerArgs = (params, event) => {
-  const serialized = [];
-  for (const param of params) {
-    serialized.push(getEventListenerArg(param, event));
+const setProps = ($Element, props, eventMap, newEventMap) => {
+  for (const key in props) {
+    setProp($Element, key, props[key], eventMap, newEventMap);
   }
-  return serialized;
 };
-const isInputElement = element => {
-  return element instanceof HTMLInputElement;
+const {
+  Text: Text$2,
+  Reference} = VirtualDomElements$1;
+const renderDomTextNode = element => {
+  return document.createTextNode(element.text);
 };
-const preventEventsMaybe = (info, event) => {
-  if (info.preventDefault === 2) {
-    if (!isInputElement(event.target)) {
-      event.preventDefault();
-    }
-  } else if (info.preventDefault) {
-    event.preventDefault();
-  }
-  if (info.stopPropagation) {
-    event.stopPropagation();
+const renderDomElement = (element, eventMap, newEventMap) => {
+  const tag = getElementTag(element.type);
+  const $Element = document.createElement(tag);
+  setProps($Element, element, eventMap, newEventMap);
+  return $Element;
+};
+const renderReferenceNode = element => {
+  const instance = get$1$1(element.uid);
+  if (!instance || !instance.state) {
+    return document.createTextNode('Reference node not found');
   }
+  const $Node = instance.state.$Viewlet;
+  return $Node;
 };
-const applyPointerTrackMaybe = (info, map, event) => {
-  const {
-    trackPointerEvents
-  } = info;
-  if (!trackPointerEvents) {
-    return;
+const render$1 = (element, eventMap, newEventMap) => {
+  switch (element.type) {
+    case Reference:
+      return renderReferenceNode(element);
+    case Text$2:
+      return renderDomTextNode(element);
+    default:
+      return renderDomElement(element, eventMap, newEventMap);
   }
-  const {
-    pointerId,
-    target
-  } = event;
-  target.setPointerCapture(pointerId);
-  const [pointerMoveKey, pointerUpKey] = trackPointerEvents;
-  target.addEventListener(PointerMove$1, map[pointerMoveKey]);
-  target.addEventListener(lostpointercapture, map[pointerUpKey]);
 };
-const createFn = (info, map) => {
-  const fn = event => {
-    if (enabled()) {
-      return;
-    }
-    const uid = getComponentUidFromEvent(event);
-    const args = getEventListenerArgs(info.params, event);
-    preventEventsMaybe(info, event);
-    applyDragInfoMaybe(event);
-    applyPointerTrackMaybe(info, map, event);
-    if (args.length === 0) {
-      return;
+const renderInternal = ($Parent, elements, eventMap, newEventMap) => {
+  const max = elements.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = elements[i];
+    const $Element = render$1(element, eventMap, newEventMap);
+    if (element.childCount > 0) {
+      // @ts-expect-error
+      $Element.append(...stack.slice(0, element.childCount));
+      stack = stack.slice(element.childCount);
     }
-    const ipc = getIpc();
-    ipc.send('Viewlet.executeViewletCommand', uid, ...args);
-  };
-  nameAnonymousFunction$1(fn, info.name);
-  if (info.passive) {
-    // TODO avoid mutating function property, maybe return an object with function and options
-    fn.passive = true;
+    stack.unshift($Element);
   }
-  if (info.capture) {
-    // TODO avoid mutating function property, maybe return an object with function and options
-    fn.capture = true;
+  $Parent.append(...stack);
+};
+const renderInto = ($Parent, dom, eventMap = {}) => {
+  clearNode($Parent);
+  renderInternal($Parent, dom, eventMap);
+};
+
+/**
+ *
+ * @param {any[]} elements
+ * @returns
+ */
+const render = (elements, eventMap = {}, newEventMap = {}) => {
+  const $Root = document.createElement('div');
+  renderInternal($Root, elements, eventMap, newEventMap);
+  return $Root;
+};
+const rememberFocus2 = ($Viewlet, dom, eventMap, uid = 0) => {
+  if (uid) {
+    const newEventMap = getEventListenerMap(uid);
+    const $New = render(dom, eventMap, newEventMap).firstChild;
+    setComponentUid($New, uid);
+    $Viewlet.replaceWith($New);
+    $Viewlet = $New;
+  } else {
+    renderInto($Viewlet, dom, eventMap);
   }
-  return fn;
+  return $Viewlet;
 };
-const listeners = Object.create(null);
-const registerEventListeners = (id, eventListeners) => {
-  const map = Object.create(null);
-  for (const info of eventListeners) {
-    const fn = createFn(info, map);
-    map[info.name] = fn;
+
+// Map of property names to attribute names for cases where they differ
+const propertyToAttribute = {
+  className: 'class',
+  htmlFor: 'for',
+  ariaActivedescendant: 'aria-activedescendant',
+  ariaControls: 'aria-controls',
+  ariaLabelledBy: 'aria-labelledby',
+  ariaOwns: 'aria-owns',
+  inputType: 'type'
+};
+
+// Style properties that need to be set on element.style
+const styleProperties = new Set(['width', 'height', 'top', 'left', 'marginTop', 'paddingLeft', 'paddingRight']);
+const removeAttribute = ($Element, key) => {
+  // Handle style properties
+  if (styleProperties.has(key)) {
+    // @ts-ignore - dynamic style property access
+    $Element.style[key] = '';
+    return;
   }
-  listeners[id] = map;
+  const attributeName = propertyToAttribute[key] || key;
+  $Element.removeAttribute(attributeName);
 };
-const getEventListenerMap = id => {
-  const map = listeners[id];
-  return map;
+const setText$3 = ($Element, value) => {
+  $Element.nodeValue = value;
+};
+const removeChild = ($Element, index) => {
+  const $Child = $Element.childNodes[index];
+  if ($Child) {
+    $Child.remove();
+  }
+};
+const add = ($Element, nodes, eventMap = {}) => {
+  renderInternal($Element, nodes, eventMap, eventMap);
+};
+const replace = ($Element, nodes, eventMap = {}) => {
+  // Create a temporary container to render the new nodes
+  const $Temp = document.createElement('div');
+  renderInternal($Temp, nodes, eventMap, eventMap);
+  // Replace the current element with the new node(s)
+  const $NewNode = $Temp.firstChild;
+  if (!$NewNode) {
+    // No node was created, just remove the old element
+    $Element.remove();
+    return $Element;
+  }
+  $Element.replaceWith($NewNode);
+  return $NewNode;
 };
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
 const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
   const events = getEventListenerMap(id) || eventMap;
   let $Current = $Element;
@@ -1124,7 +1163,7 @@ const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
     try {
       switch (patch.type) {
         case Add:
-          add$1($Current, patch.nodes, events);
+          add($Current, patch.nodes, events);
           break;
         case NavigateChild:
           {
@@ -1237,24 +1276,6 @@ const getActiveElementInside = $Viewlet => {
 const queryInputs = $Viewlet => {
   return [...$Viewlet.querySelectorAll('input, textarea, select')];
 };
-const clearNode = $Node => {
-  $Node.textContent = '';
-};
-const renderInto = ($Parent, dom, eventMap = {}) => {
-  clearNode($Parent);
-  renderInternal($Parent, dom, eventMap);
-};
-
-/**
- *
- * @param {any[]} elements
- * @returns
- */
-const render = (elements, eventMap = {}, newEventMap = {}) => {
-  const $Root = document.createElement('div');
-  renderInternal($Root, elements, eventMap, newEventMap);
-  return $Root;
-};
 const focusElement = $Element => {
   $Element.focus({
     preventScroll: true
@@ -4333,7 +4354,7 @@ const setIdentifiers = identifiers => {
   setIdentifiers$1(identifiers);
 };
 
-const rememberFocus = rememberFocus$1;
+const rememberFocus = rememberFocus2;
 
 const handleImageLoad = event => {
   const $ImagePreviewImage = event.target;