@lvce-editor/explorer-view 6.1.0 → 6.2.0

package/dist/explorerViewWorkerMain.js

@@ -3500,1023 +3500,1075 @@ const handleDragStart = state => {
   return state;
 };
 
-const getChildHandles = async fileHandle => {
-  // @ts-ignore
-  const values = fileHandle.values();
-  const children = await fromAsync(values);
-  return children;
-};
-
-const getFileHandleText = async fileHandle => {
-  const file = await fileHandle.getFile();
-  const text = await file.text();
-  return text;
-};
-
 const isDirectoryHandle = fileHandle => {
   return fileHandle.kind === 'directory';
 };
 
-const isFileHandle = fileHandle => {
-  return fileHandle.kind === 'file';
+const isValid = decoration => {
+  return decoration && typeof decoration.decoration === 'string' && typeof decoration.uri === 'string';
 };
-
-const createUploadTree = async (root, fileHandles) => {
-  const uploadTree = Object.create(null);
-  const normalized = fileHandles.filter(Boolean);
-  for (const fileHandle of normalized) {
-    const {
-      name
-    } = fileHandle;
-    if (isDirectoryHandle(fileHandle)) {
-      const children = await getChildHandles(fileHandle);
-      const childTree = await createUploadTree(name, children);
-      uploadTree[name] = childTree;
-    } else if (isFileHandle(fileHandle)) {
-      // TODO maybe save blob and use filesystem.writeblob
-      const text = await getFileHandleText(fileHandle);
-      uploadTree[name] = text;
-    }
+const normalizeDecorations = decorations => {
+  if (!decorations || !Array.isArray(decorations)) {
+    return [];
   }
-  return uploadTree;
+  return decorations.filter(isValid);
 };
 
-const getFileOperations = (root, uploadTree) => {
-  const operations = [];
-  const processTree = (tree, currentPath) => {
-    for (const [path, value] of Object.entries(tree)) {
-      const fullPath = currentPath ? join2(currentPath, path) : path;
-      if (typeof value === 'object') {
-        operations.push({
-          path: join2(root, fullPath),
-          type: CreateFolder$1
-        });
-        processTree(value, fullPath);
-      } else if (typeof value === 'string') {
-        operations.push({
-          path: join2(root, fullPath),
-          text: value,
-          type: CreateFile$1
-        });
-      }
+const getFileDecorations = async (scheme, root, maybeUris, decorationsEnabled, assetDir, platform) => {
+  try {
+    if (!decorationsEnabled) {
+      return [];
     }
-  };
-  processTree(uploadTree, '');
-  return operations;
+    const providerIds = await invoke$1('SourceControl.getEnabledProviderIds', scheme, root, assetDir, platform);
+    if (providerIds.length === 0) {
+      return [];
+    }
+    // TODO how to handle multiple providers?
+    const providerId = providerIds.at(-1);
+    const uris = ensureUris(maybeUris);
+    const decorations = await invoke$1('SourceControl.getFileDecorations', providerId, uris, assetDir, platform);
+    const normalized = normalizeDecorations(decorations);
+    return normalized;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
 };
 
-const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
-  if (fileSystemHandles.length === 0) {
-    return true;
+const RE_PROTOCOL = /^[a-z+]:\/\//;
+const getScheme = uri => {
+  const match = uri.match(RE_PROTOCOL);
+  if (!match) {
+    return '';
   }
-  const uploadTree = await createUploadTree(root, fileSystemHandles);
-  const fileOperations = getFileOperations(root, uploadTree);
-  await applyFileOperations(fileOperations);
-
-  // TODO
-  // 1. in electron, use webutils.getPathForFile to see if a path is available
-  // 2. else, walk all files and folders recursively and upload all of them (if there are many, show a progress bar)
-
-  // TODO send file system operations to renderer worker
-  return true;
+  return match[0];
 };
 
-const mergeDirents$1 = (oldDirents, newDirents) => {
-  return newDirents;
-};
-const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
-  const childDirents = await getChildDirents(pathSeparator, root, 0);
-  const mergedDirents = mergeDirents$1(dirents, childDirents);
-  return mergedDirents;
-};
-const handleDrop$2 = async (state, fileHandles, files) => {
-  const {
-    items,
-    pathSeparator,
-    root
-  } = state;
-  const handled = await uploadFileSystemHandles(root, pathSeparator, fileHandles);
-  if (handled) {
-    const updated = await refresh(state);
-    return {
-      ...updated,
-      dropTargets: []
-    };
-  }
-  const mergedDirents = await getMergedDirents$2(root, pathSeparator, items);
+const getSettings = async () => {
+  // TODO don't return false always
+  // TODO get all settings at once
+  const useChevronsRaw = await invoke$2('Preferences.get', 'explorer.useChevrons');
+  const useChevrons = useChevronsRaw === false ? false : true;
+  const confirmDeleteRaw = await invoke$2('Preferences.get', 'explorer.confirmdelete');
+  const confirmDelete = confirmDeleteRaw === false ? false : false;
+  const confirmPasteRaw = await invoke$2('Preferences.get', 'explorer.confirmpaste');
+  const confirmPaste = confirmPasteRaw === false ? false : false;
+  const sourceControlDecorationsRaw = await invoke$2('Preferences.get', 'explorer.sourceControlDecorations');
+  const sourceControlDecorations = sourceControlDecorationsRaw === false ? false : true;
   return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
+    confirmDelete,
+    confirmPaste,
+    sourceControlDecorations,
+    useChevrons
   };
 };
 
-const getFileOperationsElectron = async (root, paths, fileHandles, pathSeparator) => {
-  const operations = [];
-  for (let i = 0; i < paths.length; i++) {
-    const fileHandle = fileHandles[i];
+const getWorkspacePath = () => {
+  return invoke$2('Workspace.getPath');
+};
+
+const getSavedChildDirents = (map, path, depth, excluded, pathSeparator) => {
+  let children = map[path];
+  if (!children) {
+    return [];
+  }
+  const dirents = [];
+  children = sortExplorerItems(children);
+  const visible = [];
+  const displayRoot = path.endsWith(pathSeparator) ? path : path + pathSeparator;
+  for (const child of children) {
+    if (excluded.includes(child.name)) {
+      continue;
+    }
+    visible.push(child);
+  }
+  const visibleLength = visible.length;
+  for (let i = 0; i < visibleLength; i++) {
+    const child = visible[i];
     const {
-      name
-    } = fileHandle;
-    const path = paths[i];
-    operations.push({
-      from: path,
-      path: join(pathSeparator, root, name),
-      type: Copy$1
-    });
+      name,
+      type
+    } = child;
+    const childPath = displayRoot + name;
+    if ((child.type === Directory || child.type === SymLinkFolder) && childPath in map) {
+      dirents.push({
+        depth,
+        icon: '',
+        name,
+        path: childPath,
+        posInSet: i + 1,
+        setSize: visibleLength,
+        type: DirectoryExpanded
+      });
+      dirents.push(...getSavedChildDirents(map, childPath, depth + 1, excluded, pathSeparator));
+    } else {
+      dirents.push({
+        depth,
+        icon: '',
+        name,
+        path: childPath,
+        posInSet: i + 1,
+        setSize: visibleLength,
+        type
+      });
+    }
   }
-  return operations;
+  return dirents;
 };
 
-// TODO copy files in parallel
-const copyFilesElectron = async (root, fileHandles, files, paths) => {
-  const pathSeparator = await getPathSeparator$1(root);
-  const operations = await getFileOperationsElectron(root, paths, fileHandles, pathSeparator);
-  await applyFileOperations(operations);
-};
+const Fulfilled = 'fulfilled';
+const Rejected = 'rejected';
 
-const mergeDirents = (oldDirents, newDirents) => {
-  return newDirents;
-};
-const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
-  const childDirents = await getChildDirents(pathSeparator, root, 0);
-  const mergedDirents = mergeDirents(dirents, childDirents);
-  return mergedDirents;
-};
-const handleDrop$1 = async (state, fileHandles, files, paths) => {
-  const {
-    items,
-    pathSeparator,
-    root
-  } = state;
-  await copyFilesElectron(root, fileHandles, files, paths);
-  const mergedDirents = await getMergedDirents$1(root, pathSeparator, items);
-  return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
-  };
+const createDirents = (root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator) => {
+  const dirents = [];
+  const map = Object.create(null);
+  for (let i = 0; i < expandedDirentPaths.length; i++) {
+    const path = expandedDirentPaths[i];
+    const children = expandedDirentChildren[i];
+    if (children.status === Fulfilled) {
+      map[path] = children.value;
+    }
+  }
+  dirents.push(...getSavedChildDirents(map, root, 1, excluded, pathSeparator));
+  return dirents;
 };
-
-const Electron = 2;
-
-const getModule = isElectron => {
-  if (isElectron) {
-    return handleDrop$1;
+const getSavedExpandedPaths = (savedState, root) => {
+  if (savedState && savedState.root !== root) {
+    return [];
   }
-  return handleDrop$2;
+  if (savedState && savedState.expandedPaths && Array.isArray(savedState.expandedPaths)) {
+    return savedState.expandedPaths;
+  }
+  return [];
 };
-const handleDropRoot = async (state, fileHandles, files, paths) => {
-  const isElectron = state.platform === Electron;
-  const fn = getModule(isElectron);
-  return fn(state, fileHandles, files, paths);
+const restoreExpandedState = async (savedState, root, pathSeparator, excluded) => {
+  // TODO read all opened folders in parallel
+  // ignore ENOENT errors
+  // ignore ENOTDIR errors
+  // merge all dirents
+  // restore scroll location
+  const expandedPaths = getSavedExpandedPaths(savedState, root);
+  if (root === EmptyString) {
+    return [];
+  }
+  const expandedDirentPaths = [root, ...expandedPaths];
+  const expandedDirentChildren = await Promise.allSettled(expandedDirentPaths.map(getChildDirentsRaw));
+  if (expandedDirentChildren[0].status === Rejected) {
+    throw expandedDirentChildren[0].reason;
+  }
+  const dirents = createDirents(root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator);
+  return dirents;
 };
 
-const getEndIndex = (items, index, dirent) => {
-  for (let i = index + 1; i < items.length; i++) {
-    if (items[i].depth === dirent.depth) {
-      return i;
+const getPathSeparator = root => {
+  return getPathSeparator$1(root);
+};
+const getExcluded = () => {
+  const excludedObject = {};
+  const excluded = [];
+  for (const [key, value] of Object.entries(excludedObject)) {
+    if (value) {
+      excluded.push(key);
     }
   }
-  return items.length;
+  return excluded;
 };
-const getMergedDirents = (items, index, dirent, childDirents) => {
-  const startIndex = index;
-  const endIndex = getEndIndex(items, index, dirent);
-  const mergedDirents = [...items.slice(0, startIndex), {
-    ...dirent,
-    type: DirectoryExpanded
-  }, ...childDirents, ...items.slice(endIndex)];
-  return mergedDirents;
+const getSavedRoot = (savedState, workspacePath) => {
+  return workspacePath;
 };
-const handleDropIntoFolder = async (state, dirent, index, fileHandles, files, paths) => {
-  const {
-    items,
-    pathSeparator
-  } = state;
-  await uploadFileSystemHandles(dirent.path, '/', fileHandles);
-  const childDirents = await getChildDirents(pathSeparator, dirent.path, dirent.depth);
-  const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
-  // TODO update maxlineY
-  return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
-  };
+const getErrorCode = error => {
+  if (error && typeof error === 'object' && 'code' in error && typeof error.code === 'string') {
+    return error.code;
+  }
+  return '';
 };
-const handleDropIntoFile = (state, dirent, index, fileHandles, files, paths) => {
-  const {
-    items
-  } = state;
-  const parentIndex = getParentStartIndex(items, index);
-  if (parentIndex === -1) {
-    return handleDropRoot(state, fileHandles, files, paths);
+const getErrorMessage = error => {
+  if (error instanceof Error) {
+    return error.message;
   }
-  return handleDropIndex(state, fileHandles, files, paths, parentIndex);
+  if (typeof error === 'string') {
+    return error;
+  }
+  return 'Unknown error';
 };
-const handleDropIndex = async (state, fileHandles, files, paths, index) => {
-  const {
-    items
-  } = state;
-  const dirent = items[index];
-  // TODO if it is a file, drop into the folder of the file
-  // TODO if it is a folder, drop into the folder
-  // TODO if it is a symlink, read symlink and determine if file can be dropped
-  switch (dirent.type) {
-    case Directory:
-    case DirectoryExpanded:
-      return handleDropIntoFolder(state, dirent, index, fileHandles);
-    case File:
-      return handleDropIntoFile(state, dirent, index, fileHandles, files, paths);
+const getFriendlyErrorMessage = (errorMessage, errorCode) => {
+  switch (errorCode) {
+    case 'EACCES':
+    case 'EPERM':
+      return 'permission was denied';
+    case 'EBUSY':
+      return 'the folder is currently in use';
+    case 'ENOENT':
+      return 'the folder does not exist';
+    case 'ENOTDIR':
+      return 'the path is not a folder';
     default:
-      return state;
+      return errorMessage || 'an unexpected error occurred';
   }
 };
-
-const getDropHandler = index => {
-  switch (index) {
-    case -1:
-      return handleDropRoot;
-    default:
-      return handleDropIndex;
+const loadContent = async (state, savedState) => {
+  const {
+    assetDir,
+    platform
+  } = state;
+  const {
+    confirmDelete,
+    sourceControlDecorations,
+    useChevrons
+  } = await getSettings();
+  const workspacePath = await getWorkspacePath();
+  const root = getSavedRoot(savedState, workspacePath);
+  try {
+    // TODO path separator could be restored from saved state
+    const pathSeparator = await getPathSeparator(root); // TODO only load path separator once
+    const excluded = getExcluded();
+    const restoredDirents = await restoreExpandedState(savedState, root, pathSeparator, excluded);
+    let minLineY = 0;
+    if (savedState && typeof savedState.minLineY === 'number') {
+      minLineY = savedState.minLineY;
+    }
+    let deltaY = 0;
+    if (savedState && typeof savedState.deltaY === 'number') {
+      deltaY = savedState.deltaY;
+    }
+    const scheme = getScheme(root);
+    const decorations = await getFileDecorations(scheme, root, restoredDirents.filter(item => item.depth === 1).map(item => item.path), sourceControlDecorations, assetDir, platform);
+    return {
+      ...state,
+      confirmDelete,
+      decorations,
+      deltaY,
+      errorCode: '',
+      errorMessage: '',
+      excluded,
+      hasError: false,
+      initial: false,
+      items: restoredDirents,
+      maxIndent: 10,
+      minLineY,
+      pathSeparator,
+      root,
+      useChevrons
+    };
+  } catch (error) {
+    const errorCode = getErrorCode(error);
+    const errorMessage = getFriendlyErrorMessage(getErrorMessage(error), errorCode);
+    return {
+      ...state,
+      confirmDelete,
+      errorCode,
+      errorMessage,
+      hasError: true,
+      initial: false,
+      items: [],
+      root,
+      useChevrons
+    };
   }
 };
 
-const getFileArray = fileList => {
+const getChildHandles = async fileHandle => {
   // @ts-ignore
-  const files = [...fileList];
-  return files;
-};
-
-const getFileHandles = async fileIds => {
-  if (fileIds.length === 0) {
-    return [];
-  }
-  const files = await getFileHandles$1(fileIds);
-  return files;
+  const values = fileHandle.values();
+  const children = await fromAsync(values);
+  return children;
 };
 
-const getFilePathElectron = async file => {
-  return invoke$2('FileSystemHandle.getFilePathElectron', file);
+const getFileHandleText = async fileHandle => {
+  const file = await fileHandle.getFile();
+  const text = await file.text();
+  return text;
 };
 
-const getFilepath = async file => {
-  return getFilePathElectron(file);
-};
-const getFilePaths = async (files, platform) => {
-  if (platform !== Electron) {
-    return files.map(file => '');
-  }
-  const promises = files.map(getFilepath);
-  const paths = await Promise.all(promises);
-  return paths;
+const isFileHandle = fileHandle => {
+  return fileHandle.kind === 'file';
 };
 
-const handleDrop = async (state, x, y, fileIds, fileList) => {
-  try {
+const createUploadTree = async (root, fileHandles) => {
+  const uploadTree = Object.create(null);
+  const normalized = fileHandles.filter(Boolean);
+  for (const fileHandle of normalized) {
     const {
-      platform
-    } = state;
-    const files = getFileArray(fileList);
-    const fileHandles = await getFileHandles(fileIds);
-    const paths = await getFilePaths(files, platform);
-    const index = getIndexFromPosition(state, x, y);
-    const fn = getDropHandler(index);
-    const result = await fn(state, fileHandles, files, paths, index);
-    return result;
-  } catch (error) {
-    throw new VError(error, 'Failed to drop files');
+      name
+    } = fileHandle;
+    if (isDirectoryHandle(fileHandle)) {
+      const children = await getChildHandles(fileHandle);
+      const childTree = await createUploadTree(name, children);
+      uploadTree[name] = childTree;
+    } else if (isFileHandle(fileHandle)) {
+      // TODO maybe save blob and use filesystem.writeblob
+      const text = await getFileHandleText(fileHandle);
+      uploadTree[name] = text;
+    }
   }
+  return uploadTree;
 };
 
-const handleEscape = async state => {
-  return {
-    ...state,
-    cutItems: []
-  };
-};
-
-const handleFocus = async state => {
-  return {
-    ...state,
-    focus: List
-  };
-};
-
-const updateIcons = async state => {
-  const {
-    items,
-    maxLineY,
-    minLineY
-  } = state;
-  const visible = items.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, Object.create(null));
-  return {
-    ...state,
-    fileIconCache: newFileIconCache,
-    icons
+const getFileOperations = (root, uploadTree) => {
+  const operations = [];
+  const processTree = (tree, currentPath) => {
+    for (const [path, value] of Object.entries(tree)) {
+      const fullPath = currentPath ? join2(currentPath, path) : path;
+      if (typeof value === 'object') {
+        operations.push({
+          path: join2(root, fullPath),
+          type: CreateFolder$1
+        });
+        processTree(value, fullPath);
+      } else if (typeof value === 'string') {
+        operations.push({
+          path: join2(root, fullPath),
+          text: value,
+          type: CreateFile$1
+        });
+      }
+    }
   };
+  processTree(uploadTree, '');
+  return operations;
 };
 
-const handleIconThemeChange = state => {
-  return updateIcons(state);
+const isDroppedFile = item => {
+  return item.kind === 'file' && 'value' in item && item.value instanceof FileSystemHandle;
 };
-
-const handleInputBlur = async state => {
-  const {
-    editingErrorMessage,
-    editingValue
-  } = state;
-  if (editingErrorMessage || !editingValue) {
-    return cancelEditInternal(state, false);
+const getFileSystemHandlesNormalized = fileSystemHandles => {
+  const normalized = [];
+  for (const item of fileSystemHandles) {
+    if (isDroppedFile(item)) {
+      normalized.push(item.value);
+    } else {
+      normalized.push(item);
+    }
   }
-  return acceptEdit(state);
+  return normalized;
 };
+const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
+  if (fileSystemHandles.length === 0) {
+    return true;
+  }
+  const fileSystemHandlesNormalized = getFileSystemHandlesNormalized(fileSystemHandles);
+  const uploadTree = await createUploadTree(root, fileSystemHandlesNormalized);
+  const fileOperations = getFileOperations(root, uploadTree);
+  await applyFileOperations(fileOperations);
 
-const handleInputClick = state => {
-  return state;
-};
+  // TODO
+  // 1. in electron, use webutils.getPathForFile to see if a path is available
+  // 2. else, walk all files and folders recursively and upload all of them (if there are many, show a progress bar)
 
-const handleInputKeyDown = (state, key) => {
-  return state;
+  // TODO send file system operations to renderer worker
+  return true;
 };
 
-const filterByFocusWord = (items, focusedIndex, focusWord) => {
-  if (items.length === 0) {
-    return -1;
+const mergeDirents$1 = (oldDirents, newDirents) => {
+  return newDirents;
+};
+const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
+  const childDirents = await getChildDirents(pathSeparator, root, 0);
+  const mergedDirents = mergeDirents$1(dirents, childDirents);
+  return mergedDirents;
+};
+const getDroppedDirectoryWorkspacePath = fileHandle => {
+  return `html://${fileHandle.name}`;
+};
+const openDroppedDirectoryAsWorkspace = async (state, fileHandle) => {
+  const path = getDroppedDirectoryWorkspacePath(fileHandle);
+  await invoke$2('PersistentFileHandle.addHandle', fileHandle.name, fileHandle);
+  await invoke$2('Workspace.setPath', path);
+  const updated = await loadContent(state, undefined);
+  return {
+    ...updated,
+    dropTargets: []
+  };
+};
+const getFirstDroppedDirectory = (state, fileHandles) => {
+  if (state.root !== '') {
+    return undefined;
   }
-  const matches = [];
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].toLowerCase().includes(focusWord)) {
-      matches.push(i);
+  for (const fileHandle of fileHandles) {
+    if (isDirectoryHandle(fileHandle)) {
+      return fileHandle;
     }
   }
-  if (matches.length === 0) {
-    return -1;
-  }
-
-  // Find the next match after the current focus
-  let nextIndex = matches.findIndex(index => index > focusedIndex);
-  if (nextIndex === -1) {
-    // If no match found after current focus, wrap around to the first match
-    nextIndex = 0;
-  }
-  return matches[nextIndex];
+  return undefined;
 };
-
-const RE_ASCII = /^[a-z]$/;
-const isAscii = key => {
-  return RE_ASCII.test(key);
+const shouldIgnoreDroppedHandles = (state, fileHandles) => {
+  return state.root === '' && fileHandles.length > 0 && !getFirstDroppedDirectory(state, fileHandles);
 };
-
-let timeout;
-const handleKeyDown = (state, key) => {
+const handleDrop$2 = async (state, fileHandles, files) => {
   const {
-    focusedIndex,
-    focusWord,
-    focusWordTimeout,
-    items
+    items,
+    pathSeparator,
+    root
   } = state;
-  if (focusWord && key === '') {
-    return cancelTypeAhead(state);
-  }
-  if (!isAscii(key)) {
-    return state;
-  }
-  const newFocusWord = focusWord + key.toLowerCase();
-  const itemNames = items.map(item => item.name);
-  const matchingIndex = filterByFocusWord(itemNames, focusedIndex, newFocusWord);
-  if (timeout) {
-    clearTimeout(timeout);
+  const droppedDirectory = getFirstDroppedDirectory(state, fileHandles);
+  if (droppedDirectory) {
+    return openDroppedDirectoryAsWorkspace(state, droppedDirectory);
   }
-  timeout = setTimeout(async () => {
-    await invoke$2('Explorer.cancelTypeAhead');
-  }, focusWordTimeout);
-  if (matchingIndex === -1) {
+  if (shouldIgnoreDroppedHandles(state, fileHandles)) {
     return {
       ...state,
-      focusWord: newFocusWord
+      dropTargets: []
+    };
+  }
+  const handled = await uploadFileSystemHandles(root, pathSeparator, fileHandles);
+  if (handled) {
+    const updated = await refresh(state);
+    return {
+      ...updated,
+      dropTargets: []
     };
   }
+  const mergedDirents = await getMergedDirents$2(root, pathSeparator, items);
   return {
     ...state,
-    focusedIndex: matchingIndex,
-    focusWord: newFocusWord
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 
-const scrollInto = (index, minLineY, maxLineY) => {
-  const diff = maxLineY - minLineY;
-  const smallerHalf = Math.floor(diff / 2);
-  const largerHalf = diff - smallerHalf;
-  if (index < minLineY) {
-    return {
-      newMaxLineY: index + largerHalf,
-      newMinLineY: index - smallerHalf
-    };
-  }
-  if (index >= maxLineY) {
-    return {
-      newMaxLineY: index + largerHalf,
-      newMinLineY: index - smallerHalf
-    };
+const getFileOperationsElectron = async (root, paths, fileHandles, pathSeparator) => {
+  const operations = [];
+  for (let i = 0; i < paths.length; i++) {
+    const fileHandle = fileHandles[i];
+    const {
+      name
+    } = fileHandle;
+    const path = paths[i];
+    operations.push({
+      from: path,
+      path: join(pathSeparator, root, name),
+      type: Copy$1
+    });
   }
-  return {
-    newMaxLineY: maxLineY,
-    newMinLineY: minLineY
-  };
+  return operations;
 };
 
-const adjustScrollAfterPaste = (state, focusedIndex) => {
+// TODO copy files in parallel
+const copyFilesElectron = async (root, fileHandles, files, paths) => {
+  const pathSeparator = await getPathSeparator$1(root);
+  const operations = await getFileOperationsElectron(root, paths, fileHandles, pathSeparator);
+  await applyFileOperations(operations);
+};
+
+const mergeDirents = (oldDirents, newDirents) => {
+  return newDirents;
+};
+const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
+  const childDirents = await getChildDirents(pathSeparator, root, 0);
+  const mergedDirents = mergeDirents(dirents, childDirents);
+  return mergedDirents;
+};
+const handleDrop$1 = async (state, fileHandles, files, paths) => {
   const {
-    itemHeight,
-    maxLineY,
-    minLineY
+    items,
+    pathSeparator,
+    root
   } = state;
-  const {
-    newMaxLineY,
-    newMinLineY
-  } = scrollInto(focusedIndex, minLineY, maxLineY);
-  const newDeltaY = newMinLineY * itemHeight;
+  await copyFilesElectron(root, fileHandles, files, paths);
+  const mergedDirents = await getMergedDirents$1(root, pathSeparator, items);
   return {
     ...state,
-    deltaY: newDeltaY,
-    focused: true,
-    focusedIndex,
-    maxLineY: newMaxLineY,
-    minLineY: newMinLineY
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 
-const generateUniqueName = (baseName, existingPaths, root) => {
-  // Handle files with extensions
-  const lastDotIndex = baseName.lastIndexOf('.');
-  const hasExtension = lastDotIndex !== -1 && lastDotIndex !== 0 && lastDotIndex !== baseName.length - 1;
-  let nameWithoutExtension;
-  let extension;
-  if (hasExtension) {
-    nameWithoutExtension = baseName.slice(0, lastDotIndex);
-    extension = baseName.slice(lastDotIndex);
-  } else {
-    nameWithoutExtension = baseName;
-    extension = '';
-  }
-
-  // Check if original name exists
-  const originalPath = join2(root, baseName);
-  if (!existingPaths.includes(originalPath)) {
-    return baseName;
-  }
+const Electron = 2;
 
-  // Try "original copy"
-  const copyName = `${nameWithoutExtension} copy${extension}`;
-  const copyPath = join2(root, copyName);
-  if (!existingPaths.includes(copyPath)) {
-    return copyName;
+const getModule = isElectron => {
+  if (isElectron) {
+    return handleDrop$1;
   }
+  return handleDrop$2;
+};
+const handleDropRoot = async (state, fileHandles, files, paths) => {
+  const isElectron = state.platform === Electron;
+  const fn = getModule(isElectron);
+  return fn(state, fileHandles, files, paths);
+};
 
-  // Try "original copy 1", "original copy 2", etc.
-  let counter = 1;
-  while (true) {
-    const numberedCopyName = `${nameWithoutExtension} copy ${counter}${extension}`;
-    const numberedCopyPath = join2(root, numberedCopyName);
-    if (!existingPaths.includes(numberedCopyPath)) {
-      return numberedCopyName;
+const getEndIndex = (items, index, dirent) => {
+  for (let i = index + 1; i < items.length; i++) {
+    if (items[i].depth === dirent.depth) {
+      return i;
     }
-    counter++;
   }
+  return items.length;
 };
-
-const getFileOperationsCopy = (root, existingUris, files, focusedUri) => {
-  const operations = [];
-  for (const file of files) {
-    const baseName = getBaseName('/', file);
-    if (existingUris.includes(file)) {
-      operations.push({
-        from: file,
-        path: join2(focusedUri, baseName),
-        type: Rename$2
-      });
-    } else {
-      const uniqueName = generateUniqueName(baseName, existingUris, root);
-      const newUri = join2(root, uniqueName);
-      operations.push({
-        from: file,
-        // TODO ensure file is uri
-        path: newUri,
-        type: Copy$1
-      });
-    }
-  }
-  return operations;
+const getMergedDirents = (items, index, dirent, childDirents) => {
+  const startIndex = index;
+  const endIndex = getEndIndex(items, index, dirent);
+  const mergedDirents = [...items.slice(0, startIndex), {
+    ...dirent,
+    type: DirectoryExpanded
+  }, ...childDirents, ...items.slice(endIndex)];
+  return mergedDirents;
 };
-
-const handlePasteCopy = async (state, nativeFiles) => {
-  // TODO handle pasting files into nested folder
-  // TODO handle pasting files into symlink
-  // TODO handle pasting files into broken symlink
-  // TODO handle pasting files into hardlink
-  // TODO what if folder is big and it takes a long time
-
-  // TODO use file operations and bulk edit
+const handleDropIntoFolder = async (state, dirent, index, fileHandles, files, paths) => {
   const {
-    focusedIndex,
     items,
-    root
+    pathSeparator
   } = state;
-  const focusedUri = items[focusedIndex]?.path || root;
-  const existingUris = items.map(item => item.path);
-  const operations = getFileOperationsCopy(root, existingUris, nativeFiles.files, focusedUri);
-  // TODO handle error?
-  await applyFileOperations(operations);
-
-  // TODO use refreshExplorer with the paths that have been affected by file operations
-  // TODO only update folder at which level it changed
-  const latestState = await refresh(state);
-
-  // Focus on the first newly created file and adjust scroll position
-  const newFilePaths = operations.map(operation => operation.path);
-  if (newFilePaths.length > 0) {
-    const firstNewFilePath = newFilePaths[0];
-    const newFileIndex = getIndex(latestState.items, firstNewFilePath);
-    if (newFileIndex !== -1) {
-      const adjustedState = adjustScrollAfterPaste(latestState, newFileIndex);
-      return {
-        ...adjustedState,
-        pasteShouldMove: false
-      };
-    }
-  }
-  // If there are no items, ensure focusedIndex is 0
-  if (latestState.items.length === 0) {
-    return {
-      ...latestState,
-      focusedIndex: 0,
-      pasteShouldMove: false
-    };
-  }
+  await uploadFileSystemHandles(dirent.path, '/', fileHandles);
+  const childDirents = await getChildDirents(pathSeparator, dirent.path, dirent.depth);
+  const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
+  // TODO update maxlineY
   return {
-    ...latestState,
-    pasteShouldMove: false
+    ...state,
+    dropTargets: [],
+    items: mergedDirents
   };
 };
-
-const getOperations = (toUri, files) => {
-  const operations = [];
-  for (const file of files) {
-    const baseName = getBaseName('/', file);
-    const newUri = join2(toUri, baseName);
-    operations.push({
-      from: file,
-      path: newUri,
-      type: Rename$2
-    });
-  }
-  return operations;
-};
-const getTargetUri = (root, items, index) => {
-  if (index === -1) {
-    return root;
+const handleDropIntoFile = (state, dirent, index, fileHandles, files, paths) => {
+  const {
+    items
+  } = state;
+  const parentIndex = getParentStartIndex(items, index);
+  if (parentIndex === -1) {
+    return handleDropRoot(state, fileHandles, files, paths);
   }
-  return items[index].path;
+  return handleDropIndex(state, fileHandles, files, paths, parentIndex);
 };
-const handlePasteCut = async (state, nativeFiles) => {
+const handleDropIndex = async (state, fileHandles, files, paths, index) => {
   const {
-    focusedIndex,
-    items,
-    pathSeparator,
-    root
+    items
   } = state;
-  // TODO root is not necessrily target uri
-  const targetUri = getTargetUri(root, items, focusedIndex);
-  const operations = getOperations(targetUri, nativeFiles.files);
-  await applyFileOperations(operations);
-
-  // Refresh the state after cut operations
-  const latestState = await refresh(state);
+  const dirent = items[index];
+  // TODO if it is a file, drop into the folder of the file
+  // TODO if it is a folder, drop into the folder
+  // TODO if it is a symlink, read symlink and determine if file can be dropped
+  switch (dirent.type) {
+    case Directory:
+    case DirectoryExpanded:
+      return handleDropIntoFolder(state, dirent, index, fileHandles);
+    case File:
+      return handleDropIntoFile(state, dirent, index, fileHandles, files, paths);
+    default:
+      return state;
+  }
+};
 
-  // Focus on the first pasted file and adjust scroll position
-  if (nativeFiles.files.length > 0) {
-    const firstPastedFile = nativeFiles.files[0];
-    const targetPath = `${root}${pathSeparator}${getBaseName(pathSeparator, firstPastedFile)}`;
-    const pastedFileIndex = getIndex(latestState.items, targetPath);
-    if (pastedFileIndex !== -1) {
-      const adjustedState = adjustScrollAfterPaste(latestState, pastedFileIndex);
-      return {
-        ...adjustedState,
-        cutItems: [],
-        pasteShouldMove: false
-      };
-    }
+const getDropHandler = index => {
+  switch (index) {
+    case -1:
+      return handleDropRoot;
+    default:
+      return handleDropIndex;
   }
-  return {
-    ...latestState,
-    cutItems: [],
-    pasteShouldMove: false
-  };
 };
 
-const None$1 = 'none';
+const getFileArray = fileList => {
+  // @ts-ignore
+  const files = [...fileList];
+  return files;
+};
 
-const handlePaste = async state => {
-  const nativeFiles = await readNativeFiles();
-  if (!nativeFiles) {
-    return state;
+const getFileHandles = async fileIds => {
+  if (fileIds.length === 0) {
+    return [];
   }
-  // TODO detect cut/paste event, not sure if that is possible
-  // TODO check that pasted folder is not a parent folder of opened folder
-  // TODO support pasting multiple paths
-  // TODO what happens when pasting multiple paths, but some of them error?
-  // how many error messages should be shown? Should the operation be undone?
-  // TODO what if it is a large folder and takes a long time to copy? Should show progress
-  // TODO what if there is a permission error? Probably should show a modal to ask for permission
-  // TODO if error is EEXISTS, just rename the copy (e.g. file-copy-1.txt, file-copy-2.txt)
-  // TODO actual target should be selected folder
-  // TODO but what if a file is currently selected? Then maybe the parent folder
-  // TODO but will it work if the folder is a symlink?
-  // TODO handle error gracefully when copy fails
+  const files = await getFileHandles$1(fileIds);
+  return files;
+};
 
-  // If no files to paste, return original state unchanged
-  if (nativeFiles.type === None$1) {
-    return state;
-  }
+const getFilePathElectron = async file => {
+  return invoke$2('FileSystemHandle.getFilePathElectron', file);
+};
 
-  // Use the pasteShouldMove flag to determine whether to cut or copy
-  if (state.pasteShouldMove) {
-    return handlePasteCut(state, nativeFiles);
+const getFilepath = async file => {
+  return getFilePathElectron(file);
+};
+const getFilePaths = async (files, platform) => {
+  if (platform !== Electron) {
+    return files.map(file => '');
   }
-  return handlePasteCopy(state, nativeFiles);
+  const promises = files.map(getFilepath);
+  const paths = await Promise.all(promises);
+  return paths;
 };
 
-const handlePointerDown = (state, button, x, y) => {
-  const index = getIndexFromPosition(state, x, y);
-  if (button === LeftClick && index === -1) {
-    return {
-      ...state,
-      focus: List,
-      focused: true,
-      focusedIndex: -1
-    };
+const handleDrop = async (state, x, y, fileIds, fileList) => {
+  try {
+    const {
+      platform
+    } = state;
+    const files = getFileArray(fileList);
+    const fileHandles = await getFileHandles(fileIds);
+    const paths = await getFilePaths(files, platform);
+    const index = getIndexFromPosition(state, x, y);
+    const fn = getDropHandler(index);
+    const result = await fn(state, fileHandles, files, paths, index);
+    return result;
+  } catch (error) {
+    throw new VError(error, 'Failed to drop files');
   }
-  return state;
 };
 
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
-  }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+const handleEscape = async state => {
+  return {
+    ...state,
+    cutItems: []
+  };
 };
 
-const handleResize = (state, dimensions) => {
+const handleFocus = async state => {
+  return {
+    ...state,
+    focus: List
+  };
+};
+
+const updateIcons = async state => {
   const {
-    height: rawHeight,
-    width: rawWidth
-  } = dimensions;
-  if (!Number.isFinite(rawHeight) || !Number.isFinite(rawWidth)) {
-    return state;
-  }
-  const height = Math.max(0, rawHeight);
-  const width = Math.max(0, rawWidth);
-  const {
-    deltaY,
-    itemHeight,
-    items
+    items,
+    maxLineY,
+    minLineY
   } = state;
-  const contentHeight = items.length * itemHeight;
-  const maxDeltaY = Math.max(contentHeight - height, 0);
-  const newDeltaY = Math.min(Math.max(deltaY, 0), maxDeltaY);
-  const minLineY = Math.round(newDeltaY / itemHeight);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  if (state.height === height && state.width === width && state.deltaY === newDeltaY && state.minLineY === minLineY && state.maxLineY === maxLineY && state.scrollBarHeight === scrollBarHeight) {
-    return state;
-  }
+  const visible = items.slice(minLineY, maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, Object.create(null));
   return {
     ...state,
-    deltaY: newDeltaY,
-    height,
-    maxLineY,
-    minLineY,
-    scrollBarHeight,
-    width
+    fileIconCache: newFileIconCache,
+    icons
   };
 };
 
-const handleUpload = async (state, dirents) => {
+const handleIconThemeChange = state => {
+  return updateIcons(state);
+};
+
+const handleInputBlur = async state => {
   const {
-    pathSeparator,
-    root
+    editingErrorMessage,
+    editingValue
   } = state;
-  for (const dirent of dirents) {
-    // TODO switch
-    // TODO symlink might not be possible to be copied
-    // TODO create folder if type is 2
-    if (dirent.type === /* File */1) {
-      // TODO reading text might be inefficient for binary files
-      // but not sure how else to send them via jsonrpc
-      const content = await dirent.file.text();
-      const absolutePath = [root, dirent.file.name].join(pathSeparator);
-      await writeFile(absolutePath, content);
-    }
+  if (editingErrorMessage || !editingValue) {
+    return cancelEditInternal(state, false);
   }
+  return acceptEdit(state);
 };
 
-const setDeltaY = async (state, deltaY) => {
-  if (!Number.isFinite(deltaY)) {
-    return state;
+const handleInputClick = state => {
+  return state;
+};
+
+const handleInputKeyDown = (state, key) => {
+  return state;
+};
+
+const filterByFocusWord = (items, focusedIndex, focusWord) => {
+  if (items.length === 0) {
+    return -1;
+  }
+  const matches = [];
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].toLowerCase().includes(focusWord)) {
+      matches.push(i);
+    }
+  }
+  if (matches.length === 0) {
+    return -1;
   }
+
+  // Find the next match after the current focus
+  let nextIndex = matches.findIndex(index => index > focusedIndex);
+  if (nextIndex === -1) {
+    // If no match found after current focus, wrap around to the first match
+    nextIndex = 0;
+  }
+  return matches[nextIndex];
+};
+
+const RE_ASCII = /^[a-z]$/;
+const isAscii = key => {
+  return RE_ASCII.test(key);
+};
+
+let timeout;
+const handleKeyDown = (state, key) => {
   const {
-    height,
-    itemHeight,
+    focusedIndex,
+    focusWord,
+    focusWordTimeout,
     items
   } = state;
-  if (deltaY < 0) {
-    deltaY = 0;
-  } else if (deltaY > items.length * itemHeight - height) {
-    deltaY = Math.max(items.length * itemHeight - height, 0);
+  if (focusWord && key === '') {
+    return cancelTypeAhead(state);
   }
-  if (state.deltaY === deltaY) {
+  if (!isAscii(key)) {
     return state;
   }
-  const minLineY = Math.round(deltaY / itemHeight);
-  const maxLineY = minLineY + Math.round(height / itemHeight);
+  const newFocusWord = focusWord + key.toLowerCase();
+  const itemNames = items.map(item => item.name);
+  const matchingIndex = filterByFocusWord(itemNames, focusedIndex, newFocusWord);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  timeout = setTimeout(async () => {
+    await invoke$2('Explorer.cancelTypeAhead');
+  }, focusWordTimeout);
+  if (matchingIndex === -1) {
+    return {
+      ...state,
+      focusWord: newFocusWord
+    };
+  }
   return {
     ...state,
-    deltaY,
-    maxLineY,
-    minLineY
+    focusedIndex: matchingIndex,
+    focusWord: newFocusWord
   };
 };
 
-const handleWheel = (state, deltaMode, deltaY) => {
-  return setDeltaY(state, state.deltaY + deltaY);
+const scrollInto = (index, minLineY, maxLineY) => {
+  const diff = maxLineY - minLineY;
+  const smallerHalf = Math.floor(diff / 2);
+  const largerHalf = diff - smallerHalf;
+  if (index < minLineY) {
+    return {
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
+    };
+  }
+  if (index >= maxLineY) {
+    return {
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
+    };
+  }
+  return {
+    newMaxLineY: maxLineY,
+    newMinLineY: minLineY
+  };
 };
 
-const getWorkspacePath = () => {
-  return invoke$2('Workspace.getPath');
+const adjustScrollAfterPaste = (state, focusedIndex) => {
+  const {
+    itemHeight,
+    maxLineY,
+    minLineY
+  } = state;
+  const {
+    newMaxLineY,
+    newMinLineY
+  } = scrollInto(focusedIndex, minLineY, maxLineY);
+  const newDeltaY = newMinLineY * itemHeight;
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    focused: true,
+    focusedIndex,
+    maxLineY: newMaxLineY,
+    minLineY: newMinLineY
+  };
 };
 
-const isValid = decoration => {
-  return decoration && typeof decoration.decoration === 'string' && typeof decoration.uri === 'string';
-};
-const normalizeDecorations = decorations => {
-  if (!decorations || !Array.isArray(decorations)) {
-    return [];
+const generateUniqueName = (baseName, existingPaths, root) => {
+  // Handle files with extensions
+  const lastDotIndex = baseName.lastIndexOf('.');
+  const hasExtension = lastDotIndex !== -1 && lastDotIndex !== 0 && lastDotIndex !== baseName.length - 1;
+  let nameWithoutExtension;
+  let extension;
+  if (hasExtension) {
+    nameWithoutExtension = baseName.slice(0, lastDotIndex);
+    extension = baseName.slice(lastDotIndex);
+  } else {
+    nameWithoutExtension = baseName;
+    extension = '';
   }
-  return decorations.filter(isValid);
-};
 
-const getFileDecorations = async (scheme, root, maybeUris, decorationsEnabled, assetDir, platform) => {
-  try {
-    if (!decorationsEnabled) {
-      return [];
-    }
-    const providerIds = await invoke$1('SourceControl.getEnabledProviderIds', scheme, root, assetDir, platform);
-    if (providerIds.length === 0) {
-      return [];
+  // Check if original name exists
+  const originalPath = join2(root, baseName);
+  if (!existingPaths.includes(originalPath)) {
+    return baseName;
+  }
+
+  // Try "original copy"
+  const copyName = `${nameWithoutExtension} copy${extension}`;
+  const copyPath = join2(root, copyName);
+  if (!existingPaths.includes(copyPath)) {
+    return copyName;
+  }
+
+  // Try "original copy 1", "original copy 2", etc.
+  let counter = 1;
+  while (true) {
+    const numberedCopyName = `${nameWithoutExtension} copy ${counter}${extension}`;
+    const numberedCopyPath = join2(root, numberedCopyName);
+    if (!existingPaths.includes(numberedCopyPath)) {
+      return numberedCopyName;
     }
-    // TODO how to handle multiple providers?
-    const providerId = providerIds.at(-1);
-    const uris = ensureUris(maybeUris);
-    const decorations = await invoke$1('SourceControl.getFileDecorations', providerId, uris, assetDir, platform);
-    const normalized = normalizeDecorations(decorations);
-    return normalized;
-  } catch (error) {
-    console.error(error);
-    return [];
+    counter++;
   }
 };
 
-const RE_PROTOCOL = /^[a-z+]:\/\//;
-const getScheme = uri => {
-  const match = uri.match(RE_PROTOCOL);
-  if (!match) {
-    return '';
+const getFileOperationsCopy = (root, existingUris, files, focusedUri) => {
+  const operations = [];
+  for (const file of files) {
+    const baseName = getBaseName('/', file);
+    if (existingUris.includes(file)) {
+      operations.push({
+        from: file,
+        path: join2(focusedUri, baseName),
+        type: Rename$2
+      });
+    } else {
+      const uniqueName = generateUniqueName(baseName, existingUris, root);
+      const newUri = join2(root, uniqueName);
+      operations.push({
+        from: file,
+        // TODO ensure file is uri
+        path: newUri,
+        type: Copy$1
+      });
+    }
   }
-  return match[0];
+  return operations;
 };
 
-const getSettings = async () => {
-  // TODO don't return false always
-  // TODO get all settings at once
-  const useChevronsRaw = await invoke$2('Preferences.get', 'explorer.useChevrons');
-  const useChevrons = useChevronsRaw === false ? false : true;
-  const confirmDeleteRaw = await invoke$2('Preferences.get', 'explorer.confirmdelete');
-  const confirmDelete = confirmDeleteRaw === false ? false : false;
-  const confirmPasteRaw = await invoke$2('Preferences.get', 'explorer.confirmpaste');
-  const confirmPaste = confirmPasteRaw === false ? false : false;
-  const sourceControlDecorationsRaw = await invoke$2('Preferences.get', 'explorer.sourceControlDecorations');
-  const sourceControlDecorations = sourceControlDecorationsRaw === false ? false : true;
+const handlePasteCopy = async (state, nativeFiles) => {
+  // TODO handle pasting files into nested folder
+  // TODO handle pasting files into symlink
+  // TODO handle pasting files into broken symlink
+  // TODO handle pasting files into hardlink
+  // TODO what if folder is big and it takes a long time
+
+  // TODO use file operations and bulk edit
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const focusedUri = items[focusedIndex]?.path || root;
+  const existingUris = items.map(item => item.path);
+  const operations = getFileOperationsCopy(root, existingUris, nativeFiles.files, focusedUri);
+  // TODO handle error?
+  await applyFileOperations(operations);
+
+  // TODO use refreshExplorer with the paths that have been affected by file operations
+  // TODO only update folder at which level it changed
+  const latestState = await refresh(state);
+
+  // Focus on the first newly created file and adjust scroll position
+  const newFilePaths = operations.map(operation => operation.path);
+  if (newFilePaths.length > 0) {
+    const firstNewFilePath = newFilePaths[0];
+    const newFileIndex = getIndex(latestState.items, firstNewFilePath);
+    if (newFileIndex !== -1) {
+      const adjustedState = adjustScrollAfterPaste(latestState, newFileIndex);
+      return {
+        ...adjustedState,
+        pasteShouldMove: false
+      };
+    }
+  }
+  // If there are no items, ensure focusedIndex is 0
+  if (latestState.items.length === 0) {
+    return {
+      ...latestState,
+      focusedIndex: 0,
+      pasteShouldMove: false
+    };
+  }
   return {
-    confirmDelete,
-    confirmPaste,
-    sourceControlDecorations,
-    useChevrons
+    ...latestState,
+    pasteShouldMove: false
   };
 };
 
-const getSavedChildDirents = (map, path, depth, excluded, pathSeparator) => {
-  let children = map[path];
-  if (!children) {
-    return [];
-  }
-  const dirents = [];
-  children = sortExplorerItems(children);
-  const visible = [];
-  const displayRoot = path.endsWith(pathSeparator) ? path : path + pathSeparator;
-  for (const child of children) {
-    if (excluded.includes(child.name)) {
-      continue;
-    }
-    visible.push(child);
+const getOperations = (toUri, files) => {
+  const operations = [];
+  for (const file of files) {
+    const baseName = getBaseName('/', file);
+    const newUri = join2(toUri, baseName);
+    operations.push({
+      from: file,
+      path: newUri,
+      type: Rename$2
+    });
   }
-  const visibleLength = visible.length;
-  for (let i = 0; i < visibleLength; i++) {
-    const child = visible[i];
-    const {
-      name,
-      type
-    } = child;
-    const childPath = displayRoot + name;
-    if ((child.type === Directory || child.type === SymLinkFolder) && childPath in map) {
-      dirents.push({
-        depth,
-        icon: '',
-        name,
-        path: childPath,
-        posInSet: i + 1,
-        setSize: visibleLength,
-        type: DirectoryExpanded
-      });
-      dirents.push(...getSavedChildDirents(map, childPath, depth + 1, excluded, pathSeparator));
-    } else {
-      dirents.push({
-        depth,
-        icon: '',
-        name,
-        path: childPath,
-        posInSet: i + 1,
-        setSize: visibleLength,
-        type
-      });
-    }
+  return operations;
+};
+const getTargetUri = (root, items, index) => {
+  if (index === -1) {
+    return root;
   }
-  return dirents;
+  return items[index].path;
 };
+const handlePasteCut = async (state, nativeFiles) => {
+  const {
+    focusedIndex,
+    items,
+    pathSeparator,
+    root
+  } = state;
+  // TODO root is not necessrily target uri
+  const targetUri = getTargetUri(root, items, focusedIndex);
+  const operations = getOperations(targetUri, nativeFiles.files);
+  await applyFileOperations(operations);
 
-const Fulfilled = 'fulfilled';
-const Rejected = 'rejected';
+  // Refresh the state after cut operations
+  const latestState = await refresh(state);
 
-const createDirents = (root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator) => {
-  const dirents = [];
-  const map = Object.create(null);
-  for (let i = 0; i < expandedDirentPaths.length; i++) {
-    const path = expandedDirentPaths[i];
-    const children = expandedDirentChildren[i];
-    if (children.status === Fulfilled) {
-      map[path] = children.value;
+  // Focus on the first pasted file and adjust scroll position
+  if (nativeFiles.files.length > 0) {
+    const firstPastedFile = nativeFiles.files[0];
+    const targetPath = `${root}${pathSeparator}${getBaseName(pathSeparator, firstPastedFile)}`;
+    const pastedFileIndex = getIndex(latestState.items, targetPath);
+    if (pastedFileIndex !== -1) {
+      const adjustedState = adjustScrollAfterPaste(latestState, pastedFileIndex);
+      return {
+        ...adjustedState,
+        cutItems: [],
+        pasteShouldMove: false
+      };
     }
   }
-  dirents.push(...getSavedChildDirents(map, root, 1, excluded, pathSeparator));
-  return dirents;
+  return {
+    ...latestState,
+    cutItems: [],
+    pasteShouldMove: false
+  };
 };
-const getSavedExpandedPaths = (savedState, root) => {
-  if (savedState && savedState.root !== root) {
-    return [];
-  }
-  if (savedState && savedState.expandedPaths && Array.isArray(savedState.expandedPaths)) {
-    return savedState.expandedPaths;
+
+const None$1 = 'none';
+
+const handlePaste = async state => {
+  const nativeFiles = await readNativeFiles();
+  if (!nativeFiles) {
+    return state;
   }
-  return [];
-};
-const restoreExpandedState = async (savedState, root, pathSeparator, excluded) => {
-  // TODO read all opened folders in parallel
-  // ignore ENOENT errors
-  // ignore ENOTDIR errors
-  // merge all dirents
-  // restore scroll location
-  const expandedPaths = getSavedExpandedPaths(savedState, root);
-  if (root === EmptyString) {
-    return [];
+  // TODO detect cut/paste event, not sure if that is possible
+  // TODO check that pasted folder is not a parent folder of opened folder
+  // TODO support pasting multiple paths
+  // TODO what happens when pasting multiple paths, but some of them error?
+  // how many error messages should be shown? Should the operation be undone?
+  // TODO what if it is a large folder and takes a long time to copy? Should show progress
+  // TODO what if there is a permission error? Probably should show a modal to ask for permission
+  // TODO if error is EEXISTS, just rename the copy (e.g. file-copy-1.txt, file-copy-2.txt)
+  // TODO actual target should be selected folder
+  // TODO but what if a file is currently selected? Then maybe the parent folder
+  // TODO but will it work if the folder is a symlink?
+  // TODO handle error gracefully when copy fails
+
+  // If no files to paste, return original state unchanged
+  if (nativeFiles.type === None$1) {
+    return state;
   }
-  const expandedDirentPaths = [root, ...expandedPaths];
-  const expandedDirentChildren = await Promise.allSettled(expandedDirentPaths.map(getChildDirentsRaw));
-  if (expandedDirentChildren[0].status === Rejected) {
-    throw expandedDirentChildren[0].reason;
+
+  // Use the pasteShouldMove flag to determine whether to cut or copy
+  if (state.pasteShouldMove) {
+    return handlePasteCut(state, nativeFiles);
   }
-  const dirents = createDirents(root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator);
-  return dirents;
+  return handlePasteCopy(state, nativeFiles);
 };
 
-const getPathSeparator = root => {
-  return getPathSeparator$1(root);
-};
-const getExcluded = () => {
-  const excludedObject = {};
-  const excluded = [];
-  for (const [key, value] of Object.entries(excludedObject)) {
-    if (value) {
-      excluded.push(key);
-    }
+const handlePointerDown = (state, button, x, y) => {
+  const index = getIndexFromPosition(state, x, y);
+  if (button === LeftClick && index === -1) {
+    return {
+      ...state,
+      focus: List,
+      focused: true,
+      focusedIndex: -1
+    };
   }
-  return excluded;
-};
-const getSavedRoot = (savedState, workspacePath) => {
-  return workspacePath;
+  return state;
 };
-const getErrorCode = error => {
-  if (error && typeof error === 'object' && 'code' in error && typeof error.code === 'string') {
-    return error.code;
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
   }
-  return '';
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
-const getErrorMessage = error => {
-  if (error instanceof Error) {
-    return error.message;
+
+const handleResize = (state, dimensions) => {
+  const {
+    height: rawHeight,
+    width: rawWidth
+  } = dimensions;
+  if (!Number.isFinite(rawHeight) || !Number.isFinite(rawWidth)) {
+    return state;
   }
-  if (typeof error === 'string') {
-    return error;
+  const height = Math.max(0, rawHeight);
+  const width = Math.max(0, rawWidth);
+  const {
+    deltaY,
+    itemHeight,
+    items
+  } = state;
+  const contentHeight = items.length * itemHeight;
+  const maxDeltaY = Math.max(contentHeight - height, 0);
+  const newDeltaY = Math.min(Math.max(deltaY, 0), maxDeltaY);
+  const minLineY = Math.round(newDeltaY / itemHeight);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  if (state.height === height && state.width === width && state.deltaY === newDeltaY && state.minLineY === minLineY && state.maxLineY === maxLineY && state.scrollBarHeight === scrollBarHeight) {
+    return state;
   }
-  return 'Unknown error';
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    height,
+    maxLineY,
+    minLineY,
+    scrollBarHeight,
+    width
+  };
 };
-const getFriendlyErrorMessage = (errorMessage, errorCode) => {
-  switch (errorCode) {
-    case 'EACCES':
-    case 'EPERM':
-      return 'permission was denied';
-    case 'EBUSY':
-      return 'the folder is currently in use';
-    case 'ENOENT':
-      return 'the folder does not exist';
-    case 'ENOTDIR':
-      return 'the path is not a folder';
-    default:
-      return errorMessage || 'an unexpected error occurred';
+
+const handleUpload = async (state, dirents) => {
+  const {
+    pathSeparator,
+    root
+  } = state;
+  for (const dirent of dirents) {
+    // TODO switch
+    // TODO symlink might not be possible to be copied
+    // TODO create folder if type is 2
+    if (dirent.type === /* File */1) {
+      // TODO reading text might be inefficient for binary files
+      // but not sure how else to send them via jsonrpc
+      const content = await dirent.file.text();
+      const absolutePath = [root, dirent.file.name].join(pathSeparator);
+      await writeFile(absolutePath, content);
+    }
   }
 };
-const loadContent = async (state, savedState) => {
+
+const setDeltaY = async (state, deltaY) => {
+  if (!Number.isFinite(deltaY)) {
+    return state;
+  }
   const {
-    assetDir,
-    platform
+    height,
+    itemHeight,
+    items
   } = state;
-  const {
-    confirmDelete,
-    sourceControlDecorations,
-    useChevrons
-  } = await getSettings();
-  const workspacePath = await getWorkspacePath();
-  const root = getSavedRoot(savedState, workspacePath);
-  try {
-    // TODO path separator could be restored from saved state
-    const pathSeparator = await getPathSeparator(root); // TODO only load path separator once
-    const excluded = getExcluded();
-    const restoredDirents = await restoreExpandedState(savedState, root, pathSeparator, excluded);
-    let minLineY = 0;
-    if (savedState && typeof savedState.minLineY === 'number') {
-      minLineY = savedState.minLineY;
-    }
-    let deltaY = 0;
-    if (savedState && typeof savedState.deltaY === 'number') {
-      deltaY = savedState.deltaY;
-    }
-    const scheme = getScheme(root);
-    const decorations = await getFileDecorations(scheme, root, restoredDirents.filter(item => item.depth === 1).map(item => item.path), sourceControlDecorations, assetDir, platform);
-    return {
-      ...state,
-      confirmDelete,
-      decorations,
-      deltaY,
-      errorCode: '',
-      errorMessage: '',
-      excluded,
-      hasError: false,
-      initial: false,
-      items: restoredDirents,
-      maxIndent: 10,
-      minLineY,
-      pathSeparator,
-      root,
-      useChevrons
-    };
-  } catch (error) {
-    const errorCode = getErrorCode(error);
-    const errorMessage = getFriendlyErrorMessage(getErrorMessage(error), errorCode);
-    return {
-      ...state,
-      confirmDelete,
-      errorCode,
-      errorMessage,
-      hasError: true,
-      initial: false,
-      items: [],
-      root,
-      useChevrons
-    };
+  if (deltaY < 0) {
+    deltaY = 0;
+  } else if (deltaY > items.length * itemHeight - height) {
+    deltaY = Math.max(items.length * itemHeight - height, 0);
   }
+  if (state.deltaY === deltaY) {
+    return state;
+  }
+  const minLineY = Math.round(deltaY / itemHeight);
+  const maxLineY = minLineY + Math.round(height / itemHeight);
+  return {
+    ...state,
+    deltaY,
+    maxLineY,
+    minLineY
+  };
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  return setDeltaY(state, state.deltaY + deltaY);
 };
 
 const handleWorkspaceChange = async state => {
@@ -4884,10 +4936,17 @@ const HandlePointerDown = 14;
 const HandleWheel = 15;
 const HandleDoubleClick = 16;
 
-const getExplorerWelcomeVirtualDom = isWide => {
+const getClassName$1 = dropTargets => {
+  const extraClassName = dropTargets === dropTargetFull ? ExplorerDropTarget : Empty;
+  return mergeClassNames(Viewlet, Explorer$1, extraClassName);
+};
+const getExplorerWelcomeVirtualDom = (isWide, dropTargets) => {
   return [{
     childCount: 1,
-    className: mergeClassNames(Viewlet, Explorer$1),
+    className: getClassName$1(dropTargets),
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
     tabIndex: 0,
     type: Div
   }, {
@@ -5110,7 +5169,7 @@ const getChildCount = (scrollBarDomLength, errorDomLength) => {
 };
 const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage, loadErrorMessage) => {
   if (!root) {
-    return getExplorerWelcomeVirtualDom(isWide);
+    return getExplorerWelcomeVirtualDom(isWide, dropTargets);
   }
   if (loadErrorMessage) {
     return getLoadErrorVirtualDom(loadErrorMessage);