@lvce-editor/server 0.36.0 → 0.36.2

package/static/{e2c7373 → a238240}/packages/editor-worker/dist/editorWorkerMain.js

@@ -109,7 +109,7 @@ const handleSliderPointerMove = (state, x, y) => {
 };
 
 const ColoredMaskIcon = 'ColoredMaskIcon';
-const ColorPicker = 'ColorPicker';
+const ColorPicker$2 = 'ColorPicker';
 const ColorPickerBackgroundColor = 'ColorPickerBackgroundColor';
 const ColorPickerDark = 'ColorPickerDark';
 const ColorPickerLight = 'ColorPickerLight';
@@ -117,8 +117,14 @@ const ColorPickerRectangle = 'ColorPickerRectangle';
 const ColorPickerSlider = 'ColorPickerSlider';
 const ColorPickerSliderThumb = 'ColorPickerSliderThumb';
 const CompletionDetailCloseButton = 'CompletionDetailCloseButton';
+const IconButtonDisabled = 'IconButtonDisabled';
+const IconButton = 'IconButton';
 const CompletionDetailContent = 'CompletionDetailContent';
 const Diagnostic = 'Diagnostic';
+const FindWidgetReplace = 'FindWidgetReplace';
+const FindWidgetFind = 'FindWidgetFind';
+const FindWidgetMatchCount = 'FindWidgetMatchCount';
+const FindWidgetRight = 'FindWidgetRight';
 const EditorCompletionItem = 'EditorCompletionItem';
 const EditorCompletionItemDeprecated = 'EditorCompletionItemDeprecated';
 const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
@@ -129,7 +135,10 @@ const EditorSelection = 'EditorSelection';
 const FileIcon = 'FileIcon';
 const HoverDisplayString = 'HoverDisplayString';
 const HoverDocumentation = 'HoverDocumentation';
+const SearchFieldButtons = 'SearchFieldButtons';
 const HoverEditorRow = 'HoverEditorRow';
+const MultilineInputBox = 'MultilineInputBox';
+const SearchField = 'SearchField';
 const HoverProblem = 'HoverProblem';
 const HoverProblemDetail = 'HoverProblemDetail';
 const HoverProblemMessage = 'HoverProblemMessage';
@@ -146,15 +155,17 @@ const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
+const Button = 1;
 const Div = 4;
 const Span = 8;
 const Text = 12;
 const Img = 17;
+const TextArea = 62;
 
 const getColorPickerVirtualDom = () => {
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, ColorPicker),
+    className: mergeClassNames(Viewlet, ColorPicker$2),
     onPointerDown: HandlePointerDown,
     childCount: 3
   }, {
@@ -190,8 +201,19 @@ const SetContentHeight = 'setContentHeight';
 const SetNegativeMargin = 'setNegativeMargin';
 const SetOffsetX = 'setOffsetX';
 const SetScrollBar = 'setScrollBar';
+const SetValue = 'setValue';
 
-const renderColor = {
+const renderParts = (render, oldState, newState) => {
+  const commands = [];
+  for (const item of render) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const renderColor$1 = {
   isEqual(oldState, newState) {
     return oldState.color === newState.color;
   },
@@ -199,7 +221,7 @@ const renderColor = {
     return [/* method */SetColor, /* color */newState.color];
   }
 };
-const renderOffsetX = {
+const renderOffsetX$1 = {
   isEqual(oldState, newState) {
     return oldState.offsetX === newState.offsetX;
   },
@@ -216,15 +238,9 @@ const renderColorPickerDom = {
     return ['Viewlet.setDom2', dom];
   }
 };
-const render$6 = [renderColorPickerDom, renderColor, renderOffsetX];
+const render$a = [renderColorPickerDom, renderColor$1, renderOffsetX$1];
 const renderColorPicker = async (oldState, newState) => {
-  const commands = [];
-  for (const item of render$6) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
+  return renderParts(render$a, oldState, newState);
 };
 
 // TODO use numeric enum
@@ -247,12 +263,12 @@ const modules = Object.create(null);
 const register = (id, value) => {
   modules[id] = value;
 };
-const get$7 = id => {
+const get$8 = id => {
   return modules[id];
 };
 
 const getModule$2 = id => {
-  return get$7(id);
+  return get$8(id);
 };
 
 const applyWidgetChange = (editor, widget, changes) => {
@@ -496,7 +512,6 @@ const offsetAt = (textDocument, positionRowIndex, positionColumnIndex) => {
   return offset;
 };
 const positionAt = (textDocument, offset) => {
-  // console.log({ textDocument, offset })
   let rowIndex = 0;
   let columnIndex = 0;
   let currentOffset = 0;
@@ -690,7 +705,7 @@ const alloc = length => {
 const clone = selections => {
   return alloc(selections.length);
 };
-const map = (selections, fn) => {
+const map$1 = (selections, fn) => {
   const newSelections = clone(selections);
   for (let i = 0; i < newSelections.length; i += 4) {
     const [selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn] = getSelectionPairs(selections, i);
@@ -1124,11 +1139,11 @@ const setText = (editor, text) => {
 };
 
 const editors = Object.create(null);
-const get$6 = id => {
+const get$7 = id => {
   number$1(id);
   return editors[id];
 };
-const set$6 = (id, oldEditor, newEditor) => {
+const set$7 = (id, oldEditor, newEditor) => {
   number$1(id);
   object(oldEditor);
   object(newEditor);
@@ -1176,13 +1191,13 @@ const number = value => {
 const state$1$1 = {
   callbacks: Object.create(null)
 };
-const set$5 = (id, fn) => {
+const set$6 = (id, fn) => {
   state$1$1.callbacks[id] = fn;
 };
-const get$5 = id => {
+const get$6 = id => {
   return state$1$1.callbacks[id];
 };
-const remove$2 = id => {
+const remove$4 = id => {
   delete state$1$1.callbacks[id];
 };
 const state$a = {
@@ -1213,7 +1228,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = withResolvers$2();
-  set$5(id, resolve);
+  set$6(id, resolve);
   return {
     id,
     promise
@@ -1221,14 +1236,14 @@ const registerPromise = () => {
 };
 const resolve = (id, args) => {
   number(id);
-  const fn = get$5(id);
+  const fn = get$6(id);
   if (!fn) {
     console.log(args);
     warn$1(`callback ${id} may already be disposed`);
     return;
   }
   fn(args);
-  remove$2(id);
+  remove$4(id);
 };
 const create$2$1 = (method, params) => {
   const {
@@ -1420,7 +1435,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(message, errorProperty);
 };
-const create$8 = (message, result) => {
+const create$a = (message, result) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -1429,7 +1444,7 @@ const create$8 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$8(message, resultProperty);
+  return create$a(message, resultProperty);
 };
 const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
   try {
@@ -1603,23 +1618,23 @@ const state$8 = {
    */
   ipc: undefined
 };
-const get$4 = () => {
+const get$5 = () => {
   return state$8.ipc;
 };
-const set$4 = ipc => {
+const set$5 = ipc => {
   state$8.ipc = ipc;
 };
 
 const invoke$4 = (method, ...params) => {
-  const ipc = get$4();
+  const ipc = get$5();
   return invoke$5(ipc, method, ...params);
 };
 const invokeAndTransfer$1 = async (method, ...params) => {
-  const ipc = get$4();
+  const ipc = get$5();
   return invokeAndTransfer$2(ipc, method, ...params);
 };
 const listen$8 = ipc => {
-  set$4(ipc);
+  set$5(ipc);
 };
 
 const invoke$3 = async (method, ...params) => {
@@ -1661,7 +1676,7 @@ const waitForFirstMessage$1 = async port => {
   return event;
 };
 
-const create$7 = async () => {
+const create$9 = async () => {
   const {
     port1,
     port2
@@ -1706,7 +1721,7 @@ const wrap$3 = port => {
 
 const IpcParentWithExtensionHostWorker = {
   __proto__: null,
-  create: create$7,
+  create: create$9,
   wrap: wrap$3
 };
 
@@ -1714,7 +1729,7 @@ const sendMessagePortToSyntaxHighlightingWorker = async port => {
   await invokeAndTransfer('SendMessagePortToSyntaxHighlightingWorker.sendMessagePortToSyntaxHighlightingWorker', port, 'HandleMessagePort.handleMessagePort');
 };
 
-const create$6 = async () => {
+const create$8 = async () => {
   const {
     port1,
     port2
@@ -1759,7 +1774,7 @@ const wrap$1 = port => {
 
 const IpcParentWithSyntaxHighlightingWorker = {
   __proto__: null,
-  create: create$6,
+  create: create$8,
   wrap: wrap$1
 };
 
@@ -1767,7 +1782,7 @@ const sendMessagePortToRendererProcess = async port => {
   await invokeAndTransfer('SendMessagePortToRendererProcess.sendMessagePortToRendererProcess', port, 'HandleMessagePort.handleMessagePort');
 };
 
-const create$5 = async () => {
+const create$7 = async () => {
   const {
     port1,
     port2
@@ -1812,7 +1827,7 @@ const wrap = port => {
 
 const IpcParentWithRendererProcess = {
   __proto__: null,
-  create: create$5,
+  create: create$7,
   wrap
 };
 
@@ -1829,7 +1844,7 @@ const getModule$1 = method => {
   }
 };
 
-const create$4 = async ({
+const create$6 = async ({
   method,
   ...options
 }) => {
@@ -1847,7 +1862,7 @@ const create$4 = async ({
 const createRpc = method => {
   let _ipc;
   const listen = async () => {
-    const ipc = await create$4({
+    const ipc = await create$6({
       method
     });
     handleIpc(ipc);
@@ -1995,8 +2010,7 @@ const createEditor = async ({
     ...newEditor3,
     focused: true
   };
-  // console.log({ newEditor })
-  set$6(id, emptyEditor, newEditor4);
+  set$7(id, emptyEditor, newEditor4);
   await invoke$2(TextDocumentSyncFull, uri, id, languageId, content);
 };
 
@@ -2063,7 +2077,7 @@ const applyEdit = async (editor, changes) => {
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 
-const handleBlur = editor => {
+const handleBlur$1 = editor => {
   // for (const listener of state.blurListeners) {
   //   listener(editor)
   // }
@@ -2124,7 +2138,7 @@ const getAccurateColumnIndexAscii = (line, guess, averageCharWidth, eventX, font
 const supported = () => {
   return 'Segmenter' in Intl;
 };
-const create$3 = () => {
+const create$5 = () => {
   // @ts-ignore
   const segmenter = new Intl.Segmenter();
   return {
@@ -2162,7 +2176,7 @@ const create$3 = () => {
 
 // @ts-ignore
 const getAccurateColumnIndexUnicode = (line, guess, averageCharWidth, eventX, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const segmenter = create$3();
+  const segmenter = create$5();
   const segments = segmenter.getSegments(line);
   const isMonospaceFont = false;
   const charWidth = 0;
@@ -2393,7 +2407,9 @@ const cancelSelection = editor => {
 
 // TODO use numeric widget id
 const Completion = 'completion';
-const CompletionDetail = 'completionDetail';
+const CompletionDetail$1 = 'completionDetail';
+const ColorPicker$1 = 'colorPicker';
+const Find = 'find';
 
 const isCompletionWidget = widget => {
   return widget.id === Completion;
@@ -2413,6 +2429,88 @@ const closeCompletion = editor => {
   };
 };
 
+const hasWidget = (widgets, id) => {
+  for (const widget of widgets) {
+    if (widget.id === id) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const setAdditionalFocus = async focusKey => {
+  await invoke$3('Focus.setAdditionalFocus', focusKey);
+};
+
+const addWidgetToEditor = async (widgetId, focusKey, editor, factory, newStateGenerator) => {
+  const {
+    widgets
+  } = editor;
+  if (hasWidget(widgets, widgetId)) {
+    return editor;
+  }
+  const widget = factory();
+  const newState = await newStateGenerator(widget.newState);
+  const latestWidget = {
+    ...widget,
+    newState
+  };
+  const newWidgets = [...widgets, latestWidget];
+  // TODO avoid side effect, apply focus shift during render
+  await setAdditionalFocus(focusKey);
+  const newEditor = {
+    ...editor,
+    widgets: newWidgets
+  };
+  return newEditor;
+};
+
+const create$4 = () => {
+  return Math.random();
+};
+
+const create$3 = () => {
+  const completionUid = create$4();
+  const widget = {
+    id: ColorPicker$1,
+    oldState: {
+      color: '',
+      offsetX: 0,
+      min: 0,
+      max: 0,
+      uid: completionUid,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    },
+    newState: {
+      color: '',
+      offsetX: 0,
+      min: 0,
+      max: 0,
+      uid: completionUid,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }
+  };
+  return widget;
+};
+
+const ColorPicker = 41;
+const FindWidget = 16;
+const EditorCompletion = 9;
+const CompletionDetail = 999;
+
+const newStateGenerator = state => {
+  return loadContent$3(state);
+};
+const openColorPicker = async editor => {
+  return addWidgetToEditor(ColorPicker$1, ColorPicker, editor, create$3, newStateGenerator);
+};
+
 const state$6 = {
   isComposing: false,
   compositionText: ''
@@ -2707,7 +2805,7 @@ const characterLeft = (line, columnIndex) => {
   if (!supported()) {
     return 1;
   }
-  const segmenter = create$3();
+  const segmenter = create$5();
   const last = segmenter.at(line, columnIndex - 1);
   return columnIndex - last.index;
 };
@@ -2718,7 +2816,7 @@ const characterRight = (line, columnIndex) => {
   if (!supported()) {
     return 1;
   }
-  const segmenter = create$3();
+  const segmenter = create$5();
   const next = segmenter.at(line, columnIndex);
   return next.segment.length;
 };
@@ -2872,7 +2970,7 @@ const moveSelectionDown = (selections, i, selectionStartRow, selectionStartColum
   moveRangeToPosition$1(selections, i, selectionEndRow + 1, selectionEndColumn);
 };
 const getNewSelections$9 = selections => {
-  return map(selections, moveSelectionDown);
+  return map$1(selections, moveSelectionDown);
 };
 const cursorDown = editor => {
   const {
@@ -2908,7 +3006,7 @@ const moveSelectionWithoutIntlSegmenter = (selections, i, selectionStartRow, sel
   }
 };
 const getNewSelections$8 = selections => {
-  return map(selections, moveSelectionWithoutIntlSegmenter);
+  return map$1(selections, moveSelectionWithoutIntlSegmenter);
 };
 const cursorVertical = (editor, getPosition, getEdgePosition, delta) => {
   const {
@@ -3293,32 +3391,33 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const UiStrings = {
+const UiStrings$1 = {
   GoToDefinition: 'Go to Definition',
   NoDefinitionFound: 'No definition found',
   NoDefinitionFoundFor: "No definition found for '{PH1}'",
   NoTypeDefinitionFound: 'No type definition found',
   NoTypeDefinitionFoundFor: "No type definition found for '{PH1}'",
-  NoResults: 'No Results'
+  NoResults: 'No Results',
+  Replace: 'Replace'
 };
 const noDefinitionFound = () => {
-  return i18nString(UiStrings.NoDefinitionFound);
+  return i18nString(UiStrings$1.NoDefinitionFound);
 };
 const noDefinitionFoundFor = word => {
-  return i18nString(UiStrings.NoDefinitionFoundFor, {
+  return i18nString(UiStrings$1.NoDefinitionFoundFor, {
     PH1: word
   });
 };
 const noTypeDefinitionFoundFor = word => {
-  return i18nString(UiStrings.NoTypeDefinitionFoundFor, {
+  return i18nString(UiStrings$1.NoTypeDefinitionFoundFor, {
     PH1: word
   });
 };
 const noTypeDefinitionFound = () => {
-  return i18nString(UiStrings.NoTypeDefinitionFound);
+  return i18nString(UiStrings$1.NoTypeDefinitionFound);
 };
-const noResults = () => {
-  return i18nString(UiStrings.NoResults);
+const noResults$1 = () => {
+  return i18nString(UiStrings$1.NoResults);
 };
 
 // @ts-ignore
@@ -3524,7 +3623,7 @@ const handleDoubleClick = (editor, modifier, x, y) => {
 };
 
 const WhenExpressionEditorText = 12;
-const handleFocus = editor => {
+const handleFocus$1 = editor => {
   // TODO make change events functional,
   // when rendering, send focus changes to renderer worker
   invoke$3('Focus.setFocus', WhenExpressionEditorText);
@@ -3541,7 +3640,7 @@ const state$5 = {
     columnIndex: 0
   }
 };
-const getPosition$1 = () => {
+const getPosition$2 = () => {
   return state$5.position;
 };
 
@@ -3680,10 +3779,10 @@ const state$4 = {
   y: 0,
   editor: undefined
 };
-const get$3 = () => {
+const get$4 = () => {
   return state$4;
 };
-const set$3 = (editor, timeout, x, y) => {
+const set$4 = (editor, timeout, x, y) => {
   state$4.editor = editor;
   state$4.timeout = timeout;
   state$4.x = x;
@@ -3709,7 +3808,7 @@ const onHoverIdle = async () => {
     x,
     y,
     editor
-  } = get$3();
+  } = get$4();
   at(editor, x, y);
   await showHover$1();
 };
@@ -3720,12 +3819,12 @@ const handleMouseMove = (editor, x, y) => {
   if (!editor.hoverEnabled) {
     return editor;
   }
-  const oldState = get$3();
+  const oldState = get$4();
   if (oldState.timeout !== -1) {
     clearTimeout(oldState.timeout);
   }
   const timeout = setTimeout(onHoverIdle, hoverDelay);
-  set$3(editor, timeout, x, y);
+  set$4(editor, timeout, x, y);
   return editor;
 };
 
@@ -3766,13 +3865,6 @@ const handleMouseMoveWithAltKey = async (editor, x, y) => {
     // const definitionRelativeY = definitionStartPosition.rowIndex - editor.minLineY
 
     const lineTokenMap = editor.lineCache[definitionStartPosition.rowIndex + 1];
-    console.log({
-      tokenMap: lineTokenMap
-    });
-    console.log({
-      lineCache: editor.lineCache,
-      rowIndex: definitionStartPosition.rowIndex
-    });
     if (!lineTokenMap) {
       return editor;
     }
@@ -3780,9 +3872,6 @@ const handleMouseMoveWithAltKey = async (editor, x, y) => {
     if (tokenIndex === -1) {
       return editor;
     }
-    console.log({
-      token: tokenIndex
-    });
     // .tokens
     // await RendererProcess.invoke(
     //   /* Viewlet.invoke */ 'Viewlet.send',
@@ -3791,9 +3880,6 @@ const handleMouseMoveWithAltKey = async (editor, x, y) => {
     //   /* relativeY */ definitionRelativeY,
     //   /* tokenIndex */ tokenIndex,
     // )
-    console.log({
-      definition
-    });
     return editor;
   } catch (error) {
     // @ts-ignore
@@ -3874,7 +3960,7 @@ const setPosition = position => {
 const getEditor$1 = () => {
   return state$3.currentEditor;
 };
-const getPosition = () => {
+const getPosition$1 = () => {
   return state$3.position;
 };
 const hasListener = () => {
@@ -4119,7 +4205,7 @@ const getNewSelections$5 = (anchor, position) => {
 
 // @ts-ignore
 const editorMoveSelection = (editor, position) => {
-  const anchor = getPosition$1();
+  const anchor = getPosition$2();
   const newSelections = getNewSelections$5(anchor, position);
   // TODO if selection equals previous selection -> do nothing
   return scheduleSelections(editor, newSelections);
@@ -4406,7 +4492,7 @@ const getNewEditor$1 = (editor, position) => {
     const newMinLineY = position.rowIndex;
     const newMaxLineY = position.rowIndex + diff;
     const newDeltaY = position.rowIndex * rowHeight;
-    const anchor = getPosition$1();
+    const anchor = getPosition$2();
     const newSelections = new Uint32Array([position.rowIndex - 1, position.columnIndex, anchor.rowIndex, anchor.columnIndex]);
     return {
       ...editor,
@@ -4421,7 +4507,7 @@ const getNewEditor$1 = (editor, position) => {
     const newMinLineY = position.rowIndex - diff;
     const newMaxLineY = position.rowIndex;
     const newDeltaY = newMinLineY * rowHeight;
-    const anchor = getPosition$1();
+    const anchor = getPosition$2();
     const newSelections = new Uint32Array([anchor.rowIndex, anchor.columnIndex, position.rowIndex + 1, position.columnIndex]);
     return {
       ...editor,
@@ -4438,7 +4524,7 @@ const continueScrollingAndMovingSelection = async () => {
   if (!editor) {
     return;
   }
-  const position = getPosition();
+  const position = getPosition$1();
   if (position.rowIndex === 0) {
     return;
   }
@@ -4476,11 +4562,7 @@ const moveSelectionPx = (editor, x, y) => {
 };
 
 const create$2 = () => {
-  return Math.random();
-};
-
-const create$1 = () => {
-  const completionUid = create$2();
+  const completionUid = create$4();
   const completionWidget = {
     id: Completion,
     oldState: {
@@ -4786,7 +4868,7 @@ const filterCompletionItems = (completionItems, word) => {
 };
 
 const getEditor = editorUid => {
-  const instance = get$6(editorUid);
+  const instance = get$7(editorUid);
   if (!instance) {
     throw new Error(`editor ${editorUid} not found`);
   }
@@ -4953,15 +5035,6 @@ const advance = (state, word) => {
   };
 };
 
-const hasWidget = (widgets, id) => {
-  for (const widget of widgets) {
-    if (widget.id === id) {
-      return true;
-    }
-  }
-  return false;
-};
-
 const openCompletion = async editor => {
   const {
     widgets,
@@ -4970,16 +5043,16 @@ const openCompletion = async editor => {
   if (hasWidget(widgets, Completion)) {
     return editor;
   }
-  const completionWidget = create$1();
+  const completionWidget = create$2();
   const newWidgets = [...widgets, completionWidget];
   const newEditor = {
     ...editor,
     widgets: newWidgets
   };
-  set$6(uid, editor, newEditor);
+  set$7(uid, editor, newEditor);
   const newCompletionWidget = await loadContent$2(uid, completionWidget.newState);
-  const FocusEditorCompletions = 9;
-  await invoke$3('Focus.setAdditionalFocus', FocusEditorCompletions);
+  const FocusEditorCompletions = EditorCompletion;
+  await setAdditionalFocus(FocusEditorCompletions);
   const latestEditor = getEditor(uid);
   if (!latestEditor.widgets.includes(completionWidget)) {
     return editor;
@@ -4995,125 +5068,380 @@ const openCompletion = async editor => {
   };
 };
 
-const FindWidget = 'FindWidget';
-const openFind = async state => {
-  await invoke$3('Viewlet.openWidget', FindWidget);
-  return state;
-};
-
-const organizeImports = async editor => {
-  // TODO ask extension host worker directly
-  const edits = await invoke$3('ExtensionHostOrganizeImports.organizeImports', editor);
-  console.log({
-    edits
-  });
-  return applyDocumentEdits(editor, edits);
+const create$1 = () => {
+  const uid = create$4();
+  const widget = {
+    id: Find,
+    oldState: {
+      value: '',
+      ariaAnnouncement: '',
+      matches: new Uint32Array(),
+      matchIndex: -1,
+      matchCount: 0,
+      uid,
+      replaceExpanded: false,
+      useRegularExpression: false,
+      matchCase: false,
+      matchWholeWord: false,
+      replacement: '',
+      editorUid: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      focused: false
+    },
+    newState: {
+      value: '',
+      ariaAnnouncement: '',
+      matches: new Uint32Array(),
+      matchIndex: -1,
+      matchCount: 0,
+      uid,
+      replaceExpanded: false,
+      useRegularExpression: false,
+      matchCase: false,
+      matchWholeWord: false,
+      replacement: '',
+      editorUid: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      focused: true
+    }
+  };
+  return widget;
 };
 
-// @ts-ignore
+// copied from https://github.com/microsoft/vscode/tree/main/src/vs/base/common/strings.ts by Microsoft (License MIT)
 
-// @ts-ignore
-const pasteText = (editor, text) => {
-  const insertedLines = splitLines$2(text);
-  const changes = editorReplaceSelections(editor, insertedLines, EditorPasteText);
-  return scheduleDocumentAndCursorsSelections(editor, changes);
+const RE_ESCAPE = /[\\\{\}\*\+\?\|\^\$\.\[\]\(\)]/g;
+const escapeRegExpCharacters = value => {
+  return value.replaceAll(RE_ESCAPE, '\\$&');
 };
 
-const paste = async editor => {
-  const text = await invoke$3('ClipBoard.readText');
-  string(text);
-  return pasteText(editor, text);
+const regexFlags = 'gi';
+const getSearchRegex = searchString => {
+  const escaped = escapeRegExpCharacters(searchString);
+  return new RegExp(escaped, regexFlags);
 };
 
-const getErrorMessage$1 = error => {
-  if (!error) {
-    return `Error: ${error}`;
-  }
-  let message = error.message;
-  while (error.cause) {
-    error = error.cause;
-    message += `: ${error}`;
-  }
-  return message;
-};
-const prepareErrorMessageWithCodeFrame = error => {
-  if (!error) {
-    return {
-      message: error,
-      stack: undefined,
-      codeFrame: undefined,
-      type: 'Error'
-    };
-  }
-  const message = getErrorMessage$1(error);
-  if (error.codeFrame) {
-    return {
-      message,
-      stack: error.stack,
-      codeFrame: error.codeFrame,
-      type: error.constructor.name
-    };
+const findRegexMatches = (lines, regex) => {
+  const {
+    length
+  } = lines;
+  const matches = [];
+  for (let i = 0; i < length; i++) {
+    const line = lines[i];
+    let lastMatch;
+    do {
+      lastMatch = regex.exec(line);
+      if (!lastMatch) {
+        break;
+      }
+      matches.push(i, lastMatch.index);
+    } while (true);
   }
-  return {
-    message,
-    stack: error.originalStack,
-    codeFrame: error.originalCodeFrame,
-    category: error.category,
-    stderr: error.stderr
-  };
+  return new Uint32Array(matches);
 };
-const RE_PATH_1 = /\((.*):(\d+):(\d+)\)$/;
-const RE_PATH_2 = /at (.*):(\d+):(\d+)$/;
 
-/**
- *
- * @param {readonly string[]} lines
- * @returns
- */
-const getFile = lines => {
-  for (const line of lines) {
-    if (RE_PATH_1.test(line) || RE_PATH_2.test(line)) {
-      return line;
-    }
+const findMatchesCaseInsensitive = (lines, searchString) => {
+  if (searchString.length === 0) {
+    return new Uint32Array([]);
   }
-  return '';
+  const regex = getSearchRegex(searchString);
+  return findRegexMatches(lines, regex);
 };
-const prepareErrorMessageWithoutCodeFrame = async error => {
-  try {
-    const lines = splitLines$2(error.stack);
-    const file = getFile(lines);
-    let match = file.match(RE_PATH_1);
-    if (!match) {
-      match = file.match(RE_PATH_2);
-    }
-    if (!match) {
-      return error;
-    }
-    const relevantStack = joinLines$2(lines.slice(1));
-    const message = getErrorMessage$1(error);
-    return {
-      message,
-      stack: relevantStack,
-      type: error.constructor.name
-    };
-  } catch (otherError) {
-    console.warn('ErrorHandling Error');
-    console.warn(otherError);
-    return error;
-  }
+
+const getMatchCount = matches => {
+  return matches.length / 2;
 };
-const prepare = async error => {
-  if (error && error.message && error.codeFrame) {
-    return prepareErrorMessageWithCodeFrame(error);
-  }
-  if (error && error.stack) {
-    return prepareErrorMessageWithoutCodeFrame(error);
-  }
-  return error;
+
+const getPosition = editor => {
+  const width = 300;
+  const height = 30;
+  const paddingTop = 10;
+  const paddingRight = 20;
+  const x = editor.x + editor.width - width - paddingRight;
+  const y = editor.y + paddingTop;
+  return {
+    y,
+    x,
+    width,
+    height
+  };
 };
-const print = error => {
-  if (error && error.type && error.message && error.codeFrame) {
-    return `${error.type}: ${error.message}\n\n${error.codeFrame}\n\n${error.stack}`;
+const loadContent$1 = editorId => {
+  const editor = getEditor(editorId);
+  const {
+    selections,
+    lines
+  } = editor;
+  const startRowIndex = selections[0];
+  const startColumnIndex = selections[1];
+  const endColumnIndex = selections[3];
+  const line = lines[startRowIndex];
+  const value = line.slice(startColumnIndex, endColumnIndex);
+  const matches = findMatchesCaseInsensitive(lines, value);
+  const matchCount = getMatchCount(matches);
+  return {
+    value,
+    matches,
+    matchIndex: 0,
+    matchCount
+  };
+};
+const refresh = (state, value = state.value) => {
+  // TODO get focused editor
+  const {
+    editorUid
+  } = state;
+  // highlight locations that match value
+  const editor = getEditor(editorUid);
+  const {
+    lines
+  } = editor;
+  const matches = findMatchesCaseInsensitive(lines, value);
+  const matchCount = getMatchCount(matches);
+  return {
+    ...state,
+    matches,
+    matchIndex: 0,
+    matchCount,
+    value
+  };
+};
+const handleInput = (state, value) => {
+  return refresh(state, value);
+};
+const handleFocus = async state => {
+  const FindWidget = 16;
+  await invoke$3('Focus.setFocus', FindWidget);
+  return state;
+};
+const handleBlur = async state => {
+  const Empty = 0;
+  await invoke$3('Focus.setFocus', Empty);
+  return state;
+};
+const toggleReplace = state => {
+  const newExpanded = !state.replaceExpanded;
+  const collapsedHeight = 30;
+  const expandedHeight = 60;
+  const newHeight = newExpanded ? expandedHeight : collapsedHeight;
+  return {
+    ...state,
+    replaceExpanded: !state.replaceExpanded,
+    height: newHeight
+  };
+};
+
+// TODO this function should be synchronous
+const focusIndex$1 = async (state, index) => {
+  const {
+    value,
+    matches,
+    matchIndex
+  } = state;
+  if (index === matchIndex) {
+    return state;
+  }
+  // TODO find next match and highlight it
+  const matchRowIndex = matches[index * 2];
+  const matchColumnIndex = matches[index * 2 + 1];
+  // @ts-ignore
+  const newSelections = new Uint32Array([matchRowIndex, matchColumnIndex, matchRowIndex, matchColumnIndex + value.length]);
+  // TODO set selections synchronously and render input match index,
+  // input value and new selections at the same time
+  // TODO
+  await invoke$3('Editor.setSelections', newSelections);
+  return {
+    ...state,
+    matchIndex: index
+  };
+};
+const focusFirst$1 = state => {
+  return focusIndex$1(state, 0);
+};
+const focusLast = state => {
+  const {
+    matchCount
+  } = state;
+  return focusIndex$1(state, matchCount - 1);
+};
+const focusNext$1 = state => {
+  const {
+    matchIndex,
+    matchCount
+  } = state;
+  if (matchIndex === matchCount - 1) {
+    return focusFirst$1(state);
+  }
+  return focusIndex$1(state, matchIndex + 1);
+};
+const focusPrevious$1 = state => {
+  const {
+    matchIndex
+  } = state;
+  if (matchIndex === 0) {
+    return focusLast(state);
+  }
+  return focusIndex$1(state, matchIndex - 1);
+};
+const close$1 = async state => {
+  // TODO
+  // await Viewlet.closeWidget(uid)
+  return {
+    ...state,
+    disposed: true
+  };
+};
+
+const openFind2 = async editor => {
+  const newStateGenerator = async state => {
+    const {
+      value,
+      matches,
+      matchCount,
+      matchIndex
+    } = await loadContent$1(editor.uid);
+    const {
+      x,
+      y,
+      width,
+      height
+    } = getPosition(editor);
+    const latestState = {
+      ...state,
+      value,
+      matches,
+      matchCount,
+      matchIndex,
+      x,
+      y,
+      width,
+      height
+    };
+    return latestState;
+  };
+  return addWidgetToEditor(Find, FindWidget, editor, create$1, newStateGenerator);
+};
+
+const openFind = async state => {
+  return openFind2(state);
+};
+
+const organizeImports = async editor => {
+  // TODO ask extension host worker directly
+  const edits = await invoke$3('ExtensionHostOrganizeImports.organizeImports', editor);
+  return applyDocumentEdits(editor, edits);
+};
+
+// @ts-ignore
+
+// @ts-ignore
+const pasteText = (editor, text) => {
+  const insertedLines = splitLines$2(text);
+  const changes = editorReplaceSelections(editor, insertedLines, EditorPasteText);
+  return scheduleDocumentAndCursorsSelections(editor, changes);
+};
+
+const paste = async editor => {
+  const text = await invoke$3('ClipBoard.readText');
+  string(text);
+  return pasteText(editor, text);
+};
+
+const getErrorMessage$1 = error => {
+  if (!error) {
+    return `Error: ${error}`;
+  }
+  let message = error.message;
+  while (error.cause) {
+    error = error.cause;
+    message += `: ${error}`;
+  }
+  return message;
+};
+const prepareErrorMessageWithCodeFrame = error => {
+  if (!error) {
+    return {
+      message: error,
+      stack: undefined,
+      codeFrame: undefined,
+      type: 'Error'
+    };
+  }
+  const message = getErrorMessage$1(error);
+  if (error.codeFrame) {
+    return {
+      message,
+      stack: error.stack,
+      codeFrame: error.codeFrame,
+      type: error.constructor.name
+    };
+  }
+  return {
+    message,
+    stack: error.originalStack,
+    codeFrame: error.originalCodeFrame,
+    category: error.category,
+    stderr: error.stderr
+  };
+};
+const RE_PATH_1 = /\((.*):(\d+):(\d+)\)$/;
+const RE_PATH_2 = /at (.*):(\d+):(\d+)$/;
+
+/**
+ *
+ * @param {readonly string[]} lines
+ * @returns
+ */
+const getFile = lines => {
+  for (const line of lines) {
+    if (RE_PATH_1.test(line) || RE_PATH_2.test(line)) {
+      return line;
+    }
+  }
+  return '';
+};
+const prepareErrorMessageWithoutCodeFrame = async error => {
+  try {
+    const lines = splitLines$2(error.stack);
+    const file = getFile(lines);
+    let match = file.match(RE_PATH_1);
+    if (!match) {
+      match = file.match(RE_PATH_2);
+    }
+    if (!match) {
+      return error;
+    }
+    const relevantStack = joinLines$2(lines.slice(1));
+    const message = getErrorMessage$1(error);
+    return {
+      message,
+      stack: relevantStack,
+      type: error.constructor.name
+    };
+  } catch (otherError) {
+    console.warn('ErrorHandling Error');
+    console.warn(otherError);
+    return error;
+  }
+};
+const prepare = async error => {
+  if (error && error.message && error.codeFrame) {
+    return prepareErrorMessageWithCodeFrame(error);
+  }
+  if (error && error.stack) {
+    return prepareErrorMessageWithoutCodeFrame(error);
+  }
+  return error;
+};
+const print = error => {
+  if (error && error.type && error.message && error.codeFrame) {
+    return `${error.type}: ${error.message}\n\n${error.codeFrame}\n\n${error.stack}`;
   }
   if (error && error.message && error.codeFrame) {
     return `${error.message}\n\n${error.codeFrame}\n\n${error.stack}`;
@@ -5740,10 +6068,10 @@ const state$1 = {
 const has = languageId => {
   return languageId in state$1.tokenizers;
 };
-const set$2 = (languageId, tokenizer) => {
+const set$3 = (languageId, tokenizer) => {
   state$1.tokenizers[languageId] = tokenizer;
 };
-const get$2 = languageId => {
+const get$3 = languageId => {
   return state$1.tokenizers[languageId];
 };
 const isPending = languageId => {
@@ -5764,10 +6092,10 @@ const {
 } = createRpc(SyntaxHighlightingWorker);
 
 const tokenMaps = Object.create(null);
-const set$1 = (languageId, tokenMap) => {
+const set$2 = (languageId, tokenMap) => {
   tokenMaps[languageId] = tokenMap;
 };
-const get$1 = languageId => {
+const get$2 = languageId => {
   return tokenMaps[languageId] || {};
 };
 
@@ -5778,7 +6106,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
   }
   if (getEnabled$1()) {
     const tokenMap = await invoke$1('Tokenizer.load', languageId, tokenizePath);
-    set$1(languageId, tokenMap);
+    set$2(languageId, tokenMap);
     return;
   }
   try {
@@ -5794,8 +6122,8 @@ const loadTokenizer = async (languageId, tokenizePath) => {
       console.warn(`tokenizer.TokenMap should be an object in "${tokenizePath}"`);
       return;
     }
-    set$1(languageId, tokenizer.TokenMap);
-    set$2(languageId, tokenizer);
+    set$2(languageId, tokenizer.TokenMap);
+    set$3(languageId, tokenizer);
   } catch (error) {
     // TODO better error handling
     console.error(error);
@@ -5804,7 +6132,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
 };
 const getTokenizer = languageId => {
   if (has(languageId)) {
-    return get$2(languageId);
+    return get$3(languageId);
   }
   if (isPending(languageId)) {
     return TokenizePlainText;
@@ -5813,10 +6141,10 @@ const getTokenizer = languageId => {
 };
 
 const tokenizers = Object.create(null);
-const set = (id, value) => {
+const set$1 = (id, value) => {
   tokenizers[id] = value;
 };
-const get = id => {
+const get$1 = id => {
   return tokenizers[id] || TokenizePlainText;
 };
 
@@ -5833,7 +6161,7 @@ const setLanguageId = async (editor, languageId, tokenizePath) => {
   await loadTokenizer(languageId, tokenizePath);
   const tokenizer = getTokenizer(languageId);
   const newTokenizerId = tokenizerId + 1;
-  set(newTokenizerId, tokenizer);
+  set$1(newTokenizerId, tokenizer);
   const latest = getEditor(editor.uid);
   if (!latest) {
     return editor;
@@ -6497,9 +6825,6 @@ const typeWithAutoClosing = async (editor, text) => {
     case DoubleQuote:
     case SingleQuote:
     case BackTick:
-      console.log({
-        auto: editor
-      });
       if (isAutoClosingQuotesEnabled) {
         return typeWithAutoClosingQuote(editor, text);
       }
@@ -6682,7 +7007,7 @@ const editorUnindent = editor => {
 // editor.lines //?
 
 const isCompletionDetailWidget = widget => {
-  return widget.id === CompletionDetail;
+  return widget.id === CompletionDetail$1;
 };
 const closeDetails = editor => {
   const {
@@ -6718,7 +7043,7 @@ const getCompletionState = editor => {
 const isCompletion$1 = widget => {
   return widget.id === Completion;
 };
-const focusIndex$1 = (editor, index) => {
+const focusIndex = (editor, index) => {
   const child = getCompletionState(editor);
   if (index === -1) {
     return editor;
@@ -6741,33 +7066,33 @@ const focusIndex$1 = (editor, index) => {
   };
 };
 
-const focusFirst$1 = editor => {
+const focusFirst = editor => {
   const firstIndex = 0;
-  return focusIndex$1(editor, firstIndex);
+  return focusIndex(editor, firstIndex);
 };
 
-const focusNext$1 = editor => {
+const focusNext = editor => {
   const child = getCompletionState(editor);
   if (!child) {
     return editor;
   }
   const nextIndex = child.focusedIndex + 1;
-  return focusIndex$1(editor, nextIndex);
+  return focusIndex(editor, nextIndex);
 };
 
-const focusPrevious$1 = editor => {
+const focusPrevious = editor => {
   const child = getCompletionState(editor);
   if (!child) {
     return editor;
   }
   const previousIndex = child.focusedIndex - 1;
-  return focusIndex$1(editor, previousIndex);
+  return focusIndex(editor, previousIndex);
 };
 
 const create = () => {
-  const completionUid = create$2();
+  const completionUid = create$4();
   const completionWidget = {
-    id: CompletionDetail,
+    id: CompletionDetail$1,
     oldState: {
       content: '',
       uid: completionUid,
@@ -6788,10 +7113,6 @@ const create = () => {
   return completionWidget;
 };
 
-const getCompletionDetailState = editor => {
-  return getWidgetState(editor, CompletionDetail);
-};
-
 const getCompletionDetailBounds = (completionBounds, borderSize) => {
   return {
     x: completionBounds.x + completionBounds.width - borderSize,
@@ -6806,25 +7127,17 @@ const openDetails = editor => {
   if (!child) {
     return editor;
   }
-  const detailState = getCompletionDetailState(editor);
-  if (detailState) {
-    return editor;
-  }
-  const widget = create();
-  const borderSize = 1;
-  const newestState = {
-    ...widget.newState,
-    content: 'abc',
-    ...getCompletionDetailBounds(child, borderSize)
-  };
-  const latestWidgets = [...editor.widgets, {
-    ...widget,
-    newState: newestState
-  }];
-  return {
-    ...editor,
-    widgets: latestWidgets
+  // TODO avoid closure
+  const newStateGenerator = state => {
+    const borderSize = 1;
+    const newestState = {
+      ...state,
+      content: 'abc',
+      ...getCompletionDetailBounds(child, borderSize)
+    };
+    return newestState;
   };
+  return addWidgetToEditor(CompletionDetail$1, CompletionDetail, editor, create, newStateGenerator);
 };
 
 const getEdits = async (editor, completionItem) => {
@@ -6904,6 +7217,10 @@ const selectCurrent = editor => {
   return selectIndex(editor, focusedIndex);
 };
 
+const getCompletionDetailState = editor => {
+  return getWidgetState(editor, CompletionDetail$1);
+};
+
 const toggleDetails = editor => {
   const child = getCompletionDetailState(editor);
   if (!child) {
@@ -6934,7 +7251,7 @@ const getHover = async (editor, offset) => {
 
 let _ipc;
 const listen$5 = async () => {
-  const ipc = await create$4({
+  const ipc = await create$6({
     method: RendererProcess
   });
   handleIpc(ipc);
@@ -7083,7 +7400,7 @@ const getHoverPositionXy = (editor, rowIndex, wordStart, documentationHeight) =>
 };
 const getEditorHoverInfo = async (editorUid, position) => {
   number$1(editorUid);
-  const instance = get$6(editorUid);
+  const instance = get$7(editorUid);
   const editor = instance.newState;
   const {
     selections
@@ -7122,7 +7439,7 @@ const getEditorHoverInfo = async (editorUid, position) => {
   };
 };
 
-const loadContent$1 = async (editorUid, state, position) => {
+const loadContent = async (editorUid, state, position) => {
   const hoverInfo = await getEditorHoverInfo(editorUid, position);
   if (!hoverInfo) {
     return state;
@@ -7258,7 +7575,7 @@ const renderHoverDom = {
     return [/* method */'Viewlet.setDom2', dom];
   }
 };
-const renderBounds$2 = {
+const renderBounds$4 = {
   isEqual(oldState, newState) {
     return oldState.x === newState.x && oldState.y === newState.y && oldState.resizedWidth === newState.resizedWidth;
   },
@@ -7276,10 +7593,10 @@ const renderBounds$2 = {
     return [SetBounds, x, y, resizedWidth, height];
   }
 };
-const render$5 = [renderHoverDom, renderBounds$2];
+const render$9 = [renderHoverDom, renderBounds$4];
 const renderHover = async (oldState, newState) => {
   const commands = [];
-  for (const item of render$5) {
+  for (const item of render$9) {
     if (!item.isEqual(oldState, newState)) {
       commands.push(item.apply(oldState, newState));
     }
@@ -7287,147 +7604,6 @@ const renderHover = async (oldState, newState) => {
   return commands;
 };
 
-// copied from https://github.com/microsoft/vscode/tree/main/src/vs/base/common/strings.ts by Microsoft (License MIT)
-
-const RE_ESCAPE = /[\\\{\}\*\+\?\|\^\$\.\[\]\(\)]/g;
-const escapeRegExpCharacters = value => {
-  return value.replaceAll(RE_ESCAPE, '\\$&');
-};
-
-const regexFlags = 'gi';
-const getSearchRegex = searchString => {
-  const escaped = escapeRegExpCharacters(searchString);
-  return new RegExp(escaped, regexFlags);
-};
-
-const findRegexMatches = (lines, regex) => {
-  const {
-    length
-  } = lines;
-  const matches = [];
-  for (let i = 0; i < length; i++) {
-    const line = lines[i];
-    let lastMatch;
-    do {
-      lastMatch = regex.exec(line);
-      if (!lastMatch) {
-        break;
-      }
-      matches.push(i, lastMatch.index);
-    } while (true);
-  }
-  return new Uint32Array(matches);
-};
-
-const findMatchesCaseInsensitive = (lines, searchString) => {
-  if (searchString.length === 0) {
-    return new Uint32Array([]);
-  }
-  const regex = getSearchRegex(searchString);
-  return findRegexMatches(lines, regex);
-};
-
-const getMatchCount = matches => {
-  return matches.length / 2;
-};
-
-const loadContent = editorId => {
-  const editor = getEditor(editorId);
-  const {
-    selections,
-    lines
-  } = editor;
-  const startRowIndex = selections[0];
-  const startColumnIndex = selections[1];
-  const endColumnIndex = selections[3];
-  const line = lines[startRowIndex];
-  const value = line.slice(startColumnIndex, endColumnIndex);
-  const matches = findMatchesCaseInsensitive(lines, value);
-  const matchCount = getMatchCount(matches);
-  return {
-    value,
-    matches,
-    matchIndex: 0,
-    matchCount
-  };
-};
-const refresh = (state, value = state.value) => {
-  // TODO get focused editor
-  const {
-    editorUid
-  } = state;
-  // highlight locations that match value
-  const editor = getEditor(editorUid);
-  const {
-    lines
-  } = editor;
-  const matches = findMatchesCaseInsensitive(lines, value);
-  const matchCount = getMatchCount(matches);
-  return {
-    ...state,
-    matches,
-    matchIndex: 0,
-    matchCount,
-    value
-  };
-};
-const handleInput = (state, value) => {
-  return refresh(state, value);
-};
-
-// TODO this function should be synchronous
-const focusIndex = async (state, index) => {
-  const {
-    value,
-    matches,
-    matchIndex
-  } = state;
-  if (index === matchIndex) {
-    return state;
-  }
-  // TODO find next match and highlight it
-  const matchRowIndex = matches[index * 2];
-  const matchColumnIndex = matches[index * 2 + 1];
-  // @ts-ignore
-  const newSelections = new Uint32Array([matchRowIndex, matchColumnIndex, matchRowIndex, matchColumnIndex + value.length]);
-  // TODO set selections synchronously and render input match index,
-  // input value and new selections at the same time
-  // TODO
-  await invoke$3('Editor.setSelections', newSelections);
-  return {
-    ...state,
-    matchIndex: index
-  };
-};
-const focusFirst = state => {
-  return focusIndex(state, 0);
-};
-const focusLast = state => {
-  const {
-    matchCount
-  } = state;
-  return focusIndex(state, matchCount - 1);
-};
-const focusNext = state => {
-  const {
-    matchIndex,
-    matchCount
-  } = state;
-  if (matchIndex === matchCount - 1) {
-    return focusFirst(state);
-  }
-  return focusIndex(state, matchIndex + 1);
-};
-const focusPrevious = state => {
-  const {
-    matchIndex
-  } = state;
-  if (matchIndex === 0) {
-    return focusLast(state);
-  }
-  return focusIndex(state, matchIndex - 1);
-};
-
 const pending = Object.create(null);
 const loaded = Object.create(null);
 const setPending = (id, promise) => {
@@ -7747,7 +7923,7 @@ const getTokensViewport = (editor, startLineIndex, endLineIndex) => {
     lines,
     languageId
   } = editor;
-  const tokenizer = get(tokenizerId);
+  const tokenizer = get$1(tokenizerId);
   const {
     hasArrayReturn,
     tokenizeLine,
@@ -8011,7 +8187,7 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
     decorations,
     languageId
   } = editor;
-  const tokenMap = get$1(languageId);
+  const tokenMap = get$2(languageId);
   let offset = minLineOffset;
   const tabSize = 2;
   for (let i = minLineY; i < maxLineY; i++) {
@@ -8031,7 +8207,6 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
   };
 };
 const getVisible = async (editor, syncIncremental) => {
-  // console.log({ editor })
   // TODO should separate rendering from business logic somehow
   // currently hard to test because need to mock editor height, top, left,
   // invalidStartIndex, lineCache, etc. just for testing editorType
@@ -8197,961 +8372,1228 @@ const getSelectionsVirtualDom = selections => {
   return dom;
 };
 
-const None = 'none';
-const Option = 'option';
-
-const getFileIconVirtualDom = icon => {
-  return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None,
-    childCount: 0
-  };
+const map = Object.create(null);
+const set = (id, widget) => {
+  map[id] = widget;
 };
-
-const getIconDom = (fileIcon, symbolName) => {
-  if (fileIcon) {
-    return getFileIconVirtualDom(fileIcon);
-  }
-  return {
-    type: Div,
-    className: `${ColoredMaskIcon} ${symbolName}`,
-    childCount: 0
-  };
+const get = id => {
+  return map[id];
 };
 
-const label1 = {
-  type: Div,
-  className: Label,
-  childCount: 1
-};
-const completionHighlight = {
-  type: Span,
-  className: EditorCompletionItemHighlight,
-  childCount: 1
-};
-const getHighlightedLabelDom = (label, highlights) => {
-  if (highlights.length === 0) {
-    return [label1, text(label)];
+const addWidget$1 = widget => {
+  const module = get(widget.id);
+  if (!module) {
+    throw new Error('unsupported widget');
   }
-  const dom = [];
-  const labelDom = {
-    type: Div,
-    className: Label,
-    childCount: 0
-  };
-  dom.push(labelDom);
-  let position = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const highlightStart = highlights[i];
-    const highlightEnd = highlights[i + 1];
-    if (position < highlightStart) {
-      const beforeText = label.slice(position, highlightStart);
-      labelDom.childCount++;
-      dom.push(text(beforeText));
-    }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    labelDom.childCount++;
-    dom.push(completionHighlight, text(highlightText));
-    position = highlightEnd;
+  return module.add(widget);
+};
+const renderWidget = widget => {
+  const module = get(widget.id);
+  if (!module) {
+    throw new Error(`unsupported widget`);
   }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    labelDom.childCount++;
-    dom.push(text(afterText));
+  return module.render(widget);
+};
+const removeWidget$1 = widget => {
+  const module = get(widget.id);
+  if (!module) {
+    throw new Error(`unsupported widget`);
   }
-  return dom;
+  return module.remove(widget);
 };
 
-const getCompletionItemVirtualDom = visibleItem => {
-  const {
-    top,
-    label,
-    symbolName,
-    highlights,
-    focused,
-    deprecated,
-    fileIcon
-  } = visibleItem;
-  let className = EditorCompletionItem;
-  if (focused) {
-    className += ' ' + EditorCompletionItemFocused;
-  }
-  if (deprecated) {
-    className += ' ' + EditorCompletionItemDeprecated;
+const renderLines = {
+  isEqual(oldState, newState) {
+    return oldState.lines === newState.lines && oldState.tokenizerId === newState.tokenizerId && oldState.minLineY === newState.minLineY && oldState.decorations === newState.decorations && oldState.embeds === newState.embeds && oldState.deltaX === newState.deltaX && oldState.width === newState.width;
+  },
+  async apply(oldState, newState) {
+    const incrementalEdits = await getIncrementalEdits(oldState, newState);
+    if (incrementalEdits) {
+      return [/* method */'setIncrementalEdits', /* incrementalEdits */incrementalEdits];
+    }
+    const syncIncremental = getEnabled();
+    const {
+      textInfos,
+      differences
+    } = await getVisible(newState, syncIncremental);
+    newState.differences = differences;
+    const dom = getEditorRowsVirtualDom(textInfos, differences);
+    return [/* method */'setText', dom];
   }
-  return [{
-    type: Div,
-    role: Option,
-    className,
-    top,
-    childCount: 2
-  }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
 };
-
-const getCompletionItemsVirtualDom = visibleItems => {
-  if (visibleItems.length === 0) {
-    return [{
-      type: Div,
-      childCount: 1
-    }, text(noResults())];
+const renderSelections = {
+  isEqual(oldState, newState) {
+    return oldState.selections === newState.selections && oldState.focused === newState.focused && oldState.minLineY === newState.minLineY && oldState.deltaX === newState.deltaX;
+  },
+  apply(oldState, newState) {
+    const {
+      cursorInfos,
+      selectionInfos
+    } = getVisible$1(newState);
+    const cursorsDom = getCursorsVirtualDom(cursorInfos);
+    const selectionsDom = getSelectionsVirtualDom(selectionInfos);
+    return [/* method */'setSelections', cursorsDom, selectionsDom];
   }
-  const root = {
-    type: Div,
-    childCount: visibleItems.length
-  };
-  const dom = [root, ...visibleItems.flatMap(getCompletionItemVirtualDom)];
-  return dom;
 };
-
-const Property = 1;
-const Value = 2;
-const Function = 3;
-const Variable = 4;
-const Keyword = 5;
-const Folder = 6;
-const File = 7;
-const Field = 8;
-
-const SymbolProperty = 'SymbolProperty';
-const SymbolValue = 'SymbolValue';
-const SymbolFunction = 'SymbolFunction';
-const SymbolVariable = 'SymbolVariable';
-const SymbolKeyword = 'SymbolKeyword';
-const SymbolDefault = 'SymbolDefault';
-const SymbolField = 'SymbolField';
-const SymbolNone = '';
-
-const getSymbolName = kind => {
-  switch (kind) {
-    case Property:
-      return SymbolProperty;
-    case Value:
-      return SymbolValue;
-    case Function:
-      return SymbolFunction;
-    case Variable:
-      return SymbolVariable;
-    case Keyword:
-      return SymbolKeyword;
-    case Field:
-      return SymbolField;
-    case File:
-      return SymbolNone;
-    default:
-      return SymbolDefault;
-  }
-};
-
-// TODO
-const getCompletionFileIcon = kind => {
-  switch (kind) {
-    case File:
-      return EmptyString;
-    case Folder:
-      return EmptyString;
-    default:
-      return EmptyString;
-  }
-};
-
-const getHighlights = item => {
-  const {
-    matches
-  } = item;
-  return matches.slice(1);
-};
-
-const getLabel = item => {
-  return item.label;
-};
-const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
-  return {
-    label: getLabel(item),
-    symbolName: getSymbolName(item.kind),
-    top: i * itemHeight,
-    highlights: getHighlights(item),
-    focused: i === focusedIndex,
-    deprecated: item.flags & Deprecated,
-    fileIcon: getCompletionFileIcon(item.kind)
-  };
-};
-
-const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
-  const visibleItems = [];
-  for (let i = minLineY; i < maxLineY; i++) {
-    const filteredItem = filteredItems[i];
-    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
+const renderScrollBarY = {
+  isEqual(oldState, newState) {
+    return oldState.deltaY === newState.deltaY && oldState.scrollBarHeight === newState.scrollBarHeight;
+  },
+  apply(oldState, newState) {
+    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height, newState.scrollBarHeight);
+    const translate = `0 ${scrollBarY}px`;
+    const heightPx = `${newState.scrollBarHeight}px`;
+    return [/* method */'setScrollBar', translate, heightPx];
   }
-  return visibleItems;
 };
-
-const renderItems = {
+const renderScrollBarX = {
   isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
+    return oldState.longestLineWidth === newState.longestLineWidth && oldState.deltaX === newState.deltaX;
   },
   apply(oldState, newState) {
-    const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
-    const dom = getCompletionItemsVirtualDom(visibleItems);
-    return ['setDom', dom];
+    const scrollBarWidth = getScrollBarSize(newState.width, newState.longestLineWidth, newState.minimumSliderSize);
+    const scrollBarX = newState.deltaX / newState.longestLineWidth * newState.width;
+    return [/* method */'setScrollBarHorizontal', /* scrollBarX */scrollBarX, /* scrollBarWidth */scrollBarWidth, /* deltaX */newState.deltaX];
   }
 };
-const renderBounds$1 = {
+const renderFocus$1 = {
   isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.x === newState.x && oldState.y === newState.y;
+    return oldState.focused === newState.focused;
   },
   apply(oldState, newState) {
-    const {
-      x,
-      y,
-      width,
-      height
-    } = newState;
-    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+    // TODO avoid side effect
+    if (newState.focused) {
+      const FocusEditorText = 12;
+      invoke$3('Focus.setFocus', FocusEditorText);
+    }
+    return [/* method */'setFocused', newState.focused];
   }
 };
-const renderHeight = {
+const renderDecorations = {
   isEqual(oldState, newState) {
-    return oldState.items.length === newState.items.length;
+    return oldState.decorations === newState.decorations;
   },
   apply(oldState, newState) {
-    const {
-      itemHeight
-    } = newState;
-    const contentHeight = newState.items.length * itemHeight;
-    return [/* method */SetContentHeight, /* contentHeight */contentHeight];
+    const dom = getDiagnosticsVirtualDom(newState.decorations);
+    return ['setDecorationsDom', dom];
   }
 };
-const renderNegativeMargin = {
+const renderGutterInfo = {
   isEqual(oldState, newState) {
-    return oldState.deltaY === newState.deltaY;
+    return oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY;
   },
   apply(oldState, newState) {
-    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
+    const {
+      minLineY,
+      maxLineY,
+      lineNumbers
+    } = newState;
+    const gutterInfos = [];
+    if (lineNumbers) {
+      for (let i = minLineY; i < maxLineY; i++) {
+        gutterInfos.push(i + 1);
+      }
+    }
+    const dom = getEditorGutterVirtualDom(gutterInfos);
+    return ['renderGutter', dom];
   }
 };
-const renderScrollBar = {
+const renderWidgets = {
   isEqual(oldState, newState) {
-    return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length;
+    return oldState.widgets === newState.widgets;
   },
   apply(oldState, newState) {
-    const total = newState.items.length;
-    const contentHeight = total * newState.itemHeight;
-    const scrollBarHeight = getScrollBarSize(newState.height, contentHeight, newState.minimumSliderSize);
-    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
-    return [/* method */SetScrollBar, /* scrollBarY */scrollBarY, /* scrollBarHeight */scrollBarHeight];
-  }
+    const addedWidgets = [];
+    const changedWidgets = [];
+    const removedWidgets = [];
+    const oldWidgets = oldState.widgets || [];
+    const newWidgets = newState.widgets || [];
+    const oldWidgetMap = Object.create(null);
+    const newWidgetMap = Object.create(null);
+    for (const oldWidget of oldWidgets) {
+      oldWidgetMap[oldWidget.id] = oldWidget;
+    }
+    for (const newWidget of newWidgets) {
+      newWidgetMap[newWidget.id] = newWidget;
+    }
+    for (const oldWidget of oldWidgets) {
+      if (oldWidget.id in newWidgetMap) {
+        changedWidgets.push(newWidgetMap[oldWidget.id]);
+      } else {
+        removedWidgets.push(oldWidget);
+      }
+    }
+    for (const newWidget of newWidgets) {
+      if (newWidget.id in oldWidgetMap) ; else {
+        addedWidgets.push(newWidget);
+      }
+    }
+    const addCommands = [];
+    for (const addedWidget of addedWidgets) {
+      const childCommands = addWidget$1(addedWidget);
+      if (childCommands.length > 0) {
+        addCommands.push(...childCommands);
+      }
+    }
+    const changeCommands = [];
+    for (const changedWidget of changedWidgets) {
+      const childCommands = renderWidget(changedWidget);
+      if (childCommands.length > 0) {
+        changeCommands.push(...childCommands);
+      }
+    }
+    const removeCommands = [];
+    for (const removedWidget of removedWidgets) {
+      const childCommands = removeWidget$1(removedWidget);
+      if (childCommands.length > 0) {
+        removeCommands.push(...childCommands);
+      }
+    }
+    const allCommands = [...addCommands, ...changeCommands, ...removeCommands];
+    return allCommands;
+  },
+  multiple: true
 };
-const render$4 = [renderItems, renderBounds$1, renderHeight, renderNegativeMargin, renderScrollBar];
-const renderCompletion = (oldState, newState) => {
+const render$8 = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus$1, renderDecorations, renderGutterInfo, renderWidgets];
+const renderEditor = async id => {
+  const instance = get$7(id);
+  if (!instance) {
+    return [];
+  }
+  const {
+    oldState,
+    newState
+  } = instance;
   const commands = [];
-  for (const item of render$4) {
+  set$7(id, newState, newState);
+  for (const item of render$8) {
     if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
+      const result = await item.apply(oldState, newState);
+      // @ts-ignore
+      if (item.multiple) {
+        commands.push(...result);
+      } else if (result.length > 0) {
+        commands.push(result);
+      }
     }
   }
   return commands;
 };
 
-const render$3 = (oldState, newState) => {
-  const commands = renderCompletion(oldState, newState);
-  const wrappedCommands = [];
-  const uid = newState.uid;
-  for (const command of commands) {
-    wrappedCommands.push(['Viewlet.send', uid, ...command]);
-  }
-  return wrappedCommands;
+const keep = [
+// 'ColorPicker.handleSliderPointerDown',
+// 'ColorPicker.handleSliderPointerMove',
+// 'ColorPicker.loadContent',
+'Editor.create', 'Editor.getWordAt', 'Editor.getWordBefore', 'Editor.offsetAt', 'Editor.render',
+// 'ColorPicker.render',
+'Editor.getText', 'Editor.getSelections', 'Font.ensure', 'Hover.getHoverInfo', 'Hover.handleSashPointerDown', 'Hover.handleSashPointerMove', 'Hover.handleSashPointerUp', 'Hover.loadContent', 'Hover.render', 'Initialize.initialize'];
+
+const wrapWidgetCommand = (widgetId, fn) => {
+  const isWidget = widget => {
+    return widget.id === widgetId;
+  };
+  const wrapped = async (editor, ...args) => {
+    const childIndex = editor.widgets.findIndex(isWidget);
+    // TODO scroll up/down if necessary
+    const childWidget = editor.widgets[childIndex];
+    const newState = await fn(childWidget.newState, ...args);
+    const newWidget = {
+      ...childWidget,
+      oldState: childWidget.newState,
+      newState
+    };
+    const newWidgets = [...editor.widgets.slice(0, childIndex), newWidget, ...editor.widgets.slice(childIndex + 1)];
+    return {
+      ...editor,
+      widgets: newWidgets
+    };
+  };
+  return wrapped;
 };
-const add$1 = widget => {
-  const commands = render$3(widget.oldState, widget.newState);
-  const id = 'EditorCompletion';
-  // TODO how to generate a unique integer id
-  // that doesn't collide with ids created in renderer worker?
-  const uid = widget.newState.uid;
-  const allCommands = [];
-  allCommands.push(['Viewlet.create', id, uid]);
-  allCommands.push(...commands);
-  return allCommands;
+
+const widgetCommands = {
+  'ColorPicker.handleSliderPointerDown': ColorPicker$1,
+  'ColorPicker.handleSliderPointerMove': ColorPicker$1,
+  'FindWidget.focusNext': Find,
+  'FindWidget.focusPrevious': Find,
+  'FindWidget.close': Find,
+  'FindWidget.focusIndex': Find,
+  'FindWidget.focusFirst': Find,
+  'FindWidget.focusLast': Find,
+  'FindWidget.toggleReplace': Find,
+  'FindWidget.handleFocus': Find,
+  'FindWidget.handleBlur': Find,
+  'FindWidget.handleToggleReplaceFocus': Find
 };
-const remove$1 = widget => {
-  return [['Viewlet.send', widget.newState.uid, 'dispose']];
+
+// TODO wrap commands globally, not per editor
+// TODO only store editor state in editor worker, not in renderer worker also
+const wrapCommand = fn => async (editorUid, ...args) => {
+  const oldInstance = get$7(editorUid);
+  const newEditor = await fn(oldInstance.newState, ...args);
+  set$7(editorUid, oldInstance.newState, newEditor);
+  // TODO if possible, rendering should be sync
+  const commands = await renderEditor(editorUid);
+  newEditor.commands = commands;
+  return newEditor;
 };
-const handleEditorType = (editor, state) => {
-  const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const {
-    selections
-  } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const newMinLineY = 0;
-  const newMaxLineY = Math.min(items.length, 8);
-  const height = getListHeight(items.length, itemHeight, maxHeight);
-  const finalDeltaY = items.length * itemHeight - height;
-  return {
-    ...state,
-    items,
-    x: x$1,
-    y: y$1,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height,
-    finalDeltaY
-  };
-};
-const handleEditorDeleteLeft = (editor, state) => {
-  const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const {
-    selections
-  } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
-  if (!wordAtOffset) {
-    return undefined;
+const wrapCommands = commands => {
+  for (const [key, value] of Object.entries(commands)) {
+    if (keep.includes(key)) {
+      continue;
+    }
+    // TODO avoid wrapping functions twice
+    const innerWrappedWidgetId = widgetCommands[key];
+    const innerWrappedFn = innerWrappedWidgetId ? wrapWidgetCommand(innerWrappedWidgetId, value) : value;
+    commands[key] = wrapCommand(innerWrappedFn);
   }
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const newMaxLineY = Math.min(items.length, 8);
-  const height = getListHeight(items.length, itemHeight, maxHeight);
-  return {
-    ...state,
-    items,
-    x: x$1,
-    y: y$1,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height
-  };
 };
 
-const EditorCompletionWidget = {
-  __proto__: null,
-  add: add$1,
-  handleEditorDeleteLeft,
-  handleEditorType,
-  remove: remove$1,
-  render: render$3
+const commandMap = {
+  'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
+  'ColorPicker.handleSliderPointerMove': handleSliderPointerMove,
+  'ColorPicker.loadContent': loadContent$3,
+  'ColorPicker.render': renderColorPicker,
+  'Editor.addCursorAbove': addCursorAbove,
+  'Editor.addCursorBelow': addCursorBelow,
+  'Editor.applyEdit': applyEdit,
+  'Editor.braceCompletion': braceCompletion,
+  'Editor.cancelSelection': cancelSelection,
+  'Editor.closeCompletion': closeCompletion,
+  'Editor.compositionEnd': compositionEnd,
+  'Editor.compositionStart': compositionStart,
+  'Editor.compositionUpdate': compositionUpdate,
+  'Editor.contextMenu': handleContextMenu,
+  'Editor.copy': copy,
+  'Editor.copyLineDown': copyLineDown,
+  'Editor.copyLineUp': copyLineUp,
+  'Editor.create': createEditor,
+  'Editor.cursorCharacterLeft': cursorCharacterLeft,
+  'Editor.cursorCharacterRight': cursorCharacterRight,
+  'Editor.cursorDown': cursorDown,
+  'Editor.cursorEnd': cursorEnd,
+  'Editor.cursorHome': cursorHome,
+  'Editor.cursorLeft': cursorCharacterLeft,
+  'Editor.cursorRight': cursorCharacterRight,
+  'Editor.cursorSet': cursorSet,
+  'Editor.cursorUp': cursorUp,
+  'Editor.cursorWordLeft': cursorWordLeft,
+  'Editor.cursorWordPartLeft': cursorWordPartLeft,
+  'Editor.cursorWordPartRight': cursorWordPartRight,
+  'Editor.cursorWordRight': cursorWordRight,
+  'Editor.cut': cut,
+  'Editor.deleteAllLeft': deleteAllLeft,
+  'Editor.deleteAllRight': deleteAllRight,
+  'Editor.deleteCharacterLeft': deleteCharacterLeft,
+  'Editor.deleteCharacterRight': deleteCharacterRight,
+  'Editor.deleteHorizontalRight': editorDeleteHorizontalRight,
+  'Editor.deleteLeft': deleteCharacterLeft,
+  'Editor.deleteRight': deleteCharacterRight,
+  'Editor.deleteWordLeft': deleteWordLeft,
+  'Editor.deleteWordPartLeft': deleteWordPartLeft,
+  'Editor.deleteWordPartRight': deleteWordPartRight,
+  'Editor.deleteWordRight': deleteWordRight,
+  'Editor.findAllReferences': findAllReferences,
+  'Editor.format': format,
+  'Editor.getSelections': getSelections,
+  'Editor.getText': getText,
+  'Editor.getWordAt': getWordAt,
+  'Editor.getWordBefore': getWordBefore,
+  'Editor.goToDefinition': goToDefinition,
+  'Editor.goToTypeDefinition': goToTypeDefinition,
+  'Editor.handleBeforeInput': handleBeforeInput,
+  'Editor.handleBeforeInputFromContentEditable': handleBeforeInputFromContentEditable,
+  'Editor.handleBlur': handleBlur$1,
+  'Editor.handleContextMenu': handleContextMenu,
+  'Editor.handleDoubleClick': handleDoubleClick,
+  'Editor.handleFocus': handleFocus$1,
+  'Editor.handleMouseDown': handleMouseDown,
+  'Editor.handleMouseMove': handleMouseMove,
+  'Editor.handleMouseMoveWithAltKey': handleMouseMoveWithAltKey,
+  'Editor.handleNativeSelectionChange': editorHandleNativeSelectionChange,
+  'Editor.handlePointerCaptureLost': handlePointerCaptureLost,
+  'Editor.handleScrollBarClick': handleScrollBarPointerDown,
+  'Editor.handleScrollBarHorizontalMove': handleScrollBarHorizontalMove,
+  'Editor.handleScrollBarHorizontalPointerDown': handleScrollBarHorizontalPointerDown,
+  'Editor.handleScrollBarMove': handleScrollBarMove,
+  'Editor.handleScrollBarPointerDown': handleScrollBarPointerDown,
+  'Editor.handleScrollBarVerticalMove': handleScrollBarVerticalPointerMove,
+  'Editor.handleScrollBarVerticalPointerDown': handleScrollBarPointerDown,
+  'Editor.handleScrollBarVerticalPointerMove': handleScrollBarVerticalPointerMove,
+  'Editor.handleSingleClick': handleSingleClick,
+  'Editor.handleTouchEnd': handleTouchEnd,
+  'Editor.handleTouchMove': handleTouchMove,
+  'Editor.handleTouchStart': handleTouchStart,
+  'Editor.handleTripleClick': handleTripleClick,
+  'Editor.indendLess': indentLess,
+  'Editor.indentMore': indentMore,
+  'Editor.insertLineBreak': insertLineBreak,
+  'Editor.moveLineDown': moveLineDown,
+  'Editor.moveLineUp': moveLineUp,
+  'Editor.moveRectangleSelection': moveRectangleSelection,
+  'Editor.moveRectangleSelectionPx': moveRectangleSelectionPx,
+  'Editor.moveSelection': editorMoveSelection,
+  'Editor.moveSelectionPx': moveSelectionPx,
+  'Editor.offsetAt': offsetAt,
+  'Editor.openColorPicker': openColorPicker,
+  'Editor.openCompletion': openCompletion,
+  'Editor.openFind': openFind,
+  'Editor.openFind2': openFind2,
+  'Editor.organizeImports': organizeImports,
+  'Editor.paste': paste,
+  'Editor.pasteText': pasteText,
+  'Editor.render': renderEditor,
+  'Editor.replaceRange': replaceRange,
+  'Editor.save': save,
+  'Editor.selectAll': selectAll,
+  'Editor.selectAllLeft': editorSelectAllLeft,
+  'Editor.selectAllOccurrences': selectAllOccurrences,
+  'Editor.selectAllRight': editorSelectAllRight,
+  'Editor.selectCharacterLeft': selectCharacterLeft,
+  'Editor.selectCharacterRight': selectCharacterRight,
+  'Editor.selectDown': selectDown,
+  'Editor.selectInsideString': selectInsideString,
+  'Editor.selectionGrow': selectionGrow,
+  'Editor.selectLine': selectLine,
+  'Editor.selectNextOccurrence': selectNextOccurrence,
+  'Editor.selectPreviousOccurrence': selectPreviousOccurrence,
+  'Editor.selectUp': selectUp,
+  'Editor.selectWord': selectWord,
+  'Editor.selectWordLeft': selectWordLeft,
+  'Editor.selectWordRight': selectWordRight,
+  'Editor.setDecorations': setDecorations,
+  'Editor.setDelta': setDelta,
+  'Editor.setDeltaY': setDeltaY,
+  'Editor.setLanguageId': setLanguageId,
+  'Editor.setSelections': setSelections,
+  'Editor.showHover': showHover,
+  'Editor.showSourceActions': showSourceActions,
+  'Editor.sortLinesAscending': sortLinesAscending,
+  'Editor.tabCompletion': tabCompletion,
+  'Editor.toggleBlockComment': toggleBlockComment,
+  'Editor.toggleComment': toggleComment,
+  'Editor.toggleLineComment': editorToggleLineComment,
+  'Editor.type': type,
+  'Editor.typeWithAutoClosing': typeWithAutoClosing,
+  'Editor.undo': undo,
+  'Editor.unIndent': editorUnindent,
+  'EditorCompletion.advance': advance,
+  'EditorCompletion.closeDetails': closeDetails,
+  'EditorCompletion.focusFirst': focusFirst,
+  'EditorCompletion.focusIndex': focusIndex,
+  'EditorCompletion.focusNext': focusNext,
+  'EditorCompletion.focusPrevious': focusPrevious,
+  'EditorCompletion.handleEditorBlur': handleEditorBlur,
+  'EditorCompletion.handleEditorClick': handleEditorClick,
+  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$1,
+  'EditorCompletion.handleEditorType': handleEditorType$1,
+  'EditorCompletion.loadContent': loadContent$2,
+  'EditorCompletion.openDetails': openDetails,
+  'EditorCompletion.selectCurrent': selectCurrent,
+  'EditorCompletion.selectIndex': selectIndex,
+  'EditorCompletion.toggleDetails': toggleDetails,
+  'FindWidget.focusFirst': focusFirst$1,
+  'FindWidget.focusIndex': focusIndex$1,
+  'FindWidget.focusLast': focusLast,
+  'FindWidget.focusNext': focusNext$1,
+  'FindWidget.focusPrevious': focusPrevious$1,
+  'FindWidget.handleInput': handleInput,
+  'FindWidget.handleFocus': handleFocus,
+  'FindWidget.handleBlur': handleBlur,
+  'FindWidget.toggleReplace': toggleReplace,
+  'FindWidget.close': close$1,
+  'FindWidget.loadContent': loadContent$1,
+  'Font.ensure': ensure,
+  'Hover.getHoverInfo': getEditorHoverInfo,
+  'Hover.handleSashPointerDown': handleSashPointerDown,
+  'Hover.handleSashPointerMove': handleSashPointerMove,
+  'Hover.handleSashPointerUp': handleSashPointerUp,
+  'Hover.loadContent': loadContent,
+  'Hover.render': renderHover,
+  'Initialize.initialize': intialize
 };
+wrapCommands(commandMap);
 
-const getCompletionDetailVirtualDom = content => {
-  const dom = [{
-    type: Div,
-    className: 'Viewlet EditorCompletionDetails',
-    childCount: 2
-  }, {
-    type: Div,
-    className: CompletionDetailContent,
-    childCount: 1
-  }, text(content), {
-    type: Div,
-    className: CompletionDetailCloseButton,
-    onClick: HandleClose,
-    childCount: 1
-  }, {
-    type: Div,
-    className: `${MaskIcon} ${IconClose}`,
+const CheckBox = 'checkbox';
+const Group = 'group';
+const None = 'none';
+const Option = 'option';
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
     childCount: 0
-  }];
-  return dom;
+  };
 };
 
-const renderContent = {
-  isEqual(oldState, newState) {
-    return oldState.content === newState.content;
-  },
-  apply(oldState, newState) {
-    const dom = getCompletionDetailVirtualDom(newState.content);
-    return ['Viewlet.setDom2', newState.uid, dom];
+const getIconDom = (fileIcon, symbolName) => {
+  if (fileIcon) {
+    return getFileIconVirtualDom(fileIcon);
   }
+  return {
+    type: Div,
+    className: `${ColoredMaskIcon} ${symbolName}`,
+    childCount: 0
+  };
 };
-const renderBounds = {
-  isEqual(oldState, newState) {
-    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
-  },
-  apply(oldState, newState) {
-    const {
-      x,
-      y,
-      width,
-      height
-    } = newState;
-    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
-  }
+
+const label1 = {
+  type: Div,
+  className: Label,
+  childCount: 1
 };
-const render$2 = [renderContent, renderBounds];
-const renderFull = (oldState, newState) => {
-  const commands = [];
-  for (const item of render$2) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
+const completionHighlight = {
+  type: Span,
+  className: EditorCompletionItemHighlight,
+  childCount: 1
+};
+const getHighlightedLabelDom = (label, highlights) => {
+  if (highlights.length === 0) {
+    return [label1, text(label)];
+  }
+  const dom = [];
+  const labelDom = {
+    type: Div,
+    className: Label,
+    childCount: 0
+  };
+  dom.push(labelDom);
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      labelDom.childCount++;
+      dom.push(text(beforeText));
     }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    labelDom.childCount++;
+    dom.push(completionHighlight, text(highlightText));
+    position = highlightEnd;
   }
-  return commands;
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    labelDom.childCount++;
+    dom.push(text(afterText));
+  }
+  return dom;
 };
 
-const render$1 = (oldState, newState) => {
-  const commands = renderFull(oldState, newState);
-  const wrappedCommands = [];
-  const uid = newState.uid;
-  for (const command of commands) {
-    if (command[0] === 'Viewlet.setDom2') {
-      wrappedCommands.push(command);
-    } else {
-      wrappedCommands.push(['Viewlet.send', uid, ...command]);
-    }
+const getCompletionItemVirtualDom = visibleItem => {
+  const {
+    top,
+    label,
+    symbolName,
+    highlights,
+    focused,
+    deprecated,
+    fileIcon
+  } = visibleItem;
+  let className = EditorCompletionItem;
+  if (focused) {
+    className += ' ' + EditorCompletionItemFocused;
   }
-  return wrappedCommands;
-};
-const add = widget => {
-  const commands = render$1(widget.oldState, widget.newState);
-  const id = 'EditorCompletionDetails';
-  // TODO how to generate a unique integer id
-  // that doesn't collide with ids created in renderer worker?
-  const uid = widget.newState.uid;
-  const allCommands = [];
-  allCommands.push(['Viewlet.createFunctionalRoot', id, uid]);
-  allCommands.push(...commands);
-  allCommands.push(['Viewlet.send', uid, 'appendWidget']);
-  return allCommands;
+  if (deprecated) {
+    className += ' ' + EditorCompletionItemDeprecated;
+  }
+  return [{
+    type: Div,
+    role: Option,
+    className,
+    top,
+    childCount: 2
+  }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
 };
-const remove = widget => {
-  return [['Viewlet.send', widget.newState.uid, 'dispose']];
+
+const getCompletionItemsVirtualDom = visibleItems => {
+  if (visibleItems.length === 0) {
+    return [{
+      type: Div,
+      childCount: 1
+    }, text(noResults$1())];
+  }
+  const root = {
+    type: Div,
+    childCount: visibleItems.length
+  };
+  const dom = [root, ...visibleItems.flatMap(getCompletionItemVirtualDom)];
+  return dom;
 };
 
-const addWidget = widget => {
-  const {
-    id
-  } = widget;
-  switch (id) {
-    case Completion:
-      return add$1(widget);
-    case CompletionDetail:
-      return add(widget);
+const Property = 1;
+const Value = 2;
+const Function = 3;
+const Variable = 4;
+const Keyword = 5;
+const Folder = 6;
+const File = 7;
+const Field = 8;
+
+const SymbolProperty = 'SymbolProperty';
+const SymbolValue = 'SymbolValue';
+const SymbolFunction = 'SymbolFunction';
+const SymbolVariable = 'SymbolVariable';
+const SymbolKeyword = 'SymbolKeyword';
+const SymbolDefault = 'SymbolDefault';
+const SymbolField = 'SymbolField';
+const SymbolNone = '';
+
+const getSymbolName = kind => {
+  switch (kind) {
+    case Property:
+      return SymbolProperty;
+    case Value:
+      return SymbolValue;
+    case Function:
+      return SymbolFunction;
+    case Variable:
+      return SymbolVariable;
+    case Keyword:
+      return SymbolKeyword;
+    case Field:
+      return SymbolField;
+    case File:
+      return SymbolNone;
     default:
-      throw new Error('unsupported widget');
+      return SymbolDefault;
   }
 };
-const renderWidget = widget => {
-  const {
-    id
-  } = widget;
-  switch (id) {
-    case Completion:
-      return render$3(widget.oldState, widget.newState);
-    case CompletionDetail:
-      return render$1(widget.oldState, widget.newState);
+
+// TODO
+const getCompletionFileIcon = kind => {
+  switch (kind) {
+    case File:
+      return EmptyString;
+    case Folder:
+      return EmptyString;
     default:
-      throw new Error(`unsupported widget`);
+      return EmptyString;
   }
 };
-const removeWidget = widget => {
+
+const getHighlights = item => {
   const {
-    id
-  } = widget;
-  switch (id) {
-    case Completion:
-      return remove$1(widget);
-    case CompletionDetail:
-      return remove(widget);
-    default:
-      throw new Error('unsupported widget');
+    matches
+  } = item;
+  return matches.slice(1);
+};
+
+const getLabel = item => {
+  return item.label;
+};
+const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
+  return {
+    label: getLabel(item),
+    symbolName: getSymbolName(item.kind),
+    top: i * itemHeight,
+    highlights: getHighlights(item),
+    focused: i === focusedIndex,
+    deprecated: item.flags & Deprecated,
+    fileIcon: getCompletionFileIcon(item.kind)
+  };
+};
+
+const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
+  const visibleItems = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const filteredItem = filteredItems[i];
+    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
   }
+  return visibleItems;
 };
 
-const renderLines = {
+const renderItems = {
   isEqual(oldState, newState) {
-    return oldState.lines === newState.lines && oldState.tokenizerId === newState.tokenizerId && oldState.minLineY === newState.minLineY && oldState.decorations === newState.decorations && oldState.embeds === newState.embeds && oldState.deltaX === newState.deltaX && oldState.width === newState.width;
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
   },
-  async apply(oldState, newState) {
-    const incrementalEdits = await getIncrementalEdits(oldState, newState);
-    if (incrementalEdits) {
-      return [/* method */'setIncrementalEdits', /* incrementalEdits */incrementalEdits];
-    }
-    const syncIncremental = getEnabled();
-    const {
-      textInfos,
-      differences
-    } = await getVisible(newState, syncIncremental);
-    newState.differences = differences;
-    const dom = getEditorRowsVirtualDom(textInfos, differences);
-    return [/* method */'setText', dom];
+  apply(oldState, newState) {
+    const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
+    const dom = getCompletionItemsVirtualDom(visibleItems);
+    return ['setDom', dom];
   }
 };
-const renderSelections = {
+const renderBounds$3 = {
   isEqual(oldState, newState) {
-    return oldState.selections === newState.selections && oldState.focused === newState.focused && oldState.minLineY === newState.minLineY && oldState.deltaX === newState.deltaX;
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.x === newState.x && oldState.y === newState.y;
   },
   apply(oldState, newState) {
     const {
-      cursorInfos,
-      selectionInfos
-    } = getVisible$1(newState);
-    const cursorsDom = getCursorsVirtualDom(cursorInfos);
-    const selectionsDom = getSelectionsVirtualDom(selectionInfos);
-    return [/* method */'setSelections', cursorsDom, selectionsDom];
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
 };
-const renderScrollBarY = {
+const renderHeight = {
   isEqual(oldState, newState) {
-    return oldState.deltaY === newState.deltaY && oldState.scrollBarHeight === newState.scrollBarHeight;
+    return oldState.items.length === newState.items.length;
   },
   apply(oldState, newState) {
-    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height, newState.scrollBarHeight);
-    const translate = `0 ${scrollBarY}px`;
-    const heightPx = `${newState.scrollBarHeight}px`;
-    return [/* method */'setScrollBar', translate, heightPx];
+    const {
+      itemHeight
+    } = newState;
+    const contentHeight = newState.items.length * itemHeight;
+    return [/* method */SetContentHeight, /* contentHeight */contentHeight];
   }
 };
-const renderScrollBarX = {
+const renderNegativeMargin = {
   isEqual(oldState, newState) {
-    return oldState.longestLineWidth === newState.longestLineWidth && oldState.deltaX === newState.deltaX;
+    return oldState.deltaY === newState.deltaY;
   },
   apply(oldState, newState) {
-    const scrollBarWidth = getScrollBarSize(newState.width, newState.longestLineWidth, newState.minimumSliderSize);
-    const scrollBarX = newState.deltaX / newState.longestLineWidth * newState.width;
-    return [/* method */'setScrollBarHorizontal', /* scrollBarX */scrollBarX, /* scrollBarWidth */scrollBarWidth, /* deltaX */newState.deltaX];
+    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
   }
 };
-const renderFocus = {
+const renderScrollBar = {
   isEqual(oldState, newState) {
-    return oldState.focused === newState.focused;
+    return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length;
   },
   apply(oldState, newState) {
-    // TODO avoid side effect
-    if (newState.focused) {
-      const FocusEditorText = 12;
-      invoke$3('Focus.setFocus', FocusEditorText);
-    }
-    return [/* method */'setFocused', newState.focused];
-  }
-};
-const renderDecorations = {
-  isEqual(oldState, newState) {
-    return oldState.decorations === newState.decorations;
-  },
-  apply(oldState, newState) {
-    const dom = getDiagnosticsVirtualDom(newState.decorations);
-    return ['setDecorationsDom', dom];
+    const total = newState.items.length;
+    const contentHeight = total * newState.itemHeight;
+    const scrollBarHeight = getScrollBarSize(newState.height, contentHeight, newState.minimumSliderSize);
+    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
+    return [/* method */SetScrollBar, /* scrollBarY */scrollBarY, /* scrollBarHeight */scrollBarHeight];
   }
 };
-const renderGutterInfo = {
-  isEqual(oldState, newState) {
-    return oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY;
-  },
-  apply(oldState, newState) {
-    const {
-      minLineY,
-      maxLineY,
-      lineNumbers
-    } = newState;
-    const gutterInfos = [];
-    if (lineNumbers) {
-      for (let i = minLineY; i < maxLineY; i++) {
-        gutterInfos.push(i + 1);
-      }
+const render$7 = [renderItems, renderBounds$3, renderHeight, renderNegativeMargin, renderScrollBar];
+const renderCompletion = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$7) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
     }
-    const dom = getEditorGutterVirtualDom(gutterInfos);
-    return ['renderGutter', dom];
   }
+  return commands;
 };
-const renderWidgets = {
-  isEqual(oldState, newState) {
-    return oldState.widgets === newState.widgets;
-  },
-  apply(oldState, newState) {
-    const addedWidgets = [];
-    const changedWidgets = [];
-    const removedWidgets = [];
-    const oldWidgets = oldState.widgets || [];
-    const newWidgets = newState.widgets || [];
-    const oldWidgetMap = Object.create(null);
-    const newWidgetMap = Object.create(null);
-    for (const oldWidget of oldWidgets) {
-      oldWidgetMap[oldWidget.id] = oldWidget;
-    }
-    for (const newWidget of newWidgets) {
-      newWidgetMap[newWidget.id] = newWidget;
-    }
-    for (const oldWidget of oldWidgets) {
-      if (oldWidget.id in newWidgetMap) {
-        changedWidgets.push(newWidgetMap[oldWidget.id]);
-      } else {
-        removedWidgets.push(oldWidget);
-      }
-    }
-    for (const newWidget of newWidgets) {
-      if (newWidget.id in oldWidgetMap) ; else {
-        addedWidgets.push(newWidget);
-      }
-    }
-    const addCommands = [];
-    for (const addedWidget of addedWidgets) {
-      const childCommands = addWidget(addedWidget);
-      if (childCommands.length > 0) {
-        addCommands.push(...childCommands);
-      }
-    }
-    const changeCommands = [];
-    for (const changedWidget of changedWidgets) {
-      const childCommands = renderWidget(changedWidget);
-      if (childCommands.length > 0) {
-        changeCommands.push(...childCommands);
-      }
-    }
-    const removeCommands = [];
-    for (const removedWidget of removedWidgets) {
-      const childCommands = removeWidget(removedWidget);
-      if (childCommands.length > 0) {
-        removeCommands.push(...childCommands);
-      }
-    }
-    const allCommands = [...addCommands, ...changeCommands, ...removeCommands];
-    return allCommands;
-  },
-  multiple: true
+
+const removeWidget = widget => {
+  // @ts-ignore
+  return [['Viewlet.send', widget.newState.uid, 'dispose']];
 };
-const render = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus, renderDecorations, renderGutterInfo, renderWidgets];
-const renderEditor = async id => {
-  const instance = get$6(id);
-  if (!instance) {
-    return [];
+
+const render$6 = widget => {
+  const commands = renderCompletion(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    wrappedCommands.push(['Viewlet.send', uid, ...command]);
   }
+  return wrappedCommands;
+};
+const add$3 = widget => {
+  const commands = render$6(widget);
+  const id = 'EditorCompletion';
+  // TODO how to generate a unique integer id
+  // that doesn't collide with ids created in renderer worker?
+  const uid = widget.newState.uid;
+  const allCommands = [];
+  allCommands.push(['Viewlet.create', id, uid]);
+  allCommands.push(...commands);
+  return allCommands;
+};
+const remove$3 = removeWidget;
+const handleEditorType = (editor, state) => {
   const {
-    oldState,
-    newState
-  } = instance;
-  const commands = [];
-  set$6(id, newState, newState);
-  for (const item of render) {
-    if (!item.isEqual(oldState, newState)) {
-      const result = await item.apply(oldState, newState);
-      // @ts-ignore
-      if (item.multiple) {
-        commands.push(...result);
-      } else if (result.length > 0) {
-        commands.push(result);
-      }
-    }
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  const y$1 = y(editor, rowIndex);
+  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMinLineY = 0;
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  const finalDeltaY = items.length * itemHeight - height;
+  return {
+    ...state,
+    items,
+    x: x$1,
+    y: y$1,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height,
+    finalDeltaY
+  };
+};
+const handleEditorDeleteLeft = (editor, state) => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  const y$1 = y(editor, rowIndex);
+  const wordAtOffset = getWordBefore(editor, rowIndex, columnIndex);
+  if (!wordAtOffset) {
+    return undefined;
   }
-  return commands;
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  return {
+    ...state,
+    items,
+    x: x$1,
+    y: y$1,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height
+  };
 };
 
-const keep = ['ColorPicker.handleSliderPointerDown', 'ColorPicker.handleSliderPointerMove', 'ColorPicker.loadContent', 'Editor.create', 'Editor.getWordAt', 'Editor.getWordBefore', 'Editor.offsetAt', 'Editor.render', 'ColorPicker.render', 'Editor.getText', 'Editor.getSelections',
-// 'EditorCompletion.advance',
-// 'EditorCompletion.handleEditorBlur',
-// 'EditorCompletion.handleEditorClick',
-// 'EditorCompletion.handleEditorDeleteLeft',
-// 'EditorCompletion.handleEditorType',
-// 'EditorCompletion.loadContent',
-// 'EditorCompletion.selectCurrent',
-// 'EditorCompletion.selectIndex',
-'FindWidget.focusFirst', 'FindWidget.focusIndex', 'FindWidget.focusLast', 'FindWidget.focusNext', 'FindWidget.focusPrevious', 'FindWidget.handleInput', 'FindWidget.loadContent', 'Font.ensure', 'Hover.getHoverInfo', 'Hover.handleSashPointerDown', 'Hover.handleSashPointerMove', 'Hover.handleSashPointerUp', 'Hover.loadContent', 'Hover.render', 'Initialize.initialize'];
+const EditorCompletionWidget = {
+  __proto__: null,
+  add: add$3,
+  handleEditorDeleteLeft,
+  handleEditorType,
+  remove: remove$3,
+  render: render$6
+};
 
-// TODO wrap commands globally, not per editor
-// TODO only store editor state in editor worker, not in renderer worker also
-const wrapCommand = fn => async (editorUid, ...args) => {
-  const oldInstance = get$6(editorUid);
-  const newEditor = await fn(oldInstance.newState, ...args);
-  set$6(editorUid, oldInstance.newState, newEditor);
-  // TODO if possible, rendering should be sync
-  const commands = await renderEditor(editorUid);
-  newEditor.commands = commands;
-  return newEditor;
+const MessagePort$1 = 1;
+const ModuleWorker = 2;
+const ReferencePort = 3;
+const ModuleWorkerAndMessagePort = 8;
+const Auto = () => {
+  // @ts-ignore
+  if (globalThis.acceptPort) {
+    return MessagePort$1;
+  }
+  // @ts-ignore
+  if (globalThis.acceptReferencePort) {
+    return ReferencePort;
+  }
+  return ModuleWorkerAndMessagePort;
 };
-const wrapCommands = commands => {
-  for (const [key, value] of Object.entries(commands)) {
-    if (keep.includes(key)) {
-      continue;
+
+const getData$1 = event => {
+  return event.data;
+};
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
+  }
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
     }
-    commands[key] = wrapCommand(value);
+    return;
+  }
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
   }
 };
-
-const commandMap = {
-  'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
-  'ColorPicker.handleSliderPointerMove': handleSliderPointerMove,
-  'ColorPicker.loadContent': loadContent$3,
-  'ColorPicker.render': renderColorPicker,
-  'Editor.addCursorAbove': addCursorAbove,
-  'Editor.addCursorBelow': addCursorBelow,
-  'Editor.applyEdit': applyEdit,
-  'Editor.braceCompletion': braceCompletion,
-  'Editor.cancelSelection': cancelSelection,
-  'Editor.closeCompletion': closeCompletion,
-  'Editor.compositionEnd': compositionEnd,
-  'Editor.compositionStart': compositionStart,
-  'Editor.compositionUpdate': compositionUpdate,
-  'Editor.contextMenu': handleContextMenu,
-  'Editor.copy': copy,
-  'Editor.copyLineDown': copyLineDown,
-  'Editor.copyLineUp': copyLineUp,
-  'Editor.create': createEditor,
-  'Editor.cursorCharacterLeft': cursorCharacterLeft,
-  'Editor.cursorCharacterRight': cursorCharacterRight,
-  'Editor.cursorDown': cursorDown,
-  'Editor.cursorEnd': cursorEnd,
-  'Editor.cursorHome': cursorHome,
-  'Editor.cursorLeft': cursorCharacterLeft,
-  'Editor.cursorRight': cursorCharacterRight,
-  'Editor.cursorSet': cursorSet,
-  'Editor.cursorUp': cursorUp,
-  'Editor.cursorWordLeft': cursorWordLeft,
-  'Editor.cursorWordPartLeft': cursorWordPartLeft,
-  'Editor.cursorWordPartRight': cursorWordPartRight,
-  'Editor.cursorWordRight': cursorWordRight,
-  'Editor.cut': cut,
-  'Editor.deleteAllLeft': deleteAllLeft,
-  'Editor.deleteAllRight': deleteAllRight,
-  'Editor.deleteCharacterLeft': deleteCharacterLeft,
-  'Editor.deleteCharacterRight': deleteCharacterRight,
-  'Editor.deleteHorizontalRight': editorDeleteHorizontalRight,
-  'Editor.deleteLeft': deleteCharacterLeft,
-  'Editor.deleteRight': deleteCharacterRight,
-  'Editor.deleteWordLeft': deleteWordLeft,
-  'Editor.deleteWordPartLeft': deleteWordPartLeft,
-  'Editor.deleteWordPartRight': deleteWordPartRight,
-  'Editor.deleteWordRight': deleteWordRight,
-  'Editor.findAllReferences': findAllReferences,
-  'Editor.format': format,
-  'Editor.getSelections': getSelections,
-  'Editor.getText': getText,
-  'Editor.getWordAt': getWordAt,
-  'Editor.getWordBefore': getWordBefore,
-  'Editor.goToDefinition': goToDefinition,
-  'Editor.goToTypeDefinition': goToTypeDefinition,
-  'Editor.handleBeforeInput': handleBeforeInput,
-  'Editor.handleBeforeInputFromContentEditable': handleBeforeInputFromContentEditable,
-  'Editor.handleBlur': handleBlur,
-  'Editor.handleContextMenu': handleContextMenu,
-  'Editor.handleDoubleClick': handleDoubleClick,
-  'Editor.handleFocus': handleFocus,
-  'Editor.handleMouseDown': handleMouseDown,
-  'Editor.handleMouseMove': handleMouseMove,
-  'Editor.handleMouseMoveWithAltKey': handleMouseMoveWithAltKey,
-  'Editor.handleNativeSelectionChange': editorHandleNativeSelectionChange,
-  'Editor.handlePointerCaptureLost': handlePointerCaptureLost,
-  'Editor.handleScrollBarClick': handleScrollBarPointerDown,
-  'Editor.handleScrollBarHorizontalMove': handleScrollBarHorizontalMove,
-  'Editor.handleScrollBarHorizontalPointerDown': handleScrollBarHorizontalPointerDown,
-  'Editor.handleScrollBarMove': handleScrollBarMove,
-  'Editor.handleScrollBarPointerDown': handleScrollBarPointerDown,
-  'Editor.handleScrollBarVerticalMove': handleScrollBarVerticalPointerMove,
-  'Editor.handleScrollBarVerticalPointerDown': handleScrollBarPointerDown,
-  'Editor.handleScrollBarVerticalPointerMove': handleScrollBarVerticalPointerMove,
-  'Editor.handleSingleClick': handleSingleClick,
-  'Editor.handleTouchEnd': handleTouchEnd,
-  'Editor.handleTouchMove': handleTouchMove,
-  'Editor.handleTouchStart': handleTouchStart,
-  'Editor.handleTripleClick': handleTripleClick,
-  'Editor.indendLess': indentLess,
-  'Editor.indentMore': indentMore,
-  'Editor.insertLineBreak': insertLineBreak,
-  'Editor.moveLineDown': moveLineDown,
-  'Editor.moveLineUp': moveLineUp,
-  'Editor.moveRectangleSelection': moveRectangleSelection,
-  'Editor.moveRectangleSelectionPx': moveRectangleSelectionPx,
-  'Editor.moveSelection': editorMoveSelection,
-  'Editor.moveSelectionPx': moveSelectionPx,
-  'Editor.offsetAt': offsetAt,
-  'Editor.openCompletion': openCompletion,
-  'Editor.openFind': openFind,
-  'Editor.organizeImports': organizeImports,
-  'Editor.paste': paste,
-  'Editor.pasteText': pasteText,
-  'Editor.render': renderEditor,
-  'Editor.replaceRange': replaceRange,
-  'Editor.save': save,
-  'Editor.selectAll': selectAll,
-  'Editor.selectAllLeft': editorSelectAllLeft,
-  'Editor.selectAllOccurrences': selectAllOccurrences,
-  'Editor.selectAllRight': editorSelectAllRight,
-  'Editor.selectCharacterLeft': selectCharacterLeft,
-  'Editor.selectCharacterRight': selectCharacterRight,
-  'Editor.selectDown': selectDown,
-  'Editor.selectInsideString': selectInsideString,
-  'Editor.selectionGrow': selectionGrow,
-  'Editor.selectLine': selectLine,
-  'Editor.selectNextOccurrence': selectNextOccurrence,
-  'Editor.selectPreviousOccurrence': selectPreviousOccurrence,
-  'Editor.selectUp': selectUp,
-  'Editor.selectWord': selectWord,
-  'Editor.selectWordLeft': selectWordLeft,
-  'Editor.selectWordRight': selectWordRight,
-  'Editor.setDecorations': setDecorations,
-  'Editor.setDelta': setDelta,
-  'Editor.setDeltaY': setDeltaY,
-  'Editor.setLanguageId': setLanguageId,
-  'Editor.setSelections': setSelections,
-  'Editor.showHover': showHover,
-  'Editor.showSourceActions': showSourceActions,
-  'Editor.sortLinesAscending': sortLinesAscending,
-  'Editor.tabCompletion': tabCompletion,
-  'Editor.toggleBlockComment': toggleBlockComment,
-  'Editor.toggleComment': toggleComment,
-  'Editor.toggleLineComment': editorToggleLineComment,
-  'Editor.type': type,
-  'Editor.typeWithAutoClosing': typeWithAutoClosing,
-  'Editor.undo': undo,
-  'Editor.unIndent': editorUnindent,
-  'EditorCompletion.advance': advance,
-  'EditorCompletion.closeDetails': closeDetails,
-  'EditorCompletion.focusFirst': focusFirst$1,
-  'EditorCompletion.focusIndex': focusIndex$1,
-  'EditorCompletion.focusNext': focusNext$1,
-  'EditorCompletion.focusPrevious': focusPrevious$1,
-  'EditorCompletion.handleEditorBlur': handleEditorBlur,
-  'EditorCompletion.handleEditorClick': handleEditorClick,
-  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$1,
-  'EditorCompletion.handleEditorType': handleEditorType$1,
-  'EditorCompletion.loadContent': loadContent$2,
-  'EditorCompletion.openDetails': openDetails,
-  'EditorCompletion.selectCurrent': selectCurrent,
-  'EditorCompletion.selectIndex': selectIndex,
-  'EditorCompletion.toggleDetails': toggleDetails,
-  'FindWidget.focusFirst': focusFirst,
-  'FindWidget.focusIndex': focusIndex,
-  'FindWidget.focusLast': focusLast,
-  'FindWidget.focusNext': focusNext,
-  'FindWidget.focusPrevious': focusPrevious,
-  'FindWidget.handleInput': handleInput,
-  'FindWidget.loadContent': loadContent,
-  'Font.ensure': ensure,
-  'Hover.getHoverInfo': getEditorHoverInfo,
-  'Hover.handleSashPointerDown': handleSashPointerDown,
-  'Hover.handleSashPointerMove': handleSashPointerMove,
-  'Hover.handleSashPointerUp': handleSashPointerUp,
-  'Hover.loadContent': loadContent$1,
-  'Hover.render': renderHover,
-  'Initialize.initialize': intialize
+const isMessagePort = value => {
+  return value && value instanceof MessagePort;
+};
+const isMessagePortMain = value => {
+  return value && value.constructor && value.constructor.name === 'MessagePortMain';
+};
+const isOffscreenCanvas = value => {
+  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
+};
+const isInstanceOf = (value, constructorName) => {
+  return value?.constructor?.name === constructorName;
+};
+const isSocket = value => {
+  return isInstanceOf(value, 'Socket');
+};
+const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
+const isTransferrable = value => {
+  for (const fn of transferrables) {
+    if (fn(value)) {
+      return true;
+    }
+  }
+  return false;
+};
+const getTransferrables = value => {
+  const transferrables = [];
+  walkValue(value, transferrables, isTransferrable);
+  return transferrables;
+};
+const attachEvents = that => {
+  const handleMessage = (...args) => {
+    const data = that.getData(...args);
+    that.dispatchEvent(new MessageEvent('message', {
+      data
+    }));
+  };
+  that.onMessage(handleMessage);
+  const handleClose = event => {
+    that.dispatchEvent(new Event('close'));
+  };
+  that.onClose(handleClose);
+};
+class Ipc extends EventTarget {
+  constructor(rawIpc) {
+    super();
+    this._rawIpc = rawIpc;
+    attachEvents(this);
+  }
+}
+const readyMessage = 'ready';
+const listen$4 = () => {
+  // @ts-ignore
+  if (typeof WorkerGlobalScope === 'undefined') {
+    throw new TypeError('module is not in web worker scope');
+  }
+  return globalThis;
+};
+const signal$3 = global => {
+  global.postMessage(readyMessage);
+};
+class IpcChildWithModuleWorker extends Ipc {
+  getData(event) {
+    return getData$1(event);
+  }
+  send(message) {
+    // @ts-ignore
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    // @ts-ignore
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    // ignore
+  }
+  onClose(callback) {
+    // ignore
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+}
+const wrap$6 = global => {
+  return new IpcChildWithModuleWorker(global);
+};
+const IpcChildWithModuleWorker$1 = {
+  __proto__: null,
+  listen: listen$4,
+  signal: signal$3,
+  wrap: wrap$6
+};
+const E_INCOMPATIBLE_NATIVE_MODULE = 'E_INCOMPATIBLE_NATIVE_MODULE';
+const E_MODULES_NOT_SUPPORTED_IN_ELECTRON = 'E_MODULES_NOT_SUPPORTED_IN_ELECTRON';
+const ERR_MODULE_NOT_FOUND = 'ERR_MODULE_NOT_FOUND';
+const NewLine$1 = '\n';
+const joinLines = lines => {
+  return lines.join(NewLine$1);
+};
+const splitLines = lines => {
+  return lines.split(NewLine$1);
+};
+const isModuleNotFoundMessage = line => {
+  return line.includes('[ERR_MODULE_NOT_FOUND]');
+};
+const getModuleNotFoundError = stderr => {
+  const lines = splitLines(stderr);
+  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
+  const message = lines[messageIndex];
+  return {
+    message,
+    code: ERR_MODULE_NOT_FOUND
+  };
+};
+const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
+const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
+const RE_MESSAGE_CODE_BLOCK_START = /^Error: The module '.*'$/;
+const RE_MESSAGE_CODE_BLOCK_END = /^\s* at/;
+const RE_AT = /^\s+at/;
+const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
+const isUnhelpfulNativeModuleError = stderr => {
+  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
+};
+const isMessageCodeBlockStartIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_START.test(line);
+};
+const isMessageCodeBlockEndIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_END.test(line);
+};
+const getMessageCodeBlock = stderr => {
+  const lines = splitLines(stderr);
+  const startIndex = lines.findIndex(isMessageCodeBlockStartIndex);
+  const endIndex = startIndex + lines.slice(startIndex).findIndex(isMessageCodeBlockEndIndex, startIndex);
+  const relevantLines = lines.slice(startIndex, endIndex);
+  const relevantMessage = relevantLines.join(' ').slice('Error: '.length);
+  return relevantMessage;
+};
+const getNativeModuleErrorMessage = stderr => {
+  const message = getMessageCodeBlock(stderr);
+  return {
+    message: `Incompatible native node module: ${message}`,
+    code: E_INCOMPATIBLE_NATIVE_MODULE
+  };
+};
+const isModulesSyntaxError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
+};
+const getModuleSyntaxError = () => {
+  return {
+    message: `ES Modules are not supported in electron`,
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
+  };
+};
+const isModuleNotFoundError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('ERR_MODULE_NOT_FOUND');
+};
+const isNormalStackLine = line => {
+  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
+};
+const getDetails = lines => {
+  const index = lines.findIndex(isNormalStackLine);
+  if (index === -1) {
+    return {
+      actualMessage: joinLines(lines),
+      rest: []
+    };
+  }
+  let lastIndex = index - 1;
+  while (++lastIndex < lines.length) {
+    if (!isNormalStackLine(lines[lastIndex])) {
+      break;
+    }
+  }
+  return {
+    actualMessage: lines[index - 1],
+    rest: lines.slice(index, lastIndex)
+  };
+};
+const getHelpfulChildProcessError = (stdout, stderr) => {
+  if (isUnhelpfulNativeModuleError(stderr)) {
+    return getNativeModuleErrorMessage(stderr);
+  }
+  if (isModulesSyntaxError(stderr)) {
+    return getModuleSyntaxError();
+  }
+  if (isModuleNotFoundError(stderr)) {
+    return getModuleNotFoundError(stderr);
+  }
+  const lines = splitLines(stderr);
+  const {
+    actualMessage,
+    rest
+  } = getDetails(lines);
+  return {
+    message: `${actualMessage}`,
+    code: '',
+    stack: rest
+  };
+};
+const normalizeLine = line => {
+  if (line.startsWith('Error: ')) {
+    return line.slice(`Error: `.length);
+  }
+  if (line.startsWith('VError: ')) {
+    return line.slice(`VError: `.length);
+  }
+  return line;
+};
+const getCombinedMessage = (error, message) => {
+  const stringifiedError = normalizeLine(`${error}`);
+  if (message) {
+    return `${message}: ${stringifiedError}`;
+  }
+  return stringifiedError;
+};
+const NewLine = '\n';
+const getNewLineIndex = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine, startIndex);
+};
+const mergeStacks = (parent, child) => {
+  if (!child) {
+    return parent;
+  }
+  const parentNewLineIndex = getNewLineIndex(parent);
+  const childNewLineIndex = getNewLineIndex(child);
+  if (childNewLineIndex === -1) {
+    return parent;
+  }
+  const parentFirstLine = parent.slice(0, parentNewLineIndex);
+  const childRest = child.slice(childNewLineIndex);
+  const childFirstLine = normalizeLine(child.slice(0, childNewLineIndex));
+  if (parentFirstLine.includes(childFirstLine)) {
+    return parentFirstLine + childRest;
+  }
+  return child;
+};
+class VError extends Error {
+  constructor(error, message) {
+    const combinedMessage = getCombinedMessage(error, message);
+    super(combinedMessage);
+    this.name = 'VError';
+    if (error instanceof Error) {
+      this.stack = mergeStacks(this.stack, error.stack);
+    }
+    if (error.codeFrame) {
+      // @ts-ignore
+      this.codeFrame = error.codeFrame;
+    }
+    if (error.code) {
+      // @ts-ignore
+      this.code = error.code;
+    }
+  }
+}
+class IpcError extends VError {
+  // @ts-ignore
+  constructor(betterMessage, stdout = '', stderr = '') {
+    if (stdout || stderr) {
+      // @ts-ignore
+      const {
+        message,
+        code,
+        stack
+      } = getHelpfulChildProcessError(stdout, stderr);
+      const cause = new Error(message);
+      // @ts-ignore
+      cause.code = code;
+      cause.stack = stack;
+      super(cause, betterMessage);
+    } else {
+      super(betterMessage);
+    }
+    // @ts-ignore
+    this.name = 'IpcError';
+    // @ts-ignore
+    this.stdout = stdout;
+    // @ts-ignore
+    this.stderr = stderr;
+  }
+}
+const withResolvers = () => {
+  let _resolve;
+  const promise = new Promise(resolve => {
+    _resolve = resolve;
+  });
+  return {
+    resolve: _resolve,
+    promise
+  };
 };
-wrapCommands(commandMap);
-
-const MessagePort$1 = 1;
-const ModuleWorker = 2;
-const ReferencePort = 3;
-const ModuleWorkerAndMessagePort = 8;
-const Auto = () => {
+const waitForFirstMessage = async port => {
+  const {
+    resolve,
+    promise
+  } = withResolvers();
+  port.addEventListener('message', resolve, {
+    once: true
+  });
+  const event = await promise;
   // @ts-ignore
-  if (globalThis.acceptPort) {
-    return MessagePort$1;
+  return event.data;
+};
+const listen$3 = async () => {
+  const parentIpcRaw = listen$4();
+  signal$3(parentIpcRaw);
+  const parentIpc = wrap$6(parentIpcRaw);
+  const firstMessage = await waitForFirstMessage(parentIpc);
+  if (firstMessage.method !== 'initialize') {
+    throw new IpcError('unexpected first message');
   }
-  // @ts-ignore
-  if (globalThis.acceptReferencePort) {
-    return ReferencePort;
+  const type = firstMessage.params[0];
+  if (type === 'message-port') {
+    parentIpc.send({
+      jsonrpc: '2.0',
+      id: firstMessage.id,
+      result: null
+    });
+    parentIpc.dispose();
+    const port = firstMessage.params[1];
+    return port;
   }
-  return ModuleWorkerAndMessagePort;
-};
-
-const getData$1 = event => {
-  return event.data;
+  return globalThis;
 };
-const walkValue = (value, transferrables, isTransferrable) => {
-  if (!value) {
-    return;
+class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
+  constructor(port) {
+    super(port);
   }
-  if (isTransferrable(value)) {
-    transferrables.push(value);
-    return;
+  getData(event) {
+    return getData$1(event);
   }
-  if (Array.isArray(value)) {
-    for (const item of value) {
-      walkValue(item, transferrables, isTransferrable);
-    }
-    return;
+  send(message) {
+    this._rawIpc.postMessage(message);
   }
-  if (typeof value === 'object') {
-    for (const property of Object.values(value)) {
-      walkValue(property, transferrables, isTransferrable);
-    }
-    return;
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
   }
-};
-const isMessagePort = value => {
-  return value && value instanceof MessagePort;
-};
-const isMessagePortMain = value => {
-  return value && value.constructor && value.constructor.name === 'MessagePortMain';
-};
-const isOffscreenCanvas = value => {
-  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
-};
-const isInstanceOf = (value, constructorName) => {
-  return value?.constructor?.name === constructorName;
-};
-const isSocket = value => {
-  return isInstanceOf(value, 'Socket');
-};
-const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
-const isTransferrable = value => {
-  for (const fn of transferrables) {
-    if (fn(value)) {
-      return true;
+  dispose() {
+    if (this._rawIpc.close) {
+      this._rawIpc.close();
     }
   }
-  return false;
-};
-const getTransferrables = value => {
-  const transferrables = [];
-  walkValue(value, transferrables, isTransferrable);
-  return transferrables;
-};
-const attachEvents = that => {
-  const handleMessage = (...args) => {
-    const data = that.getData(...args);
-    that.dispatchEvent(new MessageEvent('message', {
-      data
-    }));
-  };
-  that.onMessage(handleMessage);
-  const handleClose = event => {
-    that.dispatchEvent(new Event('close'));
-  };
-  that.onClose(handleClose);
-};
-class Ipc extends EventTarget {
-  constructor(rawIpc) {
-    super();
-    this._rawIpc = rawIpc;
-    attachEvents(this);
+  onClose(callback) {
+    // ignore
   }
-}
-const readyMessage = 'ready';
-const listen$4 = () => {
-  // @ts-ignore
-  if (typeof WorkerGlobalScope === 'undefined') {
-    throw new TypeError('module is not in web worker scope');
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+    this._rawIpc.start();
   }
-  return globalThis;
+}
+const wrap$5 = port => {
+  return new IpcChildWithModuleWorkerAndMessagePort(port);
 };
-const signal$3 = global => {
-  global.postMessage(readyMessage);
+const IpcChildWithModuleWorkerAndMessagePort$1 = {
+  __proto__: null,
+  listen: listen$3,
+  wrap: wrap$5
 };
-class IpcChildWithModuleWorker extends Ipc {
+const listen$2 = ({
+  port
+}) => {
+  return port;
+};
+const signal = port => {
+  port.postMessage(readyMessage);
+};
+class IpcChildWithMessagePort extends Ipc {
+  constructor(port) {
+    super(port);
+  }
   getData(event) {
     return getData$1(event);
   }
   send(message) {
-    // @ts-ignore
     this._rawIpc.postMessage(message);
   }
   sendAndTransfer(message) {
     const transfer = getTransferrables(message);
-    // @ts-ignore
     this._rawIpc.postMessage(message, transfer);
   }
   dispose() {
@@ -9162,372 +9604,569 @@ class IpcChildWithModuleWorker extends Ipc {
   }
   onMessage(callback) {
     this._rawIpc.addEventListener('message', callback);
+    this._rawIpc.start();
   }
 }
-const wrap$6 = global => {
-  return new IpcChildWithModuleWorker(global);
+const wrap$2 = port => {
+  return new IpcChildWithMessagePort(port);
 };
-const IpcChildWithModuleWorker$1 = {
+const IpcChildWithMessagePort$1 = {
   __proto__: null,
-  listen: listen$4,
-  signal: signal$3,
-  wrap: wrap$6
-};
-const E_INCOMPATIBLE_NATIVE_MODULE = 'E_INCOMPATIBLE_NATIVE_MODULE';
-const E_MODULES_NOT_SUPPORTED_IN_ELECTRON = 'E_MODULES_NOT_SUPPORTED_IN_ELECTRON';
-const ERR_MODULE_NOT_FOUND = 'ERR_MODULE_NOT_FOUND';
-const NewLine$1 = '\n';
-const joinLines = lines => {
-  return lines.join(NewLine$1);
-};
-const splitLines = lines => {
-  return lines.split(NewLine$1);
-};
-const isModuleNotFoundMessage = line => {
-  return line.includes('[ERR_MODULE_NOT_FOUND]');
-};
-const getModuleNotFoundError = stderr => {
-  const lines = splitLines(stderr);
-  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
-  const message = lines[messageIndex];
-  return {
-    message,
-    code: ERR_MODULE_NOT_FOUND
-  };
-};
-const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
-const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
-const RE_MESSAGE_CODE_BLOCK_START = /^Error: The module '.*'$/;
-const RE_MESSAGE_CODE_BLOCK_END = /^\s* at/;
-const RE_AT = /^\s+at/;
-const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
-const isUnhelpfulNativeModuleError = stderr => {
-  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
-};
-const isMessageCodeBlockStartIndex = line => {
-  return RE_MESSAGE_CODE_BLOCK_START.test(line);
+  listen: listen$2,
+  signal,
+  wrap: wrap$2
 };
-const isMessageCodeBlockEndIndex = line => {
-  return RE_MESSAGE_CODE_BLOCK_END.test(line);
+
+const getModule = method => {
+  switch (method) {
+    case ModuleWorker:
+      return IpcChildWithModuleWorker$1;
+    case ModuleWorkerAndMessagePort:
+      return IpcChildWithModuleWorkerAndMessagePort$1;
+    case MessagePort$1:
+      return IpcChildWithMessagePort$1;
+    default:
+      throw new Error('unexpected ipc type');
+  }
 };
-const getMessageCodeBlock = stderr => {
-  const lines = splitLines(stderr);
-  const startIndex = lines.findIndex(isMessageCodeBlockStartIndex);
-  const endIndex = startIndex + lines.slice(startIndex).findIndex(isMessageCodeBlockEndIndex, startIndex);
-  const relevantLines = lines.slice(startIndex, endIndex);
-  const relevantMessage = relevantLines.join(' ').slice('Error: '.length);
-  return relevantMessage;
+
+// @ts-ignore
+const listen$1 = async ({
+  method
+}) => {
+  const module = await getModule(method);
+  const rawIpc = await module.listen();
+  // @ts-ignore
+  if (module.signal) {
+    // @ts-ignore
+    module.signal(rawIpc);
+  }
+  const ipc = module.wrap(rawIpc);
+  return ipc;
 };
-const getNativeModuleErrorMessage = stderr => {
-  const message = getMessageCodeBlock(stderr);
-  return {
-    message: `Incompatible native node module: ${message}`,
-    code: E_INCOMPATIBLE_NATIVE_MODULE
-  };
+
+const listen = async () => {
+  registerCommands(commandMap);
+  register(Completion, EditorCompletionWidget);
+  const ipc = await listen$1({
+    method: Auto()
+  });
+  handleIpc(ipc);
+  listen$8(ipc);
 };
-const isModulesSyntaxError = stderr => {
-  if (!stderr) {
-    return false;
+
+const addWidget = (widget, id, render) => {
+  const commands = render(widget);
+  // TODO how to generate a unique integer id
+  // that doesn't collide with ids created in renderer worker?
+  // @ts-ignore
+  const uid = widget.newState.uid;
+  const allCommands = [];
+  allCommands.push(['Viewlet.createFunctionalRoot', id, uid]);
+  allCommands.push(...commands);
+  allCommands.push(['Viewlet.send', uid, 'appendWidget']);
+  const focusCommandIndex = allCommands.findIndex(command => command[2] === 'focus');
+  // TODO have separate rendering functions, e.g.
+  // 1. renderDom
+  // 2. renderAriaAnnouncement
+  // 3. renderFocus
+  // to ensure that focus is always after the element is added to the dom
+  if (focusCommandIndex !== -1) {
+    const command = allCommands[focusCommandIndex];
+    allCommands.splice(focusCommandIndex, 1);
+    allCommands.push(command);
   }
-  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
+  return allCommands;
 };
-const getModuleSyntaxError = () => {
-  return {
-    message: `ES Modules are not supported in electron`,
-    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
-  };
+
+const renderColor = {
+  isEqual(oldState, newState) {
+    return oldState.color === newState.color;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetColor, /* color */newState.color];
+  }
 };
-const isModuleNotFoundError = stderr => {
-  if (!stderr) {
-    return false;
+const renderOffsetX = {
+  isEqual(oldState, newState) {
+    return oldState.offsetX === newState.offsetX;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetOffsetX, /* offsetX */newState.offsetX];
   }
-  return stderr.includes('ERR_MODULE_NOT_FOUND');
 };
-const isNormalStackLine = line => {
-  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
+const renderContent$1 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.min === newState.min && oldState.max === newState.max;
+  },
+  apply(oldState, newState) {
+    const dom = getColorPickerVirtualDom();
+    return ['Viewlet.setDom2', newState.uid, dom];
+  }
 };
-const getDetails = lines => {
-  const index = lines.findIndex(isNormalStackLine);
-  if (index === -1) {
-    return {
-      actualMessage: joinLines(lines),
-      rest: []
-    };
+const renderBounds$2 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
-  let lastIndex = index - 1;
-  while (++lastIndex < lines.length) {
-    if (!isNormalStackLine(lines[lastIndex])) {
-      break;
+};
+const render$5 = [renderContent$1, renderBounds$2, renderColor, renderOffsetX];
+const renderFull$1 = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$5) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
     }
   }
-  return {
-    actualMessage: lines[index - 1],
-    rest: lines.slice(index, lastIndex)
-  };
+  return commands;
 };
-const getHelpfulChildProcessError = (stdout, stderr) => {
-  if (isUnhelpfulNativeModuleError(stderr)) {
-    return getNativeModuleErrorMessage(stderr);
-  }
-  if (isModulesSyntaxError(stderr)) {
-    return getModuleSyntaxError();
-  }
-  if (isModuleNotFoundError(stderr)) {
-    return getModuleNotFoundError(stderr);
+
+const render$4 = widget => {
+  const commands = renderFull$1(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
   }
-  const lines = splitLines(stderr);
-  const {
-    actualMessage,
-    rest
-  } = getDetails(lines);
-  return {
-    message: `${actualMessage}`,
-    code: '',
-    stack: rest
-  };
+  return wrappedCommands;
 };
-const normalizeLine = line => {
-  if (line.startsWith('Error: ')) {
-    return line.slice(`Error: `.length);
-  }
-  if (line.startsWith('VError: ')) {
-    return line.slice(`VError: `.length);
-  }
-  return line;
+const add$2 = widget => {
+  return addWidget(widget, 'ColorPicker', render$4);
 };
-const getCombinedMessage = (error, message) => {
-  const stringifiedError = normalizeLine(`${error}`);
-  if (message) {
-    return `${message}: ${stringifiedError}`;
-  }
-  return stringifiedError;
+const remove$2 = removeWidget;
+const Commands$1 = {
+  'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
+  'ColorPicker.handleSliderPointerMove': handleSliderPointerMove
 };
-const NewLine = '\n';
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+
+const EditorColorPickerWidget = {
+  __proto__: null,
+  Commands: Commands$1,
+  add: add$2,
+  remove: remove$2,
+  render: render$4
 };
-const mergeStacks = (parent, child) => {
-  if (!child) {
-    return parent;
-  }
-  const parentNewLineIndex = getNewLineIndex(parent);
-  const childNewLineIndex = getNewLineIndex(child);
-  if (childNewLineIndex === -1) {
-    return parent;
-  }
-  const parentFirstLine = parent.slice(0, parentNewLineIndex);
-  const childRest = child.slice(childNewLineIndex);
-  const childFirstLine = normalizeLine(child.slice(0, childNewLineIndex));
-  if (parentFirstLine.includes(childFirstLine)) {
-    return parentFirstLine + childRest;
+
+const getCompletionDetailVirtualDom = content => {
+  const dom = [{
+    type: Div,
+    className: 'Viewlet EditorCompletionDetails',
+    childCount: 2
+  }, {
+    type: Div,
+    className: CompletionDetailContent,
+    childCount: 1
+  }, text(content), {
+    type: Div,
+    className: CompletionDetailCloseButton,
+    onClick: HandleClose,
+    childCount: 1
+  }, {
+    type: Div,
+    className: `${MaskIcon} ${IconClose}`,
+    childCount: 0
+  }];
+  return dom;
+};
+
+const renderContent = {
+  isEqual(oldState, newState) {
+    return oldState.content === newState.content;
+  },
+  apply(oldState, newState) {
+    const dom = getCompletionDetailVirtualDom(newState.content);
+    return ['Viewlet.setDom2', newState.uid, dom];
   }
-  return child;
 };
-class VError extends Error {
-  constructor(error, message) {
-    const combinedMessage = getCombinedMessage(error, message);
-    super(combinedMessage);
-    this.name = 'VError';
-    if (error instanceof Error) {
-      this.stack = mergeStacks(this.stack, error.stack);
-    }
-    if (error.codeFrame) {
-      // @ts-ignore
-      this.codeFrame = error.codeFrame;
-    }
-    if (error.code) {
-      // @ts-ignore
-      this.code = error.code;
-    }
+const renderBounds$1 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
-}
-class IpcError extends VError {
-  // @ts-ignore
-  constructor(betterMessage, stdout = '', stderr = '') {
-    if (stdout || stderr) {
-      // @ts-ignore
-      const {
-        message,
-        code,
-        stack
-      } = getHelpfulChildProcessError(stdout, stderr);
-      const cause = new Error(message);
-      // @ts-ignore
-      cause.code = code;
-      cause.stack = stack;
-      super(cause, betterMessage);
+};
+const render$3 = [renderContent, renderBounds$1];
+const renderFull = (oldState, newState) => {
+  return renderParts(render$3, oldState, newState);
+};
+
+const render$2 = widget => {
+  const commands = renderFull(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
     } else {
-      super(betterMessage);
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
     }
-    // @ts-ignore
-    this.name = 'IpcError';
-    // @ts-ignore
-    this.stdout = stdout;
-    // @ts-ignore
-    this.stderr = stderr;
   }
-}
-const withResolvers = () => {
-  let _resolve;
-  const promise = new Promise(resolve => {
-    _resolve = resolve;
+  return wrappedCommands;
+};
+const add$1 = widget => {
+  return addWidget(widget, 'EditorCompletionDetails', render$2);
+};
+const remove$1 = removeWidget;
+
+const EditorCompletionDetailWidget = {
+  __proto__: null,
+  add: add$1,
+  remove: remove$1,
+  render: render$2
+};
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  MatchesFoundFor: '{PH1} of {PH2} found for {PH3}',
+  MatchOf: '{PH1} of {PH2}',
+  NoResults: 'No Results',
+  Close: 'Close',
+  PreviousMatch: 'Previous Match',
+  NextMatch: 'Next Match',
+  Find: 'Find',
+  Replace: 'Replace',
+  ReplaceAll: 'Replace All'
+};
+const noResults = () => {
+  return i18nString(UiStrings.NoResults);
+};
+const matchOf = (matchIndex, matchCount) => {
+  return i18nString(UiStrings.MatchOf, {
+    PH1: matchIndex,
+    PH2: matchCount
   });
+};
+const previousMatch = () => {
+  return i18nString(UiStrings.PreviousMatch);
+};
+const nextMatch = () => {
+  return i18nString(UiStrings.NextMatch);
+};
+const close = () => {
+  return i18nString(UiStrings.Close);
+};
+const find = () => {
+  return i18nString(UiStrings.Find);
+};
+const replace = () => {
+  return i18nString(UiStrings.Replace);
+};
+const replaceAll = () => {
+  return i18nString(UiStrings.ReplaceAll);
+};
+
+const getIconVirtualDom = (icon, type = Div) => {
   return {
-    resolve: _resolve,
-    promise
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: None,
+    childCount: 0
   };
 };
-const waitForFirstMessage = async port => {
+
+const getIconButtonVirtualDom = iconButton => {
   const {
-    resolve,
-    promise
-  } = withResolvers();
-  port.addEventListener('message', resolve, {
-    once: true
-  });
-  const event = await promise;
-  // @ts-ignore
-  return event.data;
-};
-const listen$3 = async () => {
-  const parentIpcRaw = listen$4();
-  signal$3(parentIpcRaw);
-  const parentIpc = wrap$6(parentIpcRaw);
-  const firstMessage = await waitForFirstMessage(parentIpc);
-  if (firstMessage.method !== 'initialize') {
-    throw new IpcError('unexpected first message');
-  }
-  const type = firstMessage.params[0];
-  if (type === 'message-port') {
-    parentIpc.send({
-      jsonrpc: '2.0',
-      id: firstMessage.id,
-      result: null
-    });
-    parentIpc.dispose();
-    const port = firstMessage.params[1];
-    return port;
+    label,
+    icon,
+    disabled
+  } = iconButton;
+  let className = IconButton;
+  if (disabled) {
+    className += ' ' + IconButtonDisabled;
   }
-  return globalThis;
+  return [{
+    type: Button,
+    className,
+    title: label,
+    ariaLabel: label,
+    childCount: 1,
+    disabled: disabled ? true : undefined
+  }, getIconVirtualDom(icon)];
 };
-class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
-  constructor(port) {
-    super(port);
-  }
-  getData(event) {
-    return getData$1(event);
-  }
-  send(message) {
-    this._rawIpc.postMessage(message);
-  }
-  sendAndTransfer(message) {
-    const transfer = getTransferrables(message);
-    this._rawIpc.postMessage(message, transfer);
-  }
-  dispose() {
-    if (this._rawIpc.close) {
-      this._rawIpc.close();
-    }
-  }
-  onClose(callback) {
-    // ignore
-  }
-  onMessage(callback) {
-    this._rawIpc.addEventListener('message', callback);
-    this._rawIpc.start();
+
+const getSearchFieldButtonVirtualDom = button => {
+  const {
+    icon,
+    checked,
+    title
+  } = button;
+  return [{
+    type: Div,
+    className: `SearchFieldButton ${checked ? 'SearchFieldButtonChecked' : ''}`,
+    title,
+    role: CheckBox,
+    ariaChecked: checked,
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Div,
+    className: `MaskIcon ${icon}`,
+    childCount: 0
+  }];
+};
+
+const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '') => {
+  const dom = [{
+    type: Div,
+    className: SearchField,
+    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)];
+  if (outsideButtons.length > 0) {
+    throw new Error('outsideButtons are deprecated');
   }
-}
-const wrap$5 = port => {
-  return new IpcChildWithModuleWorkerAndMessagePort(port);
+  return dom;
 };
-const IpcChildWithModuleWorkerAndMessagePort$1 = {
-  __proto__: null,
-  listen: listen$3,
-  wrap: wrap$5
+
+const getFindWidgetFindVirtualDom = (matchCountText, buttons) => {
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: FindWidgetFind,
+    childCount: 5
+  });
+  dom.push(...getSearchFieldVirtualDom('search-value', find(), 'handleInput', [], [], 'handleFocus'));
+  dom.push({
+    type: Div,
+    className: FindWidgetMatchCount,
+    childCount: 1
+  }, text(matchCountText), ...buttons.flatMap(getIconButtonVirtualDom));
+  return dom;
 };
-const listen$2 = ({
-  port
-}) => {
-  return port;
+
+const getFindWidgetReplaceVirtualDom = (replaceExpanded, replaceButtons) => {
+  const dom = [];
+  if (replaceExpanded) {
+    dom.push({
+      type: Div,
+      className: FindWidgetReplace,
+      childCount: 1 + replaceButtons.length
+    }, ...getSearchFieldVirtualDom('replace-value', replace(), 'handleReplaceInput', [], [], 'handleReplaceFocus'), ...replaceButtons.flatMap(getIconButtonVirtualDom));
+  }
+  return dom;
 };
-const signal = port => {
-  port.postMessage(readyMessage);
+
+const getSearchToggleButtonVirtualDom = (replaceExpanded, onClick = '') => {
+  return [{
+    type: Button,
+    className: `IconButton SearchToggleButton ${replaceExpanded ? 'SearchToggleButtonExpanded' : ''}`,
+    title: 'Toggle Replace',
+    ariaLabel: 'Toggle Replace',
+    ariaExpanded: replaceExpanded,
+    childCount: 1,
+    'data-command': 'toggleReplace',
+    onClick
+  }, {
+    type: Div,
+    className: `MaskIcon ${replaceExpanded ? 'MaskIconChevronDown' : 'MaskIconChevronRight'}`,
+    childCount: 0
+  }];
 };
-class IpcChildWithMessagePort extends Ipc {
-  constructor(port) {
-    super(port);
-  }
-  getData(event) {
-    return getData$1(event);
+
+const getFindWidgetVirtualDom = (matchCountText, replaceExpanded, findButtons, replaceButtons, matchCase, matchWholeWord, useRegularExpression) => {
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: 'Viewlet ViewletFind ViewletFindWidget FindWidget',
+    childCount: 2,
+    role: Group
+  });
+  dom.push(...getSearchToggleButtonVirtualDom(replaceExpanded, 'handleClick'));
+  dom.push({
+    type: Div,
+    className: FindWidgetRight,
+    childCount: replaceExpanded ? 2 : 1
+  });
+  dom.push(...getFindWidgetFindVirtualDom(matchCountText, findButtons));
+  if (replaceExpanded) {
+    dom.push(...getFindWidgetReplaceVirtualDom(replaceExpanded, replaceButtons));
   }
-  send(message) {
-    this._rawIpc.postMessage(message);
+  return dom;
+};
+
+const getMatchCountText = (matchIndex, matchCount) => {
+  if (matchCount === 0) {
+    return noResults();
   }
-  sendAndTransfer(message) {
-    const transfer = getTransferrables(message);
-    this._rawIpc.postMessage(message, transfer);
+  return matchOf(matchIndex + 1, matchCount);
+};
+
+const ArrowDown = 'ArrowDown';
+const ArrowUp = 'ArrowUp';
+const Close = 'Close';
+const Replace = 'Replace';
+const ReplaceAll = 'ReplaceAll';
+
+const renderValue = {
+  isEqual(oldState, newState) {
+    return oldState.value === newState.value;
+  },
+  apply(oldState, newState) {
+    return [SetValue, /* value */newState.value];
   }
-  dispose() {
-    // ignore
+};
+const renderDetails = {
+  isEqual(oldState, newState) {
+    return oldState.matchIndex === newState.matchIndex && oldState.matchCount === newState.matchCount && oldState.replaceExpanded === newState.replaceExpanded;
+  },
+  apply(oldState, newState) {
+    const matchCountText = getMatchCountText(newState.matchIndex, newState.matchCount);
+    const buttonsEnabled = newState.matchCount > 0;
+    const findButtons = [{
+      label: previousMatch(),
+      icon: ArrowUp,
+      disabled: !buttonsEnabled
+    }, {
+      label: nextMatch(),
+      icon: ArrowDown,
+      disabled: !buttonsEnabled
+    }, {
+      label: close(),
+      icon: Close,
+      disabled: false
+    }];
+    const replaceButtons = [{
+      label: replace(),
+      icon: Replace,
+      disabled: !buttonsEnabled
+    }, {
+      label: replaceAll(),
+      icon: ReplaceAll,
+      disabled: !buttonsEnabled
+    }];
+    const dom = getFindWidgetVirtualDom(matchCountText, newState.replaceExpanded, findButtons, replaceButtons);
+    return ['Viewlet.setDom2', dom];
   }
-  onClose(callback) {
-    // ignore
+};
+const renderBounds = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
-  onMessage(callback) {
-    this._rawIpc.addEventListener('message', callback);
-    this._rawIpc.start();
+};
+const renderFocus = {
+  isEqual(oldState, newState) {
+    return oldState.focused === newState.focused;
+  },
+  apply(oldState, newState) {
+    return ['focus', newState.focused];
   }
-}
-const wrap$2 = port => {
-  return new IpcChildWithMessagePort(port);
 };
-const IpcChildWithMessagePort$1 = {
-  __proto__: null,
-  listen: listen$2,
-  signal,
-  wrap: wrap$2
+// const getAriaLabel = (state: FindWidgetState) => {
+//   const { matchIndex, matchCount, value } = state
+//   return FindStrings.matchesFoundFor(matchIndex, matchCount, value)
+// }
+
+// const renderAriaAnnouncement = {
+//   isEqual(oldState: FindWidgetState, newState: FindWidgetState) {
+//     return (
+//       oldState.ariaAnnouncement === newState.ariaAnnouncement &&
+//       oldState.matchIndex === newState.matchIndex &&
+//       oldState.matchCount === newState.matchCount &&
+//       oldState.value === newState.value
+//     )
+//   },
+//   apply(oldState: FindWidgetState, newState: FindWidgetState) {
+//     const ariaLabel = getAriaLabel(newState)
+//     return [/* Viewlet.invoke */ 'Viewlet.ariaAnnounce', /* text */ ariaLabel]
+//   },
+// }
+
+const render$1 = [renderDetails, renderBounds, renderValue, renderFocus];
+const apply = (oldState, newState) => {
+  return renderParts(render$1, oldState, newState);
 };
 
-const getModule = method => {
-  switch (method) {
-    case ModuleWorker:
-      return IpcChildWithModuleWorker$1;
-    case ModuleWorkerAndMessagePort:
-      return IpcChildWithModuleWorkerAndMessagePort$1;
-    case MessagePort$1:
-      return IpcChildWithMessagePort$1;
-    default:
-      throw new Error('unexpected ipc type');
+const render = widget => {
+  const commands = apply(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push([command[0], uid, ...command.slice(1)]);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
   }
+  return wrappedCommands;
+};
+const add = widget => {
+  return addWidget(widget, 'FindWidget', render);
+};
+const remove = removeWidget;
+const Commands = {
+  'FindWidget.close': close$1,
+  'FindWidget.focusNext': focusNext$1,
+  'FindWidget.focusPrevious': focusPrevious$1,
+  'FindWidget.focusIndex': focusIndex$1,
+  'FindWidget.focusLast': focusLast,
+  'FindWidget.toggleReplace': toggleReplace,
+  'FindWidget.handleFocus': handleFocus,
+  'FindWidget.handleBlur': handleBlur
 };
 
-// @ts-ignore
-const listen$1 = async ({
-  method
-}) => {
-  const module = await getModule(method);
-  const rawIpc = await module.listen();
-  // @ts-ignore
-  if (module.signal) {
-    // @ts-ignore
-    module.signal(rawIpc);
-  }
-  const ipc = module.wrap(rawIpc);
-  return ipc;
+const EditorFindWidget = {
+  __proto__: null,
+  Commands,
+  add,
+  remove,
+  render
 };
 
-const listen = async () => {
-  registerCommands(commandMap);
-  register(Completion, EditorCompletionWidget);
-  const ipc = await listen$1({
-    method: Auto()
-  });
-  handleIpc(ipc);
-  listen$8(ipc);
+const registerWidgets = () => {
+  set(ColorPicker$1, EditorColorPickerWidget);
+  set(Completion, EditorCompletionWidget);
+  set(CompletionDetail$1, EditorCompletionDetailWidget);
+  set(Find, EditorFindWidget);
 };
 
 const main = async () => {
   await listen();
+  registerWidgets();
 };
 
 main();