@lvce-editor/static-server 0.69.0 → 0.69.2

package/static/{eb102f6 → 5f26f20}/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -1059,6 +1059,7 @@ const DeltaY = 'event.deltaY';
 const EventTargetClassName = 'event.target.className';
 const IsTrusted = 'event.isTrusted';
 const ShiftKey = 'event.shiftKey';
+const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
 const Enter = 3;
@@ -1393,14 +1394,14 @@ const copy$1 = async (oldUri, newUri) => {
 
 const applyOperation = operation => {
   switch (operation.type) {
-    case CreateFolder$1:
-      return mkdir(operation.path);
     case Copy$1:
       return copy$1(operation.from || '', operation.path);
-    case Rename$2:
-      return rename$1(operation.from || '', operation.path);
+    case CreateFolder$1:
+      return mkdir(operation.path);
     case Remove:
       return remove(operation.path);
+    case Rename$2:
+      return rename$1(operation.from || '', operation.path);
     default:
       return writeFile(operation.path, operation.text);
   }
@@ -1473,9 +1474,9 @@ const createTree = (items, root) => {
   });
   for (const item of items) {
     const {
-      type,
       name,
-      path
+      path,
+      type
     } = item;
     const relativePath = path.slice(rootLength);
     const dirname = dirname2(relativePath);
@@ -1506,8 +1507,8 @@ const getFileOperationsNestedPath = (path, root, pathSeparator) => {
     if (!part) continue;
     currentPath = join2(currentPath, part);
     operations.push({
-      type: CreateFolder$1,
-      path: join2(root, currentPath)
+      path: join2(root, currentPath),
+      type: CreateFolder$1
     });
   }
   return operations;
@@ -1518,14 +1519,14 @@ const getFileOperationsCreate = (newFileName, newDirentType, pathSeparator, abso
   operations.push(...getFileOperationsNestedPath(parentPath, root, pathSeparator));
   if (newDirentType === File) {
     operations.push({
-      type: CreateFile$1,
       path: absolutePath,
-      text: ''
+      text: '',
+      type: CreateFile$1
     });
   } else if (newDirentType === Directory) {
     operations.push({
-      type: CreateFolder$1,
-      path: absolutePath
+      path: absolutePath,
+      type: CreateFolder$1
     });
   }
   return operations;
@@ -1555,11 +1556,11 @@ const getPathParts = (root, uri, pathSeparator) => {
   while ((index = uri.indexOf(pathSeparator, index + 1)) !== -1) {
     const partUri = uri.slice(0, index);
     parts.push({
-      path: partUri,
       depth: depth++,
-      root,
+      expanded: true,
+      path: partUri,
       pathSeparator,
-      expanded: true
+      root
     });
   }
   return parts;
@@ -1577,10 +1578,10 @@ const ENOENT = 'ENOENT';
 
 const getSymlinkType = type => {
   switch (type) {
-    case File:
-      return SymLinkFile;
     case Directory:
       return SymLinkFolder;
+    case File:
+      return SymLinkFile;
     default:
       return Symlink;
   }
@@ -1645,11 +1646,11 @@ const compareStringNumeric = (a, b) => {
 
 const priorityMapFoldersFirst = {
   [Directory]: 1,
-  [SymLinkFolder]: 1,
   [File]: 0,
+  [Socket]: 0,
   [SymLinkFile]: 0,
-  [Unknown]: 0,
-  [Socket]: 0
+  [SymLinkFolder]: 1,
+  [Unknown]: 0
 };
 const compareDirentType = (direntA, direntB) => {
   return priorityMapFoldersFirst[direntB.type] - priorityMapFoldersFirst[direntA.type];
@@ -1669,15 +1670,15 @@ const sortExplorerItems = rawDirents => {
 const toDisplayDirent = (parentPath, parentDepth, rawDirentType, rawDirentName, index, length) => {
   const path = join2(parentPath, rawDirentName);
   return {
-    name: rawDirentName,
-    posInSet: index + 1,
-    setSize: length,
     depth: parentDepth + 1,
-    type: rawDirentType,
+    icon: '',
+    name: rawDirentName,
     path,
     // TODO storing absolute path might be too costly, could also store relative path here
-    icon: '',
-    selected: false
+    posInSet: index + 1,
+    selected: false,
+    setSize: length,
+    type: rawDirentType
   };
 };
 
@@ -1794,12 +1795,12 @@ const treeToArrayInternal = (map, root, items, path, depth) => {
     const absolutePath = join2(root, childPath);
     items.push({
       depth,
-      posInSet: i + 1,
-      setSize: count,
       icon: '',
+      name: child.name,
       path: absolutePath,
+      posInSet: i + 1,
       selected: false,
-      name: child.name,
+      setSize: count,
       type: child.type
     });
     treeToArrayInternal(map, root, items, childPath, depth + 1);
@@ -1839,8 +1840,8 @@ const FileOrFolderAlreadyExists = 'A file or folder **{PH1}** already exists at
 const FileOrFolderNameMustBeProvider = 'A file or folder name must be provided.';
 const FileCannotStartWithBackSlash = 'A file or folder name cannot start with a backslash.';
 const FilesExplorer = 'Files Explorer';
-const NewFile$1 = 'New File...';
-const NewFolder$1 = 'New Folder...';
+const NewFile$2 = 'New File...';
+const NewFolder$2 = 'New Folder...';
 const OpenContainingFolder = 'Open Containing Folder';
 const OpenFolder$1 = 'Open folder';
 const OpenInIntegratedTerminal = 'Open in integrated Terminal';
@@ -1852,10 +1853,10 @@ const TypeAFileName = 'Type file name. Press Enter to confirm or Escape to cance
 const YouHaveNotYetOpenedAFolder = 'You have not yet opened a folder';
 
 const newFile$1 = () => {
-  return i18nString(NewFile$1);
+  return i18nString(NewFile$2);
 };
 const newFolder$1 = () => {
-  return i18nString(NewFolder$1);
+  return i18nString(NewFolder$2);
 };
 const openContainingFolder$1 = () => {
   return i18nString(OpenContainingFolder);
@@ -1952,10 +1953,10 @@ const validateFileName2 = (name, siblingFileNames = []) => {
 const acceptCreate = async (state, newDirentType) => {
   const {
     editingValue,
-    pathSeparator,
-    root,
     focusedIndex,
-    items
+    items,
+    pathSeparator,
+    root
   } = state;
   const newFileName = editingValue;
   const siblingFileNames = getSiblingFileNames(items, focusedIndex);
@@ -1987,11 +1988,11 @@ const acceptCreate = async (state, newDirentType) => {
   await refreshWorkspace();
   return {
     ...state,
-    items: dirents,
     editingIndex: -1,
-    focusedIndex: newFocusedIndex,
     editingType: None$5,
-    focus: List
+    focus: List,
+    focusedIndex: newFocusedIndex,
+    items: dirents
   };
 };
 
@@ -2026,9 +2027,9 @@ const getFileOperationsRename = (oldAbsolutePath, newFileName) => {
   const oldParentPath = dirname2(oldAbsolutePath);
   const newAbsolutePath = join2(oldParentPath, newFileName);
   operations.push({
-    type: Rename$2,
+    from: oldAbsolutePath,
     path: newAbsolutePath,
-    from: oldAbsolutePath
+    type: Rename$2
   });
   return operations;
 };
@@ -2075,16 +2076,16 @@ const acceptRename = async state => {
   const newFocusedIndex = getIndex(newDirents, newUri);
   return {
     ...state,
+    editingIcon: '',
     editingIndex: -1,
-    editingValue: '',
+    editingSelectionEnd: 0,
+    editingSelectionStart: 0,
     editingType: None$5,
-    editingIcon: '',
-    focusedIndex: newFocusedIndex,
-    focused: true,
+    editingValue: '',
     focus: List,
-    items: newDirents,
-    editingSelectionEnd: 0,
-    editingSelectionStart: 0
+    focused: true,
+    focusedIndex: newFocusedIndex,
+    items: newDirents
   };
 };
 
@@ -2122,14 +2123,14 @@ const cancelEditCreate = async (state, keepFocus) => {
   const newFocusedIndex = getFocusedIndexCancel(items, editingIndex);
   return {
     ...state,
-    items: filteredItems,
-    focusedIndex: newFocusedIndex,
-    focused: keepFocus,
-    editingIndex: -1,
-    editingValue: '',
     editingErrorMessage: '',
+    editingIndex: -1,
     editingType: None$5,
-    focus: List
+    editingValue: '',
+    focus: List,
+    focused: keepFocus,
+    focusedIndex: newFocusedIndex,
+    items: filteredItems
   };
 };
 
@@ -2159,16 +2160,16 @@ const cancelEditRename = (state, keepFocus) => {
   const newFocusedIndex = getFocusedIndexCancel(items, editingIndex);
   return {
     ...state,
-    items: newItems,
-    focusedIndex: newFocusedIndex,
-    focused: keepFocus,
+    editingErrorMessage: '',
     editingIndex: -1,
-    editingValue: '',
+    editingSelectionEnd: 0,
+    editingSelectionStart: 0,
     editingType: None$5,
-    editingErrorMessage: '',
+    editingValue: '',
     focus: List,
-    editingSelectionStart: 0,
-    editingSelectionEnd: 0
+    focused: keepFocus,
+    focusedIndex: newFocusedIndex,
+    items: newItems
   };
 };
 
@@ -2205,11 +2206,14 @@ const toCollapsedDirent = dirent => {
 
 const collapseAll = async state => {
   const {
+    focusedIndex,
     items
   } = state;
   const newDirents = items.filter(isTopLevel).map(toCollapsedDirent);
+  const newFocusedIndex = getFocusedIndexCancel(newDirents, focusedIndex);
   return {
     ...state,
+    focusedIndex: newFocusedIndex,
     items: newDirents
   };
 };
@@ -2217,8 +2221,8 @@ const collapseAll = async state => {
 const getFocusedDirent$1 = state => {
   const {
     focusedIndex,
-    minLineY,
-    items
+    items,
+    minLineY
   } = state;
   const dirent = items[focusedIndex + minLineY];
   return dirent;
@@ -2290,9 +2294,9 @@ const getMissingDirents = (dirents, fileIconCache) => {
 };
 const toIconRequest = dirent => {
   return {
-    type: dirent.type,
     name: dirent.name,
-    path: dirent.path
+    path: dirent.path,
+    type: dirent.type
   };
 };
 const getMissingIconRequests = (dirents, fileIconCache) => {
@@ -2405,8 +2409,8 @@ const getExpandedType = type => {
   switch (type) {
     case Directory:
       return Collapsed;
-    case DirectoryExpanding:
     case DirectoryExpanded:
+    case DirectoryExpanding:
       return Expanded;
     default:
       return None$3;
@@ -2542,21 +2546,21 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     }
     visible.push({
       ...item,
-      posInSet: item.posInSet ?? i + 1,
-      setSize: item.setSize ?? items.length,
-      isEditing: isEditing,
-      hasEditingError: isEditing && Boolean(editingErrorMessage),
-      icon,
-      indent,
       ariaExpanded,
       chevron,
-      id,
       className,
+      // @ts-ignore
+      decoration,
+      hasEditingError: isEditing && Boolean(editingErrorMessage),
+      icon,
+      id,
+      indent,
+      index: i,
       isCut,
+      isEditing: isEditing,
       isIgnored,
-      index: i,
-      // @ts-ignore
-      decoration
+      posInSet: item.posInSet ?? i + 1,
+      setSize: item.setSize ?? items.length
     });
   }
   return visible;
@@ -2564,9 +2568,9 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
 
 const {
   get,
-  set,
-  registerCommands,
   getCommandIds,
+  registerCommands,
+  set,
   wrapGetter
 } = create$1();
 const wrapListItemCommand = fn => {
@@ -2576,20 +2580,20 @@ const wrapListItemCommand = fn => {
     } = get(id);
     const updatedState = await fn(newState, ...args);
     const {
-      items,
-      minLineY,
-      focusedIndex,
-      editingIndex,
-      editingErrorMessage,
-      useChevrons,
+      cutItems,
+      decorations,
       dropTargets,
+      editingErrorMessage,
       editingIcon,
-      cutItems,
-      sourceControlIgnoredUris,
+      editingIndex,
+      fileIconCache,
+      focusedIndex,
       height,
       itemHeight,
-      fileIconCache,
-      decorations
+      items,
+      minLineY,
+      sourceControlIgnoredUris,
+      useChevrons
     } = updatedState;
     const intermediate = get(id);
     set(id, intermediate.oldState, updatedState);
@@ -2605,10 +2609,10 @@ const wrapListItemCommand = fn => {
     const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris, decorations);
     const finalState = {
       ...updatedState,
-      visibleExplorerItems,
       fileIconCache: newFileIconCache,
       icons,
-      maxLineY
+      maxLineY,
+      visibleExplorerItems
     };
     const intermediate2 = get(id);
     set(id, intermediate2.oldState, finalState);
@@ -2623,58 +2627,58 @@ const Slash = '/';
 // TODO parentUid might ot be needed
 const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) => {
   const state = {
-    uid: id,
-    parentUid,
-    root: '',
-    items: [],
-    focusedIndex: -1,
-    focused: false,
-    hoverIndex: -1,
-    x,
-    y,
-    width,
-    height,
+    confirmDelete: false,
+    confirmPaste: false,
+    cutItems: [],
+    decorations: [],
     deltaY: 0,
-    minLineY: 0,
-    maxLineY: 0,
-    pathSeparator: Slash,
-    version: 0,
-    editingIndex: -1,
-    itemHeight: ListItem,
     dropTargets: [],
-    excluded: [],
-    editingValue: '',
-    editingType: None$5,
+    editingErrorMessage: '',
     editingIcon: '',
+    editingIndex: -1,
+    editingSelectionEnd: 0,
+    editingSelectionStart: 0,
+    editingType: None$5,
+    editingValue: '',
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    errorMessageWidth: 0,
+    excluded: [],
     fileIconCache: Object.create(null),
-    useChevrons: false,
-    confirmDelete: false,
-    icons: [],
-    platform,
+    finalDeltaY: 0,
     focus: 0,
-    editingErrorMessage: '',
-    inputSource: 0,
-    editingSelectionStart: 0,
-    editingSelectionEnd: 0,
+    focused: false,
+    focusedIndex: -1,
     focusWord: '',
     focusWordTimeout: 800,
-    finalDeltaY: 0,
     handleOffset: 0,
-    scrollBarActive: false,
-    scrollBarHeight: 0,
-    confirmPaste: false,
-    pasteShouldMove: false,
-    cutItems: [],
+    height,
+    hoverIndex: -1,
+    icons: [],
+    inputSource: 0,
     isPointerDown: false,
+    itemHeight: ListItem,
+    items: [],
+    maxIndent: 0,
+    maxLineY: 0,
+    minLineY: 0,
+    parentUid,
+    pasteShouldMove: false,
+    pathSeparator: Slash,
+    platform,
     pointerDownIndex: -1,
+    root: '',
+    scrollBarActive: false,
+    scrollBarHeight: 0,
+    sourceControlDecorations: false,
     sourceControlIgnoredUris: [],
-    maxIndent: 0,
-    errorMessageLeft: 0,
-    errorMessageTop: 0,
+    uid: id,
+    useChevrons: false,
+    version: 0,
     visibleExplorerItems: [],
-    errorMessageWidth: 0,
-    decorations: [],
-    sourceControlDecorations: false
+    width,
+    x,
+    y
   };
   set(state.uid, state, state);
   return state;
@@ -2739,8 +2743,8 @@ const diff = (oldState, newState) => {
 
 const diff2 = uid => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   const result = diff(oldState, newState);
   return result;
@@ -2748,8 +2752,8 @@ const diff2 = uid => {
 
 const expandAll = async state => {
   const {
-    items,
     focusedIndex,
+    items,
     pathSeparator
   } = state;
   if (focusedIndex === -1) {
@@ -2800,11 +2804,9 @@ const makeExpanded = dirent => {
 // TODO this is very inefficient
 const getChildDirentsRecursively = async (dirent, pathSeparator) => {
   switch (dirent.type) {
-    case File:
-      return [dirent];
     case Directory:
-    case DirectoryExpanding:
     case DirectoryExpanded:
+    case DirectoryExpanding:
       const childDirents = await getChildDirents(pathSeparator, dirent.path, dirent.depth);
       const all = [makeExpanded(dirent)];
       for (const childDirent of childDirents) {
@@ -2812,6 +2814,8 @@ const getChildDirentsRecursively = async (dirent, pathSeparator) => {
         all.push(...childAll);
       }
       return all;
+    case File:
+      return [dirent];
     default:
       return [];
   }
@@ -2831,15 +2835,15 @@ const getParentEndIndex = (dirents, index) => {
 
 const expandRecursively = async state => {
   const {
-    items,
     focusedIndex,
+    items,
     pathSeparator,
     root
   } = state;
   const dirent = focusedIndex < 0 ? {
-    type: Directory,
+    depth: 0,
     path: root,
-    depth: 0
+    type: Directory
   } : items[focusedIndex];
   if (dirent.type !== Directory && dirent.type !== DirectoryExpanding && dirent.type !== DirectoryExpanded) {
     return state;
@@ -2877,9 +2881,9 @@ const focus = state => {
 
 const focusIndex = (state, index) => {
   const {
-    minLineY,
+    items,
     maxLineY,
-    items
+    minLineY
   } = state;
   const newItems = items.map((item, i) => ({
     ...item,
@@ -2889,37 +2893,37 @@ const focusIndex = (state, index) => {
     if (index < 0) {
       return {
         ...state,
-        items: newItems,
+        focused: true,
         focusedIndex: index,
-        focused: true
+        items: newItems
       };
     }
     const diff = maxLineY - minLineY;
     return {
       ...state,
-      items: newItems,
-      focusedIndex: index,
       focused: true,
-      minLineY: index,
-      maxLineY: index + diff
+      focusedIndex: index,
+      items: newItems,
+      maxLineY: index + diff,
+      minLineY: index
     };
   }
   if (index >= maxLineY) {
     const diff = maxLineY - minLineY;
     return {
       ...state,
-      items: newItems,
-      focusedIndex: index,
       focused: true,
-      minLineY: index + 1 - diff,
-      maxLineY: index + 1
+      focusedIndex: index,
+      items: newItems,
+      maxLineY: index + 1,
+      minLineY: index + 1 - diff
     };
   }
   return {
     ...state,
-    items: newItems,
+    focused: true,
     focusedIndex: index,
-    focused: true
+    items: newItems
   };
 };
 
@@ -2998,96 +3002,96 @@ const focusPrevious = state => {
 
 const getKeyBindings = () => {
   return [{
-    key: Shift | UpArrow,
     command: 'Explorer.selectUp',
+    key: Shift | UpArrow,
     when: FocusExplorer
   }, {
-    key: Shift | DownArrow,
     command: 'Explorer.selectDown',
+    key: Shift | DownArrow,
     when: FocusExplorer
   }, {
-    key: RightArrow,
     command: 'Explorer.handleArrowRight',
+    key: RightArrow,
     when: FocusExplorer
   }, {
-    key: LeftArrow,
     command: 'Explorer.handleArrowLeft',
+    key: LeftArrow,
     when: FocusExplorer
   }, {
-    key: Home,
     command: 'Explorer.focusFirst',
+    key: Home,
     when: FocusExplorer
   }, {
-    key: End,
     command: 'Explorer.focusLast',
+    key: End,
     when: FocusExplorer
   }, {
-    key: UpArrow,
     command: 'Explorer.focusPrevious',
+    key: UpArrow,
     when: FocusExplorer
   }, {
-    key: DownArrow,
     command: 'Explorer.focusNext',
+    key: DownArrow,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | Star,
     command: 'Explorer.expandAll',
+    key: CtrlCmd | Star,
     when: FocusExplorer
   }, {
-    key: Alt | RightArrow,
     command: 'Explorer.expandRecursively',
+    key: Alt | RightArrow,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | LeftArrow,
     command: 'Explorer.collapseAll',
+    key: CtrlCmd | LeftArrow,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | KeyV,
     command: 'Explorer.handlePaste',
+    key: CtrlCmd | KeyV,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | KeyC,
     command: 'Explorer.handleCopy',
+    key: CtrlCmd | KeyC,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | KeyX,
     command: 'Explorer.handleCut',
+    key: CtrlCmd | KeyX,
     when: FocusExplorer
   }, {
-    key: F2,
     command: 'Explorer.renameDirent',
+    key: F2,
     when: FocusExplorer
   }, {
-    key: Escape,
     command: 'Explorer.cancelEdit',
+    key: Escape,
     when: FocusExplorerEditBox
   }, {
-    key: Enter,
     command: 'Explorer.acceptEdit',
+    key: Enter,
     when: FocusExplorerEditBox
   }, {
-    key: Delete$1,
     command: 'Explorer.removeDirent',
+    key: Delete$1,
     when: FocusExplorer
   }, {
-    key: Escape,
     command: 'Explorer.focusNone',
+    key: Escape,
     when: FocusExplorer
   }, {
-    key: Space,
     command: 'Explorer.handleClickCurrentButKeepFocus',
+    key: Space,
     when: FocusExplorer
   }, {
-    key: Enter,
     command: 'Explorer.handleClickCurrent',
+    key: Enter,
     when: FocusExplorer
   }, {
-    key: Escape,
     command: 'Explorer.handleEscape',
+    key: Escape,
     when: FocusExplorer
   }, {
-    key: CtrlCmd | KeyA,
     command: 'Explorer.selectAll',
+    key: CtrlCmd | KeyA,
     when: FocusExplorer
   }];
 };
@@ -3097,77 +3101,77 @@ const None$2 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
-  id: 'separator',
-  label: '',
+  command: '',
   flags: Separator,
-  command: ''
+  id: 'separator',
+  label: ''
 };
 
 const menuEntryNewFile = {
-  id: 'newFile',
-  label: newFile$1(),
+  command: 'Explorer.newFile',
   flags: None$2,
-  command: 'Explorer.newFile'
+  id: 'newFile',
+  label: newFile$1()
 };
 const menuEntryNewFolder = {
-  id: 'newFolder',
-  label: newFolder$1(),
+  command: 'Explorer.newFolder',
   flags: None$2,
-  command: 'Explorer.newFolder'
+  id: 'newFolder',
+  label: newFolder$1()
 };
 const menuEntryOpenContainingFolder = {
-  id: 'openContainingFolder',
-  label: openContainingFolder$1(),
+  command: 'Explorer.openContainingFolder',
   flags: RestoreFocus,
-  command: 'Explorer.openContainingFolder'
+  id: 'openContainingFolder',
+  label: openContainingFolder$1()
 };
 const menuEntryOpenInIntegratedTerminal = {
-  id: 'openInIntegratedTerminal',
-  label: openInIntegratedTerminal(),
+  command: /* TODO */'-1',
   flags: None$2,
-  command: /* TODO */'-1'
+  id: 'openInIntegratedTerminal',
+  label: openInIntegratedTerminal()
 };
 const menuEntryCut = {
-  id: 'cut',
-  label: cut(),
+  command: 'Explorer.handleCut',
   flags: RestoreFocus,
-  command: 'Explorer.handleCut'
+  id: 'cut',
+  label: cut()
 };
 const menuEntryCopy = {
-  id: 'copy',
-  label: copy(),
+  command: 'Explorer.handleCopy',
   flags: RestoreFocus,
-  command: 'Explorer.handleCopy'
+  id: 'copy',
+  label: copy()
 };
 const menuEntryPaste = {
-  id: 'paste',
-  label: paste(),
+  command: 'Explorer.handlePaste',
   flags: None$2,
-  command: 'Explorer.handlePaste'
+  id: 'paste',
+  label: paste()
 };
 const menuEntryCopyPath = {
-  id: 'copyPath',
-  label: copyPath$1(),
+  command: 'Explorer.copyPath',
   flags: RestoreFocus,
-  command: 'Explorer.copyPath'
+  id: 'copyPath',
+  label: copyPath$1()
 };
 const menuEntryCopyRelativePath = {
-  id: 'copyRelativePath',
-  label: copyRelativePath$1(),
+  command: 'Explorer.copyRelativePath',
   flags: RestoreFocus,
-  command: 'Explorer.copyRelativePath'
+  id: 'copyRelativePath',
+  label: copyRelativePath$1()
 };
 const menuEntryRename = {
-  id: 'rename',
-  label: rename(),
+  command: 'Explorer.renameDirent',
   flags: None$2,
-  command: 'Explorer.renameDirent'
+  id: 'rename',
+  label: rename()
 };
 const menuEntryDelete = {
-  id: 'delete',
-  label: deleteItem(),
+  command: 'Explorer.removeDirent',
   flags: None$2,
-  command: 'Explorer.removeDirent'
+  id: 'delete',
+  label: deleteItem()
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
 
@@ -3216,26 +3220,26 @@ const LeftClick = 0;
 
 const getMouseActions = () => {
   return [{
-    description: 'Open file on click',
     button: LeftClick,
-    modifiers: {},
     command: 'Explorer.openFile',
+    description: 'Open file on click',
+    modifiers: {},
     when: FocusExplorer
   }, {
-    description: 'Toggle selection with Ctrl+Click',
     button: LeftClick,
+    command: 'Explorer.toggleSelection',
+    description: 'Toggle selection with Ctrl+Click',
     modifiers: {
       ctrl: true
     },
-    command: 'Explorer.toggleSelection',
     when: FocusExplorer
   }, {
-    description: 'Select range with Shift+Click',
     button: LeftClick,
+    command: 'Explorer.rangeSelection',
+    description: 'Select range with Shift+Click',
     modifiers: {
       shift: true
     },
-    command: 'Explorer.rangeSelection',
     when: FocusExplorer
   }];
 };
@@ -3259,10 +3263,10 @@ const focusParentFolder = state => {
 
 const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) => {
   const {
-    minLineY,
-    maxLineY,
     itemHeight,
-    items
+    items,
+    maxLineY,
+    minLineY
   } = state;
   // @ts-ignore
   dirent.type = Directory;
@@ -3299,8 +3303,8 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
 
 const handleArrowLeft = state => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   if (focusedIndex === -1) {
     return state;
@@ -3321,8 +3325,8 @@ const handleArrowLeft = state => {
 
 const handleArrowRightDirectoryExpanded = (state, dirent) => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   if (focusedIndex === items.length - 1) {
     return state;
@@ -3359,10 +3363,10 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
 
   return {
     ...state,
+    focus: List,
     focused: keepFocus,
     focusedIndex: newIndex,
-    items: newDirents,
-    focus: List
+    items: newDirents
   };
 };
 
@@ -3374,8 +3378,8 @@ const handleClickFile = async (state, dirent, index, keepFocus = false) => {
   await openUri(dirent.path, !keepFocus);
   return {
     ...state,
-    focusedIndex: index,
-    focused: keepFocus
+    focused: keepFocus,
+    focusedIndex: index
   };
 };
 
@@ -3392,23 +3396,23 @@ const handleClickSymLink = async (state, dirent, index) => {
 
 const handleArrowRight = async state => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   if (focusedIndex === -1) {
     return state;
   }
   const dirent = items[focusedIndex];
   switch (dirent.type) {
-    case File:
-    case SymLinkFile:
-      return state;
     case Directory:
     case SymLinkFolder:
       // @ts-ignore
       return handleClickDirectory(state, dirent);
     case DirectoryExpanded:
       return handleArrowRightDirectoryExpanded(state, dirent);
+    case File:
+    case SymLinkFile:
+      return state;
     case Symlink:
       return handleClickSymLink(state, dirent, focusedIndex);
     default:
@@ -3435,6 +3439,239 @@ const handleBlur = async state => {
   };
 };
 
+const CollapseAll$1 = 'CollapseAll';
+const ExplorerInput = 'ExplorerInput';
+const NewFile$1 = 'NewFile';
+const NewFolder$1 = 'NewFolder';
+const OpenFolder = 'OpenFolder';
+const Refresh$1 = 'Refresh';
+
+const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntType) => {
+  // Get existing children or query them if they don't exist
+  let existingChildren = items.filter(item => item.depth === depth && item.path.startsWith(parentPath));
+  if (existingChildren.length === 0) {
+    const childDirents = await readDirWithFileTypes(parentPath);
+    existingChildren = childDirents.map((dirent, index) => ({
+      depth,
+      icon: '',
+      name: dirent.name,
+      path: join2(parentPath, dirent.name),
+      posInSet: index + 1,
+      selected: false,
+      setSize: childDirents.length,
+      type: dirent.type
+    }));
+  }
+  const updatedChildren = existingChildren.map((child, index) => ({
+    ...child,
+    posInSet: index + 1,
+    setSize: existingChildren.length + 2
+  }));
+  const newDirent = {
+    depth,
+    icon: '',
+    name: '',
+    path: parentPath,
+    posInSet: updatedChildren.length + 1,
+    selected: false,
+    setSize: existingChildren.length + 2,
+    type: direntType
+  };
+  const allChildDirents = [...updatedChildren, newDirent];
+  return allChildDirents;
+};
+
+const getNewDirentsForNewDirent = async (items, focusedIndex, type, root) => {
+  if (items.length === 0 || focusedIndex === -1) {
+    const newDirent = {
+      depth: 0,
+      icon: '',
+      name: '',
+      path: root,
+      posInSet: 1,
+      selected: false,
+      setSize: 1,
+      type
+    };
+    return [...items, newDirent];
+  }
+  const focusedItem = items[focusedIndex];
+  if (!focusedItem) {
+    return items;
+  }
+  const parentPath = focusedItem.path;
+  const depth = focusedItem.depth + 1;
+  const updatedChildren = await getNewChildDirentsForNewDirent(items, depth, parentPath, type);
+
+  // Create new array with updated items
+  const parentIndex = focusedIndex;
+  const itemsBeforeParent = items.slice(0, parentIndex);
+  const itemsAfterChildren = items.slice(parentIndex + updatedChildren.length);
+  const updatedParent = {
+    ...items[parentIndex],
+    setSize: (items[parentIndex]?.setSize || 0) + 1
+  };
+  return [...itemsBeforeParent, updatedParent, ...updatedChildren, ...itemsAfterChildren];
+};
+
+const getNewDirentType = editingType => {
+  switch (editingType) {
+    case CreateFile:
+      return EditingFile;
+    case CreateFolder:
+      return EditingFolder;
+    default:
+      return File;
+  }
+};
+
+const isFolder = direntType => {
+  return direntType === Directory || direntType === DirectoryExpanded || direntType === SymLinkFolder;
+};
+const getFittingIndex = (dirents, startIndex) => {
+  for (let i = startIndex; i >= 0; i--) {
+    const dirent = dirents[i];
+    if (isFolder(dirent.type)) {
+      return i;
+    }
+  }
+  return -1;
+};
+const newDirent = async (state, editingType) => {
+  // TODO do it like vscode, select position between folders and files
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const index = getFittingIndex(items, focusedIndex);
+  const direntType = getNewDirentType(editingType);
+  const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
+  const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
+  return {
+    ...state,
+    editingIndex,
+    editingType,
+    editingValue: '',
+    focus: Input$1,
+    focusedIndex: editingIndex,
+    items: newDirents
+  };
+};
+
+// TODO much shared logic with newFolder
+const newFile = state => {
+  return newDirent(state, CreateFile);
+};
+
+const newFolder = state => {
+  return newDirent(state, CreateFolder);
+};
+
+const isExpanded = item => {
+  return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
+};
+
+const getExpandedDirents = items => {
+  return items.filter(isExpanded);
+};
+
+const getPathDirentsMap = async allPaths => {
+  const pathToDirents = Object.create(null);
+  await Promise.all(allPaths.map(async path => {
+    try {
+      const dirents = await readDirWithFileTypes(path);
+      pathToDirents[path] = dirents;
+    } catch {
+      // ignore
+    }
+  }));
+  return pathToDirents;
+};
+
+const restoreDirentType = (rawDirentType, path, expandedPaths) => {
+  if (rawDirentType === Directory && expandedPaths.includes(path)) {
+    return DirectoryExpanded;
+  }
+  return rawDirentType;
+};
+
+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 = {
+      depth,
+      icon: '',
+      name: item.name,
+      path,
+      posInSet: i + 1,
+      selected: false,
+      setSize: items.length,
+      type: restoreDirentType(item.type, path, expandedPaths)
+    };
+    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;
+};
+
+const refresh = async state => {
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const expandedDirents = getExpandedDirents(items);
+  const expandedPaths = getPaths(expandedDirents);
+  const allPaths = [root, ...expandedPaths];
+  const pathToDirents = await getPathDirentsMap(allPaths);
+  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
+  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
+  let newFocusedIndex = focusedIndex;
+  if (focusedIndex >= newItems.length) {
+    newFocusedIndex = newItems.length - 1;
+  }
+  return {
+    ...state,
+    focusedIndex: newFocusedIndex,
+    items: newItems
+  };
+};
+
+const handleButtonClick = async (state, name) => {
+  switch (name) {
+    case CollapseAll$1:
+      return collapseAll(state);
+    case NewFile$1:
+      return newFile(state);
+    case NewFolder$1:
+      return newFolder(state);
+    case Refresh$1:
+      return refresh(state);
+    default:
+      return state;
+  }
+};
+
 class ExplorerError extends Error {
   constructor(message) {
     super(message);
@@ -3449,8 +3686,8 @@ const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) =>
   dirent.icon = '';
   return {
     ...state,
-    focusedIndex: index,
-    focused: keepFocus
+    focused: keepFocus,
+    focusedIndex: index
   };
 };
 
@@ -3473,16 +3710,16 @@ const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) =>
 
 const getClickFn = direntType => {
   switch (direntType) {
-    case File:
-    case SymLinkFile:
-      return handleClickFile;
     case Directory:
     case SymLinkFolder:
       return handleClickDirectory;
-    case DirectoryExpanding:
-      return handleClickDirectoryExpanding;
     case DirectoryExpanded:
       return handleClickDirectoryExpanded;
+    case DirectoryExpanding:
+      return handleClickDirectoryExpanding;
+    case File:
+    case SymLinkFile:
+      return handleClickFile;
     case Symlink:
       return handleClickSymLink;
     case CharacterDevice:
@@ -3497,15 +3734,15 @@ const getClickFn = direntType => {
 };
 
 const resetEditing = {
-  editingIndex: -1,
-  editingValue: '',
-  editingType: None$5,
-  editingIcon: '',
   editingErrorMessage: '',
+  editingIcon: '',
+  editingIndex: -1,
   editingSelection: {
-    start: 0,
-    end: 0
-  }
+    end: 0,
+    start: 0
+  },
+  editingType: None$5,
+  editingValue: ''
 };
 
 // TODO viewlet should only have create and refresh functions
@@ -3525,13 +3762,12 @@ const resetEditing = {
 
 const handleClick = async (state, index, keepFocus = false) => {
   const {
-    items,
-    minLineY
+    items
   } = state;
   if (index === -1) {
     return focusIndex(state, -1);
   }
-  const actualIndex = index + minLineY;
+  const actualIndex = index;
   const dirent = items[actualIndex];
   if (!dirent) {
     console.warn(`[explorer] dirent at index ${actualIndex} not found`, state);
@@ -3558,9 +3794,10 @@ const handleClick = async (state, index, keepFocus = false) => {
 
 const getIndexFromPosition = (state, eventX, eventY) => {
   const {
-    y,
     itemHeight,
-    items
+    items,
+    minLineY,
+    y
   } = state;
   const index = Math.floor((eventY - y) / itemHeight);
   if (index < 0) {
@@ -3569,7 +3806,7 @@ const getIndexFromPosition = (state, eventX, eventY) => {
   if (index >= items.length) {
     return -1;
   }
-  return index;
+  return index + minLineY;
 };
 
 /**
@@ -3633,7 +3870,7 @@ const handleClickAt = async (state, defaultPrevented, button, ctrlKey, shiftKey,
     return state;
   }
   const index = getIndexFromPosition(state, eventX, eventY);
-  if (index === -1) {
+  if (index === -1 || index >= state.items.length) {
     return {
       ...state,
       focused: true,
@@ -3682,8 +3919,8 @@ const handleContextMenuAtIndex = async (state, index, x, y) => {
   } = state;
   const newState = {
     ...state,
-    focusedIndex: index,
-    focused: false
+    focused: false,
+    focusedIndex: index
   };
   set(uid, state, newState);
   await show2(uid, Explorer, x, y, {
@@ -3695,10 +3932,10 @@ const handleContextMenuAtIndex = async (state, index, x, y) => {
 const handleContextMenuKeyboard = async state => {
   const {
     focusedIndex,
-    x,
-    y,
+    itemHeight,
     minLineY,
-    itemHeight
+    x,
+    y
   } = state;
   const menuX = x;
   const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
@@ -3755,8 +3992,8 @@ const handleCut = async state => {
   // TODO handle multiple files
   // TODO if not file is selected, what happens?
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   const dirents = getSelectedItems(items, focusedIndex);
   if (dirents.length === 0) {
@@ -3766,185 +4003,103 @@ const handleCut = async state => {
   await writeNativeFiles('cut', files);
   return {
     ...state,
-    pasteShouldMove: true,
-    cutItems: files
+    cutItems: files,
+    pasteShouldMove: true
   };
 };
 
-const handleDragLeave = state => {
-  return state;
-};
-
-const canBeDroppedInto = dirent => {
-  if (!dirent) {
-    return false;
-  }
-  switch (dirent.type) {
-    case Directory:
-    case DirectoryExpanded:
-    case DirectoryExpanding:
-      return true;
-    default:
-      return false;
-  }
-};
-
-const countInRange = (start, end) => {
-  const items = [];
-  for (let i = start; i <= end; i++) {
-    items.push(i);
-  }
-  return items;
-};
-
-const dropTargetFull = [-1];
-
-const getNewDropTargets = (state, index) => {
-  const {
-    items
-  } = state;
-  if (index === -1) {
-    return dropTargetFull;
-  }
-  const item = items[index];
-  if (!canBeDroppedInto(item)) {
-    const startIndex = getParentStartIndex(items, index);
-    const endIndex = getParentEndIndex(items, index);
-    return countInRange(startIndex, endIndex);
-  }
-  const newDropTargets = [index];
-  return newDropTargets;
-};
-
-const isEqual = (a, b) => {
-  if (a.length !== b.length) {
-    return false;
-  }
-  const {
-    length
-  } = a;
-  for (let i = 0; i < length; i++) {
-    if (a[i] !== b[i]) {
-      return false;
-    }
-  }
-  return true;
-};
-
-const handleDragOverIndex = (state, index) => {
-  const {
-    dropTargets
-  } = state;
-  const newDropTargets = getNewDropTargets(state, index);
-  if (isEqual(dropTargets, newDropTargets)) {
-    return state;
-  }
+const handleDragEnd = state => {
   return {
     ...state,
-    dropTargets: newDropTargets
+    dropTargets: []
   };
 };
 
-const handleDragOver = (state, x, y) => {
-  number(x);
-  number(y);
-  const index = getIndexFromPosition(state, x, y);
-  return handleDragOverIndex(state, index);
-};
-
-const handleDragStart = state => {
+const handleDragLeave = state => {
   return state;
 };
 
-const isExpanded = item => {
-  return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
-};
-
-const getExpandedDirents = items => {
-  return items.filter(isExpanded);
-};
-
-const getPathDirentsMap = async allPaths => {
-  const pathToDirents = Object.create(null);
-  await Promise.all(allPaths.map(async path => {
-    try {
-      const dirents = await readDirWithFileTypes(path);
-      pathToDirents[path] = dirents;
-    } catch {
-      // ignore
-    }
-  }));
-  return pathToDirents;
-};
-
-const restoreDirentType = (rawDirentType, path, expandedPaths) => {
-  if (rawDirentType === Directory && expandedPaths.includes(path)) {
-    return DirectoryExpanded;
-  }
-  return rawDirentType;
-};
-
-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);
+const canBeDroppedInto = dirent => {
+  if (!dirent) {
+    return false;
+  }
+  switch (dirent.type) {
+    case Directory:
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return true;
+    default:
+      return false;
   }
-  return protoMap;
 };
 
-const getProtoMap = (root, pathToDirents, expandedPaths) => {
-  return getProtoMapInternal(root, pathToDirents, expandedPaths, 1);
+const countInRange = (start, end) => {
+  const items = [];
+  for (let i = start; i <= end; i++) {
+    items.push(i);
+  }
+  return items;
 };
 
-const sortPathDirentsMap = map => {
-  const sortedMap = Object.create(null);
-  for (const [key, value] of Object.entries(map)) {
-    const sorted = sortExplorerItems(value);
-    sortedMap[key] = sorted;
+const dropTargetFull = [-1];
+
+const getNewDropTargets = (state, index) => {
+  const {
+    items
+  } = state;
+  if (index === -1) {
+    return dropTargetFull;
   }
-  return sortedMap;
+  const item = items[index];
+  if (!canBeDroppedInto(item)) {
+    const startIndex = getParentStartIndex(items, index);
+    const endIndex = getParentEndIndex(items, index);
+    return countInRange(startIndex, endIndex);
+  }
+  const newDropTargets = [index];
+  return newDropTargets;
 };
 
-const refresh = async state => {
+const isEqual = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
   const {
-    root,
-    focusedIndex,
-    items
+    length
+  } = a;
+  for (let i = 0; i < length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const handleDragOverIndex = (state, index) => {
+  const {
+    dropTargets
   } = state;
-  const expandedDirents = getExpandedDirents(items);
-  const expandedPaths = getPaths(expandedDirents);
-  const allPaths = [root, ...expandedPaths];
-  const pathToDirents = await getPathDirentsMap(allPaths);
-  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
-  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
-  let newFocusedIndex = focusedIndex;
-  if (focusedIndex >= newItems.length) {
-    newFocusedIndex = newItems.length - 1;
+  const newDropTargets = getNewDropTargets(state, index);
+  if (isEqual(dropTargets, newDropTargets)) {
+    return state;
   }
   return {
     ...state,
-    focusedIndex: newFocusedIndex,
-    items: newItems
+    dropTargets: newDropTargets
   };
 };
 
+const handleDragOver = (state, x, y) => {
+  number(x);
+  number(y);
+  const index = getIndexFromPosition(state, x, y);
+  return handleDragOverIndex(state, index);
+};
+
+const handleDragStart = state => {
+  return state;
+};
+
 const getChildHandles = async fileHandle => {
   // @ts-ignore
   const values = fileHandle.values();
@@ -3992,15 +4147,15 @@ const getFileOperations = (root, uploadTree) => {
       const fullPath = currentPath ? join2(currentPath, path) : path;
       if (typeof value === 'object') {
         operations.push({
-          type: CreateFolder$1,
-          path: join2(root, fullPath)
+          path: join2(root, fullPath),
+          type: CreateFolder$1
         });
         processTree(value, fullPath);
       } else if (typeof value === 'string') {
         operations.push({
-          type: CreateFile$1,
           path: join2(root, fullPath),
-          text: value
+          text: value,
+          type: CreateFile$1
         });
       }
     }
@@ -4032,9 +4187,9 @@ const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
 };
 const handleDrop$2 = async (state, fileHandles, files) => {
   const {
-    root,
+    items,
     pathSeparator,
-    items
+    root
   } = state;
   const handled = await uploadFileSystemHandles(root, pathSeparator, fileHandles);
   if (handled) {
@@ -4047,8 +4202,8 @@ const handleDrop$2 = async (state, fileHandles, files) => {
   const mergedDirents = await getMergedDirents$2(root, pathSeparator, items);
   return {
     ...state,
-    items: mergedDirents,
-    dropTargets: []
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 
@@ -4061,9 +4216,9 @@ const getFileOperationsElectron = async (root, paths, fileHandles, pathSeparator
     } = fileHandle;
     const path = paths[i];
     operations.push({
-      type: Copy$1,
+      from: path,
       path: join(pathSeparator, root, name),
-      from: path
+      type: Copy$1
     });
   }
   return operations;
@@ -4086,16 +4241,16 @@ const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
 };
 const handleDrop$1 = async (state, fileHandles, files, paths) => {
   const {
-    root,
+    items,
     pathSeparator,
-    items
+    root
   } = state;
   await copyFilesElectron(root, fileHandles, files, paths);
   const mergedDirents = await getMergedDirents$1(root, pathSeparator, items);
   return {
     ...state,
-    items: mergedDirents,
-    dropTargets: []
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 
@@ -4132,8 +4287,8 @@ const getMergedDirents = (items, index, dirent, childDirents) => {
 };
 const handleDropIntoFolder = async (state, dirent, index, fileHandles, files, paths) => {
   const {
-    pathSeparator,
-    items
+    items,
+    pathSeparator
   } = state;
   // @ts-ignore
   for (const file of fileHandles) {
@@ -4148,8 +4303,8 @@ const handleDropIntoFolder = async (state, dirent, index, fileHandles, files, pa
   // TODO update maxlineY
   return {
     ...state,
-    items: mergedDirents,
-    dropTargets: []
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 const handleDropIntoFile = (state, dirent, index, fileHandles, files, paths) => {
@@ -4248,8 +4403,8 @@ const handleFocus = async state => {
 const updateIcons = async state => {
   const {
     items,
-    minLineY,
-    maxLineY
+    maxLineY,
+    minLineY
   } = state;
   const visible = items.slice(minLineY, maxLineY);
   const {
@@ -4258,8 +4413,8 @@ const updateIcons = async state => {
   } = await getFileIcons(visible, Object.create(null));
   return {
     ...state,
-    icons,
-    fileIconCache: newFileIconCache
+    fileIconCache: newFileIconCache,
+    icons
   };
 };
 
@@ -4317,10 +4472,10 @@ const isAscii = key => {
 let timeout;
 const handleKeyDown = (state, key) => {
   const {
-    focusWord,
-    items,
     focusedIndex,
-    focusWordTimeout
+    focusWord,
+    focusWordTimeout,
+    items
   } = state;
   if (focusWord && key === '') {
     return cancelTypeAhead(state);
@@ -4347,8 +4502,8 @@ const handleKeyDown = (state, key) => {
   }
   return {
     ...state,
-    focusWord: newFocusWord,
-    focusedIndex: matchingIndex
+    focusedIndex: matchingIndex,
+    focusWord: newFocusWord
   };
 };
 
@@ -4358,40 +4513,40 @@ const scrollInto = (index, minLineY, maxLineY) => {
   const largerHalf = diff - smallerHalf;
   if (index < minLineY) {
     return {
-      newMinLineY: index - smallerHalf,
-      newMaxLineY: index + largerHalf
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
     };
   }
   if (index >= maxLineY) {
     return {
-      newMinLineY: index - smallerHalf,
-      newMaxLineY: index + largerHalf
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
     };
   }
   return {
-    newMinLineY: minLineY,
-    newMaxLineY: maxLineY
+    newMaxLineY: maxLineY,
+    newMinLineY: minLineY
   };
 };
 
 const adjustScrollAfterPaste = (state, focusedIndex) => {
   const {
-    minLineY,
+    itemHeight,
     maxLineY,
-    itemHeight
+    minLineY
   } = state;
   const {
-    newMinLineY,
-    newMaxLineY
+    newMaxLineY,
+    newMinLineY
   } = scrollInto(focusedIndex, minLineY, maxLineY);
   const newDeltaY = newMinLineY * itemHeight;
   return {
     ...state,
-    focusedIndex,
+    deltaY: newDeltaY,
     focused: true,
-    minLineY: newMinLineY,
+    focusedIndex,
     maxLineY: newMaxLineY,
-    deltaY: newDeltaY
+    minLineY: newMinLineY
   };
 };
 
@@ -4440,18 +4595,18 @@ const getFileOperationsCopy = (root, existingUris, files, focusedUri) => {
     const baseName = getBaseName('/', file);
     if (existingUris.includes(file)) {
       operations.push({
-        type: Rename$2,
         from: file,
-        path: join2(focusedUri, baseName)
+        path: join2(focusedUri, baseName),
+        type: Rename$2
       });
     } else {
       const uniqueName = generateUniqueName(baseName, existingUris, root);
       const newUri = join2(root, uniqueName);
       operations.push({
-        type: Copy$1,
         from: file,
         // TODO ensure file is uri
-        path: newUri
+        path: newUri,
+        type: Copy$1
       });
     }
   }
@@ -4467,9 +4622,9 @@ const handlePasteCopy = async (state, nativeFiles) => {
 
   // TODO use file operations and bulk edit
   const {
+    focusedIndex,
     items,
-    root,
-    focusedIndex
+    root
   } = state;
   const focusedUri = items[focusedIndex]?.path || root;
   const existingUris = items.map(item => item.path);
@@ -4514,9 +4669,9 @@ const getOperations = (toUri, files) => {
     const baseName = getBaseName('/', file);
     const newUri = join2(toUri, baseName);
     operations.push({
-      type: Rename$2,
       from: file,
-      path: newUri
+      path: newUri,
+      type: Rename$2
     });
   }
   return operations;
@@ -4529,10 +4684,10 @@ const getTargetUri = (root, items, index) => {
 };
 const handlePasteCut = async (state, nativeFiles) => {
   const {
-    root,
-    pathSeparator,
+    focusedIndex,
     items,
-    focusedIndex
+    pathSeparator,
+    root
   } = state;
   // TODO root is not necessrily target uri
   const targetUri = getTargetUri(root, items, focusedIndex);
@@ -4551,15 +4706,15 @@ const handlePasteCut = async (state, nativeFiles) => {
       const adjustedState = adjustScrollAfterPaste(latestState, pastedFileIndex);
       return {
         ...adjustedState,
-        pasteShouldMove: false,
-        cutItems: []
+        cutItems: [],
+        pasteShouldMove: false
       };
     }
   }
   return {
     ...latestState,
-    pasteShouldMove: false,
-    cutItems: []
+    cutItems: [],
+    pasteShouldMove: false
   };
 };
 
@@ -4600,9 +4755,9 @@ const handlePointerDown = (state, button, x, y) => {
   if (button === LeftClick && index === -1) {
     return {
       ...state,
+      focus: List,
       focused: true,
-      focusedIndex: -1,
-      focus: List
+      focusedIndex: -1
     };
   }
   return state;
@@ -4610,8 +4765,8 @@ const handlePointerDown = (state, button, x, y) => {
 
 const handleUpload = async (state, dirents) => {
   const {
-    root,
-    pathSeparator
+    pathSeparator,
+    root
   } = state;
   for (const dirent of dirents) {
     // TODO switch
@@ -4629,8 +4784,8 @@ const handleUpload = async (state, dirents) => {
 
 const setDeltaY = async (state, deltaY) => {
   const {
-    itemHeight,
     height,
+    itemHeight,
     items
   } = state;
   if (deltaY < 0) {
@@ -4711,10 +4866,10 @@ const getSettings = async () => {
   const sourceControlDecorationsRaw = await invoke$2('Preferences.get', 'explorer.sourceControlDecorations');
   const sourceControlDecorations = sourceControlDecorationsRaw === false ? false : true;
   return {
-    useChevrons,
     confirmDelete,
     confirmPaste,
-    sourceControlDecorations
+    sourceControlDecorations,
+    useChevrons
   };
 };
 
@@ -4744,22 +4899,22 @@ const getSavedChildDirents = (map, path, depth, excluded, pathSeparator) => {
     if ((child.type === Directory || child.type === SymLinkFolder) && childPath in map) {
       dirents.push({
         depth,
-        posInSet: i + 1,
-        setSize: visibleLength,
         icon: '',
         name,
         path: childPath,
+        posInSet: i + 1,
+        setSize: visibleLength,
         type: DirectoryExpanded
       });
       dirents.push(...getSavedChildDirents(map, childPath, depth + 1, excluded, pathSeparator));
     } else {
       dirents.push({
         depth,
-        posInSet: i + 1,
-        setSize: visibleLength,
         icon: '',
         name,
         path: childPath,
+        posInSet: i + 1,
+        setSize: visibleLength,
         type
       });
     }
@@ -4829,9 +4984,9 @@ const getSavedRoot = (savedState, workspacePath) => {
 };
 const loadContent = async (state, savedState) => {
   const {
-    useChevrons,
     confirmDelete,
-    sourceControlDecorations
+    sourceControlDecorations,
+    useChevrons
   } = await getSettings();
   const workspacePath = await getWorkspacePath();
   const root = getSavedRoot(savedState, workspacePath);
@@ -4907,168 +5062,46 @@ const createIconThemeWorkerRpc = async () => {
     const rpc = await TransferMessagePortRpcParent.create({
       commandMap: {},
       send: send$1
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create icon theme worker rpc`);
-  }
-};
-
-const initializeIconThemeWorker = async () => {
-  const rpc = await createIconThemeWorkerRpc();
-  set$4(rpc);
-};
-
-const send = port => {
-  // @ts-ignore
-  return sendMessagePortToSourceControlWorker(port);
-};
-const createSourceControlWorkerRpc = async () => {
-  try {
-    const rpc = await TransferMessagePortRpcParent.create({
-      commandMap: {},
-      send
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create source control worker rpc`);
-  }
-};
-
-const initializeSourceControlWorker = async () => {
-  try {
-    const rpc = await createSourceControlWorkerRpc();
-    // TODO
-    set$2(rpc);
-  } catch {
-    // ignore
-  }
-};
-
-const initialize = async () => {
-  await Promise.all([initializeFileSystemWorker(), initializeIconThemeWorker(), initializeSourceControlWorker()]);
-};
-
-const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntType) => {
-  // Get existing children or query them if they don't exist
-  let existingChildren = items.filter(item => item.depth === depth && item.path.startsWith(parentPath));
-  if (existingChildren.length === 0) {
-    const childDirents = await readDirWithFileTypes(parentPath);
-    existingChildren = childDirents.map((dirent, index) => ({
-      name: dirent.name,
-      type: dirent.type,
-      path: join2(parentPath, dirent.name),
-      depth,
-      selected: false,
-      posInSet: index + 1,
-      setSize: childDirents.length,
-      icon: ''
-    }));
-  }
-  const updatedChildren = existingChildren.map((child, index) => ({
-    ...child,
-    posInSet: index + 1,
-    setSize: existingChildren.length + 2
-  }));
-  const newDirent = {
-    name: '',
-    type: direntType,
-    path: parentPath,
-    depth,
-    selected: false,
-    posInSet: updatedChildren.length + 1,
-    setSize: existingChildren.length + 2,
-    icon: ''
-  };
-  const allChildDirents = [...updatedChildren, newDirent];
-  return allChildDirents;
-};
-
-const getNewDirentsForNewDirent = async (items, focusedIndex, type, root) => {
-  if (items.length === 0 || focusedIndex === -1) {
-    const newDirent = {
-      name: '',
-      type,
-      path: root,
-      depth: 0,
-      selected: false,
-      posInSet: 1,
-      setSize: 1,
-      icon: ''
-    };
-    return [...items, newDirent];
-  }
-  const focusedItem = items[focusedIndex];
-  if (!focusedItem) {
-    return items;
-  }
-  const parentPath = focusedItem.path;
-  const depth = focusedItem.depth + 1;
-  const updatedChildren = await getNewChildDirentsForNewDirent(items, depth, parentPath, type);
-
-  // Create new array with updated items
-  const parentIndex = focusedIndex;
-  const itemsBeforeParent = items.slice(0, parentIndex);
-  const itemsAfterChildren = items.slice(parentIndex + updatedChildren.length);
-  const updatedParent = {
-    ...items[parentIndex],
-    setSize: (items[parentIndex]?.setSize || 0) + 1
-  };
-  return [...itemsBeforeParent, updatedParent, ...updatedChildren, ...itemsAfterChildren];
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create icon theme worker rpc`);
+  }
 };
 
-const getNewDirentType = editingType => {
-  switch (editingType) {
-    case CreateFile:
-      return EditingFile;
-    case CreateFolder:
-      return EditingFolder;
-    default:
-      return File;
-  }
+const initializeIconThemeWorker = async () => {
+  const rpc = await createIconThemeWorkerRpc();
+  set$4(rpc);
 };
 
-const isFolder = direntType => {
-  return direntType === Directory || direntType === DirectoryExpanded || direntType === SymLinkFolder;
+const send = port => {
+  // @ts-ignore
+  return sendMessagePortToSourceControlWorker(port);
 };
-const getFittingIndex = (dirents, startIndex) => {
-  for (let i = startIndex; i >= 0; i--) {
-    const dirent = dirents[i];
-    if (isFolder(dirent.type)) {
-      return i;
-    }
+const createSourceControlWorkerRpc = async () => {
+  try {
+    const rpc = await TransferMessagePortRpcParent.create({
+      commandMap: {},
+      send
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create source control worker rpc`);
   }
-  return -1;
-};
-const newDirent = async (state, editingType) => {
-  // TODO do it like vscode, select position between folders and files
-  const {
-    root,
-    focusedIndex,
-    items
-  } = state;
-  const index = getFittingIndex(items, focusedIndex);
-  const direntType = getNewDirentType(editingType);
-  const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
-  const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
-  return {
-    ...state,
-    editingIndex,
-    editingType,
-    editingValue: '',
-    focus: Input$1,
-    focusedIndex: editingIndex,
-    items: newDirents
-  };
 };
 
-// TODO much shared logic with newFolder
-const newFile = state => {
-  return newDirent(state, CreateFile);
+const initializeSourceControlWorker = async () => {
+  try {
+    const rpc = await createSourceControlWorkerRpc();
+    // TODO
+    set$2(rpc);
+  } catch {
+    // ignore
+  }
 };
 
-const newFolder = state => {
-  return newDirent(state, CreateFolder);
+const initialize = async () => {
+  await Promise.all([initializeFileSystemWorker(), initializeIconThemeWorker(), initializeSourceControlWorker()]);
 };
 
 const getContainingFolder = (root, dirents, focusedIndex, pathSeparator) => {
@@ -5089,8 +5122,9 @@ const openNativeFolder = async path => {
 const openContainingFolder = async state => {
   const {
     focusedIndex,
-    root,
-    items} = state;
+    items,
+    root
+  } = state;
   const path = getContainingFolder(root, items, focusedIndex);
   await openNativeFolder(path);
   return state;
@@ -5110,9 +5144,9 @@ const showErrorAlert = async errorMessage => {
 
 const removeDirent = async state => {
   const {
-    items,
+    confirmDelete: confirmDelete$1,
     focusedIndex,
-    confirmDelete: confirmDelete$1
+    items
   } = state;
   const selectedItems = getSelectedItems(items, focusedIndex);
   if (selectedItems.length === 0) {
@@ -5127,8 +5161,8 @@ const removeDirent = async state => {
   }
   const fileOperations = toRemove.map(item => {
     return {
-      type: Remove,
-      path: item
+      path: item,
+      type: Remove
     };
   });
   // TODO use bulk edit and explorer refresh
@@ -5140,8 +5174,8 @@ const removeDirent = async state => {
   const newState = await refresh(state);
   return {
     ...newState,
-    focused: true,
-    focus: List
+    focus: List,
+    focused: true
   };
 };
 
@@ -5168,13 +5202,13 @@ const getRenameSelectionRange = name => {
   const dotIndex = name.lastIndexOf('.');
   if (dotIndex === -1) {
     return {
-      start: 0,
-      end: name.length
+      end: name.length,
+      start: 0
     };
   }
   return {
-    start: 0,
-    end: dotIndex
+    end: dotIndex,
+    start: 0
   };
 };
 
@@ -5184,8 +5218,8 @@ const Script = 2;
 const renameDirent = async state => {
   const {
     focusedIndex,
-    items,
     icons,
+    items,
     minLineY
   } = state;
   if (items.length === 0) {
@@ -5194,20 +5228,20 @@ const renameDirent = async state => {
   const item = items[focusedIndex];
   const newItems = getNewDirentsForRename(items, focusedIndex);
   const {
-    start,
-    end
+    end,
+    start
   } = getRenameSelectionRange(item.name);
   return {
     ...state,
-    items: newItems,
+    editingIcon: icons[focusedIndex - minLineY],
     editingIndex: focusedIndex,
+    editingSelectionEnd: end,
+    editingSelectionStart: start,
     editingType: Rename$1,
     editingValue: item.name,
-    editingIcon: icons[focusedIndex - minLineY],
-    editingSelectionStart: start,
-    editingSelectionEnd: end,
     focus: Input$1,
-    inputSource: Script
+    inputSource: Script,
+    items: newItems
   };
 };
 
@@ -5232,9 +5266,9 @@ const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, inde
   const left = depth * indent + fileIconWidth + padding;
   const errorMessageWidth = width - left;
   return {
-    top,
+    errorMessageWidth,
     left,
-    errorMessageWidth
+    top
   };
 };
 
@@ -5250,14 +5284,14 @@ const getUnique = items => {
 
 const renderCss = (oldState, newState) => {
   const {
-    width,
+    focusedIndex,
+    itemHeight,
     items,
+    minLineY,
     scrollBarHeight,
     uid,
     visibleExplorerItems,
-    itemHeight,
-    focusedIndex,
-    minLineY
+    width
   } = newState;
   const indents = visibleExplorerItems.map(item => item.indent);
   const uniqueIndents = getUnique(indents);
@@ -5268,9 +5302,9 @@ const renderCss = (oldState, newState) => {
   const chevronSpace = 22;
   const depth = items[focusedIndex]?.depth || 0;
   const {
-    top,
+    errorMessageWidth,
     left,
-    errorMessageWidth
+    top
   } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace, width);
   const css = getCss(scrollBarHeight, uniqueIndents, left, top, errorMessageWidth);
   return [SetCss, uid, css];
@@ -5292,11 +5326,11 @@ const toUri = path => {
 const getDragData = urls => {
   const data = urls.map(toUri).join('\n');
   const dragData = [{
-    type: 'text/uri-list',
-    data
+    data,
+    type: 'text/uri-list'
   }, {
-    type: 'text/plain',
-    data
+    data,
+    type: 'text/plain'
   }];
   // @ts-ignore
   dragData.label = getDragLabel(urls);
@@ -5305,8 +5339,8 @@ const getDragData = urls => {
 
 const renderDragData = (oldState, newState) => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = newState;
   const selected = items.filter((item, index) => item.selected || index === focusedIndex);
   const urls = selected.map(item => item.path);
@@ -5314,13 +5348,10 @@ const renderDragData = (oldState, newState) => {
   return ['Viewlet.setDragData', newState.uid, dragData];
 };
 
-const ExplorerInput = 'ExplorerInput';
-const OpenFolder = 'OpenFolder';
-
 const renderEditingSelection = (oldState, newState) => {
   const {
-    editingSelectionStart,
     editingSelectionEnd,
+    editingSelectionStart,
     uid
   } = newState;
   return ['Viewlet.setSelectionByName', uid, ExplorerInput, editingSelectionStart, editingSelectionEnd];
@@ -5368,17 +5399,20 @@ const getErrorMessageDom = errorMessage => {
     return [];
   }
   return [{
-    type: Div,
+    childCount: 1,
     className: mergeClassNames(ExplorerErrorMessage),
-    childCount: 1
+    type: Div
   }, text(errorMessage)];
 };
 
+const HandleButtonClick = 18;
 const HandleClick = 1;
 const HandleClickOpenFolder = 2;
 const HandleContextMenu = 3;
+const HandleDragEnd = 19;
 const HandleDragLeave = 4;
 const HandleDragOver = 5;
+const HandleDragStart = 17;
 const HandleDrop = 6;
 const HandleEditingInput = 7;
 const HandleInputBlur = 8;
@@ -5387,41 +5421,40 @@ const HandleListBlur = 11;
 const HandleListFocus = 12;
 const HandlePointerDown = 14;
 const HandleWheel = 15;
-const HandleDragStart = 17;
 
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
-    type: Div,
+    childCount: 1,
     className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
-    childCount: 1
+    type: Div
   }, {
-    type: Div,
+    childCount: 2,
     className: Welcome,
-    childCount: 2
+    type: Div
   }, {
-    type: P,
+    childCount: 1,
     className: WelcomeMessage,
-    childCount: 1
+    type: P
   }, text(youHaveNotYetOpenedAFolder()), {
-    type: Button$1,
+    childCount: 1,
     className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
     name: OpenFolder,
-    childCount: 1,
-    onClick: HandleClickOpenFolder
+    onClick: HandleClickOpenFolder,
+    type: Button$1
   }, text(openFolder$1())];
 };
 
 const chevronDownVirtualDom = {
-  type: Div,
+  childCount: 0,
   className: mergeClassNames(Chevron, MaskIconChevronDown),
-  childCount: 0
+  type: Div
 };
 
 const chevronRightVirtualDom = {
-  type: Div,
+  childCount: 0,
   className: mergeClassNames(Chevron, MaskIconChevronRight),
-  childCount: 0
+  type: Div
 };
 
 const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
@@ -5431,11 +5464,11 @@ const getChevronVirtualDom = chevronType => {
 
 const getFileIconVirtualDom = icon => {
   return {
-    type: Img,
+    childCount: 0,
     className: FileIcon,
-    src: icon,
     role: None,
-    childCount: 0
+    src: icon,
+    type: Img
   };
 };
 
@@ -5452,11 +5485,10 @@ const getInputDom = (isEditing, hasEditingError) => {
   }
   const ariaLabel = typeAFileName();
   return [{
-    type: Input,
     ariaLabel: ariaLabel,
     autocapitalize: 'off',
-    autocorrect: 'off',
     autocomplete: 'off',
+    autocorrect: 'off',
     childCount: 0,
     className: getInputClassName(hasEditingError),
     id: 'ExplorerInput',
@@ -5464,14 +5496,15 @@ const getInputDom = (isEditing, hasEditingError) => {
     onBlur: HandleInputBlur,
     onClick: HandleInputClick,
     onInput: HandleEditingInput,
-    spellcheck: 'false'
+    spellcheck: 'false',
+    type: Input
   }];
 };
 
 const label = {
-  type: Div,
+  childCount: 1,
   className: Label,
-  childCount: 1
+  type: Div
 };
 const getLabelDom = (isEditing, name, isDimmed) => {
   if (isEditing) {
@@ -5479,9 +5512,9 @@ const getLabelDom = (isEditing, name, isDimmed) => {
   }
   if (isDimmed) {
     return [{
-      type: Div,
+      childCount: 1,
       className: mergeClassNames(Label, LabelCut),
-      childCount: 1
+      type: Div
     }, text(name)];
   }
   return [label, text(name)];
@@ -5496,31 +5529,31 @@ const getExplorerItemVirtualDom = item => {
     hasEditingError,
     icon,
     id,
+    index,
+    isCut,
     isEditing,
+    isIgnored,
     name,
     path,
-    setSize,
     posInSet,
-    isCut,
-    isIgnored,
-    index
+    setSize
   } = item;
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
-    type: Div,
-    role: TreeItem,
-    className,
-    draggable: true,
-    title: path,
+    ariaDescription: '',
+    ariaExpanded,
+    ariaLabel: name,
+    ariaLevel: depth,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
-    ariaLevel: depth,
     childCount: 2 + chevronDom.length,
-    ariaLabel: name,
-    ariaExpanded,
-    ariaDescription: '',
+    className,
+    'data-index': index,
+    draggable: true,
     id,
-    'data-index': index
+    role: TreeItem,
+    title: path,
+    type: Div
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputDom(isEditing, hasEditingError), ...getLabelDom(isEditing, name, isCut || isIgnored)];
 };
 
@@ -5538,23 +5571,24 @@ const getClassName = (focused, focusedIndex, dropTarget) => {
 };
 const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets) => {
   const dom = [{
-    type: Div,
-    className: getClassName(focused, focusedIndex, dropTargets),
-    tabIndex: 0,
-    role: Tree,
+    ariaActiveDescendant: getActiveDescendant(focusedIndex),
     ariaLabel: filesExplorer(),
     childCount: visibleItems.length,
-    ariaActiveDescendant: getActiveDescendant(focusedIndex),
+    className: getClassName(focused, focusedIndex, dropTargets),
     onBlur: HandleListBlur,
     onClick: HandleClick,
     onContextMenu: HandleContextMenu,
+    onDragEnd: HandleDragEnd,
     onDragLeave: HandleDragLeave,
     onDragOver: HandleDragOver,
     onDragStart: HandleDragStart,
     onDrop: HandleDrop,
     onFocus: HandleListFocus,
     onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel
+    onWheel: HandleWheel,
+    role: Tree,
+    tabIndex: 0,
+    type: Div
     // onKeyDown: DomEventListenerFunctions.HandleListKeyDown,
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
@@ -5580,15 +5614,15 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   const heightString = px(scrollBarHeight);
   const translateString = position(0, scrollBarTop);
   return [{
-    type: Div,
+    childCount: 1,
     className: mergeClassNames(ScrollBar, ScrollBarSmall),
-    childCount: 1
+    type: Div
   }, {
-    type: Div,
-    className: ScrollBarThumb,
     childCount: 0,
+    className: ScrollBarThumb,
     height: heightString,
-    translate: translateString
+    translate: translateString,
+    type: Div
   }];
 };
 
@@ -5612,10 +5646,10 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   const errorDom = getErrorMessageDom(errorMessage);
   const childCount = getChildCount(scrollBarDom.length, errorDom.length);
   const parentNode = {
-    type: Div,
     childCount,
     className: mergeClassNames(Viewlet, Explorer$1),
-    role: None
+    role: None,
+    type: Div
   };
   const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets), ...scrollBarDom, ...errorDom];
   return dom;
@@ -5653,20 +5687,20 @@ const renderValue = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
-    case RenderItems:
-      return renderItems;
+    case RenderCss:
+      return renderCss;
+    case RenderDragData:
+      return renderDragData;
     case RenderFocus:
       return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
-    case RenderValue:
-      return renderValue;
+    case RenderItems:
+      return renderItems;
     case RenderSelection:
       return renderEditingSelection;
-    case RenderDragData:
-      return renderDragData;
-    case RenderCss:
-      return renderCss;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -5686,8 +5720,8 @@ const applyRender = (oldState, newState, diffResult) => {
 
 const render2 = (uid, diffResult) => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
@@ -5706,49 +5740,53 @@ const getActions = root => {
     return [];
   }
   return [{
-    type: Button,
-    id: newFile$1(),
+    command: 'newFile',
     icon: NewFile,
-    command: 'newFile'
+    id: newFile$1(),
+    name: NewFile$1,
+    type: Button
   }, {
-    type: Button,
-    id: newFolder$1(),
+    command: 'newFolder',
     icon: NewFolder,
-    command: 'newFolder'
+    id: newFolder$1(),
+    name: NewFolder$1,
+    type: Button
   }, {
-    type: Button,
-    id: refresh$1(),
+    command: 'refresh',
     icon: Refresh,
-    command: 'refresh'
+    id: refresh$1(),
+    name: Refresh$1,
+    type: Button
   }, {
-    type: Button,
-    id: collapseAll$1(),
+    command: 'collapseAll',
     icon: CollapseAll,
-    command: 'collapseAll'
+    id: collapseAll$1(),
+    name: CollapseAll$1,
+    type: Button
   }];
 };
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
-    type,
+    childCount: 0,
     className: `MaskIcon MaskIcon${icon}`,
     role: None,
-    childCount: 0
+    type
   };
 };
 
 const getActionButtonVirtualDom = action => {
   const {
-    id,
     icon,
-    command
+    id,
+    name
   } = action;
   return [{
-    type: Button$1,
+    childCount: 1,
     className: IconButton,
+    name,
     title: id,
-    'data-command': command,
-    childCount: 1
+    type: Button$1
   }, getIconVirtualDom(icon || '')];
 };
 
@@ -5763,10 +5801,11 @@ const getActionVirtualDom = action => {
 
 const getActionsVirtualDom = actions => {
   return [{
-    type: Div,
+    childCount: actions.length,
     className: Actions,
+    onClick: HandleButtonClick,
     role: ToolBar,
-    childCount: actions.length
+    type: Div
   }, ...actions.flatMap(getActionVirtualDom)];
 };
 
@@ -5827,10 +5866,16 @@ const renderEventListeners = () => {
     name: HandleDragLeave,
     params: ['handleDragLeave']
   }, {
-    name: HandleDragStart,
-    params: ['handleDragStart'],
+    name: HandleButtonClick,
+    params: ['handleButtonClick', TargetName]
+  }, {
+    name: HandleDragEnd,
+    params: ['handleDragEnd']
+  }, {
     // @ts-ignore
-    dragEffect: 'copyMove'
+    dragEffect: 'copyMove',
+    name: HandleDragStart,
+    params: ['handleDragStart']
   }];
 };
 
@@ -5862,18 +5907,18 @@ const getSavedWorkspacePath = savedState => {
 const restoreState = savedState => {
   if (!savedState) {
     return {
-      root: '',
+      deltaY: 0,
       minLineY: 0,
-      deltaY: 0
+      root: ''
     };
   }
   const root = getSavedWorkspacePath(savedState);
   const minLineY = getSavedMinLineY(savedState);
   const deltaY = getSavedDeltaY(savedState);
   return {
-    root,
+    deltaY,
     minLineY,
-    deltaY
+    root
   };
 };
 
@@ -5906,11 +5951,11 @@ const mergeVisibleWithHiddenItems = (visibleItems, hiddenItems) => {
 // TODO maybe just insert items into explorer and refresh whole explorer
 const revealItemHidden = async (state, uri) => {
   const {
-    root,
-    pathSeparator,
     items,
+    maxLineY,
     minLineY,
-    maxLineY
+    pathSeparator,
+    root
   } = state;
   const pathParts = getPathParts(root, uri, pathSeparator);
   if (pathParts.length === 0) {
@@ -5926,34 +5971,34 @@ const revealItemHidden = async (state, uri) => {
     throw new Error(`File not found in explorer ${uri}`);
   }
   const {
-    newMinLineY,
-    newMaxLineY
+    newMaxLineY,
+    newMinLineY
   } = scrollInto(index, minLineY, maxLineY);
   return {
     ...state,
-    items: mergedDirents,
     focused: true,
     focusedIndex: index,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY
+    items: mergedDirents,
+    maxLineY: newMaxLineY,
+    minLineY: newMinLineY
   };
 };
 
 const revealItemVisible = (state, index) => {
   const {
-    minLineY,
-    maxLineY
+    maxLineY,
+    minLineY
   } = state;
   const {
-    newMinLineY,
-    newMaxLineY
+    newMaxLineY,
+    newMinLineY
   } = scrollInto(index, minLineY, maxLineY);
   return {
     ...state,
     focused: true,
     focusedIndex: index,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY
+    maxLineY: newMaxLineY,
+    minLineY: newMinLineY
   };
 };
 
@@ -5976,19 +6021,19 @@ const isExpandedDirectory = dirent => {
 
 const saveState = state => {
   const {
-    items,
-    root,
     deltaY,
+    items,
+    maxLineY,
     minLineY,
-    maxLineY
+    root
   } = state;
   const expandedPaths = items.filter(isExpandedDirectory).map(getPath);
   return {
+    deltaY,
     expandedPaths,
-    root,
-    minLineY,
     maxLineY,
-    deltaY
+    minLineY,
+    root
   };
 };
 
@@ -6017,8 +6062,8 @@ const getLastSelectedIndex = items => {
 };
 const selectDown = state => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   const lastSelectedIndex = getLastSelectedIndex(items);
   const targetIndex = lastSelectedIndex === -1 ? focusedIndex : lastSelectedIndex;
@@ -6031,8 +6076,8 @@ const selectDown = state => {
   }));
   return {
     ...state,
-    items: newItems,
-    focusedIndex: targetIndex + 1
+    focusedIndex: targetIndex + 1,
+    items: newItems
   };
 };
 
@@ -6052,8 +6097,8 @@ const setSelectedIndices = (state, indices) => {
 
 const selectUp = state => {
   const {
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   const firstSelectedIndex = items.findIndex(item => item.selected);
   const targetIndex = firstSelectedIndex === -1 ? focusedIndex : firstSelectedIndex;
@@ -6098,11 +6143,10 @@ const getEditingIcon = async (editingType, value, direntType) => {
 
 const updateEditingValue = async (state, value, inputSource = User) => {
   const {
-    editingType,
-    items,
     editingIndex,
-    focusedIndex
-  } = state;
+    editingType,
+    focusedIndex,
+    items} = state;
   const editingIcon = await getEditingIcon(editingType, value, items[editingIndex]?.type);
 
   // Get sibling file names for validation during file/folder creation
@@ -6113,9 +6157,9 @@ const updateEditingValue = async (state, value, inputSource = User) => {
   const editingErrorMessage = validateFileName2(value, siblingFileNames);
   return {
     ...state,
-    editingValue: value,
+    editingErrorMessage,
     editingIcon,
-    editingErrorMessage
+    editingValue: value
   };
 };
 
@@ -6126,6 +6170,10 @@ const commandMap = {
   'Explorer.collapseAll': wrapListItemCommand(collapseAll),
   'Explorer.copyPath': wrapListItemCommand(copyPath),
   'Explorer.copyRelativePath': wrapListItemCommand(copyRelativePath),
+  'Explorer.create': create,
+  // not wrapped
+  'Explorer.create2': create2,
+  'Explorer.diff2': diff2,
   'Explorer.expandAll': wrapListItemCommand(expandAll),
   'Explorer.expandRecursively': wrapListItemCommand(expandRecursively),
   'Explorer.focus': wrapListItemCommand(focus),
@@ -6136,11 +6184,14 @@ const commandMap = {
   'Explorer.focusNone': wrapListItemCommand(focusNone),
   'Explorer.focusPrevious': wrapListItemCommand(focusPrevious),
   'Explorer.getCommandIds': getCommandIds,
+  'Explorer.getKeyBindings': getKeyBindings,
+  'Explorer.getMenuEntries': getMenuEntries,
   'Explorer.getMenuEntries2': wrapGetter(getMenuEntries2),
   'Explorer.getMouseActions': getMouseActions,
   'Explorer.handleArrowLeft': wrapListItemCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapListItemCommand(handleArrowRight),
   'Explorer.handleBlur': wrapListItemCommand(handleBlur),
+  'Explorer.handleButtonClick': wrapListItemCommand(handleButtonClick),
   'Explorer.handleClick': wrapListItemCommand(handleClick),
   'Explorer.handleClickAt': wrapListItemCommand(handleClickAt),
   'Explorer.handleClickCurrent': wrapListItemCommand(handleClickCurrent),
@@ -6150,6 +6201,7 @@ const commandMap = {
   'Explorer.handleContextMenuKeyboard': wrapListItemCommand(handleContextMenuKeyboard),
   'Explorer.handleCopy': wrapListItemCommand(handleCopy),
   'Explorer.handleCut': wrapListItemCommand(handleCut),
+  'Explorer.handleDragEnd': wrapListItemCommand(handleDragEnd),
   'Explorer.handleDragLeave': wrapListItemCommand(handleDragLeave),
   'Explorer.handleDragOver': wrapListItemCommand(handleDragOver),
   'Explorer.handleDragOverIndex': wrapListItemCommand(handleDragOverIndex),
@@ -6168,6 +6220,7 @@ const commandMap = {
   'Explorer.handleWheel': wrapListItemCommand(handleWheel),
   'Explorer.handleWorkspaceChange': wrapListItemCommand(handleWorkspaceChange),
   'Explorer.handleWorkspaceRefresh': wrapListItemCommand(handleWorkspaceRefresh),
+  'Explorer.initialize': initialize,
   'Explorer.loadContent': wrapListItemCommand(loadContent),
   'Explorer.newFile': wrapListItemCommand(newFile),
   'Explorer.newFolder': wrapListItemCommand(newFolder),
@@ -6175,29 +6228,22 @@ const commandMap = {
   'Explorer.refresh': wrapListItemCommand(refresh),
   'Explorer.removeDirent': wrapListItemCommand(removeDirent),
   'Explorer.renameDirent': wrapListItemCommand(renameDirent),
+  'Explorer.render2': render2,
+  'Explorer.renderActions2': renderActions,
+  'Explorer.renderEventListeners': renderEventListeners,
   'Explorer.restoreState': restoreState,
   'Explorer.revealItem': wrapListItemCommand(revealItem),
+  'Explorer.saveState': wrapGetter(saveState),
   'Explorer.selectAll': wrapListItemCommand(selectAll),
   'Explorer.selectDown': wrapListItemCommand(selectDown),
   'Explorer.selectIndices': wrapListItemCommand(setSelectedIndices),
   'Explorer.selectUp': wrapListItemCommand(selectUp),
   'Explorer.setDeltaY': wrapListItemCommand(setDeltaY),
   'Explorer.setSelectedIndices': wrapListItemCommand(setSelectedIndices),
+  'Explorer.terminate': terminate,
   'Explorer.toggleIndividualSelection': wrapListItemCommand(toggleIndividualSelection),
   'Explorer.updateEditingValue': wrapListItemCommand(updateEditingValue),
-  'Explorer.updateIcons': wrapListItemCommand(updateIcons),
-  // not wrapped
-  'Explorer.create2': create2,
-  'Explorer.diff2': diff2,
-  'Explorer.getKeyBindings': getKeyBindings,
-  'Explorer.getMenuEntries': getMenuEntries,
-  'Explorer.render2': render2,
-  'Explorer.renderActions2': renderActions,
-  'Explorer.renderEventListeners': renderEventListeners,
-  'Explorer.saveState': wrapGetter(saveState),
-  'Explorer.terminate': terminate,
-  'Explorer.initialize': initialize,
-  'Explorer.create': create
+  'Explorer.updateIcons': wrapListItemCommand(updateIcons)
 };
 
 const listen = async () => {