@lvce-editor/renderer-process 5.0.0 → 5.0.1

package/dist/rendererProcessMain.js

@@ -493,10 +493,10 @@ const getPlatform = () => {
 };
 const platform = getPlatform();
 
-const Two$1 = '2.0';
+const Two = '2.0';
 const create$4$1 = (method, params) => {
   return {
-    jsonrpc: Two$1,
+    jsonrpc: Two,
     method,
     params
   };
@@ -598,7 +598,7 @@ const create$2$1 = (method, params) => {
     promise
   } = registerPromise();
   const message = {
-    jsonrpc: Two$1,
+    jsonrpc: Two,
     method,
     params,
     id
@@ -744,7 +744,7 @@ const unwrapJsonRpcResult = responseMessage => {
 };
 const create$1$1 = (message, error) => {
   return {
-    jsonrpc: Two$1,
+    jsonrpc: Two,
     id: message.id,
     error
   };
@@ -777,7 +777,7 @@ const getErrorResponse = (message, error, ipc, preparePrettyError, logError) =>
 };
 const create$M = (message, result) => {
   return {
-    jsonrpc: Two$1,
+    jsonrpc: Two,
     id: message.id,
     result: result ?? null
   };
@@ -819,7 +819,17 @@ const send$1 = (transport, method, ...params) => {
   const message = create$4$1(method, params);
   transport.send(message);
 };
-const invokeAndTransfer = async (ipc, handle, method, ...params) => {
+const invoke$2 = async (ipc, method, ...params) => {
+  const {
+    message,
+    promise
+  } = create$2$1(method, params);
+  ipc.send(message);
+  const responseMessage = await promise;
+  const result = unwrapJsonRpcResult(responseMessage);
+  return result;
+};
+const invokeAndTransfer$1 = async (ipc, handle, method, ...params) => {
   const {
     message,
     promise
@@ -981,13 +991,39 @@ const hydrate$1 = async () => {
   // @ts-expect-error
   state$9.ipc = ipc;
 };
+
+// TODO needed?
+const dispose$j = () => {
+  // @ts-expect-error
+  if (state$9.rendererWorker) {
+    // @ts-expect-error
+    state$9.rendererWorker.terminate();
+  }
+};
 const send = (method, ...params) => {
   send$1(state$9.ipc, method, ...params);
 };
+const invoke$1 = (method, ...params) => {
+  return invoke$2(state$9.ipc, method, ...params);
+};
 const sendAndTransfer = (message, transfer) => {
   // @ts-expect-error
   state$9.ipc.sendAndTransfer(message, transfer);
 };
+const invokeAndTransfer = (method, transfer, ...params) => {
+  return invokeAndTransfer$1(state$9.ipc, transfer, method, ...params);
+};
+
+const RendererWorker = {
+  __proto__: null,
+  dispose: dispose$j,
+  hydrate: hydrate$1,
+  invoke: invoke$1,
+  invokeAndTransfer,
+  send,
+  sendAndTransfer,
+  state: state$9
+};
 
 let AssertionError$1 = class AssertionError extends Error {
   constructor(message) {
@@ -1739,1394 +1775,1439 @@ const handleUnhandledError = (message, filename, lineno, colno, error) => {
   handleError$8(error, Boolean(error), '[renderer-process] Unhandled Error: ');
 };
 
-const main = async () => {
-  onerror = handleUnhandledError;
-  onunhandledrejection = handleUnhandledRejection;
-  if ('SecurityPolicyViolationEvent' in self) {
-    self.addEventListener('securitypolicyviolation', handleContentSecurityPolicyViolation);
-  }
-  setLoad(load$1);
-  if (platform === Web) {
-    // disable prompt to download app as pwa
-    // @ts-expect-error
-    window.onbeforeinstallprompt = handleBeforeInstallPrompt;
-  }
-  // TODO this is discovered very late
-  await hydrate$1();
-};
-
-main();
-
-const play = async src => {
-  const audio = new Audio(src);
-  await audio.play();
-};
-
-const name$y = 'Audio';
-const Commands$z = {
-  play: play
-};
-
-const Audio_ipc = {
-  __proto__: null,
-  Commands: Commands$z,
-  name: name$y
-};
-
-const readText = async () => {
-  return navigator.clipboard.readText();
-};
-const writeText = async text => {
-  string(text);
-  await navigator.clipboard.writeText(text);
-};
-const writeImage = async blob => {
-  await navigator.clipboard.write([new ClipboardItem({
-    [blob.type]: blob
-  })]);
-};
-const execCopy = async () => {
-  // @ts-expect-error
-  const text = getSelection().toString();
-  await writeText(text);
-};
-
-const name$x = 'ClipBoard';
-const Commands$y = {
-  execCopy: execCopy,
-  readText: readText,
-  writeImage: writeImage,
-  writeText: writeText
-};
-
-const ClipBoard_ipc = {
-  __proto__: null,
-  Commands: Commands$y,
-  name: name$x
-};
-
-const prompt$1 = message => {
-  return confirm(message);
-};
-
-const name$w = 'ConfirmPrompt';
-const Commands$x = {
-  prompt: prompt$1
-};
-
-const ConfirmPrompt_ipc = {
-  __proto__: null,
-  Commands: Commands$x,
-  name: name$w
-};
-
-const state$8 = {
-  styleSheets: Object.create(null)
-};
-const set$4 = (id, sheet) => {
-  state$8.styleSheets[id] = sheet;
-};
-const get$5 = id => {
-  return state$8.styleSheets[id];
-};
-
-const addCssStyleSheet = async (id, text) => {
-  const existing = get$5(id);
-  if (existing) {
-    await existing.replace(text);
-    return;
-  }
-  const sheet = new CSSStyleSheet({});
-  set$4(id, sheet);
-  await sheet.replace(text);
-  document.adoptedStyleSheets.push(sheet);
-};
-
-const name$v = 'Css';
-const Commands$w = {
-  addCssStyleSheet: addCssStyleSheet
-};
-
-const Css_ipc = {
-  __proto__: null,
-  Commands: Commands$w,
-  name: name$v
+// src/parts/ComponentUid/ComponentUid.ts
+var uidSymbol = Symbol("uid");
+var setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
 };
-
-const modules = ['ActivityBar', 'Ajax', 'Allocator', 'Callback', 'Command', 'Context', 'ContextMenu', 'Delay', 'Developer', 'DomPool', 'Editor', 'Exec', 'ExtensionHost', 'FileSystem', 'KeyBindings', 'Layout', 'Main', 'Notification', 'Panel', 'Parts', 'QuickPick', 'Renderer', 'RendererWorker', 'Search', 'SharedProcess', 'SideBar', 'StatusBar', 'TitleBar', 'Viewlet', 'ViewletController', 'ViewService', 'Vscode', 'Window', 'Workbench', 'Worker', 'Workspace'];
-
-// TODO send to renderer worker -> renderer worker has all state
-const showState = async () => {
-  const state = Object.create(null);
-  for (const module of modules) {
-    let imported;
-    try {
-      imported = await import(`../${module}/${module}.js`);
-    } catch {}
-    if (imported?.state) {
-      state[module] = imported.state;
+var getUidTarget = $Element => {
+  while ($Element) {
+    if ($Element[uidSymbol]) {
+      return $Element;
     }
+    $Element = $Element.parentNode;
   }
-  info(state);
+  return void 0;
 };
-
-const name$u = 'Developer';
-const Commands$v = {
-  showState: showState
+var getComponentUid = $Element => {
+  const $Target = getUidTarget($Element);
+  return $Target[uidSymbol];
 };
-
-const Developer_ipc = {
-  __proto__: null,
-  Commands: Commands$v,
-  name: name$u
+var getComponentUidFromEvent = event => {
+  const {
+    target,
+    currentTarget
+  } = event;
+  return getComponentUid(currentTarget || target);
 };
 
-const downloadFile = (fileName, url) => {
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = fileName;
-  a.click();
+// src/parts/IpcState/IpcState.ts
+var state$8 = {
+  ipc: void 0
 };
-
-const name$t = 'Download';
-const Commands$u = {
-  downloadFile: downloadFile
+var getIpc = () => {
+  return state$8.ipc;
 };
-
-const Download_ipc = {
-  __proto__: null,
-  Commands: Commands$u,
-  name: name$t
+var setIpc = value => {
+  state$8.ipc = value;
 };
 
-// based on https://github.com/microsoft/vscode/blob/5f87632829dc3ac80203e2377727935184399431/src/vs/base/browser/ui/aria/aria.ts (License MIT)
-
-const state$7 = {
-  $AriaAlert1: undefined,
-  $AriaAlert2: undefined,
-  $AriaMessages: undefined
-};
-const getAriaAlert1 = () => {
-  return state$7.$AriaAlert1;
-};
-const getAriaAlert2 = () => {
-  return state$7.$AriaAlert2;
-};
-const setElements = ($AriaMessages, $AriaAlert1, $AriaAlert2) => {
-  state$7.$AriaMessages = $AriaMessages;
-  state$7.$AriaAlert1 = $AriaAlert1;
-  state$7.$AriaAlert2 = $AriaAlert2;
-};
-const hasElements = () => {
-  return state$7.$AriaMessages;
+// src/parts/ClearNode/ClearNode.ts
+var clearNode = $Node => {
+  $Node.textContent = "";
 };
 
-const True = 'true';
-const False = 'false';
-
-const Alert = 'alert';
-const Application = 'application';
-const Code = 'code';
-const Complementary = 'complementary';
-const ContentInfo = 'contentinfo';
-const Group = 'group';
-const List$1 = 'list';
-const ListBox = 'listbox';
-const Log = 'log';
-const Main$1 = 'main';
-const Menu = 'menu';
-const None$2 = 'none';
-const Status = 'status';
-const TabList = 'tablist';
-const TextBox = 'textbox';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const ComboBox = 'combobox';
-
-const AriaOwns = 'aria-owns';
-const AriaLabelledBy = 'aria-labelledby';
-const AriaDescribedBy = 'aria-describedby';
-const AriaActiveDescendant = 'aria-activedescendant';
-const AriaSelected = 'aria-selected';
-const AriaControls = 'aria-controls';
-const AriaHidden = 'aria-hidden';
-
-// based on https://github.com/microsoft/vscode/blob/5f87632829dc3ac80203e2377727935184399431/src/vs/base/browser/ui/aria/aria.ts (License MIT)
-const create$AriaAlert = () => {
-  const $AriaAlert = document.createElement('div');
-  $AriaAlert.className = 'AriaAlert';
-  $AriaAlert.role = Alert;
-  $AriaAlert.ariaAtomic = True;
-  return $AriaAlert;
-};
-const setMessage$3 = ($Old, $New, message) => {
-  $Old.textContent = String(Math.random());
-  $Old.ariaHidden = True;
-  $New.removeAttribute(AriaHidden);
-  $New.textContent = message;
-};
-const alert$1 = message => {
-  if (!message) {
-    return;
-  }
-  if (!hasElements()) {
-    const $AriaAlert1 = create$AriaAlert();
-    const $AriaAlert2 = create$AriaAlert();
-    // TODO find better name, for example AriaMessages, AriaOutlet, AriaContainer, ScreenReaderMessages
-    const $AriaMessages = document.createElement('div');
-    $AriaMessages.className = 'AriaContainer';
-    $AriaMessages.append($AriaAlert1, $AriaAlert2);
-    document.body.append($AriaMessages);
-    setElements($AriaMessages, $AriaAlert1, $AriaAlert2);
-  }
-  const $AriaAlert1 = getAriaAlert1();
-  const $AriaAlert2 = getAriaAlert2();
-  // @ts-expect-error
-  if ($AriaAlert1.textContent === message) {
-    setMessage$3($AriaAlert1, $AriaAlert2, message);
-  } else {
-    setMessage$3($AriaAlert2, $AriaAlert1, message);
+// src/parts/ElementTags/ElementTags.ts
+var Audio$2 = "audio";
+var Button = "button";
+var Col = "col";
+var ColGroup = "colgroup";
+var Del = "del";
+var Div = "div";
+var H1 = "h1";
+var H2 = "h2";
+var H3 = "h3";
+var H4 = "h4";
+var H5 = "h5";
+var H6 = "h6";
+var I = "i";
+var Img = "img";
+var Input$1 = "input";
+var Ins = "ins";
+var Kbd = "kbd";
+var Span = "span";
+var Table = "table";
+var TBody = "tbody";
+var Td = "td";
+var Th = "th";
+var THead = "thead";
+var Tr = "tr";
+var Article = "article";
+var Aside = "aside";
+var Footer = "footer";
+var Header = "header";
+var Nav = "nav";
+var Section = "section";
+var Search$1 = "search";
+var Dd = "dd";
+var Dl = "dl";
+var Figcaption = "figcaption";
+var Figure = "figure";
+var Hr = "hr";
+var Li = "li";
+var Ol = "ol";
+var P = "p";
+var Pre = "pre";
+var A = "a";
+var Br = "br";
+var Cite = "cite";
+var Data = "data";
+var Time$1 = "time";
+var Tfoot = "tfoot";
+var Ul = "ul";
+var Video$1 = "video";
+var TextArea = "textarea";
+var Select = "select";
+var Option = "option";
+
+// src/parts/VirtualDomElements/VirtualDomElements.ts
+var Audio2 = 0;
+var Button2 = 1;
+var Col2 = 2;
+var ColGroup2 = 3;
+var Div2 = 4;
+var H12 = 5;
+var Input2 = 6;
+var Kbd2 = 7;
+var Span2 = 8;
+var Table2 = 9;
+var TBody2 = 10;
+var Td2 = 11;
+var Text$2 = 12;
+var Th2 = 13;
+var THead2 = 14;
+var Tr2 = 15;
+var I2 = 16;
+var Img2 = 17;
+var Ins2 = 20;
+var Del2 = 21;
+var H22 = 22;
+var H32 = 23;
+var H42 = 24;
+var H52 = 25;
+var H62 = 26;
+var Article2 = 27;
+var Aside2 = 28;
+var Footer2 = 29;
+var Header2 = 30;
+var Nav2 = 40;
+var Section2 = 41;
+var Search2 = 42;
+var Dd2 = 43;
+var Dl2 = 44;
+var Figcaption2 = 45;
+var Figure2 = 46;
+var Hr2 = 47;
+var Li2 = 48;
+var Ol2 = 49;
+var P2 = 50;
+var Pre2 = 51;
+var A2 = 53;
+var Br2 = 55;
+var Cite2 = 56;
+var Data2 = 57;
+var Time2 = 58;
+var Tfoot2 = 59;
+var Ul2 = 60;
+var Video2 = 61;
+var TextArea2 = 62;
+var Select2 = 63;
+var Option2 = 64;
+
+// src/parts/ElementTagMap/ElementTagMap.ts
+var getElementTag = type => {
+  switch (type) {
+    case Audio2:
+      return Audio$2;
+    case H12:
+      return H1;
+    case H22:
+      return H2;
+    case H32:
+      return H3;
+    case H42:
+      return H4;
+    case H52:
+      return H5;
+    case H62:
+      return H6;
+    case Div2:
+      return Div;
+    case Kbd2:
+      return Kbd;
+    case Table2:
+      return Table;
+    case TBody2:
+      return TBody;
+    case Th2:
+      return Th;
+    case Td2:
+      return Td;
+    case THead2:
+      return THead;
+    case Tr2:
+      return Tr;
+    case Input2:
+      return Input$1;
+    case ColGroup2:
+      return ColGroup;
+    case Col2:
+      return Col;
+    case Button2:
+      return Button;
+    case Span2:
+      return Span;
+    case I2:
+      return I;
+    case Img2:
+      return Img;
+    case Ins2:
+      return Ins;
+    case Del2:
+      return Del;
+    case Article2:
+      return Article;
+    case Aside2:
+      return Aside;
+    case Footer2:
+      return Footer;
+    case Header2:
+      return Header;
+    case Nav2:
+      return Nav;
+    case Section2:
+      return Section;
+    case Search2:
+      return Search$1;
+    case Dd2:
+      return Dd;
+    case Dl2:
+      return Dl;
+    case Figcaption2:
+      return Figcaption;
+    case Figure2:
+      return Figure;
+    case Hr2:
+      return Hr;
+    case Li2:
+      return Li;
+    case Ol2:
+      return Ol;
+    case P2:
+      return P;
+    case Pre2:
+      return Pre;
+    case A2:
+      return A;
+    case Br2:
+      return Br;
+    case Cite2:
+      return Cite;
+    case Data2:
+      return Data;
+    case Time2:
+      return Time$1;
+    case Tfoot2:
+      return Tfoot;
+    case Ul2:
+      return Ul;
+    case Video2:
+      return Video$1;
+    case TextArea2:
+      return TextArea;
+    case Select2:
+      return Select;
+    case Option2:
+      return Option;
+    default:
+      throw new Error(`element tag not found ${type}`);
   }
 };
 
-const AriaAlert = {
-  __proto__: null,
-  alert: alert$1
+// src/parts/GetEventListenerOptions/GetEventListenerOptions.ts
+var getEventListenerOptions$1 = eventName => {
+  switch (eventName) {
+    case "wheel":
+      return {
+        passive: true
+      };
+    default:
+      return void 0;
+  }
 };
 
-// TODO this file is not needed when all elements are position fixed
-const state$6 = {
-  isInDom: false,
-  $PreviousFocusElement: undefined,
-  widgetSet: new Set(),
-  $Widgets: undefined
-};
-const create$Widgets = () => {
-  const $Widgets = document.createElement('div');
-  $Widgets.id = 'Widgets';
-  $Widgets.className = 'Widgets';
-  return $Widgets;
+// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
+var nameAnonymousFunction$1 = (fn, name) => {
+  Object.defineProperty(fn, "name", {
+    value: name
+  });
 };
-const append$1 = $Element => {
-  // TODO should not call append in the first place if it is already in dom
-  if (state$6.widgetSet.has($Element)) {
-    return;
+
+// src/parts/GetWrappedListener/GetWrappedListener.ts
+var cache$1 = /* @__PURE__ */new Map();
+var getWrappedListener$1 = (listener, returnValue) => {
+  if (!returnValue) {
+    return listener;
   }
-  state$6.widgetSet.add($Element);
-  if (state$6.$Widgets) {
-    // @ts-expect-error
-    state$6.$Widgets.append($Element);
-  } else {
-    // @ts-expect-error
-    state$6.$Widgets = create$Widgets();
-    // @ts-expect-error
-    state$6.$Widgets.append($Element);
-    // @ts-expect-error
-    document.body.append(state$6.$Widgets);
+  if (!cache$1.has(listener)) {
+    const wrapped = event => {
+      const uid = getComponentUidFromEvent(event);
+      const result = listener(event);
+      if (result.length === 0) {
+        return;
+      }
+      const ipc = getIpc();
+      ipc.send("Viewlet.executeViewletCommand", uid, ...result);
+    };
+    nameAnonymousFunction$1(wrapped, listener.name);
+    cache$1.set(listener, wrapped);
   }
+  return cache$1.get(listener);
 };
-const remove$1 = $Element => {
-  if (!$Element) {
-    // TODO $Element should always be defined
+
+// src/parts/AttachEvent/AttachEvent.ts
+var attachEvent$1 = ($Node, eventMap, key, value) => {
+  const listener = eventMap[value];
+  if (!listener) {
+    console.warn("listener not found", value);
     return;
   }
-  state$6.widgetSet.delete($Element);
-  $Element.remove();
-  // TODO state.$Widgets should always be defined at this point
-  if (state$6.widgetSet.size === 0 && state$6.$Widgets) {
-    // @ts-expect-error
-    state$6.$Widgets.remove();
-    state$6.$Widgets = undefined;
-  }
-};
-
-// TODO not sure whether created dom node
-// should stay in state or be removed
-// one option would result in less memory usage
-// the other option would result in less garbage collection
-
-// probably should optimize for less memory usage by default
-// unless the element is very likely to be used again soon (<30s)
-// but that's difficult to know
-
-// TODO hide widget after timeout or mousemove
-const create$J = (message, x, y) => {
-  const $EditorError = document.createElement('div');
-  $EditorError.className = 'EditorWidgetError';
-  $EditorError.textContent = message;
-  $EditorError.style.left = `${x}px`;
-  $EditorError.style.top = `${y}px`;
-  alert$1(message);
-  append$1($EditorError);
-  return {
-    $EditorError
-  };
+  const options = getEventListenerOptions$1(eventMap);
+  const wrapped = getWrappedListener$1(listener, eventMap.returnValue);
+  $Node.addEventListener(key, wrapped, options);
 };
 
-const name$s = 'EditorError';
-const Commands$t = {
-  create: create$J
+// src/parts/VirtualDomElementProp/VirtualDomElementProp.ts
+var setProp = ($Element, key, value, eventMap) => {
+  switch (key) {
+    case "maskImage":
+      $Element.style.maskImage = `url('${value}')`;
+      $Element.style.webkitMaskImage = `url('${value}')`;
+      break;
+    case "paddingLeft":
+    case "paddingRight":
+    case "top":
+    case "left":
+    case "marginTop":
+      $Element.style[key] = typeof value === "number" ? `${value}px` : value;
+      break;
+    case "translate":
+      $Element.style[key] = value;
+      break;
+    case "width":
+    case "height":
+      if ($Element instanceof HTMLImageElement) {
+        $Element[key] = value;
+      } else if (typeof value === "number") {
+        $Element.style[key] = `${value}px`;
+      } else {
+        $Element.style[key] = value;
+      }
+      break;
+    case "style":
+      throw new Error("style property is not supported");
+    case "childCount":
+    case "type":
+      break;
+    case "ariaOwns":
+      if (value) {
+        $Element.setAttribute("aria-owns", value);
+      } else {
+        $Element.removeAttribute("aria-owns");
+      }
+      break;
+    case "inputType":
+      $Element.type = value;
+      break;
+    case "ariaLabelledBy":
+      $Element.setAttribute("aria-labelledby", value);
+      break;
+    case "onBlur":
+    case "onChange":
+    case "onClick":
+    case "onContextMenu":
+    case "onDblClick":
+    case "onFocus":
+    case "onFocusIn":
+    case "onFocusIn":
+    case "onFocusOut":
+    case "onInput":
+    case "onKeyDown":
+    case "onMouseDown":
+    case "onPointerDown":
+    case "onPointerOut":
+    case "onPointerOver":
+    case "onWheel":
+      const eventName = key.slice(2).toLowerCase();
+      if (!eventMap || !value) {
+        return;
+      }
+      attachEvent$1($Element, eventMap, eventName, value);
+      break;
+    default:
+      if (key.startsWith("data-")) {
+        $Element.dataset[key.slice("data-".length)] = value;
+      } else {
+        $Element[key] = value;
+      }
+  }
 };
 
-const EditorError_ipc = {
-  __proto__: null,
-  Commands: Commands$t,
-  name: name$s
+// src/parts/VirtualDomElementProps/VirtualDomElementProps.ts
+var setProps = ($Element, props, eventMap) => {
+  for (const key in props) {
+    setProp($Element, key, props[key], eventMap);
+  }
 };
 
-const state$5 = {
-  /**
-   * @type {HTMLElement|undefined}
-   */
-  $PreviousFocusElement: undefined,
-  currentFocus: ''
-};
-const setElement = $Element => {
-  state$5.$PreviousFocusElement = $Element;
-};
-const getElement = () => {
-  return state$5.$PreviousFocusElement;
+// src/parts/VirtualDomElement/VirtualDomElement.ts
+var renderDomTextNode = element => {
+  return document.createTextNode(element.text);
 };
-
-const focus$i = $Element => {
-  if ($Element === document.activeElement) {
-    return;
-  }
-  setElement(document.activeElement);
-  $Element.focus({
-    preventScroll: true
-  });
+var renderDomElement = (element, eventMap) => {
+  const tag = getElementTag(element.type);
+  const $Element = document.createElement(tag);
+  setProps($Element, element, eventMap);
+  return $Element;
 };
-const focusPrevious$1 = () => {
-  const $Element = getElement();
-  if ($Element) {
-    // @ts-expect-error
-    $Element.focus();
+var render = (element, eventMap) => {
+  switch (element.type) {
+    case Text$2:
+      return renderDomTextNode(element);
+    default:
+      return renderDomElement(element, eventMap);
   }
 };
 
-const create$I = () => {
-  const $InputBox = document.createElement('input');
-  $InputBox.className = 'InputBox';
-  $InputBox.spellcheck = false;
-  $InputBox.autocapitalize = 'off';
-  // $InputBox.autocomplete = 'off' // TODO needed?
-  $InputBox.type = 'text';
-  $InputBox.setAttribute('autocorrect', 'off'); // for ios
-  return $InputBox;
-};
-
-const setBounds$6 = ($Element, x, y, width, height) => {
-  $Element.style.top = `${y}px`;
-  $Element.style.left = `${x}px`;
-  $Element.style.width = `${width}px`;
-  $Element.style.height = `${height}px`;
-};
-const setYAndHeight = ($Element, y, height) => {
-  if (!$Element) {
-    return;
+// src/parts/RenderInternal/RenderInternal.ts
+var renderInternal2 = ($Parent, elements, eventMap) => {
+  const max = elements.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = elements[i];
+    const $Element = render(element, eventMap);
+    if (element.childCount > 0) {
+      $Element.append(...stack.slice(0, element.childCount));
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift($Element);
   }
-  $Element.style.translate = typeof y === 'string' ? y : `0 ${y}px`;
-  $Element.style.height = typeof height === 'string' ? height : `${height}px`;
-};
-const setXAndWidth = ($Element, x, width) => {
-  $Element.style.translate = `${x}px 0`;
-  $Element.style.width = `${width}px`;
-};
-const setTop = ($Element, top) => {
-  $Element.style.top = `${top}px`;
-};
-const setWidth = ($Element, width) => {
-  $Element.style.width = `${width}px`;
-};
-const setXAndY = ($Element, x, y) => {
-  $Element.style.left = `${x}px`;
-  $Element.style.top = `${y}px`;
+  $Parent.append(...stack);
 };
 
-/**
- *
- * @param {HTMLElement} $Element
- * @param {number} x
- * @param {number} y
- */
-const setXAndYTransform = ($Element, x, y) => {
-  $Element.style.translate = `${x}px ${y}px`;
+// src/parts/VirtualDom/VirtualDom.ts
+var renderInto = ($Parent, dom, eventMap = {}) => {
+  clearNode($Parent);
+  renderInternal2($Parent, dom, eventMap);
 };
-const setHeight = ($Element, height) => {
-  $Element.style.height = `${height}px`;
+var render2 = (elements, eventMap = {}) => {
+  const $Root = document.createElement("div");
+  renderInternal2($Root, elements, eventMap);
+  return $Root;
 };
 
-const FocusDebugInput = 6;
-const FocusEditorRename = 11;
-const FocusExplorer = 13;
-const FocusExplorerEditBox = 14;
-const FocusLocationList = 17;
-const FocusMenu = 18;
-const FocusQuickPickInput = 20;
-const FocusSearchInput = 21;
-const FocusSimpleBrowserInput = 23;
-const FocusOutput = 28;
-
-const handleBlur$a = () => {
-  send( /* EditorRename.abort */'EditorRename.abort');
+// src/parts/RememberFocus/RememberFocus.ts
+var queryInputs = $Viewlet => {
+  return [...$Viewlet.querySelectorAll("input, textarea")];
 };
-const create$H = (x, y) => {
-  const $RenameWidgetInputBox = create$I();
-  $RenameWidgetInputBox.className = 'RenameWidgetInputBox';
-  $RenameWidgetInputBox.onblur = handleBlur$a;
-  const $RenameWidget = document.createElement('div');
-  $RenameWidget.className = 'RenameWidget';
-  $RenameWidget.append($RenameWidgetInputBox);
-  setXAndY($RenameWidget, x, y);
-  append$1($RenameWidget);
-  focus$i($RenameWidgetInputBox);
-  send('Focus.setFocus', FocusEditorRename);
-  return {
-    $RenameWidget,
-    $RenameWidgetInputBox
-  };
+var rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
+  const oldLeft = $Viewlet.style.left;
+  const oldTop = $Viewlet.style.top;
+  const oldWidth = $Viewlet.style.width;
+  const oldHeight = $Viewlet.style.height;
+  const focused = document.activeElement.getAttribute("name");
+  const $$Inputs = queryInputs($Viewlet);
+  const inputMap = /* @__PURE__ */Object.create(null);
+  for (const $Input of $$Inputs) {
+    inputMap[$Input.name] = $Input.value;
+  }
+  if (uid) {
+    const $New = render2(dom, eventMap).firstChild;
+    setComponentUid($New, uid);
+    $Viewlet.replaceWith($New);
+    $Viewlet = $New;
+  } else {
+    renderInto($Viewlet, dom, eventMap);
+  }
+  const $$NewInputs = queryInputs($Viewlet);
+  for (const $Input of $$NewInputs) {
+    $Input.value = inputMap[$Input.name] || $Input.value || "";
+  }
+  if (focused) {
+    const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
+    if ($Focused) {
+      $Focused.focus();
+    }
+  }
+  $Viewlet.style.top = oldTop;
+  $Viewlet.style.left = oldLeft;
+  $Viewlet.style.height = oldHeight;
+  $Viewlet.style.width = oldWidth;
+  return $Viewlet;
 };
-const dispose$i = state => {
-  // TODO focus editor
-  remove$1(state.$RenameWidget);
+
+const main = async () => {
+  onerror = handleUnhandledError;
+  onunhandledrejection = handleUnhandledRejection;
+  if ('SecurityPolicyViolationEvent' in self) {
+    self.addEventListener('securitypolicyviolation', handleContentSecurityPolicyViolation);
+  }
+  setLoad(load$1);
+  if (platform === Web) {
+    // disable prompt to download app as pwa
+    // @ts-expect-error
+    window.onbeforeinstallprompt = handleBeforeInstallPrompt;
+  }
+  // TODO this is discovered very late
+  await hydrate$1();
+  setIpc(RendererWorker);
 };
 
-// TODO could also be event based
-// finish -> finish -> finishWithValue
+main();
 
-const finish = state => {
-  const value = state.$RenameWidgetInputBox.value;
-  // TODO don't like side effect here
-  return value;
+const play = async src => {
+  const audio = new Audio(src);
+  await audio.play();
 };
 
-const name$r = 'EditorRename';
-const Commands$s = {
-  create: create$H,
-  dispose: dispose$i,
-  finish: finish
+const name$y = 'Audio';
+const Commands$z = {
+  play: play
 };
 
-const EditorRename_ipc = {
+const Audio_ipc = {
   __proto__: null,
-  Commands: Commands$s,
-  name: name$r
+  Commands: Commands$z,
+  name: name$y
 };
 
-const showDirectoryPicker = options => {
-  // @ts-expect-error
-  return window.showDirectoryPicker(options);
+const readText = async () => {
+  return navigator.clipboard.readText();
 };
-const showFilePicker = options => {
-  // @ts-expect-error
-  return window.showFilePicker(options);
+const writeText = async text => {
+  string(text);
+  await navigator.clipboard.writeText(text);
 };
-const showSaveFilePicker = options => {
-  // @ts-expect-error
-  return window.showSaveFilePicker(options);
+const writeImage = async blob => {
+  await navigator.clipboard.write([new ClipboardItem({
+    [blob.type]: blob
+  })]);
 };
-
-const name$q = 'FilePicker';
-const Commands$r = {
-  showDirectoryPicker: showDirectoryPicker,
-  showFilePicker: showFilePicker,
-  showSaveFilePicker: showSaveFilePicker
+const execCopy = async () => {
+  // @ts-expect-error
+  const text = getSelection().toString();
+  await writeText(text);
 };
 
-const FilePicker_ipc = {
+const name$x = 'ClipBoard';
+const Commands$y = {
+  execCopy: execCopy,
+  readText: readText,
+  writeImage: writeImage,
+  writeText: writeText
+};
+
+const ClipBoard_ipc = {
   __proto__: null,
-  Commands: Commands$r,
-  name: name$q
+  Commands: Commands$y,
+  name: name$x
 };
 
-const requestPermission = (handle, options) => {
-  return handle.requestPermission(options);
+const prompt$1 = message => {
+  return confirm(message);
 };
 
-const name$p = 'FileSystemHandle';
-const Commands$q = {
-  requestPermission: requestPermission
+const name$w = 'ConfirmPrompt';
+const Commands$x = {
+  prompt: prompt$1
 };
 
-const FileSystemHandle_ipc = {
+const ConfirmPrompt_ipc = {
   __proto__: null,
-  Commands: Commands$q,
-  name: name$p
+  Commands: Commands$x,
+  name: name$w
 };
 
-const handleImageLoad = event => {
-  const $ImagePreviewImage = event.target;
-  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling;
-  const width = $ImagePreviewImage.naturalWidth;
-  const height = $ImagePreviewImage.naturalHeight;
-  $ImagePreviewCaption.textContent = `${width} × ${height}`;
-};
-const handleImageError$1 = event => {
-  const $ImagePreviewImage = event.target;
-  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling;
-  $ImagePreviewCaption.textContent = 'Image could not be loaded';
+const state$7 = {
+  styleSheets: Object.create(null)
 };
-
-// TODO duplicate code with below
-
-const showError = (message, y, x) => {
-  const $ImagePreviewImage = document.createElement('img');
-  $ImagePreviewImage.className = 'ImagePreviewImage';
-  $ImagePreviewImage.alt = '';
-  const $ImagePreviewCaption = document.createElement('figcaption');
-  $ImagePreviewCaption.className = 'ImagePreviewCaption';
-  $ImagePreviewCaption.textContent = message;
-  const $ImagePreview = document.createElement('figure');
-  $ImagePreview.className = 'ImagePreview';
-  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption);
-  setXAndY($ImagePreview, x, y);
-  $ImagePreview.style.display = 'none';
-  append$1($ImagePreview);
-  return {
-    $ImagePreview,
-    $ImagePreviewCaption,
-    $ImagePreviewImage
-  };
+const set$4 = (id, sheet) => {
+  state$7.styleSheets[id] = sheet;
 };
-const create$G = (uri, top, left) => {
-  const $ImagePreviewImage = document.createElement('img');
-  $ImagePreviewImage.className = 'ImagePreviewImage';
-  $ImagePreviewImage.src = uri;
-  $ImagePreviewImage.alt = '';
-  const $ImagePreviewCaption = document.createElement('figcaption');
-  $ImagePreviewCaption.className = 'ImagePreviewCaption';
-  const $ImagePreview = document.createElement('figure');
-  $ImagePreview.className = 'ImagePreview';
-  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption);
-  $ImagePreviewImage.onload = handleImageLoad;
-  $ImagePreviewImage.onerror = handleImageError$1;
-  $ImagePreview.style.top = `${top}px`;
-  $ImagePreview.style.left = `${left}px`;
-  $ImagePreview.style.display = 'none';
-  append$1($ImagePreview);
-  return {
-    $ImagePreview,
-    $ImagePreviewCaption,
-    $ImagePreviewImage
-  };
+const get$5 = id => {
+  return state$7.styleSheets[id];
 };
-const update = (state, uri) => {
-  state.$ImagePreviewImage.uri = uri;
+
+const addCssStyleSheet = async (id, text) => {
+  const existing = get$5(id);
+  if (existing) {
+    await existing.replace(text);
+    return;
+  }
+  const sheet = new CSSStyleSheet({});
+  set$4(id, sheet);
+  await sheet.replace(text);
+  document.adoptedStyleSheets.push(sheet);
 };
-const dispose$h = state => {
-  remove$1(state.$ImagePreview);
+
+const name$v = 'Css';
+const Commands$w = {
+  addCssStyleSheet: addCssStyleSheet
 };
 
-const ImagePreview$1 = {
+const Css_ipc = {
   __proto__: null,
-  create: create$G,
-  dispose: dispose$h,
-  showError,
-  update
+  Commands: Commands$w,
+  name: name$v
 };
 
-const name$o = 'ImagePreview';
-const Commands$p = {
-  create: create$G,
-  dispose: dispose$h,
-  showError: showError,
-  update: update
+const modules = ['ActivityBar', 'Ajax', 'Allocator', 'Callback', 'Command', 'Context', 'ContextMenu', 'Delay', 'Developer', 'DomPool', 'Editor', 'Exec', 'ExtensionHost', 'FileSystem', 'KeyBindings', 'Layout', 'Main', 'Notification', 'Panel', 'Parts', 'QuickPick', 'Renderer', 'RendererWorker', 'Search', 'SharedProcess', 'SideBar', 'StatusBar', 'TitleBar', 'Viewlet', 'ViewletController', 'ViewService', 'Vscode', 'Window', 'Workbench', 'Worker', 'Workspace'];
+
+// TODO send to renderer worker -> renderer worker has all state
+const showState = async () => {
+  const state = Object.create(null);
+  for (const module of modules) {
+    let imported;
+    try {
+      imported = await import(`../${module}/${module}.js`);
+    } catch {}
+    if (imported?.state) {
+      state[module] = imported.state;
+    }
+  }
+  info(state);
 };
 
-const ImagePreview_ipc = {
+const name$u = 'Developer';
+const Commands$v = {
+  showState: showState
+};
+
+const Developer_ipc = {
   __proto__: null,
-  Commands: Commands$p,
-  name: name$o
+  Commands: Commands$v,
+  name: name$u
 };
 
-const getOrigin = () => {
-  return location.origin;
+const downloadFile = (fileName, url) => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
 };
-const getPathName = () => {
-  return location.pathname;
+
+const name$t = 'Download';
+const Commands$u = {
+  downloadFile: downloadFile
 };
-const getHref = () => {
-  return location.href;
+
+const Download_ipc = {
+  __proto__: null,
+  Commands: Commands$u,
+  name: name$t
 };
 
-// TODO should do nothing if it is already at this path
-const setPathName = pathName => {
-  const currentPathName = getPathName();
-  if (currentPathName === pathName) {
-    return;
-  }
-  // @ts-expect-error
-  history.pushState(null, null, pathName);
+// based on https://github.com/microsoft/vscode/blob/5f87632829dc3ac80203e2377727935184399431/src/vs/base/browser/ui/aria/aria.ts (License MIT)
+
+const state$6 = {
+  $AriaAlert1: undefined,
+  $AriaAlert2: undefined,
+  $AriaMessages: undefined
 };
-const hydrate = () => {
-  // addEventListener('popstate', handlePopState)
+const getAriaAlert1 = () => {
+  return state$6.$AriaAlert1;
 };
-
-const getTitleBarHeight = () => {
-  if (
-  // @ts-expect-error
-  navigator.windowControlsOverlay?.getTitlebarAreaRect) {
-    // @ts-expect-error
-    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect();
-    return titleBarRect.height;
-  }
-  return 0;
+const getAriaAlert2 = () => {
+  return state$6.$AriaAlert2;
 };
-const getBounds = () => {
-  return {
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight,
-    titleBarHeight: getTitleBarHeight()
-  };
+const setElements = ($AriaMessages, $AriaAlert1, $AriaAlert2) => {
+  state$6.$AriaMessages = $AriaMessages;
+  state$6.$AriaAlert1 = $AriaAlert1;
+  state$6.$AriaAlert2 = $AriaAlert2;
 };
-
-const getInitData = () => {
-  const initData = {
-    Location: {
-      href: getHref()
-    },
-    Layout: {
-      bounds: getBounds()
-    }
-  };
-  return initData;
+const hasElements = () => {
+  return state$6.$AriaMessages;
 };
 
-const name$n = 'InitData';
-const Commands$o = {
-  getInitData: getInitData
-};
+const True = 'true';
+const False = 'false';
 
-const InitData_ipc = {
-  __proto__: null,
-  Commands: Commands$o,
-  name: name$n
-};
+const Alert = 'alert';
+const Application = 'application';
+const Code = 'code';
+const Complementary = 'complementary';
+const ContentInfo = 'contentinfo';
+const Group = 'group';
+const List$1 = 'list';
+const ListBox = 'listbox';
+const Log = 'log';
+const Main$1 = 'main';
+const Menu = 'menu';
+const None$2 = 'none';
+const Status = 'status';
+const TabList = 'tablist';
+const TextBox = 'textbox';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const ComboBox = 'combobox';
 
-const name$m = 'IpcParent';
-const Commands$n = {
-  create: create$L
+const AriaOwns = 'aria-owns';
+const AriaLabelledBy = 'aria-labelledby';
+const AriaDescribedBy = 'aria-describedby';
+const AriaActiveDescendant = 'aria-activedescendant';
+const AriaSelected = 'aria-selected';
+const AriaControls = 'aria-controls';
+const AriaHidden = 'aria-hidden';
+
+// based on https://github.com/microsoft/vscode/blob/5f87632829dc3ac80203e2377727935184399431/src/vs/base/browser/ui/aria/aria.ts (License MIT)
+const create$AriaAlert = () => {
+  const $AriaAlert = document.createElement('div');
+  $AriaAlert.className = 'AriaAlert';
+  $AriaAlert.role = Alert;
+  $AriaAlert.ariaAtomic = True;
+  return $AriaAlert;
 };
-
-const IpcParent_ipc = {
-  __proto__: null,
-  Commands: Commands$n,
-  name: name$m
+const setMessage$3 = ($Old, $New, message) => {
+  $Old.textContent = String(Math.random());
+  $Old.ariaHidden = True;
+  $New.removeAttribute(AriaHidden);
+  $New.textContent = message;
 };
-
-const name$l = 'Layout';
-const Commands$m = {
-  getBounds: getBounds
+const alert$1 = message => {
+  if (!message) {
+    return;
+  }
+  if (!hasElements()) {
+    const $AriaAlert1 = create$AriaAlert();
+    const $AriaAlert2 = create$AriaAlert();
+    // TODO find better name, for example AriaMessages, AriaOutlet, AriaContainer, ScreenReaderMessages
+    const $AriaMessages = document.createElement('div');
+    $AriaMessages.className = 'AriaContainer';
+    $AriaMessages.append($AriaAlert1, $AriaAlert2);
+    document.body.append($AriaMessages);
+    setElements($AriaMessages, $AriaAlert1, $AriaAlert2);
+  }
+  const $AriaAlert1 = getAriaAlert1();
+  const $AriaAlert2 = getAriaAlert2();
+  // @ts-expect-error
+  if ($AriaAlert1.textContent === message) {
+    setMessage$3($AriaAlert1, $AriaAlert2, message);
+  } else {
+    setMessage$3($AriaAlert2, $AriaAlert1, message);
+  }
 };
 
-const Layout_ipc = {
+const AriaAlert = {
   __proto__: null,
-  Commands: Commands$m,
-  name: name$l
+  alert: alert$1
 };
 
-const name$k = 'Location';
-const Commands$l = {
-  getHref: getHref,
-  getPathName: getPathName,
-  hydrate: hydrate,
-  setPathName: setPathName
+// TODO this file is not needed when all elements are position fixed
+const state$5 = {
+  isInDom: false,
+  $PreviousFocusElement: undefined,
+  widgetSet: new Set(),
+  $Widgets: undefined
 };
-
-const Location_ipc = {
-  __proto__: null,
-  Commands: Commands$l,
-  name: name$k
+const create$Widgets = () => {
+  const $Widgets = document.createElement('div');
+  $Widgets.id = 'Widgets';
+  $Widgets.className = 'Widgets';
+  return $Widgets;
 };
-
-const getElementHeight = $Element => {
-  document.body.append($Element);
-  const height = $Element.offsetHeight;
+const append$1 = $Element => {
+  // TODO should not call append in the first place if it is already in dom
+  if (state$5.widgetSet.has($Element)) {
+    return;
+  }
+  state$5.widgetSet.add($Element);
+  if (state$5.$Widgets) {
+    // @ts-expect-error
+    state$5.$Widgets.append($Element);
+  } else {
+    // @ts-expect-error
+    state$5.$Widgets = create$Widgets();
+    // @ts-expect-error
+    state$5.$Widgets.append($Element);
+    // @ts-expect-error
+    document.body.append(state$5.$Widgets);
+  }
+};
+const remove$1 = $Element => {
+  if (!$Element) {
+    // TODO $Element should always be defined
+    return;
+  }
+  state$5.widgetSet.delete($Element);
   $Element.remove();
-  return height;
+  // TODO state.$Widgets should always be defined at this point
+  if (state$5.widgetSet.size === 0 && state$5.$Widgets) {
+    // @ts-expect-error
+    state$5.$Widgets.remove();
+    state$5.$Widgets = undefined;
+  }
 };
 
-const measureTextHeight = (text, fontSize, fontFamily) => {
-  string(text);
-  string(fontSize);
-  string(fontFamily);
-  const $Measure = document.createElement('div');
-  $Measure.style.contain = 'content';
-  $Measure.style.position = 'absolute';
-  $Measure.style.top = '-9999px';
-  $Measure.style.left = '-9999px';
-  $Measure.textContent = text;
-  return getElementHeight($Measure);
+// TODO not sure whether created dom node
+// should stay in state or be removed
+// one option would result in less memory usage
+// the other option would result in less garbage collection
+
+// probably should optimize for less memory usage by default
+// unless the element is very likely to be used again soon (<30s)
+// but that's difficult to know
+
+// TODO hide widget after timeout or mousemove
+const create$J = (message, x, y) => {
+  const $EditorError = document.createElement('div');
+  $EditorError.className = 'EditorWidgetError';
+  $EditorError.textContent = message;
+  $EditorError.style.left = `${x}px`;
+  $EditorError.style.top = `${y}px`;
+  alert$1(message);
+  append$1($EditorError);
+  return {
+    $EditorError
+  };
 };
 
-const name$j = 'MeasureTextHeight';
-const Commands$k = {
-  measureTextHeight: measureTextHeight
+const name$s = 'EditorError';
+const Commands$t = {
+  create: create$J
 };
 
-const MeasureTextHeight_ipc = {
+const EditorError_ipc = {
   __proto__: null,
-  Commands: Commands$k,
-  name: name$j
+  Commands: Commands$t,
+  name: name$s
 };
 
-const measureTextBlockHeight = (text, fontSize, fontFamily, lineHeight, width) => {
-  string(text);
-  number(fontSize);
-  string(fontFamily);
-  number(width);
-  string(lineHeight);
-  const $Measure = document.createElement('div');
-  $Measure.style.width = `${width}px`;
-  $Measure.style.contain = 'content';
-  $Measure.style.position = 'absolute';
-  $Measure.style.top = '-9999px';
-  $Measure.style.left = '-9999px';
-  $Measure.style.fontSize = `${fontSize}px`;
-  $Measure.style.lineHeight = lineHeight;
-  $Measure.textContent = text;
-  return getElementHeight($Measure);
+const state$4 = {
+  /**
+   * @type {HTMLElement|undefined}
+   */
+  $PreviousFocusElement: undefined,
+  currentFocus: ''
 };
-
-const name$i = 'MeasureTextBlockHeight';
-const Commands$j = {
-  measureTextBlockHeight: measureTextBlockHeight
+const setElement = $Element => {
+  state$4.$PreviousFocusElement = $Element;
 };
-
-const MeasureTextBlockHeight_ipc = {
-  __proto__: null,
-  Commands: Commands$j,
-  name: name$i
+const getElement = () => {
+  return state$4.$PreviousFocusElement;
 };
 
-const setThemeColor = color => {
-  const meta = document.querySelector('meta[name="theme-color"]');
-  if (!meta) {
+const focus$i = $Element => {
+  if ($Element === document.activeElement) {
     return;
   }
-  // @ts-expect-error
-  meta.content = color;
+  setElement(document.activeElement);
+  $Element.focus({
+    preventScroll: true
+  });
 };
-
-const name$h = 'Meta';
-const Commands$i = {
-  setThemeColor: setThemeColor
+const focusPrevious$1 = () => {
+  const $Element = getElement();
+  if ($Element) {
+    // @ts-expect-error
+    $Element.focus();
+  }
 };
 
-const Meta_ipc = {
-  __proto__: null,
-  Commands: Commands$i,
-  name: name$h
+const create$I = () => {
+  const $InputBox = document.createElement('input');
+  $InputBox.className = 'InputBox';
+  $InputBox.spellcheck = false;
+  $InputBox.autocapitalize = 'off';
+  // $InputBox.autocomplete = 'off' // TODO needed?
+  $InputBox.type = 'text';
+  $InputBox.setAttribute('autocorrect', 'off'); // for ios
+  return $InputBox;
 };
 
-const create$Notification = message => {
-  const $Notification = document.createElement('div');
-  $Notification.className = 'Notification';
-  $Notification.textContent = message;
-  return $Notification;
-};
-const create$F = (type, message) => {
-  // TODO this pattern might be also useful for activitybar, sidebar etc., creating elements as late as possible, only when actually needed
-  const $Notification = create$Notification(message);
-  append$1($Notification);
-};
-const findIndex$1 = $Child => {
-  const $Parent = $Child.parentNode;
-  for (let i = 0; i < $Parent.children.length; i++) {
-    if ($Parent.children[i] === $Child) {
-      return i;
-    }
-  }
-  return -1;
+const setBounds$6 = ($Element, x, y, width, height) => {
+  $Element.style.top = `${y}px`;
+  $Element.style.left = `${x}px`;
+  $Element.style.width = `${width}px`;
+  $Element.style.height = `${height}px`;
 };
-const handleNotificationClick = event => {
-  const $Target = event.target;
-  switch ($Target.className) {
-    case 'NotificationOption':
-      const index = findIndex$1($Target);
-      send( /* Notification.handleClick */'Notification.handleClick', /* index */index);
-      break;
+const setYAndHeight = ($Element, y, height) => {
+  if (!$Element) {
+    return;
   }
+  $Element.style.translate = typeof y === 'string' ? y : `0 ${y}px`;
+  $Element.style.height = typeof height === 'string' ? height : `${height}px`;
 };
-const create$NotificationWithOptions = (message, options) => {
-  const $NotificationMessage = document.createElement('p');
-  $NotificationMessage.className = 'NotificationMessage';
-  $NotificationMessage.textContent = message;
-  const $NotificationOptions = document.createElement('div');
-  $NotificationOptions.className = 'NotificationOptions';
-  for (const option of options) {
-    const $NotificationOption = document.createElement('button');
-    $NotificationOption.className = 'NotificationOption';
-    $NotificationOption.textContent = option;
-    $NotificationOptions.append($NotificationOption);
-  }
-  const $Notification = document.createElement('div');
-  $Notification.className = 'Notification';
-  $Notification.append($NotificationMessage, $NotificationOptions);
-  $Notification.onclick = handleNotificationClick;
-  return $Notification;
+const setXAndWidth = ($Element, x, width) => {
+  $Element.style.translate = `${x}px 0`;
+  $Element.style.width = `${width}px`;
 };
-const createWithOptions = (type, message, options) => {
-  const $Notification = create$NotificationWithOptions(message, options);
-  append$1($Notification);
+const setTop = ($Element, top) => {
+  $Element.style.top = `${top}px`;
 };
-const dispose$g = id => {
-  // const $Notification = state.$Notifications
+const setWidth = ($Element, width) => {
+  $Element.style.width = `${width}px`;
 };
-
-const name$g = 'Notification';
-
-// prettier-ignore
-const Commands$h = {
-  create: create$F,
-  createWithOptions: createWithOptions,
-  dispose: dispose$g
+const setXAndY = ($Element, x, y) => {
+  $Element.style.left = `${x}px`;
+  $Element.style.top = `${y}px`;
 };
 
-const Notification_ipc = {
-  __proto__: null,
-  Commands: Commands$h,
-  name: name$g
+/**
+ *
+ * @param {HTMLElement} $Element
+ * @param {number} x
+ * @param {number} y
+ */
+const setXAndYTransform = ($Element, x, y) => {
+  $Element.style.translate = `${x}px ${y}px`;
+};
+const setHeight = ($Element, height) => {
+  $Element.style.height = `${height}px`;
 };
 
-const Two = '2.0';
+const FocusDebugInput = 6;
+const FocusEditorRename = 11;
+const FocusExplorer = 13;
+const FocusExplorerEditBox = 14;
+const FocusLocationList = 17;
+const FocusMenu = 18;
+const FocusQuickPickInput = 20;
+const FocusSearchInput = 21;
+const FocusSimpleBrowserInput = 23;
+const FocusOutput = 28;
 
-const state$4 = {
-  canvasObjects: Object.create(null)
+const handleBlur$a = () => {
+  send( /* EditorRename.abort */'EditorRename.abort');
 };
-const get$4 = id => {
-  return state$4.canvasObjects[id];
+const create$H = (x, y) => {
+  const $RenameWidgetInputBox = create$I();
+  $RenameWidgetInputBox.className = 'RenameWidgetInputBox';
+  $RenameWidgetInputBox.onblur = handleBlur$a;
+  const $RenameWidget = document.createElement('div');
+  $RenameWidget.className = 'RenameWidget';
+  $RenameWidget.append($RenameWidgetInputBox);
+  setXAndY($RenameWidget, x, y);
+  append$1($RenameWidget);
+  focus$i($RenameWidgetInputBox);
+  send('Focus.setFocus', FocusEditorRename);
+  return {
+    $RenameWidget,
+    $RenameWidgetInputBox
+  };
 };
-const set$3 = (canvasId, canvas) => {
-  state$4.canvasObjects[canvasId] = canvas;
+const dispose$i = state => {
+  // TODO focus editor
+  remove$1(state.$RenameWidget);
 };
 
-const get$3 = id => {
-  return get$4(id);
+// TODO could also be event based
+// finish -> finish -> finishWithValue
+
+const finish = state => {
+  const value = state.$RenameWidgetInputBox.value;
+  // TODO don't like side effect here
+  return value;
 };
-const create$E = (canvasId, callbackId) => {
-  const canvas = document.createElement('canvas');
-  const offscreenCanvas = canvas.transferControlToOffscreen();
-  set$3(canvasId, canvas);
-  sendAndTransfer({
-    jsonrpc: Two,
-    id: callbackId,
-    params: [offscreenCanvas]
-  }, [offscreenCanvas]);
+
+const name$r = 'EditorRename';
+const Commands$s = {
+  create: create$H,
+  dispose: dispose$i,
+  finish: finish
 };
 
-const name$f = 'OffscreenCanvas';
+const EditorRename_ipc = {
+  __proto__: null,
+  Commands: Commands$s,
+  name: name$r
+};
 
-// prettier-ignore
-const Commands$g = {
-  create: create$E
+const showDirectoryPicker = options => {
+  // @ts-expect-error
+  return window.showDirectoryPicker(options);
+};
+const showFilePicker = options => {
+  // @ts-expect-error
+  return window.showFilePicker(options);
+};
+const showSaveFilePicker = options => {
+  // @ts-expect-error
+  return window.showSaveFilePicker(options);
 };
 
-const OffscreenCanvas_ipc = {
+const name$q = 'FilePicker';
+const Commands$r = {
+  showDirectoryPicker: showDirectoryPicker,
+  showFilePicker: showFilePicker,
+  showSaveFilePicker: showSaveFilePicker
+};
+
+const FilePicker_ipc = {
   __proto__: null,
-  Commands: Commands$g,
-  name: name$f
+  Commands: Commands$r,
+  name: name$q
 };
 
-// TODO this module should be called dom or dom utils
+const requestPermission = (handle, options) => {
+  return handle.requestPermission(options);
+};
 
-// TODO this module makes for weird code splitting chunks,
-// maybe duplicate the code per file for better chunks
+const name$p = 'FileSystemHandle';
+const Commands$q = {
+  requestPermission: requestPermission
+};
 
-const findIndex = ($Container, $Target) => {
-  while ($Target && $Target.parentNode !== $Container) {
-    $Target = $Target.parentNode;
-  }
-  if (!$Target) {
-    return -1;
-  }
-  for (let i = 0; i < $Container.children.length; i++) {
-    if ($Container.children[i] === $Target) {
-      return i;
-    }
-  }
-  return -1;
+const FileSystemHandle_ipc = {
+  __proto__: null,
+  Commands: Commands$q,
+  name: name$p
 };
 
-const create$BackDrop = () => {
-  const $BackDrop = document.createElement('div');
-  $BackDrop.className = 'BackDrop';
-  return $BackDrop;
+const handleImageLoad = event => {
+  const $ImagePreviewImage = event.target;
+  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling;
+  const width = $ImagePreviewImage.naturalWidth;
+  const height = $ImagePreviewImage.naturalHeight;
+  $ImagePreviewCaption.textContent = `${width} × ${height}`;
+};
+const handleImageError$1 = event => {
+  const $ImagePreviewImage = event.target;
+  const $ImagePreviewCaption = $ImagePreviewImage.nextSibling;
+  $ImagePreviewCaption.textContent = 'Image could not be loaded';
 };
 
-const BeforeInput = 'beforeinput';
-const Blur = 'blur';
-const Click = 'click';
-const CompositionEnd = 'compositionend';
-const CompositionStart = 'compositionstart';
-const CompositionUpdate = 'compositionupdate';
-const ContextMenu = 'contextmenu';
-const Cut = 'cut';
-const DoubleClick = 'dblclick';
-const DragEnd = 'dragend';
-const DragLeave = 'dragleave';
-const DragOver = 'dragover';
-const DragStart = 'dragstart';
-const Drop = 'drop';
-const Error$3 = 'error';
-const Focus = 'focus';
-const FocusIn = 'focusin';
-const FocusOut = 'focusout';
-const Input$1 = 'input';
-const KeyDown = 'keydown';
-const KeyUp = 'keyup';
-const LostPointerCapture = 'lostpointercapture';
-const MouseDown = 'mousedown';
-const MouseEnter = 'mouseenter';
-const MouseLeave = 'mouseleave';
-const MouseUp = 'mouseup';
-const Paste = 'paste';
-const PointerDown = 'pointerdown';
-const PointerMove = 'pointermove';
-const PointerUp = 'pointerup';
-const Resize = 'resize';
-const Scroll = 'scroll';
-const TouchEnd = 'touchend';
-const TouchMove = 'touchmove';
-const TouchStart = 'touchstart';
-const Wheel = 'wheel';
+// TODO duplicate code with below
 
-// src/parts/ComponentUid/ComponentUid.ts
-var uidSymbol$1 = Symbol("uid");
-var getUidTarget$1 = $Element => {
-  while ($Element) {
-    if ($Element[uidSymbol$1]) {
-      return $Element;
-    }
-    $Element = $Element.parentNode;
-  }
-  return void 0;
+const showError = (message, y, x) => {
+  const $ImagePreviewImage = document.createElement('img');
+  $ImagePreviewImage.className = 'ImagePreviewImage';
+  $ImagePreviewImage.alt = '';
+  const $ImagePreviewCaption = document.createElement('figcaption');
+  $ImagePreviewCaption.className = 'ImagePreviewCaption';
+  $ImagePreviewCaption.textContent = message;
+  const $ImagePreview = document.createElement('figure');
+  $ImagePreview.className = 'ImagePreview';
+  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption);
+  setXAndY($ImagePreview, x, y);
+  $ImagePreview.style.display = 'none';
+  append$1($ImagePreview);
+  return {
+    $ImagePreview,
+    $ImagePreviewCaption,
+    $ImagePreviewImage
+  };
 };
-var getComponentUid = $Element => {
-  const $Target = getUidTarget$1($Element);
-  return $Target[uidSymbol$1];
+const create$G = (uri, top, left) => {
+  const $ImagePreviewImage = document.createElement('img');
+  $ImagePreviewImage.className = 'ImagePreviewImage';
+  $ImagePreviewImage.src = uri;
+  $ImagePreviewImage.alt = '';
+  const $ImagePreviewCaption = document.createElement('figcaption');
+  $ImagePreviewCaption.className = 'ImagePreviewCaption';
+  const $ImagePreview = document.createElement('figure');
+  $ImagePreview.className = 'ImagePreview';
+  $ImagePreview.append($ImagePreviewImage, $ImagePreviewCaption);
+  $ImagePreviewImage.onload = handleImageLoad;
+  $ImagePreviewImage.onerror = handleImageError$1;
+  $ImagePreview.style.top = `${top}px`;
+  $ImagePreview.style.left = `${left}px`;
+  $ImagePreview.style.display = 'none';
+  append$1($ImagePreview);
+  return {
+    $ImagePreview,
+    $ImagePreviewCaption,
+    $ImagePreviewImage
+  };
+};
+const update = (state, uri) => {
+  state.$ImagePreviewImage.uri = uri;
 };
-var getComponentUidFromEvent = event => {
-  const {
-    target,
-    currentTarget
-  } = event;
-  return getComponentUid(currentTarget || target);
+const dispose$h = state => {
+  remove$1(state.$ImagePreview);
 };
 
-// src/parts/IpcState/IpcState.ts
-var state$3 = {
-  ipc: void 0
-};
-var getIpc = () => {
-  return state$3.ipc;
+const ImagePreview$1 = {
+  __proto__: null,
+  create: create$G,
+  dispose: dispose$h,
+  showError,
+  update
 };
 
-// src/parts/ClearNode/ClearNode.ts
-var clearNode = $Node => {
-  $Node.textContent = "";
+const name$o = 'ImagePreview';
+const Commands$p = {
+  create: create$G,
+  dispose: dispose$h,
+  showError: showError,
+  update: update
 };
 
-// src/parts/ElementTags/ElementTags.ts
-var Audio$2 = "audio";
-var Button = "button";
-var Col = "col";
-var ColGroup = "colgroup";
-var Del = "del";
-var Div = "div";
-var H1 = "h1";
-var H2 = "h2";
-var H3 = "h3";
-var H4 = "h4";
-var H5 = "h5";
-var H6 = "h6";
-var I = "i";
-var Img = "img";
-var Input = "input";
-var Ins = "ins";
-var Kbd = "kbd";
-var Span = "span";
-var Table = "table";
-var TBody = "tbody";
-var Td = "td";
-var Th = "th";
-var THead = "thead";
-var Tr = "tr";
-var Article = "article";
-var Aside = "aside";
-var Footer = "footer";
-var Header = "header";
-var Nav = "nav";
-var Section = "section";
-var Search$1 = "search";
-var Dd = "dd";
-var Dl = "dl";
-var Figcaption = "figcaption";
-var Figure = "figure";
-var Hr = "hr";
-var Li = "li";
-var Ol = "ol";
-var P = "p";
-var Pre = "pre";
-var A = "a";
-var Br = "br";
-var Cite = "cite";
-var Data = "data";
-var Time$1 = "time";
-var Tfoot = "tfoot";
-var Ul = "ul";
-var Video$1 = "video";
-var TextArea = "textarea";
-var Select = "select";
-var Option = "option";
+const ImagePreview_ipc = {
+  __proto__: null,
+  Commands: Commands$p,
+  name: name$o
+};
 
-// src/parts/VirtualDomElements/VirtualDomElements.ts
-var Audio2 = 0;
-var Button2 = 1;
-var Col2 = 2;
-var ColGroup2 = 3;
-var Div2 = 4;
-var H12 = 5;
-var Input2 = 6;
-var Kbd2 = 7;
-var Span2 = 8;
-var Table2 = 9;
-var TBody2 = 10;
-var Td2 = 11;
-var Text$2 = 12;
-var Th2 = 13;
-var THead2 = 14;
-var Tr2 = 15;
-var I2 = 16;
-var Img2 = 17;
-var Ins2 = 20;
-var Del2 = 21;
-var H22 = 22;
-var H32 = 23;
-var H42 = 24;
-var H52 = 25;
-var H62 = 26;
-var Article2 = 27;
-var Aside2 = 28;
-var Footer2 = 29;
-var Header2 = 30;
-var Nav2 = 40;
-var Section2 = 41;
-var Search2 = 42;
-var Dd2 = 43;
-var Dl2 = 44;
-var Figcaption2 = 45;
-var Figure2 = 46;
-var Hr2 = 47;
-var Li2 = 48;
-var Ol2 = 49;
-var P2 = 50;
-var Pre2 = 51;
-var A2 = 53;
-var Br2 = 55;
-var Cite2 = 56;
-var Data2 = 57;
-var Time2 = 58;
-var Tfoot2 = 59;
-var Ul2 = 60;
-var Video2 = 61;
-var TextArea2 = 62;
-var Select2 = 63;
-var Option2 = 64;
+const getOrigin = () => {
+  return location.origin;
+};
+const getPathName = () => {
+  return location.pathname;
+};
+const getHref = () => {
+  return location.href;
+};
 
-// src/parts/ElementTagMap/ElementTagMap.ts
-var getElementTag = type => {
-  switch (type) {
-    case Audio2:
-      return Audio$2;
-    case H12:
-      return H1;
-    case H22:
-      return H2;
-    case H32:
-      return H3;
-    case H42:
-      return H4;
-    case H52:
-      return H5;
-    case H62:
-      return H6;
-    case Div2:
-      return Div;
-    case Kbd2:
-      return Kbd;
-    case Table2:
-      return Table;
-    case TBody2:
-      return TBody;
-    case Th2:
-      return Th;
-    case Td2:
-      return Td;
-    case THead2:
-      return THead;
-    case Tr2:
-      return Tr;
-    case Input2:
-      return Input;
-    case ColGroup2:
-      return ColGroup;
-    case Col2:
-      return Col;
-    case Button2:
-      return Button;
-    case Span2:
-      return Span;
-    case I2:
-      return I;
-    case Img2:
-      return Img;
-    case Ins2:
-      return Ins;
-    case Del2:
-      return Del;
-    case Article2:
-      return Article;
-    case Aside2:
-      return Aside;
-    case Footer2:
-      return Footer;
-    case Header2:
-      return Header;
-    case Nav2:
-      return Nav;
-    case Section2:
-      return Section;
-    case Search2:
-      return Search$1;
-    case Dd2:
-      return Dd;
-    case Dl2:
-      return Dl;
-    case Figcaption2:
-      return Figcaption;
-    case Figure2:
-      return Figure;
-    case Hr2:
-      return Hr;
-    case Li2:
-      return Li;
-    case Ol2:
-      return Ol;
-    case P2:
-      return P;
-    case Pre2:
-      return Pre;
-    case A2:
-      return A;
-    case Br2:
-      return Br;
-    case Cite2:
-      return Cite;
-    case Data2:
-      return Data;
-    case Time2:
-      return Time$1;
-    case Tfoot2:
-      return Tfoot;
-    case Ul2:
-      return Ul;
-    case Video2:
-      return Video$1;
-    case TextArea2:
-      return TextArea;
-    case Select2:
-      return Select;
-    case Option2:
-      return Option;
-    default:
-      throw new Error(`element tag not found ${type}`);
+// TODO should do nothing if it is already at this path
+const setPathName = pathName => {
+  const currentPathName = getPathName();
+  if (currentPathName === pathName) {
+    return;
   }
+  // @ts-expect-error
+  history.pushState(null, null, pathName);
+};
+const hydrate = () => {
+  // addEventListener('popstate', handlePopState)
 };
 
-// src/parts/GetEventListenerOptions/GetEventListenerOptions.ts
-var getEventListenerOptions$1 = eventName => {
-  switch (eventName) {
-    case "wheel":
-      return {
-        passive: true
-      };
-    default:
-      return void 0;
+const getTitleBarHeight = () => {
+  if (
+  // @ts-expect-error
+  navigator.windowControlsOverlay?.getTitlebarAreaRect) {
+    // @ts-expect-error
+    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect();
+    return titleBarRect.height;
   }
+  return 0;
+};
+const getBounds = () => {
+  return {
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+    titleBarHeight: getTitleBarHeight()
+  };
 };
 
-// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
-var nameAnonymousFunction$1 = (fn, name) => {
-  Object.defineProperty(fn, "name", {
-    value: name
-  });
+const getInitData = () => {
+  const initData = {
+    Location: {
+      href: getHref()
+    },
+    Layout: {
+      bounds: getBounds()
+    }
+  };
+  return initData;
 };
 
-// src/parts/GetWrappedListener/GetWrappedListener.ts
-var cache$1 = /* @__PURE__ */new Map();
-var getWrappedListener$1 = (listener, returnValue) => {
-  if (!returnValue) {
-    return listener;
-  }
-  if (!cache$1.has(listener)) {
-    const wrapped = event => {
-      const uid = getComponentUidFromEvent(event);
-      const result = listener(event);
-      if (result.length === 0) {
-        return;
-      }
-      const ipc = getIpc();
-      ipc.send("Viewlet.executeViewletCommand", uid, ...result);
-    };
-    nameAnonymousFunction$1(wrapped, listener.name);
-    cache$1.set(listener, wrapped);
-  }
-  return cache$1.get(listener);
+const name$n = 'InitData';
+const Commands$o = {
+  getInitData: getInitData
 };
 
-// src/parts/AttachEvent/AttachEvent.ts
-var attachEvent$1 = ($Node, eventMap, key, value) => {
-  const listener = eventMap[value];
-  if (!listener) {
-    console.warn("listener not found", value);
-    return;
-  }
-  const options = getEventListenerOptions$1(eventMap);
-  const wrapped = getWrappedListener$1(listener, eventMap.returnValue);
-  $Node.addEventListener(key, wrapped, options);
+const InitData_ipc = {
+  __proto__: null,
+  Commands: Commands$o,
+  name: name$n
 };
 
-// src/parts/VirtualDomElementProp/VirtualDomElementProp.ts
-var setProp = ($Element, key, value, eventMap) => {
-  switch (key) {
-    case "maskImage":
-      $Element.style.maskImage = `url('${value}')`;
-      $Element.style.webkitMaskImage = `url('${value}')`;
-      break;
-    case "paddingLeft":
-    case "paddingRight":
-    case "top":
-    case "left":
-    case "marginTop":
-      $Element.style[key] = typeof value === "number" ? `${value}px` : value;
-      break;
-    case "translate":
-      $Element.style[key] = value;
-      break;
-    case "width":
-    case "height":
-      if ($Element instanceof HTMLImageElement) {
-        $Element[key] = value;
-      } else if (typeof value === "number") {
-        $Element.style[key] = `${value}px`;
-      } else {
-        $Element.style[key] = value;
-      }
-      break;
-    case "style":
-      throw new Error("style property is not supported");
-    case "childCount":
-    case "type":
-      break;
-    case "ariaOwns":
-      if (value) {
-        $Element.setAttribute("aria-owns", value);
-      } else {
-        $Element.removeAttribute("aria-owns");
-      }
-      break;
-    case "inputType":
-      $Element.type = value;
-      break;
-    case "ariaLabelledBy":
-      $Element.setAttribute("aria-labelledby", value);
-      break;
-    case "onBlur":
-    case "onChange":
-    case "onClick":
-    case "onContextMenu":
-    case "onDblClick":
-    case "onFocus":
-    case "onFocusIn":
-    case "onFocusIn":
-    case "onFocusOut":
-    case "onInput":
-    case "onKeyDown":
-    case "onMouseDown":
-    case "onPointerDown":
-    case "onPointerOut":
-    case "onPointerOver":
-    case "onWheel":
-      const eventName = key.slice(2).toLowerCase();
-      if (!eventMap || !value) {
-        return;
-      }
-      attachEvent$1($Element, eventMap, eventName, value);
-      break;
-    default:
-      if (key.startsWith("data-")) {
-        $Element.dataset[key.slice("data-".length)] = value;
-      } else {
-        $Element[key] = value;
-      }
+const name$m = 'IpcParent';
+const Commands$n = {
+  create: create$L
+};
+
+const IpcParent_ipc = {
+  __proto__: null,
+  Commands: Commands$n,
+  name: name$m
+};
+
+const name$l = 'Layout';
+const Commands$m = {
+  getBounds: getBounds
+};
+
+const Layout_ipc = {
+  __proto__: null,
+  Commands: Commands$m,
+  name: name$l
+};
+
+const name$k = 'Location';
+const Commands$l = {
+  getHref: getHref,
+  getPathName: getPathName,
+  hydrate: hydrate,
+  setPathName: setPathName
+};
+
+const Location_ipc = {
+  __proto__: null,
+  Commands: Commands$l,
+  name: name$k
+};
+
+const getElementHeight = $Element => {
+  document.body.append($Element);
+  const height = $Element.offsetHeight;
+  $Element.remove();
+  return height;
+};
+
+const measureTextHeight = (text, fontSize, fontFamily) => {
+  string(text);
+  string(fontSize);
+  string(fontFamily);
+  const $Measure = document.createElement('div');
+  $Measure.style.contain = 'content';
+  $Measure.style.position = 'absolute';
+  $Measure.style.top = '-9999px';
+  $Measure.style.left = '-9999px';
+  $Measure.textContent = text;
+  return getElementHeight($Measure);
+};
+
+const name$j = 'MeasureTextHeight';
+const Commands$k = {
+  measureTextHeight: measureTextHeight
+};
+
+const MeasureTextHeight_ipc = {
+  __proto__: null,
+  Commands: Commands$k,
+  name: name$j
+};
+
+const measureTextBlockHeight = (text, fontSize, fontFamily, lineHeight, width) => {
+  string(text);
+  number(fontSize);
+  string(fontFamily);
+  number(width);
+  string(lineHeight);
+  const $Measure = document.createElement('div');
+  $Measure.style.width = `${width}px`;
+  $Measure.style.contain = 'content';
+  $Measure.style.position = 'absolute';
+  $Measure.style.top = '-9999px';
+  $Measure.style.left = '-9999px';
+  $Measure.style.fontSize = `${fontSize}px`;
+  $Measure.style.lineHeight = lineHeight;
+  $Measure.textContent = text;
+  return getElementHeight($Measure);
+};
+
+const name$i = 'MeasureTextBlockHeight';
+const Commands$j = {
+  measureTextBlockHeight: measureTextBlockHeight
+};
+
+const MeasureTextBlockHeight_ipc = {
+  __proto__: null,
+  Commands: Commands$j,
+  name: name$i
+};
+
+const setThemeColor = color => {
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (!meta) {
+    return;
   }
+  // @ts-expect-error
+  meta.content = color;
 };
 
-// src/parts/VirtualDomElementProps/VirtualDomElementProps.ts
-var setProps = ($Element, props, eventMap) => {
-  for (const key in props) {
-    setProp($Element, key, props[key], eventMap);
-  }
+const name$h = 'Meta';
+const Commands$i = {
+  setThemeColor: setThemeColor
 };
 
-// src/parts/VirtualDomElement/VirtualDomElement.ts
-var renderDomTextNode = element => {
-  return document.createTextNode(element.text);
+const Meta_ipc = {
+  __proto__: null,
+  Commands: Commands$i,
+  name: name$h
 };
-var renderDomElement = (element, eventMap) => {
-  const tag = getElementTag(element.type);
-  const $Element = document.createElement(tag);
-  setProps($Element, element, eventMap);
-  return $Element;
+
+const create$Notification = message => {
+  const $Notification = document.createElement('div');
+  $Notification.className = 'Notification';
+  $Notification.textContent = message;
+  return $Notification;
 };
-var render = (element, eventMap) => {
-  switch (element.type) {
-    case Text$2:
-      return renderDomTextNode(element);
-    default:
-      return renderDomElement(element, eventMap);
+const create$F = (type, message) => {
+  // TODO this pattern might be also useful for activitybar, sidebar etc., creating elements as late as possible, only when actually needed
+  const $Notification = create$Notification(message);
+  append$1($Notification);
+};
+const findIndex$1 = $Child => {
+  const $Parent = $Child.parentNode;
+  for (let i = 0; i < $Parent.children.length; i++) {
+    if ($Parent.children[i] === $Child) {
+      return i;
+    }
+  }
+  return -1;
+};
+const handleNotificationClick = event => {
+  const $Target = event.target;
+  switch ($Target.className) {
+    case 'NotificationOption':
+      const index = findIndex$1($Target);
+      send( /* Notification.handleClick */'Notification.handleClick', /* index */index);
+      break;
+  }
+};
+const create$NotificationWithOptions = (message, options) => {
+  const $NotificationMessage = document.createElement('p');
+  $NotificationMessage.className = 'NotificationMessage';
+  $NotificationMessage.textContent = message;
+  const $NotificationOptions = document.createElement('div');
+  $NotificationOptions.className = 'NotificationOptions';
+  for (const option of options) {
+    const $NotificationOption = document.createElement('button');
+    $NotificationOption.className = 'NotificationOption';
+    $NotificationOption.textContent = option;
+    $NotificationOptions.append($NotificationOption);
   }
+  const $Notification = document.createElement('div');
+  $Notification.className = 'Notification';
+  $Notification.append($NotificationMessage, $NotificationOptions);
+  $Notification.onclick = handleNotificationClick;
+  return $Notification;
+};
+const createWithOptions = (type, message, options) => {
+  const $Notification = create$NotificationWithOptions(message, options);
+  append$1($Notification);
+};
+const dispose$g = id => {
+  // const $Notification = state.$Notifications
 };
 
-// src/parts/RenderInternal/RenderInternal.ts
-var renderInternal2 = ($Parent, elements, eventMap) => {
-  const max = elements.length - 1;
-  let stack = [];
-  for (let i = max; i >= 0; i--) {
-    const element = elements[i];
-    const $Element = render(element, eventMap);
-    if (element.childCount > 0) {
-      $Element.append(...stack.slice(0, element.childCount));
-      stack = stack.slice(element.childCount);
+const name$g = 'Notification';
+
+// prettier-ignore
+const Commands$h = {
+  create: create$F,
+  createWithOptions: createWithOptions,
+  dispose: dispose$g
+};
+
+const Notification_ipc = {
+  __proto__: null,
+  Commands: Commands$h,
+  name: name$g
+};
+
+const state$3 = {
+  canvasObjects: Object.create(null)
+};
+const get$4 = id => {
+  return state$3.canvasObjects[id];
+};
+const set$3 = (canvasId, canvas) => {
+  state$3.canvasObjects[canvasId] = canvas;
+};
+
+const get$3 = id => {
+  return get$4(id);
+};
+const create$E = (canvasId, callbackId) => {
+  const canvas = document.createElement('canvas');
+  const offscreenCanvas = canvas.transferControlToOffscreen();
+  set$3(canvasId, canvas);
+  sendAndTransfer({
+    jsonrpc: '2.0',
+    id: callbackId,
+    params: [offscreenCanvas]
+  }, [offscreenCanvas]);
+};
+
+const name$f = 'OffscreenCanvas';
+
+// prettier-ignore
+const Commands$g = {
+  create: create$E
+};
+
+const OffscreenCanvas_ipc = {
+  __proto__: null,
+  Commands: Commands$g,
+  name: name$f
+};
+
+// TODO this module should be called dom or dom utils
+
+// TODO this module makes for weird code splitting chunks,
+// maybe duplicate the code per file for better chunks
+
+const findIndex = ($Container, $Target) => {
+  while ($Target && $Target.parentNode !== $Container) {
+    $Target = $Target.parentNode;
+  }
+  if (!$Target) {
+    return -1;
+  }
+  for (let i = 0; i < $Container.children.length; i++) {
+    if ($Container.children[i] === $Target) {
+      return i;
     }
-    stack.unshift($Element);
   }
-  $Parent.append(...stack);
+  return -1;
 };
 
-// src/parts/VirtualDom/VirtualDom.ts
-var renderInto = ($Parent, dom, eventMap = {}) => {
-  clearNode($Parent);
-  renderInternal2($Parent, dom, eventMap);
-};
-var render2 = (elements, eventMap = {}) => {
-  const $Root = document.createElement("div");
-  renderInternal2($Root, elements, eventMap);
-  return $Root;
+const create$BackDrop = () => {
+  const $BackDrop = document.createElement('div');
+  $BackDrop.className = 'BackDrop';
+  return $BackDrop;
 };
 
+const BeforeInput = 'beforeinput';
+const Blur = 'blur';
+const Click = 'click';
+const CompositionEnd = 'compositionend';
+const CompositionStart = 'compositionstart';
+const CompositionUpdate = 'compositionupdate';
+const ContextMenu = 'contextmenu';
+const Cut = 'cut';
+const DoubleClick = 'dblclick';
+const DragEnd = 'dragend';
+const DragLeave = 'dragleave';
+const DragOver = 'dragover';
+const DragStart = 'dragstart';
+const Drop = 'drop';
+const Error$3 = 'error';
+const Focus = 'focus';
+const FocusIn = 'focusin';
+const FocusOut = 'focusout';
+const Input = 'input';
+const KeyDown = 'keydown';
+const KeyUp = 'keyup';
+const LostPointerCapture = 'lostpointercapture';
+const MouseDown = 'mousedown';
+const MouseEnter = 'mouseenter';
+const MouseLeave = 'mouseleave';
+const MouseUp = 'mouseup';
+const Paste = 'paste';
+const PointerDown = 'pointerdown';
+const PointerMove = 'pointermove';
+const PointerUp = 'pointerup';
+const Resize = 'resize';
+const Scroll = 'scroll';
+const TouchEnd = 'touchend';
+const TouchMove = 'touchmove';
+const TouchStart = 'touchstart';
+const Wheel = 'wheel';
+
 // TODO when pressing tab -> focus next element in tab order and close menu
 
 // TODO menu and contextmenu should have own keybinding logic
@@ -4073,30 +4154,9 @@ const Transferrable_ipc = {
   name: name$8
 };
 
-const uidSymbol = Symbol('uid');
-const set$1 = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
-};
-const getUidTarget = $Element => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element;
-    }
-    $Element = $Element.parentNode;
-  }
-  return undefined;
-};
-const get = $Element => {
-  const $Target = getUidTarget($Element);
-  return $Target[uidSymbol];
-};
-const fromEvent = event => {
-  const {
-    target,
-    currentTarget
-  } = event;
-  return get(currentTarget || target);
-};
+const set$1 = setComponentUid;
+const get = getComponentUid;
+const fromEvent = getComponentUidFromEvent;
 
 const state$1 = {
   identifiers: new Uint32Array()
@@ -4123,47 +4183,7 @@ const setIdentifiers = identifiers => {
   setIdentifiers$1(identifiers);
 };
 
-const queryInputs = $Viewlet => {
-  return [...$Viewlet.querySelectorAll('input, textarea')];
-};
-const rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
-  // TODO replace this workaround with
-  // virtual dom diffing
-  const oldLeft = $Viewlet.style.left;
-  const oldTop = $Viewlet.style.top;
-  const oldWidth = $Viewlet.style.width;
-  const oldHeight = $Viewlet.style.height;
-  // @ts-expect-error
-  const focused = document.activeElement.getAttribute('name');
-  const $$Inputs = queryInputs($Viewlet);
-  const inputMap = Object.create(null);
-  for (const $Input of $$Inputs) {
-    inputMap[$Input.name] = $Input.value;
-  }
-  if (uid) {
-    const $New = render2(dom, eventMap).firstChild;
-    set$1($New, uid);
-    $Viewlet.replaceWith($New);
-    $Viewlet = $New;
-  } else {
-    renderInto($Viewlet, dom, eventMap);
-  }
-  const $$NewInputs = queryInputs($Viewlet);
-  for (const $Input of $$NewInputs) {
-    $Input.value = inputMap[$Input.name] || $Input.value || '';
-  }
-  if (focused) {
-    const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
-    if ($Focused) {
-      $Focused.focus();
-    }
-  }
-  $Viewlet.style.top = oldTop;
-  $Viewlet.style.left = oldLeft;
-  $Viewlet.style.height = oldHeight;
-  $Viewlet.style.width = oldWidth;
-  return $Viewlet;
-};
+const rememberFocus = rememberFocus$1;
 
 const ActivityBar = 'ActivityBar';
 const Audio$1 = 'Audio';
@@ -5650,7 +5670,7 @@ const create$z = async ({
   // TODO await promise
   // TODO call separate method HandleMessagePort.handleMessagePort or
   // HandleIncomingIpc.handleIncomingIpc
-  invokeAndTransfer(ipc, [port], 'initialize', 'message-port', port);
+  invokeAndTransfer$1(ipc, [port], 'initialize', 'message-port', port);
   unhandleIpc(ipc);
   return undefined;
 };
@@ -5682,7 +5702,7 @@ const create$y = async ({
   }
   const windowIpc = IpcChildWithWindow$1.wrap(window);
   handleIpcOnce(windowIpc);
-  const webContentsIds = await invokeAndTransfer(windowIpc, [port], 'CreateMessagePort.createMessagePort', ipcId);
+  const webContentsIds = await invokeAndTransfer$1(windowIpc, [port], 'CreateMessagePort.createMessagePort', ipcId);
   return webContentsIds;
 };
 
@@ -7330,7 +7350,7 @@ const showOverlayMessage = (state, x, y, content) => {
 };
 const hideOverlayMessage = state => {
   // TODO pass id of the overlay message and remove widget by id
-  for (const $Widget of state$6.widgetSet) {
+  for (const $Widget of state$5.widgetSet) {
     // @ts-expect-error
     if ($Widget.className === 'EditorOverlayMessage') {
       remove$1($Widget);
@@ -7762,7 +7782,7 @@ const setDom$4 = (state, dom) => {
   const {
     $Viewlet
   } = state;
-  rememberFocus($Viewlet, dom, ViewletExplorerEvents);
+  rememberFocus($Viewlet, dom, ViewletExplorerEvents, 0);
 };
 
 const ViewletExplorer = {
@@ -7958,7 +7978,7 @@ const attachEvents$8 = state => {
     $ListItems,
     $ScrollBar
   } = state;
-  $ExtensionHeader.addEventListener(Input$1, handleInput$6, Capture);
+  $ExtensionHeader.addEventListener(Input, handleInput$6, Capture);
   // @ts-expect-error
   $ExtensionHeader.addEventListener(Click, undefined);
   attachEvents$c($ListItems, {
@@ -8176,7 +8196,7 @@ const setDom$3 = (state, dom) => {
   const {
     $Viewlet
   } = state;
-  rememberFocus($Viewlet, dom, ViewletFindWidgetEvents);
+  rememberFocus($Viewlet, dom, ViewletFindWidgetEvents, 0);
 };
 
 const ViewletFindWidget = {
@@ -9037,7 +9057,11 @@ const ViewletMain = {
 
 // TODO
 const getUid = () => {
-  return get(document.getElementById('Main'));
+  const $Main = document.getElementById('Main');
+  if (!$Main) {
+    return 0;
+  }
+  return get($Main);
 };
 const handleTabsWheel = event => {
   const uid = getUid();
@@ -9324,7 +9348,7 @@ const setActionsDom$1 = (state$1, actions, childUid) => {
     throw new Error(`child instance not found`);
   }
   const eventMap = instance.factory.EventMap;
-  rememberFocus($PanelActions, actions, eventMap);
+  rememberFocus($PanelActions, actions, eventMap, 0);
 };
 
 const ViewletPanel = {