@lvce-editor/renderer-process 25.1.0 → 25.2.0

package/dist/rendererProcessMain.js

@@ -120,24 +120,24 @@ const confirm$1 = message => {
   return window.confirm(message);
 };
 
-const state$9 = {
+const state$a = {
   styleSheets: Object.create(null)
 };
-const set$9 = (id, sheet) => {
-  state$9.styleSheets[id] = sheet;
+const set$a = (id, sheet) => {
+  state$a.styleSheets[id] = sheet;
 };
-const get$a = id => {
-  return state$9.styleSheets[id];
+const get$b = id => {
+  return state$a.styleSheets[id];
 };
 
 const addCssStyleSheet = (id, text) => {
-  const existing = get$a(id);
+  const existing = get$b(id);
   if (existing) {
     existing.replaceSync(text);
     return;
   }
   const sheet = new CSSStyleSheet({});
-  set$9(id, sheet);
+  set$a(id, sheet);
   sheet.replaceSync(text);
   document.adoptedStyleSheets.push(sheet);
 };
@@ -181,6 +181,7 @@ const downloadFile = (fileName, url) => {
 };
 
 const uidSymbol = Symbol('uid');
+
 const getUidTarget = $Element => {
   while ($Element) {
     if ($Element[uidSymbol]) {
@@ -190,6 +191,7 @@ const getUidTarget = $Element => {
   }
   return undefined;
 };
+
 const setComponentUid = ($Element, uid) => {
   $Element[uidSymbol] = uid;
 };
@@ -207,6 +209,7 @@ const getComponentUidFromEvent = event => {
   } = event;
   return getComponentUid(currentTarget || target);
 };
+
 const dragInfos = Object.create(null);
 const setDragInfo = (id, data) => {
   dragInfos[id] = data;
@@ -217,6 +220,7 @@ const getDragInfo = id => {
 const isDragInfoOld = data => {
   return Array.isArray(data);
 };
+
 const setDragImage = (dataTransfer, label) => {
   const dragImage = document.createElement('div');
   dragImage.className = 'DragImage';
@@ -228,6 +232,7 @@ const setDragImage = (dataTransfer, label) => {
   };
   setTimeout(handleTimeOut, 0);
 };
+
 const applyDragInfoMaybe = event => {
   const {
     dataTransfer,
@@ -253,8 +258,10 @@ const applyDragInfoMaybe = event => {
     }
   }
 };
+
 const PointerMove$1 = 'pointermove';
 const lostpointercapture = 'lostpointercapture';
+
 let ignore = false;
 const startIgnore = () => {
   ignore = true;
@@ -265,14 +272,16 @@ const stopIgnore = () => {
 const enabled = () => {
   return ignore;
 };
+
 let id$1 = 0;
 const create$N = () => {
   return ++id$1;
 };
-const state$1$1 = Object.create(null);
+
+const state$9 = Object.create(null);
 const acquire$1 = id => {
-  const promise = state$1$1[id];
-  delete state$1$1[id];
+  const promise = state$9[id];
+  delete state$9[id];
   return promise;
 };
 const getFileHandles$1 = async ids => {
@@ -282,13 +291,14 @@ const getFileHandles$1 = async ids => {
 };
 const add$1 = promise => {
   const id = create$N();
-  state$1$1[id] = promise;
+  state$9[id] = promise;
   return id;
 };
 const addFileHandle$1 = fileHandle => {
   const promise = Promise.resolve(fileHandle);
   return add$1(promise);
 };
+
 const unwrapItemString = async item => {
   const {
     resolve,
@@ -344,6 +354,22 @@ const handleDataTransferFiles = event => {
   const ids = promises.map(promise => add$1(promise));
   return ids;
 };
+const handleClipboardDataFiles = event => {
+  if (!event.clipboardData) {
+    return [];
+  }
+  const files = [];
+  for (const item of event.clipboardData.items) {
+    if (item.kind !== 'file') {
+      continue;
+    }
+    const file = item.getAsFile();
+    if (file) {
+      files.push(file);
+    }
+  }
+  return files;
+};
 const getEventListenerArg = (param, event) => {
   switch (param) {
     case 'event.altKey':
@@ -354,6 +380,8 @@ const getEventListenerArg = (param, event) => {
       return event.clientX;
     case 'event.clientY':
       return event.clientY;
+    case 'event.clipboardData.files':
+      return handleClipboardDataFiles(event);
     case 'event.ctrlKey':
       return event.ctrlKey;
     case 'event.data':
@@ -421,6 +449,7 @@ const getEventListenerArg = (param, event) => {
       return param;
   }
 };
+
 const getEventListenerArgs = (params, event) => {
   const serialized = [];
   for (const param of params) {
@@ -428,6 +457,7 @@ const getEventListenerArgs = (params, event) => {
   }
   return serialized;
 };
+
 const state$8 = {
   ipc: undefined
 };
@@ -437,14 +467,17 @@ const getIpc = () => {
 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)) {
@@ -457,6 +490,7 @@ const preventEventsMaybe = (info, event) => {
     event.stopPropagation();
   }
 };
+
 const applyPointerTrackMaybe = (info, map, event) => {
   const {
     trackPointerEvents
@@ -500,6 +534,7 @@ const createFn = (info, map) => {
   }
   return fn;
 };
+
 const listeners = Object.create(null);
 const registerEventListeners = (id, eventListeners) => {
   const map = Object.create(null);
@@ -513,64 +548,67 @@ 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 Audio$3 = 'audio';
+const Button$1 = 'button';
+const Col$1 = 'col';
+const ColGroup$1 = 'colgroup';
+const Del$1 = 'del';
+const Div$1 = 'div';
+const H1$1 = 'h1';
+const H2$1 = 'h2';
+const H3$1 = 'h3';
+const H4$1 = 'h4';
+const H5$1 = 'h5';
+const H6$1 = 'h6';
+const I$1 = 'i';
+const Img$1 = 'img';
+const Input$1 = 'input';
+const Ins$1 = 'ins';
+const Kbd$1 = 'kbd';
+const Span$1 = 'span';
+const Table$1 = 'table';
+const TBody$1 = 'tbody';
+const Td$1 = 'td';
+const Th$1 = 'th';
+const THead$1 = '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 Article$1 = 'article';
+const Aside$1 = 'aside';
+const Footer$1 = 'footer';
+const Header$1 = 'header';
+const Nav$1 = 'nav';
+const Section$1 = 'section';
+const Search$1 = 'search';
+const Dd$1 = 'dd';
 const Dl$2 = 'dl';
-const Figcaption$2 = 'figcaption';
-const Figure$2 = 'figure';
-const Hr$2 = 'hr';
+const Figcaption$1 = 'figcaption';
+const Figure$1 = 'figure';
+const Hr$1 = 'hr';
 const Li$2 = 'li';
 const Ol$2 = 'ol';
-const P$2 = 'p';
-const Pre$2 = 'pre';
-const A$2 = 'a';
+const P$1 = 'p';
+const Pre$1 = 'pre';
+const A$1 = '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 Cite$1 = 'cite';
+const Data$1 = 'data';
+const Time$1 = 'time';
+const Tfoot$1 = 'tfoot';
+const Ul$1 = 'ul';
 const Video$2 = 'video';
-const TextArea$2 = 'textarea';
-const Select$2 = 'select';
-const Option$2 = 'option';
+const TextArea$1 = 'textarea';
+const Select$1 = 'select';
+const Option$1 = 'option';
 const Code$2 = 'code';
-const Label$2 = 'label';
+const Label$1 = 'label';
 const Dt$2 = 'dt';
 const Iframe$1 = 'iframe';
+const Main$1 = 'main';
 const Em$1 = 'em';
 const Strong$1 = 'strong';
 const Style$1 = 'style';
@@ -579,65 +617,78 @@ const Head$1 = 'head';
 const Title$1 = 'title';
 const Meta$1 = 'meta';
 const Canvas$1 = 'canvas';
+const Circle$1 = 'circle';
 const Form$1 = 'form';
-const Quote$1$1 = 'quote';
+const Defs$1 = 'defs';
+const Ellipse$1 = 'ellipse';
+const G$2 = 'g';
+const Line$1 = 'line';
+const Path$1 = 'path';
+const Polygon$1 = 'polygon';
+const Polyline$1 = 'polyline';
+const Quote$3 = '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 Rect$1 = 'rect';
+const Svg$1 = 'svg';
+const Use$1 = 'use';
+
+const Audio$2 = 0;
+const Button = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text$3 = 12;
+const Th = 13;
+const THead = 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 I = 16;
+const Img = 17;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
 const Dl$1 = 44;
-const Figcaption$1 = 45;
-const Figure$1 = 46;
-const Hr$1 = 47;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
 const Li$1 = 48;
 const Ol$1 = 49;
-const P$1 = 50;
-const Pre$1 = 51;
-const A$1 = 53;
+const P = 50;
+const Pre = 51;
+const A = 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 Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
 const Video$1 = 61;
-const TextArea$1 = 62;
-const Select$1 = 63;
-const Option$1 = 64;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
 const Code$1 = 65;
-const Label$1 = 66;
+const Label = 66;
 const Dt$1 = 67;
 const Iframe = 68;
+const Main = 69;
 const Strong = 70;
 const Em = 71;
 const Style = 72;
@@ -649,550 +700,1051 @@ const Canvas = 77;
 const Form = 78;
 const BlockQuote = 79;
 const Quote$2 = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G$1 = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
 const Reference$1 = 100;
-const VirtualDomElements$1 = {
+
+const VirtualDomElements = {
   __proto__: null,
+  A,
+  Article,
+  Aside,
+  Audio: Audio$2,
+  BlockQuote,
+  Br: Br$1,
+  Button,
+  Canvas,
+  Circle,
+  Cite,
+  Code: Code$1,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl: Dl$1,
+  Dt: Dt$1,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G: G$1,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li: Li$1,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol: Ol$1,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote: Quote$2,
+  Rect,
   Reference: Reference$1,
-  Text: Text$1$1};
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table,
+  Td,
+  Text: Text$3,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr: Tr$1,
+  Ul,
+  Use,
+  Video: Video$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 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$1:
-      return Button$2;
+    case Button:
+      return Button$1;
     case Canvas:
       return Canvas$1;
-    case Cite$1:
-      return Cite$2;
+    case Circle:
+      return Circle$1;
+    case Cite:
+      return Cite$1;
     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 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$1:
-      return Figcaption$2;
-    case Figure$1:
-      return Figure$2;
-    case Footer$1:
-      return Footer$2;
+    case Figcaption:
+      return Figcaption$1;
+    case Figure:
+      return Figure$1;
+    case Footer:
+      return Footer$1;
     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 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$1:
-      return Header$2;
-    case Hr$1:
-      return Hr$2;
+    case Header:
+      return Header$1;
+    case Hr:
+      return Hr$1;
     case Html:
       return Html$1;
-    case I$1:
-      return I$2;
+    case I:
+      return I$1;
     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 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$1:
-      return Nav$2;
+    case Nav:
+      return Nav$1;
     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 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$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;
+      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 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 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$1:
-      return Ul$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 ElementTagMap = {
   __proto__: null,
   getElementTag: getElementTag$1
 };
-const {
-  getElementTag
-} = ElementTagMap;
-const instances = Object.create(null);
-const get$1$1 = viewletId => {
-  return instances[viewletId];
-};
-const set$1$1 = (viewletId, instance) => {
-  instances[viewletId] = instance;
-};
-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 cache$1 = new Map();
-const has$1 = listener => {
-  return cache$1.has(listener);
-};
-const set$8 = (listener, value) => {
-  cache$1.set(listener, value);
-};
-const get$9 = listener => {
-  return cache$1.get(listener);
-};
-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 attachedListeners = new WeakMap();
-const getOptions = fn => {
-  if (fn.passive) {
-    return {
-      passive: true
-    };
-  }
-  if (fn.capture) {
-    return {
-      capture: true
-    };
-  }
-  return undefined;
-};
-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 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 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 setProps = ($Element, props, eventMap, newEventMap) => {
-  for (const key in props) {
-    setProp($Element, key, props[key], eventMap, newEventMap);
-  }
-};
-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);
-};
-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 $Viewlet;
-};
 
-// 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'
-};
+const Backspace$1 = 'Backspace';
+const Tab$1 = 'Tab';
+const Space$1 = ' ';
+const Space2 = 'Space';
+const Enter$1 = 'Enter';
+const Escape$1 = 'Escape';
+const PageUp$1 = 'PageUp';
+const PageDown$1 = 'PageDown';
+const Home$1 = 'Home';
+const End$1 = 'End';
+const LeftArrow$1 = 'ArrowLeft';
+const RightArrow$1 = 'ArrowRight';
+const UpArrow$1 = 'ArrowUp';
+const DownArrow$1 = 'ArrowDown';
+const Insert$1 = 'Insert';
+const Delete$1 = 'Delete';
+const Digit0$1 = '0';
+const Digit1$1 = '1';
+const Digit2$1 = '2';
+const Digit3$1 = '3';
+const Digit4$1 = '4';
+const Digit5$1 = '5';
+const Digit6$1 = '6';
+const Digit7$1 = '7';
+const Digit8$1 = '8';
+const Digit9$1 = '9';
+const KeyA$1 = 'a';
+const KeyB$1 = 'b';
+const KeyC$1 = 'c';
+const KeyD$1 = 'd';
+const KeyE$1 = 'e';
+const KeyF$1 = 'f';
+const KeyG$1 = 'g';
+const KeyH$1 = 'h';
+const KeyI$1 = 'i';
+const KeyJ$1 = 'j';
+const KeyK$1 = 'k';
+const KeyL$1 = 'l';
+const KeyM$1 = 'm';
+const KeyN$1 = 'n';
+const KeyO$1 = 'o';
+const KeyP$1 = 'p';
+const KeyQ$1 = 'q';
+const KeyR$1 = 'r';
+const KeyS$1 = 's';
+const KeyT$1 = 't';
+const KeyU$1 = 'u';
+const KeyV$1 = 'v';
+const KeyW$1 = 'w';
+const KeyX$1 = 'x';
+const KeyY$1 = 'y';
+const KeyZ$1 = 'z';
+const F1$1 = 'F1';
+const F2$1 = 'F2';
+const F3$1 = 'F3';
+const F4$1 = 'F4';
+const F5$1 = 'F5';
+const F6$1 = 'F6';
+const F7$1 = 'F7';
+const F8$1 = 'F8';
+const F9$1 = 'F9';
+const F10$1 = 'F10';
+const F11$1 = 'F11';
+const F12$1 = 'F12';
+const F13$1 = 'F13';
+const F14$1 = 'F14';
+const F15$1 = 'F15';
+const F16$1 = 'F16';
+const F17$1 = 'F17';
+const F18$1 = 'F18';
+const F19$1 = 'F19';
+const F20$1 = 'F20';
+const F21$1 = 'F21';
+const F22$1 = 'F22';
+const F23$1 = 'F23';
+const F24$1 = 'F24';
+const SemiColon$1 = ';';
+const Equal$1 = '=';
+const Comma$1 = ',';
+const Minus$1 = '-';
+const Period$1 = '.';
+const Slash$1 = '/';
+const Backquote$1 = '`';
+const Backquote2 = 'Backquote';
+const BracketLeft$1 = '[';
+const Backslash$1 = '\\';
+const BracketRight$1 = ']';
+const Quote$1 = `'`;
+const Star$1 = '*';
+const Plus$1 = '+';
 
-// 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 = ($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;
-  let 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
-              });
+const Unknown = 0;
+const Backspace = 1;
+const Tab = 2;
+const Enter = 3;
+const Escape = 8;
+const Space = 9;
+const PageUp = 10;
+const PageDown = 11;
+const End = 255;
+const Home = 12;
+const LeftArrow = 13;
+const UpArrow = 14;
+const RightArrow = 15;
+const DownArrow = 16;
+const Insert = 17;
+const Delete = 18;
+const Digit0 = 19;
+const Digit1 = 20;
+const Digit2 = 21;
+const Digit3 = 22;
+const Digit4 = 23;
+const Digit5 = 24;
+const Digit6 = 25;
+const Digit7 = 26;
+const Digit8 = 27;
+const Digit9 = 28;
+const KeyA = 29;
+const KeyB = 30;
+const KeyC = 31;
+const KeyD = 32;
+const KeyE = 33;
+const KeyF = 34;
+const KeyG = 35;
+const KeyH = 36;
+const KeyI = 37;
+const KeyJ = 38;
+const KeyK = 39;
+const KeyL = 40;
+const KeyM = 41;
+const KeyN = 42;
+const KeyO = 43;
+const KeyP = 44;
+const KeyQ = 45;
+const KeyR = 46;
+const KeyS = 47;
+const KeyT = 48;
+const KeyU = 49;
+const KeyV = 50;
+const KeyW = 51;
+const KeyX = 52;
+const KeyY = 53;
+const KeyZ = 54;
+const F1 = 57;
+const F2 = 58;
+const F3 = 59;
+const F4 = 60;
+const F5 = 61;
+const F6 = 62;
+const F7 = 63;
+const F8 = 64;
+const F9 = 65;
+const F10 = 66;
+const F11 = 67;
+const F12 = 68;
+const F13 = 69;
+const F14 = 70;
+const F15 = 71;
+const F16 = 72;
+const F17 = 72;
+const F18 = 74;
+const F19 = 75;
+const F20 = 76;
+const F21 = 77;
+const F22 = 78;
+const F23 = 79;
+const F24 = 80;
+const SemiColon = 83;
+const Equal = 84;
+const Comma = 85;
+const Minus = 86;
+const Period = 87;
+const Slash = 88;
+const Backquote = 89;
+const BracketLeft = 90;
+const Backslash = 91;
+const BracketRight = 92;
+const Quote = 93;
+const Star = 131;
+const Plus = 132;
+
+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;
+  }
+};
+
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+const Alt$1 = 1 << 9 >>> 0;
+
+const {
+  getElementTag
+} = ElementTagMap;
+
+const instances = Object.create(null);
+const get$a = viewletId => {
+  return instances[viewletId];
+};
+const set$9 = (viewletId, instance) => {
+  instances[viewletId] = instance;
+};
+
+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 cache$1 = new Map();
+const has$1 = listener => {
+  return cache$1.has(listener);
+};
+const set$8 = (listener, value) => {
+  cache$1.set(listener, value);
+};
+const get$9 = listener => {
+  return cache$1.get(listener);
+};
+
+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 attachedListeners = new WeakMap();
+const getOptions = fn => {
+  if (fn.passive) {
+    return {
+      passive: true
+    };
+  }
+  if (fn.capture) {
+    return {
+      capture: true
+    };
+  }
+  return undefined;
+};
+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 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 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 setProps = ($Element, props, eventMap, newEventMap) => {
+  for (const key in props) {
+    setProp($Element, key, props[key], eventMap, newEventMap);
+  }
+};
+
+const {
+  Text: Text$2,
+  Reference} = VirtualDomElements;
+
+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$a(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);
+};
+
+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 $Viewlet;
+};
+
+// 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 = ($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;
+  let 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;
@@ -1253,7 +1805,7 @@ const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
         case SetReferenceNodeUid:
           {
             // Get the new reference node instance
-            const instance = get$1$1(patch.uid);
+            const instance = get$a(patch.uid);
             if (!instance || !instance.state) {
               console.error('Cannot set reference node uid: instance not found', {
                 uid: patch.uid
@@ -1281,6 +1833,7 @@ const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
     }
   }
 };
+
 const getActiveElementInside = $Viewlet => {
   if (!$Viewlet) {
     return undefined;
@@ -1294,9 +1847,11 @@ const getActiveElementInside = $Viewlet => {
   }
   return $ActiveElement;
 };
+
 const queryInputs = $Viewlet => {
   return [...$Viewlet.querySelectorAll('input, textarea, select')];
 };
+
 const focusElement = $Element => {
   $Element.focus({
     preventScroll: true
@@ -3238,7 +3793,7 @@ const create2 = async (canvasId, objectId, width, height) => {
   }
   const offscreenCanvas = canvas.transferControlToOffscreen();
   canvas.dataset.id = canvasId;
-  set$1$1(canvasId, {
+  set$9(canvasId, {
     factory: {},
     state: {
       $Viewlet: canvas
@@ -3686,12 +4241,11 @@ const hide = (restoreFocus = true) => {
   }
 };
 
-const openUrl = (url, useRedirect = false) => {
-  if (useRedirect) {
-    window.location.href = url;
-  } else {
-    window.open(url);
-  }
+const openUrl = url => {
+  window.open(url);
+};
+const redirectToUrl = url => {
+  window.location.href = url;
 };
 
 const isElectronUserAgentSpecificMemoryError = error => {
@@ -4001,7 +4555,6 @@ const performAction2 = async (locator, fnName, options) => {
     throw new Error(`element not found`);
   }
   fn(element, options);
-  return;
 };
 
 const toHaveText$1 = locator => {
@@ -4264,10 +4817,7 @@ const performAction = async (locator, fnName, options) => {
   if (!element) {
     throw new Error(`element not found`);
   }
-  if (element) {
-    fn(element, options);
-    return;
-  }
+  fn(element, options);
 };
 const performKeyBoardAction = (fnName, options) => {
   const fn = KeyBoardActions[fnName];
@@ -4344,11 +4894,12 @@ const transferToWebView = objectId => {
   // TODO allow specifying transfer origin from renderer worker
   // TODO allow specifing method from renderer worker
   const port = acquire(objectId);
+  const targetOrigin = new URL($Iframe.src || location.href, location.href).origin;
   contentWindow.postMessage({
     jsonrpc: '2.0',
     method: 'handlePort',
     params: [port]
-  }, '*', [port]);
+  }, targetOrigin, [port]);
 };
 
 const attachEvents$6 = ($Node, eventMap) => {
@@ -5964,14 +6515,14 @@ const detachEvent = ($Node, key, listener) => {
 
 const None = 0;
 const Ctrl = 1;
-const Alt$1 = 2;
+const Alt = 2;
 
 const getModifierKey = event => {
   if (event.ctrlKey) {
     return Ctrl;
   }
   if (event.altKey) {
-    return Alt$1;
+    return Alt;
   }
   return None;
 };
@@ -6671,603 +7222,233 @@ const create$d = () => {
 };
 const focus$9 = (state, key, source) => {
   if (!key) {
-    return;
-  }
-  if (source !== Script) {
-    return;
-  }
-  const {
-    $Viewlet
-  } = state;
-  const $Element = $Viewlet.querySelector(key);
-  if (!$Element) {
-    console.warn(`element not found: ${key}`);
-    return;
-  }
-  $Element.focus();
-  applyUidWorkaround($Viewlet);
-};
-const setValue$1 = (state, value) => {
-  const {
-    $Viewlet
-  } = state;
-  const $InputBox = $Viewlet.querySelector('.MultilineInputBox');
-  if (!$InputBox) {
-    return;
-  }
-  $InputBox.value = value;
-};
-const appendWidget$1 = state => {
-  const {
-    $Viewlet
-  } = state;
-  append$1($Viewlet);
-};
-const setDom$3 = (state, dom) => {
-  const {
-    $Viewlet
-  } = state;
-  rememberFocus($Viewlet, dom, ViewletFindWidgetEvents, 0);
-};
-const setBounds$2 = (state, x, y, width, height) => {
-  const {
-    $Viewlet
-  } = state;
-  setBounds$a($Viewlet, x, y, width, height);
-};
-const dispose$8 = state => {
-  remove$1(state.$Viewlet);
-};
-const Events$3 = ViewletFindWidgetEvents;
-
-const ViewletFindWidget = {
-  __proto__: null,
-  Events: Events$3,
-  appendWidget: appendWidget$1,
-  create: create$d,
-  dispose: dispose$8,
-  focus: focus$9,
-  setBounds: setBounds$2,
-  setDom: setDom$3,
-  setValue: setValue$1
-};
-
-const handleLocationsMouseDown = event => {
-  if (event.button !== LeftClick) {
-    return;
-  }
-  const $Target = event.target;
-  if ($Target.classList.contains('TreeItem')) {
-    const index = getNodeIndex($Target);
-    send(/* ViewletLocations.selectIndex */'Locations.selectIndex', /* index */index);
-  } else if ($Target.classList.contains('LocationList')) {
-    send(/* ViewletLocations.focusIndex */'Locations.focusIndex', /* index */-1);
-  }
-};
-
-const ViewletLocationsEvents = {
-  __proto__: null,
-  handleLocationsMouseDown
-};
-
-const setFocusedIndex$1 = (state, oldFocusedIndex, newFocusedIndex) => {
-  const {
-    $Viewlet
-  } = state;
-  const $Locations = $Viewlet.children[1];
-  if (oldFocusedIndex === -1) {
-    $Locations.classList.remove('FocusOutline');
-  } else {
-    $Locations.children[oldFocusedIndex].classList.remove('Focused');
-  }
-  if (newFocusedIndex === -1) {
-    $Locations.classList.add('FocusOutline');
-  } else {
-    $Locations.setAttribute(AriaActiveDescendant, `Reference-${newFocusedIndex}`);
-    $Locations.children[newFocusedIndex].classList.add('Focused');
-  }
-};
-const handleError$3 = (state, message) => {
-  const {
-    $Message
-  } = state;
-  $Message.textContent = message;
-};
-const focus$8 = state => {
-  const {
-    $Locations
-  } = state;
-  $Locations.classList.add('FocusOutline');
-  $Locations.focus();
-  send('Focus.setFocus', FocusLocationList);
-};
-
-const ViewletImplementations = {
-  __proto__: null,
-  Events: ViewletLocationsEvents,
-  focus: focus$8,
-  handleError: handleError$3,
-  setFocusedIndex: setFocusedIndex$1
-};
-
-const handleScrollBarPointerDown = event => {
-  // TODO
-};
-
-const ViewletInlineDiffEditorEvents = {
-  __proto__: null,
-  handleScrollBarPointerDown,
-  handleWheel: handleWheel$3
-};
-
-const ViewletInlineDiffEditor = {
-  __proto__: null,
-  Events: ViewletInlineDiffEditorEvents,
-  setScrollBar: setScrollBar$2
-};
-
-const handleResizerPointerMove = event => {
-  const {
-    clientX
-  } = event;
-  const uid = fromEvent(event);
-  handleResizerMove(uid, clientX);
-};
-
-// TODO use lostpointercapture event instead
-const handleResizerPointerUp = event => {
-  const {
-    pointerId,
-    target
-  } = event;
-  stopTracking(target, pointerId, handleResizerPointerMove, handleResizerPointerUp);
-};
-const handleResizerPointerDown = event => {
-  const {
-    clientX,
-    pointerId,
-    target
-  } = event;
-  startTracking(target, pointerId, handleResizerPointerMove, handleResizerPointerUp);
-  const id = target.nextSibling ? 1 : 2;
-  const uid = fromEvent(event);
-  handleResizerClick(uid, id, clientX);
-};
-const getPointerDownFunction = event => {
-  const {
-    target
-  } = event;
-  switch (target.className) {
-    case 'Resizer':
-      return handleResizerPointerDown;
-    default:
-      return undefined;
+    return;
   }
-};
-const handlePointerDown = event => {
-  const pointerDownFunction = getPointerDownFunction(event);
-  if (!pointerDownFunction) {
+  if (source !== Script) {
     return;
   }
-  pointerDownFunction(event);
-};
-
-const ViewletkeyBindingsEvents = {
-  __proto__: null,
-  handlePointerDown,
-  handleResizerPointerDown,
-  handleResizerPointerMove,
-  handleResizerPointerUp
+  const {
+    $Viewlet
+  } = state;
+  const $Element = $Viewlet.querySelector(key);
+  if (!$Element) {
+    console.warn(`element not found: ${key}`);
+    return;
+  }
+  $Element.focus();
+  applyUidWorkaround($Viewlet);
 };
-
-const setValue = (state, value) => {
+const setValue$1 = (state, value) => {
   const {
     $Viewlet
   } = state;
-  const $InputBox = $Viewlet.querySelector('input');
+  const $InputBox = $Viewlet.querySelector('.MultilineInputBox');
+  if (!$InputBox) {
+    return;
+  }
   $InputBox.value = value;
 };
-const setColumnWidths = (state, columnWidth1, columnWidth2, columnWidth3) => {
-  const paddingLeft = 15;
+const appendWidget$1 = state => {
   const {
     $Viewlet
   } = state;
-  const $$Resizers = $Viewlet.querySelectorAll('.Resizer');
-  const $Resizer1 = $$Resizers[0];
-  const $Resizer2 = $$Resizers[1];
-  $Resizer1.style.left = `${paddingLeft + columnWidth1}px`;
-  $Resizer2.style.left = `${paddingLeft + columnWidth1 + columnWidth2}px`;
+  append$1($Viewlet);
 };
-const Events$2 = ViewletkeyBindingsEvents;
-
-const ViewletKeyBindings = {
-  __proto__: null,
-  Events: Events$2,
-  setColumnWidths,
-  setScrollBar: setScrollBar$2,
-  setSize,
-  setValue
+const setDom$3 = (state, dom) => {
+  const {
+    $Viewlet
+  } = state;
+  rememberFocus($Viewlet, dom, ViewletFindWidgetEvents, 0);
 };
-
-const getSashId = $Target => {
-  if ($Target.id === 'SashPanel') {
-    return 'Panel';
-  }
-  if ($Target.id === 'SashSideBar') {
-    return 'SideBar';
-  }
-  return '';
+const setBounds$2 = (state, x, y, width, height) => {
+  const {
+    $Viewlet
+  } = state;
+  setBounds$a($Viewlet, x, y, width, height);
 };
+const dispose$8 = state => {
+  remove$1(state.$Viewlet);
+};
+const Events$3 = ViewletFindWidgetEvents;
 
-const Backspace$1 = 'Backspace';
-const Tab$1 = 'Tab';
-const Space$1 = ' ';
-const Space2 = 'Space';
-const Enter$1 = 'Enter';
-const Escape$1 = 'Escape';
-const PageUp$1 = 'PageUp';
-const PageDown$1 = 'PageDown';
-const Home$1 = 'Home';
-const End$1 = 'End';
-const LeftArrow$1 = 'ArrowLeft';
-const RightArrow$1 = 'ArrowRight';
-const UpArrow$1 = 'ArrowUp';
-const DownArrow$1 = 'ArrowDown';
-const Insert$1 = 'Insert';
-const Delete$1 = 'Delete';
-const Digit0$1 = '0';
-const Digit1$1 = '1';
-const Digit2$1 = '2';
-const Digit3$1 = '3';
-const Digit4$1 = '4';
-const Digit5$1 = '5';
-const Digit6$1 = '6';
-const Digit7$1 = '7';
-const Digit8$1 = '8';
-const Digit9$1 = '9';
-const KeyA$1 = 'a';
-const KeyB$1 = 'b';
-const KeyC$1 = 'c';
-const KeyD$1 = 'd';
-const KeyE$1 = 'e';
-const KeyF$1 = 'f';
-const KeyG$1 = 'g';
-const KeyH$1 = 'h';
-const KeyI$1 = 'i';
-const KeyJ$1 = 'j';
-const KeyK$1 = 'k';
-const KeyL$1 = 'l';
-const KeyM$1 = 'm';
-const KeyN$1 = 'n';
-const KeyO$1 = 'o';
-const KeyP$1 = 'p';
-const KeyQ$1 = 'q';
-const KeyR$1 = 'r';
-const KeyS$1 = 's';
-const KeyT$1 = 't';
-const KeyU$1 = 'u';
-const KeyV$1 = 'v';
-const KeyW$1 = 'w';
-const KeyX$1 = 'x';
-const KeyY$1 = 'y';
-const KeyZ$1 = 'z';
-const F1$1 = 'F1';
-const F2$1 = 'F2';
-const F3$1 = 'F3';
-const F4$1 = 'F4';
-const F5$1 = 'F5';
-const F6$1 = 'F6';
-const F7$1 = 'F7';
-const F8$1 = 'F8';
-const F9$1 = 'F9';
-const F10$1 = 'F10';
-const F11$1 = 'F11';
-const F12$1 = 'F12';
-const F13$1 = 'F13';
-const F14$1 = 'F14';
-const F15$1 = 'F15';
-const F16$1 = 'F16';
-const F17$1 = 'F17';
-const F18$1 = 'F18';
-const F19$1 = 'F19';
-const F20$1 = 'F20';
-const F21$1 = 'F21';
-const F22$1 = 'F22';
-const F23$1 = 'F23';
-const F24$1 = 'F24';
-const SemiColon$1 = ';';
-const Equal$1 = '=';
-const Comma$1 = ',';
-const Minus$1 = '-';
-const Period$1 = '.';
-const Slash$1 = '/';
-const Backquote$1 = '`';
-const Backquote2 = 'Backquote';
-const BracketLeft$1 = '[';
-const Backslash$1 = '\\';
-const BracketRight$1 = ']';
-const Quote$1 = `'`;
-const Star$1 = '*';
-const Plus$1 = '+';
-
-const Unknown = 0;
-const Backspace = 1;
-const Tab = 2;
-const Enter = 3;
-const Escape = 8;
-const Space = 9;
-const PageUp = 10;
-const PageDown = 11;
-const End = 255;
-const Home = 12;
-const LeftArrow = 13;
-const UpArrow = 14;
-const RightArrow = 15;
-const DownArrow = 16;
-const Insert = 17;
-const Delete = 18;
-const Digit0 = 19;
-const Digit1 = 20;
-const Digit2 = 21;
-const Digit3 = 22;
-const Digit4 = 23;
-const Digit5 = 24;
-const Digit6 = 25;
-const Digit7 = 26;
-const Digit8 = 27;
-const Digit9 = 28;
-const KeyA = 29;
-const KeyB = 30;
-const KeyC = 31;
-const KeyD = 32;
-const KeyE = 33;
-const KeyF = 34;
-const KeyG = 35;
-const KeyH = 36;
-const KeyI = 37;
-const KeyJ = 38;
-const KeyK = 39;
-const KeyL = 40;
-const KeyM = 41;
-const KeyN = 42;
-const KeyO = 43;
-const KeyP = 44;
-const KeyQ = 45;
-const KeyR = 46;
-const KeyS = 47;
-const KeyT = 48;
-const KeyU = 49;
-const KeyV = 50;
-const KeyW = 51;
-const KeyX = 52;
-const KeyY = 53;
-const KeyZ = 54;
-const F1 = 57;
-const F2 = 58;
-const F3 = 59;
-const F4 = 60;
-const F5 = 61;
-const F6 = 62;
-const F7 = 63;
-const F8 = 64;
-const F9 = 65;
-const F10 = 66;
-const F11 = 67;
-const F12 = 68;
-const F13 = 69;
-const F14 = 70;
-const F15 = 71;
-const F16 = 72;
-const F17 = 72;
-const F18 = 74;
-const F19 = 75;
-const F20 = 76;
-const F21 = 77;
-const F22 = 78;
-const F23 = 79;
-const F24 = 80;
-const SemiColon = 83;
-const Equal = 84;
-const Comma = 85;
-const Minus = 86;
-const Period = 87;
-const Slash = 88;
-const Backquote = 89;
-const BracketLeft = 90;
-const Backslash = 91;
-const BracketRight = 92;
-const Quote = 93;
-const Star = 131;
-const Plus = 132;
+const ViewletFindWidget = {
+  __proto__: null,
+  Events: Events$3,
+  appendWidget: appendWidget$1,
+  create: create$d,
+  dispose: dispose$8,
+  focus: focus$9,
+  setBounds: setBounds$2,
+  setDom: setDom$3,
+  setValue: setValue$1
+};
 
-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;
+const handleLocationsMouseDown = event => {
+  if (event.button !== LeftClick) {
+    return;
+  }
+  const $Target = event.target;
+  if ($Target.classList.contains('TreeItem')) {
+    const index = getNodeIndex($Target);
+    send(/* ViewletLocations.selectIndex */'Locations.selectIndex', /* index */index);
+  } else if ($Target.classList.contains('LocationList')) {
+    send(/* ViewletLocations.focusIndex */'Locations.focusIndex', /* index */-1);
+  }
+};
+
+const ViewletLocationsEvents = {
+  __proto__: null,
+  handleLocationsMouseDown
+};
+
+const setFocusedIndex$1 = (state, oldFocusedIndex, newFocusedIndex) => {
+  const {
+    $Viewlet
+  } = state;
+  const $Locations = $Viewlet.children[1];
+  if (oldFocusedIndex === -1) {
+    $Locations.classList.remove('FocusOutline');
+  } else {
+    $Locations.children[oldFocusedIndex].classList.remove('Focused');
+  }
+  if (newFocusedIndex === -1) {
+    $Locations.classList.add('FocusOutline');
+  } else {
+    $Locations.setAttribute(AriaActiveDescendant, `Reference-${newFocusedIndex}`);
+    $Locations.children[newFocusedIndex].classList.add('Focused');
+  }
+};
+const handleError$3 = (state, message) => {
+  const {
+    $Message
+  } = state;
+  $Message.textContent = message;
+};
+const focus$8 = state => {
+  const {
+    $Locations
+  } = state;
+  $Locations.classList.add('FocusOutline');
+  $Locations.focus();
+  send('Focus.setFocus', FocusLocationList);
+};
+
+const ViewletImplementations = {
+  __proto__: null,
+  Events: ViewletLocationsEvents,
+  focus: focus$8,
+  handleError: handleError$3,
+  setFocusedIndex: setFocusedIndex$1
+};
+
+const handleScrollBarPointerDown = event => {
+  // TODO
+};
+
+const ViewletInlineDiffEditorEvents = {
+  __proto__: null,
+  handleScrollBarPointerDown,
+  handleWheel: handleWheel$3
+};
+
+const ViewletInlineDiffEditor = {
+  __proto__: null,
+  Events: ViewletInlineDiffEditorEvents,
+  setScrollBar: setScrollBar$2
+};
+
+const handleResizerPointerMove = event => {
+  const {
+    clientX
+  } = event;
+  const uid = fromEvent(event);
+  handleResizerMove(uid, clientX);
+};
+
+// TODO use lostpointercapture event instead
+const handleResizerPointerUp = event => {
+  const {
+    pointerId,
+    target
+  } = event;
+  stopTracking(target, pointerId, handleResizerPointerMove, handleResizerPointerUp);
+};
+const handleResizerPointerDown = event => {
+  const {
+    clientX,
+    pointerId,
+    target
+  } = event;
+  startTracking(target, pointerId, handleResizerPointerMove, handleResizerPointerUp);
+  const id = target.nextSibling ? 1 : 2;
+  const uid = fromEvent(event);
+  handleResizerClick(uid, id, clientX);
+};
+const getPointerDownFunction = event => {
+  const {
+    target
+  } = event;
+  switch (target.className) {
+    case 'Resizer':
+      return handleResizerPointerDown;
     default:
-      return Unknown;
+      return undefined;
+  }
+};
+const handlePointerDown = event => {
+  const pointerDownFunction = getPointerDownFunction(event);
+  if (!pointerDownFunction) {
+    return;
   }
+  pointerDownFunction(event);
 };
 
-const CtrlCmd = 1 << 11 >>> 0;
-const Shift = 1 << 10 >>> 0;
-const Alt = 1 << 9 >>> 0;
+const ViewletkeyBindingsEvents = {
+  __proto__: null,
+  handlePointerDown,
+  handleResizerPointerDown,
+  handleResizerPointerMove,
+  handleResizerPointerUp
+};
+
+const setValue = (state, value) => {
+  const {
+    $Viewlet
+  } = state;
+  const $InputBox = $Viewlet.querySelector('input');
+  $InputBox.value = value;
+};
+const setColumnWidths = (state, columnWidth1, columnWidth2, columnWidth3) => {
+  const paddingLeft = 15;
+  const {
+    $Viewlet
+  } = state;
+  const $$Resizers = $Viewlet.querySelectorAll('.Resizer');
+  const $Resizer1 = $$Resizers[0];
+  const $Resizer2 = $$Resizers[1];
+  $Resizer1.style.left = `${paddingLeft + columnWidth1}px`;
+  $Resizer2.style.left = `${paddingLeft + columnWidth1 + columnWidth2}px`;
+};
+const Events$2 = ViewletkeyBindingsEvents;
+
+const ViewletKeyBindings = {
+  __proto__: null,
+  Events: Events$2,
+  setColumnWidths,
+  setScrollBar: setScrollBar$2,
+  setSize,
+  setValue
+};
+
+const getSashId = $Target => {
+  if ($Target.id === 'SashPanel') {
+    return 'Panel';
+  }
+  if ($Target.id === 'SashSideBar') {
+    return 'SideBar';
+  }
+  return '';
+};
 
 const normalizeKey = (key, code) => {
   if (key.length === 1) {
@@ -7289,7 +7470,7 @@ const getKeyBindingIdentifier = event => {
   } = event;
   const modifierControl = ctrlKey ? CtrlCmd : 0;
   const modifierShift = shiftKey ? Shift : 0;
-  const modifierAlt = altKey ? Alt : 0;
+  const modifierAlt = altKey ? Alt$1 : 0;
   const normalizedKey = normalizeKey(key, code);
   const keyCode = getKeyCode(normalizedKey);
   const identifier = modifierControl | modifierShift | modifierAlt | keyCode;
@@ -7706,7 +7887,7 @@ const setActionsDom$1 = (state, actions, childUid) => {
   const {
     $PanelActions
   } = state;
-  const instance = get$1$1(childUid);
+  const instance = get$a(childUid);
   if (!instance) {
     throw new Error(`child instance not found`);
   }
@@ -8403,6 +8584,69 @@ const create$Menu = () => {
   // $ContextMenu.onblur = handleBlur
   return $Menu;
 };
+const addMenu = ($$Menus, change, uid) => {
+  const menu = change[1];
+  const dom = change[2];
+  const $Menu = create$Menu();
+  set$3($Menu, uid);
+  $Menu.onmouseover = handleMenuMouseOver;
+  $Menu.onclick = handleMenuClick;
+  const {
+    focusedIndex,
+    height,
+    level,
+    width,
+    x,
+    y
+  } = menu;
+  setBounds$a($Menu, x, y, width, height);
+  renderInto($Menu, dom);
+  $Menu.id = `Menu-${level}`;
+  append$1($Menu);
+  if (focusedIndex !== -1) {
+    const $Child = $Menu.children[focusedIndex];
+    // @ts-expect-error
+    $Child.focus();
+  }
+  $$Menus.push($Menu);
+};
+const closeMenus = ($$Menus, change) => {
+  const keepCount = change[1];
+  const $$ToDispose = $$Menus.slice(keepCount);
+  for (const $ToDispose of $$ToDispose) {
+    remove$1($ToDispose);
+  }
+  $$Menus.length = keepCount;
+};
+const updateMenu = ($$Menus, change) => {
+  const menu = change[1];
+  const newLength = change[2];
+  const dom = change[3];
+  const {
+    focusedIndex,
+    height,
+    level,
+    width,
+    x,
+    y
+  } = menu;
+  const $Menu = $$Menus[level];
+  setBounds$a($Menu, x, y, width, height);
+  renderInto($Menu, dom);
+  if (level === newLength - 1) {
+    if (focusedIndex === -1) {
+      $Menu.focus();
+    } else {
+      const $Child = $Menu.children[focusedIndex];
+      $Child.focus();
+    }
+  }
+};
+const menuHandlers = {
+  addMenu,
+  closeMenus,
+  updateMenu
+};
 
 // TODO recycle menus
 const setMenus = (state, changes, uid) => {
@@ -8414,72 +8658,9 @@ const setMenus = (state, changes, uid) => {
   } = state;
   for (const change of changes) {
     const type = change[0];
-    switch (type) {
-      case 'addMenu':
-        {
-          const menu = change[1];
-          const dom = change[2];
-          const $Menu = create$Menu();
-          set$3($Menu, uid);
-          $Menu.onmouseover = handleMenuMouseOver;
-          $Menu.onclick = handleMenuClick;
-          const {
-            focusedIndex,
-            height,
-            level,
-            width,
-            x,
-            y
-          } = menu;
-          setBounds$a($Menu, x, y, width, height);
-          renderInto($Menu, dom);
-          $Menu.id = `Menu-${level}`;
-          append$1($Menu);
-          if (focusedIndex !== -1) {
-            const $Child = $Menu.children[focusedIndex];
-            // @ts-expect-error
-            $Child.focus();
-          }
-          $$Menus.push($Menu);
-          break;
-        }
-      case 'closeMenus':
-        {
-          const keepCount = change[1];
-          const $$ToDispose = $$Menus.slice(keepCount);
-          for (const $ToDispose of $$ToDispose) {
-            remove$1($ToDispose);
-          }
-          $$Menus.length = keepCount;
-          break;
-        }
-      case 'updateMenu':
-        {
-          const menu = change[1];
-          const newLength = change[2];
-          const dom = change[3];
-          const {
-            focusedIndex,
-            height,
-            level,
-            width,
-            x,
-            y
-          } = menu;
-          const $Menu = $$Menus[level];
-          setBounds$a($Menu, x, y, width, height);
-          renderInto($Menu, dom);
-          if (level === newLength - 1) {
-            if (focusedIndex === -1) {
-              $Menu.focus();
-            } else {
-              const $Child = $Menu.children[focusedIndex];
-              $Child.focus();
-            }
-          }
-          break;
-        }
-      // No default
+    const handler = menuHandlers[type];
+    if (handler) {
+      handler($$Menus, change, uid);
     }
   }
 };
@@ -8711,111 +8892,64 @@ const ViewletWebView = {
   setPosition
 };
 
+const moduleLoaders = {
+  [ActivityBar]: () => ViewletActivityBar,
+  [Audio$1]: () => ViewletAudio,
+  [Clock]: () => ViewletClock,
+  [ColorPicker]: () => ViewletColorPicker,
+  [DebugConsole]: () => ViewletDebugConsole,
+  [DefineKeyBinding]: () => ViewletDefineKeyBinding,
+  [Dialog]: () => ViewletDialog,
+  [DiffEditor]: () => ViewletDiffEditor,
+  [E2eTest]: () => ViewletE2eTest,
+  [E2eTests]: () => ViewletE2eTests,
+  [EditorCodeGenerator]: () => ViewletEditorCodeGenerator,
+  [EditorCompletion]: () => ViewletEditorCompletion,
+  [EditorCompletionDetails]: () => ViewletEditorCompletionDetails,
+  [EditorError]: () => ViewletEditorError,
+  [EditorHover]: () => ViewletEditorHover,
+  [EditorImage]: () => ViewletEditorImage,
+  [EditorPlainText]: () => ViewletEditorPlainText,
+  [EditorSourceActions]: () => ViewletEditorSourceActions,
+  [EditorText]: () => ViewletEditorText,
+  [EditorTextError]: () => ViewletEditorTextError,
+  [EditorWidgetError]: () => ViewletEditorWidgetError,
+  [Empty]: () => ViewletEmpty,
+  [EmptyEditor]: () => ViewletEmptyEditor,
+  [Error$1]: () => ViewletError,
+  [FindWidget]: () => ViewletFindWidget,
+  [ImagePreview]: () => ImagePreview$1,
+  [Implementations]: () => ViewletImplementations,
+  [InlineDiffEditor]: () => ViewletInlineDiffEditor,
+  [KeyBindings]: () => ViewletKeyBindings,
+  [Layout]: () => ViewletLayout,
+  [Output]: () => ViewletOutput,
+  [Panel]: () => ViewletPanel,
+  [References]: () => ViewletReferences,
+  [RunAndDebug]: () => ViewletRunAndDebug,
+  [ScreenCapture]: () => ViewletScreenCapture,
+  [SideBar]: () => ViewletSideBar,
+  [SimpleBrowser]: () => ViewletSimpleBrowser,
+  [SourceControl]: () => ViewletSourceControl,
+  [StatusBar]: () => ViewletStatusBar,
+  [Storage]: () => ViewletStorage,
+  [Terminal]: () => Promise.resolve().then(function () { return ViewletTerminal; }),
+  [Terminal2]: () => Promise.resolve().then(function () { return ViewletTerminal2; }),
+  [Terminals]: () => ViewletTerminals,
+  [TitleBar]: () => ViewletTitleBar,
+  [TitleBarButtons]: () => ViewletTitleBarButtons,
+  [TitleBarIcon]: () => ViewletTitleBarIcon,
+  [TitleBarMenuBar]: () => ViewletTitleBarMenuBar,
+  [TitleBarTitle]: () => ViewletTitleBarTitle,
+  [Video]: () => ViewletVideo,
+  [WebView]: () => ViewletWebView
+};
 const load$1 = moduleId => {
-  switch (moduleId) {
-    case ActivityBar:
-      return ViewletActivityBar;
-    case Audio$1:
-      return ViewletAudio;
-    case Clock:
-      return ViewletClock;
-    case ColorPicker:
-      return ViewletColorPicker;
-    case DebugConsole:
-      return ViewletDebugConsole;
-    case DefineKeyBinding:
-      return ViewletDefineKeyBinding;
-    case Dialog:
-      return ViewletDialog;
-    case DiffEditor:
-      return ViewletDiffEditor;
-    case E2eTest:
-      return ViewletE2eTest;
-    case E2eTests:
-      return ViewletE2eTests;
-    case EditorCodeGenerator:
-      return ViewletEditorCodeGenerator;
-    case EditorCompletion:
-      return ViewletEditorCompletion;
-    case EditorCompletionDetails:
-      return ViewletEditorCompletionDetails;
-    case EditorError:
-      return ViewletEditorError;
-    case EditorHover:
-      return ViewletEditorHover;
-    case EditorImage:
-      return ViewletEditorImage;
-    case EditorPlainText:
-      return ViewletEditorPlainText;
-    case EditorSourceActions:
-      return ViewletEditorSourceActions;
-    case EditorText:
-      return ViewletEditorText;
-    case EditorTextError:
-      return ViewletEditorTextError;
-    case EditorWidgetError:
-      return ViewletEditorWidgetError;
-    case Empty:
-      return ViewletEmpty;
-    case EmptyEditor:
-      return ViewletEmptyEditor;
-    case Error$1:
-      return ViewletError;
-    case FindWidget:
-      return ViewletFindWidget;
-    case ImagePreview:
-      return ImagePreview$1;
-    case Implementations:
-      return ViewletImplementations;
-    case InlineDiffEditor:
-      return ViewletInlineDiffEditor;
-    case KeyBindings:
-      return ViewletKeyBindings;
-    case Layout:
-      return ViewletLayout;
-    case Output:
-      return ViewletOutput;
-    case Panel:
-      return ViewletPanel;
-    case References:
-      return ViewletReferences;
-    case RunAndDebug:
-      return ViewletRunAndDebug;
-    case ScreenCapture:
-      return ViewletScreenCapture;
-    case SideBar:
-      return ViewletSideBar;
-    case SimpleBrowser:
-      return ViewletSimpleBrowser;
-    case SourceControl:
-      return ViewletSourceControl;
-    case StatusBar:
-      return ViewletStatusBar;
-    case Storage:
-      return ViewletStorage;
-    case Terminal:
-      return Promise.resolve().then(function () { return ViewletTerminal; });
-    case Terminal2:
-      return Promise.resolve().then(function () { return ViewletTerminal2; });
-    case Terminals:
-      return ViewletTerminals;
-    case TitleBar:
-      return ViewletTitleBar;
-    case TitleBarButtons:
-      return ViewletTitleBarButtons;
-    case TitleBarIcon:
-      return ViewletTitleBarIcon;
-    case TitleBarMenuBar:
-      return ViewletTitleBarMenuBar;
-    case TitleBarTitle:
-      return ViewletTitleBarTitle;
-    case Video:
-      return ViewletVideo;
-    case WebView:
-      return ViewletWebView;
-    default:
-      throw new Error(`${moduleId} module not found in renderer process`);
+  const loadModule = moduleLoaders[moduleId];
+  if (!loadModule) {
+    throw new Error(`${moduleId} module not found in renderer process`);
   }
+  return loadModule();
 };
 
 const state$1 = {
@@ -8829,7 +8963,7 @@ const create$4 = (id, uid = id) => {
   if (!module) {
     throw new Error(`module not found: ${id}`);
   }
-  const existing = get$1$1(id);
+  const existing = get$a(id);
   if (existing?.state.$Viewlet.isConnected) {
     existing.state.$Viewlet.remove();
   }
@@ -8838,7 +8972,7 @@ const create$4 = (id, uid = id) => {
   if (module.attachEvents) {
     module.attachEvents(instanceState);
   }
-  set$1$1(uid, {
+  set$9(uid, {
     factory: module,
     state: instanceState
   });
@@ -8851,14 +8985,14 @@ const createFunctionalRoot = (id, uid = id, hasFunctionalEvents) => {
   if (!module) {
     throw new Error(`module not found: ${id}`);
   }
-  const existing = get$1$1(id);
+  const existing = get$a(id);
   if (existing?.state.$Viewlet.isConnected) {
     existing.state.$Viewlet.remove();
   }
   const instanceState = {
     $Viewlet: document.createElement('div')
   };
-  set$1$1(uid, {
+  set$9(uid, {
     factory: module,
     state: instanceState
   });
@@ -8881,7 +9015,7 @@ const loadModule = async id => {
 };
 const invoke = (viewletId, method, ...args) => {
   string(method);
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance?.factory) {
     if (viewletId && method !== 'setActionsDom') {
       warn$1(`cannot execute ${method} viewlet instance ${viewletId} not found`);
@@ -8899,7 +9033,7 @@ const focus$1 = viewletId => {
     // eslint-disable-next-line no-console
     console.trace(`focus ${viewletId}`);
   }
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (instance.factory?.setFocused) {
     instance.factory.setFocused(instance.state, true);
   } else if (instance?.factory?.focus) {
@@ -8915,7 +9049,7 @@ const focusElementByName = (viewletId, name) => {
     // eslint-disable-next-line no-console
     console.trace(`focusByName ${viewletId} ${name}`);
   }
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -8930,7 +9064,7 @@ const focusElementByName = (viewletId, name) => {
 };
 const setElementProperty = (viewletId, name, key, value) => {
   const selector = `[name="${name}"]`;
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -8959,7 +9093,7 @@ const setCheckBoxValue = (viewletId, name, value) => {
 };
 const setSelectionByName = (viewletId, name, start, end) => {
   const selector = `[name="${name}"]`;
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -8974,7 +9108,7 @@ const setSelectionByName = (viewletId, name, start, end) => {
   $Element.selectionEnd = end;
 };
 const setUid = (viewletId, uid) => {
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -8984,7 +9118,7 @@ const setUid = (viewletId, uid) => {
   set$3($Viewlet, uid);
 };
 const focusSelector = (viewletId, selector) => {
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -9002,7 +9136,7 @@ const focusSelector = (viewletId, selector) => {
  * @deprecated
  */
 const refresh$1 = (viewletId, viewletContext) => {
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (instance) {
     instance.factory.refresh(instance.state, viewletContext);
   } else {
@@ -9021,10 +9155,10 @@ const createPlaceholder = (viewletId, parentId, top, left, width, height) => {
   if (isSpecial(viewletId)) {
     $PlaceHolder.id = viewletId;
   }
-  const parentInstance = get$1$1(parentId);
+  const parentInstance = get$a(parentId);
   const $Parent = parentInstance.state.$Viewlet;
   $Parent.append($PlaceHolder);
-  set$1$1(viewletId, {
+  set$9(viewletId, {
     state: {
       $Viewlet: $PlaceHolder
     }
@@ -9034,7 +9168,7 @@ const setDragData = (viewletId, dragData) => {
   set$2(viewletId, dragData);
 };
 const setDom = (viewletId, dom) => {
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -9047,7 +9181,7 @@ const setDom = (viewletId, dom) => {
   renderInto($Viewlet, dom, Events);
 };
 const setDom2 = (viewletId, dom) => {
-  const instance = get$1$1(viewletId);
+  const instance = get$a(viewletId);
   if (!instance) {
     return;
   }
@@ -9069,7 +9203,7 @@ const setDom2 = (viewletId, dom) => {
     // @ts-ignore
     set$3($NewViewlet, uid);
   }
-  set$1$1(viewletId, {
+  set$9(viewletId, {
     ...instance,
     state: {
       ...instance.state,
@@ -9078,7 +9212,7 @@ const setDom2 = (viewletId, dom) => {
   });
 };
 const setPatches = (uid, patches) => {
-  const instance = get$1$1(uid);
+  const instance = get$a(uid);
   if (!instance) {
     return;
   }
@@ -9137,167 +9271,12 @@ const attachWindowEvents = () => {
 
 // TODO this code is bad
 const sendMultiple = commands => {
-  for (const command of commands) {
-    const [_, viewletId, method, ...args] = command;
-    switch (_) {
-      case 'Css.addCssStyleSheet':
-      case 'Viewlet.addCss':
-      case 'Viewlet.setCss':
-        // @ts-ignore
-        addCssStyleSheet(viewletId, method, ...args);
-        break;
-      case 'Viewlet.addKeyBindings':
-        addKeyBindings(viewletId, method);
-        break;
-      case 'Viewlet.append':
-        {
-          // @ts-expect-error
-          append(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.appendToBody':
-        {
-          // @ts-expect-error
-          appendToBody(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.appendViewlet':
-        {
-          // @ts-expect-error
-          appendViewlet(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.ariaAnnounce':
-        {
-          ariaAnnounce(viewletId);
-          break;
-        }
-      case 'Viewlet.attachWindowEvents':
-        // @ts-ignore
-        attachWindowEvents(viewletId, method, ...args);
-        break;
-      case 'Viewlet.create':
-        {
-          create$4(viewletId, method);
-          break;
-        }
-      case 'Viewlet.createFunctionalRoot':
-        {
-          // @ts-ignore
-          createFunctionalRoot(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.createPlaceholder':
-        {
-          // @ts-expect-error
-          createPlaceholder(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.dispose':
-        {
-          dispose$3(viewletId);
-          break;
-        }
-      case 'Viewlet.focus':
-        {
-          focus$1(viewletId);
-          break;
-        }
-      case 'Viewlet.focusElementByName':
-        // @ts-ignore
-        focusElementByName(viewletId, method, ...args);
-        break;
-      case 'Viewlet.focusSelector':
-        // @ts-ignore
-        focusSelector(viewletId, method, ...args);
-        break;
-      case 'Viewlet.focusSelector':
-        // @ts-ignore
-        focusSelector(viewletId, method, ...args);
-        break;
-      case 'Viewlet.handleError':
-        {
-          // @ts-expect-error
-          handleError$1(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.move':
-        // @ts-ignore
-        move(viewletId, method, ...args);
-        break;
-      case 'Viewlet.registerEventListeners':
-        // @ts-ignore
-        registerEventListeners(viewletId, method, ...args);
-        break;
-      case 'Viewlet.removeKeyBindings':
-        removeKeyBindings(viewletId);
-        break;
-      case 'Viewlet.replaceChildren':
-        // @ts-ignore
-        replaceChildren(viewletId, method, ...args);
-        break;
-      case 'Viewlet.send':
-        invoke(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setBounds':
-        {
-          // @ts-expect-error
-          setBounds$1(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.setCheckBoxValue':
-        // @ts-ignore
-        setCheckBoxValue(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setDom':
-        // @ts-expect-error
-        setDom(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setDom2':
-        // @ts-ignore
-        setDom2(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setDragData':
-        // @ts-ignore
-        setDragData(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setInputValues':
-        // @ts-ignore
-        setInputValues(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setPatches':
-        {
-          // @ts-ignore
-          setPatches(viewletId, method, ...args);
-          break;
-        }
-      case 'Viewlet.setProperty':
-        // @ts-ignore
-        setProperty(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setSelectionByName':
-        // @ts-ignore
-        setSelectionByName(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setUid':
-        // @ts-ignore
-        setUid(viewletId, method, ...args);
-        break;
-      case 'Viewlet.setValueByName':
-        // @ts-ignore
-        setValueByName(viewletId, method, ...args);
-        break;
-      default:
-        {
-          invoke(viewletId, method, ...args);
-        }
-    }
-  }
+  executeCommands(commands);
 };
 const dispose$3 = id => {
   try {
     number(id);
-    const instance = get$1$1(id);
+    const instance = get$a(id);
     if (!instance) {
       warn$1(`viewlet instance ${id} not found and cannot be disposed`);
       return;
@@ -9308,14 +9287,14 @@ const dispose$3 = id => {
     if (instance.state.$Viewlet?.isConnected) {
       instance.state.$Viewlet.remove();
     }
-    set$1$1(id, undefined);
+    set$9(id, undefined);
   } catch {
     throw new Error(`Failed to dispose ${id}`);
   }
 };
 const handleError$1 = (id, parentId, message) => {
   info(`[viewlet-error] ${id}: ${message}`);
-  const instance = get$1$1(id);
+  const instance = get$a(id);
   if (instance?.state.$Viewlet.isConnected) {
     instance.state.$Viewlet.remove();
   }
@@ -9327,7 +9306,7 @@ const handleError$1 = (id, parentId, message) => {
     instance.state.$Viewlet.textContent = `${message}`;
   }
   // TODO error should bubble up to until highest possible component
-  const parentInstance = get$1$1(parentId);
+  const parentInstance = get$a(parentId);
   if (parentInstance?.factory?.handleError) {
     parentInstance.factory.handleError(instance.state, message);
   }
@@ -9341,9 +9320,9 @@ const appendViewlet = (parentId, childId, focus) => {
     // TODO
     return;
   }
-  const parentInstanceState = get$1$1(parentId); // TODO must ensure that parent is already created
+  const parentInstanceState = get$a(parentId); // TODO must ensure that parent is already created
   const parentModule = parentInstanceState.factory;
-  const childInstance = get$1$1(childId);
+  const childInstance = get$a(childId);
   if (!childInstance) {
     throw new Error(`child instance ${childId} must be defined to be appended to parent ${parentId}`);
   }
@@ -9359,49 +9338,70 @@ const ariaAnnounce = async message => {
   const AriaAlert$1 = await Promise.resolve().then(function () { return AriaAlert; });
   AriaAlert$1.alert(message);
 };
+const prependChild = ($Parent, $Child) => {
+  $Parent.prepend($Child);
+  return true;
+};
+const appendAfterPreviousReference = (referenceNodes, childIndex, $Child) => {
+  for (let i = childIndex - 1; i >= 0; i--) {
+    const beforeId = referenceNodes[i];
+    const beforeInstance = get$a(beforeId);
+    if (beforeInstance) {
+      const $ReferenceNode = beforeInstance.state.$Viewlet;
+      $ReferenceNode.after($Child);
+      return true;
+    }
+  }
+  return false;
+};
+const appendBeforeNextReference = (referenceNodes, childIndex, $Child) => {
+  for (let i = childIndex + 1; i < referenceNodes.length; i++) {
+    const afterId = referenceNodes[i];
+    const afterInstance = get$a(afterId);
+    if (afterInstance) {
+      const $ReferenceNode = afterInstance.state.$Viewlet;
+      $ReferenceNode.before($Child);
+      return true;
+    }
+  }
+  return false;
+};
+const appendWithReferenceNodes = ($Parent, $Child, childId, referenceNodes) => {
+  if (childId === referenceNodes[0]) {
+    return prependChild($Parent, $Child);
+  }
+  const childIndex = referenceNodes.indexOf(childId);
+  if (childIndex === -1) {
+    $Parent.append($Child);
+    return false;
+  }
+  if (appendAfterPreviousReference(referenceNodes, childIndex, $Child)) {
+    return true;
+  }
+  if (appendBeforeNextReference(referenceNodes, childIndex, $Child)) {
+    return true;
+  }
+  $Parent.append($Child);
+  return false;
+};
 const append = (parentId, childId, referenceNodes) => {
   number(parentId);
   number(childId);
-  const parentInstance = get$1$1(parentId);
+  const parentInstance = get$a(parentId);
   if (!parentInstance) {
     throw new Error(`cannot append child: instance ${parentId} not found`);
   }
   const $Parent = parentInstance.state.$Viewlet;
-  const childInstance = get$1$1(childId);
+  const childInstance = get$a(childId);
   if (!childInstance) {
     throw new Error(`cannot append child: child instance not found ${childId}`);
   }
   const $Child = childInstance.state.$Viewlet;
   if (referenceNodes) {
     // TODO this might be too inefficient
-    if (childId === referenceNodes[0]) {
-      $Parent.prepend($Child);
+    if (appendWithReferenceNodes($Parent, $Child, childId, referenceNodes)) {
       return;
     }
-    for (let i = 0; i < referenceNodes.length; i++) {
-      const id = referenceNodes[i];
-      if (id === childId) {
-        for (let j = i - 1; j >= 0; j--) {
-          const beforeId = referenceNodes[j];
-          const beforeInstance = get$1$1(beforeId);
-          if (beforeInstance) {
-            const $ReferenceNode = beforeInstance.state.$Viewlet;
-            $ReferenceNode.after($Child);
-            return;
-          }
-        }
-        for (let j = i + 1; j < referenceNodes.length; j++) {
-          const afterId = referenceNodes[j];
-          const afterInstance = get$1$1(afterId);
-          if (afterInstance) {
-            const $ReferenceNode = afterInstance.state.$Viewlet;
-            $ReferenceNode.before($Child);
-            return;
-          }
-        }
-      }
-    }
-    $Parent.append($Child);
   } else {
     $Parent.append($Child);
   }
@@ -9410,11 +9410,11 @@ const append = (parentId, childId, referenceNodes) => {
   }
 };
 const replaceChildren = (parentId, childIds) => {
-  const parentInstance = get$1$1(parentId);
+  const parentInstance = get$a(parentId);
   const $Parent = parentInstance.state.$Viewlet;
   const $Fragment = document.createDocumentFragment();
   for (const childId of childIds) {
-    const childInstance = get$1$1(childId);
+    const childInstance = get$a(childId);
     const $Child = childInstance.state.$Viewlet;
     $Fragment.append($Child);
   }
@@ -9422,72 +9422,10 @@ const replaceChildren = (parentId, childIds) => {
 };
 const appendToBody = childId => {
   const $Parent = document.body;
-  const childInstance = get$1$1(childId);
+  const childInstance = get$a(childId);
   const $Child = childInstance.state.$Viewlet;
   $Parent.append($Child);
 };
-const getFn = command => {
-  switch (command) {
-    case 'Css.addCssStyleSheet':
-    case 'Viewlet.addCss':
-    case 'Viewlet.setCss':
-      return addCssStyleSheet;
-    case 'Viewlet.addKeyBindings':
-      return addKeyBindings;
-    case 'Viewlet.append':
-      return append;
-    case 'Viewlet.appendToBody':
-      return appendToBody;
-    case 'Viewlet.appendViewlet':
-      return appendViewlet;
-    case 'Viewlet.ariaAnnounce':
-      return ariaAnnounce;
-    case 'Viewlet.attachWindowEvents':
-      return attachWindowEvents;
-    case 'Viewlet.create':
-      return create$4;
-    case 'Viewlet.createFunctionalRoot':
-      return createFunctionalRoot;
-    case 'Viewlet.createPlaceholder':
-      return createPlaceholder;
-    case 'Viewlet.dispose':
-      return dispose$3;
-    case 'Viewlet.focus':
-      return focus$1;
-    case 'Viewlet.focusElementByName':
-      return focusElementByName;
-    case 'Viewlet.focusSelector':
-      return focusSelector;
-    case 'Viewlet.registerEventListeners':
-      return registerEventListeners;
-    case 'Viewlet.replaceChildren':
-      return replaceChildren;
-    case 'Viewlet.send':
-      return invoke;
-    case 'Viewlet.setBounds':
-      return setBounds$1;
-    case 'Viewlet.setCheckBoxValue':
-      return setCheckBoxValue;
-    case 'Viewlet.setDom':
-      return setDom;
-    case 'Viewlet.setDom2':
-      return setDom2;
-    case 'Viewlet.setDragData':
-      return setDragData;
-    case 'Viewlet.setInputValues':
-      return setInputValues;
-    case 'Viewlet.setPatches':
-      return setPatches;
-    case 'Viewlet.setProperty':
-      return setProperty;
-    case 'Viewlet.setValueByName':
-      return setValueByName;
-    case 'Viewlet.show':
-      return show;
-    default:
-      throw new Error(`unknown command ${command}`);
-  }
-};
 const executeCommands = commands => {
   for (const [command, ...args] of commands) {
     const fn = getFn(command);
@@ -9496,7 +9434,7 @@ const executeCommands = commands => {
   }
 };
 const show = id => {
-  const instance = get$1$1(id);
+  const instance = get$a(id);
   const $Viewlet = instance.state.$Viewlet;
   const $Workbench = document.getElementById('Workbench');
   // @ts-expect-error
@@ -9506,7 +9444,7 @@ const show = id => {
   }
 };
 const setBounds$1 = (id, left, top, width, height) => {
-  const instance = get$1$1(id);
+  const instance = get$a(id);
   if (!instance) {
     return;
   }
@@ -9514,7 +9452,7 @@ const setBounds$1 = (id, left, top, width, height) => {
   setBounds$a($Viewlet, left, top, width, height);
 };
 const setProperty = (id, selector, property, value) => {
-  const instance = get$1$1(id);
+  const instance = get$a(id);
   if (!instance) {
     return;
   }
@@ -9525,6 +9463,49 @@ const setProperty = (id, selector, property, value) => {
   }
   $Element[property] = value;
 };
+const commandHandlers = {
+  'Css.addCssStyleSheet': addCssStyleSheet,
+  'Viewlet.addCss': addCssStyleSheet,
+  'Viewlet.addKeyBindings': addKeyBindings,
+  'Viewlet.append': append,
+  'Viewlet.appendToBody': appendToBody,
+  'Viewlet.appendViewlet': appendViewlet,
+  'Viewlet.ariaAnnounce': ariaAnnounce,
+  'Viewlet.attachWindowEvents': attachWindowEvents,
+  'Viewlet.create': create$4,
+  'Viewlet.createFunctionalRoot': createFunctionalRoot,
+  'Viewlet.createPlaceholder': createPlaceholder,
+  'Viewlet.dispose': dispose$3,
+  'Viewlet.focus': focus$1,
+  'Viewlet.focusElementByName': focusElementByName,
+  'Viewlet.focusSelector': focusSelector,
+  'Viewlet.handleError': handleError$1,
+  'Viewlet.move': move,
+  'Viewlet.registerEventListeners': registerEventListeners,
+  'Viewlet.removeKeyBindings': removeKeyBindings,
+  'Viewlet.replaceChildren': replaceChildren,
+  'Viewlet.send': invoke,
+  'Viewlet.setBounds': setBounds$1,
+  'Viewlet.setCheckBoxValue': setCheckBoxValue,
+  'Viewlet.setCss': addCssStyleSheet,
+  'Viewlet.setDom': setDom,
+  'Viewlet.setDom2': setDom2,
+  'Viewlet.setDragData': setDragData,
+  'Viewlet.setInputValues': setInputValues,
+  'Viewlet.setPatches': setPatches,
+  'Viewlet.setProperty': setProperty,
+  'Viewlet.setSelectionByName': setSelectionByName,
+  'Viewlet.setUid': setUid,
+  'Viewlet.setValueByName': setValueByName,
+  'Viewlet.show': show
+};
+const getFn = command => {
+  const fn = commandHandlers[command];
+  if (!fn) {
+    throw new Error(`unknown command ${command}`);
+  }
+  return fn;
+};
 
 const LocalStorage = 1;
 const SessionStorage = 2;
@@ -9627,7 +9608,7 @@ const handleMessagePort = async port => {
 };
 
 const set = ($Iframe, permissionPolicy) => {
-  if (permissionPolicy === undefined) {
+  if (!permissionPolicy) {
     return;
   }
   $Iframe.allow = permissionPolicy;
@@ -9748,6 +9729,7 @@ const commandMap = {
   'OffscreenCanvas.create': create$w,
   'OffscreenCanvas.create2': create2,
   'Open.openUrl': openUrl,
+  'Open.redirectToUrl': redirectToUrl,
   'Performance.getMemory': getMemory,
   'Performance.measureUserAgentSpecificMemory': measureUserAgentSpecificMemory,
   'PointerCapture.mock': mock,
@@ -9971,15 +9953,9 @@ const isNormalStackLine = line => {
 };
 const isApplicationUsefulLine = (line, index) => {
   if (index === 0) {
-    if (RE_ASSERT.test(line)) {
-      return false;
-    }
-    return true;
-  }
-  if (RE_RESTORE_JSON_RPC_ERROR.test(line) || RE_JSON_RPC_INVOKE.test(line) || RE_UNWRAP_JSON_RPC_RESULT.test(line) || RE_CONSTRUCT_ERROR.test(line) || RE_HANDLE_JSON_RPC_MESSAGE.test(line)) {
-    return false;
+    return !RE_ASSERT.test(line);
   }
-  return true;
+  return !(RE_RESTORE_JSON_RPC_ERROR.test(line) || RE_JSON_RPC_INVOKE.test(line) || RE_UNWRAP_JSON_RPC_RESULT.test(line) || RE_CONSTRUCT_ERROR.test(line) || RE_HANDLE_JSON_RPC_MESSAGE.test(line));
 };
 const cleanLine = line => {
   if (line.startsWith('    at async Module.')) {
@@ -10034,10 +10010,7 @@ const cleanStack = stack => {
 };
 
 const isActualSourceFile = path => {
-  if (path === '<anonymous>' || path === 'debugger eval code' || path.startsWith('"') || path.startsWith(`'`) || path.startsWith(')') || path.startsWith('file://')) {
-    return false;
-  }
-  return true;
+  return !(path === '<anonymous>' || path === 'debugger eval code' || path.startsWith('"') || path.startsWith(`'`) || path.startsWith(')') || path.startsWith('file://'));
 };
 
 const getIsFirefox = () => {
@@ -10421,6 +10394,10 @@ const reduceWrite = (state, action) => {
 };
 const reduce = (state, action) => {
   switch (action.type) {
+    case 'focus':
+      {
+        return;
+      }
     case 'write':
       {
         return;
@@ -10535,6 +10512,17 @@ const setMessage = ($Old, $New, message) => {
   $New.removeAttribute(AriaHidden);
   $New.textContent = message;
 };
+const getElements = () => {
+  const $AriaAlert1 = getAriaAlert1();
+  const $AriaAlert2 = getAriaAlert2();
+  if (!$AriaAlert1 || !$AriaAlert2) {
+    throw new Error('aria alert elements not found');
+  }
+  return {
+    $AriaAlert1,
+    $AriaAlert2
+  };
+};
 const alert$1 = message => {
   if (!message) {
     return;
@@ -10549,9 +10537,10 @@ const alert$1 = message => {
     document.body.append($AriaMessages);
     setElements($AriaMessages, $AriaAlert1, $AriaAlert2);
   }
-  const $AriaAlert1 = getAriaAlert1();
-  const $AriaAlert2 = getAriaAlert2();
-  // @ts-expect-error
+  const {
+    $AriaAlert1,
+    $AriaAlert2
+  } = getElements();
   if ($AriaAlert1.textContent === message) {
     setMessage($AriaAlert1, $AriaAlert2, message);
   } else {