@lvce-editor/static-server 0.49.12 → 0.49.14

package/static/{907fbbd → 687c128}/packages/text-search-worker/dist/textSearchWorkerMain.js

@@ -1076,7 +1076,7 @@ const FocusSearchWholeWord = 34;
 const FocusToggleDetails = 1010;
 const FocusToggleReplace = 1020;
 
-const clearSearchResults$1 = state => {
+const clearSearchResults = state => {
   return {
     ...state,
     value: '',
@@ -1241,7 +1241,8 @@ const create = (uid, x, y, width, height, workspacePath, assetDir, itemHeight, v
     focusSource: User,
     flags: 0,
     platform,
-    searchInputErrorMessage: ''
+    searchInputErrorMessage: '',
+    history: []
   };
   set(uid, state, state);
   return state;
@@ -1325,8 +1326,6 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const ClearSearchResults = 'Clear Search Results';
-const CollapseAll$1 = 'Collapse All';
 const ConfirmReplaceManyOccurrencesInManyFiles = "Replace {PH1} occurrences across {PH2} files with '{PH3}'";
 const ConfirmReplaceManyOccurrencesInManyFilesNoValue = 'Replace {PH1} occurrences across {PH2} files';
 const ConfirmReplaceManyOccurrencesInOneFile = "Replace {PH1} occurrences across 1 file with '{PH2}'";
@@ -1339,16 +1338,13 @@ const MatchCase$1 = 'Match Case';
 const MatchWholeWord$1 = 'Match Whole Word';
 const NoResults = 'No results found';
 const Oneresult = '1 result in 1 file';
-const OpenNewSearchEditor = 'Open New Search Editor';
 const PreserveCase$1 = 'Preserve Case';
-const Refresh$1 = 'Refresh';
 const Replace = 'Replace';
 const ReplaceAll$1 = 'Replace All';
 const ReplacedManyOccurrencesInManyFiles = "Replaced {PH1} occurrences across {PH2} files with '{PH3}'";
 const ReplacedOneOccurrenceInOneFile = "Replaced 1 occurrence across 1 file with '{PH1}'";
 const ToggleReplace$1 = 'Toggle Replace';
 const UseRegularExpression$1 = 'Use Regular Expression';
-const ViewAsTree = 'View as Tree';
 const FilesToInclude$1 = 'Files to Include';
 const FilesToExclude$1 = 'Files to Exclude';
 const ToggleSearchDetails$1 = 'Toggle Search Details';
@@ -1446,21 +1442,6 @@ const replaceAll$1 = () => {
 const replace = () => {
   return i18nString(Replace);
 };
-const refresh$1 = () => {
-  return i18nString(Refresh$1);
-};
-const clearSearchResults = () => {
-  return i18nString(ClearSearchResults);
-};
-const openNewSearchEditor = () => {
-  return i18nString(OpenNewSearchEditor);
-};
-const viewAsTree = () => {
-  return i18nString(ViewAsTree);
-};
-const collapseAll = () => {
-  return i18nString(CollapseAll$1);
-};
 const filesToInclude = () => {
   return i18nString(FilesToInclude$1);
 };
@@ -1750,575 +1731,489 @@ const focusSearchValueNext = state => {
   return focusMatchCase$1(state);
 };
 
-const Alert = 'alert';
-const Button$2 = 'button';
-const CheckBox = 'checkbox';
-const None$1 = 'none';
-const ScrollBar$1 = 'scrollbar';
-const Status = 'status';
-const ToolBar = 'toolbar';
-const Tree$1 = 'tree';
-const TreeItem$1 = 'treeitem';
+const commandIds = ['clearSearchResults', 'collapseDetails', 'copy', 'dismissItem', 'expandDetails', 'focusFirst', 'focusIndex', 'focusLast', 'focusMatchCase', 'focusMatchCasePrevious', 'focusMatchWholeWord', 'focusNext', 'focusNextInput', 'focusNextPage', 'focusPreserveCasePrevious', 'focusPrevious', 'focusPreviousInput', 'focusPreviousPage', 'focusRegex', 'focusRegexNext', 'focusReplaceAll', 'focusReplaceValue', 'focusReplaceValueNext', 'focusReplaceValuePrevious', 'focusSearchValue', 'focusSearchValueNext', 'handleClick', 'handleClickAt', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleContextMenuMouseAt', 'handleExcludeInput', 'handleFocusIn', 'handleHeaderClick', 'handleHeaderFocusIn', 'handleIconThemeChange', 'handleIconThemeChange', 'handleIncludeInput', 'handleInput', 'handleInput2', 'handleListBlur', 'handleListFocus', 'handleReplaceInput', 'handleScrollBarCaptureLost', 'handleScrollBarClick', 'handleScrollBarMove', 'handleScrollBarThumbPointerMove', 'handleTouchEnd', 'handleTouchMove', 'handleTouchStart', 'handleUpdate', 'handleWheel', 'nextHistoryResult', 'previousHistoryResult', 'refresh', 'replaceAll', 'scrollDown', 'selectIndex', 'submit', 'toggleMatchCase', 'toggleMatchWholeWord', 'togglePreserveCase', 'toggleReplace', 'toggleSearchDetails', 'toggleUseRegularExpression'];
 
-const Actions = 'Actions';
-const Badge = 'Badge';
-const Chevron = 'Chevron';
-const CloseMaskIcon = 'MaskIcon MaskIconClose';
-const Empty = '';
-const FileIcon = 'FileIcon';
-const FocusOutline = 'FocusOutline';
-const Grow = 'Grow';
-const Highlight = 'Highlight';
-const HighlightDeleted = 'HighlightDeleted';
-const HighlightInserted = 'HighlightInserted';
-const IconButton = 'IconButton';
-const Label = 'Label';
-const List = 'List';
-const MaskIcon = 'MaskIcon';
-const MaskIconBook = 'MaskIconBook';
-const MaskIconCaseSensitive = 'MaskIconCaseSensitive';
-const MaskIconChevronDown = 'MaskIconChevronDown';
-const MaskIconChevronRight = 'MaskIconChevronRight';
-const MaskIconEllipsis = 'MaskIconEllipsis';
-const MaskIconExclude = 'MaskIconExclude';
-const MaskIconPreserveCase = 'MaskIconPreserveCase';
-const MaskIconRegex = 'MaskIconRegex';
-const MaskIconReplaceAll = 'MaskIconReplaceAll';
-const MaskIconWholeWord = 'MaskIconWholeWord';
-const MultilineInputBox = 'MultilineInputBox';
-const ScrollBar = 'ScrollBar';
-const ScrollBarThumb = 'ScrollBarThumb';
-const ScrollBarVertical = 'ScrollBarVertical';
-const Search$1 = 'Search';
-const SearchField = 'SearchField';
-const SearchFieldButton = 'SearchFieldButton';
-const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
-const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
-const SearchFieldButtons = 'SearchFieldButtons';
-const SearchFieldContainer = 'SearchFieldContainer';
-const SearchFieldError = 'SearchFieldError';
-const SearchHeader = 'SearchHeader';
-const SearchHeaderDetails = 'SearchHeaderDetails';
-const SearchHeaderDetailsExpanded = 'SearchHeaderDetailsExpanded';
-const SearchHeaderDetailsExpandedTop = 'SearchHeaderDetailsExpandedTop';
-const SearchHeaderDetailsHeading = 'SearchHeaderDetailsHeading';
-const SearchHeaderTop = 'SearchHeaderTop';
-const SearchHeaderTopRight = 'SearchHeaderTopRight';
-const SearchInputError = 'SearchInputError';
-const SearchRemove = 'SearchRemove';
-const SearchToggleButton = 'SearchToggleButton';
-const SearchToggleButtonExpanded = 'SearchToggleButtonExpanded';
-const SourceControlBadge = 'SourceControlBadge';
-const ToggleDetails = 'ToggleDetails';
-const Tree = 'Tree';
-const TreeItem = 'TreeItem';
-const TreeItemActive = 'TreeItemActive';
-const TreeItems$1 = 'TreeItems';
-const Viewlet = 'Viewlet';
-const ViewletSearchMessage = 'ViewletSearchMessage';
-const ViewletSearchMessageIndented = 'ViewletSearchMessageIndented';
+const getCommandIds = () => {
+  return commandIds;
+};
 
-const Button$1 = 1;
+const Tab = 2;
+const Enter = 3;
+const End = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
+const Delete = 18;
+const KeyC = 31;
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+const Alt = 1 << 9 >>> 0;
+
+const getKeyBindings = () => {
+  return [{
+    key: CtrlCmd | Alt | Enter,
+    command: 'Search.replaceAll',
+    when: FocusSearch
+  }, {
+    key: Tab,
+    command: 'Search.focusNextInput',
+    when: FocusSearch
+  }, {
+    key: Shift | Tab,
+    command: 'Search.focusPreviousInput',
+    when: FocusSearch
+  }, {
+    key: UpArrow,
+    command: 'Search.previousHistoryResult',
+    when: FocusSearch
+  }, {
+    key: DownArrow,
+    command: 'Search.nextHistoryResult',
+    when: FocusSearch
+  }, {
+    key: DownArrow,
+    command: 'Search.focusNext',
+    when: FocusSearchResults
+  }, {
+    key: UpArrow,
+    command: 'Search.focusPrevious',
+    when: FocusSearchResults
+  }, {
+    key: Delete,
+    command: 'Search.dismissItem',
+    when: FocusSearchResults
+  }, {
+    key: Home,
+    command: 'Search.focusFirst',
+    when: FocusSearchResults
+  }, {
+    key: End,
+    command: 'Search.focusLast',
+    when: FocusSearchResults
+  }, {
+    key: CtrlCmd | KeyC,
+    command: 'Search.copy',
+    when: FocusSearchResults
+  }, {
+    key: Enter,
+    command: 'Search.submit',
+    when: FocusSearchInput
+  }, {
+    key: Enter,
+    command: 'Search.submit',
+    when: FocusSearchReplaceInput
+  }];
 };
-const Text$1 = 12;
-const SetText = 1;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const applyPendingPatches = (patches, pendingPatches, skip) => {
-  for (let k = 0; k < pendingPatches.length - skip; k += 2) {
-    const type = pendingPatches[k];
-    const index = pendingPatches[k + 1];
-    if (type === NavigateParent) {
-      patches.push({
-        type
-      });
-    } else {
-      patches.push({
-        type,
-        index
-      });
-    }
+
+const handleError = error => {
+  console.error(`[text-search-worker] ${error}`);
+};
+
+const getFileIcon = async result => {
+  if (result.type === File) {
+    return invoke$2('IconTheme.getFileIcon', {
+      name: result.text
+    });
   }
-  pendingPatches.length = 0;
+  return '';
 };
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
+const getFileIcons = async matches => {
+  // TODO cache file icons
+  const promises = matches.map(getFileIcon);
+  const icons = await Promise.all(promises);
+  return icons;
 };
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
+
+// 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$1 = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
 };
-const getTotalChildCount = (nodes, index) => {
-  let i = index;
-  let pending = 1;
-  while (pending) {
-    const node = nodes[i];
-    pending += node.childCount;
-    pending--;
-    i++;
+
+const RE_PROTOCOL = /^([a-z-\d]+):\/\//;
+const getProtocol$1 = uri => {
+  const protocolMatch = uri.match(RE_PROTOCOL);
+  if (protocolMatch) {
+    return protocolMatch[1];
   }
-  return i - index;
+  return '';
 };
-const diff = (oldNodes, newNodes) => {
-  const patches = [];
-  const pendingPatches = [];
-  let i = 0;
-  let j = 0;
-  let siblingOffset = 0;
-  let maxSiblingOffset = 1;
-  const indexStack = [0, 1];
-  while (i < oldNodes.length && j < newNodes.length) {
-    const oldNode = oldNodes[i];
-    const newNode = newNodes[j];
 
-    // TODO maybe don't have the current element in indexstack
-    if (siblingOffset === maxSiblingOffset) {
-      indexStack.pop();
-      indexStack.pop();
-      pendingPatches.push(NavigateParent, 0);
-      maxSiblingOffset = indexStack.pop();
-      siblingOffset = indexStack.pop() + 1;
-    }
-    while (siblingOffset === maxSiblingOffset) {
-      pendingPatches.push(NavigateParent, 0);
-      maxSiblingOffset = indexStack.pop();
-      siblingOffset = indexStack.pop() + 1;
-    }
-    if (oldNode.type !== newNode.type) {
-      let skip = 0;
-      if (pendingPatches.length > 0 && pendingPatches.at(-2) === NavigateChild) {
-        skip = 2;
-      }
-      applyPendingPatches(patches, pendingPatches, skip);
-      const oldTotal = getTotalChildCount(oldNodes, i);
-      const newTotal = getTotalChildCount(newNodes, j);
-      patches.push({
-        type: RemoveChild,
-        index: siblingOffset
-      });
-      patches.push({
-        type: Add,
-        nodes: newNodes.slice(j, j + newTotal)
-      });
-      siblingOffset++;
-      i += oldTotal;
-      j += newTotal;
-      continue;
+const getTextSearchResultCounts = results => {
+  let resultCount = 0;
+  let fileCount = 0;
+  for (const result of results) {
+    switch (result.type) {
+      case File:
+        fileCount++;
+        break;
+      case Match:
+        resultCount++;
+        break;
     }
-    if (oldNode.type === Text$1 && newNode.type === Text$1) {
-      if (oldNode.text !== newNode.text) {
-        if (siblingOffset !== 0) {
-          pendingPatches.push(NavigateSibling, siblingOffset);
-        }
-        applyPendingPatches(patches, pendingPatches, 0);
-        patches.push({
-          type: SetText,
-          value: newNode.text
-        });
-      }
-      i++;
-      j++;
-      siblingOffset++;
-      continue;
-    }
-    const oldKeys = getKeys(oldNode);
-    const newKeys = getKeys(newNode);
-    let hasAttributeChanges = false;
-    for (const key of newKeys) {
-      if (oldNode[key] !== newNode[key]) {
-        hasAttributeChanges = true;
-        break;
-      }
-    }
-    for (const key of oldKeys) {
-      if (!(key in newNode)) {
-        hasAttributeChanges = true;
-        break;
-      }
-    }
-    if (hasAttributeChanges) {
-      if (siblingOffset > 0) {
-        pendingPatches.push(NavigateSibling, siblingOffset);
-      }
-      applyPendingPatches(patches, pendingPatches, 0);
-      for (const key of newKeys) {
-        if (oldNode[key] !== newNode[key]) {
-          patches.push({
-            type: SetAttribute,
-            key,
-            value: newNode[key]
-          });
-        }
-      }
-      for (const key of oldKeys) {
-        if (!(key in newNode)) {
-          patches.push({
-            type: RemoveAttribute,
-            key
-          });
-        }
-      }
-    }
-    if (oldNode.childCount && newNode.childCount) {
-      maxSiblingOffset = oldNode.childCount;
-      indexStack.push(0, maxSiblingOffset);
-      pendingPatches.push(NavigateChild, 0);
-      i++;
-      j++;
-      continue;
-    }
-    if (oldNode.childCount) {
-      applyPendingPatches(patches, pendingPatches, 0);
-      for (let k = 0; k < oldNode.childCount; k++) {
-        patches.push({
-          type: RemoveChild,
-          index: 0
-        });
-      }
-      i += getTotalChildCount(oldNodes, i);
-      j++;
-      siblingOffset++;
-      continue;
-    }
-    if (newNode.childCount) {
-      applyPendingPatches(patches, pendingPatches, 0);
-      const total = getTotalChildCount(newNodes, j);
-      patches.push({
-        type: Add,
-        nodes: newNodes.slice(j + 1, j + total)
-      });
-      i++;
-      j += total;
-      continue;
-    }
-    i++;
-    j++;
-    siblingOffset++;
-  }
-  while (i < oldNodes.length) {
-    if (indexStack.length !== 2) {
-      patches.push({
-        type: NavigateParent
-      });
-    }
-    patches.push({
-      type: RemoveChild,
-      index: siblingOffset
-    });
-    i += getTotalChildCount(oldNodes, i);
-    indexStack.pop();
-    indexStack.pop();
   }
-  while (j < newNodes.length) {
-    if (siblingOffset > 0) {
-      patches.push({
-        type: NavigateSibling,
-        index: siblingOffset
-      });
-      siblingOffset = 0;
-    }
-    const count = getTotalChildCount(newNodes, j);
-    patches.push({
-      type: Add,
-      nodes: newNodes.slice(j, j + count)
-    });
-    j += count;
+  return {
+    fileCount,
+    resultCount
+  };
+};
+
+const EmptyString = '';
+
+const isEmptyString = string => {
+  return string === EmptyString;
+};
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
   }
-  return patches;
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+const getScrollBarOffset$1 = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
 };
+const getScrollBarY$1 = getScrollBarOffset$1;
 
-const Button = 1;
-const Del = 21;
-const Div = 4;
-const H4 = 24;
-const Img = 17;
-const Ins = 20;
-const Span = 8;
-const Text = 12;
-const TextArea = 62;
+const textSearch$6 = async (scheme, root, query) => {
+  string(scheme);
+  string(query);
+  const result = await invoke$2('ExtensionHostTextSearch.executeTextSearchProvider', scheme, query);
+  return result;
+};
 
-const getIconVirtualDom = (icon, type = Div) => {
-  return {
-    type,
-    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None$1,
-    childCount: 0
-  };
+const textSearch$5 = async (scheme, root, query, options, assetDir) => {
+  return invoke$2('ExtensionHostTextSearch.textSearchFetch', scheme, root, query, options, assetDir);
 };
 
-const getActionButtonVirtualDom = action => {
-  const {
-    id,
-    icon,
-    command
-  } = action;
-  return [{
-    type: Button,
-    className: IconButton,
-    title: id,
-    'data-command': command,
-    childCount: 1
-  }, getIconVirtualDom(icon)];
+const textSearch$4 = async (scheme, root, query) => {
+  return invoke$2('ExtensionHostTextSearch.textSearchHtml', scheme, root, query);
 };
 
-const getActionVirtualDom = action => {
-  switch (action.type) {
-    case Button$1:
-      return getActionButtonVirtualDom(action);
-    default:
-      return [];
-  }
+const textSearch$3 = async (scheme, root, query, options, assetDir) => {
+  return invoke$2('ExtensionHostTextSearch.textSearchMemory', scheme, root, query, options, assetDir);
 };
 
-const getActionsVirtualDom = actions => {
-  return [{
-    type: Div,
-    className: Actions,
-    role: ToolBar,
-    childCount: actions.length
-  }, ...actions.flatMap(getActionVirtualDom)];
+const getRipGrepArgs = ({
+  threads,
+  isCaseSensitive,
+  searchString,
+  useRegularExpression
+}) => {
+  const ripGrepArgs = ['--hidden', '--no-require-git', '--smart-case', '--stats', '--json'];
+  ripGrepArgs.push('--threads', `${threads}`);
+  if (isCaseSensitive) {
+    ripGrepArgs.push('--case-sensitive');
+  } else {
+    ripGrepArgs.push('--ignore-case');
+  }
+  if (useRegularExpression) {
+    ripGrepArgs.push('--regexp', searchString);
+  } else {
+    ripGrepArgs.push('--fixed-strings');
+    ripGrepArgs.push('--');
+    ripGrepArgs.push(searchString);
+  }
+  ripGrepArgs.push('.');
+  return ripGrepArgs;
 };
 
-const commandIds = ['clearSearchResults', 'collapseDetails', 'copy', 'dismissItem', 'expandDetails', 'focusFirst', 'focusIndex', 'focusLast', 'focusMatchCase', 'focusMatchCasePrevious', 'focusMatchWholeWord', 'focusNext', 'focusNextInput', 'focusNextPage', 'focusPreserveCasePrevious', 'focusPrevious', 'focusPreviousInput', 'focusPreviousPage', 'focusRegex', 'focusRegexNext', 'focusReplaceAll', 'focusReplaceValue', 'focusReplaceValueNext', 'focusReplaceValuePrevious', 'focusSearchValue', 'focusSearchValueNext', 'handleClick', 'handleClickAt', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleContextMenuMouseAt', 'handleExcludeInput', 'handleFocusIn', 'handleHeaderClick', 'handleHeaderFocusIn', 'handleIconThemeChange', 'handleIconThemeChange', 'handleIncludeInput', 'handleInput', 'handleListBlur', 'handleListFocus', 'handleReplaceInput', 'handleScrollBarCaptureLost', 'handleScrollBarClick', 'handleScrollBarMove', 'handleScrollBarThumbPointerMove', 'handleTouchEnd', 'handleTouchMove', 'handleTouchStart', 'handleUpdate', 'handleWheel', 'refresh', 'replaceAll', 'scrollDown', 'selectIndex', 'submit', 'toggleMatchCase', 'toggleMatchWholeWord', 'togglePreserveCase', 'toggleReplace', 'toggleSearchDetails', 'toggleUseRegularExpression'];
+const Electron = 2;
+const Remote = 3;
 
-const getCommandIds = () => {
-  return commandIds;
+const Https = 'https:';
+const Ws = 'ws:';
+const Wss = 'wss:';
+
+const getWebSocketProtocol = locationProtocol => {
+  return locationProtocol === Https ? Wss : Ws;
 };
 
-const Tab = 2;
-const Enter = 3;
-const End = 255;
-const Home = 12;
-const UpArrow = 14;
-const DownArrow = 16;
-const Delete = 18;
-const KeyC = 31;
+const getWebSocketUrl = (type, host, locationProtocol) => {
+  const wsProtocol = getWebSocketProtocol(locationProtocol);
+  return `${wsProtocol}//${host}/websocket/${type}`;
+};
 
-const CtrlCmd = 1 << 11 >>> 0;
-const Shift = 1 << 10 >>> 0;
-const Alt = 1 << 9 >>> 0;
+const getHost = () => {
+  return location.host;
+};
+const getProtocol = () => {
+  return location.protocol;
+};
 
-const getKeyBindings = () => {
-  return [{
-    key: CtrlCmd | Alt | Enter,
-    command: 'Search.replaceAll',
-    when: FocusSearch
-  }, {
-    key: Tab,
-    command: 'Search.focusNextInput',
-    when: FocusSearch
-  }, {
-    key: Shift | Tab,
-    command: 'Search.focusPreviousInput',
-    when: FocusSearch
-  }, {
-    key: DownArrow,
-    command: 'Search.focusNext',
-    when: FocusSearchResults
-  }, {
-    key: UpArrow,
-    command: 'Search.focusPrevious',
-    when: FocusSearchResults
-  }, {
-    key: Delete,
-    command: 'Search.dismissItem',
-    when: FocusSearchResults
-  }, {
-    key: Home,
-    command: 'Search.focusFirst',
-    when: FocusSearchResults
-  }, {
-    key: End,
-    command: 'Search.focusLast',
-    when: FocusSearchResults
-  }, {
-    key: CtrlCmd | KeyC,
-    command: 'Search.copy',
-    when: FocusSearchResults
-  }, {
-    key: Enter,
-    command: 'Search.submit',
-    when: FocusSearchInput
-  }, {
-    key: Enter,
-    command: 'Search.submit',
-    when: FocusSearchReplaceInput
-  }];
+const launchSearchProcess = async () => {
+  const host = getHost();
+  const protocol = getProtocol();
+  const wsUrl = getWebSocketUrl('search-process', host, protocol);
+  const webSocket = new WebSocket(wsUrl);
+  const rpc = await WebSocketRpcParent.create({
+    webSocket,
+    commandMap: {}
+  });
+  return rpc;
 };
 
-const ClearAll = 'ClearAll';
-const CollapseAll = 'CollapseAll';
-const ListFlat = 'ListFlat';
-const NewFile = 'NewFile';
-const Refresh = 'Refresh';
-
-const getActions = () => {
-  return [{
-    type: Button$1,
-    id: refresh$1(),
-    icon: Refresh,
-    command: 'refresh'
-  }, {
-    type: Button$1,
-    id: clearSearchResults(),
-    icon: ClearAll,
-    command: 'clearSearchResults'
-  }, {
-    type: Button$1,
-    id: openNewSearchEditor(),
-    icon: NewFile,
-    command: ''
-  }, {
-    type: Button$1,
-    id: viewAsTree(),
-    icon: ListFlat,
-    command: ''
-  }, {
-    type: Button$1,
-    id: collapseAll(),
-    icon: CollapseAll,
-    command: ''
-  }];
+const state$1 = {
+  rpc: undefined
+};
+const getOrCreate$1 = () => {
+  if (!state$1.rpc) {
+    // @ts-ignore
+    state$1.rpc = launchSearchProcess();
+  }
+  return state$1.rpc;
 };
 
-const None = 0;
-const Collapsed = 1;
-const Expanded = 2;
+const invoke$1 = async (method, ...params) => {
+  const rpc = await getOrCreate$1();
+  return rpc.invoke(method, ...params);
+};
 
-const getMatchCount = (results, startIndex) => {
-  for (let i = startIndex + 1; i < results.length; i++) {
-    const result = results[i];
-    if (result.type === File) {
-      return i - startIndex - 1;
-    }
-  }
-  return results.length - startIndex - 1;
+const getPortTuple = () => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  return {
+    port1,
+    port2
+  };
 };
 
-const getChildCount = (expanded, matchCount) => {
-  let childCount = 1;
-  if (expanded === Expanded || expanded === Collapsed) {
-    childCount += 2;
-  }
-  if (matchCount) {
-    childCount++;
-  }
-  childCount++;
-  return childCount;
+const launchSearchProcessElectron = async () => {
+  const {
+    port1,
+    port2
+  } = getPortTuple();
+  const rpcPromise = MessagePortRpcParent.create({
+    messagePort: port2,
+    commandMap: {},
+    isMessagePortOpen: true
+  });
+  await invokeAndTransfer('SendMessagePortToElectron.sendMessagePortToElectron', port1, 'HandleMessagePortForSearchProcess.handleMessagePortForSearchProcess');
+  port2.start();
+  const rpc = await rpcPromise;
+  return rpc;
 };
 
-// TODO this should be in FileSystem module
-const pathBaseName = path => {
-  return path.slice(path.lastIndexOf('/') + 1);
+const state = {
+  rpc: undefined
 };
-const getRelativePath = relativePath => {
-  if (relativePath.startsWith('./')) {
-    return `/${relativePath.slice(2)}`; // TODO support windows paths
+const getOrCreate = () => {
+  if (!state.rpc) {
+    // @ts-ignore
+    state.rpc = launchSearchProcessElectron();
   }
-  return `/${relativePath}`; // TODO support windows paths
+  return state.rpc;
 };
 
-const getSearchDisplayResultFile = (results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults) => {
-  const path = text;
-  const absolutePath = getRelativePath(path);
-  const baseName = pathBaseName(path);
-  const index = originalResults.indexOf(results[i]);
-  const matchCount = getMatchCount(results, index);
-  const expanded = collapsedPaths.includes(path) ? Collapsed : Expanded;
-  const childCount = getChildCount(expanded, matchCount);
-  const badgeText = `${matchCount}`;
-  return {
-    badgeText,
-    childCount,
-    depth: 0,
-    expanded,
-    focused,
-    icon: fileIcons[relativeIndex],
-    matchLength: 0,
-    matchStart: 0,
-    posInSet,
-    replacement: '',
-    setSize,
-    text: baseName,
-    title: absolutePath
-  };
+const invoke = async (method, ...params) => {
+  const rpc = await getOrCreate();
+  return rpc.invoke(method, ...params);
 };
 
-const getDisplayResultMatch = (setSize, searchTermLength, replacement, text, posInSet, start, focused) => {
-  return {
-    badgeText: '',
-    childCount: getChildCount(None, 0),
-    depth: 1,
-    expanded: None,
-    focused,
-    icon: '',
-    matchLength: searchTermLength,
-    matchStart: start,
-    posInSet,
-    replacement,
-    setSize,
-    text: text,
-    title: text
+const textSearch$2 = async (scheme, root, query, options, assetDir, platform) => {
+  const ripGrepArgs = getRipGrepArgs({
+    ...options,
+    searchString: query
+  });
+  const actualOptions = {
+    ripGrepArgs,
+    searchDir: root
   };
+  if (platform === Remote) {
+    const result = await invoke$1('TextSearch.search', actualOptions);
+    // TODO api is weird
+    return result.results;
+  }
+  if (platform === Electron) {
+    const result = await invoke('TextSearch.search', actualOptions);
+    return result.results;
+  }
+  const results = await invoke$2('SearchProcess.invoke', 'TextSearch.search', actualOptions);
+  // TODO api is weird
+  return results.results;
 };
 
-const getDisplayResult = (results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults) => {
-  const result = results[i];
-  const {
-    type,
-    text,
-    start
-  } = result;
-  const posInSet = i + 1;
-  const focused = i === focusedIndex;
-  const relativeIndex = i - minLineY;
-  switch (type) {
-    case File:
-      return getSearchDisplayResultFile(results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults);
-    case Match:
-      return getDisplayResultMatch(setSize, searchTermLength, replacement, text, posInSet, start, focused);
-    default:
-      throw new Error('unexpected search result type');
+const textSearch$1 = (scheme, root, query) => {
+  // TODO ask renderer worker for files
+  const entries = Object.entries({});
+  const results = [];
+  for (const [key, value] of entries) {
+    // @ts-ignore
+    if (value.includes(query)) {
+      results.push([key, [{
+        absoluteOffset: 0,
+        preview: value
+      }]]);
+    }
   }
+  return results;
 };
 
-const getDisplayResults = (results, itemHeight, resultCount, searchTerm, minLineY, maxLineY, replacement, fileIcons, focusedIndex, collapsedPaths, originalResults) => {
-  const displayResults = [];
-  const setSize = resultCount;
-  const searchTermLength = searchTerm.length;
-  for (let i = minLineY; i < maxLineY; i++) {
-    const displayResult = getDisplayResult(results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults);
-    displayResults.push(displayResult);
+const getProvider = scheme => {
+  switch (scheme) {
+    case '':
+      return textSearch$2;
+    case 'web':
+      return textSearch$1;
+    case 'fetch':
+      return textSearch$5;
+    case 'html':
+      return textSearch$4;
+    case 'memfs':
+      return textSearch$3;
+    default:
+      return textSearch$6;
   }
-  return displayResults;
 };
 
-const HandleClick = 'handleClick';
-const HandleExcludeInput = 'handleExcludeInput';
-const HandleHeaderClick2 = 'handleHeaderClick2';
-const HandleHeaderFocusIn = 'handleHeaderFocusIn';
-const HandleIncludeInput = 'handleIncludeInput';
-const HandleInput = 'handleInput';
-const HandleListBlur = 'handleListBlur';
-const HandleReplaceInput = 'handleReplaceInput';
-const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
-const HandleToggleButtonClick = 'handleToggleButtonClick';
-const HandleWheel = 'handleWheel';
-const HandleListFocus = 'handleListFocus';
-const HandleContextMenu = 'handleContextMenu';
-
-const FilesToExclude = 'FilesToExclude';
-const FilesToInclude = 'FilesToInclude';
-const MatchCase = 'MatchCase';
-const MatchWholeWord = 'MatchWholeWord';
+const textSearch = async (root, query, options, assetDir, platform) => {
+  string(root);
+  string(query);
+  const scheme = getProtocol$1(root);
+  const provider = getProvider(scheme);
+  const results = await provider(scheme, root, query, options, assetDir, platform);
+  return results;
+};
+
+// Based on https://github.com/microsoft/vscode/blob/ad375c92764b72a1f28f3e1626563e9e41e5c740/src/vs/workbench/contrib/search/browser/searchWidget.ts#L393 by Microsoft (License MIT)
+
+const validateSearchInput = (value, flags) => {
+  if (!value) {
+    return '';
+  }
+  if (!(flags & UseRegularExpression$2)) {
+    return '';
+  }
+  try {
+    new RegExp(value, 'u');
+  } catch (error) {
+    if (error && error instanceof Error) {
+      return error.message;
+    }
+    return '';
+  }
+  return '';
+};
+
+const handleUpdate = async (state, update) => {
+  const partialNewState = {
+    ...state,
+    ...update
+  };
+  try {
+    const {
+      height,
+      itemHeight,
+      minimumSliderSize,
+      headerHeight,
+      flags,
+      value,
+      threads,
+      includeValue,
+      excludeValue
+    } = partialNewState;
+    if (isEmptyString(value)) {
+      return {
+        ...partialNewState,
+        minLineY: 0,
+        maxLineY: 0,
+        deltaY: 0,
+        items: [],
+        listItems: [],
+        matchCount: 0,
+        message: '',
+        loaded: true,
+        searchInputErrorMessage: ''
+      };
+    }
+    const searchInputErrorMessage = validateSearchInput(value, flags);
+    if (searchInputErrorMessage) {
+      return {
+        ...partialNewState,
+        searchInputErrorMessage: searchInputErrorMessage
+      };
+    }
+    const root = state.workspacePath;
+    const scheme = getProtocol$1(root);
+    const results = await textSearch(root, value, {
+      threads,
+      isCaseSensitive: Boolean(flags & MatchCase$2),
+      useRegularExpression: Boolean(flags & UseRegularExpression$2),
+      exclude: excludeValue,
+      include: includeValue,
+      assetDir: state.assetDir,
+      root,
+      query: value,
+      scheme,
+      flags,
+      matchWholeWord: Boolean(flags & MatchWholeWord$2)
+    }, state.assetDir, state.platform);
+    if (!Array.isArray(results)) {
+      throw new TypeError('results must be of type array');
+    }
+    const {
+      fileCount,
+      resultCount
+    } = getTextSearchResultCounts(results);
+    const message = getStatusMessage(resultCount, fileCount);
+    const total = results.length;
+    const contentHeight = total * itemHeight;
+    const listHeight = height - headerHeight;
+    const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
+    const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
+    const maxLineY = Math.min(numberOfVisible, total);
+    const finalDeltaY = Math.max(contentHeight - listHeight, 0);
+    const visible = results.slice(0, maxLineY);
+    const icons = await getFileIcons(visible);
+    return {
+      ...partialNewState,
+      minLineY: 0,
+      deltaY: 0,
+      value,
+      items: results,
+      listItems: results,
+      message,
+      maxLineY: maxLineY,
+      scrollBarHeight,
+      finalDeltaY,
+      threads,
+      fileCount,
+      matchCount: resultCount,
+      loaded: true,
+      icons,
+      searchInputErrorMessage: ''
+    };
+  } catch (error) {
+    handleError(error);
+    return {
+      ...partialNewState,
+      message: `${error}`,
+      items: [],
+      listItems: [],
+      matchCount: 0,
+      fileCount: 0,
+      minLineY: 0,
+      maxLineY: 0
+    };
+  }
+};
+
+const handleExcludeInput = (state, value, inputSource = Script) => {
+  return handleUpdate(state, {
+    excludeValue: value,
+    inputSource
+  });
+};
+
+const FilesToExclude = 'FilesToExclude';
+const FilesToInclude = 'FilesToInclude';
+const MatchCase = 'MatchCase';
+const MatchWholeWord = 'MatchWholeWord';
 const PreserveCase = 'PreserveCase';
 const ReplaceAll = 'ReplaceAll';
 const ReplaceValue = 'ReplaceValue';
@@ -2329,1748 +2224,1778 @@ const ToggleSearchDetails = 'ToggleSearchDetails';
 const UseExcludeSettings = 'UseExcludeSettings';
 const UseRegularExpression = 'UseRegularExpression';
 
-const getSearchDetailsToggleVirtualDom = () => {
-  return [{
-    type: Div,
-    className: ToggleDetails,
-    role: Button$2,
-    tabIndex: 0,
-    ariaLabel: toggleSearchDetails(),
-    title: toggleSearchDetails(),
-    name: ToggleSearchDetails,
-    childCount: 1
-  }, {
-    type: Div,
-    className: mergeClassNames(MaskIcon, MaskIconEllipsis),
-    childCount: 0
-  }];
+const noop = state => {
+  return state;
 };
 
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
+const applyBulkReplacement = async bulkEdits => {
+  await invoke$2('BulkReplacement.applyBulkReplacement', bulkEdits);
 };
 
-const getClassName = indented => {
-  if (indented) {
-    return mergeClassNames(ViewletSearchMessage, ViewletSearchMessageIndented);
+const getReplacedMessage = (fileCount, replaceCount, replacement) => {
+  if (replaceCount === 1) {
+    return replacedOneOccurrenceInOneFile(replacement);
   }
-  return ViewletSearchMessage;
-};
-const getSearchMessageVirtualDom = (message, indented) => {
-  return [{
-    type: Div,
-    className: getClassName(indented),
-    role: Status,
-    tabIndex: 0,
-    childCount: 1
-  }, text(message)];
+  if (fileCount === 1) {
+    return replacedManyOccurrencesInOneFile(replaceCount, replacement);
+  }
+  return replacedManyOccurrencesInManyFiles(replaceCount, fileCount, replacement);
 };
 
-const getSearchHeaderDetailsCollapsedVirtualDom = message => {
-  return [{
-    type: Div,
-    className: SearchHeaderDetails,
-    childCount: 2
-  }, ...getSearchMessageVirtualDom(message, true), ...getSearchDetailsToggleVirtualDom()];
+const getFileName = text => {
+  // TODO make api stricter so that results always have the same shape
+  if (text.startsWith('./')) {
+    return text.slice(2);
+  }
+  return text;
 };
 
-const CheckBoxEnabled = 1;
-const CheckBoxDisabled = 2;
-const ButtonEnabled = 2;
-const ButtonDisabled = 3;
-
-const getInputActionsExclude = flags => {
-  const inside = [{
-    icon: MaskIconExclude,
-    title: useExcludeSettings(),
-    command: 'toggleUseExcludeSettings',
-    flag: flags & UseIgnoreFiles ? CheckBoxEnabled : CheckBoxDisabled,
-    name: UseExcludeSettings
-  }];
-  const outside = [];
-  return {
-    inside,
-    outside
+const getReplaceElements = (items, workspacePath, replacement) => {
+  let element = {
+    uri: '',
+    changes: []
   };
+  const bulkChanges = [];
+  let changes = [];
+  // TODO simplify code by first matching files with their elements, then creating bulk edits
+  for (const match of items) {
+    const {
+      type,
+      text,
+      lineNumber,
+      end,
+      start
+    } = match;
+    if (type === File) {
+      changes = [];
+      const fileName = getFileName(text);
+      const absolutePath = `${workspacePath}/${fileName}`;
+      element = {
+        uri: absolutePath,
+        changes
+      };
+      bulkChanges.push(element);
+    } else {
+      changes.push({
+        text: replacement,
+        startRowIndex: lineNumber - 1,
+        startColumnIndex: start,
+        endRowIndex: lineNumber,
+        endColumnIndex: end
+      });
+    }
+  }
+  return bulkChanges;
 };
 
-const getInputActionsInclude = flags => {
-  const inside = [{
-    icon: MaskIconBook,
-    title: searchOnlyOpenEditors(),
-    command: 'searchOnlyOpenEditors',
-    flag: flags & OpenEditors ? CheckBoxEnabled : CheckBoxDisabled,
-    name: SearchOnlyOpenEditors
-  }];
-  const outside = [];
+const replaceAll = async state => {
+  const {
+    workspacePath,
+    items,
+    replacement,
+    matchCount
+  } = state;
+  const bulkEdits = getReplaceElements(items, workspacePath, replacement);
+  await applyBulkReplacement(bulkEdits);
+  const fileCount = bulkEdits.length;
+  const message = getReplacedMessage(fileCount, matchCount, replacement);
   return {
-    inside,
-    outside
+    ...state,
+    items: [],
+    listItems: [],
+    minLineY: 0,
+    maxLineY: 0,
+    message
   };
 };
 
-const getSearchFieldButtonClassName = flag => {
-  return mergeClassNames(SearchFieldButton, flag === CheckBoxEnabled ? SearchFieldButtonChecked : '', flag === ButtonDisabled ? SearchFieldButtonDisabled : '');
+const toggleDetailsExpanded = state => {
+  if (hasDetailsExpanded(state.flags)) {
+    return collapseDetails(state);
+  }
+  return expandDetails(state);
 };
 
-// TODO maybe move logic to viewmodel, which returns ariaChecked 1 | 2 | 3
-const getAriaChecked = flag => {
-  switch (flag) {
-    case CheckBoxEnabled:
-      return true;
-    case CheckBoxDisabled:
-      return false;
-    default:
-      return undefined;
-  }
+const toggleSearchFlag = (state, flag) => {
+  return handleUpdate(state, {
+    flags: state.flags ^ flag
+  });
 };
 
-// TODO have have separate renderers for checkbox and button elements
-const getRole = flag => {
-  switch (flag) {
-    case CheckBoxEnabled:
-    case CheckBoxDisabled:
-      return CheckBox;
-    default:
-      return undefined;
-  }
+const toggleMatchCase = state => {
+  return toggleSearchFlag(state, MatchCase$2);
 };
-const getDisabled = flag => {
-  switch (flag) {
-    case ButtonDisabled:
-      return true;
-    default:
-      return undefined;
-  }
+
+const toggleMatchWholeWord = state => {
+  return toggleSearchFlag(state, MatchWholeWord$2);
 };
-const getSearchFieldButtonVirtualDom = button => {
-  const {
-    icon,
-    title,
-    name,
-    flag
-  } = button;
-  const ariaChecked = getAriaChecked(flag);
-  const role = getRole(flag);
-  const disabled = getDisabled(flag);
-  return [{
-    type: Button,
-    className: getSearchFieldButtonClassName(flag),
-    name,
-    title,
-    role,
-    ariaChecked,
-    disabled,
-    tabIndex: 0,
-    childCount: 1
-  }, {
-    type: Span,
-    className: mergeClassNames(MaskIcon, icon),
-    childCount: 0
-  }];
+
+const toggleOpenEditors = state => {
+  return toggleSearchFlag(state, OpenEditors);
 };
 
-const getOutSideButtonsDom = outsideButtons => {
-  if (outsideButtons.length === 0) {
-    return {
-      preNodes: [],
-      postNodes: []
-    };
-  }
-  return {
-    preNodes: [{
-      type: Div,
-      className: SearchFieldContainer,
-      role: None$1,
-      childCount: 1 + outsideButtons.length
-    }],
-    postNodes: outsideButtons.flatMap(getSearchFieldButtonVirtualDom)
-  };
+const togglePreserveCase = state => {
+  return toggleSearchFlag(state, PreserveCase$2);
 };
 
-const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', hasError = false) => {
-  const {
-    preNodes,
-    postNodes
-  } = getOutSideButtonsDom(outsideButtons);
-  const searchFieldClassName = hasError ? mergeClassNames(SearchField, SearchFieldError) : SearchField;
-  const dom = [...preNodes, {
-    type: Div,
-    className: searchFieldClassName,
-    role: None$1,
-    childCount: 2
-  }, {
-    type: TextArea,
-    className: MultilineInputBox,
-    spellcheck: false,
-    autocapitalize: 'off',
-    autocorrect: 'off',
-    placeholder,
-    name,
-    onInput,
-    onFocus,
-    childCount: 0
-  }, {
-    type: Div,
-    className: SearchFieldButtons,
-    childCount: insideButtons.length
-  }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom), ...postNodes];
-  return dom;
+const toggleReplace = state => {
+  return toggleSearchFlag(state, ReplaceExpanded);
 };
 
-const getSearchHeaderDetailsExpandedVirtualDom = (flags, message) => {
-  const includeButtons = getInputActionsInclude(flags);
-  const excludeButtons = getInputActionsExclude(flags);
-  return [{
-    type: Div,
-    className: SearchHeaderDetailsExpanded,
-    childCount: 5
-  }, {
-    type: Div,
-    className: SearchHeaderDetailsExpandedTop,
-    childCount: 2
-  }, ...getSearchDetailsToggleVirtualDom(), {
-    type: H4,
-    className: SearchHeaderDetailsHeading,
-    childCount: 1
-  }, text(filesToInclude()), ...getSearchFieldVirtualDom(FilesToInclude, 'Include', HandleIncludeInput, includeButtons.inside, includeButtons.outside), {
-    type: H4,
-    className: SearchHeaderDetailsHeading,
-    childCount: 1
-  }, text(filesToExclude()), ...getSearchFieldVirtualDom(FilesToExclude, 'Exclude', HandleExcludeInput, excludeButtons.inside, excludeButtons.outside), ...getSearchMessageVirtualDom(message, false)];
+const toggleUseIgnoreFiles = state => {
+  return toggleSearchFlag(state, UseIgnoreFiles);
 };
 
-const getSearchHeaderDetailsVirtualDom = (flags, message) => {
-  if (flags & DetailsExpanded) {
-    return getSearchHeaderDetailsExpandedVirtualDom(flags, message);
+const toggleUseRegularExpression = state => {
+  return toggleSearchFlag(state, UseRegularExpression$2);
+};
+
+const getClickHandler = name => {
+  switch (name) {
+    case MatchCase:
+      return toggleMatchCase;
+    case ToggleReplace:
+      return toggleReplace;
+    case UseRegularExpression:
+      return toggleUseRegularExpression;
+    case ReplaceAll:
+      return replaceAll;
+    case MatchWholeWord:
+      return toggleMatchWholeWord;
+    case PreserveCase:
+      return togglePreserveCase;
+    case ToggleSearchDetails:
+      return toggleDetailsExpanded;
+    case SearchOnlyOpenEditors:
+      return toggleOpenEditors;
+    case UseExcludeSettings:
+      return toggleUseIgnoreFiles;
+    default:
+      return noop;
   }
-  return getSearchHeaderDetailsCollapsedVirtualDom(message);
 };
 
-const getInputActionsInput = flags => {
-  const inside = [{
-    icon: MaskIconCaseSensitive,
-    flag: flags & MatchCase$2 ? CheckBoxEnabled : CheckBoxDisabled,
-    title: matchCase(),
-    name: MatchCase
-  }, {
-    icon: MaskIconWholeWord,
-    flag: flags & MatchWholeWord$2 ? CheckBoxEnabled : CheckBoxDisabled,
-    title: matchWholeWord(),
-    name: MatchWholeWord
-  }, {
-    icon: MaskIconRegex,
-    flag: flags & UseRegularExpression$2 ? CheckBoxEnabled : CheckBoxDisabled,
-    title: useRegularExpression(),
-    name: UseRegularExpression
-  }];
-  const outside = [];
-  return {
-    inside,
-    outside
-  };
+const handleHeaderClick = async (state, name) => {
+  const fn = getClickHandler(name);
+  return fn(state);
 };
 
-const getInputActionsReplace = (flags, matchCount) => {
-  const inside = [{
-    icon: MaskIconPreserveCase,
-    flag: flags & PreserveCase$2 ? CheckBoxEnabled : CheckBoxDisabled,
-    title: preserveCase(),
-    name: PreserveCase
-  }];
-  const outside = [{
-    icon: MaskIconReplaceAll,
-    flag: matchCount === 0 ? ButtonDisabled : ButtonEnabled,
-    title: replaceAll$1(),
-    name: ReplaceAll
-  }];
+const handleHeaderFocusIn = state => {
+  return state;
+};
+
+const handleIconThemeChange = async state => {
+  const {
+    items,
+    minLineY,
+    maxLineY
+  } = state;
+  const visibleItems = items.slice(minLineY, maxLineY);
+  const icons = await getFileIcons(visibleItems);
   return {
-    inside,
-    outside
+    ...state,
+    icons
   };
 };
 
-const getSearchToggleVirtualDom = flags => {
-  return [{
-    type: Button,
-    className: mergeClassNames(IconButton, SearchToggleButton, flags & ReplaceExpanded ? SearchToggleButtonExpanded : ''),
-    title: toggleReplace$1(),
-    ariaLabel: toggleReplace$1(),
-    ariaExpanded: Boolean(flags & ReplaceExpanded),
-    childCount: 1,
-    'data-command': 'toggleReplace',
-    name: ToggleReplace
-  }, {
-    type: Div,
-    className: mergeClassNames(MaskIcon, flags & ReplaceExpanded ? MaskIconChevronDown : MaskIconChevronRight),
-    childCount: 0
-  }];
+const handleIncludeInput = (state, includeValue, inputSource = Script) => {
+  return handleUpdate(state, {
+    includeValue,
+    inputSource
+  });
 };
 
-const getSearchHeaderTopVirtualDom = (flags, searchInputErrorMessage, matchCount) => {
-  const inputActions = getInputActionsInput(flags);
-  const replaceActions = getInputActionsReplace(flags, matchCount);
-  const dom = [{
-    type: Div,
-    className: SearchHeaderTop,
-    role: None$1,
-    childCount: 2
-  }, ...getSearchToggleVirtualDom(flags), {
-    type: Div,
-    className: SearchHeaderTopRight,
-    role: None$1,
-    childCount: flags & ReplaceExpanded ? 2 : 1
-  }, ...getSearchFieldVirtualDom(SearchValue, 'Search', HandleInput, inputActions.inside, inputActions.outside, '', Boolean(searchInputErrorMessage))];
-  if (flags & ReplaceExpanded) {
-    dom.push(...getSearchFieldVirtualDom(ReplaceValue, 'Replace', HandleReplaceInput, replaceActions.inside, replaceActions.outside));
-  }
-  return dom;
+const handleInput = (state, value, inputSource = Script) => {
+  return handleUpdate(state, {
+    value,
+    inputSource
+  });
 };
 
-const parentNode = {
-  type: Div,
-  className: SearchHeader,
-  role: None$1,
-  childCount: 2,
-  onClick: HandleHeaderClick2,
-  onFocusIn: HandleHeaderFocusIn
-};
-const getSearchHeaderVirtualDom = (flags, message, searchInputErrorMessage, matchCount) => {
-  const dom = [parentNode, ...getSearchHeaderTopVirtualDom(flags, searchInputErrorMessage, matchCount), ...getSearchHeaderDetailsVirtualDom(flags, message)];
-  return dom;
+const handleReplaceInput = (state, value, inputSource = Script) => {
+  return handleUpdate(state, {
+    replacement: value,
+    inputSource
+  });
 };
 
-const getSearchInputErrorVirtualDom = errorMessage => {
-  if (!errorMessage) {
-    return [];
+const getInputHandler = name => {
+  switch (name) {
+    case SearchValue:
+      return handleInput;
+    case ReplaceValue:
+      return handleReplaceInput;
+    case FilesToExclude:
+      return handleExcludeInput;
+    case FilesToInclude:
+      return handleIncludeInput;
+    default:
+      throw new Error(`unknown input handler: ${name}`);
   }
-  return [{
-    type: Div,
-    className: SearchInputError,
-    role: Alert,
-    childCount: 1
-  }, text(errorMessage)];
 };
 
-const TreeItems = 'TreeItems';
-
-const getScrollBarVirtualDom = (scrollBarHeight, scrollBarY, scrollBarValue) => {
-  if (scrollBarHeight === 0) {
-    return [];
-  }
-  return [{
-    type: Div,
-    className: mergeClassNames(ScrollBar, ScrollBarVertical),
-    childCount: 1,
-    onPointerDown: HandleScrollBarPointerDown,
-    role: ScrollBar$1,
-    ariaControls: TreeItems,
-    ariaValueNow: scrollBarValue
-  }, {
-    type: Div,
-    className: ScrollBarThumb,
-    height: scrollBarHeight,
-    translate: `0 ${scrollBarY}px`,
-    childCount: 0
-  }];
+const handleInput2 = (state, inputName, value, inputSource = Script) => {
+  const fn = getInputHandler(inputName);
+  return fn(state, value, inputSource);
 };
 
-// TODO instead of setting string, support enum in virtual dom and send enum to renderer process
-// which converts it to a boolean
-const getAriaExpanded = expanded => {
-  switch (expanded) {
-    case Collapsed:
-      return 'false';
-    case Expanded:
-      return 'true';
-    default:
-      return undefined;
-  }
+const handleListBlur = state => {
+  return state;
 };
 
-const getBadgeVirtualDom = (className, badgeText) => {
-  if (!badgeText) {
-    return [];
-  }
-  return [{
-    type: Div,
-    className: mergeClassNames(Badge, className),
-    childCount: 1
-  }, text(badgeText)];
+const handleSharedInput = (state, name, value, inputSource = Script) => {
+  const fn = getInputHandler(name);
+  return fn(state, value, inputSource);
 };
 
-const chevronDownVirtualDom = {
-  type: Div,
-  className: mergeClassNames(Chevron, MaskIconChevronDown),
-  childCount: 0
+// 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 chevronRightVirtualDom = {
-  type: Div,
-  className: mergeClassNames(Chevron, MaskIconChevronRight),
-  childCount: 0
+const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMaxLineY = Math.min(index + 1, itemsLength);
+  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
+  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
+  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
+  return {
+    ...state,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY
+  };
 };
-
-const getFileIconVirtualDom = icon => {
+const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMinLineY = index;
+  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
+  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
+  const newDeltaY = newMinLineY * itemHeight;
   return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None$1,
-    childCount: 0
+    ...state,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY
   };
 };
-
-const getIconsVirtualDom = (expanded, icon) => {
-  switch (expanded) {
-    case Expanded:
-      return [chevronDownVirtualDom, getFileIconVirtualDom(icon)];
-    case Collapsed:
-      return [chevronRightVirtualDom, getFileIconVirtualDom(icon)];
-    default:
-      return [];
+const focusIndex = (state, index) => {
+  const {
+    itemHeight,
+    minLineY,
+    maxLineY,
+    headerHeight,
+    height,
+    items
+  } = state;
+  const itemsLength = items.length;
+  if (itemsLength === 0) {
+    return state;
+  }
+  number(itemHeight);
+  if (index === -1) {
+    return {
+      ...state,
+      focusedIndex: -1,
+      focused: true
+    };
+  }
+  const listHeight = height - headerHeight;
+  if (index < minLineY + 1) {
+    return focusIndexScrollUp(state, index, listHeight, itemHeight, itemsLength);
+  }
+  if (index >= maxLineY - 1) {
+    return focusIndexScrollDown(state, index, listHeight, itemHeight, itemsLength);
   }
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: true
+  };
 };
-
-const deleted = {
-  type: Del,
-  className: HighlightDeleted,
-  childCount: 1
+const first = () => {
+  return 0;
 };
-const inserted = {
-  type: Ins,
-  className: HighlightInserted,
-  childCount: 1
+const last = items => {
+  return items.length - 1;
 };
-const highlighted = {
-  type: Span,
-  className: Highlight,
-  childCount: 1
+const next = (items, index) => {
+  return (index + 1) % items.length;
 };
-const label1 = {
-  type: Div,
-  className: mergeClassNames(Label, Grow),
-  childCount: 1
+const previous = (items, index) => {
+  return index === 0 ? items.length - 1 : index - 1;
 };
-const label3 = {
-  ...label1,
-  childCount: 3
+const focusFirst = state => {
+  const firstIndex = first();
+  return focusIndex(state, firstIndex);
 };
-const label4 = {
-  ...label1,
-  childCount: 4
+const focusLast = state => {
+  const {
+    items
+  } = state;
+  const lastIndex = last(items);
+  return focusIndex(state, lastIndex);
 };
-const getLabelVirtualDom = (displayText, matchLength, matchStart, replacement) => {
-  if (matchLength) {
-    const before = displayText.slice(0, matchStart);
-    const highlight = displayText.slice(matchStart, matchStart + matchLength);
-    const after = displayText.slice(matchStart + matchLength);
-    if (replacement) {
-      return [label4, text(before), deleted, text(highlight), inserted, text(replacement), text(after)];
-    }
-    return [label3, text(before), highlighted, text(highlight), text(after)];
-  }
-  return [label1, text(displayText)];
+const focusNext = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const nextIndex = next(items, focusedIndex);
+  return focusIndex(state, nextIndex);
 };
 
-const getPaddingLeft = depth => {
-  return `${Number(depth) + 1}rem`; // TODO use classname and dynamic css
-};
+// based on https://github.com/microsoft/vscode/blob/c0769274fa136b45799edeccc0d0a2f645b75caf/src/vs/base/common/arrays.ts#L625 (License MIT)
 
-const getSearchResultClassName = focused => {
-  if (focused) {
-    return TreeItem + ' ' + TreeItemActive;
-  }
-  return TreeItem;
+const isLastIndex = (array, index) => {
+  return index === array.length - 1;
 };
-
-const PaddingRight = '12px';
-
-const getSearchResultVirtualDom = rowInfo => {
-  const {
-    matchStart,
-    matchLength,
-    text: displayText,
-    title,
-    icon,
-    setSize,
-    posInSet,
-    depth,
-    replacement,
-    focused,
-    expanded,
-    childCount,
-    badgeText
-  } = rowInfo;
-  const dom = [{
-    type: Div,
-    role: TreeItem$1,
-    className: getSearchResultClassName(focused),
-    title,
-    ariaSetSize: setSize,
-    ariaLevel: depth,
-    ariaPosInSet: posInSet,
-    ariaLabel: title,
-    ariaDescription: '',
-    childCount,
-    paddingLeft: getPaddingLeft(depth),
-    paddingRight: PaddingRight,
-    ariaExpanded: getAriaExpanded(expanded)
-  }, ...getIconsVirtualDom(expanded, icon), ...getLabelVirtualDom(displayText, matchLength, matchStart, replacement), ...getBadgeVirtualDom(SourceControlBadge, badgeText), {
-    type: Div,
-    className: SearchRemove,
-    childCount: 1
-  }, {
-    type: Div,
-    className: CloseMaskIcon,
-    childCount: 0
-  }];
-  return dom;
-};
-
-const getTreeItemsVirtualDom = (visibleItems, deltaY, itemHeight) => {
-  const pixelOffset = deltaY % itemHeight;
-  return [{
-    type: Div,
-    className: TreeItems$1,
-    childCount: visibleItems.length,
-    onClick: HandleClick,
-    onBlur: HandleListBlur,
-    onWheel: HandleWheel,
-    id: TreeItems,
-    top: `${-pixelOffset}px`
-  }, ...visibleItems.flatMap(getSearchResultVirtualDom)];
-};
-
-const getSearchResultsVirtualDom = (visibleItems, focusOutline, scrollbarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight) => {
-  const scrollBarDomNodes = scrollbarHeight === 0 ? 0 : 1;
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, List, Tree, focusOutline ? FocusOutline : Empty),
-    role: Tree$1,
-    tabIndex: 0,
-    childCount: 1 + scrollBarDomNodes
-  }, ...getTreeItemsVirtualDom(visibleItems, deltaY, itemHeight), ...getScrollBarVirtualDom(scrollbarHeight, scrollBarY, scrollBarValue)];
+const lastIndex = array => {
+  return array.length - 1;
 };
-
-const getSearchVirtualDom = (visibleItems, flags, message, focusOutline, searchInputErrorMessage, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight, matchCount) => {
-  const errorDom = getSearchInputErrorVirtualDom(searchInputErrorMessage);
-  const childCount = 2 + (errorDom.length > 0 ? 1 : 0);
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, Search$1),
-    childCount
-  }, ...getSearchHeaderVirtualDom(flags, message, searchInputErrorMessage, matchCount), ...errorDom, ...getSearchResultsVirtualDom(visibleItems, focusOutline, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight)];
+const focusNextPage = state => {
+  const {
+    focusedIndex,
+    items,
+    maxLineY,
+    minLineY
+  } = state;
+  if (isLastIndex(items, focusedIndex)) {
+    return state;
+  }
+  const indexNextPage = Math.min(maxLineY + (maxLineY - minLineY) - 2, lastIndex(items));
+  return focusIndex(state, indexNextPage);
 };
-
-const handleError = error => {
-  console.error(`[text-search-worker] ${error}`);
+const focusPrevious = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  if (focusedIndex === 0 || focusedIndex === -1) {
+    return state;
+  }
+  const previousIndex = previous(items, focusedIndex);
+  return focusIndex(state, previousIndex);
 };
-
-const getFileIcon = async result => {
-  if (result.type === File) {
-    return invoke$2('IconTheme.getFileIcon', {
-      name: result.text
-    });
+const focusPreviousPage = state => {
+  const {
+    focusedIndex,
+    minLineY,
+    maxLineY
+  } = state;
+  if (focusedIndex === 0 || focusedIndex === -1) {
+    return state;
   }
-  return '';
+  const indexPreviousPage = Math.max(minLineY - (maxLineY - minLineY) + 1, 0);
+  return focusIndex(state, indexPreviousPage);
 };
-const getFileIcons = async matches => {
-  // TODO cache file icons
-  const promises = matches.map(getFileIcon);
-  const icons = await Promise.all(promises);
-  return icons;
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
 };
-
-// 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$1 = (listHeight, itemHeight) => {
-  return Math.ceil(listHeight / itemHeight) + 1;
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
 };
-
-const RE_PROTOCOL = /^([a-z-\d]+):\/\//;
-const getProtocol$1 = uri => {
-  const protocolMatch = uri.match(RE_PROTOCOL);
-  if (protocolMatch) {
-    return protocolMatch[1];
+const getScrollBarY = getScrollBarOffset;
+const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    // clicked at top
+    return {
+      percent: 0,
+      handleOffset: relativeY
+    };
   }
-  return '';
-};
-
-const getTextSearchResultCounts = results => {
-  let resultCount = 0;
-  let fileCount = 0;
-  for (const result of results) {
-    switch (result.type) {
-      case File:
-        fileCount++;
-        break;
-      case Match:
-        resultCount++;
-        break;
-    }
+  if (relativeY <= height - halfScrollBarHeight) {
+    // clicked in middle
+    return {
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight),
+      handleOffset: halfScrollBarHeight
+    };
   }
+  // clicked at bottom
   return {
-    fileCount,
-    resultCount
+    percent: 1,
+    handleOffset: scrollBarHeight - height + relativeY
   };
 };
-
-const EmptyString = '';
-
-const isEmptyString = string => {
-  return string === EmptyString;
+const clamp = (num, min, max) => {
+  return Math.min(Math.max(num, min), max);
 };
+const setDeltaY = (state, value) => {
+  object(state);
+  number(value);
+  const {
+    itemHeight,
+    finalDeltaY,
+    deltaY,
+    height,
+    headerHeight,
+    items
+  } = state;
+  const listHeight = height - headerHeight;
+  const newDeltaY = clamp(value, 0, finalDeltaY);
+  if (deltaY === newDeltaY) {
+    return state;
+  }
+  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
+  const minLineY = Math.floor(newDeltaY / itemHeight);
+  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems(listHeight, itemHeight), items.length);
 
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
+  // TODO update icons
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    minLineY,
+    maxLineY
+  };
+};
+const handleScrollBarClick = (state, eventY) => {
+  const {
+    y,
+    deltaY,
+    headerHeight,
+    finalDeltaY,
+    scrollBarHeight,
+    height
+  } = state;
+  const contentHeight = height - headerHeight;
+  const relativeY = eventY - y - headerHeight;
+  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const diff = relativeY - currentScrollBarY;
+  if (diff >= 0 && diff < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: diff,
+      scrollBarActive: true
+    };
   }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+  const {
+    percent,
+    handleOffset
+  } = getNewDeltaPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = percent * finalDeltaY;
+  return {
+    ...setDeltaY(state, newDeltaY),
+    handleOffset,
+    scrollBarActive: true
+  };
 };
-const getScrollBarOffset$1 = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
+const getNewPercent = (contentHeight, scrollBarHeight, relativeY) => {
+  if (relativeY <= contentHeight - scrollBarHeight / 2) {
+    // clicked in middle
+    return relativeY / (contentHeight - scrollBarHeight);
+  }
+  // clicked at bottom
+  return 1;
 };
-const getScrollBarY$1 = getScrollBarOffset$1;
-
-const textSearch$6 = async (scheme, root, query) => {
-  string(scheme);
-  string(query);
-  const result = await invoke$2('ExtensionHostTextSearch.executeTextSearchProvider', scheme, query);
-  return result;
+const handleScrollBarMove = (state, eventY) => {
+  const {
+    y,
+    headerHeight,
+    handleOffset,
+    finalDeltaY,
+    height,
+    scrollBarHeight
+  } = state;
+  const relativeY = eventY - y - headerHeight - handleOffset;
+  const contentHeight = height - headerHeight;
+  const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = newPercent * finalDeltaY;
+  return setDeltaY(state, newDeltaY);
 };
-
-const textSearch$5 = async (scheme, root, query, options, assetDir) => {
-  return invoke$2('ExtensionHostTextSearch.textSearchFetch', scheme, root, query, options, assetDir);
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
 };
 
-const textSearch$4 = async (scheme, root, query) => {
-  return invoke$2('ExtensionHostTextSearch.textSearchHtml', scheme, root, query);
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, topHeight, itemCount) => {
+  const relativeY = eventY - y - topHeight + deltaY;
+  const index = Math.floor(relativeY / itemHeight);
+  if (index >= itemCount) {
+    return -1;
+  }
+  return index;
 };
 
-const textSearch$3 = async (scheme, root, query, options, assetDir) => {
-  return invoke$2('ExtensionHostTextSearch.textSearchMemory', scheme, root, query, options, assetDir);
+const getTopHeight = flags => {
+  if (flags & ReplaceExpanded && flags & DetailsExpanded) {
+    return 190;
+  }
+  if (flags & DetailsExpanded) {
+    return 158;
+  }
+  if (flags & ReplaceExpanded) {
+    return 93;
+  }
+  return 61;
 };
 
-const getRipGrepArgs = ({
-  threads,
-  isCaseSensitive,
-  searchString,
-  useRegularExpression
-}) => {
-  const ripGrepArgs = ['--hidden', '--no-require-git', '--smart-case', '--stats', '--json'];
-  ripGrepArgs.push('--threads', `${threads}`);
-  if (isCaseSensitive) {
-    ripGrepArgs.push('--case-sensitive');
-  } else {
-    ripGrepArgs.push('--ignore-case');
+const getFilteredResults = (results, collapsedPaths) => {
+  if (collapsedPaths.length === 0) {
+    return results;
   }
-  if (useRegularExpression) {
-    ripGrepArgs.push('--regexp', searchString);
-  } else {
-    ripGrepArgs.push('--fixed-strings');
-    ripGrepArgs.push('--');
-    ripGrepArgs.push(searchString);
+  const filteredResults = [];
+  let isExcluded = false;
+  for (const result of results) {
+    if (result.type === File) {
+      filteredResults.push(result);
+      isExcluded = collapsedPaths.includes(result.text) ? true : false;
+    }
+    if (result.type === Match && !isExcluded) {
+      filteredResults.push(result);
+    }
   }
-  ripGrepArgs.push('.');
-  return ripGrepArgs;
+  return filteredResults;
 };
 
-const Electron = 2;
-const Remote = 3;
-
-const Https = 'https:';
-const Ws = 'ws:';
-const Wss = 'wss:';
-
-const getWebSocketProtocol = locationProtocol => {
-  return locationProtocol === Https ? Wss : Ws;
+const toggleCollapsedPath = (collapsedPaths, path) => {
+  if (collapsedPaths.includes(path)) {
+    const index = collapsedPaths.indexOf(path);
+    return collapsedPaths.toSpliced(index, 1);
+  }
+  return [...collapsedPaths, path];
 };
 
-const getWebSocketUrl = (type, host, locationProtocol) => {
-  const wsProtocol = getWebSocketProtocol(locationProtocol);
-  return `${wsProtocol}//${host}/websocket/${type}`;
+const selectIndexFile = async (state, searchResult, index) => {
+  const {
+    collapsedPaths,
+    items,
+    itemHeight,
+    headerHeight,
+    height
+  } = state;
+  const path = searchResult.text;
+  const newCollapsedPaths = toggleCollapsedPath(collapsedPaths, path);
+  const filteredResults = getFilteredResults(items, newCollapsedPaths);
+  const icons = await getFileIcons(filteredResults);
+  const total = filteredResults.length;
+  const listHeight = height - headerHeight;
+  const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
+  const maxLineY = Math.min(numberOfVisible, total);
+  return {
+    ...state,
+    collapsedPaths: newCollapsedPaths,
+    listFocusedIndex: index,
+    listFocused: true,
+    listItems: filteredResults,
+    maxLineY,
+    icons
+  };
 };
 
-const getHost = () => {
-  return location.host;
-};
-const getProtocol = () => {
-  return location.protocol;
+const getFileIndex = (items, index) => {
+  for (let i = index; i >= 0; i--) {
+    const item = items[i];
+    if (item.type === File) {
+      return i;
+    }
+  }
+  return -1;
 };
 
-const launchSearchProcess = async () => {
-  const host = getHost();
-  const protocol = getProtocol();
-  const wsUrl = getWebSocketUrl('search-process', host, protocol);
-  const webSocket = new WebSocket(wsUrl);
-  const rpc = await WebSocketRpcParent.create({
-    webSocket,
-    commandMap: {}
-  });
-  return rpc;
+const openUri = async (path, focus = true, props = {}) => {
+  await invoke$2(/* Main.openUri */'Main.openUri', /* uri */path, /* focus */focus, props);
 };
 
-const state$1 = {
-  rpc: undefined
+// TODO this should be in FileSystem module
+const pathBaseName = path => {
+  return path.slice(path.lastIndexOf('/') + 1);
 };
-const getOrCreate$1 = () => {
-  if (!state$1.rpc) {
-    // @ts-ignore
-    state$1.rpc = launchSearchProcess();
+const getRelativePath = relativePath => {
+  if (relativePath.startsWith('./')) {
+    return `/${relativePath.slice(2)}`; // TODO support windows paths
   }
-  return state$1.rpc;
-};
-
-const invoke$1 = async (method, ...params) => {
-  const rpc = await getOrCreate$1();
-  return rpc.invoke(method, ...params);
+  return `/${relativePath}`; // TODO support windows paths
 };
 
-const getPortTuple = () => {
+const selectIndexPreview = async (state, searchResult, index) => {
   const {
-    port1,
-    port2
-  } = new MessageChannel();
+    items,
+    workspacePath
+  } = state;
+  const fileIndex = getFileIndex(items, index);
+  if (fileIndex === -1) {
+    throw new Error('Search result is missing file');
+  }
+  const {
+    lineNumber
+  } = searchResult;
+  const fileResult = items[fileIndex];
+  const relativePath = getRelativePath(fileResult.text);
+  const absolutePath = `${workspacePath}${relativePath}`;
+  await openUri(absolutePath, true, {
+    selections: new Uint32Array([lineNumber, 0, lineNumber, 0])
+  });
   return {
-    port1,
-    port2
+    ...state,
+    listFocusedIndex: index,
+    listFocused: false
   };
 };
 
-const launchSearchProcessElectron = async () => {
-  const {
-    port1,
-    port2
-  } = getPortTuple();
-  const rpcPromise = MessagePortRpcParent.create({
-    messagePort: port2,
-    commandMap: {},
-    isMessagePortOpen: true
-  });
-  await invokeAndTransfer('SendMessagePortToElectron.sendMessagePortToElectron', port1, 'HandleMessagePortForSearchProcess.handleMessagePortForSearchProcess');
-  port2.start();
-  const rpc = await rpcPromise;
-  return rpc;
+const getSelectHandler = type => {
+  switch (type) {
+    case File:
+      return selectIndexFile;
+    case Match:
+      return selectIndexPreview;
+    default:
+      throw new Error(`unexpected search result type ${type}`);
+  }
 };
 
-const state = {
-  rpc: undefined
-};
-const getOrCreate = () => {
-  if (!state.rpc) {
-    // @ts-ignore
-    state.rpc = launchSearchProcessElectron();
+const selectIndex = async (state, index) => {
+  if (index === -1) {
+    return {
+      ...state,
+      listFocused: true,
+      listFocusedIndex: -1
+    };
   }
-  return state.rpc;
+  const {
+    listItems
+  } = state;
+  const searchResult = listItems[index];
+  const fn = getSelectHandler(searchResult.type);
+  return fn(state, searchResult, index);
 };
 
-const invoke = async (method, ...params) => {
-  const rpc = await getOrCreate();
-  return rpc.invoke(method, ...params);
+const handleClickAt = (state, eventX, eventY) => {
+  const {
+    x,
+    y,
+    itemHeight,
+    deltaY,
+    flags,
+    listItems
+  } = state;
+  const topHeight = getTopHeight(flags);
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, topHeight, listItems.length);
+  return selectIndex(state, index);
 };
 
-const textSearch$2 = async (scheme, root, query, options, assetDir, platform) => {
-  const ripGrepArgs = getRipGrepArgs({
-    ...options,
-    searchString: query
-  });
-  const actualOptions = {
-    ripGrepArgs,
-    searchDir: root
-  };
-  if (platform === Remote) {
-    const result = await invoke$1('TextSearch.search', actualOptions);
-    // TODO api is weird
-    return result.results;
-  }
-  if (platform === Electron) {
-    const result = await invoke('TextSearch.search', actualOptions);
-    return result.results;
+const getSavedValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'value' in savedState && typeof savedState.value === 'string') {
+    return savedState.value;
   }
-  const results = await invoke$2('SearchProcess.invoke', 'TextSearch.search', actualOptions);
-  // TODO api is weird
-  return results.results;
+  return '';
 };
-
-const textSearch$1 = (scheme, root, query) => {
-  // TODO ask renderer worker for files
-  const entries = Object.entries({});
-  const results = [];
-  for (const [key, value] of entries) {
-    // @ts-ignore
-    if (value.includes(query)) {
-      results.push([key, [{
-        absoluteOffset: 0,
-        preview: value
-      }]]);
-    }
+const getSavedReplacement = savedState => {
+  if (savedState && typeof savedState === 'object' && 'replacement' in savedState && typeof savedState.replacement === 'string') {
+    return savedState.replacement;
   }
-  return results;
+  return '';
 };
-
-const getProvider = scheme => {
-  switch (scheme) {
-    case '':
-      return textSearch$2;
-    case 'web':
-      return textSearch$1;
-    case 'fetch':
-      return textSearch$5;
-    case 'html':
-      return textSearch$4;
-    case 'memfs':
-      return textSearch$3;
-    default:
-      return textSearch$6;
+const getSavedFlags = savedState => {
+  if (savedState && typeof savedState === 'object' && 'flags' in savedState && typeof savedState.flags === 'number') {
+    return savedState.flags;
   }
+  return 0;
 };
-
-const textSearch = async (root, query, options, assetDir, platform) => {
-  string(root);
-  string(query);
-  const scheme = getProtocol$1(root);
-  const provider = getProvider(scheme);
-  const results = await provider(scheme, root, query, options, assetDir, platform);
-  return results;
-};
-
-// Based on https://github.com/microsoft/vscode/blob/ad375c92764b72a1f28f3e1626563e9e41e5c740/src/vs/workbench/contrib/search/browser/searchWidget.ts#L393 by Microsoft (License MIT)
-
-const validateSearchInput = (value, flags) => {
-  if (!value) {
-    return '';
-  }
-  if (!(flags & UseRegularExpression$2)) {
-    return '';
+const getSavedIncludeValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'includeValue' in savedState && typeof savedState.includeValue === 'string') {
+    return savedState.includeValue;
   }
-  try {
-    new RegExp(value, 'u');
-  } catch (error) {
-    if (error && error instanceof Error) {
-      return error.message;
-    }
-    return '';
+  return '';
+};
+const getSavedExcludeValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'excludeValue' in savedState && typeof savedState.excludeValue === 'string') {
+    return savedState.excludeValue;
   }
   return '';
 };
 
-const handleUpdate = async (state, update) => {
-  const partialNewState = {
-    ...state,
-    ...update
+const restoreState = savedState => {
+  return {
+    savedValue: getSavedValue(savedState),
+    replacement: getSavedReplacement(savedState),
+    savedCollapsedPaths: [],
+    threads: 1,
+    flags: getSavedFlags(savedState),
+    includeValue: getSavedIncludeValue(savedState),
+    excludeValue: getSavedExcludeValue(savedState)
   };
-  try {
-    const {
-      height,
-      itemHeight,
-      minimumSliderSize,
-      headerHeight,
-      flags,
-      value,
+};
+
+const loadContent = async (state, savedState) => {
+  const {
+    savedValue,
+    savedCollapsedPaths,
+    threads,
+    replacement,
+    flags,
+    includeValue,
+    excludeValue
+  } = restoreState(savedState);
+  if (savedValue) {
+    return handleUpdate(state, {
+      value: savedValue,
       threads,
+      inputSource: Script,
+      collapsedPaths: savedCollapsedPaths,
+      replacement,
+      flags,
       includeValue,
       excludeValue
-    } = partialNewState;
-    if (isEmptyString(value)) {
-      return {
-        ...partialNewState,
-        minLineY: 0,
-        maxLineY: 0,
-        deltaY: 0,
-        items: [],
-        listItems: [],
-        matchCount: 0,
-        message: '',
-        loaded: true,
-        searchInputErrorMessage: ''
-      };
-    }
-    const searchInputErrorMessage = validateSearchInput(value, flags);
-    if (searchInputErrorMessage) {
-      return {
-        ...partialNewState,
-        searchInputErrorMessage: searchInputErrorMessage
-      };
-    }
-    const root = state.workspacePath;
-    const scheme = getProtocol$1(root);
-    const results = await textSearch(root, value, {
-      threads,
-      isCaseSensitive: Boolean(flags & MatchCase$2),
-      useRegularExpression: Boolean(flags & UseRegularExpression$2),
-      exclude: excludeValue,
-      include: includeValue,
-      assetDir: state.assetDir,
-      root,
-      query: value,
-      scheme,
-      flags,
-      matchWholeWord: Boolean(flags & MatchWholeWord$2)
-    }, state.assetDir, state.platform);
-    if (!Array.isArray(results)) {
-      throw new TypeError('results must be of type array');
-    }
-    const {
-      fileCount,
-      resultCount
-    } = getTextSearchResultCounts(results);
-    const message = getStatusMessage(resultCount, fileCount);
-    const total = results.length;
-    const contentHeight = total * itemHeight;
-    const listHeight = height - headerHeight;
-    const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
-    const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
-    const maxLineY = Math.min(numberOfVisible, total);
-    const finalDeltaY = Math.max(contentHeight - listHeight, 0);
-    const visible = results.slice(0, maxLineY);
-    const icons = await getFileIcons(visible);
-    return {
-      ...partialNewState,
-      minLineY: 0,
-      deltaY: 0,
-      value,
-      items: results,
-      listItems: results,
-      message,
-      maxLineY: maxLineY,
-      scrollBarHeight,
-      finalDeltaY,
-      threads,
-      fileCount,
-      matchCount: resultCount,
-      loaded: true,
-      icons,
-      searchInputErrorMessage: ''
-    };
-  } catch (error) {
-    handleError(error);
-    return {
-      ...partialNewState,
-      message: `${error}`,
-      items: [],
-      listItems: [],
-      matchCount: 0,
-      fileCount: 0,
-      minLineY: 0,
-      maxLineY: 0
-    };
+    });
   }
+  return {
+    ...state,
+    threads,
+    flags,
+    loaded: true
+  };
 };
 
-const handleExcludeInput = (state, value, inputSource = Script) => {
-  return handleUpdate(state, {
-    excludeValue: value,
-    inputSource
-  });
-};
-
-const noop = state => {
-  return state;
+const nextHistoryResult = async state => {
+  return {
+    ...state
+  };
 };
 
-const applyBulkReplacement = async bulkEdits => {
-  await invoke$2('BulkReplacement.applyBulkReplacement', bulkEdits);
+const previousHistoryResult = async state => {
+  return {
+    ...state
+  };
 };
 
-const getReplacedMessage = (fileCount, replaceCount, replacement) => {
-  if (replaceCount === 1) {
-    return replacedOneOccurrenceInOneFile(replacement);
-  }
-  if (fileCount === 1) {
-    return replacedManyOccurrencesInOneFile(replaceCount, replacement);
-  }
-  return replacedManyOccurrencesInManyFiles(replaceCount, fileCount, replacement);
+const refresh = state => {
+  return handleUpdate(state, {});
 };
 
-const getFileName = text => {
-  // TODO make api stricter so that results always have the same shape
-  if (text.startsWith('./')) {
-    return text.slice(2);
-  }
-  return text;
-};
-
-const getReplaceElements = (items, workspacePath, replacement) => {
-  let element = {
-    uri: '',
-    changes: []
-  };
-  const bulkChanges = [];
-  let changes = [];
-  // TODO simplify code by first matching files with their elements, then creating bulk edits
-  for (const match of items) {
-    const {
-      type,
-      text,
-      lineNumber,
-      end,
-      start
-    } = match;
-    if (type === File) {
-      changes = [];
-      const fileName = getFileName(text);
-      const absolutePath = `${workspacePath}/${fileName}`;
-      element = {
-        uri: absolutePath,
-        changes
-      };
-      bulkChanges.push(element);
-    } else {
-      changes.push({
-        text: replacement,
-        startRowIndex: lineNumber - 1,
-        startColumnIndex: start,
-        endRowIndex: lineNumber,
-        endColumnIndex: end
-      });
-    }
+const getFocusSelector = focusKey => {
+  switch (focusKey) {
+    case FocusSearchInput:
+      return SearchValue;
+    case FocusSearchReplaceInput:
+      return ReplaceValue;
+    case FocusToggleDetails:
+      return ToggleSearchDetails;
+    case FocusSearchMatchCase:
+      return MatchCase;
+    case FocusSearchPreserveCase:
+      return PreserveCase;
+    case FocusSearchRegex:
+      return UseRegularExpression;
+    case FocusSearchIncludeInput:
+      return FilesToInclude;
+    case FocusSearchExcludeInput:
+      return FilesToExclude;
+    case FocusSearchWholeWord:
+      return MatchWholeWord;
+    case FocusSearchReplaceAll:
+      return ReplaceAll;
+    case FocusSearchOpenEditors:
+      return SearchOnlyOpenEditors;
+    case FocusIgnoreFiles:
+      return UseExcludeSettings;
+    case FocusToggleReplace:
+      return ToggleReplace;
+    default:
+      return '';
   }
-  return bulkChanges;
-};
-
-const replaceAll = async state => {
-  const {
-    workspacePath,
-    items,
-    replacement,
-    matchCount
-  } = state;
-  const bulkEdits = getReplaceElements(items, workspacePath, replacement);
-  await applyBulkReplacement(bulkEdits);
-  const fileCount = bulkEdits.length;
-  const message = getReplacedMessage(fileCount, matchCount, replacement);
-  return {
-    ...state,
-    items: [],
-    listItems: [],
-    minLineY: 0,
-    maxLineY: 0,
-    message
-  };
 };
 
-const toggleDetailsExpanded = state => {
-  if (hasDetailsExpanded(state.flags)) {
-    return collapseDetails(state);
-  }
-  return expandDetails(state);
+const renderFocus = (oldState, newState) => {
+  const selector = getFocusSelector(newState.focus);
+  return ['Viewlet.focusElementByName', newState.uid, selector];
 };
 
-const toggleSearchFlag = (state, flag) => {
-  return handleUpdate(state, {
-    flags: state.flags ^ flag
-  });
-};
+const None$1 = 0;
+const Collapsed = 1;
+const Expanded = 2;
 
-const toggleMatchCase = state => {
-  return toggleSearchFlag(state, MatchCase$2);
+const getMatchCount = (results, startIndex) => {
+  for (let i = startIndex + 1; i < results.length; i++) {
+    const result = results[i];
+    if (result.type === File) {
+      return i - startIndex - 1;
+    }
+  }
+  return results.length - startIndex - 1;
 };
 
-const toggleMatchWholeWord = state => {
-  return toggleSearchFlag(state, MatchWholeWord$2);
+const getChildCount = (expanded, matchCount) => {
+  let childCount = 1;
+  if (expanded === Expanded || expanded === Collapsed) {
+    childCount += 2;
+  }
+  if (matchCount) {
+    childCount++;
+  }
+  childCount++;
+  return childCount;
 };
 
-const toggleOpenEditors = state => {
-  return toggleSearchFlag(state, OpenEditors);
+const getSearchDisplayResultFile = (results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults) => {
+  const path = text;
+  const absolutePath = getRelativePath(path);
+  const baseName = pathBaseName(path);
+  const index = originalResults.indexOf(results[i]);
+  const matchCount = getMatchCount(results, index);
+  const expanded = collapsedPaths.includes(path) ? Collapsed : Expanded;
+  const childCount = getChildCount(expanded, matchCount);
+  const badgeText = `${matchCount}`;
+  return {
+    badgeText,
+    childCount,
+    depth: 0,
+    expanded,
+    focused,
+    icon: fileIcons[relativeIndex],
+    matchLength: 0,
+    matchStart: 0,
+    posInSet,
+    replacement: '',
+    setSize,
+    text: baseName,
+    title: absolutePath
+  };
 };
 
-const togglePreserveCase = state => {
-  return toggleSearchFlag(state, PreserveCase$2);
+const getDisplayResultMatch = (setSize, searchTermLength, replacement, text, posInSet, start, focused) => {
+  return {
+    badgeText: '',
+    childCount: getChildCount(None$1, 0),
+    depth: 1,
+    expanded: None$1,
+    focused,
+    icon: '',
+    matchLength: searchTermLength,
+    matchStart: start,
+    posInSet,
+    replacement,
+    setSize,
+    text: text,
+    title: text
+  };
 };
 
-const toggleReplace = state => {
-  return toggleSearchFlag(state, ReplaceExpanded);
+const getDisplayResult = (results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults) => {
+  const result = results[i];
+  const {
+    type,
+    text,
+    start
+  } = result;
+  const posInSet = i + 1;
+  const focused = i === focusedIndex;
+  const relativeIndex = i - minLineY;
+  switch (type) {
+    case File:
+      return getSearchDisplayResultFile(results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults);
+    case Match:
+      return getDisplayResultMatch(setSize, searchTermLength, replacement, text, posInSet, start, focused);
+    default:
+      throw new Error('unexpected search result type');
+  }
 };
 
-const toggleUseIgnoreFiles = state => {
-  return toggleSearchFlag(state, UseIgnoreFiles);
+const getDisplayResults = (results, itemHeight, resultCount, searchTerm, minLineY, maxLineY, replacement, fileIcons, focusedIndex, collapsedPaths, originalResults) => {
+  const displayResults = [];
+  const setSize = resultCount;
+  const searchTermLength = searchTerm.length;
+  for (let i = minLineY; i < maxLineY; i++) {
+    const displayResult = getDisplayResult(results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults);
+    displayResults.push(displayResult);
+  }
+  return displayResults;
 };
 
-const toggleUseRegularExpression = state => {
-  return toggleSearchFlag(state, UseRegularExpression$2);
+const createViewModel = state => {
+  const {
+    listItems,
+    itemHeight,
+    fileCount,
+    value,
+    minLineY,
+    maxLineY,
+    replacement,
+    icons,
+    listFocusedIndex,
+    collapsedPaths,
+    items,
+    listFocused,
+    deltaY,
+    finalDeltaY,
+    height,
+    headerHeight,
+    flags,
+    message,
+    searchInputErrorMessage,
+    scrollBarHeight,
+    matchCount
+  } = state;
+  const displayResults = getDisplayResults(listItems, itemHeight, fileCount, value, minLineY, maxLineY, replacement, icons, listFocusedIndex, collapsedPaths, items);
+  const focusOutline = listFocused && listFocusedIndex === -1;
+  const scrollBarValue = deltaY / finalDeltaY * 100;
+  const scrollBarY = getScrollBarY$1(deltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
+  return {
+    displayResults,
+    flags,
+    message,
+    focusOutline,
+    searchInputErrorMessage,
+    scrollBarHeight,
+    scrollBarY,
+    scrollBarValue,
+    deltaY,
+    itemHeight,
+    matchCount
+  };
 };
 
-const getClickHandler = name => {
-  switch (name) {
-    case MatchCase:
-      return toggleMatchCase;
-    case ToggleReplace:
-      return toggleReplace;
-    case UseRegularExpression:
-      return toggleUseRegularExpression;
-    case ReplaceAll:
-      return replaceAll;
-    case MatchWholeWord:
-      return toggleMatchWholeWord;
-    case PreserveCase:
-      return togglePreserveCase;
-    case ToggleSearchDetails:
-      return toggleDetailsExpanded;
-    case SearchOnlyOpenEditors:
-      return toggleOpenEditors;
-    case UseExcludeSettings:
-      return toggleUseIgnoreFiles;
-    case SearchValue:
-    case ReplaceValue:
-    case FilesToExclude:
-    case FilesToInclude:
-      return noop;
-    default:
-      throw new Error(`Click handler not found: ${name}`);
+const Actions = 'Actions';
+const Badge = 'Badge';
+const Chevron = 'Chevron';
+const CloseMaskIcon = 'MaskIcon MaskIconClose';
+const Empty = '';
+const FileIcon = 'FileIcon';
+const FocusOutline = 'FocusOutline';
+const Grow = 'Grow';
+const Highlight = 'Highlight';
+const HighlightDeleted = 'HighlightDeleted';
+const HighlightInserted = 'HighlightInserted';
+const IconButton = 'IconButton';
+const Label = 'Label';
+const List = 'List';
+const MaskIcon = 'MaskIcon';
+const MaskIconBook = 'MaskIconBook';
+const MaskIconCaseSensitive = 'MaskIconCaseSensitive';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
+const MaskIconEllipsis = 'MaskIconEllipsis';
+const MaskIconExclude = 'MaskIconExclude';
+const MaskIconPreserveCase = 'MaskIconPreserveCase';
+const MaskIconRegex = 'MaskIconRegex';
+const MaskIconReplaceAll = 'MaskIconReplaceAll';
+const MaskIconWholeWord = 'MaskIconWholeWord';
+const MultilineInputBox = 'MultilineInputBox';
+const ScrollBar$1 = 'ScrollBar';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarVertical = 'ScrollBarVertical';
+const Search$1 = 'Search';
+const SearchField = 'SearchField';
+const SearchFieldButton = 'SearchFieldButton';
+const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
+const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
+const SearchFieldButtons = 'SearchFieldButtons';
+const SearchFieldContainer = 'SearchFieldContainer';
+const SearchFieldError = 'SearchFieldError';
+const SearchHeader = 'SearchHeader';
+const SearchHeaderDetails = 'SearchHeaderDetails';
+const SearchHeaderDetailsExpanded = 'SearchHeaderDetailsExpanded';
+const SearchHeaderDetailsExpandedTop = 'SearchHeaderDetailsExpandedTop';
+const SearchHeaderDetailsHeading = 'SearchHeaderDetailsHeading';
+const SearchHeaderTop = 'SearchHeaderTop';
+const SearchHeaderTopRight = 'SearchHeaderTopRight';
+const SearchInputError = 'SearchInputError';
+const SearchRemove = 'SearchRemove';
+const SearchToggleButton = 'SearchToggleButton';
+const SearchToggleButtonExpanded = 'SearchToggleButtonExpanded';
+const SourceControlBadge = 'SourceControlBadge';
+const ToggleDetails = 'ToggleDetails';
+const Tree$1 = 'Tree';
+const TreeItem$1 = 'TreeItem';
+const TreeItemActive = 'TreeItemActive';
+const TreeItems$1 = 'TreeItems';
+const Viewlet = 'Viewlet';
+const ViewletSearchMessage = 'ViewletSearchMessage';
+const ViewletSearchMessageIndented = 'ViewletSearchMessageIndented';
+
+const Alert = 'alert';
+const Button$2 = 'button';
+const CheckBox = 'checkbox';
+const None = 'none';
+const ScrollBar = 'scrollbar';
+const Status = 'status';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
+const HandleClick = 'handleClick';
+const HandleExcludeInput = 'handleExcludeInput';
+const HandleHeaderClick2 = 'handleHeaderClick2';
+const HandleHeaderFocusIn = 'handleHeaderFocusIn';
+const HandleIncludeInput = 'handleIncludeInput';
+const HandleInput = 'handleInput';
+const HandleInput2 = 'handleInput2';
+const HandleListBlur = 'handleListBlur';
+const HandleReplaceInput = 'handleReplaceInput';
+const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
+const HandleToggleButtonClick = 'handleToggleButtonClick';
+const HandleWheel = 'handleWheel';
+const HandleListFocus = 'handleListFocus';
+const HandleContextMenu = 'handleContextMenu';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text$1 = 12;
+const SetText = 1;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const applyPendingPatches = (patches, pendingPatches, skip) => {
+  for (let k = 0; k < pendingPatches.length - skip; k += 2) {
+    const type = pendingPatches[k];
+    const index = pendingPatches[k + 1];
+    if (type === NavigateParent) {
+      patches.push({
+        type
+      });
+    } else {
+      patches.push({
+        type,
+        index
+      });
+    }
   }
+  pendingPatches.length = 0;
 };
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+const getTotalChildCount = (nodes, index) => {
+  let i = index;
+  let pending = 1;
+  while (pending) {
+    const node = nodes[i];
+    pending += node.childCount;
+    pending--;
+    i++;
+  }
+  return i - index;
+};
+const diff = (oldNodes, newNodes) => {
+  const patches = [];
+  const pendingPatches = [];
+  let i = 0;
+  let j = 0;
+  let siblingOffset = 0;
+  let maxSiblingOffset = 1;
+  const indexStack = [0, 1];
+  while (i < oldNodes.length && j < newNodes.length) {
+    const oldNode = oldNodes[i];
+    const newNode = newNodes[j];
 
-const handleHeaderClick = async (state, name) => {
-  const fn = getClickHandler(name);
-  return fn(state);
+    // TODO maybe don't have the current element in indexstack
+    if (siblingOffset === maxSiblingOffset) {
+      indexStack.pop();
+      indexStack.pop();
+      pendingPatches.push(NavigateParent, 0);
+      maxSiblingOffset = indexStack.pop();
+      siblingOffset = indexStack.pop() + 1;
+    }
+    while (siblingOffset === maxSiblingOffset) {
+      pendingPatches.push(NavigateParent, 0);
+      maxSiblingOffset = indexStack.pop();
+      siblingOffset = indexStack.pop() + 1;
+    }
+    if (oldNode.type !== newNode.type) {
+      let skip = 0;
+      if (pendingPatches.length > 0 && pendingPatches.at(-2) === NavigateChild) {
+        skip = 2;
+      }
+      applyPendingPatches(patches, pendingPatches, skip);
+      const oldTotal = getTotalChildCount(oldNodes, i);
+      const newTotal = getTotalChildCount(newNodes, j);
+      patches.push({
+        type: RemoveChild,
+        index: siblingOffset
+      });
+      patches.push({
+        type: Add,
+        nodes: newNodes.slice(j, j + newTotal)
+      });
+      siblingOffset++;
+      i += oldTotal;
+      j += newTotal;
+      continue;
+    }
+    if (oldNode.type === Text$1 && newNode.type === Text$1) {
+      if (oldNode.text !== newNode.text) {
+        if (siblingOffset !== 0) {
+          pendingPatches.push(NavigateSibling, siblingOffset);
+        }
+        applyPendingPatches(patches, pendingPatches, 0);
+        patches.push({
+          type: SetText,
+          value: newNode.text
+        });
+      }
+      i++;
+      j++;
+      siblingOffset++;
+      continue;
+    }
+    const oldKeys = getKeys(oldNode);
+    const newKeys = getKeys(newNode);
+    let hasAttributeChanges = false;
+    for (const key of newKeys) {
+      if (oldNode[key] !== newNode[key]) {
+        hasAttributeChanges = true;
+        break;
+      }
+    }
+    for (const key of oldKeys) {
+      if (!(key in newNode)) {
+        hasAttributeChanges = true;
+        break;
+      }
+    }
+    if (hasAttributeChanges) {
+      if (siblingOffset > 0) {
+        pendingPatches.push(NavigateSibling, siblingOffset);
+      }
+      applyPendingPatches(patches, pendingPatches, 0);
+      for (const key of newKeys) {
+        if (oldNode[key] !== newNode[key]) {
+          patches.push({
+            type: SetAttribute,
+            key,
+            value: newNode[key]
+          });
+        }
+      }
+      for (const key of oldKeys) {
+        if (!(key in newNode)) {
+          patches.push({
+            type: RemoveAttribute,
+            key
+          });
+        }
+      }
+    }
+    if (oldNode.childCount && newNode.childCount) {
+      maxSiblingOffset = oldNode.childCount;
+      indexStack.push(0, maxSiblingOffset);
+      pendingPatches.push(NavigateChild, 0);
+      i++;
+      j++;
+      continue;
+    }
+    if (oldNode.childCount) {
+      applyPendingPatches(patches, pendingPatches, 0);
+      for (let k = 0; k < oldNode.childCount; k++) {
+        patches.push({
+          type: RemoveChild,
+          index: 0
+        });
+      }
+      i += getTotalChildCount(oldNodes, i);
+      j++;
+      siblingOffset++;
+      continue;
+    }
+    if (newNode.childCount) {
+      applyPendingPatches(patches, pendingPatches, 0);
+      const total = getTotalChildCount(newNodes, j);
+      patches.push({
+        type: Add,
+        nodes: newNodes.slice(j + 1, j + total)
+      });
+      i++;
+      j += total;
+      continue;
+    }
+    i++;
+    j++;
+    siblingOffset++;
+  }
+  while (i < oldNodes.length) {
+    if (indexStack.length !== 2) {
+      patches.push({
+        type: NavigateParent
+      });
+    }
+    patches.push({
+      type: RemoveChild,
+      index: siblingOffset
+    });
+    i += getTotalChildCount(oldNodes, i);
+    indexStack.pop();
+    indexStack.pop();
+  }
+  while (j < newNodes.length) {
+    if (siblingOffset > 0) {
+      patches.push({
+        type: NavigateSibling,
+        index: siblingOffset
+      });
+      siblingOffset = 0;
+    }
+    const count = getTotalChildCount(newNodes, j);
+    patches.push({
+      type: Add,
+      nodes: newNodes.slice(j, j + count)
+    });
+    j += count;
+  }
+  return patches;
 };
 
-const handleHeaderFocusIn = state => {
-  return state;
+const Button$1 = 1;
+const Del = 21;
+const Div = 4;
+const H4 = 24;
+const Img = 17;
+const Ins = 20;
+const Span = 8;
+const Text = 12;
+const TextArea = 62;
+
+const getSearchDetailsToggleVirtualDom = () => {
+  return [{
+    type: Div,
+    className: ToggleDetails,
+    role: Button$2,
+    tabIndex: 0,
+    ariaLabel: toggleSearchDetails(),
+    title: toggleSearchDetails(),
+    name: ToggleSearchDetails,
+    childCount: 1
+  }, {
+    type: Div,
+    className: mergeClassNames(MaskIcon, MaskIconEllipsis),
+    childCount: 0
+  }];
 };
 
-const handleIconThemeChange = async state => {
-  const {
-    items,
-    minLineY,
-    maxLineY
-  } = state;
-  const visibleItems = items.slice(minLineY, maxLineY);
-  const icons = await getFileIcons(visibleItems);
+const text = data => {
   return {
-    ...state,
-    icons
+    type: Text,
+    text: data,
+    childCount: 0
   };
 };
 
-const handleIncludeInput = (state, includeValue, inputSource = Script) => {
-  return handleUpdate(state, {
-    includeValue,
-    inputSource
-  });
-};
-
-const handleInput = (state, value, inputSource = Script) => {
-  return handleUpdate(state, {
-    value,
-    inputSource
-  });
-};
-
-const handleListBlur = state => {
-  return state;
+const getClassName = indented => {
+  if (indented) {
+    return mergeClassNames(ViewletSearchMessage, ViewletSearchMessageIndented);
+  }
+  return ViewletSearchMessage;
 };
-
-const handleReplaceInput = (state, value, inputSource = Script) => {
-  return handleUpdate(state, {
-    replacement: value,
-    inputSource
-  });
+const getSearchMessageVirtualDom = (message, indented) => {
+  return [{
+    type: Div,
+    className: getClassName(indented),
+    role: Status,
+    tabIndex: 0,
+    childCount: 1
+  }, text(message)];
 };
 
-const getInputHandler = name => {
-  switch (name) {
-    case 'search-value':
-      return handleInput;
-    case 'replacement-value':
-      return handleReplaceInput;
-    case 'files-to-exclude-value':
-      return handleExcludeInput;
-    default:
-      throw new Error(`unknown input handler: ${name}`);
-  }
+const getSearchHeaderDetailsCollapsedVirtualDom = message => {
+  return [{
+    type: Div,
+    className: SearchHeaderDetails,
+    childCount: 2
+  }, ...getSearchMessageVirtualDom(message, true), ...getSearchDetailsToggleVirtualDom()];
 };
 
-const handleSharedInput = (state, name, value, inputSource = Script) => {
-  const fn = getInputHandler(name);
-  return fn(state, value, inputSource);
-};
+const CheckBoxEnabled = 1;
+const CheckBoxDisabled = 2;
+const ButtonEnabled = 2;
+const ButtonDisabled = 3;
 
-// 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 focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
-  const newMaxLineY = Math.min(index + 1, itemsLength);
-  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
-  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
-  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
-  return {
-    ...state,
-    focusedIndex: index,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    focused: true,
-    deltaY: newDeltaY
-  };
-};
-const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
-  const newMinLineY = index;
-  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
-  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
-  const newDeltaY = newMinLineY * itemHeight;
+const getInputActionsExclude = flags => {
+  const inside = [{
+    icon: MaskIconExclude,
+    title: useExcludeSettings(),
+    command: 'toggleUseExcludeSettings',
+    flag: flags & UseIgnoreFiles ? CheckBoxEnabled : CheckBoxDisabled,
+    name: UseExcludeSettings
+  }];
+  const outside = [];
   return {
-    ...state,
-    focusedIndex: index,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    focused: true,
-    deltaY: newDeltaY
+    inside,
+    outside
   };
 };
-const focusIndex = (state, index) => {
-  const {
-    itemHeight,
-    minLineY,
-    maxLineY,
-    headerHeight,
-    height,
-    items
-  } = state;
-  const itemsLength = items.length;
-  if (itemsLength === 0) {
-    return state;
-  }
-  number(itemHeight);
-  if (index === -1) {
-    return {
-      ...state,
-      focusedIndex: -1,
-      focused: true
-    };
-  }
-  const listHeight = height - headerHeight;
-  if (index < minLineY + 1) {
-    return focusIndexScrollUp(state, index, listHeight, itemHeight, itemsLength);
-  }
-  if (index >= maxLineY - 1) {
-    return focusIndexScrollDown(state, index, listHeight, itemHeight, itemsLength);
-  }
+
+const getInputActionsInclude = flags => {
+  const inside = [{
+    icon: MaskIconBook,
+    title: searchOnlyOpenEditors(),
+    command: 'searchOnlyOpenEditors',
+    flag: flags & OpenEditors ? CheckBoxEnabled : CheckBoxDisabled,
+    name: SearchOnlyOpenEditors
+  }];
+  const outside = [];
   return {
-    ...state,
-    focusedIndex: index,
-    focused: true
+    inside,
+    outside
   };
 };
-const first = () => {
-  return 0;
-};
-const last = items => {
-  return items.length - 1;
-};
-const next = (items, index) => {
-  return (index + 1) % items.length;
-};
-const previous = (items, index) => {
-  return index === 0 ? items.length - 1 : index - 1;
-};
-const focusFirst = state => {
-  const firstIndex = first();
-  return focusIndex(state, firstIndex);
-};
-const focusLast = state => {
-  const {
-    items
-  } = state;
-  const lastIndex = last(items);
-  return focusIndex(state, lastIndex);
-};
-const focusNext = state => {
-  const {
-    focusedIndex,
-    items
-  } = state;
-  const nextIndex = next(items, focusedIndex);
-  return focusIndex(state, nextIndex);
-};
 
-// based on https://github.com/microsoft/vscode/blob/c0769274fa136b45799edeccc0d0a2f645b75caf/src/vs/base/common/arrays.ts#L625 (License MIT)
-
-const isLastIndex = (array, index) => {
-  return index === array.length - 1;
-};
-const lastIndex = array => {
-  return array.length - 1;
-};
-const focusNextPage = state => {
-  const {
-    focusedIndex,
-    items,
-    maxLineY,
-    minLineY
-  } = state;
-  if (isLastIndex(items, focusedIndex)) {
-    return state;
-  }
-  const indexNextPage = Math.min(maxLineY + (maxLineY - minLineY) - 2, lastIndex(items));
-  return focusIndex(state, indexNextPage);
+const getSearchFieldButtonClassName = flag => {
+  return mergeClassNames(SearchFieldButton, flag === CheckBoxEnabled ? SearchFieldButtonChecked : '', flag === ButtonDisabled ? SearchFieldButtonDisabled : '');
 };
-const focusPrevious = state => {
-  const {
-    focusedIndex,
-    items
-  } = state;
-  if (focusedIndex === 0 || focusedIndex === -1) {
-    return state;
+
+// TODO maybe move logic to viewmodel, which returns ariaChecked 1 | 2 | 3
+const getAriaChecked = flag => {
+  switch (flag) {
+    case CheckBoxEnabled:
+      return true;
+    case CheckBoxDisabled:
+      return false;
+    default:
+      return undefined;
   }
-  const previousIndex = previous(items, focusedIndex);
-  return focusIndex(state, previousIndex);
 };
-const focusPreviousPage = state => {
-  const {
-    focusedIndex,
-    minLineY,
-    maxLineY
-  } = state;
-  if (focusedIndex === 0 || focusedIndex === -1) {
-    return state;
+
+// TODO have have separate renderers for checkbox and button elements
+const getRole = flag => {
+  switch (flag) {
+    case CheckBoxEnabled:
+    case CheckBoxDisabled:
+      return CheckBox;
+    default:
+      return undefined;
   }
-  const indexPreviousPage = Math.max(minLineY - (maxLineY - minLineY) + 1, 0);
-  return focusIndex(state, indexPreviousPage);
 };
-const handleScrollBarCaptureLost = state => {
-  return {
-    ...state,
-    scrollBarActive: false
-  };
+const getDisabled = flag => {
+  switch (flag) {
+    case ButtonDisabled:
+      return true;
+    default:
+      return undefined;
+  }
 };
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
+const getSearchFieldButtonVirtualDom = button => {
+  const {
+    icon,
+    title,
+    name,
+    flag
+  } = button;
+  const ariaChecked = getAriaChecked(flag);
+  const role = getRole(flag);
+  const disabled = getDisabled(flag);
+  return [{
+    type: Button$1,
+    className: getSearchFieldButtonClassName(flag),
+    name,
+    title,
+    role,
+    ariaChecked,
+    disabled,
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Span,
+    className: mergeClassNames(MaskIcon, icon),
+    childCount: 0
+  }];
 };
-const getScrollBarY = getScrollBarOffset;
-const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
-  const halfScrollBarHeight = scrollBarHeight / 2;
-  if (relativeY <= halfScrollBarHeight) {
-    // clicked at top
-    return {
-      percent: 0,
-      handleOffset: relativeY
-    };
-  }
-  if (relativeY <= height - halfScrollBarHeight) {
-    // clicked in middle
+
+const getOutSideButtonsDom = outsideButtons => {
+  if (outsideButtons.length === 0) {
     return {
-      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight),
-      handleOffset: halfScrollBarHeight
+      preNodes: [],
+      postNodes: []
     };
   }
-  // clicked at bottom
   return {
-    percent: 1,
-    handleOffset: scrollBarHeight - height + relativeY
+    preNodes: [{
+      type: Div,
+      className: SearchFieldContainer,
+      role: None,
+      childCount: 1 + outsideButtons.length
+    }],
+    postNodes: outsideButtons.flatMap(getSearchFieldButtonVirtualDom)
   };
 };
-const clamp = (num, min, max) => {
-  return Math.min(Math.max(num, min), max);
-};
-const setDeltaY = (state, value) => {
-  object(state);
-  number(value);
+
+const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', hasError = false) => {
   const {
-    itemHeight,
-    finalDeltaY,
-    deltaY,
-    height,
-    headerHeight,
-    items
-  } = state;
-  const listHeight = height - headerHeight;
-  const newDeltaY = clamp(value, 0, finalDeltaY);
-  if (deltaY === newDeltaY) {
-    return state;
+    preNodes,
+    postNodes
+  } = getOutSideButtonsDom(outsideButtons);
+  const searchFieldClassName = hasError ? mergeClassNames(SearchField, SearchFieldError) : SearchField;
+  const dom = [...preNodes, {
+    type: Div,
+    className: searchFieldClassName,
+    role: None,
+    childCount: 2
+  }, {
+    type: TextArea,
+    className: MultilineInputBox,
+    spellcheck: false,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    placeholder,
+    name,
+    onInput,
+    onFocus,
+    childCount: 0
+  }, {
+    type: Div,
+    className: SearchFieldButtons,
+    childCount: insideButtons.length
+  }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom), ...postNodes];
+  return dom;
+};
+
+const getSearchHeaderDetailsExpandedVirtualDom = (flags, message) => {
+  const includeButtons = getInputActionsInclude(flags);
+  const excludeButtons = getInputActionsExclude(flags);
+  return [{
+    type: Div,
+    className: SearchHeaderDetailsExpanded,
+    childCount: 5
+  }, {
+    type: Div,
+    className: SearchHeaderDetailsExpandedTop,
+    childCount: 2
+  }, ...getSearchDetailsToggleVirtualDom(), {
+    type: H4,
+    className: SearchHeaderDetailsHeading,
+    childCount: 1
+  }, text(filesToInclude()), ...getSearchFieldVirtualDom(FilesToInclude, 'Include', HandleInput2, includeButtons.inside, includeButtons.outside), {
+    type: H4,
+    className: SearchHeaderDetailsHeading,
+    childCount: 1
+  }, text(filesToExclude()), ...getSearchFieldVirtualDom(FilesToExclude, 'Exclude', HandleInput2, excludeButtons.inside, excludeButtons.outside), ...getSearchMessageVirtualDom(message, false)];
+};
+
+const getSearchHeaderDetailsVirtualDom = (flags, message) => {
+  if (flags & DetailsExpanded) {
+    return getSearchHeaderDetailsExpandedVirtualDom(flags, message);
   }
-  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
-  const minLineY = Math.floor(newDeltaY / itemHeight);
-  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems(listHeight, itemHeight), items.length);
+  return getSearchHeaderDetailsCollapsedVirtualDom(message);
+};
 
-  // TODO update icons
+const getInputActionsInput = flags => {
+  const inside = [{
+    icon: MaskIconCaseSensitive,
+    flag: flags & MatchCase$2 ? CheckBoxEnabled : CheckBoxDisabled,
+    title: matchCase(),
+    name: MatchCase
+  }, {
+    icon: MaskIconWholeWord,
+    flag: flags & MatchWholeWord$2 ? CheckBoxEnabled : CheckBoxDisabled,
+    title: matchWholeWord(),
+    name: MatchWholeWord
+  }, {
+    icon: MaskIconRegex,
+    flag: flags & UseRegularExpression$2 ? CheckBoxEnabled : CheckBoxDisabled,
+    title: useRegularExpression(),
+    name: UseRegularExpression
+  }];
+  const outside = [];
   return {
-    ...state,
-    deltaY: newDeltaY,
-    minLineY,
-    maxLineY
+    inside,
+    outside
   };
 };
-const handleScrollBarClick = (state, eventY) => {
-  const {
-    y,
-    deltaY,
-    headerHeight,
-    finalDeltaY,
-    scrollBarHeight,
-    height
-  } = state;
-  const contentHeight = height - headerHeight;
-  const relativeY = eventY - y - headerHeight;
-  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
-  const diff = relativeY - currentScrollBarY;
-  if (diff >= 0 && diff < scrollBarHeight) {
-    return {
-      ...state,
-      handleOffset: diff,
-      scrollBarActive: true
-    };
-  }
-  const {
-    percent,
-    handleOffset
-  } = getNewDeltaPercent(contentHeight, scrollBarHeight, relativeY);
-  const newDeltaY = percent * finalDeltaY;
+
+const getInputActionsReplace = (flags, matchCount) => {
+  const inside = [{
+    icon: MaskIconPreserveCase,
+    flag: flags & PreserveCase$2 ? CheckBoxEnabled : CheckBoxDisabled,
+    title: preserveCase(),
+    name: PreserveCase
+  }];
+  const outside = [{
+    icon: MaskIconReplaceAll,
+    flag: matchCount === 0 ? ButtonDisabled : ButtonEnabled,
+    title: replaceAll$1(),
+    name: ReplaceAll
+  }];
   return {
-    ...setDeltaY(state, newDeltaY),
-    handleOffset,
-    scrollBarActive: true
+    inside,
+    outside
   };
 };
-const getNewPercent = (contentHeight, scrollBarHeight, relativeY) => {
-  if (relativeY <= contentHeight - scrollBarHeight / 2) {
-    // clicked in middle
-    return relativeY / (contentHeight - scrollBarHeight);
-  }
-  // clicked at bottom
-  return 1;
-};
-const handleScrollBarMove = (state, eventY) => {
-  const {
-    y,
-    headerHeight,
-    handleOffset,
-    finalDeltaY,
-    height,
-    scrollBarHeight
-  } = state;
-  const relativeY = eventY - y - headerHeight - handleOffset;
-  const contentHeight = height - headerHeight;
-  const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
-  const newDeltaY = newPercent * finalDeltaY;
-  return setDeltaY(state, newDeltaY);
-};
-const handleWheel = (state, deltaMode, deltaY) => {
-  number(deltaMode);
-  number(deltaY);
-  return setDeltaY(state, state.deltaY + deltaY);
+
+const getSearchToggleVirtualDom = flags => {
+  return [{
+    type: Button$1,
+    className: mergeClassNames(IconButton, SearchToggleButton, flags & ReplaceExpanded ? SearchToggleButtonExpanded : ''),
+    title: toggleReplace$1(),
+    ariaLabel: toggleReplace$1(),
+    ariaExpanded: Boolean(flags & ReplaceExpanded),
+    childCount: 1,
+    'data-command': 'toggleReplace',
+    name: ToggleReplace
+  }, {
+    type: Div,
+    className: mergeClassNames(MaskIcon, flags & ReplaceExpanded ? MaskIconChevronDown : MaskIconChevronRight),
+    childCount: 0
+  }];
 };
 
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, topHeight, itemCount) => {
-  const relativeY = eventY - y - topHeight + deltaY;
-  const index = Math.floor(relativeY / itemHeight);
-  if (index >= itemCount) {
-    return -1;
+const getSearchHeaderTopVirtualDom = (flags, searchInputErrorMessage, matchCount) => {
+  const inputActions = getInputActionsInput(flags);
+  const replaceActions = getInputActionsReplace(flags, matchCount);
+  const dom = [{
+    type: Div,
+    className: SearchHeaderTop,
+    role: None,
+    childCount: 2
+  }, ...getSearchToggleVirtualDom(flags), {
+    type: Div,
+    className: SearchHeaderTopRight,
+    role: None,
+    childCount: flags & ReplaceExpanded ? 2 : 1
+  }, ...getSearchFieldVirtualDom(SearchValue, 'Search', HandleInput2, inputActions.inside, inputActions.outside, '', Boolean(searchInputErrorMessage))];
+  if (flags & ReplaceExpanded) {
+    dom.push(...getSearchFieldVirtualDom(ReplaceValue, 'Replace', HandleInput2, replaceActions.inside, replaceActions.outside));
   }
-  return index;
+  return dom;
 };
 
-const getTopHeight = flags => {
-  if (flags & ReplaceExpanded && flags & DetailsExpanded) {
-    return 190;
-  }
-  if (flags & DetailsExpanded) {
-    return 158;
-  }
-  if (flags & ReplaceExpanded) {
-    return 93;
-  }
-  return 61;
+const parentNode = {
+  type: Div,
+  className: SearchHeader,
+  role: None,
+  childCount: 2,
+  onClick: HandleHeaderClick2,
+  onFocusIn: HandleHeaderFocusIn
+};
+const getSearchHeaderVirtualDom = (flags, message, searchInputErrorMessage, matchCount) => {
+  const dom = [parentNode, ...getSearchHeaderTopVirtualDom(flags, searchInputErrorMessage, matchCount), ...getSearchHeaderDetailsVirtualDom(flags, message)];
+  return dom;
 };
 
-const getFilteredResults = (results, collapsedPaths) => {
-  if (collapsedPaths.length === 0) {
-    return results;
-  }
-  const filteredResults = [];
-  let isExcluded = false;
-  for (const result of results) {
-    if (result.type === File) {
-      filteredResults.push(result);
-      isExcluded = collapsedPaths.includes(result.text) ? true : false;
-    }
-    if (result.type === Match && !isExcluded) {
-      filteredResults.push(result);
-    }
+const getSearchInputErrorVirtualDom = errorMessage => {
+  if (!errorMessage) {
+    return [];
   }
-  return filteredResults;
+  return [{
+    type: Div,
+    className: SearchInputError,
+    role: Alert,
+    childCount: 1
+  }, text(errorMessage)];
 };
 
-const toggleCollapsedPath = (collapsedPaths, path) => {
-  if (collapsedPaths.includes(path)) {
-    const index = collapsedPaths.indexOf(path);
-    return collapsedPaths.toSpliced(index, 1);
+const TreeItems = 'TreeItems';
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarY, scrollBarValue) => {
+  if (scrollBarHeight === 0) {
+    return [];
   }
-  return [...collapsedPaths, path];
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar$1, ScrollBarVertical),
+    childCount: 1,
+    onPointerDown: HandleScrollBarPointerDown,
+    role: ScrollBar,
+    ariaControls: TreeItems,
+    ariaValueNow: scrollBarValue
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    height: scrollBarHeight,
+    translate: `0 ${scrollBarY}px`,
+    childCount: 0
+  }];
 };
 
-const selectIndexFile = async (state, searchResult, index) => {
-  const {
-    collapsedPaths,
-    items,
-    itemHeight,
-    headerHeight,
-    height
-  } = state;
-  const path = searchResult.text;
-  const newCollapsedPaths = toggleCollapsedPath(collapsedPaths, path);
-  const filteredResults = getFilteredResults(items, newCollapsedPaths);
-  const icons = await getFileIcons(filteredResults);
-  const total = filteredResults.length;
-  const listHeight = height - headerHeight;
-  const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
-  const maxLineY = Math.min(numberOfVisible, total);
-  return {
-    ...state,
-    collapsedPaths: newCollapsedPaths,
-    listFocusedIndex: index,
-    listFocused: true,
-    listItems: filteredResults,
-    maxLineY,
-    icons
-  };
+// TODO instead of setting string, support enum in virtual dom and send enum to renderer process
+// which converts it to a boolean
+const getAriaExpanded = expanded => {
+  switch (expanded) {
+    case Collapsed:
+      return 'false';
+    case Expanded:
+      return 'true';
+    default:
+      return undefined;
+  }
 };
 
-const getFileIndex = (items, index) => {
-  for (let i = index; i >= 0; i--) {
-    const item = items[i];
-    if (item.type === File) {
-      return i;
-    }
+const getBadgeVirtualDom = (className, badgeText) => {
+  if (!badgeText) {
+    return [];
   }
-  return -1;
+  return [{
+    type: Div,
+    className: mergeClassNames(Badge, className),
+    childCount: 1
+  }, text(badgeText)];
 };
 
-const openUri = async (path, focus = true, props = {}) => {
-  await invoke$2(/* Main.openUri */'Main.openUri', /* uri */path, /* focus */focus, props);
+const chevronDownVirtualDom = {
+  type: Div,
+  className: mergeClassNames(Chevron, MaskIconChevronDown),
+  childCount: 0
+};
+const chevronRightVirtualDom = {
+  type: Div,
+  className: mergeClassNames(Chevron, MaskIconChevronRight),
+  childCount: 0
 };
 
-const selectIndexPreview = async (state, searchResult, index) => {
-  const {
-    items,
-    workspacePath
-  } = state;
-  const fileIndex = getFileIndex(items, index);
-  if (fileIndex === -1) {
-    throw new Error('Search result is missing file');
-  }
-  const {
-    lineNumber
-  } = searchResult;
-  const fileResult = items[fileIndex];
-  const relativePath = getRelativePath(fileResult.text);
-  const absolutePath = `${workspacePath}${relativePath}`;
-  await openUri(absolutePath, true, {
-    selections: new Uint32Array([lineNumber, 0, lineNumber, 0])
-  });
+const getFileIconVirtualDom = icon => {
   return {
-    ...state,
-    listFocusedIndex: index,
-    listFocused: false
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
+    childCount: 0
   };
 };
 
-const getSelectHandler = type => {
-  switch (type) {
-    case File:
-      return selectIndexFile;
-    case Match:
-      return selectIndexPreview;
+const getIconsVirtualDom = (expanded, icon) => {
+  switch (expanded) {
+    case Expanded:
+      return [chevronDownVirtualDom, getFileIconVirtualDom(icon)];
+    case Collapsed:
+      return [chevronRightVirtualDom, getFileIconVirtualDom(icon)];
     default:
-      throw new Error(`unexpected search result type ${type}`);
+      return [];
   }
 };
 
-const selectIndex = async (state, index) => {
-  if (index === -1) {
-    return {
-      ...state,
-      listFocused: true,
-      listFocusedIndex: -1
-    };
-  }
-  const {
-    listItems
-  } = state;
-  const searchResult = listItems[index];
-  const fn = getSelectHandler(searchResult.type);
-  return fn(state, searchResult, index);
+const deleted = {
+  type: Del,
+  className: HighlightDeleted,
+  childCount: 1
 };
-
-const handleClickAt = (state, eventX, eventY) => {
-  const {
-    x,
-    y,
-    itemHeight,
-    deltaY,
-    flags,
-    listItems
-  } = state;
-  const topHeight = getTopHeight(flags);
-  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, topHeight, listItems.length);
-  return selectIndex(state, index);
+const inserted = {
+  type: Ins,
+  className: HighlightInserted,
+  childCount: 1
 };
-
-const getSavedValue = savedState => {
-  if (savedState && typeof savedState === 'object' && 'value' in savedState && typeof savedState.value === 'string') {
-    return savedState.value;
-  }
-  return '';
+const highlighted = {
+  type: Span,
+  className: Highlight,
+  childCount: 1
 };
-const getSavedReplacement = savedState => {
-  if (savedState && typeof savedState === 'object' && 'replacement' in savedState && typeof savedState.replacement === 'string') {
-    return savedState.replacement;
-  }
-  return '';
+const label1 = {
+  type: Div,
+  className: mergeClassNames(Label, Grow),
+  childCount: 1
 };
-const getSavedFlags = savedState => {
-  if (savedState && typeof savedState === 'object' && 'flags' in savedState && typeof savedState.flags === 'number') {
-    return savedState.flags;
-  }
-  return 0;
+const label3 = {
+  ...label1,
+  childCount: 3
 };
-const getSavedIncludeValue = savedState => {
-  if (savedState && typeof savedState === 'object' && 'includeValue' in savedState && typeof savedState.includeValue === 'string') {
-    return savedState.includeValue;
-  }
-  return '';
+const label4 = {
+  ...label1,
+  childCount: 4
 };
-const getSavedExcludeValue = savedState => {
-  if (savedState && typeof savedState === 'object' && 'excludeValue' in savedState && typeof savedState.excludeValue === 'string') {
-    return savedState.excludeValue;
+const getLabelVirtualDom = (displayText, matchLength, matchStart, replacement) => {
+  if (matchLength) {
+    const before = displayText.slice(0, matchStart);
+    const highlight = displayText.slice(matchStart, matchStart + matchLength);
+    const after = displayText.slice(matchStart + matchLength);
+    if (replacement) {
+      return [label4, text(before), deleted, text(highlight), inserted, text(replacement), text(after)];
+    }
+    return [label3, text(before), highlighted, text(highlight), text(after)];
   }
-  return '';
+  return [label1, text(displayText)];
 };
 
-const restoreState = savedState => {
-  return {
-    savedValue: getSavedValue(savedState),
-    replacement: getSavedReplacement(savedState),
-    savedCollapsedPaths: [],
-    threads: 1,
-    flags: getSavedFlags(savedState),
-    includeValue: getSavedIncludeValue(savedState),
-    excludeValue: getSavedExcludeValue(savedState)
-  };
+const getPaddingLeft = depth => {
+  return `${Number(depth) + 1}rem`; // TODO use classname and dynamic css
 };
 
-const loadContent = async (state, savedState) => {
-  const {
-    savedValue,
-    savedCollapsedPaths,
-    threads,
-    replacement,
-    flags,
-    includeValue,
-    excludeValue
-  } = restoreState(savedState);
-  if (savedValue) {
-    return handleUpdate(state, {
-      value: savedValue,
-      threads,
-      inputSource: Script,
-      collapsedPaths: savedCollapsedPaths,
-      replacement,
-      flags,
-      includeValue,
-      excludeValue
-    });
+const getSearchResultClassName = focused => {
+  if (focused) {
+    return TreeItem$1 + ' ' + TreeItemActive;
   }
-  return {
-    ...state,
-    threads,
-    flags,
-    loaded: true
-  };
+  return TreeItem$1;
 };
 
-const refresh = state => {
-  return handleUpdate(state, {});
+const PaddingRight = '12px';
+
+const getSearchResultVirtualDom = rowInfo => {
+  const {
+    matchStart,
+    matchLength,
+    text: displayText,
+    title,
+    icon,
+    setSize,
+    posInSet,
+    depth,
+    replacement,
+    focused,
+    expanded,
+    childCount,
+    badgeText
+  } = rowInfo;
+  const dom = [{
+    type: Div,
+    role: TreeItem,
+    className: getSearchResultClassName(focused),
+    title,
+    ariaSetSize: setSize,
+    ariaLevel: depth,
+    ariaPosInSet: posInSet,
+    ariaLabel: title,
+    ariaDescription: '',
+    childCount,
+    paddingLeft: getPaddingLeft(depth),
+    paddingRight: PaddingRight,
+    ariaExpanded: getAriaExpanded(expanded)
+  }, ...getIconsVirtualDom(expanded, icon), ...getLabelVirtualDom(displayText, matchLength, matchStart, replacement), ...getBadgeVirtualDom(SourceControlBadge, badgeText), {
+    type: Div,
+    className: SearchRemove,
+    childCount: 1
+  }, {
+    type: Div,
+    className: CloseMaskIcon,
+    childCount: 0
+  }];
+  return dom;
 };
 
-const getFocusSelector = focusKey => {
-  switch (focusKey) {
-    case FocusSearchInput:
-      return SearchValue;
-    case FocusSearchReplaceInput:
-      return ReplaceValue;
-    case FocusToggleDetails:
-      return ToggleSearchDetails;
-    case FocusSearchMatchCase:
-      return MatchCase;
-    case FocusSearchPreserveCase:
-      return PreserveCase;
-    case FocusSearchRegex:
-      return UseRegularExpression;
-    case FocusSearchIncludeInput:
-      return FilesToInclude;
-    case FocusSearchExcludeInput:
-      return FilesToExclude;
-    case FocusSearchWholeWord:
-      return MatchWholeWord;
-    case FocusSearchReplaceAll:
-      return ReplaceAll;
-    case FocusSearchOpenEditors:
-      return SearchOnlyOpenEditors;
-    case FocusIgnoreFiles:
-      return UseExcludeSettings;
-    case FocusToggleReplace:
-      return ToggleReplace;
-    default:
-      return '';
-  }
+const getTreeItemsVirtualDom = (visibleItems, deltaY, itemHeight) => {
+  const pixelOffset = deltaY % itemHeight;
+  return [{
+    type: Div,
+    className: TreeItems$1,
+    childCount: visibleItems.length,
+    onClick: HandleClick,
+    onBlur: HandleListBlur,
+    onWheel: HandleWheel,
+    id: TreeItems,
+    top: `${-pixelOffset}px`
+  }, ...visibleItems.flatMap(getSearchResultVirtualDom)];
 };
 
-const renderFocus = (oldState, newState) => {
-  const selector = getFocusSelector(newState.focus);
-  return ['Viewlet.focusElementByName', newState.uid, selector];
+const getSearchResultsVirtualDom = (visibleItems, focusOutline, scrollbarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight) => {
+  const scrollBarDomNodes = scrollbarHeight === 0 ? 0 : 1;
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, List, Tree$1, focusOutline ? FocusOutline : Empty),
+    role: Tree,
+    tabIndex: 0,
+    childCount: 1 + scrollBarDomNodes
+  }, ...getTreeItemsVirtualDom(visibleItems, deltaY, itemHeight), ...getScrollBarVirtualDom(scrollbarHeight, scrollBarY, scrollBarValue)];
 };
 
-const createViewModel = state => {
-  const {
-    listItems,
-    itemHeight,
-    fileCount,
-    value,
-    minLineY,
-    maxLineY,
-    replacement,
-    icons,
-    listFocusedIndex,
-    collapsedPaths,
-    items,
-    listFocused,
-    deltaY,
-    finalDeltaY,
-    height,
-    headerHeight,
-    flags,
-    message,
-    searchInputErrorMessage,
-    scrollBarHeight,
-    matchCount
-  } = state;
-  const displayResults = getDisplayResults(listItems, itemHeight, fileCount, value, minLineY, maxLineY, replacement, icons, listFocusedIndex, collapsedPaths, items);
-  const focusOutline = listFocused && listFocusedIndex === -1;
-  const scrollBarValue = deltaY / finalDeltaY * 100;
-  const scrollBarY = getScrollBarY$1(deltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
-  return {
-    displayResults,
-    flags,
-    message,
-    focusOutline,
-    searchInputErrorMessage,
-    scrollBarHeight,
-    scrollBarY,
-    scrollBarValue,
-    deltaY,
-    itemHeight,
-    matchCount
-  };
+const getSearchVirtualDom = (visibleItems, flags, message, focusOutline, searchInputErrorMessage, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight, matchCount) => {
+  const errorDom = getSearchInputErrorVirtualDom(searchInputErrorMessage);
+  const childCount = 2 + (errorDom.length > 0 ? 1 : 0);
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Search$1),
+    childCount
+  }, ...getSearchHeaderVirtualDom(flags, message, searchInputErrorMessage, matchCount), ...errorDom, ...getSearchResultsVirtualDom(visibleItems, focusOutline, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -4130,6 +4055,50 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
+const Button = 1;
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    role: None,
+    childCount: 0
+  };
+};
+
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: Button$1,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
+};
+
+const getActionVirtualDom = action => {
+  switch (action.type) {
+    case Button:
+      return getActionButtonVirtualDom(action);
+    default:
+      return [];
+  }
+};
+
+const getActionsVirtualDom = actions => {
+  return [{
+    type: Div,
+    className: Actions,
+    role: ToolBar,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionVirtualDom)];
+};
+
 const renderActions = uid => {
   const {
     oldState,
@@ -4145,6 +4114,9 @@ const renderActions = uid => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleInput2,
+    params: ['handleInput2', 'event.target.name', 'event.target.value', User]
+  }, {
     name: HandleExcludeInput,
     params: ['handleExcludeInput', 'event.target.value']
   }, {
@@ -4158,7 +4130,7 @@ const renderEventListeners = () => {
     params: ['handleInput', 'event.target.value', User]
   }, {
     name: HandleClick,
-    params: ['handleClick', 'event.clientX', 'event.clientY']
+    params: ['handleClickAt', 'event.clientX', 'event.clientY']
   }, {
     name: HandleToggleButtonClick,
     params: ['handleToggleButtonClick']
@@ -4209,6 +4181,10 @@ const renderIncremental = uid => {
   return patches;
 };
 
+const prompt = (text, options) => {
+  return invoke$2('ConfirmPrompt.prompt', text, options);
+};
+
 const getReplaceAllConfirmText = (matchCount, fileCount, replacement) => {
   if (matchCount === 1) {
     if (replacement) {
@@ -4237,7 +4213,7 @@ const replaceAllAndPrompt = async (workspacePath, items, replacement, matchCount
   const confirmTitle = replaceAll$1();
   const confirmAccept = replace();
   const confirmText = getReplaceAllConfirmText(matchCount, fileCount, replacement);
-  const shouldReplace = await invoke$2('ConfirmPrompt.prompt', confirmText, {
+  const shouldReplace = await prompt(confirmText, {
     title: confirmTitle,
     confirmMessage: confirmAccept
   });
@@ -4258,14 +4234,16 @@ const saveState = uid => {
     replacement,
     flags,
     includeValue,
-    excludeValue
+    excludeValue,
+    history
   } = newState;
   return {
     value,
     replacement,
     flags,
     includeValue,
-    excludeValue
+    excludeValue,
+    history
   };
 };
 
@@ -4438,7 +4416,7 @@ const wrapCommand = fn => {
 };
 
 const commandMap = {
-  'TextSearch.clearSearchResults': wrapCommand(clearSearchResults$1),
+  'TextSearch.clearSearchResults': wrapCommand(clearSearchResults),
   'TextSearch.collapseDetails': wrapCommand(collapseDetails),
   'TextSearch.copy': wrapCommand(copy),
   'TextSearch.diff2': diff2,
@@ -4476,6 +4454,7 @@ const commandMap = {
   'TextSearch.handleIconThemeChange': wrapCommand(handleIconThemeChange),
   'TextSearch.handleIncludeInput': wrapCommand(handleIncludeInput),
   'TextSearch.handleInput': wrapCommand(handleInput),
+  'TextSearch.handleInput2': wrapCommand(handleInput2),
   'TextSearch.handleListBlur': wrapCommand(handleListBlur),
   'TextSearch.handleReplaceInput': wrapCommand(handleReplaceInput),
   'TextSearch.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
@@ -4485,6 +4464,8 @@ const commandMap = {
   'TextSearch.handleWheel': wrapCommand(handleWheel),
   'TextSearch.launchSearchProcess': wrapCommand(launchSearchProcess),
   'TextSearch.loadContent': wrapCommand(loadContent),
+  'TextSearch.nextHistoryResult': wrapCommand(nextHistoryResult),
+  'TextSearch.previousHistoryResult': wrapCommand(previousHistoryResult),
   'TextSearch.refresh': wrapCommand(refresh),
   'TextSearch.renderActions': renderActions,
   'TextSearch.replaceAll': wrapCommand(replaceAll),
@@ -4509,11 +4490,7 @@ const commandMap = {
   'TextSearch.terminate': terminate,
   // TODO needed?
   'TextSearch.replaceAllAndPrompt': replaceAllAndPrompt,
-  'TextSearch.textSearch': textSearch,
-  'TextSearch.getActions': getActions,
-  'TextSearch.getActionsVirtualDom': getActionsVirtualDom,
-  'TextSearch.getSearchDisplayResults': getDisplayResults,
-  'TextSearch.getVirtualDom': getSearchVirtualDom
+  'TextSearch.textSearch': textSearch
 };
 
 const listen = async () => {