@lvce-editor/server 0.0.26 → 0.0.29

package/static/bf7d47a/packages/renderer-process/dist/rendererProcessMain.js

@@ -0,0 +1,3937 @@
+const MODULE_NOTIFICATION = 2;
+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_FIND_WIDGET = 23;
+const MODULE_KEYBINDINGS = 26;
+const MODULE_MENU = 31;
+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 MODULE_DOWNLOAD = 47;
+const MODULE_OPEN = 48;
+const MODULE_CLIPBOARD = 49;
+const MODULE_INIT_DATA = 50;
+const MODULE_TEST_FRAME_WORK = 51;
+const MODULE_WEB_STORAGE = 52;
+
+const state$9 = {
+  commands: Object.create(null),
+  pendingModules: Object.create(null),
+};
+
+const loadModule = (moduleId) => {
+  switch (moduleId) {
+    case MODULE_NOTIFICATION:
+      return import('./Notification.ipc.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_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_WEB_STORAGE:
+      return import('./WebStorage.ipc.js')
+    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')
+    case MODULE_DOWNLOAD:
+      return import('./Download.ipc.js')
+    case MODULE_OPEN:
+      return import('./Open.ipc.js')
+    case MODULE_CLIPBOARD:
+      return import('./ClipBoard.ipc.js')
+    case MODULE_INIT_DATA:
+      return import('./InitData.ipc.js')
+    case MODULE_TEST_FRAME_WORK:
+      return import('./TestFrameWork.ipc.js')
+    default:
+      throw new Error('unknown module')
+  }
+};
+
+const getOrLoadModule = (moduleId) => {
+  if (!state$9.pendingModules[moduleId]) {
+    const importPromise = loadModule(moduleId);
+    state$9.pendingModules[moduleId] = importPromise.then((module) =>
+      module.__initialize__()
+    );
+  }
+  return state$9.pendingModules[moduleId]
+};
+
+const getModuleId = (commandId) => {
+  switch (commandId) {
+    case 'TestFrameWork.showOverlay':
+    case 'TestFrameWork.performAction':
+    case 'TestFrameWork.checkSingleElementCondition':
+    case 'TestFrameWork.checkMultiElementCondition':
+    case 'TestFrameWork.performKeyBoardAction':
+      return MODULE_TEST_FRAME_WORK
+    case 'ClipBoard.readText':
+    case 'ClipBoard.writeText':
+      return MODULE_CLIPBOARD
+    case 'Developer.showState':
+    case 'Developer.getMemoryUsage':
+      return MODULE_DEVELOPER
+    case 'Download.downloadFile':
+      return MODULE_DOWNLOAD
+    case 'Open.openUrl':
+      return MODULE_OPEN
+    case 'InitData.getInitData':
+      return MODULE_INIT_DATA
+    case 549:
+    case 550:
+    case 551:
+      return MODULE_VIEW_SERVICE
+    case 'KeyBindings.hydrate':
+      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 'Notification.create':
+    case 'Notification.dispose':
+    case 'Notification.createWithOptions':
+      return MODULE_NOTIFICATION
+    case 'Layout.update':
+    case 'Layout.hydrate':
+    case 'Layout.hide':
+    case 'Layout.getBounds':
+    case 'Layout.show':
+      return MODULE_LAYOUT
+    case 'Viewlet.refresh':
+    case 'Viewlet.invoke':
+    case 'Viewlet.send':
+    case 'Viewlet.focus':
+    case 'Viewlet.dispose':
+    case 'Viewlet.appendViewlet':
+    case 'Viewlet.load':
+    case 'Viewlet.handleError':
+    case 'Viewlet.sendMultiple':
+      return MODULE_VIEWLET
+    case 'Audio.play':
+      return MODULE_AUDIO
+    case 'ImagePreview.create':
+    case 'ImagePreview.dispose':
+    case 'ImagePreview.update':
+    case 'ImagePreview.showError':
+      return MODULE_IMAGE_PREVIEW
+    case 'EditorError.create':
+      return MODULE_EDITOR_ERROR
+
+    case 'FindWidget.create':
+    case 'FindWidget.dispose':
+    case 'FindWidget.setResults':
+      return MODULE_FIND_WIDGET
+    case 'EditorRename.create':
+    case 'EditorRename.finish':
+    case 'EditorRename.dispose':
+      return MODULE_EDITOR_RENAME
+    case 'Css.setInlineStyle':
+      return MODULE_CSS
+    case 'Location.getPathName':
+    case 'Location.setPathName':
+    case 'Location.hydrate':
+    case 'Location.getHref':
+      return MODULE_LOCATION
+    case 'EditorHover.create':
+      return MODULE_EDITOR_HOVER
+    case 6661:
+    case 6662:
+    case 6663:
+    case 6664:
+      return MODULE_PANEL
+    case 33111:
+      return MODULE_WORKBENCH
+    case 'Dialog.prompt':
+    case 'Dialog.alert':
+    case 'Dialog.showErrorDialogWithOptions':
+    case 'Dialog.close':
+      return MODULE_DIALOG
+    case 'Menu.showControlled':
+    case 'Menu.hide':
+    case 'Menu.focusIndex':
+    case 'Menu.showSubMenu':
+    case 'Menu.hideSubMenu':
+    case 'Menu.showMenu':
+    case 'Menu.showContextMenu':
+    case 'Menu.show':
+      return MODULE_MENU
+    case 'Window.reload':
+    case 'Window.minimize':
+    case 'Window.maximize':
+    case 'Window.unmaximize':
+    case 'Window.close':
+    case 'Window.setTitle':
+    case 'Window.onVisibilityChange':
+      return MODULE_WINDOW
+    case 'StorageBrowser.clear':
+    case 'StorageBrowser.getItem':
+    case 'StorageBrowser.setItem':
+      return MODULE_WEB_STORAGE
+    case 'Meta.setThemeColor':
+      return MODULE_META
+    case 'ServiceWorker.register':
+    case 'ServiceWorker.uninstall':
+      return MODULE_SERVICE_WORKER
+    default:
+      throw new Error(`command ${commandId} not found`)
+  }
+};
+
+const loadCommand = async (command) => {
+  await getOrLoadModule(getModuleId(command));
+};
+
+const register$1 = (commandId, listener) => {
+  state$9.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$9.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$9.commands) {
+    return state$9.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__$6 = () => {
+  register$1('Css.setInlineStyle', setInlineStyle);
+};
+
+var M1 = {
+  __proto__: null,
+  __initialize__: __initialize__$6
+};
+
+const callbacks = Object.create(null);
+
+const resolve = (id, result) => {
+  if (!(id in callbacks)) {
+    console.warn(`callback ${id} may already be disposed`);
+    return
+  }
+  callbacks[id].resolve(result);
+};
+
+class JsonRpcError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'JsonRpcError';
+  }
+}
+
+// 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$8 = async ({ url }) => {
+  string(url);
+  const port = await new Promise((resolve) => {
+    globalThis.acceptPort = resolve;
+    import(url);
+  });
+  delete globalThis.acceptPort;
+  return port
+};
+
+var IpcParentWithMessagePort = {
+  __proto__: null,
+  create: create$8
+};
+
+const getDisplayName = (name) => {
+  if (!name) {
+    return '<unknown> worker'
+  }
+  if (name.endsWith('Worker')) {
+    return name.toLowerCase()
+  }
+  return `${name} worker`
+};
+
+const tryToGetActualErrorMessage = async ({ url, name }) => {
+  const displayName = getDisplayName(name);
+  try {
+    await import(url);
+    return `Failed to start ${displayName}: Unknown Error`
+  } catch (error) {
+    if (
+      error &&
+      error instanceof Error &&
+      error.message.startsWith('Failed to fetch dynamically imported module')
+    ) {
+      try {
+        const response = await fetch(url);
+        switch (response.status) {
+          case 404:
+            return `Failed to start ${displayName}: Not found (404)`
+          default:
+            return `Failed to start ${displayName}: Unknown Network Error`
+        }
+      } catch {
+        return `Failed to start ${displayName}: Unknown Network Error`
+      }
+    }
+    return `Failed to start ${displayName}: ${error}`
+  }
+};
+
+const isFirefoxError = (message) => {
+  return [
+    'SyntaxError: import declarations may only appear at top level of a module',
+    'SyntaxError: export declarations may only appear at top level of a module',
+  ].includes(message)
+};
+
+const create$7 = async ({ url, name }) => {
+  try {
+    const worker = new Worker(url, {
+      type: 'module',
+      name,
+    });
+    await new Promise((resolve, reject) => {
+      const cleanup = () => {
+        worker.onmessage = null;
+        worker.onerror = null;
+      };
+      const handleFirstMessage = (event) => {
+        cleanup();
+        if (event.data === 'ready') {
+          resolve(undefined);
+        } else {
+          reject(new Error('unexpected first message from renderer worker'));
+        }
+      };
+      const handleFirstError = async (event) => {
+        cleanup();
+        if (isFirefoxError(event.message)) {
+          event.preventDefault();
+          reject(new Error('module workers are not supported in firefox'));
+        } else {
+          const actualErrorMessage = await tryToGetActualErrorMessage({
+            url,
+            name,
+          });
+          reject(new Error(actualErrorMessage));
+        }
+      };
+      worker.onmessage = handleFirstMessage;
+      worker.onerror = handleFirstError;
+    });
+    return worker
+  } catch (error) {
+    if (
+      error &&
+      error instanceof Error &&
+      error.message === 'module workers are not supported in firefox'
+    ) {
+      const IpcParentWithMessagePort$1 = await Promise.resolve().then(function () { return IpcParentWithMessagePort; });
+      return IpcParentWithMessagePort$1.create({ url })
+    }
+    throw error
+  }
+};
+
+const create$6 = async (url) => {
+  const referencePort = await new Promise((resolve) => {
+    globalThis.acceptReferencePort = resolve;
+    import(url);
+  });
+  delete globalThis.acceptReferencePort;
+  return referencePort
+};
+
+// TODO lazyload these files
+
+/* istanbul ignore file */
+
+const Methods = {
+  MessagePort: 1,
+  ModuleWorker: 2,
+  ReferencePort: 3,
+};
+
+/**
+ * @type {number}
+ */
+const METHOD_PREFERRED = Methods.ModuleWorker;
+
+const create$5 = async ({ method, ...options }) => {
+  switch (METHOD_PREFERRED) {
+    case Methods.ModuleWorker:
+      return create$7(options)
+    case Methods.MessagePort:
+      return create$8(options)
+    case Methods.ReferencePort:
+      return create$6(options)
+    default:
+      throw new Error('unknown method')
+  }
+};
+
+/* istanbul ignore file */
+
+// TODO this should always be completely tree shaken out during build
+
+/**
+ * @returns {'electron'|'remote'|'web'}
+ */
+const getPlatform = () => {
+  // @ts-ignore
+  {
+    // @ts-ignore
+    return 'remote'
+  }
+};
+
+const platform = getPlatform();
+
+// TODO treeshake this function out when targeting electron
+
+const state$8 = {
+  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
+    {
+      // @ts-ignore
+      return '/bf7d47a'
+    }
+  },
+  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$8.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$8.getAssetDir()
+};
+
+const supportsHtml5Dialog = () => {
+  return state$8.supportsHtml5Dialog()
+};
+
+const isElectron = () => {
+  return state$8.isElectron()
+};
+
+const getRendererWorkerUrl = () => {
+  const assetDir = getAssetDir();
+  const urlRendererWorker = `${assetDir}/packages/renderer-worker/src/rendererWorkerMain.js`;
+  return urlRendererWorker
+};
+
+var M18 = {
+  __proto__: null,
+  platform: platform,
+  state: state$8,
+  isMobileOrTablet: isMobileOrTablet,
+  getBrowser: getBrowser,
+  getAssetDir: getAssetDir,
+  supportsHtml5Dialog: supportsHtml5Dialog,
+  isElectron: isElectron,
+  getRendererWorkerUrl: getRendererWorkerUrl
+};
+
+// const URL_RENDERER_WORKER =
+// '/packages/renderer-worker/distmin/rendererWorkerMain-0ead0bed.js'
+
+const state$7 = {
+  /**
+   * @type {any}
+   */
+  ipc: undefined,
+};
+
+class NonError extends Error {
+  name = 'NonError'
+
+  constructor(message) {
+    super(message);
+  }
+}
+
+// ensureError based on https://github.com/sindresorhus/ensure-error/blob/main/index.js (License MIT)
+const ensureError = (input) => {
+  if (!(input instanceof Error)) {
+    return new NonError(input)
+  }
+  return input
+};
+
+const serializeError = (error) => {
+  error = ensureError(error);
+  return {
+    stack: error.stack,
+    message: error.message,
+  }
+};
+
+const handleMessageFromRendererWorker = async (event) => {
+  const message = event.data;
+  if ('id' in message) {
+    if ('method' in message) {
+      try {
+        const result = await execute(message.method, ...message.params);
+        state$7.ipc.send({
+          jsonrpc: '2.0',
+          id: message.id,
+          result,
+        });
+        return
+      } catch (error) {
+        const serializedError = serializeError(error);
+        state$7.ipc.send({
+          jsonrpc: '2.0',
+          id: message.id,
+          error: {
+            message: serializedError.message,
+            stack: serializedError.stack,
+          },
+        });
+      }
+      return
+    }
+    resolve(message.id, message);
+    return
+  }
+  throw new JsonRpcError('unexpected message from renderer process')
+};
+
+const getIpc = async () => {
+  const rendererWorker = await create$5({
+    method: Methods.ModuleWorker,
+    url: getRendererWorkerUrl(),
+    name: 'Renderer Worker',
+  });
+  return {
+    send(message) {
+      rendererWorker.postMessage(message);
+    },
+    sendAndTransfer(message, transferables) {
+      rendererWorker.postMessage(message, transferables);
+    },
+    get onmessage() {
+      return rendererWorker.onmessage
+    },
+    set onmessage(listener) {
+      rendererWorker.onmessage = listener;
+    },
+  }
+};
+
+const hydrate$2 = async (config) => {
+  const ipc = await getIpc();
+
+  // setup electron message port
+  if (isElectron()) {
+    await new Promise((resolve, reject) => {
+      const handleIpcMessage = (event) => {
+        if (event.data !== 'get-port') {
+          reject(new Error('unexpected message from renderer worker'));
+          return
+        }
+        const handleMessageFromWindow = (event) => {
+          const port = event.ports[0];
+          ipc.sendAndTransfer('port', [port]);
+          resolve();
+        };
+
+        // @ts-ignore
+        window.addEventListener('message', handleMessageFromWindow, {
+          once: true,
+        });
+        // @ts-ignore
+        window.myApi.ipcConnect();
+      };
+      ipc.onmessage = handleIpcMessage;
+    });
+  }
+  ipc.onmessage = handleMessageFromRendererWorker;
+  state$7.ipc = ipc;
+};
+
+const send$1 = (method, ...params) => {
+  state$7.ipc.send({
+    jsonrpc: '2.0',
+    method,
+    params,
+  });
+};
+
+const state$6 = {
+  $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$6.$ActivityBar;
+  const $Main = state$6.$Main;
+  const $TitleBar = state$6.$TitleBar;
+  const $SideBar = state$6.$SideBar;
+  const $StatusBar = state$6.$StatusBar;
+  const $Panel = state$6.$Panel;
+  const $SashSideBar = state$6.$SashSideBar;
+  const $SashPanel = state$6.$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$1(
+    /* Layout.handleResize */ 'Layout.handleResize',
+    /* bounds */ getBounds()
+  );
+};
+
+const getSashId = ($Target) => {
+  console.log({ $Target });
+  if ($Target.id === 'SashPanel') {
+    return 'Panel'
+  }
+  if ($Target.id === 'SashSideBar') {
+    return 'SideBar'
+  }
+  return ''
+};
+
+const handleSashPointerMove = (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+  send$1(
+    /* Layout.handleSashPointerMove */ 'Layout.handleSashPointerMove',
+    /* x */ x,
+    /* y */ y
+  );
+};
+
+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 = (event) => {
+  // 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 $Target = event.target;
+  const id = getSashId($Target);
+  send$1(
+    /* Layout.handleSashPointerDown */ 'Layout.handleSashPointerDown',
+    /* id */ id
+  );
+};
+
+const show = (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';
+  $SashSideBar.id = 'SashSideBar';
+
+  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
+  const $SashPanel = document.createElement('div');
+  $SashPanel.className = 'SashHorizontal';
+  $SashPanel.id = 'SashPanel';
+
+  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$6.$ActivityBar = $ActivityBar;
+  state$6.$Main = $Main;
+  state$6.$Panel = $Panel;
+  state$6.$SideBar = $SideBar;
+  state$6.$StatusBar = $StatusBar;
+  state$6.$TitleBar = $TitleBar;
+  state$6.$Workbench = $Workbench;
+  state$6.$SashPanel = $SashPanel;
+  state$6.$SashSideBar = $SashSideBar;
+  update(points);
+  // document.body.role= 'application' // TODO this doesn't seem to work
+  // @ts-ignore
+  $Workbench.role = 'application';
+  document.body.append($Workbench);
+  window.addEventListener('resize', handleResize, { passive: true });
+  $SashSideBar.addEventListener('pointerdown', handleSashPointerDown);
+  $SashPanel.addEventListener('pointerdown', handleSashPointerDown);
+};
+
+const hide$1 = () => {
+  state$6.$Workbench.remove();
+  window.removeEventListener('resize', handleResize);
+};
+
+const __initialize__$5 = () => {
+  register$1('Layout.update', 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('Layout.show', show);
+  register$1('Layout.hide', hide$1);
+  register$1('Layout.getBounds', getBounds);
+};
+
+var M2 = {
+  __proto__: null,
+  __initialize__: __initialize__$5
+};
+
+const state$5 = {
+  // 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$5.contexts[key]
+};
+
+const set = (key, value) => {
+  state$5.contexts[key] = value;
+};
+
+const remove$1 = (key) => {
+  delete state$5.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$4 = {
+  $PreviousFocusElement: undefined,
+  currentFocus: '',
+};
+
+const setFocus = (key) => {
+  if (state$4.currentFocus) {
+    remove$1(state$4.currentFocus);
+  }
+  // TODO could make focus key numeric enum which would be more efficient
+  state$4.currentFocus = `focus.${key}`;
+  set(state$4.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$4.$PreviousFocusElement);
+  state$4.$PreviousFocusElement = document.activeElement;
+  $Element.focus({ preventScroll: true });
+  setFocus(key);
+};
+
+const focusPrevious = () => {
+  if (state$4.$PreviousFocusElement) {
+    console.log(state$4.$PreviousFocusElement);
+    state$4.$PreviousFocusElement.focus();
+  }
+};
+
+var M5 = {
+  __proto__: null,
+  state: state$4,
+  setFocus: setFocus,
+  setAdditionalFocus: setAdditionalFocus,
+  removeAdditionalFocus: removeAdditionalFocus,
+  focus: focus$4,
+  focusPrevious: focusPrevious
+};
+
+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, selections, i) => {
+  const top = selections[i * 4];
+  const left = selections[i * 4 + 1];
+  const width = selections[i * 4 + 2];
+  const height = selections[i * 4 + 3];
+  // TODO have many decorations per row
+  // no absolute positioning
+  $Selection.style.top = `${top}px`;
+  $Selection.style.left = `${left}px`;
+  $Selection.style.width = `${width}px`;
+  $Selection.style.height = `${height}px`;
+};
+
+const render$SelectionsLess = (
+  $Selections,
+  childCount,
+  selections,
+  selectionCount
+) => {
+  for (let i = 0, j = 0; i < childCount; i++, j += 4) {
+    render$Selection($Selections.children[i], selections[i]);
+  }
+  const fragment = document.createDocumentFragment();
+  for (let i = childCount; i < selectionCount; i++) {
+    const $Selection = create$Selection();
+    render$Selection($Selection, selections, i);
+    fragment.append($Selection);
+  }
+  $Selections.append(fragment);
+};
+
+const render$SelectionsEqual = (
+  $Selections,
+  childCount,
+  selections,
+  selectionCount
+) => {
+  for (let i = 0; i < selectionCount; i++) {
+    render$Selection($Selections.children[i], selections, i);
+  }
+};
+
+const render$SelectionsMore = (
+  $Selections,
+  childCount,
+  selections,
+  selectionCount
+) => {
+  for (let i = 0; i < selectionCount; i++) {
+    render$Selection($Selections.children[i], selections, i);
+  }
+  const diff = childCount - selectionCount;
+  for (let i = 0; i < diff; i++) {
+    $Selections.lastChild.remove();
+  }
+};
+
+const render$Selections = ($Selections, selections) => {
+  const selectionsCount = selections.length / 4;
+  const childCount = $Selections.children.length;
+  if (childCount < selectionsCount) {
+    render$SelectionsLess($Selections, childCount, selections, selectionsCount);
+  } else if (childCount === selectionsCount) {
+    render$SelectionsEqual($Selections, childCount, selections, selectionsCount);
+  } else {
+    render$SelectionsMore($Selections, childCount, selections, selectionsCount);
+  }
+};
+
+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);
+};
+
+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$1(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ 'editor'
+  );
+};
+
+const handleFocus = (event) => {
+  setFocus('EditorText');
+};
+
+const handleBlur$1 = (event) => {
+  // needed for save on blur
+  // also needed to close completions on blur
+  send$1(/* EditorBlur.editorBlur */ 'Editor.blur');
+};
+
+const handleBeforeInput = (event) => {
+  event.preventDefault();
+  switch (event.inputType) {
+    case 'insertText':
+      send$1(
+        /* Editor.type */ 'Editor.type',
+        /* 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$1(
+    /* Editor.compositionStart */ 'Editor.compositionStart',
+    /* text */ event.data
+  );
+};
+
+const handleCompositionUpdate = (event) => {
+  send$1(
+    /* Editor.compositionUpdate */ 'Editor.compositionUpdate',
+    /* text */ event.data
+  );
+};
+
+const handleCompositionEnd = (event) => {
+  send$1(
+    /* Editor.compositionEnd */ 'Editor.compositionEnd',
+    /* text */ event.data
+  );
+};
+
+const handleCut = (event) => {
+  event.preventDefault();
+  send$1(/* Editor.cut */ 'Editor.cut');
+};
+
+const handleSelectionMove = (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+  const totalOffset = getTotalOffset(event);
+  if (event.altKey) {
+    send$1(
+      /* Editor.moveRectangleSelectionPx */ 'Editor.moveRectangleSelectionPx',
+      /* x */ x,
+      /* y */ y,
+      /* offset */ totalOffset
+    );
+  } else {
+    send$1(
+      /* Editor.moveSelectionPx */ 'Editor.moveSelectionPx',
+      /* 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) => {
+  console.log('click', { x, y, offset });
+  const modifier = getModifier$1(event);
+  send$1(
+    /* Editor.handleSingleClick */ 'Editor.handleSingleClick',
+    /* modifier */ modifier,
+    /* x */ x,
+    /* y */ y,
+    /* offset */ offset
+  );
+  // 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$1(
+    /* Editor.handleDoubleClick */ 'Editor.handleDoubleClick',
+    /* x */ x,
+    /* y */ y,
+    /* offset */ offset
+  );
+};
+
+const handleTripleClick = (event, x, y, offset) => {
+  send$1(
+    /* Editor.handleTripleClick */ 'Editor.handleTripleClick',
+    /* 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
+  }
+  // @ts-ignore
+  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
+  }
+  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;
+  console.log('detail', event.detail);
+  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$1(
+      /* Editor.handleMouseMoveWithAltKey */ 'Editor.handleMouseMoveWithAltKey',
+      /* 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$1(
+        /* Editor.setDeltaY */ 'Editor.setDeltaY',
+        /* value */ event.deltaY
+      );
+      break
+    case event.DOM_DELTA_PIXEL:
+      send$1(
+        /* Editor.setDeltaY */ 'Editor.setDeltaY',
+        /* value */ event.deltaY
+      );
+      break
+  }
+};
+
+const handlePaste = (event) => {
+  event.preventDefault();
+  const text = event.clipboardData.getData('text');
+  send$1(/* Editor.paste */ 'Editor.paste', /* text */ text);
+};
+
+const handleScrollBarThumbMouseMove = (event) => {
+  const y = event.clientY;
+  send$1(
+    /* Editor.handleScrollBarMouseMove */ 'Editor.handleScrollBarMove',
+    /* 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$1(
+    /* EditorHandleScrollBarClick.editorHandleScrollBarClick */ 'Editor.handleScrollBarClick',
+    /* 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$1(
+    /* EditorHandleTouchStart.editorHandleTouchStart */ 'Editor.handleTouchStart',
+    /* touchEvent */ touchEvent
+  );
+};
+
+const handleTouchMove = (event) => {
+  const touchEvent = toSimpleTouchEvent(event);
+  send$1(
+    /* EditorHandleTouchMove.editorHandleTouchMove */ 'Editor.handleTouchMove',
+    /* touchEvent */ touchEvent
+  );
+};
+
+const handleTouchEnd = (event) => {
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+  const touchEvent = toSimpleTouchEvent(event);
+  send$1(
+    /* EditorHandleTouchEnd.editorHandleTouchEnd */ 'Editor.handleTouchEnd',
+    /* 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$1(
+    /* EditorHandleBeforeInputFromContentEditable.editorHandleBeforeInputFromContentEditable */ 'Editor.handleBeforeInputFromContentEditable',
+    /* data */ event.data || '',
+    /* range */ range
+  );
+};
+
+const handleNativeSelectionChange = (event) => {
+  // if (state.shouldIgnoreSelectionChange) {
+  //   state.shouldIgnoreSelectionChange = false
+  //   return
+  // }
+  // const selection = document.getSelection()
+  // const range = getRangeFromSelection(selection)
+  // if (!range) {
+  //   return
+  // }
+  // RendererWorker.send(
+  //   /* EditorHandleNativeSelectionChange.editorHandleNativeSelectionChange */ 'Editor.handleNativeSelectionChange',
+  //   /* 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');
+  // @ts-ignore
+  $EditorInput.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';
+  // @ts-ignore
+  $Editor.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) => {
+  const { $EditorInput } = state;
+  console.log('focus editor');
+  $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$3 = {
+  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$3.modules[id] = module;
+  state$3.instances[id] = {
+    state: module.create(...args),
+    factory: module,
+  };
+};
+
+const invoke = (viewletId, method, ...args) => {
+  const instance = state$3.instances[viewletId];
+  if (!instance) {
+    console.warn(`viewlet instance ${viewletId} not found`);
+    return
+  }
+  if (typeof instance.factory[method] !== 'function') {
+    console.warn(`method ${method} in ${viewletId} not implemented`);
+    console.log(instance.factory);
+    return
+  }
+  return instance.factory[method](instance.state, ...args)
+};
+
+const focus$2 = (viewletId) => {
+  const instance = state$3.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$3.instances[viewletId];
+  if (instance) {
+    instance.factory.refresh(instance.state, viewletContext);
+  } else {
+    // console.warn('no instance yet of ' + viewletId)
+    state$3.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) => {
+  string(id);
+  const instance = state$3.instances[id];
+  if (!instance) {
+    console.warn(`viewlet instance ${id} not found and cannot be disposed`);
+    return
+  }
+  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$3.instances[id];
+};
+
+const handleError$1 = (id, parentId, message) => {
+  console.log(`[viewlet-error] ${id}: ${message}`);
+  const instance = state$3.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$3.instances[parentId];
+  if (
+    parentInstance &&
+    parentInstance.factory &&
+    parentInstance.factory.handleError
+  ) {
+    parentInstance.factory.handleError(instance.state, message);
+    console.log('parent instance', parentInstance);
+    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$3.instances[parentId]; // TODO must ensure that parent is already created
+  const parentModule = parentInstanceState.factory;
+  const childInstance = state$3.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__$4 = () => {
+  register$1('Viewlet.refresh', refresh);
+  register$1('Viewlet.invoke', invoke);
+  register$1('Viewlet.send', invoke);
+  register$1('Viewlet.focus', focus$2);
+  register$1('Viewlet.dispose', dispose$2);
+  register$1('Viewlet.appendViewlet', appendViewlet);
+  register$1('Viewlet.load', load);
+  register$1('Viewlet.handleError', handleError$1);
+  register$1('Viewlet.sendMultiple', sendMultiple);
+};
+
+var M6 = {
+  __proto__: null,
+  __initialize__: __initialize__$4
+};
+
+const state$2 = {
+  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$2.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$2.modifier) {
+    return
+  }
+  if (state$2.modifierTimeout !== -1) {
+    clearTimeout(state$2.modifierTimeout);
+    state$2.modifier = '';
+    state$2.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
+  // TODO should args always be defined? (probably yes -> monomorphism & simpler code since all objects are the same)
+
+  // TODO matchingKeyBinding.command should always be number
+  send$1(
+    /* KeyBindings.handleKeyBinding */ 'KeyBindings.handleKeyBinding',
+    /* 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$2.modifier === modifier) {
+    clearModifier();
+    const identifier = `${modifier} ${modifier}`;
+    const matchingKeyBinding = getMatchingKeyBinding(identifier);
+    if (matchingKeyBinding) {
+      handleMatchingKeyBinding(matchingKeyBinding);
+    }
+    return
+  }
+
+  state$2.modifier = modifier;
+  // @ts-ignore
+  state$2.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$2.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__$3 = () => {
+  register$1('KeyBindings.hydrate', hydrate$1);
+  // Command.register(756, KeyBindings.setKeyBindings)
+};
+
+var M7 = {
+  __proto__: null,
+  __initialize__: __initialize__$3
+};
+
+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 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('ServiceWorker.register', register);
+  register$1('ServiceWorker.uninstall', uninstall);
+};
+
+var M22 = {
+  __proto__: null,
+  __initialize__: __initialize__$2
+};
+
+const getPathName = () => {
+  return location.pathname
+};
+
+const getHref = () => {
+  return location.href
+};
+
+// 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$1(/* Workspace.hydrate */ 'Workspace.hydrate');
+};
+
+const hydrate = () => {
+  addEventListener('popstate', handlePopState);
+};
+
+const __initialize__$1 = () => {
+  register$1('Location.getHref', getHref);
+  register$1('Location.getPathName', getPathName);
+  register$1('Location.hydrate', hydrate);
+  register$1('Location.setPathName', setPathName);
+};
+
+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';
+      // @ts-ignore
+      $MenuItem.role = 'menuitem';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* Separator */ 1:
+      $MenuItem.className = 'MenuItemSeparator';
+      // @ts-ignore
+      $MenuItem.role = 'separator';
+      break
+    case /* Checked */ 2:
+      $MenuItem.className = 'MenuItem';
+      // @ts-ignore
+      $MenuItem.role = 'menuitemcheckbox';
+      $MenuItem.ariaChecked = 'true';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* UnChecked */ 3:
+      $MenuItem.className = 'MenuItem';
+      // @ts-ignore
+      $MenuItem.role = 'menuitemcheckbox';
+      $MenuItem.ariaChecked = 'false';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      break
+    case /* SubMenu */ 4:
+      $MenuItem.className = 'MenuItem';
+      // @ts-ignore
+      $MenuItem.role = 'menuitem';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      $MenuItem.ariaHasPopup = 'true';
+      $MenuItem.ariaExpanded = 'false';
+      break
+    case /* Disabled */ 5:
+      $MenuItem.className = 'MenuItem';
+      // @ts-ignore
+      $MenuItem.role = 'menuitem';
+      $MenuItem.textContent = getLabel(item);
+      $MenuItem.tabIndex = -1;
+      $MenuItem.setAttribute('disabled', 'true');
+      break
+    default:
+      $MenuItem.className = 'MenuItem';
+      // @ts-ignore
+      $MenuItem.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$1(
+    /* Menu.handleClick */ 'Menu.selectIndex',
+    /* 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);
+  send$1(
+    /* Menu.handleMouseEnter */ 'Menu.handleMouseEnter',
+    /* 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';
+  // @ts-ignore
+  $Menu.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$1(/* Menu.hide */ 'Menu.hide');
+};
+
+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) {
+    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:
+      // @ts-ignore
+      $ActivityBarItem.role = 'tab';
+      $ActivityBarItem.ariaSelected = 'false';
+      break
+    case /* Button */ 2:
+      // @ts-ignore
+      $ActivityBarItem.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$1(
+    /* ActivityBar.handleClick */ 'ActivityBar.handleClick',
+    /* 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$1(
+    /* activityBarHandleContextMenu */ 'ActivityBar.handleContextMenu',
+    /* x */ x,
+    /* y */ y
+  );
+};
+
+const handleBlur = () => {};
+
+const name = 'ActivityBar';
+
+const create$3 = () => {
+  const $ActivityBar = state$6.$ActivityBar;
+  $ActivityBar.role = 'toolbar';
+  $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) => {
+  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;
+    $OldItem.classList.remove('FocusOutline');
+  }
+  if (newIndex !== -1) {
+    const $NewItem = $ActivityBar.children[newIndex];
+    $NewItem.tabIndex = 0;
+    $NewItem.classList.add('FocusOutline');
+    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';
+  // @ts-ignore
+  $StatusBarItem.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$1(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$6.$StatusBar;
+  $StatusBar.onclick = handleClick$1;
+  $StatusBar.tabIndex = 0;
+  $StatusBar.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';
+  // @ts-ignore
+  $TitleBarTopLevelEntry.role = 'menuitem';
+  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$1(
+    /* TitleBarMenu.toggleIndex */ 'TitleBarMenuBar.toggleIndex',
+    /* 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$1(
+    /* TitleBarMenu.focusIndex */ 'TitleBarMenuBar.focusIndex',
+    /* 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$1(
+        /* TitleBarMenu.handleKeyArrowDown */ 'TitleBarMenu.handleKeyArrowDown'
+      );
+      break
+    case 'ArrowUp':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyArrowUp */ 'TitleBarMenu.handleKeyArrowUp'
+      );
+      break
+    case 'ArrowRight':
+      console.log('arrow right');
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyArrowRight */ 'TitleBarMenu.handleKeyArrowRight'
+      );
+      break
+    case 'ArrowLeft':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyArrowLeft */ 'TitleBarMenu.handleKeyArrowLeft'
+      );
+      break
+    case 'Enter':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyEnter */ 'TitleBarMenu.handleKeyEnter'
+      );
+      break
+    case ' ':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeySpace */ 'TitleBarMenu.handleKeySpace'
+      );
+      break
+    case 'Home':
+    case 'PageUp':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyHome */ 'TitleBarMenu.handleKeyHome'
+      );
+      break
+    case 'End':
+    case 'PageDown':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyEnd */ 'TitleBarMenu.handleKeyEnd'
+      );
+      break
+    case 'Escape':
+      event.preventDefault();
+      event.stopPropagation();
+      send$1(
+        /* TitleBarMenu.handleKeyEscape */ 'TitleBarMenu.handleKeyEscape'
+      );
+      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$1(
+    /* TitleBarMenu.closeMenu */ 'TitleBarMenuBar.closeMenu',
+    /* keepFocus */ false
+  );
+};
+
+const create$1 = () => {
+  const $TitleBarMenu = document.createElement('ul');
+  $TitleBarMenu.id = 'TitleBarMenu';
+  // @ts-ignore
+  $TitleBarMenu.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$6.$TitleBar;
+  $TitleBar.ariaLabel = 'Title Bar';
+  $TitleBar.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;
+};
+
+// cannot use visibilty change event because worker cannot process events when page closes
+// https://stackoverflow.com/questions/20084348/what-happens-to-a-web-worker-if-i-close-the-page-that-created-this-web-worker/20105455#20105455
+const onVisibilityChange = () => {
+  // document.addEventListener('visibilitychange', handleVisibilityChange)
+  const handleBeforeUnload = async () => {
+    send$1(
+      /* SaveState.handleVisibilityChange */ 'SaveState.handleVisibilityChange',
+      /* visibilityState */ 'hidden'
+    );
+    // setTimeout(() => {
+    //   console.log('in timeout 1')
+    // }, 3)
+    // await new Promise((resolve, reject) => {
+    //   setTimeout(resolve, 100)
+    // })
+    // console.log('timeout done')
+  };
+  window.addEventListener('beforeunload', handleBeforeUnload);
+  // document.addEventListener('visibilitychange', handleVisibilityChange)
+
+  // const handlePageHide = () => {
+  //   console.log('page hide')
+  //   RendererWorker.send(
+  //     /* SaveState.handleVisibilityChange */ 'SaveState.handleVisibilityChange',
+  //     /* visibilityState */ 'hidden'
+  //   )
+  // }
+  // window.addEventListener('pagehide', handlePageHide)
+};
+
+const __initialize__ = () => {
+  register$1('Window.reload', reload);
+  register$1('Window.minimize', minimize);
+  register$1('Window.maximize', maximize);
+  register$1('Window.unmaximize', unmaximize);
+  register$1('Window.close', close);
+  register$1('Window.setTitle', setTitle);
+  register$1('Window.onVisibilityChange', onVisibilityChange);
+};
+
+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,
+  M13,
+  M14,
+  M18,
+  M22,
+  M26,
+  M27,
+  M28,
+  M29,
+  M30,
+];
+
+const handleError = (error) => {
+  console.info(`[renderer-process] Unhandled Error: ${error}`);
+  alert(error);
+};
+
+const handleUnhandledRejection = (event) => {
+  console.info(`[renderer-process] Unhandled Rejection: ${event.reason}`);
+  alert(event.reason);
+};
+
+const main = async () => {
+  onerror = handleError;
+  onunhandledrejection = handleUnhandledRejection;
+
+  if (platform === 'web') {
+    // disable prompt to download app as pwa
+    // @ts-ignore
+    window.onbeforeinstallprompt = (event) => {
+      event.preventDefault();
+    };
+  }
+  // TODO this is discovered very late
+  await hydrate$2();
+  dispatchEvent(new CustomEvent('code/ready'));
+  // TODO avoid creating global variables
+  globalThis.__codeLoaded = true;
+};
+
+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
+
+const send = send$1;
+
+export { state$1 as A, focus$3 as B, state$6 as C, mount as D, setAdditionalFocus as E, removeAdditionalFocus as F, send as G, append as a, setFocus as b, showControlled as c, hideSubMenu as d, showMenu as e, focusIndex$1 as f, showContextMenu as g, hide as h, remove as i, focusPrevious as j, supportsHtml5Dialog as k, focus$4 as l, string as m, getHref as n, getBounds as o, object as p, array as q, register$1 as r, send$1 as s, number as t, findIndex as u, lookupKeyBinding as v, create$4 as w, setText as x, setSelections as y, setScrollBar as z };
+//# sourceMappingURL=rendererProcessMain.js.map