@lvce-editor/server 0.0.2

package/static/1914fad/packages/renderer-process/dist/rendererProcessMain.js

@@ -0,0 +1,3795 @@
+const MODULE_NOTIFICATION = 2;
+const MODULE_VIEWLET_SOURCE_CONTROL = 5;
+const MODULE_VIEW_SERVICE = 9;
+const MODULE_WINDOW = 14;
+const MODULE_DEVELOPER = 15;
+const MODULE_LAYOUT = 16;
+const MODULE_PANEL = 18;
+const MODULE_WORKBENCH = 20;
+const MODULE_VIEWLET = 21;
+const MODULE_VIEWLET_TERMINAL = 22;
+const MODULE_FIND_WIDGET = 23;
+const MODULE_KEYBINDINGS = 26;
+const MODULE_MENU = 31;
+const MODULE_RENDERER_WORKER = 33;
+const MODULE_SESSION_STORAGE = 34;
+const MODULE_LOCAL_STORAGE = 35;
+const MODULE_DIALOG = 36;
+const MODULE_EDITOR_HOVER = 37;
+const MODULE_CSS = 38;
+const MODULE_EDITOR_RENAME = 39;
+const MODULE_EDITOR_ERROR = 40;
+const MODULE_EDITOR_CONTROLLER = 41;
+const MODULE_SERVICE_WORKER = 42;
+const MODULE_IMAGE_PREVIEW = 43;
+const MODULE_LOCATION = 44;
+const MODULE_AUDIO = 45;
+const MODULE_META = 46;
+
+const state$b = {
+  commands: Object.create(null),
+  pendingModules: Object.create(null),
+};
+
+const loadModule = (moduleId) => {
+  switch (moduleId) {
+    case MODULE_NOTIFICATION:
+      return import('./Notification.ipc.js')
+    case MODULE_VIEWLET_SOURCE_CONTROL:
+      return import('./ViewletExplorer.js')
+    case MODULE_WINDOW:
+      return Promise.resolve().then(function () { return M30; })
+    case MODULE_DEVELOPER:
+      return import('./Developer.ipc.js')
+    case MODULE_LAYOUT:
+      return Promise.resolve().then(function () { return M2; })
+    case MODULE_VIEWLET:
+      return Promise.resolve().then(function () { return M6; })
+    case MODULE_VIEWLET_TERMINAL:
+      return import('./ViewletTerminal.js')
+    case MODULE_FIND_WIDGET:
+      return import('./FindWidget.ipc.js')
+    case MODULE_KEYBINDINGS:
+      return Promise.resolve().then(function () { return M7; })
+    case MODULE_MENU:
+      return import('./Menu.ipc.js')
+    case MODULE_RENDERER_WORKER:
+      return Promise.resolve().then(function () { return M17; })
+    case MODULE_SESSION_STORAGE:
+      return import('./SessionStorage.ipc.js')
+    case MODULE_LOCAL_STORAGE:
+      return Promise.resolve().then(function () { return M15; })
+    case MODULE_DIALOG:
+      return import('./Dialog.ipc.js')
+    case MODULE_EDITOR_HOVER:
+      return import('./EditorHover.ipc.js')
+    case MODULE_CSS:
+      return Promise.resolve().then(function () { return M1; })
+    case MODULE_EDITOR_RENAME:
+      return import('./EditorRename.ipc.js')
+    case MODULE_EDITOR_ERROR:
+      return import('./EditorError.ipc.js')
+    case MODULE_SERVICE_WORKER:
+      return Promise.resolve().then(function () { return M22; })
+    case MODULE_IMAGE_PREVIEW:
+      return import('./ImagePreview.ipc.js')
+    case MODULE_LOCATION:
+      return Promise.resolve().then(function () { return M26; })
+    case MODULE_AUDIO:
+      return import('./Audio.ipc.js')
+    case MODULE_META:
+      return import('./Meta.ipc.js')
+    default:
+      throw new Error('unknown module')
+  }
+};
+
+const getOrLoadModule = (moduleId) => {
+  if (!state$b.pendingModules[moduleId]) {
+    const importPromise = loadModule(moduleId);
+    state$b.pendingModules[moduleId] = importPromise.then((module) =>
+      module.__initialize__()
+    );
+  }
+  return state$b.pendingModules[moduleId]
+};
+
+const getModuleId = (commandId) => {
+  switch (commandId) {
+    case 281:
+    case 282:
+    case 283:
+    case 284:
+      return MODULE_DEVELOPER
+    case 549:
+    case 550:
+    case 551:
+      return MODULE_VIEW_SERVICE
+    case 755:
+    case 756:
+      return MODULE_KEYBINDINGS
+    case 764:
+    case 765:
+    case 766:
+    case 767:
+    case 768:
+    case 769:
+    case 770:
+    case 771:
+    case 772:
+    case 773:
+    case 774:
+    case 775:
+    case 776:
+    case 777:
+      return MODULE_EDITOR_CONTROLLER
+    case 991:
+    case 992:
+    case 993:
+    case 994:
+    case 995:
+    case 996:
+    case 997:
+    case 998:
+    case 999:
+      return MODULE_NOTIFICATION
+    case 1100:
+    case 1101:
+    case 1102:
+    case 1103:
+    case 1104:
+    case 1105:
+    case 1106:
+    case 1107:
+    case 1108:
+    case 1109:
+    case 1110:
+    case 1111:
+    case 2222:
+    case 2223:
+      return MODULE_LAYOUT
+    case 3022:
+    case 3023:
+    case 3024:
+    case 3025:
+    case 3026:
+    case 3027:
+    case 3028:
+    case 3029:
+    case 3030:
+    case 3031:
+    case 3032:
+    case 3033:
+    case 3034:
+    case 3035:
+    case 3036:
+    case 3037:
+    case 3038:
+      return MODULE_VIEWLET
+    case 3211:
+    case 3212:
+    case 3213:
+    case 3214:
+    case 3215:
+    case 3216:
+    case 3217:
+    case 3218:
+    case 3219:
+      return MODULE_AUDIO
+    case 3666:
+    case 3667:
+    case 3668:
+    case 3669:
+    case 3670:
+    case 3671:
+    case 3672:
+    case 3673:
+    case 3674:
+    case 3675:
+    case 3676:
+    case 3677:
+    case 3678:
+    case 3679:
+      return MODULE_IMAGE_PREVIEW
+    case 3700:
+    case 3701:
+    case 3702:
+    case 3703:
+    case 3704:
+    case 3705:
+      return MODULE_EDITOR_ERROR
+    case 4100:
+    case 4102:
+      return MODULE_FIND_WIDGET
+    case 4512:
+      return MODULE_EDITOR_RENAME
+    case 4551:
+      return MODULE_CSS
+    case 5611:
+    case 5612:
+    case 5613:
+    case 5614:
+    case 5615:
+    case 5616:
+    case 5617:
+    case 5618:
+    case 5619:
+      return MODULE_LOCATION
+    case 6216:
+    case 6217:
+    case 6218:
+    case 6219:
+    case 6220:
+    case 6221:
+    case 6222:
+    case 6223:
+    case 6224:
+      return MODULE_EDITOR_HOVER
+    case 6661:
+    case 6662:
+    case 6663:
+    case 6664:
+      return MODULE_PANEL
+    case 8181:
+      return MODULE_VIEWLET_SOURCE_CONTROL
+    case 33111:
+      return MODULE_WORKBENCH
+    case 7833:
+    case 7834:
+    case 7835:
+    case 7836:
+    case 7837:
+    case 7838:
+    case 7839:
+    case 7840:
+      return MODULE_DIALOG
+    case 7900:
+    case 7901:
+    case 7902:
+    case 7903:
+    case 7904:
+    case 7905:
+    case 7906:
+    case 7907:
+    case 7908:
+    case 7909:
+      return MODULE_MENU
+    case 8080:
+    case 8081:
+    case 8082:
+    case 8083:
+    case 8084:
+    case 8085:
+      return MODULE_WINDOW
+    case 8976:
+    case 8977:
+    case 8978:
+      return MODULE_SESSION_STORAGE
+    case 8986:
+    case 8987:
+    case 8988:
+      return MODULE_LOCAL_STORAGE
+    case 9922:
+      return MODULE_VIEWLET_TERMINAL
+    case 11122:
+      return MODULE_META
+    case 43725:
+    case 43726:
+    case 43727:
+    case 43728:
+    case 43729:
+      return MODULE_SERVICE_WORKER
+    case 909090:
+      return MODULE_RENDERER_WORKER
+    default:
+      throw new Error(`command ${commandId} not found`)
+  }
+};
+
+const loadCommand = async (command) => {
+  await getOrLoadModule(getModuleId(command));
+};
+
+const register$1 = (commandId, listener) => {
+  state$b.commands[commandId] = listener;
+};
+
+const hasThrown = new Set();
+
+const executeCommandAsync = async (command, ...args) => {
+  try {
+    await loadCommand(command);
+  } catch (error) {
+    // @ts-ignore
+    throw new Error(`Failed to load command ${command}`, {
+      cause: error,
+    })
+  }
+  if (!(command in state$b.commands)) {
+    if (hasThrown.has(command)) {
+      return
+    }
+    hasThrown.add(command);
+    throw new Error(`Command did not register "${command}"`)
+  }
+  return execute(command, ...args)
+};
+
+const execute = (command, ...args) => {
+  if (command in state$b.commands) {
+    return state$b.commands[command](...args)
+  }
+  return executeCommandAsync(command, ...args)
+};
+
+const setInlineStyle = (id, css) => {
+  const $ExistingStyle = document.getElementById(id);
+  if ($ExistingStyle) {
+    $ExistingStyle.textContent = css;
+  } else {
+    const $Style = document.createElement('style');
+    $Style.id = id;
+    $Style.textContent = css;
+    document.head.append($Style);
+  }
+};
+
+const __initialize__$8 = () => {
+  register$1(4551, setInlineStyle);
+};
+
+var M1 = {
+  __proto__: null,
+  __initialize__: __initialize__$8
+};
+
+/* istanbul ignore file */
+
+// TODO this should always be completely tree shaken out during build
+
+/**
+ * @returns {'electron'|'remote'|'web'}
+ */
+const getPlatform = () => {
+  // @ts-ignore
+  if (typeof PLATFORM !== 'undefined') {
+    // @ts-ignore
+    return PLATFORM
+  }
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
+    return 'remote'
+  }
+  // @ts-ignore
+  const userAgentData = navigator.userAgentData;
+  // TODO this is probably a bad check but electron doesn't deliver anything and
+  // this will be tree shaken out anyway during build
+  if (userAgentData && userAgentData.brands.length === 0) {
+    return 'electron'
+  }
+  return 'remote'
+};
+
+const platform = getPlatform();
+
+// TODO treeshake this function out when targeting electron
+
+const state$a = {
+  cachedIsMobileOrTablet: undefined,
+  isMobileOrTablet() {
+    // @ts-ignore
+    const userAgentData = navigator.userAgentData;
+    if (userAgentData && userAgentData.mobile) {
+      return true
+    }
+    // copied from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
+    let check = false
+    ;(function (a) {
+      if (
+        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+          a
+        ) ||
+        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[23]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
+          a.slice(0, 4)
+        )
+      ) {
+        check = true;
+      }
+      // @ts-ignore
+    })(navigator.userAgent || navigator.vendor || window.opera);
+    return check
+  },
+  getAssetDir() {
+    // @ts-ignore
+    if (typeof ASSET_DIR !== 'undefined') {
+      // @ts-ignore
+      return ASSET_DIR
+    }
+    if (platform === 'electron') {
+      return '../../../../..'
+    }
+    return ''
+  },
+  supportsHtml5Dialog() {
+    const $Dialog = document.createElement('dialog');
+    // @ts-ignore
+    return typeof $Dialog.showModal === 'function'
+  },
+  isElectron() {
+    return (
+      // @ts-ignore
+      window.myApi &&
+      // @ts-ignore
+      window.myApi.ipcConnect &&
+      // @ts-ignore
+      typeof window.myApi.ipcConnect === 'function'
+    )
+  },
+};
+
+const isMobileOrTablet = () => {
+  return state$a.isMobileOrTablet()
+};
+
+// TODO if necessary support more browser detection
+const getBrowser = () => {
+  if (platform === 'electron') {
+    return 'electron'
+  }
+  // @ts-ignore
+  const userAgentData = navigator.userAgentData;
+  if (userAgentData) {
+    for (const brand of userAgentData.brands) {
+      const actualBrand = brand.brand.toLowerCase();
+      switch (actualBrand) {
+        case 'firefox':
+          return 'firefox'
+        case 'chromium':
+          return 'chromium'
+      }
+    }
+  }
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes('firefox')) {
+    return 'firefox'
+  }
+  if (userAgent.includes('Electron')) {
+    return 'electron'
+  }
+  return 'chromium'
+};
+
+const getAssetDir = () => {
+  return state$a.getAssetDir()
+};
+
+const supportsHtml5Dialog = () => {
+  return state$a.supportsHtml5Dialog()
+};
+
+const isElectron = () => {
+  return state$a.isElectron()
+};
+
+var M18 = {
+  __proto__: null,
+  platform: platform,
+  state: state$a,
+  isMobileOrTablet: isMobileOrTablet,
+  getBrowser: getBrowser,
+  getAssetDir: getAssetDir,
+  supportsHtml5Dialog: supportsHtml5Dialog,
+  isElectron: isElectron
+};
+
+/* istanbul ignore file */
+const METHOD_MESSAGE_PORT = 1;
+const METHOD_MODULE_WORKER = 2;
+const METHOD_REFERENCE_PORT = 3;
+
+/**
+ * @type {number}
+ */
+const METHOD_PREFERRED = METHOD_MESSAGE_PORT;
+
+const createModuleWorker = (url) => {
+  return new Worker(url, {
+    type: 'module',
+  })
+};
+
+const createMessagePort = async (url) => {
+  const port = await new Promise((resolve) => {
+    globalThis.acceptPort = resolve;
+    import(url);
+  });
+  delete globalThis.acceptPort;
+  return port
+};
+
+const createReferencePort = async (url) => {
+  const referencePort = await new Promise((resolve) => {
+    globalThis.acceptReferencePort = resolve;
+    import(url);
+  });
+  delete globalThis.acceptReferencePort;
+  return referencePort
+};
+
+const create$5 = async (url) => {
+  switch (METHOD_PREFERRED) {
+    case METHOD_MODULE_WORKER:
+      return createModuleWorker(url)
+    case METHOD_MESSAGE_PORT:
+      return createMessagePort(url)
+    case METHOD_REFERENCE_PORT:
+      return createReferencePort(url)
+    default:
+      throw new Error('unknown method')
+  }
+};
+
+// const URL_RENDERER_WORKER =
+// '/packages/renderer-worker/distmin/rendererWorkerMain-0ead0bed.js'
+
+const state$9 = {
+  send(message) {},
+  sendAndTransfer(message, transferables) {},
+};
+
+const handleMessageFromRendererWorker = (event) => {
+  const data = event.data;
+  if (event.ports && event.ports.length > 0) {
+    execute(...data, ...event.ports);
+  } else {
+    execute(...data);
+  }
+};
+
+const hydrate$3 = async (config) => {
+  const assetDir = getAssetDir();
+  const urlRendererWorker = `${assetDir}/packages/renderer-worker/src/rendererWorkerMain.js`;
+  const rendererWorker = await create$5(urlRendererWorker);
+  rendererWorker.onmessage = handleMessageFromRendererWorker;
+  state$9.send = (message) => {
+    rendererWorker.postMessage(message);
+  };
+  state$9.sendAndTransfer = (message, transferables) => {
+    rendererWorker.postMessage(message, transferables);
+  };
+};
+
+const send = (message) => {
+  if (!message[0]) {
+    console.warn('invalid message', message);
+    return
+  }
+  state$9.send(message);
+};
+
+const handleInvoke = async (callbackId, method, ...params) => {
+  let result;
+  try {
+    result = await execute(method, ...params);
+  } catch (error) {
+    state$9.send([
+      /* Callback.reject */ 67331,
+      /* callbackId */ callbackId,
+      /* error */ error,
+    ]);
+    return
+  }
+  state$9.send([
+    /* Callback.resolve */ 67330,
+    /* callbackId */ callbackId,
+    /* result */ result,
+  ]);
+};
+
+const state$8 = {
+  $ActivityBar: undefined,
+  $StatusBar: undefined,
+  $TitleBar: undefined,
+  $Main: undefined,
+  $SideBar: undefined,
+  $Panel: undefined,
+  $Workbench: undefined,
+  $SashSideBar: undefined,
+  $SashPanel: undefined,
+};
+
+// TODO when nodes are not visible, they are still kept in memory as detached dom nodes
+// maybe it doesn't matter but maybe they should be garbage collected
+
+const update = (points) => {
+  const $ActivityBar = state$8.$ActivityBar;
+  const $Main = state$8.$Main;
+  const $TitleBar = state$8.$TitleBar;
+  const $SideBar = state$8.$SideBar;
+  const $StatusBar = state$8.$StatusBar;
+  const $Panel = state$8.$Panel;
+  const $SashSideBar = state$8.$SashSideBar;
+  const $SashPanel = state$8.$SashPanel;
+
+  if (points.activityBarVisible) {
+    $ActivityBar.style.top = `${points.activityBarTop}px`;
+    $ActivityBar.style.left = `${points.activityBarLeft}px`;
+    $ActivityBar.style.width = `${points.activityBarWidth}px`;
+    $ActivityBar.style.height = `${points.activityBarHeight}px`;
+    $ActivityBar.style.display = '';
+  } else {
+    $ActivityBar.style.display = 'none';
+  }
+  if (points.mainVisible) {
+    $Main.style.top = `${points.mainTop}px`;
+    $Main.style.left = `${points.mainLeft}px`;
+    $Main.style.width = `${points.mainWidth}px`;
+    $Main.style.height = `${points.mainHeight}px`;
+    $Main.style.display = '';
+  } else {
+    $Main.style.display = 'none';
+  }
+  if (points.panelVisible) {
+    $Panel.style.top = `${points.panelTop}px`;
+    $Panel.style.left = `${points.panelLeft}px`;
+    $Panel.style.width = `${points.panelWidth}px`;
+    $Panel.style.height = `${points.panelHeight}px`;
+    $Panel.style.display = '';
+
+    $SashPanel.style.top = `${points.panelTop}px`;
+    $SashPanel.style.left = `${points.panelLeft}px`;
+    $SashPanel.style.width = `${points.panelWidth}px`;
+  } else {
+    $Panel.style.display = 'none';
+  }
+  if (points.sideBarVisible) {
+    $SideBar.style.top = `${points.sideBarTop}px`;
+    $SideBar.style.left = `${points.sideBarLeft}px`;
+    $SideBar.style.width = `${points.sideBarWidth}px`;
+    $SideBar.style.height = `${points.sideBarHeight}px`;
+    $SideBar.style.display = '';
+
+    $SashSideBar.style.left = `${points.sideBarLeft}px`;
+    $SashSideBar.style.top = `${points.sideBarTop}px`;
+    $SashSideBar.style.height = `${points.sideBarHeight}px`;
+  } else {
+    $SideBar.style.display = 'none';
+  }
+  if (points.statusBarVisible) {
+    $StatusBar.style.top = `${points.statusBarTop}px`;
+    $StatusBar.style.left = `${points.statusBarLeft}px`;
+    $StatusBar.style.width = `${points.statusBarWidth}px`;
+    $StatusBar.style.height = `${points.statusBarHeight}px`;
+    $StatusBar.style.display = '';
+  } else {
+    $StatusBar.style.display = 'none';
+  }
+  if (points.titleBarVisible) {
+    $TitleBar.style.top = `${points.titleBarTop}px`;
+    $TitleBar.style.left = `${points.titleBarLeft}px`;
+    $TitleBar.style.width = `${points.titleBarWidth}px`;
+    $TitleBar.style.height = `${points.titleBarHeight}px`;
+    $TitleBar.style.display = '';
+  } else {
+    // TODO remove elements from dom instead of hiding them
+    $TitleBar.style.display = 'none';
+  }
+};
+
+// export const get$ActivityBar = () => {
+//   return state.$ActivityBar
+// }
+
+// export const get$SideBar = () => {
+//   return state.$SideBar
+// }
+
+// export const get$Panel = () => {
+//   return state.$Panel
+// }
+
+// export const get$TitleBar = () => {
+//   return state.$TitleBar
+// }
+
+// export const get$Main = () => {
+//   return state.$Main
+// }
+
+const getTitleBarHeight = () => {
+  if (
+    // @ts-ignore
+    navigator.windowControlsOverlay &&
+    // @ts-ignore
+    navigator.windowControlsOverlay.getTitlebarAreaRect
+  ) {
+    // @ts-ignore
+    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect();
+    return titleBarRect.height
+  }
+  return 0
+};
+
+const getBounds = () => {
+  return {
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+    titleBarHeight: getTitleBarHeight(),
+  }
+};
+
+const handleResize = (event) => {
+  send([
+    /* Layout.handleResize */ 1111,
+    /* bounds */ getBounds(),
+  ]);
+};
+
+const handleSashPointerMove = (event) => {
+  // console.log({ event })
+  const x = event.clientX;
+  console.log({ x });
+  send([/* Layout.handleSashSideBarMove */ 1112, /* x */ x]);
+};
+
+const handleSashPointerUp = () => {
+  document.body.style.removeProperty('cursor');
+  window.removeEventListener('pointermove', handleSashPointerMove);
+  window.removeEventListener('pointerup', handleSashPointerUp);
+  const $Style = document.getElementById('SashStyle');
+  // @ts-ignore
+  $Style.remove();
+};
+
+const handleSashPointerDown = () => {
+  // TODO maybe add a class to body instead?
+  const $Style = document.createElement('style');
+  $Style.id = 'SashStyle';
+  $Style.textContent = `* {
+  cursor: col-resize !important;
+  pointer-events: none;
+}
+
+.SashVertical {
+  pointer-events: all;
+}
+.
+`;
+  document.head.append($Style);
+  window.addEventListener('pointermove', handleSashPointerMove);
+  window.addEventListener('pointerup', handleSashPointerUp);
+};
+
+const hydrate$2 = (points) => {
+  const $ActivityBar = document.createElement('div');
+  $ActivityBar.id = 'ActivityBar';
+
+  const $StatusBar = document.createElement('div');
+  $StatusBar.id = 'StatusBar';
+
+  const $TitleBar = document.createElement('div');
+  $TitleBar.id = 'TitleBar';
+
+  const $Main = document.createElement('main');
+  $Main.id = 'Main';
+
+  const $SideBar = document.createElement('div');
+  $SideBar.id = 'SideBar';
+
+  const $Panel = document.createElement('div');
+  $Panel.id = 'Panel';
+
+  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
+  const $SashSideBar = document.createElement('div');
+  $SashSideBar.className = 'SashVertical';
+
+  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
+  const $SashPanel = document.createElement('div');
+  $SashPanel.className = 'SashHorizontal';
+
+  const $Workbench = document.createElement('div');
+  $Workbench.id = 'Workbench';
+  $Workbench.append(
+    $TitleBar,
+    $Main,
+    $SideBar,
+    $ActivityBar,
+    $Panel,
+    $StatusBar,
+    $SashSideBar,
+    $SashPanel
+  );
+  // TODO don't like the random side effects here
+  state$8.$ActivityBar = $ActivityBar;
+  state$8.$Main = $Main;
+  state$8.$Panel = $Panel;
+  state$8.$SideBar = $SideBar;
+  state$8.$StatusBar = $StatusBar;
+  state$8.$TitleBar = $TitleBar;
+  state$8.$Workbench = $Workbench;
+  state$8.$SashPanel = $SashPanel;
+  state$8.$SashSideBar = $SashSideBar;
+  update(points);
+  // document.body.setAttribute('role', 'application') // TODO this doesn't seem to work
+  $Workbench.setAttribute('role', 'application');
+  document.body.append($Workbench);
+  window.addEventListener('resize', handleResize, { passive: true });
+  $SashSideBar.addEventListener('pointerdown', handleSashPointerDown);
+};
+
+const hide$1 = () => {
+  state$8.$Workbench.remove();
+  window.removeEventListener('resize', handleResize);
+};
+
+const __initialize__$7 = () => {
+  register$1(1100, update);
+  // Command.register(1101, Layout.hideSideBar)
+  // Command.register(1102, Layout.toggleSideBar)
+  // Command.register(1103, Layout.showPanel)
+  // Command.register(1104, Layout.hidePanel)
+  // Command.register(1105, Layout.togglePanel)
+  // Command.register(1106, Layout.showActivityBar)
+  // Command.register(1107, Layout.hideActivityBar)
+  // Command.register(1108, Layout.toggleActivityBar)
+  register$1(1109, hydrate$2);
+  register$1(1110, hide$1);
+  register$1(1111, getBounds);
+};
+
+var M2 = {
+  __proto__: null,
+  __initialize__: __initialize__$7
+};
+
+const state$7 = {
+  // contexts: Object.create(null),
+  contexts: {},
+};
+
+// TODO all context keys should be numeric
+// comparing numbers is faster and more efficient than comparing strings every time
+// e.g. map 'focus.editor' -> 1
+// e.g. map 'focus.explorer' -> 2
+// Context.get(1), Context.get(2)
+
+const get$1 = (key) => {
+  return state$7.contexts[key]
+};
+
+const set = (key, value) => {
+  state$7.contexts[key] = value;
+};
+
+const remove$1 = (key) => {
+  delete state$7.contexts[key];
+};
+
+// TODO not sure if its worth to have a separate module for this or keep it inside Context.js
+// export const setFocus = (item) => {
+//   if (Context.state.currentFocus) {
+//     Context.remove(Context.state.currentFocus)
+//   }
+//   Context.set(`focus.${item}`, true)
+// }
+
+const state$6 = {
+  $PreviousFocusElement: undefined,
+  currentFocus: '',
+};
+
+const setFocus = (key) => {
+  if (state$6.currentFocus) {
+    remove$1(state$6.currentFocus);
+  }
+  // TODO could make focus key numeric enum which would be more efficient
+  state$6.currentFocus = `focus.${key}`;
+  set(state$6.currentFocus, true);
+};
+
+const setAdditionalFocus = (key) => {
+  // TODO key should be numeric
+  set(`focus.${key}`, true);
+};
+
+const removeAdditionalFocus = (key) => {
+  remove$1(`focus.${key}`);
+};
+
+const focus$4 = ($Element, key) => {
+  if ($Element === document.activeElement) {
+    console.log('focus return');
+    return
+  }
+  console.log(state$6.$PreviousFocusElement);
+  state$6.$PreviousFocusElement = document.activeElement;
+  $Element.focus({ preventScroll: true });
+  setFocus(key);
+};
+
+const focusPrevious = () => {
+  if (state$6.$PreviousFocusElement) {
+    console.log(state$6.$PreviousFocusElement);
+    state$6.$PreviousFocusElement.focus();
+  }
+};
+
+var M5 = {
+  __proto__: null,
+  state: state$6,
+  setFocus: setFocus,
+  setAdditionalFocus: setAdditionalFocus,
+  removeAdditionalFocus: removeAdditionalFocus,
+  focus: focus$4,
+  focusPrevious: focusPrevious
+};
+
+const state$5 = {
+  viewletStates: Object.create(null),
+};
+
+const getTarget = (event) => {
+  const $Target = event.target;
+  const $WantedTarget = $Target.closest('.Viewlet');
+  return $WantedTarget
+};
+
+const getStateFromEvent = (event) => {
+  const $Target = getTarget(event);
+  if (!$Target) {
+    console.warn('invalid handler');
+    return undefined
+  }
+  const id = $Target.dataset.viewletId;
+  const viewletState = state$5.viewletStates[id];
+  return viewletState
+};
+
+// TODO test deleteState function
+const deleteState = (id) => {
+  delete state$5.viewletStates[id];
+};
+
+const create$Cursor = () => {
+  const $Cursor = document.createElement('div');
+  $Cursor.className = 'EditorCursor';
+  return $Cursor
+};
+
+const render$Cursor = ($Cursor, $Texts, cursor) => {
+  $Cursor.style.top = `${cursor.top}px`;
+  const range = document.createRange();
+  if (cursor.leftIndex === -1) {
+    console.warn('cursor left is negative');
+    $Cursor.style.left = `0px`; // TODO need to compute column width, this would only work for monospace fonts
+    return
+  }
+  const $Row = $Texts.children[cursor.topIndex];
+  if (!$Row) {
+    console.warn('no row', cursor, $Row);
+    return
+  }
+  const $Node = $Row.children[cursor.leftIndex];
+  if (!$Node) {
+    console.warn('no node', cursor, $Row);
+    return
+  }
+  if (cursor.leftIndex === 0 && cursor.remainingOffset === 0) {
+    $Cursor.style.left = `0px`;
+  } else {
+    const $TextNode = $Node.firstChild;
+    range.setStart($TextNode, cursor.remainingOffset);
+    range.setEnd($TextNode, cursor.remainingOffset);
+    const rect = range.getBoundingClientRect();
+    const left = Math.round(rect.left);
+    $Cursor.style.left = `${left}px`;
+  }
+};
+
+const render$CursorsLess = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < $Cursors.children.length; i++) {
+    render$Cursor($Cursors.children[i], cursors[i]);
+  }
+  const fragment = document.createDocumentFragment();
+  for (let i = $Cursors.children.length; i < cursors.length; i++) {
+    const $Cursor = create$Cursor();
+    render$Cursor($Cursor, $Texts, cursors[i]);
+    fragment.append($Cursor);
+  }
+  $Cursors.append(fragment);
+};
+
+const render$CursorsEqual = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < cursors.length; i++) {
+    render$Cursor($Cursors.children[i], $Texts, cursors[i]);
+  }
+};
+
+const render$CursorsMore = ($Cursors, $Texts, cursors) => {
+  for (let i = 0; i < cursors.length; i++) {
+    render$Cursor($Cursors.children[i], $Texts, cursors[i]);
+  }
+  const diff = $Cursors.children.length - cursors.length;
+  for (let i = 0; i < diff; i++) {
+    $Cursors.lastChild.remove();
+  }
+};
+
+const render$Cursors = ($Cursors, $Texts, cursors) => {
+  if ($Cursors.children.length < cursors.length) {
+    render$CursorsLess($Cursors, $Texts, cursors);
+  } else if ($Cursors.children.length === cursors.length) {
+    render$CursorsEqual($Cursors, $Texts, cursors);
+  } else {
+    render$CursorsMore($Cursors, $Texts, cursors);
+  }
+};
+
+const renderCursorsNative = (state, cursors) => {
+  if (cursors.length > 1) {
+    console.warn('[editor] cannot render more than one native cursor');
+    return
+  }
+  if (cursors.length === 0) {
+    return
+  }
+  const cursor = cursors[0];
+  const $Rows = state.$LayerText;
+  const $StartRow = $Rows.children[cursor.rowIndex];
+  let startOffset = 0;
+  let $Anchor;
+  for (let i = 0; i < $StartRow.children.length; i++) {
+    if (startOffset >= cursor.columnIndex) {
+      console.log({ startOffset });
+      $Anchor = $StartRow.children[i - 1].firstChild;
+      startOffset -= $Anchor.textContent.length;
+      startOffset = cursor.columnIndex - startOffset;
+      break
+    }
+    startOffset += $StartRow.children[i].textContent.length;
+  }
+  if (!$Anchor) {
+    $Anchor = $StartRow.children[$StartRow.children.length - 1].firstChild;
+    startOffset -= $Anchor.textContent.length;
+    startOffset = cursor.columnIndex - startOffset;
+  }
+  const selection = document.getSelection();
+  if (
+    selection.anchorNode === $Anchor &&
+    selection.focusNode === $Anchor &&
+    selection.anchorOffset === startOffset &&
+    selection.focusOffset === startOffset
+  ) {
+    return
+  }
+  state.shouldIgnoreSelectionChange = true;
+  const documentRange = document.createRange();
+  documentRange.setStart($Anchor, startOffset);
+  documentRange.setEnd($Anchor, startOffset);
+  selection.removeAllRanges();
+  selection.addRange(documentRange);
+};
+
+const setCursors = (state, cursors) => {
+  if (isMobileOrTablet()) {
+    renderCursorsNative(state, cursors);
+    return
+  }
+  render$Cursors(state.$LayerCursor, state.$LayerText, cursors);
+};
+
+const create$Diagnostic = () => {
+  const $Diagnostic = document.createElement('div');
+  $Diagnostic.className = 'EditorDiagnostic';
+  return $Diagnostic
+};
+
+const render$Diagnostic = ($Diagnostic, diagnostic) => {
+  $Diagnostic.style.top = `${diagnostic.top}px`;
+  $Diagnostic.style.left = `${diagnostic.left}px`;
+  $Diagnostic.style.width = `${diagnostic.width}px`;
+  $Diagnostic.style.height = `${diagnostic.height}px`;
+};
+
+const render$DiagnosticsLess = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < $Diagnostics.children.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
+  }
+  const fragment = document.createDocumentFragment();
+  for (let i = $Diagnostics.children.length; i < diagnostics.length; i++) {
+    const $Diagnostic = create$Diagnostic();
+    render$Diagnostic($Diagnostic, diagnostics[i]);
+    fragment.append($Diagnostic);
+  }
+  $Diagnostics.append(fragment);
+};
+
+const render$DiagnosticsEqual = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < diagnostics.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
+  }
+};
+
+const render$DiagnosticsMore = ($Diagnostics, diagnostics) => {
+  for (let i = 0; i < diagnostics.length; i++) {
+    render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
+  }
+  const diff = $Diagnostics.children.length - diagnostics.length;
+  for (let i = 0; i < diff; i++) {
+    $Diagnostics.lastChild.remove();
+  }
+};
+
+const render$Diagnostics = ($Diagnostics, diagnostics) => {
+  if ($Diagnostics.children.length < diagnostics.length) {
+    render$DiagnosticsLess($Diagnostics, diagnostics);
+  } else if ($Diagnostics.children.length === diagnostics.length) {
+    render$DiagnosticsEqual($Diagnostics, diagnostics);
+  } else {
+    render$DiagnosticsMore($Diagnostics, diagnostics);
+  }
+};
+
+const setDiagnostics$1 = (state, diagnostics) => {
+  render$Diagnostics(state.$LayerDiagnostics, diagnostics);
+};
+
+const setPosition = (state, scrollBarY, scrollBarHeight) => {
+  state.$ScrollBarThumb.style.top = `${scrollBarY}px`;
+  state.$ScrollBarThumb.style.height = `${scrollBarHeight}px`;
+};
+
+// TODO scrollbar decorations should be own layer maybe
+const create$ScrollBarDiagnostic = () => {
+  const $ScrollBarDiagnostic = document.createElement('div');
+  $ScrollBarDiagnostic.className = 'ScrollBarDiagnostic';
+  return $ScrollBarDiagnostic
+};
+
+const render$ScrollBarDiagnostic = (
+  $ScrollBarDiagnostic,
+  scrollBarDiagnostic
+) => {
+  $ScrollBarDiagnostic.style.top = `${scrollBarDiagnostic.top}px`;
+};
+
+const render$ScrollBarDiagnosticsLess = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < $ScrollBarDiagnostics.children.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    );
+  }
+  const fragment = document.createDocumentFragment();
+  for (
+    let i = $ScrollBarDiagnostics.children.length;
+    i < scrollBarDiagnostics.length;
+    i++
+  ) {
+    const $ScrollBarDiagnostic = create$ScrollBarDiagnostic();
+    render$ScrollBarDiagnostic($ScrollBarDiagnostic, scrollBarDiagnostics[i]);
+    fragment.append($ScrollBarDiagnostic);
+  }
+  $ScrollBarDiagnostics.append(fragment);
+};
+
+const render$ScrollBarDiagnosticsEqual = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    );
+  }
+};
+
+const render$ScrollBarDiagnosticsMore = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+    render$ScrollBarDiagnostic(
+      $ScrollBarDiagnostics.children[i],
+      scrollBarDiagnostics[i]
+    );
+  }
+  const diff =
+    $ScrollBarDiagnostics.children.length - scrollBarDiagnostics.length;
+  for (let i = 0; i < diff; i++) {
+    $ScrollBarDiagnostics.lastChild.remove();
+  }
+};
+
+const render$ScrollBarDiagnostics = (
+  $ScrollBarDiagnostics,
+  scrollBarDiagnostics
+) => {
+  if ($ScrollBarDiagnostics.children.length < scrollBarDiagnostics.length) {
+    render$ScrollBarDiagnosticsLess($ScrollBarDiagnostics, scrollBarDiagnostics);
+  } else if (
+    $ScrollBarDiagnostics.children.length === scrollBarDiagnostics.length
+  ) {
+    render$ScrollBarDiagnosticsEqual(
+      $ScrollBarDiagnostics,
+      scrollBarDiagnostics
+    );
+  } else {
+    render$ScrollBarDiagnosticsMore($ScrollBarDiagnostics, scrollBarDiagnostics);
+  }
+};
+
+const setDiagnostics = (editor, scrollBarDiagnostics) => {
+  render$ScrollBarDiagnostics(
+    editor.$ScrollBarDiagnostics,
+    scrollBarDiagnostics
+  );
+};
+
+const create$Selection = () => {
+  const $Selection = document.createElement('div');
+  $Selection.className = 'EditorSelection';
+  return $Selection
+};
+
+const render$Selection = ($Selection, selection) => {
+  // TODO have many decorations per row
+  // no absolute positioning
+  $Selection.style.top = `${selection.top}px`;
+  $Selection.style.left = `${selection.left}px`;
+  $Selection.style.width = `${selection.width}px`;
+  $Selection.style.height = `${selection.height}px`;
+};
+
+const render$SelectionsLess = ($Selections, selections) => {
+  for (let i = 0; i < $Selections.children.length; i++) {
+    render$Selection($Selections.children[i], selections[i]);
+  }
+  const fragment = document.createDocumentFragment();
+  for (let i = $Selections.children.length; i < selections.length; i++) {
+    const $Selection = create$Selection();
+    render$Selection($Selection, selections[i]);
+    fragment.append($Selection);
+  }
+  $Selections.append(fragment);
+};
+
+const render$SelectionsEqual = ($Selections, selections) => {
+  for (let i = 0; i < selections.length; i++) {
+    render$Selection($Selections.children[i], selections[i]);
+  }
+};
+
+const render$SelectionsMore = ($Selections, selections) => {
+  for (let i = 0; i < selections.length; i++) {
+    render$Selection($Selections.children[i], selections[i]);
+  }
+  const diff = $Selections.children.length - selections.length;
+  for (let i = 0; i < diff; i++) {
+    $Selections.lastChild.remove();
+  }
+};
+
+const render$Selections = ($Selections, selections) => {
+  if ($Selections.children.length < selections.length) {
+    render$SelectionsLess($Selections, selections);
+  } else if ($Selections.children.length === selections.length) {
+    render$SelectionsEqual($Selections, selections);
+  } else {
+    render$SelectionsMore($Selections, selections);
+  }
+};
+
+const renderSelectionsNative = (state, selections) => {
+  if (selections.length > 1) {
+    console.warn('[editor] cannot render more than one native selection');
+
+  }
+};
+
+const setSelections$1 = (state, selections) => {
+  if (isMobileOrTablet()) {
+    renderSelectionsNative(state, selections);
+    return
+  }
+  render$Selections(state.$LayerSelections, selections);
+};
+
+// TODO treeshake out this whole module in production
+
+const getType = (value) => {
+  switch (typeof value) {
+    case 'number':
+      return 'number'
+    case 'function':
+      return 'function'
+    case 'string':
+      return 'string'
+    case 'object':
+      if (value === null) {
+        return 'null'
+      }
+      if (Array.isArray(value)) {
+        return 'array'
+      }
+      return 'object'
+    case 'boolean':
+      return 'boolean'
+    default:
+      return 'unknown'
+  }
+};
+
+const object = (value) => {
+  const type = getType(value);
+  if (type !== 'object') {
+    throw new Error('expected value to be of type object')
+  }
+};
+
+const number = (value) => {
+  const type = getType(value);
+  if (type !== 'number') {
+    throw new Error('expected value to be of type number')
+  }
+};
+
+const array = (value) => {
+  const type = getType(value);
+  if (type !== 'array') {
+    throw new Error('expected value to be of type array')
+  }
+};
+
+const string = (value) => {
+  const type = getType(value);
+  if (type !== 'string') {
+    throw new Error('expected value to be of type string')
+  }
+};
+
+const boolean = (value) => {
+  const type = getType(value);
+  if (type !== 'boolean') {
+    throw new Error('expected value to be of type boolean')
+  }
+};
+
+const create$Row = () => {
+  const $Row = document.createElement('div');
+  $Row.className = 'EditorRow';
+  return $Row
+};
+
+const create$Token = () => {
+  const $Token = document.createElement('span');
+  $Token.className = 'Token';
+  return $Token
+};
+
+// TODO maybe use createTextNode (codeMirror uses that)
+// This function seems to be a hot spot
+const render$Token = ($Token, text, className) => {
+  $Token.className = className;
+  if ($Token.firstChild) {
+    // recycle text node
+    $Token.firstChild.nodeValue = text;
+  } else {
+    $Token.textContent = text;
+  }
+};
+
+const render$LineLess = ($Line, lineInfo) => {
+  let i = 0;
+  while (i < $Line.children.length * 2) {
+    const text = lineInfo[i++];
+    const className = lineInfo[i++];
+    render$Token($Line.children[i / 2 - 1], text, className);
+  }
+  const fragment = document.createDocumentFragment();
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++];
+    const className = lineInfo[i++];
+    const $Token = create$Token();
+    render$Token($Token, text, className);
+    fragment.append($Token);
+  }
+  $Line.append(fragment);
+};
+
+const render$LineEqual = ($Line, lineInfo) => {
+  let i = 0;
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++];
+    const className = lineInfo[i++];
+    render$Token($Line.children[i / 2 - 1], text, className);
+  }
+};
+
+const render$LineMore = ($Line, lineInfo) => {
+  let i = 0;
+  while (i < lineInfo.length) {
+    const text = lineInfo[i++];
+    const className = lineInfo[i++];
+    render$Token($Line.children[i / 2 - 1], text, className);
+  }
+  const diff = $Line.children.length - lineInfo.length / 2;
+  for (let i = lineInfo.length; i < lineInfo.length + diff; i++) {
+    $Line.lastChild.remove();
+  }
+};
+
+const render$Line = ($Line, lineInfo) => {
+  if ($Line.children.length < lineInfo.length / 2) {
+    render$LineLess($Line, lineInfo);
+  } else if ($Line.children.length === lineInfo.length / 2) {
+    render$LineEqual($Line, lineInfo);
+  } else {
+    render$LineMore($Line, lineInfo);
+  }
+};
+
+const render$LinesLess = ($Lines, lineInfos) => {
+  for (let i = 0; i < $Lines.children.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i]);
+  }
+  const fragment = document.createDocumentFragment();
+  for (let i = $Lines.children.length; i < lineInfos.length; i++) {
+    const $Line = create$Row();
+    render$Line($Line, lineInfos[i]);
+    fragment.append($Line);
+  }
+  $Lines.append(fragment);
+};
+
+const render$LinesEqual = ($Lines, lineInfos) => {
+  for (let i = 0; i < lineInfos.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i]);
+  }
+};
+
+const render$LinesMore = ($Lines, lineInfos) => {
+  for (let i = 0; i < lineInfos.length; i++) {
+    render$Line($Lines.children[i], lineInfos[i]);
+  }
+  const diff = $Lines.children.length - lineInfos.length;
+  for (let i = lineInfos.length; i < lineInfos.length + diff; i++) {
+    $Lines.lastChild.remove();
+  }
+};
+
+const render$Lines = ($Lines, lineInfos) => {
+  object($Lines);
+  array(lineInfos);
+  if ($Lines.children.length < lineInfos.length) {
+    render$LinesLess($Lines, lineInfos);
+  } else if ($Lines.children.length === lineInfos.length) {
+    render$LinesEqual($Lines, lineInfos);
+  } else {
+    render$LinesMore($Lines, lineInfos);
+  }
+};
+
+const setLineInfos = (state, lineInfos) => {
+  render$Lines(state.$LayerText, lineInfos);
+};
+
+// TODO so many things in this file
+
+// TODO go back to edit mode after pressing escape so screenreaders can navigate https://stackoverflow.com/questions/53909477/how-to-handle-tabbing-for-accessibility-with-a-textarea-that-uses-the-tab-button
+
+// TODO tree shake out mobile support when targeting electron -> less code -> less event listeners -> less memory -> less cpu
+
+const handleContextMenu$2 = (event) => {
+  event.preventDefault();
+  const x = event.clientX;
+  const y = event.clientY;
+  send([
+    /* ContextMenu.show */ 951,
+    /* x */ x,
+    /* y */ y,
+    /* id */ 'editor',
+  ]);
+};
+
+const handleFocus = (event) => {
+  setFocus('ViewletEditorText');
+};
+
+const handleBlur$1 = (event) => {
+  // needed for save on blur
+  // also needed to close completions on blur
+  send([/* EditorBlur.editorBlur */ 370]);
+};
+
+const handleBeforeInput = (event) => {
+  event.preventDefault();
+  switch (event.inputType) {
+    case 'insertText':
+      send([/* Editor.type */ 345, /* text */ event.data]);
+      break
+  }
+  // if (!event.data) {
+  //   return
+  // }
+};
+
+// TODO composition should be better supported,
+// for example
+// - gedit draws a line below the composed text
+// - codemirror 6 also draws that line
+// - codemirror 5 also draws that line
+// - vscode does not draw a line, but displays characters during composition
+
+const handleCompositionStart = (event) => {
+  send([
+    /* Editor.compositionStart */ 411,
+    /* text */ event.data,
+  ]);
+};
+
+const handleCompositionUpdate = (event) => {
+  send([
+    /* Editor.compositionUpdate */ 412,
+    /* text */ event.data,
+  ]);
+};
+
+const handleCompositionEnd = (event) => {
+  send([/* Editor.compositionEnd */ 413, /* text */ event.data]);
+};
+
+const handleCut = (event) => {
+  event.preventDefault();
+  send([/* Editor.cut */ 364]);
+};
+
+const handleSelectionMove = (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+  const totalOffset = getTotalOffset(event);
+  if (event.altKey) {
+    send([
+      /* Editor.moveRectangleSelectionPx */ 387,
+      /* x */ x,
+      /* y */ y,
+      /* offset */ totalOffset,
+    ]);
+  } else {
+    send([
+      /* Editor.moveSelectionPx */ 386,
+      /* x */ x,
+      /* y */ y,
+      /* offset */ totalOffset,
+    ]);
+  }
+};
+
+const handleSelectionDone = (event) => {
+  document.removeEventListener('mousemove', handleSelectionMove);
+  document.removeEventListener('mouseup', handleSelectionDone);
+};
+
+const getModifier$1 = (event) => {
+  if (event.ctrlKey) {
+    return 'ctrl'
+  }
+  if (event.altKey) {
+    return 'alt'
+  }
+  return ''
+};
+
+const handleSingleClick = (event, x, y, offset) => {
+  const modifier = getModifier$1(event);
+  send([
+    /* Editor.handleSingleClick */ 360,
+    /* modifier */ modifier,
+    /* x */ x,
+    /* y */ y,
+    /* offset */ offset,
+  ]);
+  const $Target = event.target;
+  const $InputBox = $Target.closest('.Editor').firstElementChild;
+  $InputBox.focus();
+  // TODO this logic should be in renderer worker
+  document.addEventListener('mousemove', handleSelectionMove, { passive: true });
+  document.addEventListener('mouseup', handleSelectionDone);
+};
+
+const handleDoubleClick = (event, x, y, offset) => {
+  send([
+    /* Editor.handleDoubleClick */ 385,
+    /* x */ x,
+    /* y */ y,
+    /* offset */ offset,
+  ]);
+};
+
+const handleTripleClick = (event, x, y, offset) => {
+  send([
+    /* Editor.handleTripleClick */ 376,
+    /* x */ x,
+    /* y */ y,
+    /* offset */ offset,
+  ]);
+};
+
+const isRightClick = (event) => {
+  return event.button === 2
+};
+
+const getTextNodeOffset = (textNode) => {
+  let $Token = textNode.parentElement;
+  let offset = 0;
+  while ($Token.previousSibling) {
+    $Token = $Token.previousSibling;
+    offset += $Token.textContent.length;
+  }
+  return offset
+};
+
+const getTotalOffset = (event) => {
+  if (document.caretRangeFromPoint) {
+    // chrome uses deprecated version
+    const range = document.caretRangeFromPoint(event.clientX, event.clientY);
+    if (!range) {
+      return 0
+    }
+    const textNode = range.startContainer;
+    const textNodeOffset = getTextNodeOffset(textNode);
+    const offset = range.startOffset;
+    const totalOffset = textNodeOffset + offset;
+    return totalOffset
+    // @ts-ignore
+  } else if (document.caretPositionFromPoint) {
+    // firefox uses new version
+    // @ts-ignore
+    const range = document.caretPositionFromPoint(event.clientX, event.clientY);
+    if (!range) {
+      return 0
+    }
+    const textNode = range.offsetNode;
+    const textNodeOffset = getTextNodeOffset(textNode);
+    const offset = range.offset;
+    const totalOffset = textNodeOffset + offset;
+    return totalOffset
+  } else {
+    throw new Error('caret position is not supported')
+  }
+};
+
+const handleMouseDown$1 = (event) => {
+  if (isRightClick(event)) {
+    return
+  }
+  event.preventDefault();
+  const totalOffset = getTotalOffset(event);
+  const x = event.clientX;
+  const y = event.clientY;
+  switch (event.detail) {
+    case 1:
+      handleSingleClick(event, x, y, totalOffset);
+      break
+    case 2:
+      handleDoubleClick(event, x, y, totalOffset);
+      break
+    case 3:
+      handleTripleClick(event, x, y, totalOffset);
+      break
+  }
+};
+
+// TODO figure out whether it is possible to register hover provider without mousemove
+// mousemove handler is called very often and could slow down editor / drain battery
+
+// disabled for now because of constant cpu usage on mousemove
+// bad for performance
+const handleMouseMove$1 = (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+  if (event.altKey) {
+    const offset = getTotalOffset(event);
+    send([
+      /* Editor.handleMouseMoveWithAltKey */ 415,
+      /* x */ x,
+      /* y */ y,
+      /* offset */ offset,
+    ]);
+  }
+  // console.log(event.altKey)
+  // RendererWorker.send([/* Editor.handleMouseMove */ 389, /* x */ x, /* y */ y])
+};
+
+const handleWheel = (event) => {
+  // event.preventDefault()
+  // const state = EditorHelper.getStateFromEvent(event)
+  // TODO send editor id
+  switch (event.deltaMode) {
+    case event.DOM_DELTA_LINE:
+      send([
+        /* Editor.setDeltaY */ 384,
+        /* value */ event.deltaY,
+      ]);
+      break
+    case event.DOM_DELTA_PIXEL:
+      send([
+        /* Editor.setDeltaY */ 384,
+        /* value */ event.deltaY,
+      ]);
+      break
+  }
+};
+
+const handlePaste = (event) => {
+  event.preventDefault();
+  const text = event.clipboardData.getData('text');
+  send([/* Editor.paste */ 382, /* text */ text]);
+};
+
+const handleScrollBarThumbMouseMove = (event) => {
+  const y = event.clientY;
+  send([/* Editor.handleScrollBarMouseMove */ 399, /* y */ y]);
+};
+
+const handleScrollBarThumbMouseUp = () => {
+  window.removeEventListener('mousemove', handleScrollBarThumbMouseMove);
+  window.removeEventListener('mouseup', handleScrollBarThumbMouseUp);
+};
+
+const handleScrollBarThumbMouseDown = (event) => {
+  window.addEventListener('mousemove', handleScrollBarThumbMouseMove);
+  window.addEventListener('mouseup', handleScrollBarThumbMouseUp);
+};
+
+const handleScrollBarMouseDown = (event) => {
+  const y = event.clientY;
+  send([
+    /* EditorHandleScrollBarClick.editorHandleScrollBarClick */ 400,
+    /* y */ y,
+  ]);
+};
+
+const toSimpleTouch = (touch) => {
+  return {
+    x: touch.clientX,
+    y: touch.clientY,
+  }
+};
+
+const toSimpleTouchEvent = (event) => {
+  const touches = Array.from(event.touches).map(toSimpleTouch);
+  const changedTouches = Array.from(event.changedTouches).map(toSimpleTouch);
+  return {
+    touches,
+    changedTouches,
+  }
+};
+
+// TODO add touch cancel handler
+
+// TODO use touch events for scrolling
+
+const handleTouchStart = (event) => {
+  const touchEvent = toSimpleTouchEvent(event);
+  send([
+    /* EditorHandleTouchStart.editorHandleTouchStart */ 404,
+    /* touchEvent */ touchEvent,
+  ]);
+};
+
+const handleTouchMove = (event) => {
+  const touchEvent = toSimpleTouchEvent(event);
+  send([
+    /* EditorHandleTouchMove.editorHandleTouchMove */ 405,
+    /* touchEvent */ touchEvent,
+  ]);
+};
+
+const handleTouchEnd = (event) => {
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+  const touchEvent = toSimpleTouchEvent(event);
+  send([
+    /* EditorHandleTouchEnd.editorHandleTouchEnd */ 406,
+    /* touchEvent */ touchEvent,
+  ]);
+};
+
+const getRangeFromSelection = (selection) => {
+  if (!selection.anchorNode) {
+    return undefined
+  }
+  const $StartToken = selection.anchorNode.parentNode;
+  const $EndToken = selection.focusNode.parentNode;
+  const $StartRow = $StartToken.parentNode;
+  const $EndRow = $EndToken.parentNode;
+  const $Rows = $StartRow.parentNode;
+  let startRowIndex = 0;
+  for (let i = 0; i < $Rows.children.length; i++) {
+    if ($Rows.children[i] === $StartRow) {
+      startRowIndex = i;
+      break
+    }
+  }
+  let startColumnIndex = 0;
+  for (let i = 0; i < $StartRow.children.length; i++) {
+    if ($StartRow.children[i] === $StartToken) {
+      break
+    }
+    startColumnIndex += $StartRow.children[i].textContent.length;
+  }
+  startColumnIndex += selection.anchorOffset;
+  let endRowIndex = 0;
+  for (let i = 0; i < $Rows.children.length; i++) {
+    if ($Rows.children[i] === $EndRow) {
+      endRowIndex = i;
+      break
+    }
+  }
+  let endColumnIndex = 0;
+  for (let i = 0; i < $EndRow.children.length; i++) {
+    if ($EndRow.children[i] === $EndToken) {
+      break
+    }
+    endColumnIndex += $EndRow.children[i].textContent.length;
+  }
+  endColumnIndex += selection.focusOffset;
+  return {
+    startRowIndex,
+    startColumnIndex,
+    endRowIndex,
+    endColumnIndex,
+  }
+};
+
+const handleContentEditableBeforeInput = (event) => {
+  const selection = document.getSelection();
+  const range = getRangeFromSelection(selection);
+  if (!range) {
+    console.error('[Editor] cannot handle input event without selection');
+    return
+  }
+  send([
+    /* EditorHandleBeforeInputFromContentEditable.editorHandleBeforeInputFromContentEditable */ 407,
+    /* data */ event.data || '',
+    /* range */ range,
+  ]);
+};
+
+const handleNativeSelectionChange = (event) => {
+  const state = getStateFromEvent(event);
+  if (state.shouldIgnoreSelectionChange) {
+    state.shouldIgnoreSelectionChange = false;
+    return
+  }
+  const selection = document.getSelection();
+  const range = getRangeFromSelection(selection);
+  if (!range) {
+    return
+  }
+  send([
+    /* EditorHandleNativeSelectionChange.editorHandleNativeSelectionChange */ 408,
+    /* range */ range,
+  ]);
+};
+
+// TODO all create functions should have no arguments
+// and be split into two parts
+// 1. create -> only create dom elements
+// 2. render -> fill elements with attributes and data
+// that way all dom nodes can be recycled
+const create$4 = () => {
+  const $EditorInput = document.createElement('textarea');
+  $EditorInput.className = 'EditorInput';
+  $EditorInput.ariaAutoComplete = 'list';
+  $EditorInput.ariaRoleDescription = 'editor';
+  $EditorInput.ariaMultiLine = 'true';
+  $EditorInput.setAttribute('autocomplete', 'off');
+  $EditorInput.setAttribute('autocapitalize', 'off');
+  $EditorInput.setAttribute('autocorrect', 'off');
+  $EditorInput.setAttribute('wrap', 'off');
+  $EditorInput.setAttribute('spellcheck', 'false');
+  $EditorInput.setAttribute('role', 'textbox');
+  $EditorInput.onpaste = handlePaste;
+  // TODO where to best put listeners (side effects)
+  $EditorInput.addEventListener('beforeinput', handleBeforeInput);
+  $EditorInput.addEventListener('compositionstart', handleCompositionStart);
+  $EditorInput.addEventListener('compositionupdate', handleCompositionUpdate);
+  $EditorInput.addEventListener('compositionend', handleCompositionEnd);
+  $EditorInput.onfocus = handleFocus;
+  $EditorInput.onblur = handleBlur$1;
+  $EditorInput.oncut = handleCut;
+
+  const $LayerCursor = document.createElement('div');
+  $LayerCursor.className = 'LayerCursor';
+
+  const $LayerText = document.createElement('div');
+  $LayerText.className = 'EditorRows';
+  if (isMobileOrTablet()) {
+    $LayerText.setAttribute('contenteditable', 'plaintext-only');
+    $LayerText.setAttribute('autocapitalize', 'off');
+    $LayerText.setAttribute('spellcheck', 'false');
+    $LayerText.setAttribute('autocorrect', 'off');
+    $LayerText.addEventListener('beforeinput', handleContentEditableBeforeInput);
+    // TODO remove listener once editor is disposed
+    // TODO why is there no selection change listener for the element?
+    document.addEventListener('selectionchange', handleNativeSelectionChange);
+  } else {
+    $LayerText.addEventListener('mousedown', handleMouseDown$1);
+  }
+
+  const $ScrollBarThumb = document.createElement('div');
+  $ScrollBarThumb.className = 'ScrollBarThumb';
+  $ScrollBarThumb.addEventListener('mousedown', handleScrollBarThumbMouseDown);
+
+  // TODO only create $ScrollBarDiagnostics lazily when there are actually diagnostics
+  const $ScrollBarDiagnostics = document.createElement('div');
+  $ScrollBarDiagnostics.className = 'EditorScrollBarDiagnostics';
+
+  const $ScrollBar = document.createElement('div');
+  $ScrollBar.className = 'ScrollBar';
+  if (!isMobileOrTablet()) {
+    $ScrollBar.onmousedown = handleScrollBarMouseDown;
+  }
+  $ScrollBar.append($ScrollBarThumb);
+
+  // $EditorRows.addEventListener('mousemove', handleMouseMove, { passive: true })
+
+  // TODO function should be hoisted (maybe -> one listener for all editors (definitely))
+  // only problem is $EditorInput closure
+
+  // TODO when mousedown on completions -> this shouldn't be called
+
+  const $LayerSelections = document.createElement('div');
+  $LayerSelections.className = 'Selections';
+
+  // TODO maybe use css grid to position layers on top of each other
+  // TODO maybe merge layerDiagnostics with LayerSelections
+  // TODO maybe this should be more generic, e.g. LayerDecorations
+  // where decoration = {top,left, width, height, type/className}
+  const $LayerDiagnostics = document.createElement('div');
+  $LayerDiagnostics.className = 'LayerDiagnostics';
+
+  const $EditorLayers = document.createElement('div');
+  $EditorLayers.className = 'EditorLayers';
+  $EditorLayers.append(
+    $LayerSelections,
+    $LayerText,
+    $LayerCursor,
+    $LayerDiagnostics
+  );
+
+  const $Editor = document.createElement('div');
+  $Editor.className = 'Viewlet Editor';
+  $Editor.dataset.viewletId = 'EditorText';
+  $Editor.setAttribute('role', 'code');
+  $Editor.append($EditorInput, $EditorLayers, $ScrollBarDiagnostics, $ScrollBar);
+  if (isMobileOrTablet()) {
+    $Editor.addEventListener('touchstart', handleTouchStart, { passive: true });
+    $Editor.addEventListener('touchmove', handleTouchMove, { passive: true });
+    $Editor.addEventListener('touchend', handleTouchEnd);
+  } else {
+    $Editor.addEventListener('contextmenu', handleContextMenu$2);
+    $Editor.addEventListener('wheel', handleWheel, { passive: true });
+  }
+  $Editor.addEventListener('mousemove', handleMouseMove$1, { passive: true });
+  return {
+    $LayerCursor,
+    $LayerSelections,
+    $LayerText,
+    $EditorLayers,
+    $Editor,
+    $EditorInput,
+    $ScrollBarThumb,
+    $LayerDiagnostics,
+    $ScrollBarDiagnostics,
+    shouldIgnoreSelectionChange: false,
+    $Viewlet: $Editor,
+  }
+};
+
+const setText = (state, textInfos) => {
+  setLineInfos(state, textInfos);
+};
+
+const setSettings = (state, fontSize, lineHeight, letterSpacing) => {
+  // TODO many properties on <html> element in chrome devtools looks ugly
+  // maybe put styles into a stylesheet instead of using inline styles?
+  const root = document.documentElement;
+  root.style.setProperty('--EditorFontSize', `${fontSize}px`);
+  root.style.setProperty('--EditorLineHeight', `${lineHeight}px`);
+  root.style.setProperty('--EditorLetterSpacing', letterSpacing);
+};
+
+const setScrollBar = (state, scrollBarY, scrollBarHeight) => {
+  setPosition(state, scrollBarY, scrollBarHeight);
+};
+
+const renderCursors = (state, cursorInfos) => {
+  setCursors(state, cursorInfos);
+};
+
+const renderSelections = (state, selectionInfos) => {
+  setSelections$1(state, selectionInfos);
+};
+
+const renderTextAndCursors = (state, textInfos, cursorInfos) => {
+  setLineInfos(state, textInfos);
+  setCursors(state, cursorInfos);
+};
+
+const setSelections = (state, cursorInfos, selectionInfos) => {
+  setCursors(state, cursorInfos);
+  setSelections$1(state, selectionInfos);
+};
+
+const renderTextAndCursorsAndSelections = (
+  state,
+  scrollBarY,
+  scrollBarHeight,
+  textInfos,
+  cursorInfos,
+  selectionInfos
+) => {
+  object(state);
+  number(scrollBarY);
+  number(scrollBarHeight);
+  array(textInfos);
+  array(cursorInfos);
+  array(selectionInfos);
+  setPosition(state, scrollBarY, scrollBarHeight);
+  setLineInfos(state, textInfos);
+  setCursors(state, cursorInfos);
+  setSelections$1(state, selectionInfos);
+};
+
+const mount = (state, $Parent) => {
+  $Parent.append(state.$Editor);
+};
+
+const dispose$3 = (state) => {};
+
+const focus$3 = (state) => {
+  // state.$EditorInput.focus()
+};
+
+const setLanguageId = async (state, languageId) => {
+  // state.languageId = languageId
+  // state.$Editor.dataset.languageId = languageId
+  // loadTokenizer(languageId)
+};
+
+const renderDiagnostics = (state, diagnostics, scrollBarDiagnostics) => {
+  setDiagnostics$1(state, diagnostics);
+  setDiagnostics(state, scrollBarDiagnostics);
+};
+
+var M4 = {
+  __proto__: null,
+  create: create$4,
+  setText: setText,
+  setSettings: setSettings,
+  setScrollBar: setScrollBar,
+  renderCursors: renderCursors,
+  renderSelections: renderSelections,
+  renderTextAndCursors: renderTextAndCursors,
+  setSelections: setSelections,
+  renderTextAndCursorsAndSelections: renderTextAndCursorsAndSelections,
+  mount: mount,
+  dispose: dispose$3,
+  focus: focus$3,
+  setLanguageId: setLanguageId,
+  renderDiagnostics: renderDiagnostics
+};
+
+const state$4 = {
+  instances: Object.create(null),
+  currentSideBarView: undefined,
+  currentPanelView: undefined,
+  modules: Object.create(null),
+};
+
+const get = (id) => {
+  switch (id) {
+    case 'Explorer':
+      return import('./ViewletExplorer.js')
+    case 'Run and Debug':
+      return import('./ViewletRunAndDebug.js')
+    case 'Search':
+      return import('./ViewletSearch.js')
+    case 'Source Control':
+      return import('./ViewletSourceControl.js')
+    case 'Terminal':
+      return import('./ViewletTerminal.js')
+    case 'Extensions':
+      return import('./ViewletExtensions.js')
+    case 'Debug Console':
+      return import('./ViewletDebugConsole.js')
+    case 'Output':
+      return import('./ViewletOutput.js')
+    case 'Problems':
+      return import('./ViewletProblems.js')
+    case 'Empty':
+      return import('./ViewletEmpty.js')
+    case 'EditorText':
+      return import('./ViewletEditorText.js')
+    case 'EditorPlainText':
+      return import('./ViewletEditorPlainText.js')
+    case 'EditorImage':
+      return import('./ViewletEditorImage.js')
+    case 'Clock':
+      return import('./ViewletClock.js')
+    case 'SideBar':
+      return import('./ViewletSideBar.js')
+    case 'Panel':
+      return import('./ViewletPanel.js')
+    case 'ActivityBar':
+      return Promise.resolve().then(function () { return M27; })
+    case 'ImagePreview':
+      return import('./ImagePreview.js')
+    case 'QuickPick':
+      return import('./ViewletQuickPick.js')
+    case 'StatusBar':
+      return Promise.resolve().then(function () { return M28; })
+    case 'TitleBar':
+      return Promise.resolve().then(function () { return M29; })
+    case 'Main':
+      return import('./ViewletMain.js')
+    case 'EditorCompletion':
+      return import('./ViewletEditorCompletion.js')
+    case 'References':
+      return import('./ViewletReferences.js')
+    case 'Implementations':
+      return import('./ViewletImplementations.js')
+    default:
+      throw new Error(`unknown viewlet ${id}`)
+  }
+};
+
+const load = async (id, ...args) => {
+  const module = await get(id);
+  state$4.modules[id] = module;
+  state$4.instances[id] = {
+    state: module.create(...args),
+    factory: module,
+  };
+};
+
+const invoke = (viewletId, method, ...args) => {
+  const instance = state$4.instances[viewletId];
+  if (!instance) {
+    console.warn(`viewlet instance ${viewletId} not found`);
+    return
+  }
+  if (typeof instance.factory[method] !== 'function') {
+    console.warn(`method ${method} not implemented`);
+    return
+  }
+  return instance.factory[method](instance.state, ...args)
+};
+
+const focus$2 = (viewletId) => {
+  const instance = state$4.instances[viewletId];
+  if (instance && instance.factory && instance.factory.focus) {
+    instance.factory.focus(instance.state);
+  }
+};
+
+/**
+ * @deprecated
+ */
+const refresh = (viewletId, viewletContext) => {
+  console.log('REFRESH', viewletId);
+  const instance = state$4.instances[viewletId];
+  if (instance) {
+    instance.factory.refresh(instance.state, viewletContext);
+  } else {
+    // console.warn('no instance yet of ' + viewletId)
+    state$4.refreshContext[viewletId] = viewletContext;
+  }
+};
+
+const sendMultiple = (commands) => {
+  for (const command of commands) {
+    const [_, viewletId, method, ...args] = command;
+    invoke(viewletId, method, ...args);
+  }
+};
+
+/**
+ * @deprecated
+ */
+const dispose$2 = (id) => {
+  deleteState(id);
+  const instance = state$4.instances[id];
+  try {
+    instance.factory.dispose(instance.state);
+    if (instance.state.$Viewlet && instance.state.$Viewlet.isConnected) {
+      instance.state.$Viewlet.remove();
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  delete state$4.instances[id];
+};
+
+const handleError = (id, parentId, message) => {
+  console.log('HANDLE ERROR');
+  const instance = state$4.instances[id];
+  if (instance && instance.factory && instance.factory.handleError) {
+    instance.factory.handleError(instance.state, message);
+    return
+  }
+  // TODO error should bubble up to until highest possible component
+  const parentInstance = state$4.instances[parentId];
+  if (
+    parentInstance &&
+    parentInstance.factory &&
+    parentInstance.factory.handleError
+  ) {
+    parentInstance.factory.handleError(instance.state, message);
+    return
+  }
+  if (
+    instance &&
+    instance.state.$Viewlet &&
+    instance.state.$Viewlet.isConnected
+  ) {
+    instance.state.$Viewlet.textContent = message;
+  }
+};
+
+/**
+ * @deprecated
+ */
+const appendViewlet = (parentId, childId, focus) => {
+  if (parentId === 'Widget') {
+    // TODO
+    return
+  }
+  const parentInstanceState = state$4.instances[parentId]; // TODO must ensure that parent is already created
+  const parentModule = parentInstanceState.factory;
+  const childInstance = state$4.instances[childId];
+  if (!childInstance) {
+    throw new Error('child instance must be defined to be appended to parent')
+  }
+  parentModule.appendViewlet(
+    parentInstanceState.state,
+    childInstance.factory.name,
+    childInstance.state.$Viewlet
+  );
+  if (focus) {
+    childInstance.factory.focus(childInstance.state);
+  }
+};
+
+const __initialize__$6 = () => {
+  register$1(3022, refresh);
+  register$1(3024, invoke);
+  register$1(3027, focus$2);
+  register$1(3026, dispose$2);
+  // Command.register(3028, Viewlet.hydrate)
+  register$1(3029, appendViewlet);
+  register$1(3030, load);
+  register$1(3031, handleError);
+  register$1(3032, sendMultiple);
+};
+
+var M6 = {
+  __proto__: null,
+  __initialize__: __initialize__$6
+};
+
+const state$3 = {
+  keyBindings: [],
+  modifier: '',
+  modifierTimeout: -1,
+};
+
+const getIdentifier = (event) => {
+  let identifier = '';
+  if (event.ctrlKey) {
+    identifier += 'ctrl+';
+  }
+  if (event.shiftKey) {
+    identifier += 'shift+';
+  }
+  if (event.altKey) {
+    identifier += 'alt+';
+  }
+  let key = event.key;
+  if (key === ' ') {
+    key = 'Space';
+  }
+  if (key.length === 1) {
+    key = key.toLowerCase();
+  }
+  identifier += key;
+  return identifier
+};
+
+// TODO store keybindings as json somewhere
+
+// TODO sort keybindings by `when` priority -> focus.editorCompletions: 10, focus.editor:9 etc.
+
+// TODO does it make sense to have all of these configurable?
+// could remove some context logic and have less user configuration when these are default
+// e.g. arrow down focuses next, arrow up always focuses previous item (like in aria spec)
+
+// TODO ui should only have keys -> commands get resolved inside renderer worker
+// TODO should toggle terminal, not only open
+
+const matchesContext = (keybinding) => {
+  if (!keybinding.when) {
+    return true
+  }
+  return get$1(keybinding.when)
+};
+
+const getMatchingKeyBinding = (identifier) => {
+  // TODO this could be more efficient in O(N) instead of O(2N)
+  const matchesIdentifier = (keyBinding) => {
+    return keyBinding.key === identifier
+  };
+  const matchingKeyBindings = state$3.keyBindings.filter(matchesIdentifier);
+  const matchingKeyBinding = matchingKeyBindings.find(matchesContext);
+  return matchingKeyBinding
+};
+
+const getModifier = (event) => {
+  switch (event.key) {
+    case 'Control':
+      return 'ctrl'
+    case 'Shift':
+      return 'shift'
+    case 'Alt':
+      return 'alt'
+  }
+  return ''
+};
+
+const clearModifier = () => {
+  if (!state$3.modifier) {
+    return
+  }
+  if (state$3.modifierTimeout !== -1) {
+    clearTimeout(state$3.modifierTimeout);
+    state$3.modifier = '';
+    state$3.modifierTimeout = -1;
+  }
+};
+
+const handleMatchingKeyBinding = (matchingKeyBinding) => {
+  // TODO execute command directly or -> executeCommand -> keybindings -> executeCommand
+  // better directly
+  // TODO always should be number
+  // when launching keybindings -> map string command to number
+  if (typeof matchingKeyBinding.command === 'number') {
+    if (matchingKeyBinding.command === -1) {
+      console.warn('keybinding not fully specified', matchingKeyBinding);
+      return
+    }
+    send([
+      /* command */ matchingKeyBinding.command,
+      // TODO should args always be defined? (probably yes -> monomorphism & simpler code since all objects are the same)
+      ...(matchingKeyBinding.args || []),
+    ]);
+  } else if (typeof matchingKeyBinding.command === 'string') {
+    // TODO matchingKeyBinding.command should always be number
+    send([
+      /* KeyBindings.handleKeyBinding */ 1422,
+      /* keyBinding */ matchingKeyBinding,
+    ]);
+  }
+};
+
+const handleKeyDown$2 = (event) => {
+  const identifier = getIdentifier(event);
+  const matchingKeyBinding = getMatchingKeyBinding(identifier);
+  if (!matchingKeyBinding) {
+    return
+  }
+  event.preventDefault();
+  handleMatchingKeyBinding(matchingKeyBinding);
+};
+
+const handleKeyUp = (event) => {
+  const modifier = getModifier(event);
+  if (!modifier) {
+    clearModifier();
+    return
+  }
+  if (state$3.modifier === modifier) {
+    clearModifier();
+    const identifier = `${modifier} ${modifier}`;
+    const matchingKeyBinding = getMatchingKeyBinding(identifier);
+    if (matchingKeyBinding) {
+      handleMatchingKeyBinding(matchingKeyBinding);
+    }
+    return
+  }
+
+  state$3.modifier = modifier;
+  // @ts-ignore
+  state$3.modifierTimeout = setTimeout(clearModifier, 300);
+};
+
+const hydrate$1 = async (keyBindings) => {
+  // TODO is this the right place for browser context ?
+  // maybe in env file / env service
+  const browser = getBrowser();
+  set(`browser.${browser}`, true);
+  state$3.keyBindings = keyBindings;
+  window.addEventListener('keydown', handleKeyDown$2);
+  // TODO only need keyup listener if keybindings include double modifier key (e.g "shift shift")
+  window.addEventListener('keyup', handleKeyUp);
+};
+
+// TODO should be in renderer worker
+const lookupKeyBinding = (commandId) => {
+  switch (commandId) {
+    case 'scm.acceptInput':
+      return 'Ctrl+Enter'
+    default:
+      return ''
+  }
+};
+
+const __initialize__$5 = () => {
+  register$1(755, hydrate$1);
+  // Command.register(756, KeyBindings.setKeyBindings)
+};
+
+var M7 = {
+  __proto__: null,
+  __initialize__: __initialize__$5
+};
+
+// TODO global event bus is probably a bad idea
+// cons:
+// 1. it is not typesafe
+// 2. dependencies are unclear
+//
+// pros
+// 1. it decouples event emitter (e.g. Editor creation) from other module (Document syncing when editor was created)
+
+const state$2 = {
+  listenerMap: Object.create(null),
+};
+
+const emitEvent = (event, ...args) => {
+  const listeners = state$2.listenerMap[event] || [];
+  for (const listener of listeners) {
+    listener(...args);
+  }
+};
+
+const addListener = (event, fn) => {
+  state$2.listenerMap[event] ||= [];
+  if (state$2.listenerMap[event].includes(fn)) {
+    return
+  }
+  state$2.listenerMap[event].push(fn);
+};
+
+var M9 = {
+  __proto__: null,
+  state: state$2,
+  emitEvent: emitEvent,
+  addListener: addListener
+};
+
+const state$1 = {
+  isInDom: false,
+  $PreviousFocusElement: undefined,
+  widgetSet: new Set(),
+  $Widgets: undefined,
+};
+
+const create$Widgets = () => {
+  const $Widgets = document.createElement('div');
+  $Widgets.id = 'Widgets';
+  return $Widgets
+};
+
+const append = ($Element) => {
+  // TODO should not call append in the first place if it is already in dom
+  if (state$1.widgetSet.has($Element)) {
+    return
+  }
+  state$1.widgetSet.add($Element);
+  if (state$1.$Widgets) {
+    state$1.$Widgets.append($Element);
+  } else {
+    state$1.$Widgets = create$Widgets();
+    state$1.$Widgets.append($Element);
+    document.body.append(state$1.$Widgets);
+  }
+};
+
+const find = (id) => {
+  for (const $Widget of state$1.widgetSet) {
+    if ($Widget.dataset.id === id) {
+      return $Widget
+    }
+  }
+  return undefined
+};
+
+const remove = ($Element) => {
+  if (!$Element) {
+    // TODO $Element should always be defined
+    return
+  }
+  state$1.widgetSet.delete($Element);
+  $Element.remove();
+  // TODO state.$Widgets should always be defined at this point
+  if (state$1.widgetSet.size === 0 && state$1.$Widgets) {
+    state$1.$Widgets.remove();
+    state$1.$Widgets = undefined;
+  }
+};
+
+var M14 = {
+  __proto__: null,
+  state: state$1,
+  append: append,
+  find: find,
+  remove: remove
+};
+
+const getItem = (key) => {
+  return localStorage.getItem(key) || undefined
+};
+
+const setItem = (key, value) => {
+  localStorage.setItem(key, value);
+};
+
+const clear = () => {
+  localStorage.clear();
+};
+
+const __initialize__$4 = () => {
+  register$1(8986, clear);
+  register$1(8987, getItem);
+  register$1(8988, setItem);
+};
+
+var M15 = {
+  __proto__: null,
+  __initialize__: __initialize__$4
+};
+
+const __initialize__$3 = () => {
+  register$1(909090, handleInvoke);
+};
+
+var M17 = {
+  __proto__: null,
+  __initialize__: __initialize__$3
+};
+
+const supportsServiceWorker = () => {
+  return 'serviceWorker' in navigator
+};
+
+const handleUpdateFound = () => {
+  // console.info('[service-worker] update found')
+};
+
+const handleControllerChange = () => {
+  // console.info('[service-worker] controller changed - reloading page')
+  location.reload();
+};
+
+const register = async (url) => {
+  if (!supportsServiceWorker()) {
+    return
+  }
+  const registration = await navigator.serviceWorker.register(url, {
+    scope: '/',
+    type: 'module',
+  });
+  registration.onupdatefound = handleUpdateFound;
+  navigator.serviceWorker.oncontrollerchange = handleControllerChange;
+};
+
+const uninstallRegistration = async (registration) => {
+  await registration.unregister();
+};
+
+const uninstall = async () => {
+  if (!supportsServiceWorker()) {
+    return
+  }
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  await Promise.all(registrations.map(uninstallRegistration));
+};
+
+const __initialize__$2 = () => {
+  register$1(43725, register);
+  register$1(43726, uninstall);
+};
+
+var M22 = {
+  __proto__: null,
+  __initialize__: __initialize__$2
+};
+
+const getPathName = () => {
+  return location.pathname
+};
+
+// TODO should do nothing if it is already at this path
+const setPathName = (pathName) => {
+  const currentPathName = getPathName();
+  if (currentPathName === pathName) {
+    return
+  }
+  history.pushState(null, null, pathName);
+};
+
+const handlePopState = (event) => {
+  send([/* Workspace.hydrate */ 7634]);
+};
+
+const hydrate = () => {
+  addEventListener('popstate', handlePopState);
+};
+
+const __initialize__$1 = () => {
+  register$1(5611, getPathName);
+  register$1(5612, setPathName);
+  register$1(5613, hydrate);
+};
+
+var M26 = {
+  __proto__: null,
+  __initialize__: __initialize__$1
+};
+
+// 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) {
+    // console.log('no target to find', $Target, event.target)
+    return -1
+  }
+  for (let i = 0; i < $Container.children.length; i++) {
+    if ($Container.children[i] === $Target) {
+      return i
+    }
+  }
+  return -1
+};
+
+const getLabel = (item) => {
+  if (!item || !item.label) {
+    console.warn('menu item has missing label', item);
+    return 'n/a'
+  }
+  return item.label
+};
+
+const create$MenuItem = (item) => {
+  const $MenuItem = document.createElement('li');
+  switch (item.flags) {
+    case /* None */ 0:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitem');
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* Separator */ 1:
+      $MenuItem.className = 'MenuItemSeparator';
+      $MenuItem.setAttribute('role', 'separator');
+      break
+    case /* Checked */ 2:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitemcheckbox');
+      $MenuItem.ariaChecked = 'true';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* UnChecked */ 3:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitemcheckbox');
+      $MenuItem.ariaChecked = 'false';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* SubMenu */ 4:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitem');
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      $MenuItem.ariaHasPopup = 'true';
+      $MenuItem.ariaExpanded = 'false';
+      break
+    case /* Disabled */ 5:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitem');
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      $MenuItem.setAttribute('disabled', 'true');
+      break
+    default:
+      $MenuItem.className = 'MenuItem';
+      $MenuItem.setAttribute('role', 'menuitem');
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      console.warn('invalid menu item flags:', item);
+      break
+  }
+  return $MenuItem
+};
+
+const create$BackDrop = () => {
+  const $BackDrop = document.createElement('div');
+  $BackDrop.id = 'BackDrop';
+  return $BackDrop
+};
+
+// TODO when pressing tab -> focus next element in tab order and close menu
+
+// TODO menu and contextmenu should have own keybinding logic
+// seems not possible to do with just one keybinding listener
+
+// TODO similar to context menu, show sub menu entries
+// there can be multiple instances (parent -> child -> child) submenus
+
+// TODO using .style.top, .style.left causes chrome devtools to show many layout shift -> maybe use transform instead
+
+// TODO when cycling through items, recalculate style is much slower
+// than in vscode (1.49ms vs 0.33ms)
+// paint is also faster in vscode (0.32ms vs 0.14ms)
+
+// TODO focus on menu is not announced to screenreader
+
+// TODO recalculate style and paint is slow when cycling through items:
+// 0.59ms recalculate style
+// 36us update layer tree
+// 0.35ms paint
+// 0.20ms composite layer
+
+// const contextMenuWidth = 150
+// const contextMenuHeight = 150 + /* padding */ 8 * 4
+
+// TODO keyboard handling
+
+const state = {
+  handleKeyDown(event) {},
+  handleFocusOut(event) {},
+  $$Menus: [],
+  anchorX: 0,
+  anchorY: 0,
+  anchorTime: -1,
+  $BackDrop: undefined,
+};
+
+const getLevel = ($Menu) => {
+  return state.$$Menus.indexOf($Menu)
+};
+
+const handleMouseDown = (event) => {
+  const $Target = event.target;
+  const $Menu = $Target.closest('.Menu');
+  const index = findIndex($Menu, $Target);
+  if (index === -1) {
+    console.log('index is negative one');
+    return
+  }
+  event.preventDefault();
+  const level = getLevel($Menu);
+  send([
+    /* Menu.handleClick */ 7403,
+    /* level */ level,
+    /* index */ index,
+  ]);
+};
+
+/**
+ *
+ * @param {MouseEvent} event
+ */
+const handleMouseEnter$1 = (event) => {
+  const $Target = event.target;
+  // @ts-ignore
+  const $Menu = $Target.closest('.Menu');
+  const x = event.clientX;
+  const y = event.clientY;
+  const timeStamp = event.timeStamp;
+
+  const index = findIndex($Menu, $Target);
+  if (index === -1) {
+    return
+  }
+  const level = getLevel($Menu);
+  console.log('focus index mouse', index);
+  send([
+    /* Menu.focusIndexMouse */ 7409,
+    /* level */ level,
+    /* index */ index,
+    /* x */ x,
+    /* y */ y,
+    /* timeStamp */ timeStamp,
+  ]);
+};
+
+const handleMouseMove = (event) => {
+  // const x = event.clientX
+  // const y = event.clientY
+  // console.log('move', { x, y })
+};
+
+const handleMouseLeave = (event) => {
+  // const x = event.clientX
+  // const y = event.clientY
+  // console.log('leave', { x, y })
+};
+
+// const handleBlur = (event) => {}
+const handleKeyDown$1 = (event) => {
+  state.handleKeyDown(event);
+};
+
+const handleFocusOut$1 = (event) => {
+  state.handleFocusOut(event);
+};
+
+const create$Menu = () => {
+  // TODO set aria label on menu (e.g. File, Edit, Selection)
+  const $Menu = document.createElement('ul');
+  $Menu.className = 'Menu';
+  $Menu.setAttribute('role', 'menu');
+  $Menu.tabIndex = -1;
+  // $ContextMenu.onmousedown = contextMenuHandleMouseDown
+  // TODO mousedown vs click? (click is usually better but mousedown is faster, why wait 100ms?)
+  $Menu.addEventListener('mousedown', handleMouseDown);
+  $Menu.addEventListener('mouseenter', handleMouseEnter$1, {
+    capture: true,
+  });
+  $Menu.addEventListener('mouseleave', handleMouseLeave, {
+    capture: true,
+  });
+  $Menu.addEventListener('mousemove', handleMouseMove, {
+    passive: true,
+  });
+  $Menu.onkeydown = handleKeyDown$1;
+  $Menu.addEventListener('focusout', handleFocusOut$1);
+  $Menu.oncontextmenu = handleContextMenu$1;
+  // $ContextMenu.onfocus = handleFocus
+  // $ContextMenu.onblur = handleBlur
+  return $Menu
+};
+
+const focusIndex$1 = (level, oldFocusedIndex, newFocusedIndex) => {
+  const $Menu = state.$$Menus[level];
+  if (oldFocusedIndex !== -1) {
+    $Menu.children[oldFocusedIndex].classList.remove('Focused');
+  }
+  if (newFocusedIndex !== -1) {
+    $Menu.children[newFocusedIndex].classList.add('Focused');
+    $Menu.children[newFocusedIndex].focus();
+  }
+};
+
+// TODO replace function that recycles menu dom nodes
+
+const handleBackDropMouseDown = () => {
+  send([/* Menu.hide */ 7401]);
+};
+
+const handleContextMenu$1 = (event) => {
+  event.preventDefault();
+};
+
+const showMenu = (
+  x,
+  y,
+  width,
+  height,
+  items,
+  level,
+  parentIndex = -1,
+  mouseBlocking = false
+) => {
+  if (mouseBlocking) {
+    const $BackDrop = create$BackDrop();
+    $BackDrop.onmousedown = handleBackDropMouseDown;
+    $BackDrop.oncontextmenu = handleContextMenu$1;
+    state.$BackDrop = $BackDrop;
+    append($BackDrop);
+  }
+
+  const $Menu = create$Menu();
+  $Menu.append(...items.map(create$MenuItem));
+  $Menu.style.left = `${x}px`;
+  $Menu.style.top = `${y}px`;
+  $Menu.id = `Menu-${level}`;
+
+  if (parentIndex !== -1) {
+    const $ParentMenu = state.$$Menus[level - 1];
+    const $ParentMenuItem = $ParentMenu.children[parentIndex];
+    $ParentMenuItem.ariaExpanded = 'true';
+    $ParentMenuItem.setAttribute('aria-owns', $Menu.id);
+  }
+
+  state.$$Menus.push($Menu);
+  append($Menu);
+
+  if (level === 0) {
+    console.info('focus menu');
+    focus$4($Menu, 'menu');
+  }
+};
+
+const showContextMenu = (x, y, width, height, level, items) => {
+  for (const $Menu of state.$$Menus) {
+    remove($Menu);
+  }
+  state.$$Menus = [];
+  while (state.$$Menus.length > 0) {
+    state.$$Menus[0].remove();
+  }
+  const $Menu = create$Menu();
+  $Menu.append(...items.map(create$MenuItem));
+  $Menu.style.left = `${x}px`;
+  $Menu.style.top = `${y}px`;
+  $Menu.id = `Menu-${level}`;
+  append($Menu);
+  state.$$Menus.push($Menu);
+  // TODO create backdrop
+};
+
+const closeSubMenu = () => {
+  const $SubMenu = state.$$Menus.pop();
+  state.$$Menus.at(-1);
+  remove($SubMenu);
+};
+
+const hideSubMenu = (level) => {
+  const $$ChildMenus = state.$$Menus.slice(level);
+  for (const $ChildMenu of $$ChildMenus) {
+    remove($ChildMenu);
+  }
+};
+
+// export const showSubMenu = (level, items, parentIndex) => {
+//   const $$ChildMenus = state.$$Menus.slice(level)
+//   for (const $ChildMenu of $$ChildMenus) {
+//     Widget.remove($ChildMenu)
+//   }
+//   state.$$Menus = state.$$Menus.slice(0, level)
+//   const $ParentMenu = state.$$Menus[level - 1]
+//   const $ParentMenuItem = $ParentMenu.children[parentIndex]
+//   const rect = $ParentMenuItem.getBoundingClientRect()
+//   const x = rect.right
+//   const y = rect.top
+//   showMenu(x, y, items, level)
+//   // TODO remove aria-owns when sub-menu is closed
+//   $ParentMenuItem.setAttribute('aria-owns', 'Menu')
+// }
+
+// TODO implement focusIndex like this
+// const focusIndex2=(id, index)=>{
+//   const $Menu = state.menus[id]
+//   $Menu.children[index].focus()
+// }
+
+// TODO support nested menus / submenus
+const showControlled = ({
+  x,
+  y,
+  items,
+  handleKeyDown,
+  handleFocusOut,
+  $Parent,
+  level,
+  width,
+  height,
+}) => {
+  showMenu(x, y, width, height, items, level);
+  // TODO menu should not necessarily know about parent (titleBarMenuBar)
+  // it should be the other way around
+  state.$Parent = $Parent;
+  state.handleFocusOut = handleFocusOut;
+  state.handleKeyDown = handleKeyDown;
+  if ($Parent) {
+    // state.$Menu.ariaLabel=''
+    // state.$Menu.ariaLabelledBy  =$Parent.id
+    $Parent.setAttribute('aria-owns', 'Menu');
+  }
+  // Context.setFocus('menu') // TODO overlapping focus: titleBarMenuBar has focus (kinda) but also menu at the same time
+};
+
+// TODO have function to show submenu
+
+const hide = (restoreFocus = true) => {
+  for (const $Menu of state.$$Menus) {
+    remove($Menu);
+  }
+  state.$$Menus = [];
+  if (state.$BackDrop) {
+    remove(state.$BackDrop);
+    state.$BackDrop = undefined;
+  }
+  // TODO focus previous item
+  if (restoreFocus) {
+    focusPrevious();
+  }
+};
+
+const contains = ($Element) => {
+  for (const $Menu of state.$$Menus) {
+    if ($Menu.contains($Element)) {
+      return true
+    }
+  }
+  return false
+};
+
+var M13 = {
+  __proto__: null,
+  state: state,
+  focusIndex: focusIndex$1,
+  showMenu: showMenu,
+  showContextMenu: showContextMenu,
+  closeSubMenu: closeSubMenu,
+  hideSubMenu: hideSubMenu,
+  showControlled: showControlled,
+  hide: hide,
+  contains: contains
+};
+
+// TODO set aria-selected false when sidebar is collapsed
+
+const create$ActivityBarItemIcon = (icon) => {
+  const $ActivityBarItemIcon = document.createElement('div');
+  $ActivityBarItemIcon.className = 'ActivityBarItemIcon';
+  // @ts-ignore
+  $ActivityBarItemIcon.style.maskImage = `url(${icon})`;
+  $ActivityBarItemIcon.style.webkitMaskImage = `url(${icon})`;
+  return $ActivityBarItemIcon
+};
+
+// TODO assetDir might not work with non-builtin extension icons
+const create$ActivityBarItem = (item) => {
+  const assetDir = getAssetDir();
+  const $ActivityBarItemIcon = create$ActivityBarItemIcon(
+    `${assetDir}/${item.icon}`
+  );
+  const $ActivityBarItem = document.createElement('div');
+  $ActivityBarItem.className = 'ActivityBarItem';
+  $ActivityBarItem.ariaLabel = ''; // aria-label is determined by content  TODO is empty aria-label necessary or can it be left off?
+  $ActivityBarItem.title = item.id;
+  $ActivityBarItem.tabIndex = -1;
+  $ActivityBarItem.dataset.viewletId = item.id;
+  if (item.keyShortcuts) {
+    $ActivityBarItem.ariaKeyShortcuts = item.keyShortcuts;
+  }
+  switch (item.flags) {
+    case /* Tab */ 1:
+      $ActivityBarItem.setAttribute('role', 'tab');
+      $ActivityBarItem.ariaSelected = 'false';
+      break
+    case /* Button */ 2:
+      $ActivityBarItem.setAttribute('role', 'button');
+      $ActivityBarItem.ariaHasPopup = 'true';
+      break
+    default:
+      console.warn(`unknown activity bar item flags ${item.flags}`);
+      break
+  }
+  $ActivityBarItem.append($ActivityBarItemIcon);
+  return $ActivityBarItem
+};
+
+const get$ItemFromEvent = (event) => {
+  const $Target = event.target;
+  switch ($Target.className) {
+    case 'ActivityBarItemIcon':
+      return $Target.parentNode
+    case 'ActivityBarItem':
+      return $Target
+    default:
+      return undefined
+  }
+};
+
+const getNodeIndex$1 = ($Node) => {
+  let index = 0;
+  while (($Node = $Node.previousElementSibling)) {
+    index++;
+  }
+  return index
+};
+
+const handleMousedown = (event) => {
+  if (event.button !== 0) {
+    return
+  }
+  const $Item = get$ItemFromEvent(event);
+  if (!$Item) {
+    return
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const index = getNodeIndex$1($Item);
+  const x = event.clientX;
+  const y = event.clientY;
+  send([
+    /* ActivityBar.handleClick */ 8001,
+    /* index */ index,
+    /* x */ x,
+    /* y */ y,
+  ]);
+};
+
+const handleContextMenu = (event) => {
+  event.preventDefault();
+  // TODO also move side bar position command
+  const x = event.clientX;
+  const y = event.clientY;
+  send([
+    /* activityBarHandleContextMenu */ 8002,
+    /* x */ x,
+    /* y */ y,
+  ]);
+};
+
+const handleBlur = () => {};
+
+const name = 'ActivityBar';
+
+const create$3 = () => {
+  const $ActivityBar = state$8.$ActivityBar;
+  $ActivityBar.setAttribute('role', 'toolbar'); // TODO use idl once supported by chrome
+  $ActivityBar.ariaLabel = 'Activity Bar';
+  $ActivityBar.ariaOrientation = 'vertical';
+  // $ActivityBar.append(...activityBarItems.map(create$ActivityBarItem))
+  $ActivityBar.onmousedown = handleMousedown;
+  $ActivityBar.oncontextmenu = handleContextMenu;
+  $ActivityBar.onblur = handleBlur;
+  $ActivityBar.addEventListener('focusin', handleFocusIn);
+  // $ActivityBar.children[focusedIndex].tabIndex = 0
+  return {
+    $ActivityBar,
+  }
+};
+
+const dispose$1 = (state) => {};
+
+const setItems$1 = (state, activityBarItems) => {
+  object(state);
+  array(activityBarItems);
+  const $ActivityBar = state.$ActivityBar;
+  while ($ActivityBar.firstChild) {
+    $ActivityBar.firstChild.remove();
+  }
+  $ActivityBar.append(...activityBarItems.map(create$ActivityBarItem));
+};
+
+const handleFocusIn = () => {
+  setFocus('activityBar');
+};
+
+const selectIndex = (state, oldIndex, newIndex) => {
+  console.log({ select: true, oldIndex, newIndex });
+  if (oldIndex !== -1) {
+    const $OldItem = state.$ActivityBar.children[oldIndex];
+    $OldItem.ariaSelected = 'false';
+    if (newIndex !== -1) {
+      $OldItem.tabIndex = -1;
+    }
+  }
+  if (newIndex !== -1) {
+    const $NewItem = state.$ActivityBar.children[newIndex];
+    $NewItem.ariaSelected = 'true';
+    $NewItem.tabIndex = 0;
+  }
+};
+
+const focus$Item = ($Item) => {
+  focus$4($Item, 'activityBar');
+};
+
+const setFocusedIndex = (state, oldIndex, newIndex) => {
+  const { $ActivityBar } = state;
+  if (oldIndex !== -1) {
+    const $OldItem = $ActivityBar.children[oldIndex];
+    $OldItem.tabIndex = -1;
+  }
+  if (newIndex !== -1) {
+    const $NewItem = $ActivityBar.children[newIndex];
+    $NewItem.tabIndex = 0;
+    focus$Item($NewItem);
+  }
+};
+
+const setBadgeCount = (state, index, count) => {
+  const { $ActivityBar } = state;
+  const $Item = $ActivityBar.children[index];
+  const $Badge = document.createElement('div');
+  $Badge.className = 'ActivityBarItemBadge';
+  $Badge.textContent = `${count}`;
+  // @ts-ignore
+  $Item.append($Badge);
+};
+
+var M27 = {
+  __proto__: null,
+  name: name,
+  create: create$3,
+  dispose: dispose$1,
+  setItems: setItems$1,
+  selectIndex: selectIndex,
+  setFocusedIndex: setFocusedIndex,
+  setBadgeCount: setBadgeCount
+};
+
+const getIconClassName = (icon) => {
+  switch (icon) {
+    case '$(sync-spin)':
+    case '$(sync~spin)':
+      return 'StatusBarIcon AnimationSpin'
+    case '$(sync)':
+      return 'StatusBarIcon'
+    case '$(source-control)':
+      return 'StatusBarIcon'
+    default:
+      console.warn(`unknown icon "${icon}"`);
+      return ''
+  }
+};
+
+const getMaskImageUrl = (icon) => {
+  switch (icon) {
+    case '$(sync-spin)':
+    case '$(sync~spin)':
+    case '$(sync)':
+      return `url(/icons/icon-sync.svg)`
+    case '$(source-control)':
+      return 'url(/icons/icon-source-control.svg)'
+    default:
+      return ''
+  }
+};
+
+const create$StatusBarItem = (item) => {
+  const $StatusBarItem = document.createElement('li');
+  $StatusBarItem.className = 'StatusBarItem';
+  $StatusBarItem.setAttribute('role', 'button');
+  $StatusBarItem.dataset.name = item.name;
+  $StatusBarItem.tabIndex = -1;
+  $StatusBarItem.textContent = item.text;
+  $StatusBarItem.dataset.command = item.command;
+  if (item.tooltip) {
+    $StatusBarItem.title = item.tooltip;
+  }
+  if (item.icon) {
+    const $StatusBarItemIcon = document.createElement('span');
+    $StatusBarItemIcon.className = getIconClassName(item.icon);
+    // @ts-ignore
+    $StatusBarItemIcon.style.maskImage = getMaskImageUrl(item.icon);
+    $StatusBarItemIcon.style.webkitMaskImage = getMaskImageUrl(item.icon);
+    $StatusBarItem.prepend($StatusBarItemIcon);
+  }
+  return $StatusBarItem
+};
+
+const handleClick$1 = (event) => {
+  const $Target = event.target;
+  if ($Target.className !== 'StatusBarItem') {
+    return
+  }
+  const command = Number.parseInt($Target.dataset.command, 10);
+  send(command);
+};
+
+// TODO get items from renderer worker
+// const statusBarItemsLeft = [
+//   {
+//     name: 'RunTests',
+//     text: 'Run Tests',
+//     tooltip: '',
+//     command: 909021,
+//   },
+// ]
+
+// const statusBarItemsRight = []
+
+const create$2 = (statusBarItemsLeft, statusBarItemsRight) => {
+  const $StatusBarItemsLeft = document.createElement('ul');
+  $StatusBarItemsLeft.id = 'StatusBarItemsLeft';
+
+  const $StatusBarItemsRight = document.createElement('ul');
+  $StatusBarItemsRight.id = 'StatusBarItemsRight';
+
+  const $StatusBar = state$8.$StatusBar;
+  $StatusBar.onclick = handleClick$1;
+  $StatusBar.tabIndex = 0;
+  $StatusBar.setAttribute('role', 'status');
+  $StatusBar.ariaLive = 'off'; // see https://github.com/microsoft/vscode/issues/94677
+  $StatusBar.append($StatusBarItemsLeft, $StatusBarItemsRight);
+
+  return {
+    $StatusBar,
+    $StatusBarItemsLeft,
+    $StatusBarItemsRight,
+  }
+};
+
+const clearNode = (node) => {
+  while (node.firstChild) {
+    node.firstChild.remove();
+  }
+};
+
+const setItems = (state, statusBarItemsLeft, statusBarItemsRight) => {
+  const $StatusBarItemsLeft = state.$StatusBarItemsLeft;
+  const $StatusBarItemsRight = state.$StatusBarItemsRight;
+  clearNode($StatusBarItemsLeft);
+  clearNode($StatusBarItemsRight);
+  $StatusBarItemsLeft.append(...statusBarItemsLeft.map(create$StatusBarItem));
+  $StatusBarItemsRight.append(...statusBarItemsRight.map(create$StatusBarItem));
+};
+
+const focus$1 = (state) => {
+  object(state);
+  state.$StatusBar.focus();
+};
+
+var M28 = {
+  __proto__: null,
+  create: create$2,
+  setItems: setItems,
+  focus: focus$1
+};
+
+// TODO set proper tabIndex 0 to focused item https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
+
+// TODO screenreader doesn't read top level label
+// when menu is open,
+// first item is selected,
+// right is clicked it just reads
+// "Expanded" instead of "Selection Expanded"
+
+// TODO sometimes screenreader reads too much (e.g. "File, expanded, opens menu, expanded")
+
+// TODO don't focus on separators
+
+// TODO don't focus on hover
+// only focus on hover when it has already focus or the menu has focus
+
+// TODO title bar menu bar is very inefficient:
+
+// before: 5 times recalculate style
+// 1.37ms Recalculate style
+// 83us Update Layer tree
+// 0.34ms paint
+// 0.79ms composite layer
+// 0.23ms Hit test
+// 1.42ms Recalculate style
+// 1.44ms Recalculate style
+// 2.08ms Recalculate style
+// 0.44ms Recalculate style
+// 0.52ms Layout
+// 0.16ms Update Layer Tree
+// 48us hit test
+// 16us Update Layer Tree
+// 0.36ms paint
+// 0.33ms composite layer
+
+// now: 2 recalculate styles
+// 0.43ms recalculate style
+// 0.53ms recalculate style
+// 0.19ms layout
+// 0.16ms update layer tree
+// 30us hit test
+// 17us update layer tree
+// 0.17ms paint
+// 0.19ms composite layers
+
+const create$TopLevelEntry = (item) => {
+  const $TitleBarTopLevelEntry = document.createElement('li');
+  $TitleBarTopLevelEntry.className = 'TitleBarTopLevelEntry';
+  $TitleBarTopLevelEntry.tabIndex = -1;
+  $TitleBarTopLevelEntry.ariaHasPopup = 'true';
+  $TitleBarTopLevelEntry.ariaExpanded = 'false';
+  $TitleBarTopLevelEntry.setAttribute('role', 'menuitem'); // TODO use idl once supported by chrome
+  if (item.keyboardShortCut) {
+    $TitleBarTopLevelEntry.ariaKeyShortcuts = item.keyboardShortCut;
+  }
+  $TitleBarTopLevelEntry.textContent = item.name;
+  $TitleBarTopLevelEntry.dataset.id = item.id;
+  $TitleBarTopLevelEntry.id = `MenuItem-${item.id}`;
+  return $TitleBarTopLevelEntry
+};
+
+const getMenuEntryBounds = (state, index) => {
+  const $MenuEntry = state.$TitleBarMenu.children[index];
+  const rect = $MenuEntry.getBoundingClientRect();
+  return {
+    left: rect.left,
+    bottom: rect.bottom,
+  }
+};
+
+const getNodeIndex = ($Node) => {
+  let index = 0;
+  while (($Node = $Node.previousElementSibling)) {
+    index++;
+  }
+  return index
+};
+
+const getIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'TitleBarTopLevelEntry':
+      return getNodeIndex($Target)
+    default:
+      return -1
+  }
+};
+
+const handleClick = (event) => {
+  const $Target = event.target;
+  const index = getIndex($Target);
+  if (index === -1) {
+    return
+  }
+  // event.preventDefault()
+  send([/* TitleBarMenu.handleClick */ 4610, /* index */ index]);
+};
+
+const focusIndex = (state, unFocusIndex, index) => {
+  object(state);
+  number(unFocusIndex);
+  number(focusIndex);
+  console.log('FOCUS ONE');
+  console.log({ unFocusIndex, index });
+  const $TitleBarMenu = state.$TitleBarMenu;
+  if (unFocusIndex !== -1) {
+    $TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false';
+    $TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns');
+  }
+  $TitleBarMenu.children[index].focus();
+};
+
+const handleMouseEnter = (event) => {
+  const $Target = event.target;
+  const index = getIndex($Target);
+  if (index === -1) {
+    return
+  }
+  const enterX = event.clientX;
+  const enterY = event.clientY;
+  send([
+    /* TitleBarMenu.focusIndex */ 4613,
+    /* index */ index,
+    /* enterX */ enterX,
+    /* enterY */ enterY,
+  ]);
+};
+
+// TODO the focus variable is confusing: false means keep focus in menubar, true means focus the menu
+const openMenu = (
+  state$1,
+  unFocusIndex,
+  index,
+  level,
+  menuItems,
+  menuFocusedIndex,
+  focus,
+  x,
+  y,
+  width,
+  height
+) => {
+  object(state$1);
+  number(unFocusIndex);
+  number(index);
+  number(level);
+  array(menuItems);
+  number(menuFocusedIndex);
+  boolean(focus);
+  number(x);
+  number(y);
+  number(width);
+  number(height);
+  // TODO this code is very unclean
+  state$1.$TitleBarMenu.addEventListener('mouseenter', handleMouseEnter, {
+    capture: true,
+  });
+  if (unFocusIndex !== -1) {
+    state$1.$TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false';
+    state$1.$TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns');
+  }
+  state$1.$TitleBarMenu.children[index].ariaExpanded = 'true';
+  const $$Menus = state.$$Menus;
+  state.$$Menus = [];
+  showControlled({
+    x,
+    y,
+    width,
+    height,
+    items: menuItems,
+    handleKeyDown,
+    handleFocusOut,
+    $Parent: state$1.$TitleBarMenu.children[index],
+    level,
+  });
+  if (menuFocusedIndex !== -1) {
+    focusIndex$1(0, -1, menuFocusedIndex);
+  }
+  for (const $Menu of $$Menus) {
+    remove($Menu);
+  }
+};
+
+// TODO there need to be two variants of closeMenu: one just closes menu, another close menu and focuses top level entry
+const closeMenu = (state, unFocusIndex, index) => {
+  if (unFocusIndex !== -1) {
+    state.$TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false';
+    state.$TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns');
+  }
+  if (index !== -1) {
+    state.$TitleBarMenu.children[index].focus();
+  }
+  hide(/* restoreFocus */ false);
+  state.$TitleBarMenu.removeEventListener('mouseenter', handleMouseEnter, {
+    capture: true,
+  });
+};
+
+// TODO should only have the one listener in KeyBindings.js
+const handleKeyDown = (event) => {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyArrowDown */ 4618]);
+      break
+    case 'ArrowUp':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyArrowUp */ 4619]);
+      break
+    case 'ArrowRight':
+      console.log('arrow right');
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyArrowRight */ 4620]);
+      break
+    case 'ArrowLeft':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyArrowLeft */ 4626]);
+      break
+    case 'Enter':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyEnter */ 4624]);
+      break
+    case ' ':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeySpace */ 4623]);
+      break
+    case 'Home':
+    case 'PageUp':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyHome */ 4621]);
+      break
+    case 'End':
+    case 'PageDown':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyEnd */ 4622]);
+      break
+    case 'Escape':
+      event.preventDefault();
+      event.stopPropagation();
+      send([/* TitleBarMenu.handleKeyEscape */ 4625]);
+      break
+  }
+};
+
+const isInsideTitleBarMenu = ($Element) => {
+  return (
+    $Element.classList.contains('MenuItem') ||
+    $Element.classList.contains('Menu')
+  )
+};
+
+const handleFocusOut = (event) => {
+  const $ActiveElement = event.relatedTarget;
+  if ($ActiveElement && isInsideTitleBarMenu($ActiveElement)) {
+    console.log('RETURN');
+    return
+  }
+  send([
+    /* TitleBarMenu.closeMenu */ 4616,
+    /* keepFocus */ false,
+  ]);
+};
+
+const create$1 = () => {
+  const $TitleBarMenu = document.createElement('ul');
+  $TitleBarMenu.id = 'TitleBarMenu';
+  $TitleBarMenu.setAttribute('role', 'menubar');
+  $TitleBarMenu.onkeydown = handleKeyDown;
+  // TODO could have one mousedown listener on titlebar that delegates to titlebarMenu if necessary
+  $TitleBarMenu.onmousedown = handleClick;
+  $TitleBarMenu.addEventListener('focusout', handleFocusOut);
+  return $TitleBarMenu
+};
+
+const setEntries = (state, titleBarEntries) => {
+  const $TitleBarMenu = state.$TitleBarMenu;
+  $TitleBarMenu.append(...titleBarEntries.map(create$TopLevelEntry));
+};
+
+const create = () => {
+  const $TitleBarMenu = create$1();
+  // TODO set aria label for title bar menu
+  // TODO add tests for aria properties
+  const $TitleBar = state$8.$TitleBar;
+  $TitleBar.ariaLabel = 'Title Bar';
+  $TitleBar.setAttribute('role', 'contentinfo');
+  $TitleBar.append($TitleBarMenu);
+  return {
+    $TitleBar,
+    $TitleBarMenu,
+  }
+};
+
+const dispose = (state) => {};
+
+const focus = (state) => {
+  state.$TitleBarMenu.firstChild.focus();
+};
+
+const menuSetEntries = setEntries;
+
+const menuFocusIndex = focusIndex;
+
+const menuOpen = openMenu;
+
+const menuClose = closeMenu;
+
+const menuGetEntryBounds = getMenuEntryBounds;
+
+var M29 = {
+  __proto__: null,
+  create: create,
+  dispose: dispose,
+  focus: focus,
+  menuSetEntries: menuSetEntries,
+  menuFocusIndex: menuFocusIndex,
+  menuOpen: menuOpen,
+  menuClose: menuClose,
+  menuGetEntryBounds: menuGetEntryBounds
+};
+
+const reload = () => {
+  location.reload();
+};
+
+const minimize = () => {};
+
+const maximize = () => {};
+
+const unmaximize = () => {};
+
+const close = () => {
+  // window.close()
+};
+
+const setTitle = (title) => {
+  document.title = title;
+};
+
+const __initialize__ = () => {
+  register$1(8080, reload);
+  register$1(8081, minimize);
+  register$1(8082, maximize);
+  register$1(8083, unmaximize);
+  register$1(8084, close);
+  register$1(8085, setTitle);
+};
+
+var M30 = {
+  __proto__: null,
+  __initialize__: __initialize__
+};
+
+// files that should be in initial chunk
+
+// hack so that rollup doesn't tree-shake out these modules
+globalThis.M = [
+  M1,
+  M2,
+  M4,
+  M5,
+  M6,
+  M7,
+  M9,
+  M13,
+  M14,
+  M15,
+  M17,
+  M18,
+  M22,
+  M26,
+  M27,
+  M28,
+  M29,
+  M30,
+];
+
+const main = async () => {
+  onerror = (error) => {
+    alert(error);
+  };
+  onunhandledrejection = (event) => {
+    alert(event.reason);
+  };
+
+  if (platform === 'web') {
+    // disable prompt to download app as pwa
+    // @ts-ignore
+    window.onbeforeinstallprompt = (event) => {
+      event.preventDefault();
+    };
+  }
+  // TODO remove this, all messages should come from renderer worker
+  // const config = JSON.parse(document.getElementById('Config').textContent)
+  // await Workbench.startup(config)
+
+  // ColorTheme.set(`* {color: red}`)
+  // TODO this is discovered very late
+  await hydrate$3();
+
+  // if ('serviceWorker' in navigator) {
+  //   await navigator.serviceWorker.register('/serviceWorker.js', {
+  //     scope: '/',
+  //   })
+  //   console.log('sw registered')
+  // } else {
+  //   console.log('serviceworker not available')
+  // }
+  // logger.info(`[Service Worker] registered`)
+};
+
+main();
+
+// 1. invoke shared process to read file
+// 2. display file
+// 3. optimize
+
+// DEBUG
+
+// globalThis.Panel = Panel
+// globalThis.Context = Context
+// globalThis.StatusBar = StatusBar
+// globalThis.ViewService = ViewService
+// globalThis.SideBar = SideBar
+// globalThis.FileSystem = FileSystem
+
+export { state$8 as A, mount as B, setAdditionalFocus as C, removeAdditionalFocus as D, append as a, string as b, array as c, setFocus as d, showControlled as e, findIndex as f, getStateFromEvent as g, hide as h, focusIndex$1 as i, hideSubMenu as j, showMenu as k, showContextMenu as l, remove as m, number as n, object as o, focusPrevious as p, supportsHtml5Dialog as q, register$1 as r, send as s, focus$4 as t, lookupKeyBinding as u, create$4 as v, setText as w, setSelections as x, setScrollBar as y, state$1 as z };
+//# sourceMappingURL=rendererProcessMain.js.map