@lvce-editor/static-server 0.52.0 → 0.52.1

package/static/{a257a6c → ad88831}/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -356,22 +356,11 @@ class IpcChildWithModuleWorker extends Ipc {
 const wrap$f = global => {
   return new IpcChildWithModuleWorker(global);
 };
-const withResolvers = () => {
-  let _resolve;
-  const promise = new Promise(resolve => {
-    _resolve = resolve;
-  });
-  return {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    resolve: _resolve,
-    promise
-  };
-};
 const waitForFirstMessage = async port => {
   const {
     resolve,
     promise
-  } = withResolvers();
+  } = Promise.withResolvers();
   port.addEventListener('message', resolve, {
     once: true
   });
@@ -442,7 +431,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$3 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -461,7 +450,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$3(id, resolve);
   return {
     id,
     promise
@@ -861,6 +850,134 @@ const WebWorkerRpcClient = {
   create: create$2
 };
 
+const rpcs = Object.create(null);
+const set$5 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+const RendererWorker$1 = 1;
+const invoke$2 = (method, ...params) => {
+  const rpc = get$1(RendererWorker$1);
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const set$2 = rpc => {
+  set$5(RendererWorker$1, rpc);
+};
+const RendererWorker = {
+  __proto__: null,
+  invoke: invoke$2,
+  set: set$2
+};
+
+const {
+  invoke,
+  set: set$1
+} = RendererWorker;
+
+const remove = async dirent => {
+  return invoke('FileSystem.remove', dirent);
+};
+const readDirWithFileTypes = async uri => {
+  return invoke('FileSystem.readDirWithFileTypes', uri);
+};
+const getPathSeparator$1 = async root => {
+  return invoke('FileSystem.getPathSeparator', root);
+};
+const getRealPath = async path => {
+  return invoke('FileSystem.getRealPath', path);
+};
+const stat = async dirent => {
+  return invoke('FileSystem.stat', dirent);
+};
+const createFile = async uri => {
+  return invoke('FileSystem.writeFile', uri, '');
+};
+const writeFile = async (uri, content) => {
+  return invoke('FileSystem.writeFile', uri, content);
+};
+const mkdir = async uri => {
+  return invoke('FileSystem.mkdir', uri);
+};
+const rename$1 = async (oldUri, newUri) => {
+  return invoke('FileSystem.rename', oldUri, newUri);
+};
+const copy$1 = async (oldUri, newUri) => {
+  return invoke('FileSystem.copy', oldUri, newUri);
+};
+
+const createNestedPath = async (root, path, pathSeparator) => {
+  const parts = path.slice(root.length).split(pathSeparator);
+  let currentPath = '';
+  for (const part of parts) {
+    if (!part) continue;
+    currentPath = currentPath ? `${currentPath}${pathSeparator}${part}` : part;
+    try {
+      await mkdir(`${root}${currentPath}`);
+    } catch (error) {
+      // Ignore error if directory already exists
+      if (!(error instanceof Error && error.message.includes('already exists'))) {
+        throw error;
+      }
+    }
+  }
+};
+
+const dirname = (pathSeparator, path) => {
+  const index = path.lastIndexOf(pathSeparator);
+  if (index === -1) {
+    return path;
+  }
+  return path.slice(0, index);
+};
+const dirname2 = path => {
+  return dirname('/', path);
+};
+const join = (pathSeparator, ...parts) => {
+  return parts.join(pathSeparator);
+};
+const getBaseName = (pathSeparator, path) => {
+  return path.slice(path.lastIndexOf(pathSeparator) + 1);
+};
+const join2 = (path, childPath) => {
+  if (path.endsWith('/')) {
+    return `${path}${childPath}`;
+  }
+  return `${path}/${childPath}`;
+};
+
+const createNewDirentsAccept = async (newFileName, pathSeparator, absolutePath, root, createFn) => {
+  try {
+    // Create parent directories if they don't exist
+    if (newFileName.includes(pathSeparator)) {
+      const parentPath = dirname(pathSeparator, absolutePath);
+      await createNestedPath(root, parentPath, pathSeparator);
+    }
+    await createFn(absolutePath);
+    return true;
+  } catch (error) {
+    console.error(new VError(error, `Failed to create file`));
+    return false;
+  }
+};
+
+const createTree = (items, root) => {
+  const tree = Object.create(null);
+  const rootLength = root.length;
+  for (const item of items) {
+    const relativePath = item.path.slice(rootLength);
+    const dirname = dirname2(relativePath);
+    tree[dirname] ||= [];
+    tree[dirname].push({
+      name: item.name,
+      type: item.type
+    });
+  }
+  return tree;
+};
+
 const None$5 = 0;
 const CreateFile = 1;
 const CreateFolder = 2;
@@ -912,7 +1029,7 @@ const openInIntegratedTerminal = () => {
 const cut = () => {
   return i18nString(Cut$1);
 };
-const copy$1 = () => {
+const copy = () => {
   return i18nString(Copy$1);
 };
 const paste = () => {
@@ -924,7 +1041,7 @@ const copyPath$1 = () => {
 const copyRelativePath$1 = () => {
   return i18nString(CopyRelativePath);
 };
-const rename$1 = () => {
+const rename = () => {
   return i18nString(Rename);
 };
 const deleteItem = () => {
@@ -1010,37 +1127,26 @@ const EditingFile = File + DELTA_EDITING;
 const EditingFolder = Directory + DELTA_EDITING;
 const EditingDirectoryExpanded = DirectoryExpanded + DELTA_EDITING;
 
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$1 = id => {
-  return rpcs[id];
-};
-
-const invoke = (method, ...params) => {
-  const rpc = get$1(RendererWorker);
-  // @ts-ignore
-  return rpc.invoke(method, ...params);
-};
-
-const getFileIcon = async name => {
-  return invoke('IconTheme.getFileIcon', {
-    name
-  });
+const getSimpleType = direntType => {
+  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
+    return 2;
+  }
+  return 1;
 };
-
-const getFolderIcon = async name => {
-  return invoke('IconTheme.getFolderIcon', {
-    name
-  });
+const toSimpleIconRequest = request => {
+  return {
+    name: request.name,
+    type: getSimpleType(request.type)
+  };
 };
 
 const requestFileIcons = async requests => {
-  const promises = requests.map(request => request.type === File ? getFileIcon(request.name) : getFolderIcon(request.name));
-  return Promise.all(promises);
+  if (requests.length === 0) {
+    return [];
+  }
+  const simpleRequests = requests.map(toSimpleIconRequest);
+  const icons = await invoke('IconTheme.getIcons', simpleRequests);
+  return icons;
 };
 
 const updateIconCache = (iconCache, missingRequests, newIcons) => {
@@ -1070,6 +1176,88 @@ const getFileIcons = async (dirents, fileIconCache) => {
   };
 };
 
+const getParentFolder = (dirents, index, root) => {
+  if (index < 0) {
+    return root;
+  }
+  return dirents[index].path;
+};
+
+const getPathParts = (root, uri, pathSeparator) => {
+  const parts = [];
+  let index = root.length - 1;
+  let depth = 0;
+  while ((index = uri.indexOf('/', index + 1)) !== -1) {
+    const partUri = uri.slice(0, index);
+    parts.push({
+      path: partUri,
+      depth: depth++,
+      root,
+      pathSeparator
+    });
+  }
+  return parts;
+};
+
+const isSymbolicLink = dirent => {
+  return dirent.type === Symlink;
+};
+
+const hasSymbolicLinks = rawDirents => {
+  return rawDirents.some(isSymbolicLink);
+};
+
+const ENOENT = 'ENOENT';
+
+const getSymlinkType = type => {
+  switch (type) {
+    case File:
+      return SymLinkFile;
+    case Directory:
+      return SymLinkFolder;
+    default:
+      return Symlink;
+  }
+};
+
+// TODO maybe resolving of symbolic links should happen in shared process?
+// so that there is less code and less work in the frontend
+const resolveSymbolicLink = async (uri, rawDirent) => {
+  try {
+    // TODO support windows paths
+    const absolutePath = uri + '/' + rawDirent.name;
+    const type = await stat(absolutePath);
+    const symLinkType = getSymlinkType(type);
+    return {
+      name: rawDirent.name,
+      type: symLinkType
+    };
+  } catch (error) {
+    // @ts-ignore
+    if (error && error.code === ENOENT) {
+      return {
+        name: rawDirent.name,
+        type: SymLinkFile
+      };
+    }
+    console.error(`Failed to resolve symbolic link for ${rawDirent.name}: ${error}`);
+    return rawDirent;
+  }
+};
+const resolveSymbolicLinks = async (uri, rawDirents) => {
+  const promises = [];
+  for (const rawDirent of rawDirents) {
+    if (isSymbolicLink(rawDirent)) {
+      const resolvedDirent = resolveSymbolicLink(uri, rawDirent);
+      promises.push(resolvedDirent);
+    } else {
+      promises.push(rawDirent);
+    }
+  }
+  const resolvedDirents = await Promise.all(promises);
+  return resolvedDirents;
+};
+
 const RE_CHARACTERS = /^[a-zA-Z.-]+$/;
 const compareStringNumeric = (a, b) => {
   if (RE_CHARACTERS.test(a) && RE_CHARACTERS.test(b)) {
@@ -1098,104 +1286,156 @@ const compareDirent = (direntA, direntB) => {
   return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
 };
 
-const getParentFolder = (dirents, index, root) => {
-  if (index < 0) {
-    return root;
-  }
-  return dirents[index].path;
+const sortExplorerItems = rawDirents => {
+  return rawDirents.toSorted(compareDirent);
 };
-const getNewDirentsAccept = async (state, newDirentType, createFn) => {
-  const {
-    focusedIndex,
-    editingValue
-  } = state;
-  const newFileName = editingValue;
-  const parentFolder = getParentFolder(state.items, focusedIndex, state.root);
-  const absolutePath = [parentFolder, newFileName].join(state.pathSeparator);
-  // TODO better handle error
-  try {
-    await createFn(absolutePath);
-  } catch (error) {
-    console.error(new VError(error, `Failed to create file`));
-    // TODO display error
-    return {
-      dirents: state.items,
-      newFocusedIndex: state.focusedIndex
-    };
-  }
-  const parentDirent = focusedIndex >= 0 ? state.items[focusedIndex] : {
-    depth: 0};
-  const depth = parentDirent.depth + 1;
-  const newDirent = {
-    path: absolutePath,
-    // @ts-ignore
-    posInSet: -1,
-    setSize: 1,
-    depth,
-    name: newFileName,
-    type: newDirentType,
+
+// TODO figure out whether this uses too much memory (name,path -> redundant, depth could be computed on demand)
+const toDisplayDirent = (parentDirent, rawDirent, index, length) => {
+  const path = join2(parentDirent.path, rawDirent.name);
+  return {
+    name: rawDirent.name,
+    posInSet: index + 1,
+    setSize: length,
+    depth: parentDirent.depth + 1,
+    type: rawDirent.type,
+    path,
+    // TODO storing absolute path might be too costly, could also store relative path here
     icon: '',
     selected: false
   };
-  // @ts-ignore
-  newDirent.icon = '';
-  let insertIndex = state.focusedIndex;
-  let deltaPosInSet = 0;
-  let posInSet = 1;
-  let setSize = 1;
-  let i = Math.max(state.focusedIndex, -1) + 1;
-  const {
-    items
-  } = state;
-  // TODO update posinset and setsize of all affected dirents
-  for (; i < items.length; i++) {
-    const dirent = items[i];
-    if (dirent.depth !== depth) {
-      break;
-    }
-    const compareResult = compareDirent(dirent, newDirent);
-    if (compareResult === 1) {
-      insertIndex = i - 1;
-      deltaPosInSet = 1 - 1;
-      break;
-    } else {
-      // @ts-ignore
-      posInSet = dirent.posInSet + 1;
-      // @ts-ignore
-      setSize = dirent.setSize + 1;
-      // @ts-ignore
-      insertIndex = i;
+};
+
+const toDisplayDirents = (pathSeparator, rawDirents, parentDirent, excluded) => {
+  rawDirents = sortExplorerItems(rawDirents);
+  const result = [];
+  const visibleItems = rawDirents.filter(item => {
+    if (excluded.includes(item.name)) {
+      return false;
     }
-    // @ts-ignore
-    dirent.setSize++;
-    // @ts-ignore
-    dirent.posInSet += deltaPosInSet;
+    return true;
+  });
+  const count = visibleItems.length;
+  for (let i = 0; i < visibleItems.length; i++) {
+    const rawDirent = visibleItems[i];
+    result.push(toDisplayDirent(parentDirent, rawDirent, i, count));
   }
-  // @ts-ignore
-  newDirent.setSize = setSize;
-  // @ts-ignore
-  newDirent.posInSet = posInSet;
-  // @ts-ignore
-  items.splice(insertIndex + 1, 0, newDirent);
-  const newDirents = [...items].filter(item => item.type !== EditingFile && item.type !== EditingFolder);
-  return {
-    dirents: newDirents,
-    newFocusedIndex: insertIndex + 1
-  };
+  return result;
 };
 
-const acceptCreate = async (state, newDirentType, createFn) => {
-  const {
-    editingValue,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache
-  } = state;
-  const newFileName = editingValue;
-  if (!newFileName) {
-    // TODO show error message that file name must not be empty
-    // below input box
+const getChildDirentsRaw = async uri => {
+  const rawDirents = await readDirWithFileTypes(uri);
+  array(rawDirents);
+  if (hasSymbolicLinks(rawDirents)) {
+    return resolveSymbolicLinks(uri, rawDirents);
+  }
+  return rawDirents;
+};
+const getChildDirents = async (pathSeparator, parentDirent, excluded = []) => {
+  string(pathSeparator);
+  object(parentDirent);
+  // TODO use event/actor based code instead, this is impossible to cancel right now
+  // also cancel updating when opening new folder
+  // const dispose = state => state.pendingRequests.forEach(cancelRequest)
+  // TODO should use FileSystem directly in this case because it is globally available anyway
+  // and more typesafe than Command.execute
+  // and more performant
+  const uri = parentDirent.path;
+  const rawDirents = await getChildDirentsRaw(uri);
+  const displayDirents = toDisplayDirents(pathSeparator, rawDirents, parentDirent, excluded);
+  return displayDirents;
+};
+
+const isTopLevel = dirent => {
+  return dirent.depth === 1;
+};
+
+const orderDirents = dirents => {
+  if (dirents.length === 0) {
+    return dirents;
+  }
+  const withDeepChildren = (parent, processed) => {
+    if (processed.has(parent.path)) {
+      return [];
+    }
+    processed.add(parent.path);
+    const children = [];
+    for (const dirent of dirents) {
+      if (dirent.depth === parent.depth + 1 && dirent.path.startsWith(parent.path)) {
+        children.push(...withDeepChildren(dirent, processed));
+      }
+    }
+    return [parent, ...children];
+  };
+  const topLevelDirents = dirents.filter(isTopLevel);
+  const processed = new Set();
+  const ordered = topLevelDirents.flatMap(dirent => withDeepChildren(dirent, processed));
+  return ordered;
+};
+
+const getPathPartChildren = async pathPart => {
+  const children = await getChildDirents(pathPart.pathSeparator, pathPart);
+  return children;
+};
+const getPathPartsChildren = async pathparts => {
+  const pathPartsChildren = await Promise.all(pathparts.map(getPathPartChildren));
+  const pathPartsChildrenFlat = pathPartsChildren.flat();
+  const orderedPathParts = orderDirents(pathPartsChildrenFlat);
+  return orderedPathParts;
+};
+
+const mergeTrees = (a, b) => {
+  return {
+    ...a,
+    ...b
+  };
+};
+
+const treeToArray = (map, root) => {
+  const items = [];
+  const processChildren = (path, depth) => {
+    const children = map[path];
+    if (!children) {
+      return;
+    }
+    const count = children.length;
+    for (let i = 0; i < count; i++) {
+      const child = children[i];
+      const childPath = join2(path, child.name);
+      const absolutePath = `${root}${childPath}`;
+      items.push({
+        depth,
+        posInSet: i + 1,
+        setSize: count,
+        icon: '',
+        path: absolutePath,
+        selected: false,
+        name: child.name,
+        type: child.type
+      });
+      processChildren(childPath, depth + 1);
+    }
+  };
+  processChildren('', 0);
+  return items;
+};
+
+const acceptCreate = async (state, newDirentType, createFn) => {
+  const {
+    editingValue,
+    minLineY,
+    height,
+    itemHeight,
+    fileIconCache,
+    pathSeparator,
+    root,
+    focusedIndex,
+    items
+  } = state;
+  const newFileName = editingValue;
+  if (!newFileName) {
+    // TODO show error message that file name must not be empty
+    // below input box
     // await ErrorHandling.showErrorDialog(new Error('file name must not be empty'))
     const editingErrorMessage = fileOrFolderNameMustBeProvided();
     return {
@@ -1203,10 +1443,20 @@ const acceptCreate = async (state, newDirentType, createFn) => {
       editingErrorMessage
     };
   }
-  const {
-    dirents,
-    newFocusedIndex
-  } = await getNewDirentsAccept(state, newDirentType, createFn);
+  const parentFolder = getParentFolder(items, focusedIndex, root);
+  const absolutePath = join2(parentFolder, newFileName);
+  const successful = await createNewDirentsAccept(newFileName, pathSeparator, absolutePath, root, createFn);
+  if (!successful) {
+    return state;
+  }
+  const pathPaths = getPathParts(root, absolutePath, pathSeparator);
+  const children = await getPathPartsChildren(pathPaths);
+  const tree = createTree(items, root);
+  const childTree = createTree(children, root);
+  const merged = mergeTrees(tree, childTree);
+  const newItems = treeToArray(merged, root);
+  const dirents = newItems;
+  const newFocusedIndex = newItems.findIndex(dirent => dirent.path === absolutePath);
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, dirents.length);
   const visible = dirents.slice(minLineY, maxLineY);
   const {
@@ -1226,37 +1476,6 @@ const acceptCreate = async (state, newDirentType, createFn) => {
   };
 };
 
-const remove = async dirent => {
-  return invoke('FileSystem.remove', dirent);
-};
-const readDirWithFileTypes = async uri => {
-  return invoke('FileSystem.readDirWithFileTypes', uri);
-};
-const getPathSeparator$1 = async root => {
-  return invoke('FileSystem.getPathSeparator', root);
-};
-const getRealPath = async path => {
-  return invoke('FileSystem.getRealPath', path);
-};
-const stat = async dirent => {
-  return invoke('FileSystem.stat', dirent);
-};
-const createFile = async uri => {
-  return invoke('FileSystem.writeFile', uri, '');
-};
-const writeFile = async (uri, content) => {
-  return invoke('FileSystem.writeFile', uri, content);
-};
-const mkdir = async uri => {
-  return invoke('FileSystem.mkdir', uri);
-};
-const rename = async (oldUri, newUri) => {
-  return invoke('FileSystem.rename', oldUri, newUri);
-};
-const copy = async (oldUri, newUri) => {
-  return invoke('FileSystem.copy', oldUri, newUri);
-};
-
 const acceptCreateFile = async state => {
   return acceptCreate(state, File, createFile);
 };
@@ -1360,45 +1579,34 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
   };
 };
 
-const dirname = (pathSeparator, path) => {
-  const index = path.lastIndexOf(pathSeparator);
-  if (index === -1) {
-    return path;
+const createNewDirentsRename = async (renamedDirent, editingValue, pathSeparator) => {
+  try {
+    // TODO this does not work with rename of nested file
+    const oldAbsolutePath = renamedDirent.path;
+    const oldParentPath = dirname2(oldAbsolutePath);
+    const newAbsolutePath = join2(oldParentPath, editingValue);
+    await rename$1(oldAbsolutePath, newAbsolutePath);
+  } catch (error) {
+    console.error(new VError(error, `Failed to rename file`));
+    return false;
   }
-  return path.slice(0, index);
-};
-const join = (pathSeparator, ...parts) => {
-  return parts.join(pathSeparator);
-};
-const getBaseName = (pathSeparator, path) => {
-  return path.slice(path.lastIndexOf(pathSeparator) + 1);
+  return true;
 };
 
 const acceptRename = async state => {
   const {
     editingIndex,
     editingValue,
-    items,
-    pathSeparator
-  } = state;
+    items} = state;
   const renamedDirent = items[editingIndex];
-  try {
-    // TODO this does not work with rename of nested file
-    const oldAbsolutePath = renamedDirent.path;
-    const oldParentPath = dirname(pathSeparator, oldAbsolutePath);
-    const newAbsolutePath = [oldParentPath, editingValue].join(pathSeparator);
-    await rename(oldAbsolutePath, newAbsolutePath);
-  } catch (error) {
-    console.error(new VError(error, `Failed to rename file`));
+  const successful = await createNewDirentsRename(renamedDirent, editingValue);
+  if (!successful) {
     return state;
   }
   const {
     newDirents,
     focusedIndex
   } = computeExplorerRenamedDirent(items, editingIndex, editingValue);
-  //  TODO move focused index
-  // @ts-ignore
-  state.items = newDirents;
   return {
     ...state,
     editingIndex: -1,
@@ -1407,7 +1615,8 @@ const acceptRename = async state => {
     editingIcon: '',
     focusedIndex,
     focused: true,
-    focus: List
+    focus: List,
+    items: newDirents
   };
 };
 
@@ -1427,6 +1636,28 @@ const acceptEdit = async state => {
   }
 };
 
+const isNormalItem = item => {
+  return item.type !== EditingFile && item.type !== EditingFolder;
+};
+
+const cancelEditCreate = (state, keepFocus) => {
+  const {
+    editingIndex,
+    items
+  } = state;
+  const filteredItems = items.filter(isNormalItem);
+  return {
+    ...state,
+    items: filteredItems,
+    focusedIndex: editingIndex,
+    focused: keepFocus,
+    editingIndex: -1,
+    editingValue: '',
+    editingType: None$5,
+    focus: List
+  };
+};
+
 const normalizeDirentType = direntType => {
   if (direntType > DELTA_EDITING) {
     return direntType - DELTA_EDITING;
@@ -1444,33 +1675,17 @@ const getNewDirentsForCancelRename = (items, editingIndex) => {
   return newItems;
 };
 
-const isNormalItem = item => {
-  return item.type !== EditingFile && item.type !== EditingFolder;
-};
-const cancelEdit = state => {
+const cancelEditRename = (state, keepFocus) => {
   const {
     editingIndex,
-    editingType
+    items
   } = state;
-  if (editingType === Rename$1) {
-    const newItems = getNewDirentsForCancelRename(state.items, editingIndex);
-    return {
-      ...state,
-      items: newItems,
-      focusedIndex: editingIndex,
-      focused: true,
-      editingIndex: -1,
-      editingValue: '',
-      editingType: None$5,
-      focus: List
-    };
-  }
-  const filteredItems = state.items.filter(isNormalItem);
+  const newItems = getNewDirentsForCancelRename(items, editingIndex);
   return {
     ...state,
-    items: filteredItems,
+    items: newItems,
     focusedIndex: editingIndex,
-    focused: true,
+    focused: keepFocus,
     editingIndex: -1,
     editingValue: '',
     editingType: None$5,
@@ -1478,6 +1693,20 @@ const cancelEdit = state => {
   };
 };
 
+const cancelEditInternal = (state, keepFocus) => {
+  const {
+    editingType
+  } = state;
+  if (editingType === Rename$1) {
+    return cancelEditRename(state, keepFocus);
+  }
+  return cancelEditCreate(state, keepFocus);
+};
+
+const cancelEdit = state => {
+  return cancelEditInternal(state, true);
+};
+
 const cancelTypeAhead = state => {
   return {
     ...state,
@@ -1485,10 +1714,6 @@ const cancelTypeAhead = state => {
   };
 };
 
-const isTopLevel$1 = dirent => {
-  return dirent.depth === 1;
-};
-
 const toCollapsedDirent = dirent => {
   if (dirent.type === DirectoryExpanded) {
     return {
@@ -1503,7 +1728,7 @@ const collapseAll = state => {
   const {
     items
   } = state;
-  const newDirents = items.filter(isTopLevel$1).map(toCollapsedDirent);
+  const newDirents = items.filter(isTopLevel).map(toCollapsedDirent);
   return {
     ...state,
     items: newDirents
@@ -1749,134 +1974,21 @@ const numbers = [diffType$2, diffType$3, RenderFocusContext, diffType, diffType$
 const diff = (oldState, newState) => {
   const diffResult = [];
   for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
-    }
-  }
-  return diffResult;
-};
-
-const diff2 = uid => {
-  const {
-    oldState,
-    newState
-  } = get(uid);
-  const result = diff(oldState, newState);
-  return result;
-};
-
-const isSymbolicLink = dirent => {
-  return dirent.type === Symlink;
-};
-
-const ENOENT = 'ENOENT';
-
-const getSymlinkType = type => {
-  switch (type) {
-    case File:
-      return SymLinkFile;
-    case Directory:
-      return SymLinkFolder;
-    default:
-      return Symlink;
-  }
-};
-
-// TODO maybe resolving of symbolic links should happen in shared process?
-// so that there is less code and less work in the frontend
-const resolveSymbolicLink = async (uri, rawDirent) => {
-  try {
-    // TODO support windows paths
-    const absolutePath = uri + '/' + rawDirent.name;
-    const type = await stat(absolutePath);
-    const symLinkType = getSymlinkType(type);
-    return {
-      name: rawDirent.name,
-      type: symLinkType
-    };
-  } catch (error) {
-    // @ts-ignore
-    if (error && error.code === ENOENT) {
-      return {
-        name: rawDirent.name,
-        type: SymLinkFile
-      };
-    }
-    console.error(`Failed to resolve symbolic link for ${rawDirent.name}: ${error}`);
-    return rawDirent;
-  }
-};
-const resolveSymbolicLinks = async (uri, rawDirents) => {
-  const promises = [];
-  for (const rawDirent of rawDirents) {
-    if (isSymbolicLink(rawDirent)) {
-      const resolvedDirent = resolveSymbolicLink(uri, rawDirent);
-      promises.push(resolvedDirent);
-    } else {
-      promises.push(rawDirent);
-    }
-  }
-  const resolvedDirents = await Promise.all(promises);
-  return resolvedDirents;
-};
-
-const sortExplorerItems = rawDirents => {
-  return rawDirents.toSorted(compareDirent);
-};
-
-const toDisplayDirents = (pathSeparator, rawDirents, parentDirent, excluded) => {
-  rawDirents = sortExplorerItems(rawDirents);
-  // TODO figure out whether this uses too much memory (name,path -> redundant, depth could be computed on demand)
-  const toDisplayDirent = (rawDirent, index) => {
-    const path = [parentDirent.path, rawDirent.name].join(pathSeparator);
-    return {
-      name: rawDirent.name,
-      posInSet: index + 1,
-      setSize: rawDirents.length,
-      depth: parentDirent.depth + 1,
-      type: rawDirent.type,
-      path,
-      // TODO storing absolute path might be too costly, could also store relative path here
-      icon: ''
-    };
-  };
-  const result = [];
-  let i = 0;
-  for (const rawDirent of rawDirents) {
-    if (excluded.includes(rawDirent.name)) {
-      continue;
-    }
-    result.push(toDisplayDirent(rawDirent, i));
-    i++;
-  }
-  return result;
-};
-
-const hasSymbolicLinks = rawDirents => {
-  return rawDirents.some(isSymbolicLink);
-};
-const getChildDirentsRaw = async uri => {
-  const rawDirents = await readDirWithFileTypes(uri);
-  array(rawDirents);
-  if (hasSymbolicLinks(rawDirents)) {
-    return resolveSymbolicLinks(uri, rawDirents);
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
   }
-  return rawDirents;
+  return diffResult;
 };
-const getChildDirents = async (pathSeparator, parentDirent, excluded = []) => {
-  string(pathSeparator);
-  object(parentDirent);
-  // TODO use event/actor based code instead, this is impossible to cancel right now
-  // also cancel updating when opening new folder
-  // const dispose = state => state.pendingRequests.forEach(cancelRequest)
-  // TODO should use FileSystem directly in this case because it is globally available anyway
-  // and more typesafe than Command.execute
-  // and more performant
-  const uri = parentDirent.path;
-  const rawDirents = await getChildDirentsRaw(uri);
-  const displayDirents = toDisplayDirents(pathSeparator, rawDirents, parentDirent, excluded);
-  return displayDirents;
+
+const diff2 = uid => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  const result = diff(oldState, newState);
+  return result;
 };
 
 const expandAll = async state => {
@@ -2028,6 +2140,16 @@ const expandRecursively = async state => {
   };
 };
 
+const focus = state => {
+  if (state.focus) {
+    return state;
+  }
+  return {
+    ...state,
+    focus: List
+  };
+};
+
 const focusIndex = (state, index) => {
   const {
     minLineY,
@@ -2149,7 +2271,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'cancelTypeAhead', 'updateEditingValue', 'handleKeyDown', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'handleInputKeyDown', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'cancelTypeAhead', 'updateEditingValue', 'handleKeyDown', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2309,7 +2431,7 @@ const menuEntryCut = {
 };
 const menuEntryCopy = {
   id: 'copy',
-  label: copy$1(),
+  label: copy(),
   flags: RestoreFocus,
   command: 'Explorer.handleCopy'
 };
@@ -2333,7 +2455,7 @@ const menuEntryCopyRelativePath = {
 };
 const menuEntryRename = {
   id: 'rename',
-  label: rename$1(),
+  label: rename(),
   flags: None$4,
   command: 'Explorer.renameDirent'
 };
@@ -2456,7 +2578,7 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     const newMaxLineY = Math.min(maxLineY, newTotal);
     const newMinLineY = newMaxLineY - visibleItems;
     const deltaY = newMinLineY * itemHeight;
-    const parts = newDirents.slice(minLineY, maxLineY);
+    const parts = newDirents.slice(newMinLineY, newMaxLineY);
     const {
       icons,
       newFileIconCache
@@ -2624,15 +2746,9 @@ const handleArrowRight = async state => {
   }
 };
 
-const handleBlur = state => {
+const handleBlur = async state => {
   // TODO when blur event occurs because of context menu, focused index should stay the same
   // but focus outline should be removed
-  const {
-    editingType
-  } = state;
-  if (editingType !== None$5) {
-    return state;
-  }
   return {
     ...state,
     focused: false
@@ -2988,36 +3104,63 @@ const getExpandedDirents = items => {
   return items.filter(isExpanded);
 };
 
-const refreshChildDirent = async (folder, dirent, pathSeparator, expandedFolders) => {
-  const path = folder.path.endsWith(pathSeparator) ? `${folder.path}${dirent.name}` : `${folder.path}${pathSeparator}${dirent.name}`;
-  const isExpandedFolder = expandedFolders.includes(path);
-  const type = dirent.type === 'directory' ? isExpandedFolder ? DirectoryExpanded : Directory : File;
-  const item = {
-    name: dirent.name,
-    type,
-    path,
-    depth: folder.depth + 1,
-    selected: false
-  };
-  if (isExpandedFolder) {
-    const nestedItems = await refreshChildDirents(item, pathSeparator, expandedFolders);
-    return [item, ...nestedItems];
+const getPathDirentsMap = async allPaths => {
+  const pathToDirents = Object.create(null);
+  await Promise.all(allPaths.map(async path => {
+    const dirents = await readDirWithFileTypes(path);
+    pathToDirents[path] = dirents;
+  }));
+  return pathToDirents;
+};
+
+const restoreDirentType = (rawDirentType, path, expandedPaths) => {
+  if (rawDirentType === Directory && expandedPaths.includes(path)) {
+    return DirectoryExpanded;
   }
-  return [item];
+  return rawDirentType;
 };
-const refreshChildDirents = async (folder, pathSeparator, expandedFolders) => {
-  const childDirents = await readDirWithFileTypes(folder.path);
-  const childItems = await Promise.all(childDirents.map(async dirent => {
-    return refreshChildDirent(folder, dirent, pathSeparator, expandedFolders);
-  }));
-  return childItems.flat();
+
+const getProtoMapInternal = (root, pathToDirents, expandedPaths, depth) => {
+  if (!(root in pathToDirents)) {
+    return [];
+  }
+  const items = pathToDirents[root] || [];
+  const protoMap = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const path = join2(root, item.name);
+    const displayDirent = {
+      name: item.name,
+      posInSet: i + 1,
+      setSize: items.length,
+      depth,
+      type: restoreDirentType(item.type, path, expandedPaths),
+      path,
+      icon: '',
+      selected: false
+    };
+    const children = getProtoMapInternal(path, pathToDirents, expandedPaths, depth + 1);
+    protoMap.push(displayDirent, ...children);
+  }
+  return protoMap;
+};
+
+const getProtoMap = (root, pathToDirents, expandedPaths) => {
+  return getProtoMapInternal(root, pathToDirents, expandedPaths, 1);
+};
+
+const sortPathDirentsMap = map => {
+  const sortedMap = Object.create(null);
+  for (const [key, value] of Object.entries(map)) {
+    const sorted = sortExplorerItems(value);
+    sortedMap[key] = sorted;
+  }
+  return sortedMap;
 };
 
-// TODO add lots of tests for this
 const refresh = async state => {
   const {
     root,
-    pathSeparator,
     minLineY,
     height,
     itemHeight,
@@ -3025,64 +3168,25 @@ const refresh = async state => {
     items,
     focusedIndex
   } = state;
-
-  // Get all expanded folders
   const expandedDirents = getExpandedDirents(items);
-  const expandedFolders = getPaths(expandedDirents);
-
-  // Get top level dirents
-  const topLevelDirents = await readDirWithFileTypes(root);
-  const newDirents = topLevelDirents.map(dirent => ({
-    name: dirent.name,
-    type: dirent.type === 'directory' ? Directory : File,
-    path: root.endsWith(pathSeparator) ? `${root}${dirent.name}` : `${root}${pathSeparator}${dirent.name}`,
-    depth: 0,
-    selected: false
-  }));
-
-  // Process expanded folders in parallel
-  const expandedFolderResults = await Promise.all(expandedFolders.map(async folderPath => {
-    const folderIndex = newDirents.findIndex(item => item.path === folderPath);
-    if (folderIndex !== -1) {
-      const folder = newDirents[folderIndex];
-      if (folder.type === Directory) {
-        const childItems = await refreshChildDirents(folder, pathSeparator, expandedFolders);
-        // @ts-ignore
-        folder.type = DirectoryExpanded;
-        return {
-          folderIndex,
-          childItems
-        };
-      }
-    }
-    return null;
-  }));
-
-  // Insert child items in the correct order
-  let offset = 0;
-  for (const result of expandedFolderResults) {
-    if (result) {
-      const {
-        folderIndex,
-        childItems
-      } = result;
-      newDirents.splice(folderIndex + 1 + offset, 0, ...childItems);
-      offset += childItems.length;
-    }
-  }
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
+  const expandedPaths = getPaths(expandedDirents);
+  const allPaths = [root, ...expandedPaths];
+  const pathToDirents = await getPathDirentsMap(allPaths);
+  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
+  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newItems.length);
+  const visible = newItems.slice(minLineY, maxLineY);
   const {
     icons,
     newFileIconCache
   } = await getFileIcons(visible, fileIconCache);
   let newFocusedIndex = focusedIndex;
-  if (focusedIndex >= newDirents.length) {
-    newFocusedIndex = newDirents.length - 1;
+  if (focusedIndex >= newItems.length) {
+    newFocusedIndex = newItems.length - 1;
   }
   return {
     ...state,
-    items: newDirents,
+    items: newItems,
     fileIconCache: newFileIconCache,
     icons,
     maxLineY,
@@ -3095,7 +3199,7 @@ const applyOperation = operation => {
     return mkdir(operation.path);
   }
   if (operation.type === 'copy') {
-    return copy(operation.from || '', operation.path);
+    return copy$1(operation.from || '', operation.path);
   }
   return writeFile(operation.path, operation.text);
 };
@@ -3150,18 +3254,18 @@ const getFileOperations = (root, uploadTree) => {
   const operations = [];
   const processTree = (tree, currentPath) => {
     for (const [path, value] of Object.entries(tree)) {
-      const fullPath = currentPath ? `${currentPath}/${path}` : path;
+      const fullPath = currentPath ? join2(currentPath, path) : path;
       if (typeof value === 'object') {
         operations.push({
           type: 'createFolder',
-          path: `${root}/${fullPath}`,
+          path: join2(root, fullPath),
           text: ''
         });
         processTree(value, fullPath);
       } else if (typeof value === 'string') {
         operations.push({
           type: 'createFile',
-          path: `${root}/${fullPath}`,
+          path: join2(root, fullPath),
           text: value
         });
       }
@@ -3227,7 +3331,7 @@ const getFileOperationsElectron = async (root, paths, fileHandles) => {
     const path = paths[i];
     operations.push({
       type: 'copy',
-      path: `${root}/${name}`,
+      path: join2(root, name),
       text: '',
       from: path
     });
@@ -3309,7 +3413,7 @@ const handleDropIntoFolder = async (state, dirent, index, fileHandles, files, pa
     const baseName = file.name;
     const to = dirent.path + pathSeparator + baseName;
     // @ts-ignore
-    await copy(file, to);
+    await copy$1(file, to);
   }
   const childDirents = await getChildDirents(pathSeparator, dirent);
   const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
@@ -3427,14 +3531,25 @@ const handleIconThemeChange = state => {
   return updateIcons(state);
 };
 
-const handleInputBlur = state => {
-  return cancelEdit(state);
+const handleInputBlur = async state => {
+  const {
+    editingErrorMessage,
+    editingValue
+  } = state;
+  if (editingErrorMessage || !editingValue) {
+    return cancelEditInternal(state, false);
+  }
+  return acceptEdit(state);
 };
 
 const handleInputClick = state => {
   return state;
 };
 
+const handleInputKeyDown = (state, key) => {
+  return state;
+};
+
 const filterByFocusWord = (items, focusedIndex, focusWord) => {
   if (items.length === 0) {
     return -1;
@@ -3552,7 +3667,7 @@ const handlePasteCopy = async (state, nativeFiles) => {
   for (const source of nativeFiles.files) {
     // @ts-ignore
     const target = join(state.pathSeperator, state.root, getBaseName(state.pathSeparator, source));
-    await copy(source, target);
+    await copy$1(source, target);
   }
   // TODO only update folder at which level it changed
   return updateRoot(state);
@@ -3561,7 +3676,7 @@ const handlePasteCopy = async (state, nativeFiles) => {
 const handlePasteCut = async (state, nativeFiles) => {
   for (const source of nativeFiles.files) {
     const target = `${state.root}${state.pathSeparator}${getBaseName(state.pathSeparator, source)}`;
-    await rename(source, target);
+    await rename$1(source, target);
   }
   return state;
 };
@@ -3883,7 +3998,7 @@ const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntTy
     existingChildren = childDirents.map((dirent, index) => ({
       name: dirent.name,
       type: dirent.type,
-      path: `${parentPath}/${dirent.name}`,
+      path: join2(parentPath, dirent.name),
       depth,
       selected: false,
       posInSet: index + 1,
@@ -4129,11 +4244,6 @@ const renderFocus = (oldState, newState) => {
   return [];
 };
 
-const None$2 = 'none';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
 const Actions = 'Actions';
 const Button$2 = 'Button';
 const ButtonNarrow = 'ButtonNarrow';
@@ -4153,7 +4263,10 @@ const Label = 'Label';
 const ListItems = 'ListItems';
 const MaskIconChevronDown = 'MaskIconChevronDown';
 const MaskIconChevronRight = 'MaskIconChevronRight';
-const TreeItem = 'TreeItem';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const TreeItem$1 = 'TreeItem';
 const TreeItemActive = 'TreeItemActive';
 const Viewlet = 'Viewlet';
 const Welcome = 'Welcome';
@@ -4182,7 +4295,6 @@ const HandleInputBlur = 'handleInputBlur';
 const HandleInputClick = 'handleInputClick';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
-const HandleListKeyDown = 'handleListKeyDown';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
 
@@ -4197,6 +4309,12 @@ const text = data => {
     childCount: 0
   };
 };
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
 
 const Button$1 = 1;
 const Div = 4;
@@ -4204,6 +4322,33 @@ const Input = 6;
 const Img = 17;
 const P = 50;
 
+const getExplorerWelcomeVirtualDom = isWide => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer),
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Div,
+    className: Welcome,
+    childCount: 2
+  }, {
+    type: P,
+    className: WelcomeMessage,
+    childCount: 1
+  }, text(youHaveNotYetOpenedAFolder()), {
+    type: Button$1,
+    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
+    childCount: 1,
+    onClick: HandleClickOpenFolder
+  }, text(openFolder$1())];
+};
+
+const None$2 = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
 const chevronDownVirtualDom = {
   type: Div,
   className: mergeClassNames(Chevron, MaskIconChevronDown),
@@ -4291,7 +4436,7 @@ const getExplorerItemVirtualDom = item => {
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
     type: Div,
-    role: TreeItem$1,
+    role: TreeItem,
     className,
     draggable: true,
     title: path,
@@ -4307,28 +4452,6 @@ const getExplorerItemVirtualDom = item => {
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name)];
 };
 
-const getExplorerWelcomeVirtualDom = isWide => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
-    tabIndex: 0,
-    childCount: 1
-  }, {
-    type: Div,
-    className: Welcome,
-    childCount: 2
-  }, {
-    type: P,
-    className: WelcomeMessage,
-    childCount: 1
-  }, text(youHaveNotYetOpenedAFolder()), {
-    type: Button$1,
-    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
-    childCount: 1,
-    onClick: HandleClickOpenFolder
-  }, text(openFolder$1())];
-};
-
 const getActiveDescendant = focusedIndex => {
   if (focusedIndex >= 0) {
     return 'TreeItemActive';
@@ -4341,17 +4464,8 @@ const getClassName = (focused, focusedIndex, dropTarget) => {
   const className = mergeClassNames(ListItems, extraClass1, extraClass2);
   return className;
 };
-const parentNode = {
-  type: Div,
-  childCount: 1,
-  className: mergeClassNames(Viewlet, Explorer),
-  role: 'none'
-};
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets) => {
-  if (!root) {
-    return getExplorerWelcomeVirtualDom(isWide);
-  }
-  const dom = [parentNode, {
+const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets) => {
+  const dom = [{
     type: Div,
     className: getClassName(focused, focusedIndex, dropTargets),
     tabIndex: 0,
@@ -4367,12 +4481,56 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
     onDrop: HandleDrop,
     onFocus: HandleListFocus,
     onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel,
-    onKeyDown: HandleListKeyDown
+    onWheel: HandleWheel
+    // onKeyDown: DomEventListenerFunctions.HandleListKeyDown,
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
 
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
+  }
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, scrollBarTop);
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    childCount: 1
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
+const parentNode = {
+  type: Div,
+  childCount: 2,
+  className: mergeClassNames(Viewlet, Explorer),
+  role: 'none'
+};
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, scrollTop) => {
+  if (!root) {
+    return getExplorerWelcomeVirtualDom(isWide);
+  }
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarTop);
+  const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets), ...scrollBarDom];
+  return dom;
+};
+
 const None$1 = 0;
 const Right = 1;
 const Down = 2;
@@ -4408,8 +4566,8 @@ const getExpandedType = type => {
   }
 };
 
-const focused = mergeClassNames(TreeItem, TreeItemActive);
-const selected = mergeClassNames(TreeItem, TreeItemActive);
+const focused = mergeClassNames(TreeItem$1, TreeItemActive);
+const selected = mergeClassNames(TreeItem$1, TreeItemActive);
 const getTreeItemClassName = (isSelected, isFocused) => {
   if (isFocused) {
     return focused;
@@ -4417,7 +4575,7 @@ const getTreeItemClassName = (isSelected, isFocused) => {
   if (isSelected) {
     return selected;
   }
-  return TreeItem;
+  return TreeItem$1;
 };
 
 const defaultIndent$1 = 1;
@@ -4488,7 +4646,8 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
 const renderItems = (oldState, newState) => {
   const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.editingErrorMessage, newState.icons, newState.useChevrons, newState.dropTargets, newState.editingIcon);
   const isWide = newState.width > 450;
-  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets);
+  const contentHeight = newState.items.length * newState.itemHeight;
+  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets, newState.height, contentHeight, newState.deltaY);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -4634,11 +4793,18 @@ const renderEventListeners = () => {
   return [{
     name: HandleInputBlur,
     params: ['handleInputBlur']
-  }, {
-    name: HandleListKeyDown,
-    params: ['handleKeyDown', 'event.key'],
-    preventDefault: true
-  }, {
+  },
+  // {
+  //   name: DomEventListenersFunctions.HandleInputKeyDown,
+  //   params: ['handleInputKeyDown'],
+  //   stopPropagation: true, // TODO find a way to do this without stopPropagation
+  // },
+  // {
+  //   name: DomEventListenersFunctions.HandleListKeyDown,
+  //   params: ['handleKeyDown', 'event.key'],
+  //   preventDefault: true,
+  // },
+  {
     name: HandleListFocus,
     params: ['handleFocus', 'event.isTrusted', 'event.target.className']
   }, {
@@ -4731,22 +4897,6 @@ const getIndex = (dirents, uri) => {
   return -1;
 };
 
-const getPathParts = (root, uri, pathSeparator) => {
-  const parts = [];
-  let index = root.length - 1;
-  let depth = 0;
-  while ((index = uri.indexOf('/', index + 1)) !== -1) {
-    const partUri = uri.slice(0, index);
-    parts.push({
-      path: partUri,
-      depth: depth++,
-      root,
-      pathSeparator
-    });
-  }
-  return parts;
-};
-
 const getPathPartsToReveal = (root, pathParts, dirents) => {
   for (let i = 0; i < pathParts.length; i++) {
     const pathPart = pathParts[i];
@@ -4759,30 +4909,18 @@ const getPathPartsToReveal = (root, pathParts, dirents) => {
   return pathParts;
 };
 
-const isTopLevel = dirent => {
-  return dirent.depth === 1;
-};
-const orderDirents = dirents => {
-  if (dirents.length === 0) {
-    return dirents;
-  }
-  const withDeepChildren = (parent, processed) => {
-    if (processed.has(parent.path)) {
-      return [];
-    }
-    processed.add(parent.path);
-    const children = [];
-    for (const dirent of dirents) {
-      if (dirent.depth === parent.depth + 1 && dirent.path.startsWith(parent.path)) {
-        children.push(...withDeepChildren(dirent, processed));
-      }
+const mergeVisibleWithHiddenItems = (visibleItems, hiddenItems) => {
+  const merged = [...visibleItems, ...hiddenItems];
+  const seen = Object.create(null);
+  const unique = [];
+  for (const item of merged) {
+    if (seen[item.path]) {
+      continue;
     }
-    return [parent, ...children];
-  };
-  const topLevelDirents = dirents.filter(isTopLevel);
-  const processed = new Set();
-  const ordered = topLevelDirents.flatMap(dirent => withDeepChildren(dirent, processed));
-  return ordered;
+    seen[item.path] = true;
+    unique.push(item);
+  }
+  return unique;
 };
 
 const scrollInto = (index, minLineY, maxLineY) => {
@@ -4807,24 +4945,6 @@ const scrollInto = (index, minLineY, maxLineY) => {
   };
 };
 
-const getPathPartChildren = async pathPart => {
-  const children = await getChildDirents(pathPart.pathSeparator, pathPart);
-  return children;
-};
-const mergeVisibleWithHiddenItems = (visibleItems, hiddenItems) => {
-  const merged = [...visibleItems, ...hiddenItems];
-  const seen = Object.create(null);
-  const unique = [];
-  for (const item of merged) {
-    if (seen[item.path]) {
-      continue;
-    }
-    seen[item.path] = true;
-    unique.push(item);
-  }
-  return unique;
-};
-
 // TODO maybe just insert items into explorer and refresh whole explorer
 const revealItemHidden = async (state, uri) => {
   const {
@@ -4839,8 +4959,8 @@ const revealItemHidden = async (state, uri) => {
     return state;
   }
   const pathPartsToReveal = getPathPartsToReveal(root, pathParts, items);
-  const pathPartsChildren = await Promise.all(pathPartsToReveal.map(getPathPartChildren));
-  const pathPartsChildrenFlat = pathPartsChildren.flat(1);
+  const pathPartsChildren = await getPathPartsChildren(pathPartsToReveal);
+  const pathPartsChildrenFlat = pathPartsChildren.flat();
   const orderedPathParts = orderDirents(pathPartsChildrenFlat);
   const mergedDirents = mergeVisibleWithHiddenItems(items, orderedPathParts);
   const index = getIndex(mergedDirents, uri);
@@ -5028,7 +5148,12 @@ const getEditingIcon = async (editingType, value, direntType) => {
 };
 
 const updateEditingValue = async (state, value, inputSource = User) => {
-  const editingIcon = await getEditingIcon(state.editingType, value, state.items[state.editingIndex]?.type);
+  const {
+    editingType,
+    items,
+    editingIndex
+  } = state;
+  const editingIcon = await getEditingIcon(editingType, value, items[editingIndex]?.type);
   return {
     ...state,
     editingValue: value,
@@ -5038,14 +5163,14 @@ const updateEditingValue = async (state, value, inputSource = User) => {
 
 const commandMap = {
   'Explorer.acceptEdit': wrapCommand(acceptEdit),
-  'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
-  'Explorer.cancelTypeAhead': wrapCommand(cancelTypeAhead),
   'Explorer.cancelEdit': wrapCommand(cancelEdit),
+  'Explorer.cancelTypeAhead': wrapCommand(cancelTypeAhead),
   'Explorer.collapseAll': wrapCommand(collapseAll),
   'Explorer.copyPath': wrapCommand(copyPath),
   'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
   'Explorer.expandAll': wrapCommand(expandAll),
   'Explorer.expandRecursively': wrapCommand(expandRecursively),
+  'Explorer.focus': wrapCommand(focus),
   'Explorer.focusFirst': wrapCommand(focusFirst),
   'Explorer.focusIndex': wrapCommand(focusIndex),
   'Explorer.focusLast': wrapCommand(focusLast),
@@ -5073,6 +5198,8 @@ const commandMap = {
   'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
   'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
   'Explorer.handleInputClick': wrapCommand(handleInputClick),
+  'Explorer.handleInputKeyDown': wrapCommand(handleInputKeyDown),
+  'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
   'Explorer.handlePaste': wrapCommand(handlePaste),
   'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
   'Explorer.handleUpload': wrapCommand(handleUpload),
@@ -5112,7 +5239,7 @@ const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$3(RendererWorker, rpc);
+  set$1(rpc);
 };
 
 const main = async () => {