@lvce-editor/static-server 0.61.1 → 0.61.2

package/static/{32e26fa → 45a12ea}/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -1137,13 +1137,13 @@ const Remove = 5;
 
 const Text = 12;
 
-const TargetValue = 'event.target.value';
+const Button$3 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
-const Button$3 = 'event.button';
+const CtrlKey = 'event.ctrlKey';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
-const CtrlKey = 'event.ctrlKey';
+const TargetValue = 'event.target.value';
 
 const Enter = 3;
 const Escape = 8;
@@ -1172,6 +1172,8 @@ const RendererWorker$1 = 1;
 
 const FocusElementByName = 'Viewlet.focusElementByName';
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
+const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
 
 const FocusExplorer = 13;
@@ -1371,7 +1373,7 @@ const getWebViewSecret = async key => {
 const setWebViewPort = async (uid, port, origin, portType) => {
   return invokeAndTransfer('WebView.setPort', uid, port, origin, portType);
 };
-const setFocus$1 = key => {
+const setFocus = key => {
   return invoke$2('Focus.setFocus', key);
 };
 const getFileIcon = async options => {
@@ -1631,7 +1633,7 @@ const RendererWorker = {
   setAdditionalFocus,
   setColorTheme,
   setExtensionsSearchValue,
-  setFocus: setFocus$1,
+  setFocus,
   setWebViewPort,
   setWorkspacePath,
   showContextMenu: showContextMenu$1,
@@ -1797,94 +1799,6 @@ const Rename$1 = 3;
 const List = 1;
 const Input$1 = 2;
 
-// TODO optimize this function to return the minimum number
-// of visible items needed, e.g. when not scrolled 5 items with
-// 20px fill 100px but when scrolled 6 items are needed
-const getNumberOfVisibleItems = (listHeight, itemHeight) => {
-  return Math.ceil(listHeight / itemHeight) + 1;
-};
-
-const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
-  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
-  return maxLineY;
-};
-
-const getIconsCached = (dirents, fileIconCache) => {
-  return dirents.map(dirent => fileIconCache[dirent]);
-};
-
-const getMissingIconRequests = (dirents, fileIconCache) => {
-  const missingRequests = [];
-  for (const dirent of dirents) {
-    if (!(dirent.path in fileIconCache)) {
-      missingRequests.push({
-        type: dirent.type,
-        name: dirent.name,
-        path: dirent.path
-      });
-    }
-  }
-  return missingRequests;
-};
-
-const getPath = item => {
-  return item.path;
-};
-
-const getPaths = items => {
-  return items.map(getPath);
-};
-
-const getSimpleIconRequestType = direntType => {
-  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
-    return 2;
-  }
-  return 1;
-};
-
-const toSimpleIconRequest = request => {
-  return {
-    name: request.name,
-    type: getSimpleIconRequestType(request.type)
-  };
-};
-
-const requestFileIcons = async requests => {
-  if (requests.length === 0) {
-    return [];
-  }
-  const simpleRequests = requests.map(toSimpleIconRequest);
-  const icons = await invoke$1('IconTheme.getIcons', simpleRequests);
-  return icons;
-};
-
-const updateIconCache = (iconCache, missingRequests, newIcons) => {
-  if (missingRequests.length === 0) {
-    return iconCache;
-  }
-  const newFileIconCache = {
-    ...iconCache
-  };
-  for (let i = 0; i < missingRequests.length; i++) {
-    const request = missingRequests[i];
-    const icon = newIcons[i];
-    newFileIconCache[request.path] = icon;
-  }
-  return newFileIconCache;
-};
-
-const getFileIcons = async (dirents, fileIconCache) => {
-  const missingRequests = getMissingIconRequests(dirents, fileIconCache);
-  const newIcons = await requestFileIcons(missingRequests);
-  const newFileIconCache = updateIconCache(fileIconCache, missingRequests, newIcons);
-  const paths = getPaths(dirents);
-  const icons = getIconsCached(paths, newFileIconCache);
-  return {
-    icons,
-    newFileIconCache
-  };
-};
-
 const getFileOperationsNestedPath = (path, root, pathSeparator) => {
   const parts = path.slice(root.length).split(pathSeparator);
   const operations = [];
@@ -2296,10 +2210,6 @@ const validateFileName2 = name => {
 const acceptCreate = async (state, newDirentType) => {
   const {
     editingValue,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
     pathSeparator,
     root,
     focusedIndex,
@@ -2331,22 +2241,13 @@ const acceptCreate = async (state, newDirentType) => {
   const newItems = treeToArray(merged, root);
   const dirents = newItems;
   const newFocusedIndex = getIndex(newItems, absolutePath);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, dirents.length);
-  const visible = dirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
     items: dirents,
     editingIndex: -1,
     focusedIndex: newFocusedIndex,
     editingType: None$5,
-    maxLineY,
-    focus: List,
-    icons,
-    fileIconCache: newFileIconCache
+    focus: List
   };
 };
 
@@ -2401,11 +2302,7 @@ const acceptRename = async state => {
     editingIndex,
     editingValue,
     items,
-    root,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache
+    root
   } = state;
   const editingErrorMessage = validateFileName2(editingValue);
   if (editingErrorMessage) {
@@ -2432,12 +2329,6 @@ const acceptRename = async state => {
   const newTree = updateTree2(tree, update);
   const newDirents = treeToArray(newTree, root);
   const newFocusedIndex = getIndex(newDirents, newUri);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
     editingIndex: -1,
@@ -2448,8 +2339,6 @@ const acceptRename = async state => {
     focused: true,
     focus: List,
     items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
     editingSelectionEnd: 0,
     editingSelectionStart: 0
   };
@@ -2478,14 +2367,9 @@ const isNormalItem = item => {
 const cancelEditCreate = async (state, keepFocus) => {
   const {
     editingIndex,
-    items,
-    fileIconCache
+    items
   } = state;
   const filteredItems = items.filter(isNormalItem);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(filteredItems, fileIconCache);
   return {
     ...state,
     items: filteredItems,
@@ -2495,9 +2379,7 @@ const cancelEditCreate = async (state, keepFocus) => {
     editingValue: '',
     editingErrorMessage: '',
     editingType: None$5,
-    focus: List,
-    icons,
-    fileIconCache: newFileIconCache
+    focus: List
   };
 };
 
@@ -2572,25 +2454,12 @@ const toCollapsedDirent = dirent => {
 
 const collapseAll = async state => {
   const {
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
     items
   } = state;
   const newDirents = items.filter(isTopLevel).map(toCollapsedDirent);
-  const dirents = newDirents;
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, dirents.length);
-  const visible = dirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache
+    items: newDirents
   };
 };
 
@@ -2640,14 +2509,325 @@ const copyRelativePath = async state => {
   return state;
 };
 
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
+  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
+  return maxLineY;
+};
+
+const getIconsCached = (dirents, fileIconCache) => {
+  return dirents.map(dirent => fileIconCache[dirent]);
+};
+
+const getMissingIconRequests = (dirents, fileIconCache) => {
+  const missingRequests = [];
+  for (const dirent of dirents) {
+    if (!(dirent.path in fileIconCache)) {
+      missingRequests.push({
+        type: dirent.type,
+        name: dirent.name,
+        path: dirent.path
+      });
+    }
+  }
+  return missingRequests;
+};
+
+const getPath = item => {
+  return item.path;
+};
+
+const getPaths = items => {
+  return items.map(getPath);
+};
+
+const getSimpleIconRequestType = direntType => {
+  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
+    return 2;
+  }
+  return 1;
+};
+
+const toSimpleIconRequest = request => {
+  return {
+    name: request.name,
+    type: getSimpleIconRequestType(request.type)
+  };
+};
+
+const requestFileIcons = async requests => {
+  if (requests.length === 0) {
+    return [];
+  }
+  const simpleRequests = requests.map(toSimpleIconRequest);
+  const icons = await invoke$1('IconTheme.getIcons', simpleRequests);
+  return icons;
+};
+
+const updateIconCache = (iconCache, missingRequests, newIcons) => {
+  if (missingRequests.length === 0) {
+    return iconCache;
+  }
+  const newFileIconCache = {
+    ...iconCache
+  };
+  for (let i = 0; i < missingRequests.length; i++) {
+    const request = missingRequests[i];
+    const icon = newIcons[i];
+    newFileIconCache[request.path] = icon;
+  }
+  return newFileIconCache;
+};
+
+const getFileIcons = async (dirents, fileIconCache) => {
+  const missingRequests = getMissingIconRequests(dirents, fileIconCache);
+  const newIcons = await requestFileIcons(missingRequests);
+  const newFileIconCache = updateIconCache(fileIconCache, missingRequests, newIcons);
+  const paths = getPaths(dirents);
+  const icons = getIconsCached(paths, newFileIconCache);
+  return {
+    icons,
+    newFileIconCache
+  };
+};
+
+const None$4 = 0;
+const Right = 1;
+const Down = 2;
+
+const getChevronType = (type, useChevrons) => {
+  if (!useChevrons) {
+    return None$4;
+  }
+  switch (type) {
+    case Directory:
+      return Right;
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return Down;
+    default:
+      return None$4;
+  }
+};
+
+const None$3 = 0;
+const Expanded = 1;
+const Collapsed = 2;
+
+const getExpandedType = type => {
+  switch (type) {
+    case Directory:
+      return Collapsed;
+    case DirectoryExpanding:
+    case DirectoryExpanded:
+      return Expanded;
+    default:
+      return None$3;
+  }
+};
+
+// 0 = 'Button'
+// 1 = 'IconButton'
+// 2 = 'Button IconButton'
+// it could make dom diffing faster, since for classname,
+// once at start, send all classnames to renderer process
+// only numbers are compared. it could also make rendering faster,
+// representing the concatenated strings for example
+// since less data is transferred to renderer process
+// then, components uses numeric classname
+// TODO add option to make classnames numeric
+// when a component uses multiple classnames, it is a new number
+const Actions = 'Actions';
+const Button$2 = 'Button';
+const ButtonNarrow = 'ButtonNarrow';
+const ButtonPrimary = 'ButtonPrimary';
+const ButtonWide = 'ButtonWide';
+const Chevron = 'Chevron';
+const Empty = '';
+const Explorer$1 = 'Explorer';
+const ExplorerDropTarget = 'DropTarget';
+const ExplorerErrorMessage = 'ExplorerErrorMessage';
+const ExplorerInputBox = 'ExplorerInputBox';
+const FileIcon = 'FileIcon';
+const FocusOutline = 'FocusOutline';
+const IconButton = 'IconButton';
+const InputValidationError = 'InputValidationError';
+const Label = 'Label';
+const LabelCut = 'LabelCut';
+const ListItems = 'ListItems';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const TreeItem$1 = 'TreeItem';
+const TreeItemActive = 'TreeItemActive';
+const Viewlet = 'Viewlet';
+const Welcome = 'Welcome';
+const WelcomeMessage = 'WelcomeMessage';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
+  let className = TreeItem$1;
+  className = mergeClassNames(className, `Indent-${depth}`);
+  if (isSelected || isFocused) {
+    className = mergeClassNames(className, TreeItemActive);
+  }
+  if (isDropping) {
+    className = mergeClassNames(className, 'DropTarget');
+  }
+  return className;
+};
+
+const defaultIndent$1 = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent$1}rem`;
+};
+
+// TODO make all of these variable configurable
+const defaultPaddingLeft = 4;
+const defaultIndent = 8;
+
+// TODO make chevron size configurable
+const chevronSize = 22;
+const getTreeItemIndentWithChevron = (depth, chevron) => {
+  // TODO use numeric value here, convert to string value in renderer process
+  const extraSpace = chevron ? 0 : chevronSize;
+  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
+};
+
+const ariaExpandedValues = [undefined, 'true', 'false'];
+const getEditingChevron = direntType => {
+  switch (direntType) {
+    case EditingDirectoryExpanded:
+      return Down;
+    case EditingFolder:
+      return Right;
+    default:
+      return None$4;
+  }
+};
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris = []) => {
+  const visible = [];
+  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
+  let iconIndex = 0;
+  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
+    const item = items[i];
+    let chevron = getChevronType(item.type, useChevrons);
+    const isFocused = i === focusedIndex;
+    const id = isFocused ? 'TreeItemActive' : undefined;
+    const isSelected = item.selected;
+    const isCut = cutItems.includes(item.path);
+    const isDropping = dropTargets.includes(i);
+    const isIgnored = sourceControlIgnoredUris.includes(item.path);
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, item.depth); // TODO compute classname in dom function
+    const expanded = getExpandedType(item.type);
+    const ariaExpanded = ariaExpandedValues[expanded];
+    const isEditing = i === editingIndex;
+    let icon = icons[iconIndex++];
+    if (isEditing) {
+      icon = editingIcon;
+      chevron = getEditingChevron(item.type);
+    }
+    const indent = indentFn(item.depth, chevron);
+    visible.push({
+      ...item,
+      posInSet: item.posInSet ?? i + 1,
+      setSize: item.setSize ?? items.length,
+      isEditing: isEditing,
+      hasEditingError: isEditing && Boolean(editingErrorMessage),
+      icon,
+      indent,
+      ariaExpanded,
+      chevron,
+      id,
+      className,
+      isCut,
+      isIgnored,
+      index: i
+    });
+  }
+  return visible;
+};
+
 const {
   get,
   set,
-  wrapCommand,
   registerCommands,
   getCommandIds,
   wrapGetter
 } = create$2();
+const wrapListItemCommand = fn => {
+  const wrappedCommand = async (id, ...args) => {
+    const {
+      newState
+    } = get(id);
+    const updatedState = await fn(newState, ...args);
+    const {
+      items,
+      minLineY,
+      focusedIndex,
+      editingIndex,
+      editingType,
+      editingValue,
+      editingErrorMessage,
+      useChevrons,
+      dropTargets,
+      editingIcon,
+      cutItems,
+      sourceControlIgnoredUris,
+      height,
+      itemHeight,
+      fileIconCache
+    } = updatedState;
+    const intermediate = get(id);
+    set(id, intermediate.oldState, updatedState);
+    const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
+    if (items === intermediate.newState.items && minLineY === intermediate.newState.minLineY && editingIcon === intermediate.newState.editingIcon && cutItems === intermediate.newState.cutItems && editingErrorMessage === intermediate.newState.editingErrorMessage) {
+      return;
+    }
+    const visible = items.slice(minLineY, maxLineY);
+    const {
+      icons,
+      newFileIconCache
+    } = await getFileIcons(visible, fileIconCache);
+    const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
+    const finalState = {
+      ...updatedState,
+      visibleExplorerItems,
+      fileIconCache: newFileIconCache,
+      icons,
+      maxLineY
+    };
+    const intermediate2 = get(id);
+    set(id, intermediate2.oldState, finalState);
+  };
+  return wrappedCommand;
+};
 
 const ListItem = 22;
 
@@ -2700,7 +2880,11 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0,
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    visibleExplorerItems: []
   };
   set(uid, state, state);
 };
@@ -2752,12 +2936,20 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0,
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    visibleExplorerItems: []
   };
   set(state.uid, state, state);
   return state;
 };
 
+const isEqual$6 = (oldState, newState) => {
+  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive && oldState.maxIndent === newState.maxIndent;
+};
+
 const isEqual$5 = (oldState, newState) => {
   return oldState.isPointerDown || !newState.isPointerDown;
 };
@@ -2767,7 +2959,7 @@ const isEqual$4 = (oldState, newState) => {
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.editingErrorMessage === newState.editingErrorMessage && oldState.width === newState.width && oldState.focused === newState.focused && oldState.dropTargets === newState.dropTargets && oldState.icons === newState.icons && oldState.cutItems === newState.cutItems;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.editingErrorMessage === newState.editingErrorMessage && oldState.width === newState.width && oldState.focused === newState.focused && oldState.dropTargets === newState.dropTargets && oldState.icons === newState.icons && oldState.cutItems === newState.cutItems && oldState.visibleExplorerItems === newState.visibleExplorerItems;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -2780,6 +2972,7 @@ const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderSelection = 9;
 const RenderDragData = 10;
+const RenderCss = 11;
 
 const isEqual$1 = (oldState, newState) => {
   if (newState.focus !== Input$1) {
@@ -2788,8 +2981,8 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.focus === Input$1 && newState.focus === Input$1 && oldState.editingValue === newState.editingValue;
 };
 
-const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5];
-const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData];
+const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5, isEqual$6];
+const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -2815,10 +3008,7 @@ const expandAll = async state => {
   const {
     items,
     focusedIndex,
-    pathSeparator,
-    minLineY,
-    height,
-    itemHeight
+    pathSeparator
   } = state;
   if (focusedIndex === -1) {
     return state;
@@ -2849,18 +3039,9 @@ const expandAll = async state => {
       // await expand(state, dirent.index)
     }
   }
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    maxLineY
+    items: newDirents
   };
 };
 
@@ -2908,10 +3089,7 @@ const expandRecursively = async state => {
     items,
     focusedIndex,
     pathSeparator,
-    root,
-    height,
-    itemHeight,
-    minLineY
+    root
   } = state;
   const dirent = focusedIndex < 0 ? {
     type: Directory,
@@ -2930,33 +3108,15 @@ const expandRecursively = async state => {
   if (focusedIndex >= 0) {
     const endIndex = getParentEndIndex(items, focusedIndex);
     const newDirents = [...items.slice(0, startIndex), ...childDirents, ...items.slice(endIndex)];
-    const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-    const visible = newDirents.slice(minLineY, maxLineY);
-    const {
-      icons,
-      newFileIconCache
-    } = await getFileIcons(visible, state.fileIconCache);
     return {
       ...state,
-      items: newDirents,
-      maxLineY,
-      icons,
-      fileIconCache: newFileIconCache
+      items: newDirents
     };
   }
   const newDirents = childDirents.slice(1);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
-    items: newDirents,
-    maxLineY,
-    icons,
-    fileIconCache: newFileIconCache
+    items: newDirents
   };
 };
 
@@ -3091,25 +3251,6 @@ const focusPrevious = state => {
   }
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
-};
-
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
-};
-
 const getKeyBindings = () => {
   return [{
     key: Shift | UpArrow,
@@ -3207,7 +3348,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$4 = 0;
+const None$2 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
@@ -3220,13 +3361,13 @@ const menuEntrySeparator = {
 const menuEntryNewFile = {
   id: 'newFile',
   label: newFile$1(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.newFile'
 };
 const menuEntryNewFolder = {
   id: 'newFolder',
   label: newFolder$1(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.newFolder'
 };
 const menuEntryOpenContainingFolder = {
@@ -3238,7 +3379,7 @@ const menuEntryOpenContainingFolder = {
 const menuEntryOpenInIntegratedTerminal = {
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal(),
-  flags: None$4,
+  flags: None$2,
   command: /* TODO */'-1'
 };
 const menuEntryCut = {
@@ -3256,7 +3397,7 @@ const menuEntryCopy = {
 const menuEntryPaste = {
   id: 'paste',
   label: paste(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
@@ -3274,13 +3415,13 @@ const menuEntryCopyRelativePath = {
 const menuEntryRename = {
   id: 'rename',
   label: rename(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.renameDirent'
 };
 const menuEntryDelete = {
   id: 'delete',
   label: deleteItem(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.removeDirent'
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
@@ -3379,16 +3520,16 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     minLineY,
     maxLineY,
     itemHeight,
-    fileIconCache
+    items
   } = state;
   // @ts-ignore
   dirent.type = Directory;
   // @ts-ignore
   dirent.icon = '';
-  const endIndex = getParentEndIndex(state.items, index);
+  const endIndex = getParentEndIndex(items, index);
   const removeCount = endIndex - index - 1;
   // TODO race conditions and side effects are everywhere
-  const newDirents = [...state.items];
+  const newDirents = [...items];
   newDirents.splice(index + 1, removeCount);
   const newTotal = newDirents.length;
   if (newTotal < maxLineY) {
@@ -3396,35 +3537,21 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     const newMaxLineY = Math.min(maxLineY, newTotal);
     const newMinLineY = newMaxLineY - visibleItems;
     const deltaY = newMinLineY * itemHeight;
-    const parts = newDirents.slice(newMinLineY, newMaxLineY);
-    const {
-      icons,
-      newFileIconCache
-    } = await getFileIcons(parts, fileIconCache);
     return {
       ...state,
-      items: newDirents,
-      icons,
-      fileIconCache: newFileIconCache,
-      focusedIndex: index,
+      deltaY,
       focused: keepFocus,
-      minLineY: newMinLineY,
+      focusedIndex: index,
+      items: newDirents,
       maxLineY: newMaxLineY,
-      deltaY
-    };
-  }
-  const parts = newDirents.slice(state.minLineY, state.maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(parts, fileIconCache);
+      minLineY: newMinLineY
+    };
+  }
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
+    focused: keepFocus,
     focusedIndex: index,
-    focused: keepFocus
+    items: newDirents
   };
 };
 
@@ -3465,10 +3592,6 @@ const handleArrowRightDirectoryExpanded = (state, dirent) => {
   return state;
 };
 
-const setFocus = key => {
-  return invoke$1('Focus.setFocus', key);
-};
-
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   // @ts-ignore
   dirent.type = DirectoryExpanding;
@@ -3490,27 +3613,14 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   dirent.type = DirectoryExpanded;
   // @ts-ignore
   dirent.icon = '';
-  const {
-    height,
-    itemHeight,
-    minLineY
-  } = state2;
   // TODO when focused index has changed while expanding, don't update it
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const parts = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(parts, state.fileIconCache);
-  await setFocus(FocusExplorer);
+
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    focusedIndex: newIndex,
     focused: keepFocus,
-    maxLineY
+    focusedIndex: newIndex,
+    items: newDirents,
+    focus: List
   };
 };
 
@@ -3820,7 +3930,7 @@ const show = async (x, y, id, ...args) => {
   return showContextMenu(x, y, id, ...args);
 };
 
-const Explorer$1 = 4;
+const Explorer = 4;
 
 const handleContextMenuKeyboard = async state => {
   const {
@@ -3832,7 +3942,7 @@ const handleContextMenuKeyboard = async state => {
   } = state;
   const menuX = x;
   const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
-  await show(menuX, menuY, Explorer$1);
+  await show(menuX, menuY, Explorer);
   return state;
 };
 
@@ -3846,7 +3956,7 @@ const handleContextMenuMouseAt = async (state, x, y) => {
     focused: false
   };
   set(state.uid, state, newState);
-  await show(x, y, Explorer$1);
+  await show(x, y, Explorer);
   return state;
 };
 
@@ -4063,12 +4173,8 @@ const sortPathDirentsMap = map => {
 const refresh = async state => {
   const {
     root,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   const expandedDirents = getExpandedDirents(items);
   const expandedPaths = getPaths(expandedDirents);
@@ -4076,23 +4182,14 @@ const refresh = async state => {
   const pathToDirents = await getPathDirentsMap(allPaths);
   const sortedPathDirents = sortPathDirentsMap(pathToDirents);
   const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newItems.length);
-  const visible = newItems.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   let newFocusedIndex = focusedIndex;
   if (focusedIndex >= newItems.length) {
     newFocusedIndex = newItems.length - 1;
   }
   return {
     ...state,
-    items: newItems,
-    fileIconCache: newFileIconCache,
-    icons,
-    maxLineY,
-    focusedIndex: newFocusedIndex
+    focusedIndex: newFocusedIndex,
+    items: newItems
   };
 };
 
@@ -4390,8 +4487,10 @@ const handleEscape = async state => {
 };
 
 const handleFocus = async state => {
-  await setFocus(FocusExplorer);
-  return state;
+  return {
+    ...state,
+    focus: List
+  };
 };
 
 const updateIcons = async state => {
@@ -4712,7 +4811,7 @@ const handlePasteCut = async (state, nativeFiles) => {
   };
 };
 
-const None$3 = 'none';
+const None$1 = 'none';
 
 const handlePaste = async state => {
   const nativeFiles = await readNativeFiles();
@@ -4733,16 +4832,15 @@ const handlePaste = async state => {
   // TODO handle error gracefully when copy fails
 
   // If no files to paste, return original state unchanged
-  if (nativeFiles.type === None$3) {
+  if (nativeFiles.type === None$1) {
     return state;
   }
 
   // Use the pasteShouldMove flag to determine whether to cut or copy
   if (state.pasteShouldMove) {
     return handlePasteCut(state, nativeFiles);
-  } else {
-    return handlePasteCopy(state, nativeFiles);
   }
+  return handlePasteCopy(state, nativeFiles);
 };
 
 const handlePointerDown = (state, button, x, y) => {
@@ -4793,18 +4891,11 @@ const setDeltaY = async (state, deltaY) => {
   }
   const minLineY = Math.round(deltaY / itemHeight);
   const maxLineY = minLineY + Math.round(height / itemHeight);
-  const visible = items.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     deltaY,
-    minLineY,
     maxLineY,
-    icons,
-    fileIconCache: newFileIconCache
+    minLineY
   };
 };
 
@@ -4950,9 +5041,6 @@ const getSavedRoot = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
-  const {
-    fileIconCache
-  } = state;
   const {
     useChevrons,
     confirmDelete
@@ -4963,10 +5051,6 @@ const loadContent = async (state, savedState) => {
   const pathSeparator = await getPathSeparator(root); // TODO only load path separator once
   const excluded = getExcluded();
   const restoredDirents = await restoreExpandedState(savedState, root, pathSeparator, excluded);
-  const {
-    itemHeight,
-    height
-  } = state;
   let minLineY = 0;
   if (savedState && typeof savedState.minLineY === 'number') {
     minLineY = savedState.minLineY;
@@ -4975,25 +5059,17 @@ const loadContent = async (state, savedState) => {
   if (savedState && typeof savedState.deltaY === 'number') {
     deltaY = savedState.deltaY;
   }
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, restoredDirents.length);
-  const visible = restoredDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
-    root,
+    confirmDelete,
+    deltaY,
+    excluded,
     items: restoredDirents,
-    icons,
-    fileIconCache: newFileIconCache,
+    maxIndent: 10,
     minLineY,
-    deltaY,
-    maxLineY,
     pathSeparator,
-    excluded,
-    useChevrons,
-    confirmDelete
+    root,
+    useChevrons
   };
 };
 
@@ -5032,8 +5108,6 @@ const initialize = async () => {
   await initializeFileSystemWorker();
 };
 
-const ExplorerEditBox = FocusExplorerEditBox;
-
 const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntType) => {
   // Get existing children or query them if they don't exist
   let existingChildren = items.filter(item => item.depth === depth && item.path.startsWith(parentPath));
@@ -5126,39 +5200,24 @@ const getFittingIndex = (dirents, startIndex) => {
   return -1;
 };
 const newDirent = async (state, editingType) => {
-  // TODO make focus functional instead of side effect
-  await setFocus(ExplorerEditBox);
   // TODO do it like vscode, select position between folders and files
   const {
+    root,
     focusedIndex,
-    items,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
-    root
+    items
   } = state;
   const index = getFittingIndex(items, focusedIndex);
   const direntType = getNewDirentType(editingType);
   const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
   return {
     ...state,
-    items: newDirents,
     editingIndex,
     editingType,
     editingValue: '',
-    focusedIndex: editingIndex,
     focus: Input$1,
-    icons,
-    fileIconCache: newFileIconCache,
-    maxLineY
+    focusedIndex: editingIndex,
+    items: newDirents
   };
 };
 
@@ -5277,7 +5336,7 @@ const getRenameSelectionRange = name => {
 const User = 1;
 const Script = 2;
 
-const renameDirent = state => {
+const renameDirent = async state => {
   const {
     focusedIndex,
     items,
@@ -5307,6 +5366,25 @@ const renameDirent = state => {
   };
 };
 
+const renderCss = (oldState, newState) => {
+  const {
+    scrollBarHeight,
+    uid,
+    maxIndent
+  } = newState;
+  const rules = [`.Explorer {
+  --ScrollBarThumbHeight: ${scrollBarHeight}px;
+`];
+  for (let i = 0; i < maxIndent; i++) {
+    const indent = getTreeItemIndent(i);
+    rules.push(`.Indent-${i} {
+  padding-left: ${indent};
+}`);
+  }
+  const css = rules.join('\n');
+  return [SetCss, uid, css];
+};
+
 const getDragLabel = urls => {
   if (urls.length === 1) {
     return getBaseName('/', urls[0]);
@@ -5392,50 +5470,10 @@ const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, inde
   };
 };
 
-const None$2 = 'none';
+const None = 'none';
 const ToolBar = 'toolbar';
 const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
-// 0 = 'Button'
-// 1 = 'IconButton'
-// 2 = 'Button IconButton'
-// it could make dom diffing faster, since for classname,
-// once at start, send all classnames to renderer process
-// only numbers are compared. it could also make rendering faster,
-// representing the concatenated strings for example
-// since less data is transferred to renderer process
-// then, components uses numeric classname
-// TODO add option to make classnames numeric
-// when a component uses multiple classnames, it is a new number
-const Actions = 'Actions';
-const Button$2 = 'Button';
-const ButtonNarrow = 'ButtonNarrow';
-const ButtonPrimary = 'ButtonPrimary';
-const ButtonWide = 'ButtonWide';
-const Chevron = 'Chevron';
-const Empty = '';
-const Explorer = 'Explorer';
-const ExplorerDropTarget = 'DropTarget';
-const ExplorerErrorMessage = 'ExplorerErrorMessage';
-const ExplorerInputBox = 'ExplorerInputBox';
-const FileIcon = 'FileIcon';
-const FocusOutline = 'FocusOutline';
-const IconButton = 'IconButton';
-const InputValidationError = 'InputValidationError';
-const Label = 'Label';
-const LabelCut = 'LabelCut';
-const ListItems = 'ListItems';
-const MaskIconChevronDown = 'MaskIconChevronDown';
-const MaskIconChevronRight = 'MaskIconChevronRight';
-const ScrollBar = 'ScrollBar';
-const ScrollBarSmall = 'ScrollBarSmall';
-const ScrollBarThumb = 'ScrollBarThumb';
-const TreeItem = 'TreeItem';
-const TreeItemActive = 'TreeItemActive';
-const Viewlet = 'Viewlet';
-const Welcome = 'Welcome';
-const WelcomeMessage = 'WelcomeMessage';
+const TreeItem = 'treeitem';
 
 const Button$1 = 1;
 const Div = 4;
@@ -5474,7 +5512,7 @@ const HandleDragStart = 17;
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
+    className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
     childCount: 1
   }, {
@@ -5516,7 +5554,7 @@ const getFileIconVirtualDom = icon => {
     type: Img,
     className: FileIcon,
     src: icon,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };
@@ -5528,7 +5566,10 @@ const getInputClassName = hasEditingError => {
   return ExplorerInputBox;
 };
 
-const getInputDom = hasEditingError => {
+const getInputDom = (isEditing, hasEditingError) => {
+  if (!isEditing) {
+    return [];
+  }
   const ariaLabel = typeAFileName();
   return [{
     type: Input,
@@ -5551,7 +5592,10 @@ const label = {
   className: Label,
   childCount: 1
 };
-const getLabelDom = (name, isDimmed) => {
+const getLabelDom = (isEditing, name, isDimmed) => {
+  if (isEditing) {
+    return [];
+  }
   if (isDimmed) {
     return [{
       type: Div,
@@ -5562,13 +5606,6 @@ const getLabelDom = (name, isDimmed) => {
   return [label, text(name)];
 };
 
-const getInputOrLabelDom = (isEditing, hasEditingError, name, isCut, isIgnored) => {
-  if (isEditing) {
-    return getInputDom(hasEditingError);
-  }
-  return getLabelDom(name, isCut || isIgnored);
-};
-
 const getExplorerItemVirtualDom = item => {
   const {
     ariaExpanded,
@@ -5591,7 +5628,7 @@ const getExplorerItemVirtualDom = item => {
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
     type: Div,
-    role: TreeItem$1,
+    role: TreeItem,
     className,
     draggable: true,
     title: path,
@@ -5605,7 +5642,7 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id,
     'data-index': index
-  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name, isCut, isIgnored)];
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputDom(isEditing, hasEditingError), ...getLabelDom(isEditing, name, isCut || isIgnored)];
 };
 
 const getActiveDescendant = focusedIndex => {
@@ -5698,154 +5735,28 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   const parentNode = {
     type: Div,
     childCount,
-    className: mergeClassNames(Viewlet, Explorer),
-    role: None$2
+    className: mergeClassNames(Viewlet, Explorer$1),
+    role: None
   };
   const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets), ...scrollBarDom, ...errorDom];
   return dom;
 };
 
-const None$1 = 0;
-const Right = 1;
-const Down = 2;
-
-const getChevronType = (type, useChevrons) => {
-  if (!useChevrons) {
-    return None$1;
-  }
-  switch (type) {
-    case Directory:
-      return Right;
-    case DirectoryExpanded:
-    case DirectoryExpanding:
-      return Down;
-    default:
-      return None$1;
-  }
-};
-
-const None = 0;
-const Expanded = 1;
-const Collapsed = 2;
-
-const getExpandedType = type => {
-  switch (type) {
-    case Directory:
-      return Collapsed;
-    case DirectoryExpanding:
-    case DirectoryExpanded:
-      return Expanded;
-    default:
-      return None;
-  }
-};
-
-const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
-  let className = TreeItem;
-  if (isSelected || isFocused) {
-    className = mergeClassNames(className, TreeItemActive);
-  }
-  if (isDropping) {
-    className = mergeClassNames(className, 'DropTarget');
-  }
-  return className;
-};
-
-const defaultIndent$1 = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
-};
-
-// TODO make all of these variable configurable
-const defaultPaddingLeft = 4;
-const defaultIndent = 8;
-
-// TODO make chevron size configurable
-const chevronSize = 22;
-const getTreeItemIndentWithChevron = (depth, chevron) => {
-  // TODO use numeric value here, convert to string value in renderer process
-  const extraSpace = chevron ? 0 : chevronSize;
-  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
-};
-
-const ariaExpandedValues = [undefined, 'true', 'false'];
-const getEditingChevron = direntType => {
-  switch (direntType) {
-    case EditingDirectoryExpanded:
-      return Down;
-    case EditingFolder:
-      return Right;
-    default:
-      return None$1;
-  }
-};
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris = []) => {
-  const visible = [];
-  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
-  let iconIndex = 0;
-  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
-    const item = items[i];
-    let chevron = getChevronType(item.type, useChevrons);
-    const isFocused = i === focusedIndex;
-    const id = isFocused ? 'TreeItemActive' : undefined;
-    const isSelected = item.selected;
-    const isCut = cutItems.includes(item.path);
-    const isDropping = dropTargets.includes(i);
-    const isIgnored = sourceControlIgnoredUris.includes(item.path);
-    const className = getTreeItemClassName(isSelected, isFocused, isDropping); // TODO compute classname in dom function
-    const expanded = getExpandedType(item.type);
-    const ariaExpanded = ariaExpandedValues[expanded];
-    const isEditing = i === editingIndex;
-    let icon = icons[iconIndex++];
-    if (isEditing) {
-      icon = editingIcon;
-      chevron = getEditingChevron(item.type);
-    }
-    const indent = indentFn(item.depth, chevron);
-    visible.push({
-      ...item,
-      posInSet: item.posInSet ?? i + 1,
-      setSize: item.setSize ?? items.length,
-      isEditing: isEditing,
-      hasEditingError: isEditing && Boolean(editingErrorMessage),
-      icon,
-      indent,
-      ariaExpanded,
-      chevron,
-      id,
-      className,
-      isCut,
-      isIgnored,
-      index: i
-    });
-  }
-  return visible;
-};
-
 const renderItems = (oldState, newState) => {
   const {
-    cutItems,
-    sourceControlIgnoredUris,
     deltaY,
     dropTargets,
     editingErrorMessage,
-    editingIcon,
-    editingIndex,
-    editingType,
-    editingValue,
     focused,
     focusedIndex,
     height,
-    icons,
     itemHeight,
     items,
-    maxLineY,
     minLineY,
     root,
-    useChevrons,
     width
   } = newState;
-  const visibleDirents = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
+  const visibleDirents = newState.visibleExplorerItems;
   const isWide = width > 450;
   const contentHeight = items.length * itemHeight;
   const depth = items[focusedIndex]?.depth || 0;
@@ -5859,7 +5770,7 @@ const renderItems = (oldState, newState) => {
     left
   } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace);
   const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, deltaY, editingErrorMessage, top, left);
-  return ['Viewlet.setDom2', dom];
+  return [SetDom2, dom];
 };
 
 const renderValue = (oldState, newState) => {
@@ -5886,6 +5797,8 @@ const getRenderer = diffType => {
       return renderEditingSelection;
     case RenderDragData:
       return renderDragData;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }
@@ -5951,7 +5864,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };
@@ -6337,71 +6250,71 @@ const updateEditingValue = async (state, value, inputSource = User) => {
 };
 
 const commandMap = {
-  'Explorer.acceptEdit': wrapCommand(acceptEdit),
-  'Explorer.cancelEdit': wrapCommand(cancelEdit),
-  'Explorer.cancelTypeAhead': wrapCommand(cancelTypeAhead),
-  'Explorer.collapseAll': wrapCommand(collapseAll),
-  'Explorer.copyPath': wrapCommand(copyPath),
-  'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
-  'Explorer.expandAll': wrapCommand(expandAll),
-  'Explorer.expandRecursively': wrapCommand(expandRecursively),
-  'Explorer.focus': wrapCommand(focus),
-  'Explorer.focusFirst': wrapCommand(focusFirst),
-  'Explorer.focusIndex': wrapCommand(focusIndex),
-  'Explorer.focusLast': wrapCommand(focusLast),
-  'Explorer.handleDragStart': wrapCommand(handleDragStart),
-  'Explorer.handleDragOverIndex': wrapCommand(handleDragOverIndex),
-  'Explorer.focusNext': wrapCommand(focusNext),
-  'Explorer.focusNone': wrapCommand(focusNone),
-  'Explorer.focusPrevious': wrapCommand(focusPrevious),
+  'Explorer.acceptEdit': wrapListItemCommand(acceptEdit),
+  'Explorer.cancelEdit': wrapListItemCommand(cancelEdit),
+  'Explorer.cancelTypeAhead': wrapListItemCommand(cancelTypeAhead),
+  'Explorer.collapseAll': wrapListItemCommand(collapseAll),
+  'Explorer.copyPath': wrapListItemCommand(copyPath),
+  'Explorer.copyRelativePath': wrapListItemCommand(copyRelativePath),
+  'Explorer.expandAll': wrapListItemCommand(expandAll),
+  'Explorer.expandRecursively': wrapListItemCommand(expandRecursively),
+  'Explorer.focus': wrapListItemCommand(focus),
+  'Explorer.focusFirst': wrapListItemCommand(focusFirst),
+  'Explorer.focusIndex': wrapListItemCommand(focusIndex),
+  'Explorer.focusLast': wrapListItemCommand(focusLast),
+  'Explorer.handleDragStart': wrapListItemCommand(handleDragStart),
+  'Explorer.handleDragOverIndex': wrapListItemCommand(handleDragOverIndex),
+  'Explorer.focusNext': wrapListItemCommand(focusNext),
+  'Explorer.focusNone': wrapListItemCommand(focusNone),
+  'Explorer.focusPrevious': wrapListItemCommand(focusPrevious),
   'Explorer.getCommandIds': getCommandIds,
   'Explorer.getMenuEntries2': getMenuEntries2,
   'Explorer.getMouseActions': getMouseActions,
-  'Explorer.handleArrowLeft': wrapCommand(handleArrowLeft),
-  'Explorer.handleArrowRight': wrapCommand(handleArrowRight),
-  'Explorer.handleEscape': wrapCommand(handleEscape),
-  'Explorer.handleBlur': wrapCommand(handleBlur),
-  'Explorer.handleClick': wrapCommand(handleClick),
-  'Explorer.handleClickAt': wrapCommand(handleClickAt),
-  'Explorer.handleClickCurrent': wrapCommand(handleClickCurrent),
-  'Explorer.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
-  'Explorer.handleClickOpenFolder': wrapCommand(handleClickOpenFolder),
-  'Explorer.handleContextMenu': wrapCommand(handleContextMenu),
-  'Explorer.handleContextMenuKeyboard': wrapCommand(handleContextMenuKeyboard),
-  'Explorer.handleCopy': wrapCommand(handleCopy),
-  'Explorer.handleCut': wrapCommand(handleCut),
-  'Explorer.handleDragLeave': wrapCommand(handleDragLeave),
-  'Explorer.handleDragOver': wrapCommand(handleDragOver),
-  'Explorer.handleDrop': wrapCommand(handleDrop),
-  'Explorer.handleFocus': wrapCommand(handleFocus),
-  'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
-  'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
-  'Explorer.handleInputClick': wrapCommand(handleInputClick),
-  'Explorer.handleInputKeyDown': wrapCommand(handleInputKeyDown),
-  'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
-  'Explorer.handlePaste': wrapCommand(handlePaste),
-  'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
-  'Explorer.handleUpload': wrapCommand(handleUpload),
-  'Explorer.handleWheel': wrapCommand(handleWheel),
-  'Explorer.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
-  'Explorer.loadContent': wrapCommand(loadContent),
-  'Explorer.newFile': wrapCommand(newFile),
-  'Explorer.newFolder': wrapCommand(newFolder),
-  'Explorer.openContainingFolder': wrapCommand(openContainingFolder),
-  'Explorer.refresh': wrapCommand(refresh),
-  'Explorer.removeDirent': wrapCommand(removeDirent),
-  'Explorer.renameDirent': wrapCommand(renameDirent),
+  'Explorer.handleArrowLeft': wrapListItemCommand(handleArrowLeft),
+  'Explorer.handleArrowRight': wrapListItemCommand(handleArrowRight),
+  'Explorer.handleEscape': wrapListItemCommand(handleEscape),
+  'Explorer.handleBlur': wrapListItemCommand(handleBlur),
+  'Explorer.handleClick': wrapListItemCommand(handleClick),
+  'Explorer.handleClickAt': wrapListItemCommand(handleClickAt),
+  'Explorer.handleClickCurrent': wrapListItemCommand(handleClickCurrent),
+  'Explorer.handleClickCurrentButKeepFocus': wrapListItemCommand(handleClickCurrentButKeepFocus),
+  'Explorer.handleClickOpenFolder': wrapListItemCommand(handleClickOpenFolder),
+  'Explorer.handleContextMenu': wrapListItemCommand(handleContextMenu),
+  'Explorer.handleContextMenuKeyboard': wrapListItemCommand(handleContextMenuKeyboard),
+  'Explorer.handleCopy': wrapListItemCommand(handleCopy),
+  'Explorer.handleCut': wrapListItemCommand(handleCut),
+  'Explorer.handleDragLeave': wrapListItemCommand(handleDragLeave),
+  'Explorer.handleDragOver': wrapListItemCommand(handleDragOver),
+  'Explorer.handleDrop': wrapListItemCommand(handleDrop),
+  'Explorer.handleFocus': wrapListItemCommand(handleFocus),
+  'Explorer.handleIconThemeChange': wrapListItemCommand(handleIconThemeChange),
+  'Explorer.handleInputBlur': wrapListItemCommand(handleInputBlur),
+  'Explorer.handleInputClick': wrapListItemCommand(handleInputClick),
+  'Explorer.handleInputKeyDown': wrapListItemCommand(handleInputKeyDown),
+  'Explorer.handleKeyDown': wrapListItemCommand(handleKeyDown),
+  'Explorer.handlePaste': wrapListItemCommand(handlePaste),
+  'Explorer.handlePointerDown': wrapListItemCommand(handlePointerDown),
+  'Explorer.handleUpload': wrapListItemCommand(handleUpload),
+  'Explorer.handleWheel': wrapListItemCommand(handleWheel),
+  'Explorer.handleWorkspaceChange': wrapListItemCommand(handleWorkspaceChange),
+  'Explorer.loadContent': wrapListItemCommand(loadContent),
+  'Explorer.newFile': wrapListItemCommand(newFile),
+  'Explorer.newFolder': wrapListItemCommand(newFolder),
+  'Explorer.openContainingFolder': wrapListItemCommand(openContainingFolder),
+  'Explorer.refresh': wrapListItemCommand(refresh),
+  'Explorer.removeDirent': wrapListItemCommand(removeDirent),
+  'Explorer.renameDirent': wrapListItemCommand(renameDirent),
   'Explorer.restoreState': restoreState,
-  'Explorer.revealItem': wrapCommand(revealItem),
-  'Explorer.selectAll': wrapCommand(selectAll),
-  'Explorer.selectDown': wrapCommand(selectDown),
-  'Explorer.selectIndices': wrapCommand(setSelectedIndices),
-  'Explorer.selectUp': wrapCommand(selectUp),
-  'Explorer.setDeltaY': wrapCommand(setDeltaY),
-  'Explorer.setSelectedIndices': wrapCommand(setSelectedIndices),
-  'Explorer.toggleIndividualSelection': wrapCommand(toggleIndividualSelection),
-  'Explorer.updateEditingValue': wrapCommand(updateEditingValue),
-  'Explorer.updateIcons': wrapCommand(updateIcons),
+  'Explorer.revealItem': wrapListItemCommand(revealItem),
+  'Explorer.selectAll': wrapListItemCommand(selectAll),
+  'Explorer.selectDown': wrapListItemCommand(selectDown),
+  'Explorer.selectIndices': wrapListItemCommand(setSelectedIndices),
+  'Explorer.selectUp': wrapListItemCommand(selectUp),
+  'Explorer.setDeltaY': wrapListItemCommand(setDeltaY),
+  'Explorer.setSelectedIndices': wrapListItemCommand(setSelectedIndices),
+  'Explorer.toggleIndividualSelection': wrapListItemCommand(toggleIndividualSelection),
+  'Explorer.updateEditingValue': wrapListItemCommand(updateEditingValue),
+  'Explorer.updateIcons': wrapListItemCommand(updateIcons),
   // not wrapped
   'Explorer.create2': create2,
   'Explorer.diff2': diff2,