@lvce-editor/static-server 0.113.10 → 0.113.12

package/static/{5da31a6 → 9b7102a}/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -3688,7 +3688,6 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
       hasEditingError: isEditing && Boolean(editingErrorMessage),
       icon,
       id,
-      indent,
       index: i,
       isCut,
       isEditing: isEditing,
@@ -4334,6 +4333,431 @@ const getComponentState = uid => {
   return get(uid).newState;
 };
 
+const None$2 = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
+const Button$1 = 1;
+const Div = 4;
+const Input = 6;
+const Img = 17;
+const P = 50;
+
+const errorMessageNode = {
+  childCount: 1,
+  className: mergeClassNames(ExplorerErrorMessage),
+  type: Div
+};
+const getErrorMessageDom = errorMessage => {
+  if (!errorMessage) {
+    return [];
+  }
+  return [errorMessageNode, text(errorMessage)];
+};
+
+const HandleButtonClick = 18;
+const HandleClick = 1;
+const HandleClickOpenFolder = 2;
+const HandleContextMenu = 3;
+const HandleContextMenuWelcome = 20;
+const HandleDragEnd = 19;
+const HandleDragLeave = 4;
+const HandleDragOver = 5;
+const HandleDragStart = 17;
+const HandleDrop = 6;
+const HandleEditingInput = 7;
+const HandleInputBlur = 8;
+const HandleInputClick = 9;
+const HandleKeyDown = 21;
+const HandleListBlur = 11;
+const HandleListFocus = 12;
+const HandleNativePaste = 26;
+const HandlePointerDown = 14;
+const HandlePointerUp = 25;
+const HandleScrollBarMove = 22;
+const HandleScrollBarPointerCaptureLost = 23;
+const HandleScrollBarPointerDown = 24;
+const HandleWheel = 15;
+const HandleDoubleClick = 16;
+
+const dropTargetFull = [-1];
+
+const CollapseAll$1 = 'CollapseAll';
+const ExplorerInput = 'ExplorerInput';
+const NewFile$1 = 'NewFile';
+const NewFolder$1 = 'NewFolder';
+const OpenFolder = 'OpenFolder';
+const Refresh$1 = 'Refresh';
+
+const Focusable = 0;
+
+const welcomeNode = {
+  childCount: 2,
+  className: Welcome,
+  type: Div
+};
+const welcomeMessageNode$1 = {
+  childCount: 1,
+  className: WelcomeMessage,
+  type: P
+};
+const getClassName$1 = dropTargets => {
+  const extraClassName = dropTargets === dropTargetFull ? ExplorerDropTarget : Empty;
+  return mergeClassNames(Viewlet, Explorer$1, extraClassName);
+};
+const getExplorerWelcomeVirtualDom = (isWide, dropTargets) => {
+  return [{
+    childCount: 1,
+    className: getClassName$1(dropTargets),
+    onContextMenu: HandleContextMenuWelcome,
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
+    tabIndex: Focusable,
+    type: Div
+  }, welcomeNode, welcomeMessageNode$1, text(youHaveNotYetOpenedAFolder()), {
+    childCount: 1,
+    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
+    name: OpenFolder,
+    onClick: HandleClickOpenFolder,
+    type: Button$1
+  }, text(openFolder$1())];
+};
+
+const chevronDownVirtualDom = {
+  childCount: 0,
+  className: mergeClassNames(Chevron, MaskIconChevronDown),
+  type: Div
+};
+
+const chevronRightVirtualDom = {
+  childCount: 0,
+  className: mergeClassNames(Chevron, MaskIconChevronRight),
+  type: Div
+};
+
+const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
+const getChevronVirtualDom = chevronType => {
+  return chevronDomNodes[chevronType];
+};
+
+const getFileIconVirtualDom = icon => {
+  return {
+    childCount: 0,
+    className: FileIcon,
+    role: None$2,
+    src: icon,
+    type: Img
+  };
+};
+
+const indentRegex = /(?:^| )Indent-(\d+)(?: |$)/;
+const getIndentFromClassName = className => {
+  const match = className.match(indentRegex);
+  return match ? Number.parseInt(match[1]) : 0;
+};
+
+const getInputClassName = hasEditingError => {
+  if (hasEditingError) {
+    return mergeClassNames(ExplorerInputBox, InputValidationError);
+  }
+  return ExplorerInputBox;
+};
+
+const getInputDom = (isEditing, hasEditingError, editingSessionId) => {
+  if (!isEditing) {
+    return [];
+  }
+  const ariaLabel = typeAFileName();
+  return [{
+    ariaLabel: ariaLabel,
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: getInputClassName(hasEditingError),
+    'data-editingSessionId': editingSessionId,
+    id: 'ExplorerInput',
+    name: ExplorerInput,
+    onBlur: HandleInputBlur,
+    onClick: HandleInputClick,
+    onInput: HandleEditingInput,
+    spellcheck: 'false',
+    type: Input
+  }];
+};
+
+const label = {
+  childCount: 1,
+  className: Label,
+  type: Div
+};
+const dimmedLabel = {
+  childCount: 1,
+  className: mergeClassNames(Label, LabelCut),
+  type: Div
+};
+const getLabelDom = (isEditing, name, isDimmed) => {
+  if (isEditing) {
+    return [];
+  }
+  if (isDimmed) {
+    return [dimmedLabel, text(name)];
+  }
+  return [label, text(name)];
+};
+
+const getTitle$1 = path => {
+  if (path.startsWith('file://')) {
+    return path.slice('file://'.length);
+  }
+  return path;
+};
+const getExplorerItemVirtualDom = (item, editingSessionId = 0) => {
+  const {
+    ariaExpanded,
+    chevron,
+    className,
+    depth,
+    hasEditingError,
+    icon,
+    id,
+    index,
+    isCut,
+    isEditing,
+    isIgnored,
+    name,
+    path,
+    posInSet,
+    selected,
+    setSize
+  } = item;
+  const chevronDom = getChevronVirtualDom(chevron);
+  const fileIconDom = icon ? [getFileIconVirtualDom(icon)] : [];
+  const indent = getIndentFromClassName(className);
+  return [{
+    ariaExpanded,
+    ariaLabel: name,
+    ariaLevel: depth,
+    ariaPosInSet: posInSet,
+    ariaSelected: selected ? 'true' : undefined,
+    ariaSetSize: setSize,
+    childCount: 2 + chevronDom.length,
+    className,
+    'data-index': index,
+    draggable: true,
+    id,
+    // Keep the item aligned even when the generated indent stylesheet is applied late.
+    paddingLeft: indent,
+    role: TreeItem,
+    title: getTitle$1(path),
+    type: Div
+  }, ...chevronDom, {
+    childCount: fileIconDom.length,
+    className: FileIconSlot,
+    type: Div
+  }, ...fileIconDom, ...getInputDom(isEditing, hasEditingError, editingSessionId), ...getLabelDom(isEditing, name, isCut || isIgnored)];
+};
+
+const getActiveDescendant = focusedIndex => {
+  if (focusedIndex >= 0) {
+    return 'TreeItemActive';
+  }
+  return undefined;
+};
+const getClassName = (focused, focusedIndex, dropTarget) => {
+  const extraClass1 = focused && focusedIndex === -1 ? FocusOutline : Empty;
+  const extraClass2 = dropTarget === dropTargetFull ? ExplorerDropTarget : Empty;
+  const className = mergeClassNames(ListItems, extraClass1, extraClass2);
+  return className;
+};
+const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets, editingSessionId = 0) => {
+  const dom = [{
+    ariaActiveDescendant: getActiveDescendant(focusedIndex),
+    ariaLabel: filesExplorer(),
+    childCount: visibleItems.length,
+    className: getClassName(focused, focusedIndex, dropTargets),
+    onBlur: HandleListBlur,
+    onClick: HandleClick,
+    onContextMenu: HandleContextMenu,
+    onDblClick: HandleDoubleClick,
+    onDragEnd: HandleDragEnd,
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDragStart: HandleDragStart,
+    onDrop: HandleDrop,
+    onFocus: HandleListFocus,
+    onPaste: HandleNativePaste,
+    onPointerDown: HandlePointerDown,
+    onPointerUp: HandlePointerUp,
+    onWheel: HandleWheel,
+    role: Tree,
+    tabIndex: Focusable,
+    type: Div
+    // onKeyDown: DomEventListenerFunctions.HandleListKeyDown,
+  }, ...visibleItems.flatMap(item => getExplorerItemVirtualDom(item, editingSessionId))];
+  return dom;
+};
+
+const welcomeMessageNode = {
+  childCount: 1,
+  className: WelcomeMessage,
+  type: P
+};
+const getParentNode$1 = childCount => {
+  return {
+    childCount,
+    className: mergeClassNames(Viewlet, Explorer$1),
+    role: None$2,
+    type: Div
+  };
+};
+const getLoadErrorVirtualDom = (loadErrorMessage, isWide, showOpenAnotherFolderButton) => {
+  const childCount = showOpenAnotherFolderButton ? 2 : 1;
+  const errorDom = [{
+    childCount,
+    className: Welcome,
+    type: Div
+  }, welcomeMessageNode, text(loadErrorMessage)];
+  const buttonDom = showOpenAnotherFolderButton ? [{
+    childCount: 1,
+    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
+    name: OpenFolder,
+    onClick: HandleClickOpenFolder,
+    type: Button$1
+  }, text(openAnotherFolder())] : [];
+  const parentNode = getParentNode$1(1);
+  return [parentNode, ...errorDom, ...buttonDom];
+};
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const scrollBarThumbNode = {
+  childCount: 0,
+  className: ScrollBarThumb,
+  type: Div
+};
+const scrollBarNode = {
+  childCount: 1,
+  className: mergeClassNames(ScrollBar, ScrollBarSmall),
+  onPointerDown: HandleScrollBarPointerDown,
+  type: Div
+};
+const getScrollBarVirtualDom = scrollBarHeight => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
+  }
+  return [scrollBarNode, scrollBarThumbNode];
+};
+
+const getParentNode = childCount => {
+  return {
+    childCount,
+    className: mergeClassNames(Viewlet, Explorer$1),
+    role: None$2,
+    type: Div
+  };
+};
+const getChildCount = (scrollBarDomLength, errorDomLength) => {
+  let childCount = 1;
+  if (scrollBarDomLength > 0) {
+    childCount++;
+  }
+  if (errorDomLength > 0) {
+    childCount++;
+  }
+  return childCount;
+};
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage, loadErrorMessage, showOpenAnotherFolderButton, editingSessionId = 0) => {
+  if (!root) {
+    return getExplorerWelcomeVirtualDom(isWide, dropTargets);
+  }
+  if (loadErrorMessage) {
+    return getLoadErrorVirtualDom(loadErrorMessage, isWide, showOpenAnotherFolderButton);
+  }
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight);
+  const errorDom = getErrorMessageDom(editingErrorMessage);
+  const childCount = getChildCount(scrollBarDom.length, errorDom.length);
+  const parentNode = getParentNode(childCount);
+  const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets, editingSessionId), ...scrollBarDom, ...errorDom];
+  return dom;
+};
+
+const RE_SENTENCE_END = /[.!?]$/;
+const getMissingFolderMessage = root => {
+  if (root) {
+    return `Could not open "${root}" because the folder does not exist. It may have been moved or deleted.`;
+  }
+  return 'Could not open folder because the folder does not exist. It may have been moved or deleted.';
+};
+const toSentence = message => {
+  const normalized = `${message[0].toUpperCase()}${message.slice(1)}`;
+  return RE_SENTENCE_END.test(normalized) ? normalized : `${normalized}.`;
+};
+const getLoadErrorMessage = state => {
+  const {
+    errorCode,
+    errorMessage,
+    hasError,
+    root
+  } = state;
+  if (hasError) {
+    if (errorCode === 'ENOENT') {
+      return getMissingFolderMessage(root);
+    }
+    const reason = errorMessage || 'an unexpected error occurred';
+    const code = errorCode ? ` Error code: ${errorCode}.` : '';
+    return `Could not open folder. ${toSentence(reason)}${code}`;
+  }
+  return '';
+};
+const shouldShowOpenAnotherFolderButton = state => {
+  const {
+    errorCode,
+    hasError
+  } = state;
+  return hasError && errorCode === 'ENOENT';
+};
+
+const renderItems = (oldState, newState) => {
+  const {
+    dropTargets,
+    editingErrorMessage,
+    editingSessionId,
+    focused,
+    focusedIndex,
+    height,
+    initial,
+    itemHeight,
+    items,
+    root,
+    width
+  } = newState;
+  const visibleDirents = newState.visibleExplorerItems;
+  const isWide = width > 450;
+  const contentHeight = items.length * itemHeight;
+  const loadErrorMessage = getLoadErrorMessage(newState);
+  const showOpenAnotherFolderButton = shouldShowOpenAnotherFolderButton(newState);
+  if (initial) {
+    return [SetDom2, newState.uid, []];
+  }
+  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage, loadErrorMessage, showOpenAnotherFolderButton, editingSessionId);
+  return [SetDom2, newState.uid, dom];
+};
+
+const getComponentDom = uid => {
+  const state = getComponentState(uid);
+  return renderItems(state, state)[2];
+};
+
 const getKeyBindings = () => {
   return [{
     command: 'Explorer.selectUp',
@@ -4423,7 +4847,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$2 = 0;
+const None$1 = 0;
 const Disabled = 5;
 const RestoreFocus = 6;
 
@@ -4436,13 +4860,13 @@ const menuEntrySeparator = {
 
 const menuEntryNewFile = {
   command: 'Explorer.newFile',
-  flags: None$2,
+  flags: None$1,
   id: 'newFile',
   label: newFile$1()
 };
 const menuEntryNewFolder = {
   command: 'Explorer.newFolder',
-  flags: None$2,
+  flags: None$1,
   id: 'newFolder',
   label: newFolder$1()
 };
@@ -4454,7 +4878,7 @@ const menuEntryOpenContainingFolder = {
 };
 const menuEntryOpenInIntegratedTerminal = {
   command: 'Explorer.openInIntegratedTerminal',
-  flags: None$2,
+  flags: None$1,
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal$1()
 };
@@ -4472,7 +4896,7 @@ const menuEntryCopy = {
 };
 const menuEntryPaste = {
   command: 'Explorer.handlePaste',
-  flags: None$2,
+  flags: None$1,
   id: 'paste',
   label: paste()
 };
@@ -4502,13 +4926,13 @@ const menuEntryCompareWithSelected = {
 };
 const menuEntryRename = {
   command: 'Explorer.renameDirent',
-  flags: None$2,
+  flags: None$1,
   id: 'rename',
   label: rename()
 };
 const menuEntryDelete = {
   command: 'Explorer.removeDirent',
-  flags: None$2,
+  flags: None$1,
   id: 'delete',
   label: deleteItem()
 };
@@ -4529,7 +4953,7 @@ const getWritableEntry = (state, entry) => {
 };
 const menuEntryRemoveFolderFromWorkspace = {
   command: 'Workspace.close',
-  flags: None$2,
+  flags: None$1,
   id: 'removeFolderFromWorkspace',
   label: removeFolderFromWorkspace()
 };
@@ -4619,7 +5043,7 @@ const getMouseActions = () => {
   }];
 };
 
-const getTitle$1 = state => {
+const getTitle = state => {
   const {
     pathSeparator,
     root
@@ -4627,8 +5051,12 @@ const getTitle$1 = state => {
   if (!root) {
     return 'Explorer';
   }
-  const normalizedRoot = root.endsWith(pathSeparator) && root !== pathSeparator ? root.slice(0, -pathSeparator.length) : root;
-  return getBaseName(pathSeparator, normalizedRoot) || normalizedRoot;
+  const isUri = URL.canParse(root);
+  const titlePath = isUri ? new URL(root).pathname : root;
+  const titlePathSeparator = isUri ? '/' : pathSeparator;
+  const normalizedTitlePath = titlePath.endsWith(titlePathSeparator) && titlePath !== titlePathSeparator ? titlePath.slice(0, -titlePathSeparator.length) : titlePath;
+  const title = getBaseName(titlePathSeparator, normalizedTitlePath) || normalizedTitlePath;
+  return decodeURIComponent(title);
 };
 
 const getParentStartIndex = (dirents, index) => {
@@ -4901,13 +5329,6 @@ 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 isFolder$1 = direntType => {
   return [Directory, DirectoryExpanded, SymLinkFolder].includes(direntType);
 };
@@ -5591,2394 +6012,1987 @@ const handleDragLeave = state => {
   }
   return {
     ...state,
-    dropTargets: []
-  };
-};
-
-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 (!item) {
-    return dropTargetFull;
-  }
-  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,
-    isReadonly,
-    root
-  } = state;
-  if (isReadonly && root !== '') {
-    return state;
-  }
-  const newDropTargets = getNewDropTargets(state, index);
-  if (isEqual(dropTargets, newDropTargets)) {
-    return state;
-  }
-  return {
-    ...state,
-    dropTargets: newDropTargets
-  };
-};
-
-const handleDragOver = (state, x, y) => {
-  const {
-    isReadonly,
-    root
-  } = state;
-  number(x);
-  number(y);
-  if (isReadonly && root !== '') {
-    return state;
-  }
-  const index = getIndexFromPosition(state, x, y);
-  return handleDragOverIndex(state, index);
-};
-
-const handleDragStart = state => {
-  return state;
-};
-
-const isDirectoryHandle = fileHandle => {
-  return fileHandle.kind === 'directory';
-};
-
-const getErrorCode = error => {
-  if (error && typeof error === 'object' && 'code' in error && typeof error.code === 'string') {
-    return error.code;
-  }
-  return '';
-};
-
-const getErrorMessage = error => {
-  if (error instanceof Error) {
-    return error.message;
-  }
-  if (typeof error === 'string') {
-    return error;
-  }
-  return 'Unknown error';
-};
-
-const isValid = decoration => {
-  return decoration && typeof decoration.decoration === 'string' && typeof decoration.uri === 'string';
-};
-const normalizeDecorations = decorations => {
-  if (!decorations || !Array.isArray(decorations)) {
-    return [];
-  }
-  return decorations.filter(isValid);
-};
-
-const getFileDecorations = async (scheme, root, maybeUris, decorationsEnabled, assetDir, platform) => {
-  try {
-    if (!decorationsEnabled) {
-      return [];
-    }
-    const providerIds = await invoke$2('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$2('SourceControl.getFileDecorations', providerId, uris, assetDir, platform);
-    const normalized = normalizeDecorations(decorations);
-    return normalized;
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-};
-
-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 getRestoredDeltaY = savedState => {
-  if (savedState && typeof savedState.deltaY === 'number') {
-    return savedState.deltaY;
-  }
-  return 0;
-};
-
-const getSavedRoot$1 = (savedState, workspaceUri) => {
-  return workspaceUri;
-};
-
-const RE_PROTOCOL = /^[a-z+]:\/\//;
-const getScheme = uri => {
-  const match = uri.match(RE_PROTOCOL);
-  if (!match) {
-    return '';
-  }
-  return match[0];
-};
-
-const getExcluded = excludedObject => {
-  if (!excludedObject || typeof excludedObject !== 'object' || Array.isArray(excludedObject)) {
-    return [];
-  }
-  const excluded = [];
-  for (const [key, value] of Object.entries(excludedObject)) {
-    if (value === true) {
-      excluded.push(key);
-    }
-  }
-  return excluded;
-};
-
-const getSettings = async () => {
-  // TODO don't return false always
-  // TODO get all settings at once
-  const useChevronsRaw = await invoke$3('Preferences.get', 'explorer.useChevrons');
-  const useChevrons = useChevronsRaw === false ? false : true;
-  const confirmDeleteRaw = await invoke$3('Preferences.get', 'explorer.confirmdelete');
-  const confirmDelete = confirmDeleteRaw === false ? false : true;
-  const confirmPasteRaw = await invoke$3('Preferences.get', 'explorer.confirmpaste');
-  const confirmPaste = confirmPasteRaw === false ? false : false;
-  const excludedRaw = await invoke$3('Preferences.get', 'files.exclude');
-  const excluded = getExcluded(excludedRaw);
-  const gitIgnoreDecorationsRaw = await invoke$3('Preferences.get', 'explorer.gitIgnoreDecorations');
-  const gitIgnoreDecorations = gitIgnoreDecorationsRaw === false ? false : true;
-  const preserveExpandStateRaw = await invoke$3('Preferences.get', 'explorer.preserveExpandState');
-  const preserveExpandState = preserveExpandStateRaw === false ? false : true;
-  const sourceControlDecorationsRaw = await invoke$3('Preferences.get', 'explorer.sourceControlDecorations');
-  const sourceControlDecorations = sourceControlDecorationsRaw === false ? false : true;
-  return {
-    confirmDelete,
-    confirmPaste,
-    excluded,
-    gitIgnoreDecorations,
-    preserveExpandState,
-    sourceControlDecorations,
-    useChevrons
-  };
-};
-
-const getWorkspaceUri = () => {
-  return invoke$3('Workspace.getUri');
+    dropTargets: []
+  };
 };
 
-const getSavedChildDirents = (map, path, depth, excluded, pathSeparator, root = path) => {
-  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) {
-    const childPath = displayRoot + child.name;
-    if (isExcluded(root, childPath, excluded)) {
-      continue;
-    }
-    visible.push(child);
+const canBeDroppedInto = dirent => {
+  if (!dirent) {
+    return false;
   }
-  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, root));
-    } else {
-      dirents.push({
-        depth,
-        icon: '',
-        name,
-        path: childPath,
-        posInSet: i + 1,
-        setSize: visibleLength,
-        type
-      });
-    }
+  switch (dirent.type) {
+    case Directory:
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return true;
+    default:
+      return false;
   }
-  return dirents;
 };
 
-const Fulfilled = 'fulfilled';
-const Rejected = 'rejected';
-
-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;
-    }
+const countInRange = (start, end) => {
+  const items = [];
+  for (let i = start; i <= end; i++) {
+    items.push(i);
   }
-  dirents.push(...getSavedChildDirents(map, root, 1, excluded, pathSeparator, root));
-  return dirents;
+  return items;
 };
-const getSavedExpandedPaths = (savedState, root) => {
-  if (savedState && savedState.root !== root) {
-    return [];
+
+const getNewDropTargets = (state, index) => {
+  const {
+    items
+  } = state;
+  if (index === -1) {
+    return dropTargetFull;
   }
-  if (savedState && savedState.expandedPaths && Array.isArray(savedState.expandedPaths)) {
-    return savedState.expandedPaths.filter(path => typeof path === 'string');
+  const item = items[index];
+  if (!item) {
+    return dropTargetFull;
   }
-  return [];
+  if (!canBeDroppedInto(item)) {
+    const startIndex = getParentStartIndex(items, index);
+    const endIndex = getParentEndIndex(items, index);
+    return countInRange(startIndex, endIndex);
+  }
+  const newDropTargets = [index];
+  return newDropTargets;
 };
-const restoreExpandedState = async (expandedPaths, root, pathSeparator, excluded) => {
-  // TODO read all opened folders in parallel
-  // ignore ENOENT errors
-  // ignore ENOTDIR errors
-  // merge all dirents
-  // restore scroll location
-  if (root === EmptyString) {
-    return [];
+
+const isEqual = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
   }
-  const expandedDirentPaths = [root, ...expandedPaths];
-  const expandedDirentChildren = await Promise.allSettled(expandedDirentPaths.map(getChildDirentsRaw));
-  if (expandedDirentChildren[0].status === Rejected) {
-    throw expandedDirentChildren[0].reason;
+  const {
+    length
+  } = a;
+  for (let i = 0; i < length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
   }
-  const dirents = createDirents(root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator);
-  return dirents;
+  return true;
 };
 
-const getExpandedPaths = (savedState, root, currentRoot, currentExpandedPaths, preserveExpandState) => {
-  if (!preserveExpandState) {
-    return [];
-  }
-  if (savedState !== undefined && savedState !== null) {
-    return getSavedExpandedPaths(savedState, root);
+const handleDragOverIndex = (state, index) => {
+  const {
+    dropTargets,
+    isReadonly,
+    root
+  } = state;
+  if (isReadonly && root !== '') {
+    return state;
   }
-  if (currentRoot === root) {
-    return currentExpandedPaths;
+  const newDropTargets = getNewDropTargets(state, index);
+  if (isEqual(dropTargets, newDropTargets)) {
+    return state;
   }
-  return [];
+  return {
+    ...state,
+    dropTargets: newDropTargets
+  };
 };
-const loadContent = async (state, savedState) => {
+
+const handleDragOver = (state, x, y) => {
   const {
-    assetDir,
-    expandedPaths: currentExpandedPaths,
-    height,
-    itemHeight,
-    platform,
-    root: currentRoot
+    isReadonly,
+    root
   } = state;
-  const {
-    confirmDelete,
-    excluded,
-    gitIgnoreDecorations,
-    preserveExpandState,
-    sourceControlDecorations,
-    useChevrons
-  } = await getSettings();
-  const workspaceUri = await getWorkspaceUri();
-  const root = getSavedRoot$1(savedState, workspaceUri);
-  const expandedPaths = getExpandedPaths(savedState, root, currentRoot, currentExpandedPaths, preserveExpandState);
-  try {
-    const pathSeparator = Slash;
-    const isReadonly$1 = root === '' ? false : await isReadonly(root);
-    const restoredDirents = await restoreExpandedState(expandedPaths, root, pathSeparator, excluded);
-    const rawDeltaY = getRestoredDeltaY(savedState);
-    const maxDeltaY = Math.max(restoredDirents.length * itemHeight - height, 0);
-    const deltaY = Math.min(Math.max(rawDeltaY, 0), maxDeltaY);
-    const minLineY = Math.round(deltaY / itemHeight);
-    const scheme = getScheme(root);
-    const decorations = await getFileDecorations(scheme, root, restoredDirents.filter(item => item.depth === 1).map(item => item.path), sourceControlDecorations, assetDir, platform);
-    const sourceControlIgnoredUris = await getGitIgnoredUris(root, restoredDirents, pathSeparator, gitIgnoreDecorations);
-    return {
-      ...state,
-      confirmDelete,
-      decorations,
-      deltaY,
-      errorCode: '',
-      errorMessage: '',
-      excluded,
-      expandedPaths,
-      gitIgnoreDecorations,
-      hasError: false,
-      initial: false,
-      isReadonly: isReadonly$1,
-      items: restoredDirents,
-      maxIndent: 10,
-      minLineY,
-      pathSeparator,
-      preserveExpandState,
-      root,
-      sourceControlIgnoredUris,
-      useChevrons
-    };
-  } catch (error) {
-    const errorCode = getErrorCode(error);
-    const errorMessage = getFriendlyErrorMessage(getErrorMessage(error), errorCode);
-    return {
-      ...state,
-      confirmDelete,
-      errorCode,
-      errorMessage,
-      expandedPaths,
-      gitIgnoreDecorations,
-      hasError: true,
-      initial: false,
-      isReadonly: false,
-      items: [],
-      preserveExpandState,
-      root,
-      useChevrons
-    };
+  number(x);
+  number(y);
+  if (isReadonly && root !== '') {
+    return state;
   }
+  const index = getIndexFromPosition(state, x, y);
+  return handleDragOverIndex(state, index);
 };
 
-const getChildHandles = async fileHandle => {
-  // @ts-ignore
-  const values = fileHandle.values();
-  const children = await fromAsync(values);
-  return children;
+const handleDragStart = state => {
+  return state;
 };
 
-const getFileHandleText = async fileHandle => {
-  const file = await fileHandle.getFile();
-  const text = await file.text();
-  return text;
+const isDirectoryHandle = fileHandle => {
+  return fileHandle.kind === 'directory';
+};
+
+const getErrorCode = error => {
+  if (error && typeof error === 'object' && 'code' in error && typeof error.code === 'string') {
+    return error.code;
+  }
+  return '';
+};
+
+const getErrorMessage = error => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  return 'Unknown error';
 };
 
-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$2('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$2('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 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 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;
 };
 
-const mergeDirents$1 = (oldDirents, newDirents) => {
-  return newDirents;
-};
-const getMergedDirents$2 = async (root, pathSeparator, dirents, excluded) => {
-  const childDirents = await getChildDirents(pathSeparator, root, 0, excluded, root);
-  const mergedDirents = mergeDirents$1(dirents, childDirents);
-  return mergedDirents;
+const getRestoredDeltaY = savedState => {
+  if (savedState && typeof savedState.deltaY === 'number') {
+    return savedState.deltaY;
+  }
+  return 0;
 };
-const getDroppedDirectoryWorkspacePath = fileHandle => {
-  return `html://${fileHandle.name}`;
+
+const getSavedRoot$1 = (savedState, workspaceUri) => {
+  return workspaceUri;
 };
-const openDroppedDirectoryAsWorkspace$1 = async (state, fileHandle) => {
-  const path = getDroppedDirectoryWorkspacePath(fileHandle);
-  await invoke$3('PersistentFileHandle.addHandle', fileHandle.name, fileHandle);
-  await invoke$3('Workspace.setPath', path);
-  const updated = await loadContent(state, undefined);
-  return {
-    ...updated,
-    dropTargets: []
-  };
+
+const RE_PROTOCOL = /^[a-z+]:\/\//;
+const getScheme = uri => {
+  const match = uri.match(RE_PROTOCOL);
+  if (!match) {
+    return '';
+  }
+  return match[0];
 };
-const getFirstDroppedDirectory = (state, fileHandles) => {
-  const {
-    root
-  } = state;
-  if (root !== '') {
-    return undefined;
+
+const getExcluded = excludedObject => {
+  if (!excludedObject || typeof excludedObject !== 'object' || Array.isArray(excludedObject)) {
+    return [];
   }
-  for (const fileHandle of fileHandles) {
-    if (isDirectoryHandle(fileHandle)) {
-      return fileHandle;
+  const excluded = [];
+  for (const [key, value] of Object.entries(excludedObject)) {
+    if (value === true) {
+      excluded.push(key);
     }
   }
-  return undefined;
+  return excluded;
 };
-const handleDrop$2 = async (state, fileHandles, paths) => {
-  const {
-    excluded,
-    items,
-    pathSeparator,
-    root
-  } = state;
-  const droppedDirectory = getFirstDroppedDirectory(state, fileHandles);
-  if (droppedDirectory) {
-    return openDroppedDirectoryAsWorkspace$1(state, droppedDirectory);
-  }
-  if (root === '') {
-    return {
-      ...state,
-      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, excluded);
+
+const getSettings = async () => {
+  // TODO don't return false always
+  // TODO get all settings at once
+  const useChevronsRaw = await invoke$3('Preferences.get', 'explorer.useChevrons');
+  const useChevrons = useChevronsRaw === false ? false : true;
+  const confirmDeleteRaw = await invoke$3('Preferences.get', 'explorer.confirmdelete');
+  const confirmDelete = confirmDeleteRaw === false ? false : true;
+  const confirmPasteRaw = await invoke$3('Preferences.get', 'explorer.confirmpaste');
+  const confirmPaste = confirmPasteRaw === false ? false : false;
+  const excludedRaw = await invoke$3('Preferences.get', 'files.exclude');
+  const excluded = getExcluded(excludedRaw);
+  const gitIgnoreDecorationsRaw = await invoke$3('Preferences.get', 'explorer.gitIgnoreDecorations');
+  const gitIgnoreDecorations = gitIgnoreDecorationsRaw === false ? false : true;
+  const preserveExpandStateRaw = await invoke$3('Preferences.get', 'explorer.preserveExpandState');
+  const preserveExpandState = preserveExpandStateRaw === false ? false : true;
+  const sourceControlDecorationsRaw = await invoke$3('Preferences.get', 'explorer.sourceControlDecorations');
+  const sourceControlDecorations = sourceControlDecorationsRaw === false ? false : true;
   return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
+    confirmDelete,
+    confirmPaste,
+    excluded,
+    gitIgnoreDecorations,
+    preserveExpandState,
+    sourceControlDecorations,
+    useChevrons
   };
 };
 
-const getFileOperationsElectron = async (root, paths, fileHandles, pathSeparator) => {
-  const operations = [];
-  for (let i = 0; i < paths.length; i++) {
-    const fileHandle = fileHandles[i];
+const getWorkspaceUri = () => {
+  return invoke$3('Workspace.getUri');
+};
+
+const getSavedChildDirents = (map, path, depth, excluded, pathSeparator, root = path) => {
+  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) {
+    const childPath = displayRoot + child.name;
+    if (isExcluded(root, childPath, excluded)) {
+      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$1(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, root));
+    } 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, paths) => {
-  const operations = await getFileOperationsElectron(root, paths, fileHandles, Slash);
-  await applyFileOperations(operations);
-};
+const Fulfilled = 'fulfilled';
+const Rejected = 'rejected';
 
-const mergeDirents = (oldDirents, newDirents) => {
-  return newDirents;
-};
-const getMergedDirents$1 = async (root, pathSeparator, dirents, excluded) => {
-  const childDirents = await getChildDirents(pathSeparator, root, 0, excluded, root);
-  const mergedDirents = mergeDirents(dirents, childDirents);
-  return mergedDirents;
-};
-const openDroppedDirectoryAsWorkspace = async (state, path) => {
-  await invoke$3('Workspace.setPath', path);
-  const updated = await loadContent(state, undefined);
-  return {
-    ...updated,
-    dropTargets: []
-  };
-};
-const getFirstDroppedDirectoryPath = (state, fileHandles, paths) => {
-  const {
-    root
-  } = state;
-  if (root !== '') {
-    return undefined;
-  }
-  for (let i = 0; i < fileHandles.length; i++) {
-    const fileHandle = fileHandles[i];
-    if (isDirectoryHandle(fileHandle)) {
-      return paths[i];
+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;
     }
   }
-  return undefined;
+  dirents.push(...getSavedChildDirents(map, root, 1, excluded, pathSeparator, root));
+  return dirents;
 };
-const handleDrop$1 = async (state, fileHandles, paths) => {
-  const {
-    excluded,
-    items,
-    pathSeparator,
-    root
-  } = state;
-  const droppedDirectoryPath = getFirstDroppedDirectoryPath(state, fileHandles, paths);
-  if (droppedDirectoryPath) {
-    return openDroppedDirectoryAsWorkspace(state, droppedDirectoryPath);
+const getSavedExpandedPaths = (savedState, root) => {
+  if (savedState && savedState.root !== root) {
+    return [];
   }
-  if (root === '') {
-    return {
-      ...state,
-      dropTargets: []
-    };
+  if (savedState && savedState.expandedPaths && Array.isArray(savedState.expandedPaths)) {
+    return savedState.expandedPaths.filter(path => typeof path === 'string');
   }
-  await copyFilesElectron(root, fileHandles, paths);
-  const mergedDirents = await getMergedDirents$1(root, pathSeparator, items, excluded);
-  return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
-  };
-};
-
-const directoryTypes$2 = [Directory, DirectoryExpanded, DirectoryExpanding];
-const isDirectory = item => {
-  return directoryTypes$2.includes(item.type);
-};
-const isDescendant = (path, parentPath, pathSeparator) => {
-  const prefix = parentPath.endsWith(pathSeparator) ? parentPath : `${parentPath}${pathSeparator}`;
-  return path.startsWith(prefix);
+  return [];
 };
-const join = (parentPath, name, pathSeparator) => {
-  if (parentPath.endsWith(pathSeparator)) {
-    return `${parentPath}${name}`;
+const restoreExpandedState = async (expandedPaths, root, pathSeparator, excluded) => {
+  // TODO read all opened folders in parallel
+  // ignore ENOENT errors
+  // ignore ENOTDIR errors
+  // merge all dirents
+  // restore scroll location
+  if (root === EmptyString) {
+    return [];
   }
-  return `${parentPath}${pathSeparator}${name}`;
-};
-const getTargetFolder = (state, index) => {
-  const {
-    items,
-    pathSeparator,
-    root
-  } = state;
-  if (index === -1) {
-    return root;
+  const expandedDirentPaths = [root, ...expandedPaths];
+  const expandedDirentChildren = await Promise.allSettled(expandedDirentPaths.map(getChildDirentsRaw));
+  if (expandedDirentChildren[0].status === Rejected) {
+    throw expandedDirentChildren[0].reason;
   }
-  const item = items[index];
-  if (!item) {
-    throw new Error('Drop target does not exist');
+  const dirents = createDirents(root, expandedDirentPaths, expandedDirentChildren, excluded, pathSeparator);
+  return dirents;
+};
+
+const getExpandedPaths = (savedState, root, currentRoot, currentExpandedPaths, preserveExpandState) => {
+  if (!preserveExpandState) {
+    return [];
   }
-  if (isDirectory(item)) {
-    return item.path;
+  if (savedState !== undefined && savedState !== null) {
+    return getSavedExpandedPaths(savedState, root);
   }
-  if (item.type === File) {
-    return dirname(pathSeparator, item.path);
+  if (currentRoot === root) {
+    return currentExpandedPaths;
   }
-  throw new Error('Drop target is not a file or folder');
-};
-const getTopLevelSourcePaths = (sourcePaths, pathSeparator) => {
-  const uniquePaths = [...new Set(sourcePaths)];
-  return uniquePaths.filter(path => uniquePaths.every(otherPath => otherPath === path || !isDescendant(path, otherPath, pathSeparator)));
+  return [];
 };
-const getMoveOperations = (state, sourcePaths, targetFolder) => {
+const loadContent = async (state, savedState) => {
   const {
-    items,
-    pathSeparator
+    assetDir,
+    expandedPaths: currentExpandedPaths,
+    height,
+    itemHeight,
+    platform,
+    root: currentRoot
   } = state;
-  const itemByPath = new Map(items.map(item => [item.path, item]));
-  const existingPaths = new Set(itemByPath.keys());
-  const destinationPaths = new Set();
-  const operations = [];
-  for (const sourcePath of getTopLevelSourcePaths(sourcePaths, pathSeparator)) {
-    const sourceItem = itemByPath.get(sourcePath);
-    if (!sourceItem) {
-      throw new Error(`Dragged item no longer exists: ${sourcePath}`);
-    }
-    if (sourcePath === targetFolder) {
-      continue;
-    }
-    if (isDirectory(sourceItem) && isDescendant(targetFolder, sourcePath, pathSeparator)) {
-      throw new Error(cannotMoveFolderIntoSubfolderOfItself(sourceItem.name));
-    }
-    const destinationPath = join(targetFolder, sourceItem.name, pathSeparator);
-    if (destinationPath === sourcePath) {
-      continue;
-    }
-    if (destinationPaths.has(destinationPath) || existingPaths.has(destinationPath)) {
-      throw new Error(fileOrFolderAlreadyExists(sourceItem.name));
-    }
-    destinationPaths.add(destinationPath);
-    operations.push({
-      from: sourcePath,
-      path: destinationPath
-    });
-  }
-  return operations;
-};
-const expandTargetFolder = (items, targetFolder) => {
-  return items.map(item => {
-    if (item.path === targetFolder && item.type === Directory) {
-      return {
-        ...item,
-        type: DirectoryExpanded
-      };
-    }
-    return item;
-  });
-};
-const handleInternalDrop = async (state, sourcePaths, index) => {
   const {
-    expandedPaths: oldExpandedPaths,
-    isReadonly,
-    items,
-    preserveExpandState
-  } = state;
-  if (isReadonly) {
-    return state;
-  }
-  const targetFolder = getTargetFolder(state, index);
-  const operations = getMoveOperations(state, sourcePaths, targetFolder);
-  if (operations.length === 0) {
+    confirmDelete,
+    excluded,
+    gitIgnoreDecorations,
+    preserveExpandState,
+    sourceControlDecorations,
+    useChevrons
+  } = await getSettings();
+  const workspaceUri = await getWorkspaceUri();
+  const root = getSavedRoot$1(savedState, workspaceUri);
+  const expandedPaths = getExpandedPaths(savedState, root, currentRoot, currentExpandedPaths, preserveExpandState);
+  try {
+    const pathSeparator = Slash;
+    const isReadonly$1 = root === '' ? false : await isReadonly(root);
+    const restoredDirents = await restoreExpandedState(expandedPaths, root, pathSeparator, excluded);
+    const rawDeltaY = getRestoredDeltaY(savedState);
+    const maxDeltaY = Math.max(restoredDirents.length * itemHeight - height, 0);
+    const deltaY = Math.min(Math.max(rawDeltaY, 0), maxDeltaY);
+    const minLineY = Math.round(deltaY / itemHeight);
+    const scheme = getScheme(root);
+    const decorations = await getFileDecorations(scheme, root, restoredDirents.filter(item => item.depth === 1).map(item => item.path), sourceControlDecorations, assetDir, platform);
+    const sourceControlIgnoredUris = await getGitIgnoredUris(root, restoredDirents, pathSeparator, gitIgnoreDecorations);
     return {
       ...state,
-      dropTargets: []
+      confirmDelete,
+      decorations,
+      deltaY,
+      errorCode: '',
+      errorMessage: '',
+      excluded,
+      expandedPaths,
+      gitIgnoreDecorations,
+      hasError: false,
+      initial: false,
+      isReadonly: isReadonly$1,
+      items: restoredDirents,
+      maxIndent: 10,
+      minLineY,
+      pathSeparator,
+      preserveExpandState,
+      root,
+      sourceControlIgnoredUris,
+      useChevrons
+    };
+  } catch (error) {
+    const errorCode = getErrorCode(error);
+    const errorMessage = getFriendlyErrorMessage(getErrorMessage(error), errorCode);
+    return {
+      ...state,
+      confirmDelete,
+      errorCode,
+      errorMessage,
+      expandedPaths,
+      gitIgnoreDecorations,
+      hasError: true,
+      initial: false,
+      isReadonly: false,
+      items: [],
+      preserveExpandState,
+      root,
+      useChevrons
     };
   }
-  for (const operation of operations) {
-    await rename$1(operation.from, operation.path);
-  }
-  const expandedItems = expandTargetFolder(items, targetFolder);
-  const expandedPaths = preserveExpandState ? [...new Set([...oldExpandedPaths, targetFolder])] : oldExpandedPaths;
-  const updated = await refresh({
-    ...state,
-    expandedPaths,
-    items: expandedItems
-  });
-  return {
-    ...updated,
-    dropTargets: []
-  };
 };
 
-const Electron = 2;
+const getChildHandles = async fileHandle => {
+  // @ts-ignore
+  const values = fileHandle.values();
+  const children = await fromAsync(values);
+  return children;
+};
 
-const getModule = isElectron => {
-  if (isElectron) {
-    return handleDrop$1;
-  }
-  return handleDrop$2;
+const getFileHandleText = async fileHandle => {
+  const file = await fileHandle.getFile();
+  const text = await file.text();
+  return text;
 };
-const handleDropRoot = async (state, fileHandles, paths) => {
-  const {
-    isReadonly,
-    platform,
-    root
-  } = state;
-  if (isReadonly && root !== '') {
-    return state;
-  }
-  if (fileHandles.length === 0 && paths.length > 0) {
-    return handleInternalDrop(state, paths, -1);
-  }
-  const isElectron = platform === Electron;
-  const fn = getModule(isElectron);
-  return fn(state, fileHandles, paths);
+
+const isFileHandle = fileHandle => {
+  return fileHandle.kind === 'file';
 };
 
-const getEndIndex = (items, index, dirent) => {
-  for (let i = index + 1; i < items.length; i++) {
-    if (items[i].depth === dirent.depth) {
-      return i;
+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;
     }
   }
-  return items.length;
-};
-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;
+  return uploadTree;
 };
-const handleDropIntoFolder = async (state, dirent, index, fileHandles) => {
-  const {
-    excluded,
-    items,
-    pathSeparator,
-    root
-  } = state;
-  await uploadFileSystemHandles(dirent.path, '/', fileHandles);
-  const childDirents = await getChildDirents(pathSeparator, dirent.path, dirent.depth, excluded, root);
-  const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
-  // TODO update maxlineY
-  return {
-    ...state,
-    dropTargets: [],
-    items: mergedDirents
+
+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 handleDropIntoFile = (state, dirent, index, fileHandles, paths) => {
-  const {
-    items
-  } = state;
-  const parentIndex = getParentStartIndex(items, index);
-  if (parentIndex === -1) {
-    return handleDropRoot(state, fileHandles, paths);
-  }
-  return handleDropIndex(state, fileHandles, paths, parentIndex);
-};
-const handleDropIndex = async (state, fileHandles, paths, index) => {
-  const {
-    isReadonly,
-    items
-  } = state;
-  if (isReadonly) {
-    return state;
-  }
-  if (fileHandles.length === 0 && paths.length > 0) {
-    return handleInternalDrop(state, paths, index);
-  }
-  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, paths);
-    default:
-      return state;
-  }
+  processTree(uploadTree, '');
+  return operations;
 };
 
-const getDropHandler = index => {
-  switch (index) {
-    case -1:
-      return handleDropRoot;
-    default:
-      return handleDropIndex;
+const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
+  if (fileSystemHandles.length === 0) {
+    return true;
   }
+  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;
 };
 
-const toExplorerDroppedItems = (result, isElectron) => {
-  const files = isElectron ? result.files : result.files.filter(file => file.handle);
-  const fileHandles = files.map(file => file.handle ?? {
-    kind: file.kind,
-    name: file.name
-  });
-  const paths = files.map(file => file.path);
-  return {
-    fileHandles,
-    paths,
-    uris: result.uris
-  };
+const mergeDirents$1 = (oldDirents, newDirents) => {
+  return newDirents;
 };
-const getDroppedItemsByDropId = async (dropId, isElectron) => {
-  const result = await getDroppedItemsByDropId$1(dropId, isElectron);
-  return toExplorerDroppedItems(result, isElectron);
+const getMergedDirents$2 = async (root, pathSeparator, dirents, excluded) => {
+  const childDirents = await getChildDirents(pathSeparator, root, 0, excluded, root);
+  const mergedDirents = mergeDirents$1(dirents, childDirents);
+  return mergedDirents;
 };
-const getClipboardItems = async (itemIds, isElectron) => {
-  const items = await getFileHandles(itemIds);
-  const files = items.filter(item => item.kind === 'file' || isElectron && item.kind === 'file-legacy');
-  const fileHandles = files.map(item => {
-    if (item.kind === 'file') {
-      return item.value;
-    }
-    return {
-      kind: 'file',
-      name: item.value.name
-    };
-  });
-  const paths = files.map(item => item.path ?? '');
+const getDroppedDirectoryWorkspacePath = fileHandle => {
+  return `html://${fileHandle.name}`;
+};
+const openDroppedDirectoryAsWorkspace$1 = async (state, fileHandle) => {
+  const path = getDroppedDirectoryWorkspacePath(fileHandle);
+  await invoke$3('PersistentFileHandle.addHandle', fileHandle.name, fileHandle);
+  await invoke$3('Workspace.setPath', path);
+  const updated = await loadContent(state, undefined);
   return {
-    fileHandles,
-    paths,
-    uris: []
+    ...updated,
+    dropTargets: []
   };
 };
-
-const directoryTypes$1 = new Set([Directory, DirectoryExpanded, DirectoryExpanding, EditingDirectoryExpanded, EditingFolder, SymLinkFolder]);
-const getDragUri = item => {
-  const uri = ensureUri(item.path);
-  if (directoryTypes$1.has(item.type) && !uri.endsWith('/')) {
-    return `${uri}/`;
-  }
-  return uri;
-};
-
-const getInternalDragPaths = (items, uris) => {
-  if (uris.length === 0) {
-    return [];
+const getFirstDroppedDirectory = (state, fileHandles) => {
+  const {
+    root
+  } = state;
+  if (root !== '') {
+    return undefined;
   }
-  const pathByUri = new Map(items.map(item => [getDragUri(item), item.path]));
-  const paths = [];
-  for (const uri of uris) {
-    const path = pathByUri.get(uri);
-    if (path === undefined) {
-      return [];
+  for (const fileHandle of fileHandles) {
+    if (isDirectoryHandle(fileHandle)) {
+      return fileHandle;
     }
-    paths.push(path);
   }
-  return paths;
+  return undefined;
 };
-
-const handleDrop = async (state, x, y, dropId) => {
+const handleDrop$2 = async (state, fileHandles, paths) => {
   const {
-    isReadonly,
+    excluded,
     items,
-    platform,
+    pathSeparator,
     root
   } = state;
-  if (isReadonly && root !== '') {
-    await discardDrop(dropId);
-    return state;
+  const droppedDirectory = getFirstDroppedDirectory(state, fileHandles);
+  if (droppedDirectory) {
+    return openDroppedDirectoryAsWorkspace$1(state, droppedDirectory);
   }
-  try {
-    const isElectron = platform === Electron;
+  if (root === '') {
+    return {
+      ...state,
+      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, excluded);
+  return {
+    ...state,
+    dropTargets: [],
+    items: mergedDirents
+  };
+};
+
+const getFileOperationsElectron = async (root, paths, fileHandles, pathSeparator) => {
+  const operations = [];
+  for (let i = 0; i < paths.length; i++) {
+    const fileHandle = fileHandles[i];
     const {
-      fileHandles,
-      paths,
-      uris
-    } = await getDroppedItemsByDropId(dropId, isElectron);
-    const internalPaths = getInternalDragPaths(items, uris);
-    const droppedPaths = internalPaths.length > 0 ? internalPaths : paths;
-    const index = getIndexFromPosition(state, x, y);
-    const fn = getDropHandler(index);
-    const result = await fn(state, fileHandles, droppedPaths, index);
-    return result;
-  } catch (error) {
-    throw new VError(error, 'Failed to drop files');
+      name
+    } = fileHandle;
+    const path = paths[i];
+    operations.push({
+      from: path,
+      path: join$1(pathSeparator, root, name),
+      type: Copy$1
+    });
   }
+  return operations;
 };
 
-const handleEscape = async state => {
+// TODO copy files in parallel
+const copyFilesElectron = async (root, fileHandles, paths) => {
+  const operations = await getFileOperationsElectron(root, paths, fileHandles, Slash);
+  await applyFileOperations(operations);
+};
+
+const mergeDirents = (oldDirents, newDirents) => {
+  return newDirents;
+};
+const getMergedDirents$1 = async (root, pathSeparator, dirents, excluded) => {
+  const childDirents = await getChildDirents(pathSeparator, root, 0, excluded, root);
+  const mergedDirents = mergeDirents(dirents, childDirents);
+  return mergedDirents;
+};
+const openDroppedDirectoryAsWorkspace = async (state, path) => {
+  await invoke$3('Workspace.setPath', path);
+  const updated = await loadContent(state, undefined);
   return {
-    ...focusNone(state),
-    cutItems: []
+    ...updated,
+    dropTargets: []
   };
 };
-
-const handleFocus = async state => {
+const getFirstDroppedDirectoryPath = (state, fileHandles, paths) => {
   const {
-    editingIndex
+    root
   } = state;
-  if (editingIndex !== -1) {
-    return state;
+  if (root !== '') {
+    return undefined;
   }
-  return {
-    ...state,
-    focus: List
-  };
+  for (let i = 0; i < fileHandles.length; i++) {
+    const fileHandle = fileHandles[i];
+    if (isDirectoryHandle(fileHandle)) {
+      return paths[i];
+    }
+  }
+  return undefined;
 };
-
-const updateIcons = async state => {
+const handleDrop$1 = async (state, fileHandles, paths) => {
   const {
+    excluded,
     items,
-    maxLineY,
-    minLineY
+    pathSeparator,
+    root
   } = state;
-  const visible = items.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, Object.create(null));
+  const droppedDirectoryPath = getFirstDroppedDirectoryPath(state, fileHandles, paths);
+  if (droppedDirectoryPath) {
+    return openDroppedDirectoryAsWorkspace(state, droppedDirectoryPath);
+  }
+  if (root === '') {
+    return {
+      ...state,
+      dropTargets: []
+    };
+  }
+  await copyFilesElectron(root, fileHandles, paths);
+  const mergedDirents = await getMergedDirents$1(root, pathSeparator, items, excluded);
   return {
     ...state,
-    fileIconCache: newFileIconCache,
-    icons
+    dropTargets: [],
+    items: mergedDirents
   };
 };
 
-const handleIconThemeChange = state => {
-  return updateIcons(state);
+const directoryTypes$2 = [Directory, DirectoryExpanded, DirectoryExpanding];
+const isDirectory = item => {
+  return directoryTypes$2.includes(item.type);
 };
-
-const handleInputBlur = async (state, editingSessionId) => {
+const isDescendant = (path, parentPath, pathSeparator) => {
+  const prefix = parentPath.endsWith(pathSeparator) ? parentPath : `${parentPath}${pathSeparator}`;
+  return path.startsWith(prefix);
+};
+const join = (parentPath, name, pathSeparator) => {
+  if (parentPath.endsWith(pathSeparator)) {
+    return `${parentPath}${name}`;
+  }
+  return `${parentPath}${pathSeparator}${name}`;
+};
+const getTargetFolder = (state, index) => {
   const {
-    editingErrorMessage,
-    editingIndex,
-    editingSessionId: currentEditingSessionId,
-    editingValue
+    items,
+    pathSeparator,
+    root
   } = state;
-  if (editingIndex === -1) {
-    return state;
+  if (index === -1) {
+    return root;
   }
-  if (editingSessionId !== undefined && editingSessionId !== String(currentEditingSessionId)) {
-    return state;
+  const item = items[index];
+  if (!item) {
+    throw new Error('Drop target does not exist');
   }
-  if (editingErrorMessage || !editingValue) {
-    return cancelEditInternal(state, false);
+  if (isDirectory(item)) {
+    return item.path;
   }
-  return acceptEdit(state, User);
-};
-
-const handleInputClick = state => {
-  return state;
+  if (item.type === File) {
+    return dirname(pathSeparator, item.path);
+  }
+  throw new Error('Drop target is not a file or folder');
 };
-
-const handleInputKeyDown = (state, key) => {
-  return state;
+const getTopLevelSourcePaths = (sourcePaths, pathSeparator) => {
+  const uniquePaths = [...new Set(sourcePaths)];
+  return uniquePaths.filter(path => uniquePaths.every(otherPath => otherPath === path || !isDescendant(path, otherPath, pathSeparator)));
 };
-
-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().startsWith(focusWord)) {
-      matches.push(i);
+const getMoveOperations = (state, sourcePaths, targetFolder) => {
+  const {
+    items,
+    pathSeparator
+  } = state;
+  const itemByPath = new Map(items.map(item => [item.path, item]));
+  const existingPaths = new Set(itemByPath.keys());
+  const destinationPaths = new Set();
+  const operations = [];
+  for (const sourcePath of getTopLevelSourcePaths(sourcePaths, pathSeparator)) {
+    const sourceItem = itemByPath.get(sourcePath);
+    if (!sourceItem) {
+      throw new Error(`Dragged item no longer exists: ${sourcePath}`);
     }
+    if (sourcePath === targetFolder) {
+      continue;
+    }
+    if (isDirectory(sourceItem) && isDescendant(targetFolder, sourcePath, pathSeparator)) {
+      throw new Error(cannotMoveFolderIntoSubfolderOfItself(sourceItem.name));
+    }
+    const destinationPath = join(targetFolder, sourceItem.name, pathSeparator);
+    if (destinationPath === sourcePath) {
+      continue;
+    }
+    if (destinationPaths.has(destinationPath) || existingPaths.has(destinationPath)) {
+      throw new Error(fileOrFolderAlreadyExists(sourceItem.name));
+    }
+    destinationPaths.add(destinationPath);
+    operations.push({
+      from: sourcePath,
+      path: destinationPath
+    });
   }
-  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 operations;
 };
-
-const RE_ASCII = /^[a-z]$/i;
-const isAscii = key => {
-  return RE_ASCII.test(key);
+const expandTargetFolder = (items, targetFolder) => {
+  return items.map(item => {
+    if (item.path === targetFolder && item.type === Directory) {
+      return {
+        ...item,
+        type: DirectoryExpanded
+      };
+    }
+    return item;
+  });
 };
-
-const typeAheadTimeout = {};
-const handleKeyDown = (state, defaultPrevented, key) => {
+const handleInternalDrop = async (state, sourcePaths, index) => {
   const {
-    focusedIndex,
-    focusWord,
-    focusWordTimeout,
-    items
+    expandedPaths: oldExpandedPaths,
+    isReadonly,
+    items,
+    preserveExpandState
   } = state;
-  if (defaultPrevented) {
-    return state;
-  }
-  if (focusWord && key === '') {
-    return cancelTypeAhead(state);
-  }
-  if (!isAscii(key)) {
+  if (isReadonly) {
     return state;
   }
-  const newFocusWord = focusWord + key.toLowerCase();
-  const itemNames = items.map(item => item.name);
-  const matchingIndex = filterByFocusWord(itemNames, focusedIndex, newFocusWord);
-  if (typeAheadTimeout.value) {
-    clearTimeout(typeAheadTimeout.value);
-  }
-  typeAheadTimeout.value = setTimeout(() => {
-    void invoke$3('Explorer.cancelTypeAhead');
-  }, focusWordTimeout);
-  if (matchingIndex === -1) {
+  const targetFolder = getTargetFolder(state, index);
+  const operations = getMoveOperations(state, sourcePaths, targetFolder);
+  if (operations.length === 0) {
     return {
       ...state,
-      focusWord: newFocusWord
+      dropTargets: []
     };
   }
-  return {
+  for (const operation of operations) {
+    await rename$1(operation.from, operation.path);
+  }
+  const expandedItems = expandTargetFolder(items, targetFolder);
+  const expandedPaths = preserveExpandState ? [...new Set([...oldExpandedPaths, targetFolder])] : oldExpandedPaths;
+  const updated = await refresh({
     ...state,
-    focusedIndex: matchingIndex,
-    focusWord: newFocusWord
+    expandedPaths,
+    items: expandedItems
+  });
+  return {
+    ...updated,
+    dropTargets: []
   };
 };
 
-const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
-  const executeViewletCommand = async (uid, command, ...args) => {
-    const fn = viewletCommandMap[`Explorer.${command}`];
-    if (typeof fn !== 'function') {
-      throw new TypeError(`Viewlet command not found: ${command}`);
-    }
-    await fn(uid, ...args);
-    await invoke$3('Viewlet.requestRender', uid);
-    if (takePostRenderFocus(uid)) {
-      setTimeout(() => {
-        void invoke$3('Main.focus');
-      }, 0);
-    }
-  };
-  const rpc = await create$6({
-    commandMap: {
-      'Viewlet.executeViewletCommand': executeViewletCommand
-    },
-    messagePort: port
-  });
-  if (setAsRendererProcess) {
-    set$2(rpc);
+const Electron = 2;
+
+const getModule = isElectron => {
+  if (isElectron) {
+    return handleDrop$1;
   }
+  return handleDrop$2;
 };
-
-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
-    };
+const handleDropRoot = async (state, fileHandles, paths) => {
+  const {
+    isReadonly,
+    platform,
+    root
+  } = state;
+  if (isReadonly && root !== '') {
+    return state;
   }
-  if (index >= maxLineY) {
-    return {
-      newMaxLineY: index + largerHalf,
-      newMinLineY: index - smallerHalf
-    };
+  if (fileHandles.length === 0 && paths.length > 0) {
+    return handleInternalDrop(state, paths, -1);
   }
-  return {
-    newMaxLineY: maxLineY,
-    newMinLineY: minLineY
-  };
+  const isElectron = platform === Electron;
+  const fn = getModule(isElectron);
+  return fn(state, fileHandles, paths);
 };
 
-const adjustScrollAfterPaste = (state, focusedIndex) => {
+const getEndIndex = (items, index, dirent) => {
+  for (let i = index + 1; i < items.length; i++) {
+    if (items[i].depth === dirent.depth) {
+      return i;
+    }
+  }
+  return items.length;
+};
+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 handleDropIntoFolder = async (state, dirent, index, fileHandles) => {
   const {
-    height,
-    itemHeight,
+    excluded,
     items,
-    maxLineY,
-    minLineY
+    pathSeparator,
+    root
   } = state;
-  const currentMaxLineY = Math.max(maxLineY, getExplorerMaxLineY(minLineY, height, itemHeight, items.length));
-  const {
-    newMaxLineY,
-    newMinLineY
-  } = scrollInto(focusedIndex, minLineY, currentMaxLineY);
-  const newDeltaY = newMinLineY * itemHeight;
+  await uploadFileSystemHandles(dirent.path, '/', fileHandles);
+  const childDirents = await getChildDirents(pathSeparator, dirent.path, dirent.depth, excluded, root);
+  const mergedDirents = getMergedDirents(items, index, dirent, childDirents);
+  // TODO update maxlineY
   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 handleDropIntoFile = (state, dirent, index, fileHandles, paths) => {
+  const {
+    items
+  } = state;
+  const parentIndex = getParentStartIndex(items, index);
+  if (parentIndex === -1) {
+    return handleDropRoot(state, fileHandles, paths);
   }
-
-  // Try "original copy"
-  const copyName = `${nameWithoutExtension} copy${extension}`;
-  const copyPath = join2(root, copyName);
-  if (!existingPaths.includes(copyPath)) {
-    return copyName;
+  return handleDropIndex(state, fileHandles, paths, parentIndex);
+};
+const handleDropIndex = async (state, fileHandles, paths, index) => {
+  const {
+    isReadonly,
+    items
+  } = state;
+  if (isReadonly) {
+    return state;
   }
-
-  // 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;
-    }
-    counter++;
+  if (fileHandles.length === 0 && paths.length > 0) {
+    return handleInternalDrop(state, paths, index);
   }
-};
-
-const getFileOperationsCopy = (targetUri, existingUris, files) => {
-  const operations = [];
-  const reservedUris = [...existingUris];
-  for (const file of files) {
-    const baseName = getBaseName('/', file);
-    const uniqueName = generateUniqueName(baseName, reservedUris, targetUri);
-    const newUri = join2(targetUri, uniqueName);
-    operations.push({
-      from: file,
-      path: newUri,
-      type: Copy$1
-    });
-    reservedUris.push(newUri);
+  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, paths);
+    default:
+      return state;
   }
-  return operations;
 };
 
-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,
-    pathSeparator,
-    root
-  } = state;
-  const targetUri = getParentFolder(items, focusedIndex, root, pathSeparator);
-  const targetDirents = await readDirWithFileTypes(targetUri);
-  const existingUris = targetDirents.map(dirent => join2(targetUri, dirent.name));
-  const operations = getFileOperationsCopy(targetUri, existingUris, nativeFiles.files);
-  // 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);
+const getDropHandler = index => {
+  switch (index) {
+    case -1:
+      return handleDropRoot;
+    default:
+      return handleDropIndex;
+  }
+};
 
-  // 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
-      };
+const toExplorerDroppedItems = (result, isElectron) => {
+  const files = isElectron ? result.files : result.files.filter(file => file.handle);
+  const fileHandles = files.map(file => file.handle ?? {
+    kind: file.kind,
+    name: file.name
+  });
+  const paths = files.map(file => file.path);
+  return {
+    fileHandles,
+    paths,
+    uris: result.uris
+  };
+};
+const getDroppedItemsByDropId = async (dropId, isElectron) => {
+  const result = await getDroppedItemsByDropId$1(dropId, isElectron);
+  return toExplorerDroppedItems(result, isElectron);
+};
+const getClipboardItems = async (itemIds, isElectron) => {
+  const items = await getFileHandles(itemIds);
+  const files = items.filter(item => item.kind === 'file' || isElectron && item.kind === 'file-legacy');
+  const fileHandles = files.map(item => {
+    if (item.kind === 'file') {
+      return item.value;
     }
-  }
-  // If there are no items, ensure focusedIndex is 0
-  if (latestState.items.length === 0) {
     return {
-      ...latestState,
-      focusedIndex: 0,
-      pasteShouldMove: false
+      kind: 'file',
+      name: item.value.name
     };
-  }
+  });
+  const paths = files.map(item => item.path ?? '');
   return {
-    ...latestState,
-    pasteShouldMove: false
+    fileHandles,
+    paths,
+    uris: []
   };
 };
 
-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 directoryTypes$1 = new Set([Directory, DirectoryExpanded, DirectoryExpanding, EditingDirectoryExpanded, EditingFolder, SymLinkFolder]);
+const getDragUri = item => {
+  const uri = ensureUri(item.path);
+  if (directoryTypes$1.has(item.type) && !uri.endsWith('/')) {
+    return `${uri}/`;
   }
-  return operations;
+  return uri;
 };
-const getTargetUri = (root, items, index) => {
-  if (index === -1) {
-    return root;
+
+const getInternalDragPaths = (items, uris) => {
+  if (uris.length === 0) {
+    return [];
   }
-  return items[index].path;
+  const pathByUri = new Map(items.map(item => [getDragUri(item), item.path]));
+  const paths = [];
+  for (const uri of uris) {
+    const path = pathByUri.get(uri);
+    if (path === undefined) {
+      return [];
+    }
+    paths.push(path);
+  }
+  return paths;
 };
-const handlePasteCut = async (state, nativeFiles) => {
+
+const handleDrop = async (state, x, y, dropId) => {
   const {
-    focusedIndex,
+    isReadonly,
     items,
-    pathSeparator,
+    platform,
     root
   } = 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);
-
-  // 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
-      };
-    }
+  if (isReadonly && root !== '') {
+    await discardDrop(dropId);
+    return state;
+  }
+  try {
+    const isElectron = platform === Electron;
+    const {
+      fileHandles,
+      paths,
+      uris
+    } = await getDroppedItemsByDropId(dropId, isElectron);
+    const internalPaths = getInternalDragPaths(items, uris);
+    const droppedPaths = internalPaths.length > 0 ? internalPaths : paths;
+    const index = getIndexFromPosition(state, x, y);
+    const fn = getDropHandler(index);
+    const result = await fn(state, fileHandles, droppedPaths, index);
+    return result;
+  } catch (error) {
+    throw new VError(error, 'Failed to drop files');
   }
+};
+
+const handleEscape = async state => {
   return {
-    ...latestState,
-    cutItems: [],
-    pasteShouldMove: false
+    ...focusNone(state),
+    cutItems: []
   };
 };
 
-const None$1 = 'none';
-
-const handlePaste = async state => {
+const handleFocus = async state => {
   const {
-    isReadonly,
-    pasteShouldMove
+    editingIndex
   } = state;
-  if (isReadonly) {
-    return state;
-  }
-  const nativeFiles = await readNativeFiles();
-  if (!nativeFiles) {
+  if (editingIndex !== -1) {
     return state;
   }
-  // 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
+  return {
+    ...state,
+    focus: List
+  };
+};
 
-  // If no files to paste, return original state unchanged
-  if (nativeFiles.type === None$1) {
-    return state;
-  }
+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
+  };
+};
 
-  // Use the pasteShouldMove flag to determine whether to cut or copy
-  if (pasteShouldMove) {
-    return handlePasteCut(state, nativeFiles);
-  }
-  return handlePasteCopy(state, nativeFiles);
+const handleIconThemeChange = state => {
+  return updateIcons(state);
 };
 
-const handleNativePaste = async (state, itemIds) => {
+const handleInputBlur = async (state, editingSessionId) => {
   const {
-    focusedIndex,
-    isReadonly,
-    platform
+    editingErrorMessage,
+    editingIndex,
+    editingSessionId: currentEditingSessionId,
+    editingValue
   } = state;
-  if (isReadonly) {
+  if (editingIndex === -1) {
     return state;
   }
-  if (itemIds.length === 0) {
-    return handlePaste(state);
-  }
-  try {
-    const isElectron = platform === Electron;
-    const {
-      fileHandles,
-      paths
-    } = await getClipboardItems(itemIds, isElectron);
-    if (isElectron) {
-      const nativePaths = paths.filter(Boolean);
-      if (nativePaths.length === 0) {
-        return handlePaste(state);
-      }
-      return handlePasteCopy(state, {
-        files: nativePaths,
-        source: 'gnomeCopiedFiles',
-        type: 'copy'
-      });
-    }
-    const handleDrop = getDropHandler(focusedIndex);
-    return handleDrop(state, fileHandles, paths, focusedIndex);
-  } catch (error) {
-    throw new VError(error, 'Failed to paste native files');
-  }
-};
-
-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
-    };
+  if (editingSessionId !== undefined && editingSessionId !== String(currentEditingSessionId)) {
+    return state;
   }
-  if (button === LeftClick) {
-    return {
-      ...state,
-      isPointerDown: true,
-      pointerDownIndex: index
-    };
+  if (editingErrorMessage || !editingValue) {
+    return cancelEditInternal(state, false);
   }
+  return acceptEdit(state, User);
+};
+
+const handleInputClick = state => {
   return state;
 };
 
-const handlePointerUp = state => {
-  const {
-    isPointerDown,
-    pointerDownIndex
-  } = state;
-  if (!isPointerDown && pointerDownIndex === -1) {
-    return state;
-  }
-  return {
-    ...state,
-    isPointerDown: false,
-    pointerDownIndex: -1
-  };
+const handleInputKeyDown = (state, key) => {
+  return state;
 };
 
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
+const filterByFocusWord = (items, focusedIndex, focusWord) => {
+  if (items.length === 0) {
+    return -1;
   }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+  const matches = [];
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].toLowerCase().startsWith(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 handleResize = (state, dimensions) => {
+const RE_ASCII = /^[a-z]$/i;
+const isAscii = key => {
+  return RE_ASCII.test(key);
+};
+
+const typeAheadTimeout = {};
+const handleKeyDown = (state, defaultPrevented, key) => {
   const {
-    deltaY: currentDeltaY,
-    height: currentHeight,
-    itemHeight,
-    items,
-    maxLineY: currentMaxLineY,
-    minLineY: currentMinLineY,
-    scrollBarHeight: currentScrollBarHeight,
-    width: currentWidth
+    focusedIndex,
+    focusWord,
+    focusWordTimeout,
+    items
   } = state;
-  const {
-    height: rawHeight,
-    width: rawWidth
-  } = dimensions;
-  if (!Number.isFinite(rawHeight) || !Number.isFinite(rawWidth)) {
+  if (defaultPrevented) {
     return state;
   }
-  const height = Math.max(0, rawHeight);
-  const width = Math.max(0, rawWidth);
-  const contentHeight = items.length * itemHeight;
-  const maxDeltaY = Math.max(contentHeight - height, 0);
-  const newDeltaY = Math.min(Math.max(currentDeltaY, 0), maxDeltaY);
-  const minLineY = Math.round(newDeltaY / itemHeight);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  if (currentHeight === height && currentWidth === width && currentDeltaY === newDeltaY && currentMinLineY === minLineY && currentMaxLineY === maxLineY && currentScrollBarHeight === scrollBarHeight) {
+  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 (typeAheadTimeout.value) {
+    clearTimeout(typeAheadTimeout.value);
+  }
+  typeAheadTimeout.value = setTimeout(() => {
+    void invoke$3('Explorer.cancelTypeAhead');
+  }, focusWordTimeout);
+  if (matchingIndex === -1) {
+    return {
+      ...state,
+      focusWord: newFocusWord
+    };
+  }
   return {
     ...state,
-    deltaY: newDeltaY,
-    height,
-    maxLineY,
-    minLineY,
-    scrollBarHeight,
-    width
+    focusedIndex: matchingIndex,
+    focusWord: newFocusWord
   };
 };
 
-const handleScrollBarCaptureLost = state => {
-  return {
-    ...state,
-    scrollBarActive: false
+const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess = true) => {
+  const executeViewletCommand = async (uid, command, ...args) => {
+    const fn = viewletCommandMap[`Explorer.${command}`];
+    if (typeof fn !== 'function') {
+      throw new TypeError(`Viewlet command not found: ${command}`);
+    }
+    await fn(uid, ...args);
+    await invoke$3('Viewlet.requestRender', uid);
+    if (takePostRenderFocus(uid)) {
+      setTimeout(() => {
+        void invoke$3('Main.focus');
+      }, 0);
+    }
   };
+  const rpc = await create$6({
+    commandMap: {
+      'Viewlet.executeViewletCommand': executeViewletCommand
+    },
+    messagePort: port
+  });
+  if (setAsRendererProcess) {
+    set$2(rpc);
+  }
 };
 
-const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
-  const halfScrollBarHeight = scrollBarHeight / 2;
-  if (relativeY <= halfScrollBarHeight) {
+const scrollInto = (index, minLineY, maxLineY) => {
+  const diff = maxLineY - minLineY;
+  const smallerHalf = Math.floor(diff / 2);
+  const largerHalf = diff - smallerHalf;
+  if (index < minLineY) {
     return {
-      handleOffset: relativeY,
-      percent: 0
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
     };
   }
-  if (relativeY <= height - halfScrollBarHeight) {
+  if (index >= maxLineY) {
     return {
-      handleOffset: halfScrollBarHeight,
-      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+      newMaxLineY: index + largerHalf,
+      newMinLineY: index - smallerHalf
     };
   }
   return {
-    handleOffset: scrollBarHeight - height + relativeY,
-    percent: 1
+    newMaxLineY: maxLineY,
+    newMinLineY: minLineY
   };
 };
 
-const setDeltaY = async (state, deltaY) => {
+const adjustScrollAfterPaste = (state, focusedIndex) => {
   const {
-    deltaY: currentDeltaY,
     height,
     itemHeight,
-    items
-  } = state;
-  if (!Number.isFinite(deltaY)) {
-    return state;
-  }
-  if (deltaY < 0) {
-    deltaY = 0;
-  } else if (deltaY > items.length * itemHeight - height) {
-    deltaY = Math.max(items.length * itemHeight - height, 0);
-  }
-  if (currentDeltaY === deltaY) {
-    return state;
-  }
-  const minLineY = Math.round(deltaY / itemHeight);
-  const maxLineY = minLineY + Math.round(height / itemHeight);
-  return {
-    ...state,
-    deltaY,
+    items,
     maxLineY,
     minLineY
-  };
-};
-
-const handleScrollBarClick = async (state, eventY) => {
-  const {
-    deltaY,
-    height,
-    itemHeight,
-    items,
-    y
   } = state;
-  const contentHeight = items.length * itemHeight;
-  const finalDeltaY = Math.max(contentHeight - height, 0);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  const availableTrackHeight = height - scrollBarHeight;
-  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
-    return state;
-  }
-  const relativeY = eventY - y;
-  const currentScrollBarY = deltaY / finalDeltaY * availableTrackHeight;
-  const offsetInThumb = relativeY - currentScrollBarY;
-  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
-    return {
-      ...state,
-      handleOffset: offsetInThumb,
-      scrollBarActive: true
-    };
-  }
+  const currentMaxLineY = Math.max(maxLineY, getExplorerMaxLineY(minLineY, height, itemHeight, items.length));
   const {
-    handleOffset,
-    percent
-  } = getNewDeltaYPercent(height, scrollBarHeight, relativeY);
+    newMaxLineY,
+    newMinLineY
+  } = scrollInto(focusedIndex, minLineY, currentMaxLineY);
+  const newDeltaY = newMinLineY * itemHeight;
   return {
-    ...(await setDeltaY(state, percent * finalDeltaY)),
-    handleOffset,
-    scrollBarActive: true
+    ...state,
+    deltaY: newDeltaY,
+    focused: true,
+    focusedIndex,
+    maxLineY: newMaxLineY,
+    minLineY: newMinLineY
   };
 };
 
-const handleScrollBarMove = async (state, eventY) => {
-  const {
-    handleOffset,
-    height,
-    itemHeight,
-    items,
-    scrollBarActive,
-    y
-  } = state;
-  if (!scrollBarActive) {
-    return state;
+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 = '';
   }
-  const contentHeight = items.length * itemHeight;
-  const finalDeltaY = Math.max(contentHeight - height, 0);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  const availableTrackHeight = height - scrollBarHeight;
-  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
-    return state;
+
+  // Check if original name exists
+  const originalPath = join2(root, baseName);
+  if (!existingPaths.includes(originalPath)) {
+    return baseName;
   }
-  const relativeY = eventY - y - handleOffset;
-  const percent = relativeY / availableTrackHeight;
-  return setDeltaY(state, percent * finalDeltaY);
-};
 
-const handleUpload = async (state, dirents) => {
-  const {
-    isReadonly,
-    pathSeparator,
-    root
-  } = state;
-  if (isReadonly) {
-    return state;
+  // Try "original copy"
+  const copyName = `${nameWithoutExtension} copy${extension}`;
+  const copyPath = join2(root, copyName);
+  if (!existingPaths.includes(copyPath)) {
+    return copyName;
   }
-  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) {
-      continue;
+
+  // 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 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);
+    counter++;
   }
 };
 
-const handleWheel = (state, deltaMode, deltaY) => {
-  const {
-    deltaY: currentDeltaY
-  } = state;
-  return setDeltaY(state, currentDeltaY + deltaY);
+const getFileOperationsCopy = (targetUri, existingUris, files) => {
+  const operations = [];
+  const reservedUris = [...existingUris];
+  for (const file of files) {
+    const baseName = getBaseName('/', file);
+    const uniqueName = generateUniqueName(baseName, reservedUris, targetUri);
+    const newUri = join2(targetUri, uniqueName);
+    operations.push({
+      from: file,
+      path: newUri,
+      type: Copy$1
+    });
+    reservedUris.push(newUri);
+  }
+  return operations;
 };
 
-const handleWorkspaceChange = async (state, _workspaceUri, savedState) => {
+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,
+    pathSeparator,
     root
   } = state;
-  const newRoot = await getWorkspaceUri();
-  const state1 = newRoot === root ? state : {
-    ...state,
-    expandedPaths: [],
-    root: newRoot
-  };
-  const newState = await loadContent(state1, savedState);
-  return newState;
-};
+  const targetUri = getParentFolder(items, focusedIndex, root, pathSeparator);
+  const targetDirents = await readDirWithFileTypes(targetUri);
+  const existingUris = targetDirents.map(dirent => join2(targetUri, dirent.name));
+  const operations = getFileOperationsCopy(targetUri, existingUris, nativeFiles.files);
+  // TODO handle error?
+  await applyFileOperations(operations);
 
-const handleWorkspaceRefresh = async state => {
-  return refresh(state);
-};
+  // 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);
 
-const initialize = async () => {
-  // this function is not needed anymore
+  // 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 {
+    ...latestState,
+    pasteShouldMove: false
+  };
 };
 
-const getContainingFolder = (root, dirents, focusedIndex, pathSeparator) => {
-  if (focusedIndex < 0) {
-    return root;
+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 dirent = dirents[focusedIndex];
-  const direntPath = dirent.path;
-  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
-  const path = direntParentPath;
-  return path;
+  return operations;
 };
-
-const openNativeFolder = async path => {
-  await invoke$3('OpenNativeFolder.openNativeFolder', /* path */path);
+const getTargetUri = (root, items, index) => {
+  if (index === -1) {
+    return root;
+  }
+  return items[index].path;
 };
-
-const openContainingFolder = async state => {
+const handlePasteCut = async (state, nativeFiles) => {
   const {
     focusedIndex,
     items,
+    pathSeparator,
     root
   } = state;
-  const path = getContainingFolder(root, items, focusedIndex);
-  await openNativeFolder(path);
-  return 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);
+
+  // 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
+      };
+    }
+  }
+  return {
+    ...latestState,
+    cutItems: [],
+    pasteShouldMove: false
+  };
 };
 
-const directoryTypes = new Set([Directory, DirectoryExpanded, DirectoryExpanding, SymLinkFolder]);
-const getIntegratedTerminalCwd = state => {
+const None = 'none';
+
+const handlePaste = async state => {
   const {
-    focusedIndex,
-    items,
-    pathSeparator,
-    root
+    isReadonly,
+    pasteShouldMove
   } = state;
-  if (focusedIndex < 0 || focusedIndex >= items.length) {
-    return root;
+  if (isReadonly) {
+    return state;
   }
-  const item = items[focusedIndex];
-  if (directoryTypes.has(item.type)) {
-    return item.path;
+  const nativeFiles = await readNativeFiles();
+  if (!nativeFiles) {
+    return state;
   }
-  return dirname(pathSeparator, item.path);
-};
-
-const openInIntegratedTerminal = async state => {
-  const cwd = getIntegratedTerminalCwd(state);
-  await invoke$3('Layout.openIntegratedTerminal', cwd);
-  return state;
-};
+  // 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 confirmDelete = async items => {
-  // TODO use i18n string
-  const names = items.map(item => `"${item.name}"`).join(', ');
-  const message = items.length === 1 ? `Are you sure you want to delete "${items[0].path}"?` : `Are you sure you want to delete ${names}?`;
-  const result = await confirm(message);
-  return result;
-};
+  // If no files to paste, return original state unchanged
+  if (nativeFiles.type === None) {
+    return state;
+  }
 
-const showErrorAlert = async errorMessage => {
-  await confirm(errorMessage);
+  // Use the pasteShouldMove flag to determine whether to cut or copy
+  if (pasteShouldMove) {
+    return handlePasteCut(state, nativeFiles);
+  }
+  return handlePasteCopy(state, nativeFiles);
 };
 
-const removeDirent = async state => {
+const handleNativePaste = async (state, itemIds) => {
   const {
-    confirmDelete: confirmDelete$1,
     focusedIndex,
     isReadonly,
-    items
+    platform
   } = state;
   if (isReadonly) {
     return state;
   }
-  const selectedItems = getSelectedItems(items, focusedIndex);
-  if (selectedItems.length === 0) {
-    return state;
+  if (itemIds.length === 0) {
+    return handlePaste(state);
   }
-  const toRemove = getPaths(selectedItems);
-  if (confirmDelete$1) {
-    const confirmed = await confirmDelete(selectedItems);
-    if (!confirmed) {
-      return state;
+  try {
+    const isElectron = platform === Electron;
+    const {
+      fileHandles,
+      paths
+    } = await getClipboardItems(itemIds, isElectron);
+    if (isElectron) {
+      const nativePaths = paths.filter(Boolean);
+      if (nativePaths.length === 0) {
+        return handlePaste(state);
+      }
+      return handlePasteCopy(state, {
+        files: nativePaths,
+        source: 'gnomeCopiedFiles',
+        type: 'copy'
+      });
     }
+    const handleDrop = getDropHandler(focusedIndex);
+    return handleDrop(state, fileHandles, paths, focusedIndex);
+  } catch (error) {
+    throw new VError(error, 'Failed to paste native files');
   }
-  const fileOperations = toRemove.map(item => {
+};
+
+const handlePointerDown = (state, button, x, y) => {
+  const index = getIndexFromPosition(state, x, y);
+  if (button === LeftClick && index === -1) {
     return {
-      path: item,
-      type: Remove
+      ...state,
+      focus: List,
+      focused: true,
+      focusedIndex: -1
     };
-  });
-  // TODO use bulk edit and explorer refresh
-  const errorMessage = await applyFileOperations(fileOperations);
-  if (errorMessage) {
-    await showErrorAlert(errorMessage);
-    return state;
   }
-  const newState = await refresh(state);
-  return {
-    ...newState,
-    focus: List,
-    focused: true
-  };
-};
-
-const getEditingType = direntType => {
-  if (direntType < DELTA_EDITING) {
-    return direntType + DELTA_EDITING;
+  if (button === LeftClick) {
+    return {
+      ...state,
+      isPointerDown: true,
+      pointerDownIndex: index
+    };
   }
-  return direntType;
-};
-
-const getNewDirentsForRename = (items, focusedIndex) => {
-  const item = items[focusedIndex];
-  const editingType = getEditingType(item.type);
-  return [...items.slice(0, focusedIndex), {
-    ...item,
-    type: editingType
-  }, ...items.slice(focusedIndex + 1)];
+  return state;
 };
 
-const getRenameSelectionRange = name => {
-  const dotIndex = name.lastIndexOf('.');
-  if (dotIndex === -1) {
-    return {
-      end: name.length,
-      start: 0
-    };
+const handlePointerUp = state => {
+  const {
+    isPointerDown,
+    pointerDownIndex
+  } = state;
+  if (!isPointerDown && pointerDownIndex === -1) {
+    return state;
   }
   return {
-    end: dotIndex,
-    start: 0
+    ...state,
+    isPointerDown: false,
+    pointerDownIndex: -1
   };
 };
 
-const renameDirent = async state => {
+const handleResize = (state, dimensions) => {
   const {
-    editingSessionId,
-    focusedIndex,
-    icons,
-    isReadonly,
+    deltaY: currentDeltaY,
+    height: currentHeight,
+    itemHeight,
     items,
-    minLineY
+    maxLineY: currentMaxLineY,
+    minLineY: currentMinLineY,
+    scrollBarHeight: currentScrollBarHeight,
+    width: currentWidth
   } = state;
-  if (isReadonly) {
+  const {
+    height: rawHeight,
+    width: rawWidth
+  } = dimensions;
+  if (!Number.isFinite(rawHeight) || !Number.isFinite(rawWidth)) {
     return state;
   }
-  if (items.length === 0) {
+  const height = Math.max(0, rawHeight);
+  const width = Math.max(0, rawWidth);
+  const contentHeight = items.length * itemHeight;
+  const maxDeltaY = Math.max(contentHeight - height, 0);
+  const newDeltaY = Math.min(Math.max(currentDeltaY, 0), maxDeltaY);
+  const minLineY = Math.round(newDeltaY / itemHeight);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  if (currentHeight === height && currentWidth === width && currentDeltaY === newDeltaY && currentMinLineY === minLineY && currentMaxLineY === maxLineY && currentScrollBarHeight === scrollBarHeight) {
     return state;
   }
-  const item = items[focusedIndex];
-  const newItems = getNewDirentsForRename(items, focusedIndex);
-  const {
-    end,
-    start
-  } = getRenameSelectionRange(item.name);
   return {
     ...state,
-    editingIcon: icons[focusedIndex - minLineY],
-    editingIndex: focusedIndex,
-    editingSelectionEnd: end,
-    editingSelectionStart: start,
-    editingSessionId: editingSessionId + 1,
-    editingType: Rename$1,
-    editingValue: item.name,
-    focus: Input$1,
-    inputSource: Script,
-    items: newItems
+    deltaY: newDeltaY,
+    height,
+    maxLineY,
+    minLineY,
+    scrollBarHeight,
+    width
   };
 };
 
-const getIndentRule = indent => {
-  return `.Indent-${indent} {
-  padding-left: ${indent}px;
-}`;
-};
-
-const getCss = (scrollBarHeight, scrollBarTop, uniqueIndents, errorMessageLeft, errorMessageTop, errorMessageWidth) => {
-  const rules = [`.Explorer {
-  --ScrollBarThumbHeight: ${scrollBarHeight}px;
-  --ScrollBarThumbTop: ${scrollBarTop}px;
-  --ErrorMessageTop: ${errorMessageTop}px;
-  --ErrorMessageLeft: ${errorMessageLeft}px;
-  --ErrorMessageWidth: ${errorMessageWidth}px;
-}
-.Explorer .ScrollBarThumb {
-  height: var(--ScrollBarThumbHeight);
-  translate: 0px var(--ScrollBarThumbTop);
-}`, ...uniqueIndents.map(getIndentRule)];
-  const css = rules.join('\n');
-  return css;
-};
-
-const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding, width) => {
-  const top = itemHeight * (focusedIndex - minLineY + 1);
-  const left = depth * indent + fileIconWidth + padding;
-  const errorMessageWidth = width - left;
+const handleScrollBarCaptureLost = state => {
   return {
-    errorMessageWidth,
-    left,
-    top
+    ...state,
+    scrollBarActive: false
   };
 };
 
-const getScrollBarTop = (height, contentHeight, scrollTop, scrollBarHeight) => {
-  const finalScrollTop = contentHeight - height;
-  if (finalScrollTop <= 0 || !Number.isFinite(finalScrollTop)) {
-    return 0;
-  }
-  const scrollBarTop = Math.round(scrollTop / finalScrollTop * (height - scrollBarHeight));
-  if (!Number.isFinite(scrollBarTop)) {
-    return 0;
+const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
   }
-  return scrollBarTop;
-};
-
-const getUnique = items => {
-  const seens = [];
-  for (const item of items) {
-    if (!seens.includes(item)) {
-      seens.push(item);
-    }
+  if (relativeY <= height - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
   }
-  return seens;
-};
-
-const getIndent = item => item.indent;
-const getUniqueIndents = items => {
-  const indents = items.map(getIndent);
-  const uniqueIndents = getUnique(indents);
-  return uniqueIndents;
+  return {
+    handleOffset: scrollBarHeight - height + relativeY,
+    percent: 1
+  };
 };
 
-const renderCss = (oldState, newState) => {
+const setDeltaY = async (state, deltaY) => {
   const {
-    chevronSpace,
-    defaultPaddingLeft,
-    deltaY,
-    fileIconWidth,
-    focusedIndex,
+    deltaY: currentDeltaY,
     height,
-    indent,
     itemHeight,
-    items,
-    minLineY,
-    padding,
-    uid,
-    visibleExplorerItems,
-    width
-  } = newState;
-  const uniqueIndents = getUniqueIndents(visibleExplorerItems);
-  const contentHeight = items.length * itemHeight;
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY, scrollBarHeight);
-  const depth = items[focusedIndex]?.depth || 0;
-  const {
-    errorMessageWidth,
-    left,
-    top
-  } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace, width);
-  const css = getCss(scrollBarHeight, scrollBarTop, uniqueIndents, left, top, errorMessageWidth);
-  return [SetCss, uid, css];
-};
-
-const getDragLabel = urls => {
-  if (urls.length === 1) {
-    return getBaseName('/', urls[0]);
+    items
+  } = state;
+  if (!Number.isFinite(deltaY)) {
+    return state;
   }
-  return String(urls.length);
-};
-
-const getDragData = items => {
-  const data = items.map(getDragUri).join('\n');
-  const dragData = [{
-    data,
-    type: 'text/uri-list'
-  }, {
-    data,
-    type: 'text/plain'
-  }];
+  if (deltaY < 0) {
+    deltaY = 0;
+  } else if (deltaY > items.length * itemHeight - height) {
+    deltaY = Math.max(items.length * itemHeight - height, 0);
+  }
+  if (currentDeltaY === deltaY) {
+    return state;
+  }
+  const minLineY = Math.round(deltaY / itemHeight);
+  const maxLineY = minLineY + Math.round(height / itemHeight);
   return {
-    items: dragData,
-    label: getDragLabel(items.map(item => item.path))
+    ...state,
+    deltaY,
+    maxLineY,
+    minLineY
   };
 };
 
-const renderDragData = (oldState, newState) => {
+const handleScrollBarClick = async (state, eventY) => {
   const {
-    focusedIndex,
-    isPointerDown,
+    deltaY,
+    height,
+    itemHeight,
     items,
-    pointerDownIndex,
-    uid
-  } = newState;
-  if (!isPointerDown) {
-    return [];
+    y
+  } = state;
+  const contentHeight = items.length * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const availableTrackHeight = height - scrollBarHeight;
+  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
+    return state;
   }
-  const pointerDownItem = items[pointerDownIndex];
-  let draggedItems;
-  if (pointerDownIndex === focusedIndex || pointerDownItem?.selected) {
-    draggedItems = getSelectedItems(items, focusedIndex);
-  } else if (pointerDownItem) {
-    draggedItems = [pointerDownItem];
-  } else {
-    draggedItems = [];
+  const relativeY = eventY - y;
+  const currentScrollBarY = deltaY / finalDeltaY * availableTrackHeight;
+  const offsetInThumb = relativeY - currentScrollBarY;
+  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: offsetInThumb,
+      scrollBarActive: true
+    };
   }
-  const dragData = getDragData(draggedItems);
-  return ['Viewlet.setDragData', uid, dragData];
-};
-
-const renderEditingSelection = (oldState, newState) => {
   const {
-    editingSelectionEnd,
-    editingSelectionStart,
-    uid
-  } = newState;
-  return ['Viewlet.setSelectionByName', uid, ExplorerInput, editingSelectionStart, editingSelectionEnd];
+    handleOffset,
+    percent
+  } = getNewDeltaYPercent(height, scrollBarHeight, relativeY);
+  return {
+    ...(await setDeltaY(state, percent * finalDeltaY)),
+    handleOffset,
+    scrollBarActive: true
+  };
 };
 
-const renderFocus = (oldState, newState) => {
-  if (newState.inputSource === User) {
-    return [];
-  }
-  if (newState.focus === Input$1) {
-    return [FocusElementByName, newState.uid, ExplorerInput];
+const handleScrollBarMove = async (state, eventY) => {
+  const {
+    handleOffset,
+    height,
+    itemHeight,
+    items,
+    scrollBarActive,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
   }
-  if (newState.focus === List) {
-    return [FocusSelector, newState.uid, '.ListItems'];
+  const contentHeight = items.length * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const availableTrackHeight = height - scrollBarHeight;
+  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
+    return state;
   }
-  // TODO
-  // 1. when focused, focus the outer list element
-  // 2. when focused, set focus context in renderer worker
-  return [];
+  const relativeY = eventY - y - handleOffset;
+  const percent = relativeY / availableTrackHeight;
+  return setDeltaY(state, percent * finalDeltaY);
 };
 
-const renderFocusContext = (oldState, newState) => {
+const handleUpload = async (state, dirents) => {
   const {
-    uid
-  } = newState;
-  if (newState.focus === Input$1) {
-    return [SetFocusContext, uid, FocusExplorerEditBox];
+    isReadonly,
+    pathSeparator,
+    root
+  } = state;
+  if (isReadonly) {
+    return state;
   }
-  if (newState.focus === List) {
-    return [SetFocusContext, uid, FocusExplorer];
+  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) {
+      continue;
+    }
+    // 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);
   }
-  return [];
 };
 
-const None = 'none';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem = 'treeitem';
-
-const Button$1 = 1;
-const Div = 4;
-const Input = 6;
-const Img = 17;
-const P = 50;
-
-const errorMessageNode = {
-  childCount: 1,
-  className: mergeClassNames(ExplorerErrorMessage),
-  type: Div
+const handleWheel = (state, deltaMode, deltaY) => {
+  const {
+    deltaY: currentDeltaY
+  } = state;
+  return setDeltaY(state, currentDeltaY + deltaY);
 };
-const getErrorMessageDom = errorMessage => {
-  if (!errorMessage) {
-    return [];
-  }
-  return [errorMessageNode, text(errorMessage)];
+
+const handleWorkspaceChange = async (state, _workspaceUri, savedState) => {
+  const {
+    root
+  } = state;
+  const newRoot = await getWorkspaceUri();
+  const state1 = newRoot === root ? state : {
+    ...state,
+    expandedPaths: [],
+    root: newRoot
+  };
+  const newState = await loadContent(state1, savedState);
+  return newState;
 };
 
-const HandleButtonClick = 18;
-const HandleClick = 1;
-const HandleClickOpenFolder = 2;
-const HandleContextMenu = 3;
-const HandleContextMenuWelcome = 20;
-const HandleDragEnd = 19;
-const HandleDragLeave = 4;
-const HandleDragOver = 5;
-const HandleDragStart = 17;
-const HandleDrop = 6;
-const HandleEditingInput = 7;
-const HandleInputBlur = 8;
-const HandleInputClick = 9;
-const HandleKeyDown = 21;
-const HandleListBlur = 11;
-const HandleListFocus = 12;
-const HandleNativePaste = 26;
-const HandlePointerDown = 14;
-const HandlePointerUp = 25;
-const HandleScrollBarMove = 22;
-const HandleScrollBarPointerCaptureLost = 23;
-const HandleScrollBarPointerDown = 24;
-const HandleWheel = 15;
-const HandleDoubleClick = 16;
+const handleWorkspaceRefresh = async state => {
+  return refresh(state);
+};
 
-const Focusable = 0;
+const initialize = async () => {
+  // this function is not needed anymore
+};
 
-const welcomeNode = {
-  childCount: 2,
-  className: Welcome,
-  type: Div
+const getContainingFolder = (root, dirents, focusedIndex, pathSeparator) => {
+  if (focusedIndex < 0) {
+    return root;
+  }
+  const dirent = dirents[focusedIndex];
+  const direntPath = dirent.path;
+  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
+  const path = direntParentPath;
+  return path;
 };
-const welcomeMessageNode$1 = {
-  childCount: 1,
-  className: WelcomeMessage,
-  type: P
+
+const openNativeFolder = async path => {
+  await invoke$3('OpenNativeFolder.openNativeFolder', /* path */path);
 };
-const getClassName$1 = dropTargets => {
-  const extraClassName = dropTargets === dropTargetFull ? ExplorerDropTarget : Empty;
-  return mergeClassNames(Viewlet, Explorer$1, extraClassName);
+
+const openContainingFolder = async state => {
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const path = getContainingFolder(root, items, focusedIndex);
+  await openNativeFolder(path);
+  return state;
 };
-const getExplorerWelcomeVirtualDom = (isWide, dropTargets) => {
-  return [{
-    childCount: 1,
-    className: getClassName$1(dropTargets),
-    onContextMenu: HandleContextMenuWelcome,
-    onDragLeave: HandleDragLeave,
-    onDragOver: HandleDragOver,
-    onDrop: HandleDrop,
-    tabIndex: Focusable,
-    type: Div
-  }, welcomeNode, welcomeMessageNode$1, text(youHaveNotYetOpenedAFolder()), {
-    childCount: 1,
-    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
-    name: OpenFolder,
-    onClick: HandleClickOpenFolder,
-    type: Button$1
-  }, text(openFolder$1())];
+
+const directoryTypes = new Set([Directory, DirectoryExpanded, DirectoryExpanding, SymLinkFolder]);
+const getIntegratedTerminalCwd = state => {
+  const {
+    focusedIndex,
+    items,
+    pathSeparator,
+    root
+  } = state;
+  if (focusedIndex < 0 || focusedIndex >= items.length) {
+    return root;
+  }
+  const item = items[focusedIndex];
+  if (directoryTypes.has(item.type)) {
+    return item.path;
+  }
+  return dirname(pathSeparator, item.path);
 };
 
-const chevronDownVirtualDom = {
-  childCount: 0,
-  className: mergeClassNames(Chevron, MaskIconChevronDown),
-  type: Div
+const openInIntegratedTerminal = async state => {
+  const cwd = getIntegratedTerminalCwd(state);
+  await invoke$3('Layout.openIntegratedTerminal', cwd);
+  return state;
 };
 
-const chevronRightVirtualDom = {
-  childCount: 0,
-  className: mergeClassNames(Chevron, MaskIconChevronRight),
-  type: Div
+const confirmDelete = async items => {
+  // TODO use i18n string
+  const names = items.map(item => `"${item.name}"`).join(', ');
+  const message = items.length === 1 ? `Are you sure you want to delete "${items[0].path}"?` : `Are you sure you want to delete ${names}?`;
+  const result = await confirm(message);
+  return result;
 };
 
-const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
-const getChevronVirtualDom = chevronType => {
-  return chevronDomNodes[chevronType];
+const showErrorAlert = async errorMessage => {
+  await confirm(errorMessage);
 };
 
-const getFileIconVirtualDom = icon => {
+const removeDirent = async state => {
+  const {
+    confirmDelete: confirmDelete$1,
+    focusedIndex,
+    isReadonly,
+    items
+  } = state;
+  if (isReadonly) {
+    return state;
+  }
+  const selectedItems = getSelectedItems(items, focusedIndex);
+  if (selectedItems.length === 0) {
+    return state;
+  }
+  const toRemove = getPaths(selectedItems);
+  if (confirmDelete$1) {
+    const confirmed = await confirmDelete(selectedItems);
+    if (!confirmed) {
+      return state;
+    }
+  }
+  const fileOperations = toRemove.map(item => {
+    return {
+      path: item,
+      type: Remove
+    };
+  });
+  // TODO use bulk edit and explorer refresh
+  const errorMessage = await applyFileOperations(fileOperations);
+  if (errorMessage) {
+    await showErrorAlert(errorMessage);
+    return state;
+  }
+  const newState = await refresh(state);
   return {
-    childCount: 0,
-    className: FileIcon,
-    role: None,
-    src: icon,
-    type: Img
+    ...newState,
+    focus: List,
+    focused: true
   };
 };
 
-const getInputClassName = hasEditingError => {
-  if (hasEditingError) {
-    return mergeClassNames(ExplorerInputBox, InputValidationError);
+const getEditingType = direntType => {
+  if (direntType < DELTA_EDITING) {
+    return direntType + DELTA_EDITING;
   }
-  return ExplorerInputBox;
+  return direntType;
 };
 
-const getInputDom = (isEditing, hasEditingError, editingSessionId) => {
-  if (!isEditing) {
-    return [];
-  }
-  const ariaLabel = typeAFileName();
-  return [{
-    ariaLabel: ariaLabel,
-    autocapitalize: 'off',
-    autocomplete: 'off',
-    autocorrect: 'off',
-    childCount: 0,
-    className: getInputClassName(hasEditingError),
-    'data-editingSessionId': editingSessionId,
-    id: 'ExplorerInput',
-    name: ExplorerInput,
-    onBlur: HandleInputBlur,
-    onClick: HandleInputClick,
-    onInput: HandleEditingInput,
-    spellcheck: 'false',
-    type: Input
-  }];
+const getNewDirentsForRename = (items, focusedIndex) => {
+  const item = items[focusedIndex];
+  const editingType = getEditingType(item.type);
+  return [...items.slice(0, focusedIndex), {
+    ...item,
+    type: editingType
+  }, ...items.slice(focusedIndex + 1)];
 };
 
-const label = {
-  childCount: 1,
-  className: Label,
-  type: Div
-};
-const dimmedLabel = {
-  childCount: 1,
-  className: mergeClassNames(Label, LabelCut),
-  type: Div
-};
-const getLabelDom = (isEditing, name, isDimmed) => {
-  if (isEditing) {
-    return [];
-  }
-  if (isDimmed) {
-    return [dimmedLabel, text(name)];
+const getRenameSelectionRange = name => {
+  const dotIndex = name.lastIndexOf('.');
+  if (dotIndex === -1) {
+    return {
+      end: name.length,
+      start: 0
+    };
   }
-  return [label, text(name)];
+  return {
+    end: dotIndex,
+    start: 0
+  };
 };
 
-const getTitle = path => {
-  if (path.startsWith('file://')) {
-    return path.slice('file://'.length);
-  }
-  return path;
-};
-const getExplorerItemVirtualDom = (item, editingSessionId = 0) => {
+const renameDirent = async state => {
   const {
-    ariaExpanded,
-    chevron,
-    className,
-    depth,
-    hasEditingError,
-    icon,
-    id,
-    indent,
-    index,
-    isCut,
-    isEditing,
-    isIgnored,
-    name,
-    path,
-    posInSet,
-    selected,
-    setSize
-  } = item;
-  const chevronDom = getChevronVirtualDom(chevron);
-  const fileIconDom = icon ? [getFileIconVirtualDom(icon)] : [];
-  return [{
-    ariaExpanded,
-    ariaLabel: name,
-    ariaLevel: depth,
-    ariaPosInSet: posInSet,
-    ariaSelected: selected ? 'true' : undefined,
-    ariaSetSize: setSize,
-    childCount: 2 + chevronDom.length,
-    className,
-    'data-index': index,
-    draggable: true,
-    id,
-    // Keep the item aligned even when the generated indent stylesheet is applied late.
-    paddingLeft: indent,
-    role: TreeItem,
-    title: getTitle(path),
-    type: Div
-  }, ...chevronDom, {
-    childCount: fileIconDom.length,
-    className: FileIconSlot,
-    type: Div
-  }, ...fileIconDom, ...getInputDom(isEditing, hasEditingError, editingSessionId), ...getLabelDom(isEditing, name, isCut || isIgnored)];
-};
-
-const getActiveDescendant = focusedIndex => {
-  if (focusedIndex >= 0) {
-    return 'TreeItemActive';
+    editingSessionId,
+    focusedIndex,
+    icons,
+    isReadonly,
+    items,
+    minLineY
+  } = state;
+  if (isReadonly) {
+    return state;
   }
-  return undefined;
-};
-const getClassName = (focused, focusedIndex, dropTarget) => {
-  const extraClass1 = focused && focusedIndex === -1 ? FocusOutline : Empty;
-  const extraClass2 = dropTarget === dropTargetFull ? ExplorerDropTarget : Empty;
-  const className = mergeClassNames(ListItems, extraClass1, extraClass2);
-  return className;
-};
-const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets, editingSessionId = 0) => {
-  const dom = [{
-    ariaActiveDescendant: getActiveDescendant(focusedIndex),
-    ariaLabel: filesExplorer(),
-    childCount: visibleItems.length,
-    className: getClassName(focused, focusedIndex, dropTargets),
-    onBlur: HandleListBlur,
-    onClick: HandleClick,
-    onContextMenu: HandleContextMenu,
-    onDblClick: HandleDoubleClick,
-    onDragEnd: HandleDragEnd,
-    onDragLeave: HandleDragLeave,
-    onDragOver: HandleDragOver,
-    onDragStart: HandleDragStart,
-    onDrop: HandleDrop,
-    onFocus: HandleListFocus,
-    onPaste: HandleNativePaste,
-    onPointerDown: HandlePointerDown,
-    onPointerUp: HandlePointerUp,
-    onWheel: HandleWheel,
-    role: Tree,
-    tabIndex: Focusable,
-    type: Div
-    // onKeyDown: DomEventListenerFunctions.HandleListKeyDown,
-  }, ...visibleItems.flatMap(item => getExplorerItemVirtualDom(item, editingSessionId))];
-  return dom;
-};
-
-const welcomeMessageNode = {
-  childCount: 1,
-  className: WelcomeMessage,
-  type: P
-};
-const getParentNode$1 = childCount => {
+  if (items.length === 0) {
+    return state;
+  }
+  const item = items[focusedIndex];
+  const newItems = getNewDirentsForRename(items, focusedIndex);
+  const {
+    end,
+    start
+  } = getRenameSelectionRange(item.name);
   return {
-    childCount,
-    className: mergeClassNames(Viewlet, Explorer$1),
-    role: None,
-    type: Div
+    ...state,
+    editingIcon: icons[focusedIndex - minLineY],
+    editingIndex: focusedIndex,
+    editingSelectionEnd: end,
+    editingSelectionStart: start,
+    editingSessionId: editingSessionId + 1,
+    editingType: Rename$1,
+    editingValue: item.name,
+    focus: Input$1,
+    inputSource: Script,
+    items: newItems
   };
 };
-const getLoadErrorVirtualDom = (loadErrorMessage, isWide, showOpenAnotherFolderButton) => {
-  const childCount = showOpenAnotherFolderButton ? 2 : 1;
-  const errorDom = [{
-    childCount,
-    className: Welcome,
-    type: Div
-  }, welcomeMessageNode, text(loadErrorMessage)];
-  const buttonDom = showOpenAnotherFolderButton ? [{
-    childCount: 1,
-    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
-    name: OpenFolder,
-    onClick: HandleClickOpenFolder,
-    type: Button$1
-  }, text(openAnotherFolder())] : [];
-  const parentNode = getParentNode$1(1);
-  return [parentNode, ...errorDom, ...buttonDom];
-};
 
-const scrollBarThumbNode = {
-  childCount: 0,
-  className: ScrollBarThumb,
-  type: Div
-};
-const scrollBarNode = {
-  childCount: 1,
-  className: mergeClassNames(ScrollBar, ScrollBarSmall),
-  onPointerDown: HandleScrollBarPointerDown,
-  type: Div
+const getIndentRule = indent => {
+  return `.Indent-${indent} {
+  padding-left: ${indent}px;
+}`;
 };
-const getScrollBarVirtualDom = scrollBarHeight => {
-  const shouldShowScrollbar = scrollBarHeight > 0;
-  if (!shouldShowScrollbar) {
-    return [];
-  }
-  return [scrollBarNode, scrollBarThumbNode];
+
+const getCss = (scrollBarHeight, scrollBarTop, uniqueIndents, errorMessageLeft, errorMessageTop, errorMessageWidth) => {
+  const rules = [`.Explorer {
+  --ScrollBarThumbHeight: ${scrollBarHeight}px;
+  --ScrollBarThumbTop: ${scrollBarTop}px;
+  --ErrorMessageTop: ${errorMessageTop}px;
+  --ErrorMessageLeft: ${errorMessageLeft}px;
+  --ErrorMessageWidth: ${errorMessageWidth}px;
+}
+.Explorer .ScrollBarThumb {
+  height: var(--ScrollBarThumbHeight);
+  translate: 0px var(--ScrollBarThumbTop);
+}`, ...uniqueIndents.map(getIndentRule)];
+  const css = rules.join('\n');
+  return css;
 };
 
-const getParentNode = childCount => {
+const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding, width) => {
+  const top = itemHeight * (focusedIndex - minLineY + 1);
+  const left = depth * indent + fileIconWidth + padding;
+  const errorMessageWidth = width - left;
   return {
-    childCount,
-    className: mergeClassNames(Viewlet, Explorer$1),
-    role: None,
-    type: Div
+    errorMessageWidth,
+    left,
+    top
   };
 };
-const getChildCount = (scrollBarDomLength, errorDomLength) => {
-  let childCount = 1;
-  if (scrollBarDomLength > 0) {
-    childCount++;
+
+const getScrollBarTop = (height, contentHeight, scrollTop, scrollBarHeight) => {
+  const finalScrollTop = contentHeight - height;
+  if (finalScrollTop <= 0 || !Number.isFinite(finalScrollTop)) {
+    return 0;
   }
-  if (errorDomLength > 0) {
-    childCount++;
+  const scrollBarTop = Math.round(scrollTop / finalScrollTop * (height - scrollBarHeight));
+  if (!Number.isFinite(scrollBarTop)) {
+    return 0;
   }
-  return childCount;
+  return scrollBarTop;
 };
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage, loadErrorMessage, showOpenAnotherFolderButton, editingSessionId = 0) => {
-  if (!root) {
-    return getExplorerWelcomeVirtualDom(isWide, dropTargets);
-  }
-  if (loadErrorMessage) {
-    return getLoadErrorVirtualDom(loadErrorMessage, isWide, showOpenAnotherFolderButton);
+
+const getUnique = items => {
+  const seens = [];
+  for (const item of items) {
+    if (!seens.includes(item)) {
+      seens.push(item);
+    }
   }
+  return seens;
+};
+
+const getIndent = item => getIndentFromClassName(item.className);
+const getUniqueIndents = items => {
+  const indents = items.map(getIndent);
+  const uniqueIndents = getUnique(indents);
+  return uniqueIndents;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    chevronSpace,
+    defaultPaddingLeft,
+    deltaY,
+    fileIconWidth,
+    focusedIndex,
+    height,
+    indent,
+    itemHeight,
+    items,
+    minLineY,
+    padding,
+    uid,
+    visibleExplorerItems,
+    width
+  } = newState;
+  const uniqueIndents = getUniqueIndents(visibleExplorerItems);
+  const contentHeight = items.length * itemHeight;
   const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight);
-  const errorDom = getErrorMessageDom(editingErrorMessage);
-  const childCount = getChildCount(scrollBarDom.length, errorDom.length);
-  const parentNode = getParentNode(childCount);
-  const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets, editingSessionId), ...scrollBarDom, ...errorDom];
-  return dom;
+  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY, scrollBarHeight);
+  const depth = items[focusedIndex]?.depth || 0;
+  const {
+    errorMessageWidth,
+    left,
+    top
+  } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace, width);
+  const css = getCss(scrollBarHeight, scrollBarTop, uniqueIndents, left, top, errorMessageWidth);
+  return [SetCss, uid, css];
 };
 
-const RE_SENTENCE_END = /[.!?]$/;
-const getMissingFolderMessage = root => {
-  if (root) {
-    return `Could not open "${root}" because the folder does not exist. It may have been moved or deleted.`;
+const getDragLabel = urls => {
+  if (urls.length === 1) {
+    return getBaseName('/', urls[0]);
   }
-  return 'Could not open folder because the folder does not exist. It may have been moved or deleted.';
+  return String(urls.length);
 };
-const toSentence = message => {
-  const normalized = `${message[0].toUpperCase()}${message.slice(1)}`;
-  return RE_SENTENCE_END.test(normalized) ? normalized : `${normalized}.`;
+
+const getDragData = items => {
+  const data = items.map(getDragUri).join('\n');
+  const dragData = [{
+    data,
+    type: 'text/uri-list'
+  }, {
+    data,
+    type: 'text/plain'
+  }];
+  return {
+    items: dragData,
+    label: getDragLabel(items.map(item => item.path))
+  };
 };
-const getLoadErrorMessage = state => {
+
+const renderDragData = (oldState, newState) => {
   const {
-    errorCode,
-    errorMessage,
-    hasError,
-    root
-  } = state;
-  if (hasError) {
-    if (errorCode === 'ENOENT') {
-      return getMissingFolderMessage(root);
-    }
-    const reason = errorMessage || 'an unexpected error occurred';
-    const code = errorCode ? ` Error code: ${errorCode}.` : '';
-    return `Could not open folder. ${toSentence(reason)}${code}`;
+    focusedIndex,
+    isPointerDown,
+    items,
+    pointerDownIndex,
+    uid
+  } = newState;
+  if (!isPointerDown) {
+    return [];
   }
-  return '';
+  const pointerDownItem = items[pointerDownIndex];
+  let draggedItems;
+  if (pointerDownIndex === focusedIndex || pointerDownItem?.selected) {
+    draggedItems = getSelectedItems(items, focusedIndex);
+  } else if (pointerDownItem) {
+    draggedItems = [pointerDownItem];
+  } else {
+    draggedItems = [];
+  }
+  const dragData = getDragData(draggedItems);
+  return ['Viewlet.setDragData', uid, dragData];
 };
-const shouldShowOpenAnotherFolderButton = state => {
+
+const renderEditingSelection = (oldState, newState) => {
   const {
-    errorCode,
-    hasError
-  } = state;
-  return hasError && errorCode === 'ENOENT';
+    editingSelectionEnd,
+    editingSelectionStart,
+    uid
+  } = newState;
+  return ['Viewlet.setSelectionByName', uid, ExplorerInput, editingSelectionStart, editingSelectionEnd];
 };
 
-const renderItems = (oldState, newState) => {
+const renderFocus = (oldState, newState) => {
+  if (newState.inputSource === User) {
+    return [];
+  }
+  if (newState.focus === Input$1) {
+    return [FocusElementByName, newState.uid, ExplorerInput];
+  }
+  if (newState.focus === List) {
+    return [FocusSelector, newState.uid, '.ListItems'];
+  }
+  // TODO
+  // 1. when focused, focus the outer list element
+  // 2. when focused, set focus context in renderer worker
+  return [];
+};
+
+const renderFocusContext = (oldState, newState) => {
   const {
-    dropTargets,
-    editingErrorMessage,
-    editingSessionId,
-    focused,
-    focusedIndex,
-    height,
-    initial,
-    itemHeight,
-    items,
-    root,
-    width
+    uid
   } = newState;
-  const visibleDirents = newState.visibleExplorerItems;
-  const isWide = width > 450;
-  const contentHeight = items.length * itemHeight;
-  const loadErrorMessage = getLoadErrorMessage(newState);
-  const showOpenAnotherFolderButton = shouldShowOpenAnotherFolderButton(newState);
-  if (initial) {
-    return [SetDom2, newState.uid, []];
+  if (newState.focus === Input$1) {
+    return [SetFocusContext, uid, FocusExplorerEditBox];
   }
-  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage, loadErrorMessage, showOpenAnotherFolderButton, editingSessionId);
-  return [SetDom2, newState.uid, dom];
+  if (newState.focus === List) {
+    return [SetFocusContext, uid, FocusExplorer];
+  }
+  return [];
 };
 
 const renderIncremental = (oldState, newState) => {
@@ -8098,7 +8112,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     childCount: 0,
     className: mergeClassNames('MaskIcon', `MaskIcon${icon}`),
-    role: None,
+    role: None$2,
     type
   };
 };
@@ -8574,12 +8588,13 @@ const commandMap = {
   'Explorer.focusNone': wrapListItemCommand(focusNone),
   'Explorer.focusPrevious': wrapListItemCommand(focusPrevious),
   'Explorer.getCommandIds': getCommandIds,
+  'Explorer.getComponentDom': getComponentDom,
   'Explorer.getComponentState': getComponentState,
   'Explorer.getKeyBindings': getKeyBindings,
   'Explorer.getMenuEntries': getMenuEntries,
   'Explorer.getMenuEntries2': wrapGetter(getMenuEntries2),
   'Explorer.getMouseActions': getMouseActions,
-  'Explorer.getTitle': wrapGetter(getTitle$1),
+  'Explorer.getTitle': wrapGetter(getTitle),
   'Explorer.handleArrowLeft': wrapListItemCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapListItemCommand(handleArrowRight),
   'Explorer.handleBlur': wrapListItemCommand(handleBlur),