@lvce-editor/server 0.31.4 → 0.31.6

package/static/{78cd874 → 7808edb}/packages/editor-worker/dist/editorWorkerMain.js

@@ -57,7 +57,6 @@ const boolean = value => {
   }
 };
 
-// @ts-ignore
 const clamp = (num, min, max) => {
   number$1(num);
   number$1(min);
@@ -109,10 +108,124 @@ const handleSliderPointerMove = (state, x, y) => {
   };
 };
 
+const ColoredMaskIcon = 'ColoredMaskIcon';
+const ColorPicker = 'ColorPicker';
+const ColorPickerBackgroundColor = 'ColorPickerBackgroundColor';
+const ColorPickerDark = 'ColorPickerDark';
+const ColorPickerLight = 'ColorPickerLight';
+const ColorPickerRectangle = 'ColorPickerRectangle';
+const ColorPickerSlider = 'ColorPickerSlider';
+const ColorPickerSliderThumb = 'ColorPickerSliderThumb';
+const Diagnostic = 'Diagnostic';
+const EditorCompletionItem = 'EditorCompletionItem';
+const EditorCompletionItemDeprecated = 'EditorCompletionItemDeprecated';
+const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
+const EditorCompletionItemHighlight = 'EditorCompletionItemHighlight';
+const EditorCursor = 'EditorCursor';
+const EditorRow = 'EditorRow';
+const EditorSelection = 'EditorSelection';
+const FileIcon = 'FileIcon';
+const HoverDisplayString = 'HoverDisplayString';
+const HoverDocumentation = 'HoverDocumentation';
+const HoverEditorRow = 'HoverEditorRow';
+const HoverProblem = 'HoverProblem';
+const HoverProblemDetail = 'HoverProblemDetail';
+const HoverProblemMessage = 'HoverProblemMessage';
+const Label = 'Label';
+const Viewlet = 'Viewlet';
+
+const HandlePointerDown = 'handlePointerDown';
+const HandleSashPointerDown = 'handleSashPointerDown';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const Div = 4;
+const Span = 8;
+const Text = 12;
+const Img = 17;
+
+const getColorPickerVirtualDom = () => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, ColorPicker),
+    onPointerDown: HandlePointerDown,
+    childCount: 3
+  }, {
+    type: Div,
+    className: ColorPickerRectangle,
+    childCount: 3
+  }, {
+    type: Div,
+    className: ColorPickerBackgroundColor,
+    childCount: 0
+  }, {
+    type: Div,
+    className: ColorPickerLight,
+    childCount: 0
+  }, {
+    type: Div,
+    className: ColorPickerDark,
+    childCount: 0
+  }, {
+    type: Div,
+    className: ColorPickerSlider,
+    childCount: 0
+  }, {
+    type: Div,
+    className: ColorPickerSliderThumb,
+    childCount: 0
+  }];
+};
+
+const SetBounds = 'setBounds';
+const SetColor = 'setColor';
+const SetContentHeight = 'setContentHeight';
+const SetNegativeMargin = 'setNegativeMargin';
+const SetOffsetX = 'setOffsetX';
+const SetScrollBar = 'setScrollBar';
+
+const renderColor = {
+  isEqual(oldState, newState) {
+    return oldState.color === newState.color;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetColor, /* color */newState.color];
+  }
+};
+const renderOffsetX = {
+  isEqual(oldState, newState) {
+    return oldState.offsetX === newState.offsetX;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetOffsetX, /* offsetX */newState.offsetX];
+  }
+};
+const renderColorPickerDom = {
+  isEqual(oldState, newState) {
+    return oldState.min === newState.min && oldState.max === newState.max;
+  },
+  apply(oldState, newState) {
+    const dom = getColorPickerVirtualDom();
+    return ['Viewlet.setDom2', dom];
+  }
+};
+const render$4 = [renderColorPickerDom, renderColor, renderOffsetX];
+const renderColorPicker = async (oldState, newState) => {
+  const commands = [];
+  for (const item of render$4) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
 // TODO use numeric enum
 const CompositionUpdate = 'compositionUpdate';
 const ContentEditableInput = 'contentEditableInput';
-const Delete = 'delete';
+const DeleteLeft = 'deleteLeft';
 const DeleteHorizontalRight = 'deleteHorizontalRight';
 const EditorCut = 'editorCut';
 const EditorPasteText = 'editorPasteText';
@@ -125,37 +238,72 @@ const IndentMore = 'indentMore';
 const InsertLineBreak = 'insertLineBreak';
 const ToggleBlockComment = 'toggleBlockComment';
 
-const splitLines$2 = lines => {
-  if (!lines) {
-    return [];
+const modules = Object.create(null);
+const register = (id, value) => {
+  modules[id] = value;
+};
+const get$7 = id => {
+  return modules[id];
+};
+
+const getModule$2 = id => {
+  return get$7(id);
+};
+
+const applyWidgetChange = (editor, widget, changes) => {
+  const module = getModule$2(widget.id);
+  if (changes.length === 1 && changes[0].origin === EditorType && module.handleEditorType) {
+    const newState = module.handleEditorType(editor, widget.newState);
+    return {
+      ...widget,
+      newState
+    };
   }
-  return lines.split('\n');
+  if (changes.length === 1 && changes[0].origin === DeleteLeft && module.handleEditorDeleteLeft) {
+    const newState = module.handleEditorDeleteLeft(editor, widget.newState);
+    return {
+      ...widget,
+      newState
+    };
+  }
+  return widget;
 };
 
-/**
- *
- * @param {number} size
- * @param {number} contentSize
- * @param {number} minimumSliderSize
- * @returns
- */
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
+const applyWidgetChanges = (editor, changes) => {
+  const widgets = editor.widgets || [];
+  if (widgets.length === 0) {
+    return widgets;
   }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+  const newWidgets = [];
+  for (const widget of widgets) {
+    const newWidget = applyWidgetChange(editor, widget, changes);
+    if (newWidget.newState) {
+      newWidgets.push(newWidget);
+    }
+  }
+  return newWidgets;
 };
+
 const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
   const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
   return scrollBarOffset;
 };
 const getScrollBarY = getScrollBarOffset;
+
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
 const getScrollBarWidth = (width, longestLineWidth) => {
   if (width > longestLineWidth) {
     return 0;
   }
   return width ** 2 / longestLineWidth;
 };
+
 const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   const halfScrollBarHeight = scrollBarHeight / 2;
   if (relativeY <= halfScrollBarHeight) {
@@ -179,6 +327,13 @@ const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   };
 };
 
+const splitLines$2 = lines => {
+  if (!lines) {
+    return [];
+  }
+  return lines.split('\n');
+};
+
 // based on https://github.com/microsoft/vscode/blob/c0769274fa136b45799edeccc0d0a2f645b75caf/src/vs/base/common/arrays.ts#L625 (License MIT)
 
 // @ts-ignore
@@ -274,7 +429,7 @@ const applyEdits = (textDocument, changes) => {
 const getLine = (textDocument, index) => {
   return textDocument.lines[index];
 };
-const getText = state => {
+const getText$1 = state => {
   return joinLines$2(state.lines);
 };
 const RE_WHITESPACE = /^\s+/;
@@ -362,8 +517,7 @@ const positionAt = (textDocument, offset) => {
 };
 
 // TODO this should be in a separate scrolling module
-// @ts-ignore
-const setDeltaY$3 = (state, value) => {
+const setDeltaY$2 = (state, value) => {
   object(state);
   number$1(value);
   const {
@@ -401,23 +555,34 @@ const getSelectionPairs = (selections, i) => {
   return [first, second, third, fourth, 0];
 };
 
-const state$b = {
-  ctx: undefined
-};
+const Dash = '-';
+const Dot = '.';
+const EmptyString = '';
+const Space = ' ';
+const Tab = '\t';
+const Underline = '_';
+const DoubleQuote$1 = '"';
+const T = 't';
 
-/**
- * @param {()=>OffscreenCanvasRenderingContext2D} createCtx
- * @returns {OffscreenCanvasRenderingContext2D}
- */
-const getOrCreate = createCtx => {
-  if (state$b.ctx) {
-    return state$b.ctx;
+const getTabCount = string => {
+  let count = 0;
+  for (const element of string) {
+    if (element === Tab) {
+      count++;
+    }
   }
-  state$b.ctx = createCtx();
-  return state$b.ctx;
+  return count;
+};
+
+const getFontString = (fontWeight, fontSize, fontFamily) => {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+};
+
+const getLetterSpacingString = letterSpacing => {
+  return `${letterSpacing}px`;
 };
 
-const createCtx = () => {
+const createMeasureContext = () => {
   const canvas = new OffscreenCanvas(0, 0);
   const ctx = /** @type {OffscreenCanvasRenderingContext2D} */canvas.getContext('2d');
   if (!ctx) {
@@ -425,19 +590,23 @@ const createCtx = () => {
   }
   return ctx;
 };
-const getContext = () => {
-  const ctx = getOrCreate(createCtx);
-  return ctx;
-};
 
-// @ts-ignore
-const getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+const state$b = {
+  ctx: undefined
+};
+const getOrCreate = createCtx => {
+  if (state$b.ctx) {
+    return state$b.ctx;
+  }
+  state$b.ctx = createCtx();
+  return state$b.ctx;
 };
 
-const getLetterSpacingString = letterSpacing => {
-  return `${letterSpacing}px`;
+const getContext = () => {
+  const ctx = getOrCreate(createMeasureContext);
+  return ctx;
 };
+
 const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
   string(text);
   number$1(fontWeight);
@@ -464,14 +633,6 @@ const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing,
   return width;
 };
 
-const Dash = '-';
-const Dot = '.';
-const EmptyString = '';
-const Space = ' ';
-const Tab = '\t';
-const Underline = '_';
-const T = 't';
-
 const normalizeText = (text, normalize, tabSize) => {
   if (normalize) {
     return text.replaceAll(Tab, Space.repeat(tabSize));
@@ -482,17 +643,6 @@ const shouldNormalizeText = text => {
   return text.includes(Tab);
 };
 
-// TODO visible selections could also be uint16array
-// [top1, left1, width1, height1, top2, left2, width2, height2...]
-const getTabCount = string => {
-  let count = 0;
-  for (const element of string) {
-    if (element === '\t') {
-      count++;
-    }
-  }
-  return count;
-};
 const getX = (line, column, fontWeight, fontSize, fontFamily, isMonospaceFont, letterSpacing, tabSize, halfCursorWidth, width, averageCharWidth, difference = 0) => {
   if (!line) {
     return 0;
@@ -517,6 +667,7 @@ const getX = (line, column, fontWeight, fontSize, fontFamily, isMonospaceFont, l
   const partialText = normalizedLine.slice(0, column + tabCount);
   return measureTextWidth(partialText, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, averageCharWidth) - halfCursorWidth + difference;
 };
+
 const getY = (row, minLineY, rowHeight) => {
   return (row - minLineY) * rowHeight;
 };
@@ -604,6 +755,9 @@ const push = (selections, startRowIndex, startColumnIndex, endRowIndex, endColum
   newSelections[oldLength + 4] = endColumnIndex;
   return newSelections;
 };
+
+// TODO maybe only accept sorted selection edits in the first place
+
 const emptyCursors = [];
 const getCursorArray = (visibleCursors, isFocused) => {
   if (!isFocused) {
@@ -768,22 +922,15 @@ const applyEdit$1 = (editor, changes) => {
 };
 
 // TODO
-// @ts-ignore
 const setDeltaYFixedValue$1 = (editor, value) => {
-  return setDeltaY$3(editor, value);
+  return setDeltaY$2(editor, value);
 };
-
-// @ts-ignore
-const setDeltaY$2 = (editor, value) => {
+const setDeltaY$1 = (editor, value) => {
   return setDeltaYFixedValue$1(editor, editor.deltaY + value);
 };
-
-// @ts-ignore
 const isAutoClosingChange = change => {
   return change.origin === EditorTypeWithAutoClosing;
 };
-
-// @ts-ignore
 const applyAutoClosingRangesEdit = (editor, changes) => {
   const {
     autoClosingRanges = []
@@ -823,7 +970,6 @@ const scheduleSelections = (editor, selectionEdits) => {
  * @param {Uint32Array|undefined} selectionChanges
  * @returns
  */
-// @ts-ignore
 const scheduleDocumentAndCursorsSelections = (editor, changes, selectionChanges = undefined) => {
   object(editor);
   array(changes);
@@ -853,7 +999,12 @@ const scheduleDocumentAndCursorsSelections = (editor, changes, selectionChanges
     invalidStartIndex,
     autoClosingRanges
   };
-  return newEditor;
+  const newWidgets = applyWidgetChanges(newEditor, changes);
+  const newEditor2 = {
+    ...newEditor,
+    widgets: newWidgets
+  };
+  return newEditor2;
 };
 // @ts-ignore
 const scheduleDocumentAndCursorsSelectionIsUndo = (editor, changes) => {
@@ -918,8 +1069,6 @@ const scheduleDocument = async (editor, changes) => {
   //   /* selectionInfos */ selectionInfos,
   // ])
 };
-
-// @ts-ignore
 const hasSelection = editor => {
   // TODO editor.selections should always be defined
   return editor.selections && editor.selections.length > 0;
@@ -984,34 +1133,6 @@ const set$6 = (id, oldEditor, newEditor) => {
   };
 };
 
-// TODO this should be in a separate scrolling module
-const setDeltaY$1 = (state, value) => {
-  object(state);
-  number$1(value);
-  const {
-    finalDeltaY,
-    deltaY,
-    numberOfVisibleLines,
-    height,
-    scrollBarHeight,
-    itemHeight
-  } = state;
-  const newDeltaY = clamp(value, 0, finalDeltaY);
-  if (deltaY === newDeltaY) {
-    return state;
-  }
-  const newMinLineY = Math.floor(newDeltaY / itemHeight);
-  const newMaxLineY = newMinLineY + numberOfVisibleLines;
-  const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height, scrollBarHeight);
-  return {
-    ...state,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    deltaY: newDeltaY,
-    scrollBarY
-  };
-};
-
 const Two = '2.0';
 class AssertionError extends Error {
   constructor(message) {
@@ -1056,7 +1177,7 @@ const set$5 = (id, fn) => {
 const get$5 = id => {
   return state$1$1.callbacks[id];
 };
-const remove = id => {
+const remove$1 = id => {
   delete state$1$1.callbacks[id];
 };
 const state$a = {
@@ -1102,7 +1223,7 @@ const resolve = (id, args) => {
     return;
   }
   fn(args);
-  remove(id);
+  remove$1(id);
 };
 const create$2$1 = (method, params) => {
   const {
@@ -1126,7 +1247,7 @@ class JsonRpcError extends Error {
     this.name = 'JsonRpcError';
   }
 }
-const NewLine$2 = '\n';
+const NewLine$3 = '\n';
 const DomException = 'DOMException';
 const ReferenceError$1 = 'ReferenceError';
 const SyntaxError$1 = 'SyntaxError';
@@ -1174,20 +1295,20 @@ const constructError = (message, type, name) => {
   return new ErrorConstructor(message);
 };
 const getNewLineIndex$2 = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine$2, startIndex);
+  return string.indexOf(NewLine$3, startIndex);
 };
 const joinLines$1 = lines => {
-  return lines.join(NewLine$2);
+  return lines.join(NewLine$3);
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
 const splitLines$1 = lines => {
-  return lines.split(NewLine$2);
+  return lines.split(NewLine$3);
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
   if (parentStack.startsWith('    at')) {
-    parentStack = error.message + NewLine$2 + parentStack;
+    parentStack = error.message + NewLine$3 + parentStack;
   }
   return parentStack;
 };
@@ -1199,14 +1320,14 @@ const restoreJsonRpcError = error => {
   if (error && error.code && error.code === MethodNotFound) {
     const restoredError = new JsonRpcError(error.message);
     const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine$2 + currentStack;
+    restoredError.stack = parentStack + NewLine$3 + currentStack;
     return restoredError;
   }
   if (error && error.message) {
     const restoredError = constructError(error.message, error.type, error.name);
     if (error.data) {
       if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine$2 + error.data.stack + NewLine$2 + currentStack;
+        restoredError.stack = error.data.type + ': ' + error.message + NewLine$3 + error.data.stack + NewLine$3 + currentStack;
       } else if (error.data.stack) {
         restoredError.stack = error.data.stack;
       }
@@ -1816,12 +1937,13 @@ const createEditor = async ({
     letterSpacing,
     charWidth,
     uid: id,
-    id
+    id,
+    widgets: []
   };
   // TODO avoid creating intermediate editors here
   const newEditor1 = setBounds(editor, x, y, width, height, 9);
   const newEditor2 = setText(newEditor1, content);
-  const newEditor3 = setDeltaY$1(newEditor2, 0);
+  const newEditor3 = setDeltaY$2(newEditor2, 0);
   const newEditor4 = {
     ...newEditor3,
     focused: true
@@ -1888,9 +2010,6 @@ const addCursorBelow = editor => {
   };
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const applyEdit = async (editor, changes) => {
   object(editor);
   array(changes);
@@ -1938,7 +2057,6 @@ const replaceRange = (editor, ranges, replacement, origin) => {
   return changes;
 };
 
-// @ts-ignore
 const editorReplaceSelections = (editor, replacement, origin) => {
   const {
     selections
@@ -1946,27 +2064,7 @@ const editorReplaceSelections = (editor, replacement, origin) => {
   return replaceRange(editor, selections, replacement, origin);
 };
 
-const getAccurateColumnIndexAscii = (
-// @ts-ignore
-line,
-// @ts-ignore
-guess,
-// @ts-ignore
-averageCharWidth,
-// @ts-ignore
-eventX,
-// @ts-ignore
-fontWeight,
-// @ts-ignore
-fontSize,
-// @ts-ignore
-fontFamily,
-// @ts-ignore
-letterSpacing,
-// @ts-ignore
-isMonospaceFont,
-// @ts-ignore
-charWidth) => {
+const getAccurateColumnIndexAscii = (line, guess, averageCharWidth, eventX, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth) => {
   for (let i = guess; i < line.length; i++) {
     const width = measureTextWidth(line.slice(0, i), fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
     if (eventX - width < averageCharWidth / 2) {
@@ -2080,7 +2178,6 @@ const getAccurateColumnIndex = (line, fontWeight, fontSize, fontFamily, letterSp
   return getAccurateColumnIndexUnicode(line, normalizedGuess, charWidth, eventX, fontWeight, fontSize, fontFamily, letterSpacing);
 };
 
-// @ts-ignore
 const at = (editor, eventX, eventY) => {
   object(editor);
   number$1(eventX);
@@ -2124,7 +2221,6 @@ const at = (editor, eventX, eventY) => {
  * @param {number} columnIndex
  * @returns
  */
-// @ts-ignore
 const x = (editor, rowIndex, columnIndex) => {
   const {
     columnWidth,
@@ -2133,8 +2229,6 @@ const x = (editor, rowIndex, columnIndex) => {
   const offsetX = columnIndex * columnWidth + x;
   return offsetX;
 };
-
-// @ts-ignore
 const y = (editor, rowIndex) => {
   const {
     rowHeight,
@@ -2240,9 +2334,6 @@ const braceCompletion = async (editor, text) => {
   }
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const cancelSelection = editor => {
   const selections = editor.selections;
   if (selections.length === 4 && selections[0] === selections[2] && selections[1] === selections[3]) {
@@ -2253,12 +2344,24 @@ const cancelSelection = editor => {
   return scheduleSelections(editor, newSelections);
 };
 
-const closeCompletion = async editor => {
-  // TODO
-  const completionUid = editor.completionUid;
-  await invoke$3('Viewlet.dispose', completionUid);
-  editor.completionUid = 0;
-  return editor;
+const Completion = 'completion';
+
+const isCompletionWidget = widget => {
+  return widget.id === Completion;
+};
+const closeCompletion = editor => {
+  const {
+    widgets
+  } = editor;
+  const completionWidgetIndex = widgets.findIndex(isCompletionWidget);
+  if (completionWidgetIndex === -1) {
+    return editor;
+  }
+  const newWidgets = [...widgets.slice(0, completionWidgetIndex), ...widgets.slice(completionWidgetIndex + 1)];
+  return {
+    ...editor,
+    widgets: newWidgets
+  };
 };
 
 // @ts-ignore
@@ -2316,17 +2419,6 @@ const compositionEnd = (editor, data) => {
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 
-/**
- *
- * @param {string} string
- * @param {number|undefined} startIndex
- * @returns
- */
-// @ts-ignore
-const getNewLineIndex$1 = (string, startIndex = undefined) => {
-  return string.indexOf('\n', startIndex);
-};
-
 const normalizeLine$1 = line => {
   if (line.startsWith('Error: ')) {
     return line.slice(`Error: `.length);
@@ -2336,7 +2428,17 @@ const normalizeLine$1 = line => {
   }
   return line;
 };
-
+const getCombinedMessage$1 = (error, message) => {
+  const stringifiedError = normalizeLine$1(`${error}`);
+  if (message) {
+    return `${message}: ${stringifiedError}`;
+  }
+  return stringifiedError;
+};
+const NewLine$2 = '\n';
+const getNewLineIndex$1 = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine$2, startIndex);
+};
 const mergeStacks$1 = (parent, child) => {
   if (!child) {
     return parent;
@@ -2354,28 +2456,6 @@ const mergeStacks$1 = (parent, child) => {
   }
   return child;
 };
-
-// @ts-nocheck
-const stringifyError = error => {
-  if (error instanceof DOMException && error.message) {
-    return `DOMException: ${error.message}`;
-  }
-  const errorPrefixes = ['Error: ', 'VError: '];
-  const stringifiedError = `${error}`;
-  for (const errorPrefix of errorPrefixes) {
-    if (stringifiedError.startsWith(errorPrefix)) {
-      return stringifiedError.slice(errorPrefix.length);
-    }
-  }
-  return stringifiedError;
-};
-const getCombinedMessage$1 = (error, message) => {
-  const stringifiedError = stringifyError(error);
-  if (message) {
-    return `${message}: ${stringifiedError}`;
-  }
-  return `${stringifiedError}`;
-};
 let VError$1 = class VError extends Error {
   constructor(error, message) {
     const combinedMessage = getCombinedMessage$1(error, message);
@@ -2385,12 +2465,16 @@ let VError$1 = class VError extends Error {
       this.stack = mergeStacks$1(this.stack, error.stack);
     }
     if (error.codeFrame) {
+      // @ts-ignore
       this.codeFrame = error.codeFrame;
     }
+    if (error.code) {
+      // @ts-ignore
+      this.code = error.code;
+    }
   }
 };
 
-// @ts-ignore
 const writeText = async text => {
   try {
     string(text);
@@ -2458,36 +2542,30 @@ const copy = async editor => {
 // TODO handle multiline selection
 // TODO handle multiple cursors
 
-// @ts-ignore
 const copyLineDown = editor => {
   const {
-    selections,
-    primarySelectionIndex
+    selections
   } = editor;
-  const rowIndex = selections[primarySelectionIndex];
+  const rowIndex = selections[0];
   number$1(rowIndex);
   const position = {
     rowIndex,
     columnIndex: 0
   };
   const changes = [{
-    inserted: [getLine(editor, rowIndex), ''],
-    deleted: [''],
     start: position,
-    end: position
+    end: position,
+    inserted: [getLine(editor, rowIndex), ''],
+    deleted: ['']
   }];
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const copyLineUp = editor => {
   const {
-    selections,
-    primarySelectionIndex
+    selections
   } = editor;
-  const rowIndex = selections[primarySelectionIndex];
+  const rowIndex = selections[0];
   const position = {
     rowIndex: rowIndex,
     columnIndex: 0
@@ -2585,7 +2663,6 @@ const editorCursorHorizontalLeft = (editor, getDelta) => {
   return scheduleSelections(editor, newSelections);
 };
 
-// @ts-ignore
 const characterLeft = (line, columnIndex) => {
   if (!supported()) {
     return 1;
@@ -2597,8 +2674,6 @@ const characterLeft = (line, columnIndex) => {
 const twoCharactersLeft = () => {
   return 2;
 };
-
-// @ts-ignore
 const characterRight = (line, columnIndex) => {
   if (!supported()) {
     return 1;
@@ -2607,13 +2682,9 @@ const characterRight = (line, columnIndex) => {
   const next = segmenter.at(line, columnIndex);
   return next.segment.length;
 };
-
-// @ts-ignore
 const isWhitespace = char => {
   return char === Space || char === Tab;
 };
-
-// @ts-ignore
 const lineCharacterStart = (line, columnIndex) => {
   if (line.length === 0) {
     return 0;
@@ -2625,13 +2696,9 @@ const lineCharacterStart = (line, columnIndex) => {
   }
   return columnIndex;
 };
-
-// @ts-ignore
 const lineEnd = (line, columnIndex) => {
   return line.length - columnIndex;
 };
-
-// @ts-ignore
 const tryRegexArray = (partialLine, regexArray) => {
   for (const regex of regexArray) {
     const match = partialLine.match(regex);
@@ -2656,8 +2723,6 @@ const wordLeft = (line, columnIndex) => {
 const RE_WORD_RIGHT_1 = /^\s*[\u00C0-\u017F\w]+/i;
 const RE_WORD_RIGHT_2 = /^[^a-zA-Z\d]+\w*/;
 const RE_WORD_RIGHT = [RE_WORD_RIGHT_1, RE_WORD_RIGHT_2];
-
-// @ts-ignore
 const wordRight = (line, columnIndex) => {
   const partialLine = line.slice(columnIndex);
   return tryRegexArray(partialLine, RE_WORD_RIGHT);
@@ -2672,8 +2737,6 @@ const RE_PARTIAL_WORD_LEFT_7 = /(?<![A-Z])[A-Z]_+\s*$/;
 const RE_PARTIAL_WORD_LEFT_8 = /[a-z]+\s*$/;
 const RE_PARTIAL_WORD_LEFT_9 = /[^a-zA-Z\d\s]+\s*$/;
 const RE_PARTIAL_WORD_LEFT = [RE_PARTIAL_WORD_LEFT_1, RE_PARTIAL_WORD_LEFT_2, RE_PARTIAL_WORD_LEFT_3, RE_PARTIAL_WORD_LEFT_4, RE_PARTIAL_WORD_LEFT_5, RE_PARTIAL_WORD_LEFT_6, RE_PARTIAL_WORD_LEFT_7, RE_PARTIAL_WORD_LEFT_8, RE_PARTIAL_WORD_LEFT_9];
-
-// @ts-ignore
 const wordPartLeft = (line, columnIndex) => {
   const partialLine = line.slice(0, columnIndex);
   return tryRegexArray(partialLine, RE_PARTIAL_WORD_LEFT);
@@ -2692,8 +2755,6 @@ const ARRAY_PARTIAL_WORD_RIGHT_1 = [RE_PARTIAL_WORD_RIGHT_1,
 RE_PARTIAL_WORD_RIGHT_3, RE_PARTIAL_WORD_RIGHT_4, RE_PARTIAL_WORD_RIGHT_5, RE_PARTIAL_WORD_RIGHT_6];
 const ARRAY_PARTIAL_WORD_RIGHT_2 = [RE_PARTIAL_WORD_RIGHT_1, RE_PARTIAL_WORD_RIGHT_2, RE_PARTIAL_WORD_RIGHT_3, RE_PARTIAL_WORD_RIGHT_4, RE_PARTIAL_WORD_RIGHT_5, RE_PARTIAL_WORD_RIGHT_6];
 const RE_UPPERCASE = /[A-Z]/;
-
-// @ts-ignore
 const wordPartRight = (line, columnIndex) => {
   const partialLine = line.slice(columnIndex);
   // line[columnIndex]//?
@@ -2708,7 +2769,6 @@ const cursorCharacterLeft = editor => {
   return editorCursorHorizontalLeft(editor, characterLeft);
 };
 
-// @ts-ignore
 const editorGetPositionRight = (position, lines, getDelta) => {
   const rowIndex = position.rowIndex;
   const columnIndex = position.columnIndex;
@@ -2727,8 +2787,6 @@ const editorGetPositionRight = (position, lines, getDelta) => {
     columnIndex: columnIndex + delta
   };
 };
-
-// @ts-ignore
 const moveToPositionRight = (selections, i, rowIndex, columnIndex, lines, getDelta) => {
   if (rowIndex >= lines.length) {
     return;
@@ -2744,9 +2802,6 @@ const moveToPositionRight = (selections, i, rowIndex, columnIndex, lines, getDel
   }
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const getNewSelections$a = (selections, lines, getDelta) => {
   const newSelections = new Uint32Array(selections.length);
   for (let i = 0; i < selections.length; i += 4) {
@@ -2760,8 +2815,6 @@ const getNewSelections$a = (selections, lines, getDelta) => {
   }
   return newSelections;
 };
-
-// @ts-ignore
 const editorCursorHorizontalRight = (editor, getDelta) => {
   const {
     lines,
@@ -2771,7 +2824,6 @@ const editorCursorHorizontalRight = (editor, getDelta) => {
   return scheduleSelections(editor, newSelections);
 };
 
-// @ts-ignore
 const cursorCharacterRight = editor => {
   return editorCursorHorizontalRight(editor, characterRight);
 };
@@ -2808,9 +2860,6 @@ const cursorSet = (editor, rowIndex, columnIndex) => {
   return scheduleSelections(editor, selectionEdits);
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const moveSelectionWithoutIntlSegmenter = (selections, i, selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn) => {
   if (selectionStartRow === 0) {
     moveRangeToPosition$1(selections, i, 0, 0);
@@ -2818,29 +2867,17 @@ const moveSelectionWithoutIntlSegmenter = (selections, i, selectionStartRow, sel
     moveRangeToPosition$1(selections, i, selectionStartRow - 1, selectionStartColumn);
   }
 };
-
-// @ts-ignore
 const getNewSelections$8 = selections => {
   return map(selections, moveSelectionWithoutIntlSegmenter);
 };
-
-// @ts-ignore
 const cursorVertical = (editor, getPosition, getEdgePosition, delta) => {
-  // if (TextSegmenter.supported()) {
-  //   return editorCursorsVerticalWithIntlSegmenter(
-  //     editor,
-  //     getPosition,
-  //     getEdgePosition,
-  //     delta
-  //   )
-  // }
-  const selections = editor.selections;
-  // @ts-ignore
+  const {
+    selections
+  } = editor;
   const newSelections = getNewSelections$8(selections);
   return scheduleSelections(editor, newSelections);
 };
 
-// @ts-ignore
 const cursorUp = editor => {
   return cursorVertical(editor);
 };
@@ -2863,12 +2900,10 @@ const cursorWordPartRight = editor => {
   return editorCursorHorizontalRight(editor, wordPartRight);
 };
 
-// @ts-ignore
 const cursorWordRight = editor => {
   return editorCursorHorizontalRight(editor, wordRight);
 };
 
-// @ts-ignore
 const cutLine = async editor => {
   const {
     lines,
@@ -2880,7 +2915,6 @@ const cutLine = async editor => {
   const changes = replaceRange(editor, replaceRange$1, [''], EditorCut);
   const selectionChanges = new Uint32Array([startRowIndex, 0, startRowIndex, 0]);
   await writeText(line);
-  // @ts-ignore
   return scheduleDocumentAndCursorsSelections(editor, changes, selectionChanges);
 };
 
@@ -2900,7 +2934,6 @@ const cutSelectedText = async editor => {
   return scheduleDocumentAndCursorsSelections(editor, changes, selectionChanges);
 };
 
-// @ts-ignore
 const cut = editor => {
   const {
     selections
@@ -2916,7 +2949,7 @@ const cut = editor => {
 // @ts-ignore
 const getChanges$6 = (lines, selections, getDelta) => {
   const changes = [];
-  // @ts-ignore
+  // TODO avoid closure
   const deleteSelection = (selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn) => {
     const positionLeft = editorGetPositionLeft(selectionStartRow, selectionStartColumn, lines, getDelta);
     const selectionEnd = {
@@ -2933,7 +2966,7 @@ const getChanges$6 = (lines, selections, getDelta) => {
         start: positionLeft,
         end: selectionEnd
       }),
-      origin: Delete
+      origin: DeleteLeft
     });
   };
   forEach(selections, deleteSelection);
@@ -2969,9 +3002,6 @@ const isAllAutoClosingPairDelete = (autoClosingRanges, selections) => {
   return true;
 };
 
-// @ts-ignore
-
-// @ts-ignore
 const deleteLeftWithAutoClose = editor => {
   const {
     selections,
@@ -2984,8 +3014,6 @@ const deleteLeftWithAutoClose = editor => {
   const changes = getChanges$6(lines, selections, twoCharactersLeft);
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
-
-// @ts-ignore
 const editorDeleteHorizontalLeft = (editor, getDelta) => {
   const {
     autoClosingRanges = [],
@@ -2999,7 +3027,7 @@ const editorDeleteHorizontalLeft = (editor, getDelta) => {
     const changes = getChanges$6(lines, selections, getDelta);
     return scheduleDocumentAndCursorsSelections(editor, changes);
   }
-  const changes = editorReplaceSelections(editor, [''], Delete);
+  const changes = editorReplaceSelections(editor, [''], DeleteLeft);
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 
@@ -3165,13 +3193,9 @@ const format = async editor => {
   }
 };
 
-const RE_WORD_START$1 = /^\w+/;
-const RE_WORD_END$1 = /\w+$/;
-const getWordAt = (editor, rowIndex, columnIndex) => {
-  const {
-    lines
-  } = editor;
-  const line = lines[rowIndex];
+const RE_WORD_START$1 = /^[\w\-]+/;
+const RE_WORD_END$1 = /[\w\-]+$/;
+const getWordAt$1 = (line, columnIndex) => {
   const before = line.slice(0, columnIndex);
   const matchBefore = before.match(RE_WORD_END$1);
   const after = line.slice(columnIndex);
@@ -3187,11 +3211,7 @@ const getWordAt = (editor, rowIndex, columnIndex) => {
     word
   };
 };
-const getWordBefore = (editor, rowIndex, columnIndex) => {
-  const {
-    lines
-  } = editor;
-  const line = lines[rowIndex];
+const getWordBefore$1 = (line, columnIndex) => {
   const before = line.slice(0, columnIndex);
   const matchBefore = before.match(RE_WORD_END$1);
   if (matchBefore) {
@@ -3200,6 +3220,21 @@ const getWordBefore = (editor, rowIndex, columnIndex) => {
   return EmptyString;
 };
 
+const getWordAt = (editor, rowIndex, columnIndex) => {
+  const {
+    lines
+  } = editor;
+  const line = lines[rowIndex];
+  return getWordAt$1(line, columnIndex);
+};
+const getWordBefore = (editor, rowIndex, columnIndex) => {
+  const {
+    lines
+  } = editor;
+  const line = lines[rowIndex];
+  return getWordBefore$1(line, columnIndex);
+};
+
 // @ts-ignore
 const getDefinition = async (editor, offset) => {
   const definition = await invoke$3('ExtensionHostDefinition.executeDefinitionProvider', editor, offset);
@@ -3208,87 +3243,32 @@ const getDefinition = async (editor, offset) => {
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-
-/**
- *
- * @param {string} key
- * @param {any} placeholders
- * @returns {string}
- */
-// @ts-ignore
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
     return key;
   }
-  // @ts-ignore
   const replacer = (match, rest) => {
-    // @ts-ignore
     return placeholders[rest];
   };
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-/**
- * @enum {string}
- */
 const UiStrings = {
-  OrganizeImports: 'Organize Imports',
-  Copy: 'Copy',
-  CopyLineDown: 'Copy Line Down',
-  CopyLineUp: 'Copy Line Up',
-  Cut: 'Cut',
-  DuplicateSelection: 'Duplicate Selection',
-  FindAllImplementations: 'Find All Implementations',
-  FindAllReferences: 'Find All References',
   GoToDefinition: 'Go to Definition',
-  GoToTypeDefinition: 'Go to Type Definition',
-  MoveLineDown: 'Move Line Down',
-  MoveLineUp: 'Move Line Up',
   NoDefinitionFound: 'No definition found',
   NoDefinitionFoundFor: "No definition found for '{PH1}'",
   NoTypeDefinitionFound: 'No type definition found',
   NoTypeDefinitionFoundFor: "No type definition found for '{PH1}'",
-  Paste: 'Paste',
-  Redo: 'Redo',
-  SelectAll: 'Select All',
-  Separator: 'Separator',
-  ToggleBlockComment: 'Toggle Block Comment',
-  ToggleLineComment: 'Toggle Line Comment',
-  Undo: 'Undo',
-  FormatDocument: 'Format Document',
-  SourceActions: 'Source Actions',
-  EditorShowHover: 'Show Hover',
-  EditorFormatDocumentForced: 'Editor: Format Document (forced)',
-  EditorSelectNextOccurrence: 'Editor: Select Next Occurrence',
-  EditorSelectAllOccurrences: 'Editor: Select All Occurrences',
-  EditorGoToDefinition: 'Editor: Go To Definition',
-  EditorGoToTypeDefinition: 'Editor: Go To Type Definition',
-  EditorSelectInsideString: 'Editor: Select Inside String',
-  EditorIndent: 'Editor: Indent',
-  EditorUnindent: 'Editor: Unindent',
-  EditorSortLinesAscending: 'Editor: Sort Lines Ascending',
-  EditorToggleComment: 'Editor: Toggle Comment',
-  EditorSelectUp: 'Editor: Select Up',
-  EditorSelectDown: 'Editor: Select Down',
-  EditorToggleBlockComment: 'Editor: Toggle Block Comment',
-  EditorOpenColorPicker: 'Editor: Open Color Picker',
-  EditorCloseColorPicker: 'Editor: Close Color Picker',
-  EditorCopyLineDown: 'Editor: Copy Line Down',
-  EditorCopyLineUp: 'Editor: Copy Line Up',
-  Replace: 'replace'
+  NoResults: 'No Results'
 };
 const noDefinitionFound = () => {
   return i18nString(UiStrings.NoDefinitionFound);
 };
-
-// @ts-ignore
 const noDefinitionFoundFor = word => {
   return i18nString(UiStrings.NoDefinitionFoundFor, {
     PH1: word
   });
 };
-
-// @ts-ignore
 const noTypeDefinitionFoundFor = word => {
   return i18nString(UiStrings.NoTypeDefinitionFoundFor, {
     PH1: word
@@ -3297,6 +3277,9 @@ const noTypeDefinitionFoundFor = word => {
 const noTypeDefinitionFound = () => {
   return i18nString(UiStrings.NoTypeDefinitionFound);
 };
+const noResults = () => {
+  return i18nString(UiStrings.NoResults);
+};
 
 // @ts-ignore
 const goTo = async ({
@@ -4127,7 +4110,7 @@ const handleTouchEnd = (editor, touchEvent) => {
 
 // @ts-ignore
 const setDeltaY = (editor, deltaY) => {
-  return setDeltaY$2(editor, deltaY);
+  return setDeltaY$1(editor, deltaY);
 };
 
 // @ts-ignore
@@ -4452,39 +4435,540 @@ const moveSelectionPx = (editor, x, y) => {
   return editorMoveSelection(editor, position);
 };
 
-const FindWidget = 'FindWidget';
-const openFind = async state => {
-  await invoke$3('Viewlet.openWidget', FindWidget);
-  return state;
-};
+const OnCompletion = 'onCompletion';
+const OnHover = 'onHover';
 
-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);
+// TODO add tests for this
+const activateByEvent = async event => {
+  await invoke$3('ExtensionHostManagement.activateByEvent', event);
 };
 
-// @ts-ignore
+const execute = async ({
+  editor,
+  args,
+  event,
+  method,
+  noProviderFoundMessage,
+  noProviderFoundResult = undefined
+}) => {
+  const fullEvent = `${event}:${editor.languageId}`;
+  await activateByEvent(fullEvent);
+  const result = await invoke$2(method, editor.uid, ...args);
+  return result;
+};
 
-// @ts-ignore
-const pasteText = (editor, text) => {
-  const insertedLines = splitLines$2(text);
-  const changes = editorReplaceSelections(editor, insertedLines, EditorPasteText);
-  return scheduleDocumentAndCursorsSelections(editor, changes);
+const combineResults = results => {
+  return results[0] ?? [];
+};
+const executeCompletionProvider = (editor, offset) => {
+  return execute({
+    editor,
+    event: OnCompletion,
+    method: CompletionExecute,
+    args: [offset],
+    noProviderFoundMessage: 'no completion provider found',
+    noProviderFoundResult: [],
+    combineResults
+  });
+};
+const combineResultsResolve = items => {
+  return items[0] ?? undefined;
+};
+const executeResolveCompletionItem = (editor, offset, name, completionItem) => {
+  return execute({
+    editor,
+    event: OnCompletion,
+    method: CompletionResolveExecute,
+    args: [offset, name, completionItem],
+    noProviderFoundMessage: 'no completion provider found',
+    noProviderFoundResult: [],
+    combineResults: combineResultsResolve
+  });
 };
 
-const paste = async editor => {
-  const text = await invoke$3('ClipBoard.readText');
-  string(text);
-  return pasteText(editor, text);
+// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
+const getCompletions = async editor => {
+  const {
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  // Editor.sync(editor)
+  const offset = await offsetAt(editor, rowIndex, columnIndex);
+  const completions = await executeCompletionProvider(editor, offset);
+  return completions;
 };
 
-const getErrorMessage$1 = error => {
-  if (!error) {
-    return `Error: ${error}`;
+// TODO don't send unnecessary parts of completion item like matches
+const resolveCompletion = async (editor, name, completionItem) => {
+  try {
+    object(editor);
+    string(name);
+    object(completionItem);
+    const rowIndex = editor.selections[0];
+    const columnIndex = editor.selections[1];
+    const offset = await offsetAt(editor, rowIndex, columnIndex);
+    // @ts-ignore
+    const resolvedCompletionItem = await executeResolveCompletionItem(editor, offset, name, completionItem);
+    return resolvedCompletionItem;
+  } catch {
+    return undefined;
+  }
+};
+
+const None$1 = 1;
+
+const EmptyMatches = [];
+
+const Diagonal = 1;
+const Left = 2;
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+
+const createTable = size => {
+  const table = [];
+  for (let i = 0; i < size; i++) {
+    const row = new Uint8Array(size);
+    table.push(row);
+  }
+  return table;
+};
+
+const isLowerCase = char => {
+  return char === char.toLowerCase();
+};
+
+const isUpperCase = char => {
+  return char === char.toUpperCase();
+};
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+const isGap = (columnCharBefore, columnChar) => {
+  switch (columnCharBefore) {
+    case Dash:
+    case Underline:
+    case EmptyString:
+    case T:
+    case Space:
+    case Dot:
+      return true;
+  }
+  if (isLowerCase(columnCharBefore) && isUpperCase(columnChar)) {
+    return true;
+  }
+  return false;
+};
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+const getScore = (rowCharLow, rowChar, columnCharBefore, columnCharLow, columnChar, column, wordLength, isDiagonalMatch) => {
+  if (rowCharLow !== columnCharLow) {
+    return -1;
+  }
+  const isMatch = rowChar === columnChar;
+  if (isMatch) {
+    if (isDiagonalMatch) {
+      return 8;
+    }
+    if (isGap(columnCharBefore, columnChar)) {
+      return 8;
+    }
+    return 5;
+  }
+  if (isGap(columnCharBefore, columnChar)) {
+    return 8;
+  }
+  return 5;
+};
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+
+const isPatternInWord = (patternLow, patternPos, patternLen, wordLow, wordPos, wordLen) => {
+  while (patternPos < patternLen && wordPos < wordLen) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      patternPos += 1;
+    }
+    wordPos += 1;
+  }
+  return patternPos === patternLen; // pattern must be exhausted
+};
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+const traceHighlights = (table, arrows, patternLength, wordLength) => {
+  let row = patternLength;
+  let column = wordLength;
+  const matches = [];
+  while (row >= 1 && column >= 1) {
+    const arrow = arrows[row][column];
+    if (arrow === Left) {
+      column--;
+    } else if (arrow === Diagonal) {
+      row--;
+      column--;
+      const start = column + 1;
+      while (row >= 1 && column >= 1) {
+        const arrow = arrows[row][column];
+        if (arrow === Left) {
+          break;
+        }
+        if (arrow === Diagonal) {
+          row--;
+          column--;
+        }
+      }
+      const end = column;
+      matches.unshift(end, start);
+    }
+  }
+  matches.unshift(table[patternLength][wordLength - 1]);
+  return matches;
+};
+
+// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+const gridSize = 128;
+const table = createTable(gridSize);
+const arrows = createTable(gridSize);
+const filterCompletionItem = (pattern, word) => {
+  const patternLength = Math.min(pattern.length, gridSize - 1);
+  const wordLength = Math.min(word.length, gridSize - 1);
+  const patternLower = pattern.toLowerCase();
+  const wordLower = word.toLowerCase();
+  if (!isPatternInWord(patternLower, 0, patternLength, wordLower, 0, wordLength)) {
+    return EmptyMatches;
+  }
+  let strongMatch = false;
+  for (let row = 1; row < patternLength + 1; row++) {
+    const rowChar = pattern[row - 1];
+    const rowCharLow = patternLower[row - 1];
+    for (let column = 1; column < wordLength + 1; column++) {
+      const columnChar = word[column - 1];
+      const columnCharLow = wordLower[column - 1];
+      const columnCharBefore = word[column - 2] || '';
+      const isDiagonalMatch = arrows[row - 1][column - 1] === Diagonal;
+      const score = getScore(rowCharLow, rowChar, columnCharBefore, columnCharLow, columnChar, column, wordLength, isDiagonalMatch);
+      if (row === 1 && score > 5) {
+        strongMatch = true;
+      }
+      let diagonalScore = score + table[row - 1][column - 1];
+      if (isDiagonalMatch && score !== -1) {
+        diagonalScore += 2;
+      }
+      const leftScore = table[row][column - 1];
+      if (leftScore > diagonalScore) {
+        table[row][column] = leftScore;
+        arrows[row][column] = Left;
+      } else {
+        table[row][column] = diagonalScore;
+        arrows[row][column] = Diagonal;
+      }
+    }
+  }
+  if (!strongMatch) {
+    return EmptyMatches;
+  }
+  const highlights = traceHighlights(table, arrows, patternLength, wordLength);
+  return highlights;
+};
+
+const Deprecated = 1 << 0;
+
+const addEmptyMatch = item => {
+  return {
+    ...item,
+    matches: EmptyMatches
+  };
+};
+const filterCompletionItems = (completionItems, word) => {
+  if (word === EmptyString) {
+    return completionItems.map(addEmptyMatch);
+  }
+  const filteredCompletions = [];
+  const deprecated = [];
+  for (const completionItem of completionItems) {
+    const {
+      label,
+      flags
+    } = completionItem;
+    const result = filterCompletionItem(word, label);
+    if (result !== EmptyMatches) {
+      if (flags & Deprecated) {
+        // TODO avoid mutation
+        completionItem.matches = EmptyMatches;
+        deprecated.push(completionItem);
+      } else {
+        // TODO avoid mutation
+        completionItem.matches = result;
+        filteredCompletions.push(completionItem);
+      }
+    }
+  }
+  if (deprecated.length > 0) {
+    filteredCompletions.push(...deprecated);
+  }
+  return filteredCompletions;
+};
+
+const getEditor = editorUid => {
+  const instance = get$6(editorUid);
+  if (!instance) {
+    throw new Error(`editor ${editorUid} not found`);
+  }
+  const {
+    newState
+  } = instance;
+  return newState;
+};
+
+const getFinalDeltaY = (height, itemHeight, itemsLength) => {
+  const contentHeight = itemsLength * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  return finalDeltaY;
+};
+
+const getListHeight = (itemsLength, itemHeight, maxHeight) => {
+  number$1(itemsLength);
+  number$1(itemHeight);
+  number$1(maxHeight);
+  if (itemsLength === 0) {
+    return itemHeight;
+  }
+  const totalHeight = itemsLength * itemHeight;
+  return Math.min(totalHeight, maxHeight);
+};
+
+const RE_WORD = /[\w\-]+$/;
+const getWordAtOffset = editor => {
+  const {
+    lines,
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  const line = lines[rowIndex];
+  const part = line.slice(0, columnIndex);
+  const wordMatch = part.match(RE_WORD);
+  if (wordMatch) {
+    return wordMatch[0];
+  }
+  return '';
+};
+const handleEditorType$1 = (editorUid, state, text) => {
+  const editor = getEditor(editorUid);
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const rowIndex = editor.selections[0];
+  const columnIndex = editor.selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  // @ts-ignore
+  const y$1 = y(editor, rowIndex);
+  const wordAtOffset = getWordAtOffset(editor);
+  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$1 = (editorUid, state) => {
+  const editor = getEditor(editorUid);
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const rowIndex = editor.selections[0];
+  const columnIndex = editor.selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  // @ts-ignore
+  const y$1 = y(editor, rowIndex);
+  const wordAtOffset = getWordAtOffset(editor);
+  if (!wordAtOffset) {
+    editor.completionState = None$1;
+    return {
+      ...state,
+      disposed: true
+    };
+  }
+  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 dispose = state => {
+  return {
+    ...state,
+    disposed: true
+  };
+};
+const disposeWithEditor = (state, editor) => {
+  editor.completionState = None$1;
+  editor.completionUid = 0;
+  // Focus.removeAdditionalFocus(FocusKey.EditorCompletion)
+  return dispose(state);
+};
+const handleEditorClick = disposeWithEditor;
+const handleEditorBlur = disposeWithEditor;
+const loadContent$2 = async (editorUid, state) => {
+  const editor = getEditor(editorUid);
+  const {
+    itemHeight,
+    maxHeight
+  } = state;
+  const unfilteredItems = await getCompletions(editor);
+  const wordAtOffset = getWordAtOffset(editor);
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const rowIndex = editor.selections[0];
+  const columnIndex = editor.selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  // @ts-ignore
+  const y$1 = y(editor, rowIndex);
+  const newMaxLineY = Math.min(items.length, 8);
+  editor.widgets = editor.widgets || [];
+  // editor.widgets.push(ViewletModuleId.EditorCompletion)
+  const itemsLength = items.length;
+  const newFocusedIndex = itemsLength === 0 ? -1 : 0;
+  const total = items.length;
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  const finalDeltaY = getFinalDeltaY(height, itemHeight, total);
+  return {
+    ...state,
+    unfilteredItems,
+    items,
+    x: x$1,
+    y: y$1,
+    maxLineY: newMaxLineY,
+    focusedIndex: newFocusedIndex,
+    finalDeltaY,
+    leadingWord: wordAtOffset,
+    height,
+    rowIndex,
+    columnIndex,
+    editorUid,
+    width: 200
+  };
+};
+const advance = (state, word) => {
+  const filteredItems = filterCompletionItems(state.items, word);
+  return {
+    ...state,
+    filteredItems
+  };
+};
+
+const hasWidget = (widgets, id) => {
+  for (const widget of widgets) {
+    if (widget.id === id) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const openCompletion = async editor => {
+  const {
+    widgets,
+    uid
+  } = editor;
+  if (hasWidget(widgets, Completion)) {
+    return editor;
+  }
+  const completionUid = Math.random();
+  const completionWidget = {
+    id: Completion,
+    oldState: {
+      items: [],
+      itemHeight: 20,
+      maxHeight: 150,
+      minLineY: 0,
+      maxLineY: 0,
+      uid: completionUid
+    },
+    newState: {
+      items: [],
+      itemHeight: 20,
+      maxHeight: 150,
+      minLineY: 0,
+      maxLineY: 10,
+      uid: completionUid
+    }
+  };
+  const newWidgets = [...widgets, completionWidget];
+  const newEditor = {
+    ...editor,
+    widgets: newWidgets
+  };
+  set$6(uid, editor, newEditor);
+  const newCompletionWidget = await loadContent$2(uid, completionWidget.newState);
+  const FocusEditorCompletions = 9;
+  await invoke$3('Focus.setAdditionalFocus', FocusEditorCompletions);
+  const latestEditor = getEditor(uid);
+  if (!latestEditor.widgets.includes(completionWidget)) {
+    return editor;
+  }
+  const index = latestEditor.widgets.indexOf(completionWidget);
+  const latestWidgets = [...latestEditor.widgets.slice(0, index), {
+    ...completionWidget,
+    newState: newCompletionWidget
+  }, ...latestEditor.widgets.slice(index + 1)];
+  return {
+    ...latestEditor,
+    widgets: latestWidgets
+  };
+};
+
+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);
+};
+
+// @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) {
@@ -4614,7 +5098,7 @@ const save = async editor => {
   try {
     const uri = editor.uri;
     const newEditor = await getNewEditor(editor);
-    const content = getText(newEditor);
+    const content = getText$1(newEditor);
     await invoke$3('FileSystem.writeFile', uri, content);
     return newEditor;
   } catch (error) {
@@ -4679,27 +5163,39 @@ const editorSelectAllLeft = editor => {
   editorSelectHorizontalLeft(editor, lineCharacterStart);
 };
 
-// @ts-ignore
-
-// TODO handle virtual space
+const RE_ALPHA_NUMERIC = /[a-zA-Z\d]/;
+const isAlphaNumeric = char => {
+  return RE_ALPHA_NUMERIC.test(char);
+};
 
-// @ts-ignore
-const getNewSelectionsSingleLineWord = (lines, word) => {
-  if (word.length === 0) {
-    throw new Error('word length must be greater than zero');
+const getWordStartIndex = (line, index) => {
+  for (let i = index - 1; i >= 0; i--) {
+    if (!isAlphaNumeric(line[i])) {
+      return i + 1;
+    }
   }
-  const newSelections = [];
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    let columnIndex = -word.length;
-    while ((columnIndex = line.indexOf(word, columnIndex + word.length)) !== -1) {
-      newSelections.push(i, columnIndex, i, columnIndex + word.length);
+  return 0;
+};
+const getWordEndIndex = (line, index) => {
+  for (let i = index; i < line.length; i++) {
+    if (!isAlphaNumeric(line[i])) {
+      return i;
     }
   }
-  return new Uint32Array(newSelections);
+  return line.length - 1;
+};
+const getWordMatchAtPosition = (lines, rowIndex, columnIndex) => {
+  const line = lines[rowIndex];
+  const start = getWordStartIndex(line, columnIndex);
+  const end = getWordEndIndex(line, columnIndex);
+  const word = line.slice(start, end);
+  return {
+    start,
+    end,
+    word
+  };
 };
 
-// @ts-ignore
 const isMultiLineMatch = (lines, rowIndex, wordParts) => {
   let j = 0;
   if (!lines[rowIndex + j].endsWith(wordParts[j])) {
@@ -4710,21 +5206,36 @@ const isMultiLineMatch = (lines, rowIndex, wordParts) => {
       return false;
     }
   }
-  // j--
   if (!lines[rowIndex + j].startsWith(wordParts[j])) {
-
     return false;
   }
   return true;
 };
 
+// TODO handle virtual space
+
+const getNewSelectionsSingleLineWord = (lines, word) => {
+  if (word.length === 0) {
+    throw new Error('word length must be greater than zero');
+  }
+  const newSelections = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let columnIndex = -word.length;
+    while ((columnIndex = line.indexOf(word, columnIndex + word.length)) !== -1) {
+      newSelections.push(i, columnIndex, i, columnIndex + word.length);
+    }
+  }
+  return new Uint32Array(newSelections);
+};
+
 // TODO this is very expensive, there might be a better algorithm for this
 // TODO if this matches the given selections, don't schedule selections/rerender
-// @ts-ignore
 const getAllOccurrencesMultiLine = (lines, wordParts) => {
   const newSelections = [];
   for (let rowIndex = 0; rowIndex < lines.length - wordParts.length + 1; rowIndex) {
     if (isMultiLineMatch(lines, rowIndex, wordParts)) {
+      // @ts-ignore
       newSelections.push(rowIndex, lines[rowIndex].length - wordParts[0].length, rowIndex + wordParts.length - 1, wordParts.at(-1).length);
       rowIndex += wordParts.length - 1;
     } else {
@@ -4733,49 +5244,6 @@ const getAllOccurrencesMultiLine = (lines, wordParts) => {
   }
   return new Uint32Array(newSelections);
 };
-
-// TODO duplicate code with EditorSelectNextOccurrence
-const RE_ALPHA_NUMERIC$1 = /[a-zA-Z\d]/;
-
-// @ts-ignore
-const isAlphaNumeric$1 = char => {
-  return RE_ALPHA_NUMERIC$1.test(char);
-};
-
-// @ts-ignore
-const getWordStartIndex$1 = (line, index) => {
-  for (let i = index - 1; i >= 0; i--) {
-    if (!isAlphaNumeric$1(line[i])) {
-      return i + 1;
-    }
-  }
-  return 0;
-};
-
-// @ts-ignore
-const getWordEndIndex$1 = (line, index) => {
-  for (let i = index; i < line.length; i++) {
-    if (!isAlphaNumeric$1(line[i])) {
-      return i;
-    }
-  }
-  return line.length - 1;
-};
-
-// @ts-ignore
-const getWordMatchAtPosition$1 = (lines, rowIndex, columnIndex) => {
-  const line = lines[rowIndex];
-  const start = getWordStartIndex$1(line, columnIndex);
-  const end = getWordEndIndex$1(line, columnIndex);
-  const word = line.slice(start, end);
-  return {
-    start,
-    end,
-    word
-  };
-};
-
-// @ts-ignore
 const getNewSelections$3 = (lines, selections) => {
   if (selections.length < 4) {
     throw new Error('selections must have at least one entry');
@@ -4787,7 +5255,7 @@ const getNewSelections$3 = (lines, selections) => {
   const endColumnIndex = selections[firstSelectionIndex + 3];
   if (startRowIndex === endRowIndex) {
     if (startColumnIndex === endColumnIndex) {
-      const wordMatch = getWordMatchAtPosition$1(lines, endRowIndex, endColumnIndex);
+      const wordMatch = getWordMatchAtPosition(lines, endRowIndex, endColumnIndex);
       if (wordMatch.start === wordMatch.end) {
         return selections;
       }
@@ -4808,12 +5276,12 @@ const getNewSelections$3 = (lines, selections) => {
   const newSelections = getAllOccurrencesMultiLine(lines, wordParts);
   return newSelections;
 };
-
-// @ts-ignore
 const selectAllOccurrences = editor => {
   // when there are no selections -> first selection is word -> find all selection that include word
-  const lines = editor.lines;
-  const selections = editor.selections;
+  const {
+    lines,
+    selections
+  } = editor;
   const newSelections = getNewSelections$3(lines, selections);
   return scheduleSelections(editor, newSelections);
 };
@@ -4897,11 +5365,11 @@ const getNewSelections$1 = (lines, selections) => {
       let startColumnIndex = selectionStartColumn;
       let endColumnIndex = selectionEndColumn;
       const line = lines[rowIndex];
-      while (startColumnIndex > 0 && line[startColumnIndex] !== '"') {
+      while (startColumnIndex > 0 && line[startColumnIndex] !== DoubleQuote$1) {
         startColumnIndex--;
       }
       startColumnIndex++;
-      while (endColumnIndex < line.length && line[endColumnIndex] !== '"') {
+      while (endColumnIndex < line.length && line[endColumnIndex] !== DoubleQuote$1) {
         endColumnIndex++;
       }
       newSelections[i] = rowIndex;
@@ -4924,9 +5392,26 @@ const selectInsideString = editor => {
   return scheduleSelections(editor, newSelections);
 };
 
-// @ts-ignore
+// TODO handle virtual space
+
+// TODO editors behave differently when selecting next occurrence, for example:
+
+// aaa
+// bbb 1
+// ccc
+// bbb 2
+// bbb 3
+// aaa
+// bbb 4
+// ccc
+
+// when clicking first at position 4 and then position 2,
+// - vscode selects next position 3 and refuses to select position 1
+// - atom also selects next position 3 and refuses to select position 1
+// - WebStorm also selects next position 3 and refuses to select position 1
+// - brackets (codemirror) selects position 3 and then selects position 1
+// - sublime selects next position 1, then next position 3
 
-// @ts-ignore
 const getSelectionEditsSingleLineWord = (lines, selections) => {
   const lastSelectionIndex = selections.length - 4;
   const rowIndex = selections[lastSelectionIndex];
@@ -5005,48 +5490,6 @@ const getSelectionEditsSingleLineWord = (lines, selections) => {
   }
   return undefined;
 };
-const RE_ALPHA_NUMERIC = /[a-zA-Z\d]/;
-
-// @ts-ignore
-const isAlphaNumeric = char => {
-  return RE_ALPHA_NUMERIC.test(char);
-};
-
-// @ts-ignore
-const getWordStartIndex = (line, index) => {
-  for (let i = index - 1; i >= 0; i--) {
-    if (!isAlphaNumeric(line[i])) {
-      return i + 1;
-    }
-  }
-  return 0;
-};
-
-// @ts-ignore
-const getWordEndIndex = (line, index) => {
-  for (let i = index; i < line.length; i++) {
-    if (!isAlphaNumeric(line[i])) {
-      return i;
-    }
-  }
-  return line.length - 1;
-};
-
-// @ts-ignore
-const getWordMatchAtPosition = (lines, rowIndex, columnIndex) => {
-  const line = lines[rowIndex];
-  const index = columnIndex;
-  const start = getWordStartIndex(line, index);
-  const end = getWordEndIndex(line, index);
-  const word = line.slice(start, end);
-  return {
-    start,
-    end,
-    word
-  };
-};
-
-// @ts-ignore
 const getSelectNextOccurrenceResult = editor => {
   const lines = editor.lines;
   const selections = editor.selections;
@@ -5078,13 +5521,31 @@ const getSelectNextOccurrenceResult = editor => {
   return undefined;
 };
 
-// @ts-ignore
+// TODO handle virtual space
+
+// TODO editors behave differently when selecting next occurrence, for example:
+
+// aaa
+// bbb 1
+// ccc
+// bbb 2
+// bbb 3
+// aaa
+// bbb 4
+// ccc
+
+// when clicking first at position 4 and then position 2,
+// - vscode selects next position 3 and refuses to select position 1
+// - atom also selects next position 3 and refuses to select position 1
+// - WebStorm also selects next position 3 and refuses to select position 1
+// - brackets (codemirror) selects position 3 and then selects position 1
+// - sublime selects next position 1, then next position 3
+
 const isRangeInViewPort = (minLineY, maxLineY, startRowIndex, endRowIndex) => {
   return startRowIndex >= minLineY && endRowIndex <= maxLineY;
 };
 
 // TODO handle virtual space
-// @ts-ignore
 const selectNextOccurrence = editor => {
   const result = getSelectNextOccurrenceResult(editor);
   if (!result) {
@@ -5099,7 +5560,6 @@ const selectNextOccurrence = editor => {
   }
   // TODO what is this magic number 5?
   // const deltaY = (revealRangeStartRowIndex - 5) * editor.rowHeight
-  // @ts-ignore
   return scheduleDocumentAndCursorsSelections(editor, [], selectionEdits);
 };
 
@@ -5171,17 +5631,6 @@ const setDecorations = (editor, decorations, diagnostics) => {
   };
 };
 
-const getEditor = editorUid => {
-  const instance = get$6(editorUid);
-  if (!instance) {
-    throw new Error(`editor ${editorUid} not found`);
-  }
-  const {
-    newState
-  } = instance;
-  return newState;
-};
-
 /**
  * @enum number
  */
@@ -5392,7 +5841,6 @@ const showSourceActions = async editor => {
   return editor;
 };
 
-// @ts-ignore
 const compareString = (a, b) => {
   return a.localeCompare(b);
 };
@@ -6030,7 +6478,6 @@ const typeWithAutoClosing = async (editor, text) => {
   // EditorCommandCompletion.openFromType(editor, text)
 };
 
-// @ts-ignore
 const inverseChange = edit => {
   const endColumnIndex = edit.end.columnIndex - edit.deleted[0].length + edit.inserted[0].length;
   return {
@@ -6044,7 +6491,6 @@ const inverseChange = edit => {
   };
 };
 
-// @ts-ignore
 const undo = state => {
   const {
     undoStack
@@ -6176,491 +6622,504 @@ const editorUnindent = editor => {
 
 // editor.lines //?
 
-const OnCompletion = 'onCompletion';
-const OnHover = 'onHover';
-
-// TODO add tests for this
-const activateByEvent = async event => {
-  await invoke$3('ExtensionHostManagement.activateByEvent', event);
+const isCompletion$2 = widget => {
+  return widget.id === Completion;
 };
-
-const execute = async ({
-  editor,
-  args,
-  event,
-  method,
-  noProviderFoundMessage,
-  noProviderFoundResult = undefined
-}) => {
-  const fullEvent = `${event}:${editor.languageId}`;
-  await activateByEvent(fullEvent);
-  const result = await invoke$2(method, editor.uid, ...args);
-  return result;
+const getCompletionState = editor => {
+  const {
+    widgets
+  } = editor;
+  const child = widgets.find(isCompletion$2);
+  return child.newState;
 };
 
-const combineResults = results => {
-  return results[0] ?? [];
+const isCompletion$1 = widget => {
+  return widget.id === Completion;
 };
-const executeCompletionProvider = (editor, offset) => {
-  return execute({
-    editor,
-    event: OnCompletion,
-    method: CompletionExecute,
-    args: [offset],
-    noProviderFoundMessage: 'no completion provider found',
-    noProviderFoundResult: [],
-    combineResults
-  });
+const focusIndex$1 = (editor, index) => {
+  const child = getCompletionState(editor);
+  if (index === -1) {
+    return editor;
+  }
+  const childIndex = editor.widgets.findIndex(isCompletion$1);
+  // TODO scroll up/down if necessary
+  const childWidget = editor.widgets[childIndex];
+  const newWidget = {
+    ...childWidget,
+    newState: {
+      ...child,
+      focusedIndex: index,
+      focused: true
+    }
+  };
+  const newWidgets = [...editor.widgets.slice(0, childIndex), newWidget, ...editor.widgets.slice(childIndex + 1)];
+  return {
+    ...editor,
+    widgets: newWidgets
+  };
 };
-const combineResultsResolve = items => {
-  return items[0] ?? undefined;
+
+const focusFirst$1 = editor => {
+  const firstIndex = 0;
+  return focusIndex$1(editor, firstIndex);
 };
-const executeResolveCompletionItem = (editor, offset, name, completionItem) => {
-  return execute({
-    editor,
-    event: OnCompletion,
-    method: CompletionResolveExecute,
-    args: [offset, name, completionItem],
-    noProviderFoundMessage: 'no completion provider found',
-    noProviderFoundResult: [],
-    combineResults: combineResultsResolve
-  });
+
+const focusNext$1 = editor => {
+  const child = getCompletionState(editor);
+  const nextIndex = child.focusedIndex + 1;
+  return focusIndex$1(editor, nextIndex);
 };
 
-// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
-const getCompletions = async editor => {
+const focusPrevious$1 = editor => {
+  const child = getCompletionState(editor);
+  const previousIndex = child.focusedIndex - 1;
+  return focusIndex$1(editor, previousIndex);
+};
+
+const getEdits = async (editor, completionItem) => {
+  const child = getCompletionState(editor);
+  // @ts-ignore
+  const {
+    leadingWord,
+    uid
+  } = child;
+  const word = completionItem.label;
+  const resolvedItem = await resolveCompletion(editor, word, completionItem);
+  const inserted = resolvedItem ? resolvedItem.snippet : word;
+  // TODO type and dispose commands should be sent to renderer process at the same time
   const {
     selections
   } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  // Editor.sync(editor)
-  const offset = await offsetAt(editor, rowIndex, columnIndex);
-  const completions = await executeCompletionProvider(editor, offset);
-  return completions;
+  const [startRowIndex, startColumnIndex] = selections;
+  const leadingWordLength = leadingWord.length;
+  const replaceRange$1 = new Uint32Array([startRowIndex, startColumnIndex - leadingWordLength, startRowIndex, startColumnIndex]);
+  const changes = replaceRange(editor, replaceRange$1, [inserted], '');
+  return changes;
 };
-
-// TODO don't send unnecessary parts of completion item like matches
-const resolveCompletion = async (editor, name, completionItem) => {
-  try {
-    object(editor);
-    string(name);
-    object(completionItem);
-    const rowIndex = editor.selections[0];
-    const columnIndex = editor.selections[1];
-    const offset = await offsetAt(editor, rowIndex, columnIndex);
-    // @ts-ignore
-    const resolvedCompletionItem = await executeResolveCompletionItem(editor, offset, name, completionItem);
-    return resolvedCompletionItem;
-  } catch {
-    return undefined;
+const isCompletion = widget => {
+  return widget.id === Completion;
+};
+const select = async (editor, completionItem) => {
+  const changes = await getEdits(editor, completionItem);
+  const index = editor.widgets.indexOf
+  // ViewletModuleId.EditorCompletion
+  ();
+  if (index !== -1) {
+    editor.widgets.splice(index, 1);
+    editor.completionState = None$1;
+    editor.completionUid = 0;
   }
+  // TODO dispose completion widget
+  // TODO apply edit in editor worker instead of asking renderer worker
+  // await RendererWorker.invoke('Viewlet.dispose', state.uid)
+  const {
+    widgets
+  } = editor;
+  const completionWidgetIndex = editor.widgets.findIndex(isCompletion);
+  const newWidgets = [...widgets.slice(0, completionWidgetIndex), ...widgets.slice(completionWidgetIndex + 1)];
+  const intermediateEditor = await applyEdit(editor, changes);
+  return {
+    ...intermediateEditor,
+    widgets: newWidgets
+  };
 };
-
-const None = 1;
-
-const EmptyMatches = [];
-
-const Diagonal = 1;
-const Left = 2;
-
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
-
-const createTable = size => {
-  const table = [];
-  for (let i = 0; i < size; i++) {
-    const row = new Uint8Array(size);
-    table.push(row);
+const selectIndex = (editor, index) => {
+  const child = getCompletionState(editor);
+  const {
+    items
+  } = child;
+  if (index === -1) {
+    return editor;
   }
-  return table;
+  if (index > items.length) {
+    throw new Error('index too large');
+  }
+  const actualIndex = index;
+  const completionItem = items[actualIndex];
+  return select(editor, completionItem);
 };
 
-const isLowerCase = char => {
-  return char === char.toLowerCase();
+const selectCurrent = editor => {
+  const child = getCompletionState(editor);
+  const {
+    focusedIndex
+  } = child;
+  return selectIndex(editor, focusedIndex);
 };
 
-const isUpperCase = char => {
-  return char === char.toUpperCase();
+const executeHoverProvider = (editor, offset) => {
+  object(editor);
+  number$1(offset);
+  return execute({
+    event: OnHover,
+    editor,
+    method: HoverExecute,
+    args: [offset],
+    noProviderFoundMessage: 'No hover provider found'
+  });
 };
 
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
-const isGap = (columnCharBefore, columnChar) => {
-  switch (columnCharBefore) {
-    case Dash:
-    case Underline:
-    case EmptyString:
-    case T:
-    case Space:
-    case Dot:
-      return true;
-  }
-  if (isLowerCase(columnCharBefore) && isUpperCase(columnChar)) {
-    return true;
-  }
-  return false;
+const getHover = async (editor, offset) => {
+  object(editor);
+  number$1(offset);
+  // TODO invoke extension host worker directly
+  const hover = await executeHoverProvider(editor, offset);
+  return hover;
 };
 
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
-const getScore = (rowCharLow, rowChar, columnCharBefore, columnCharLow, columnChar, column, wordLength, isDiagonalMatch) => {
-  if (rowCharLow !== columnCharLow) {
-    return -1;
-  }
-  const isMatch = rowChar === columnChar;
-  if (isMatch) {
-    if (isDiagonalMatch) {
-      return 8;
-    }
-    if (isGap(columnCharBefore, columnChar)) {
-      return 8;
-    }
-    return 5;
-  }
-  if (isGap(columnCharBefore, columnChar)) {
-    return 8;
-  }
-  return 5;
+let _ipc;
+const listen$5 = async () => {
+  const ipc = await create$1({
+    method: RendererProcess
+  });
+  handleIpc(ipc);
+  _ipc = ipc;
+};
+const invoke = async (method, ...args) => {
+  return invoke$5(_ipc, method, ...args);
 };
 
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
+const measureTextBlockHeight = (text, fontFamily, fontSize, lineHeight, width) => {
+  return invoke('MeasureTextBlockHeight.measureTextBlockHeight', text, fontSize, fontFamily, lineHeight, width);
+};
 
-const isPatternInWord = (patternLow, patternPos, patternLen, wordLow, wordPos, wordLen) => {
-  while (patternPos < patternLen && wordPos < wordLen) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      patternPos += 1;
-    }
-    wordPos += 1;
-  }
-  return patternPos === patternLen; // pattern must be exhausted
+const deepCopy = value => {
+  return structuredClone(value);
 };
 
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
-const traceHighlights = (table, arrows, patternLength, wordLength) => {
-  let row = patternLength;
-  let column = wordLength;
-  const matches = [];
-  while (row >= 1 && column >= 1) {
-    const arrow = arrows[row][column];
-    if (arrow === Left) {
-      column--;
-    } else if (arrow === Diagonal) {
-      row--;
-      column--;
-      const start = column + 1;
-      while (row >= 1 && column >= 1) {
-        const arrow = arrows[row][column];
-        if (arrow === Left) {
-          break;
-        }
-        if (arrow === Diagonal) {
-          row--;
-          column--;
-        }
-      }
-      const end = column;
-      matches.unshift(end, start);
-    }
-  }
-  matches.unshift(table[patternLength][wordLength - 1]);
-  return matches;
+const getInitialLineState = initialLineState => {
+  return deepCopy(initialLineState);
 };
 
-// based on https://github.com/microsoft/vscode/blob/3059063b805ed0ac10a6d9539e213386bfcfb852/src/vs/base/common/filters.ts by Microsoft (License MIT)
-const gridSize = 128;
-const table = createTable(gridSize);
-const arrows = createTable(gridSize);
-// @ts-ignore
-createTable(gridSize);
-const filterCompletionItem = (pattern, word) => {
-  const patternLength = Math.min(pattern.length, gridSize - 1);
-  const wordLength = Math.min(word.length, gridSize - 1);
-  const patternLower = pattern.toLowerCase();
-  const wordLower = word.toLowerCase();
-  if (!isPatternInWord(patternLower, 0, patternLength, wordLower, 0, wordLength)) {
-    return EmptyMatches;
-  }
-  let strongMatch = false;
-  for (let row = 1; row < patternLength + 1; row++) {
-    const rowChar = pattern[row - 1];
-    const rowCharLow = patternLower[row - 1];
-    for (let column = 1; column < wordLength + 1; column++) {
-      const columnChar = word[column - 1];
-      const columnCharLow = wordLower[column - 1];
-      const columnCharBefore = word[column - 2] || '';
-      const isDiagonalMatch = arrows[row - 1][column - 1] === Diagonal;
-      const score = getScore(rowCharLow, rowChar, columnCharBefore, columnCharLow, columnChar, column, wordLength, isDiagonalMatch);
-      if (row === 1 && score > 5) {
-        strongMatch = true;
-      }
-      let diagonalScore = score + table[row - 1][column - 1];
-      if (isDiagonalMatch && score !== -1) {
-        diagonalScore += 2;
-      }
-      const leftScore = table[row][column - 1];
-      if (leftScore > diagonalScore) {
-        table[row][column] = leftScore;
-        arrows[row][column] = Left;
-      } else {
-        table[row][column] = diagonalScore;
-        arrows[row][column] = Diagonal;
-      }
-    }
-  }
-  if (!strongMatch) {
-    return EmptyMatches;
+const getLineInfo$1 = (line, tokens, TokenMap) => {
+  const tokensLength = tokens.length;
+  let end = 0;
+  let start = 0;
+  const lineInfo = [];
+  for (let i = 0; i < tokensLength; i += 2) {
+    const tokenType = tokens[i];
+    const tokenLength = tokens[i + 1];
+    end += tokenLength;
+    const text = line.slice(start, end);
+    const className = `Token ${TokenMap[tokenType] || 'Unknown'}`;
+    const normalizedText = text;
+    lineInfo.push(normalizedText, className);
+    start = end;
   }
-  // printTables(pattern, 0, word, 0)
-  const highlights = traceHighlights(table, arrows, patternLength, wordLength);
-  return highlights;
+  return lineInfo;
 };
 
-const Deprecated = 1 << 0;
-
-const addEmptyMatch = item => {
-  return {
-    ...item,
-    matches: EmptyMatches
-  };
+const state = {
+  warned: []
 };
-const filterCompletionItems = (completionItems, word) => {
-  if (word === EmptyString) {
-    return completionItems.map(addEmptyMatch);
+const flattenTokensArray = tokens => {
+  const flattened = [];
+  for (const token of tokens) {
+    object(token);
+    flattened.push(token.type, token.length);
   }
-  const filteredCompletions = [];
-  const deprecated = [];
-  for (const completionItem of completionItems) {
-    const {
-      label,
-      flags
-    } = completionItem;
-    const result = filterCompletionItem(word, label);
-    if (result !== EmptyMatches) {
-      if (flags & Deprecated) {
-        // TODO avoid mutation
-        completionItem.matches = EmptyMatches;
-        deprecated.push(completionItem);
-      } else {
-        // TODO avoid mutation
-        completionItem.matches = result;
-        filteredCompletions.push(completionItem);
-      }
-    }
+  return flattened;
+};
+const warnDeprecatedArrayReturn = (languageId, fn) => {
+  if (state.warned.includes(fn)) {
+    return;
   }
-  if (deprecated.length > 0) {
-    filteredCompletions.push(...deprecated);
+  state.warned.push(fn);
+  console.warn(`tokenizers without hasArrayReturn=false are deprecated (language ${languageId})`);
+};
+const safeTokenizeLine = (languageId, tokenizeLine, line, lineStateAtStart, hasArrayReturn) => {
+  try {
+    const lineState = tokenizeLine(line, lineStateAtStart);
+    if (!lineState || !lineState.tokens || !lineState.state) {
+      throw new Error('invalid tokenization result');
+    }
+    if (!hasArrayReturn) {
+      warnDeprecatedArrayReturn(languageId, tokenizeLine);
+      // workaround for old tokenizers
+      lineState.tokens = flattenTokensArray(lineState.tokens);
+    }
+    return lineState;
+  } catch (error) {
+    console.error(error);
+    return {
+      tokens: [/* type */0, /* length */line.length],
+      lineState: lineStateAtStart
+    };
   }
-  return filteredCompletions;
 };
 
-const getFinalDeltaY = (height, itemHeight, itemsLength) => {
-  const contentHeight = itemsLength * itemHeight;
-  const finalDeltaY = Math.max(contentHeight - height, 0);
-  return finalDeltaY;
+const getLineInfos = (lines, tokenizer, languageId) => {
+  const lineInfos = [];
+  const {
+    tokenizeLine,
+    initialLineState,
+    hasArrayReturn,
+    TokenMap
+  } = tokenizer;
+  let currentLineState = getInitialLineState(initialLineState);
+  for (const line of lines) {
+    const result = safeTokenizeLine(languageId, tokenizeLine, line, currentLineState, hasArrayReturn);
+    const {
+      tokens
+    } = result;
+    const lineInfo = getLineInfo$1(line, tokens, TokenMap);
+    lineInfos.push(lineInfo);
+    currentLineState = result;
+  }
+  return lineInfos;
 };
 
-const getListHeight = (itemsLength, itemHeight, maxHeight) => {
-  number$1(itemsLength);
-  number$1(itemHeight);
-  number$1(maxHeight);
-  if (itemsLength === 0) {
-    return itemHeight;
-  }
-  const totalHeight = itemsLength * itemHeight;
-  return Math.min(totalHeight, maxHeight);
+const tokenizeCodeBlock = async (codeBlock, languageId, tokenizerPath) => {
+  await loadTokenizer(languageId, tokenizerPath);
+  const tokenizer = getTokenizer(languageId);
+  const lines = splitLines$2(codeBlock);
+  const lineInfos = getLineInfos(lines, tokenizer, languageId);
+  return lineInfos;
 };
 
-const RE_WORD = /[\w\-]+$/;
-const getWordAtOffset = editor => {
-  const {
-    lines,
-    selections
-  } = editor;
+const getHoverPosition = (position, selections) => {
+  if (position) {
+    return position;
+  }
   const rowIndex = selections[0];
   const columnIndex = selections[1];
-  const line = lines[rowIndex];
-  const part = line.slice(0, columnIndex);
-  const wordMatch = part.match(RE_WORD);
-  if (wordMatch) {
-    return wordMatch[0];
-  }
-  return '';
+  return {
+    rowIndex,
+    columnIndex
+  };
 };
-const handleEditorType = (editorUid, state, text) => {
-  const editor = getEditor(editorUid);
-  const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const rowIndex = editor.selections[0];
-  const columnIndex = editor.selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  // @ts-ignore
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordAtOffset(editor);
-  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;
+const getMatchingDiagnostics = (diagnostics, rowIndex, columnIndex) => {
+  const matching = [];
+  for (const diagnostic of diagnostics) {
+    if (diagnostic.rowIndex === rowIndex) {
+      matching.push(diagnostic);
+    }
+  }
+  return matching;
+};
+const fallbackDisplayStringLanguageId = 'typescript'; // TODO remove this
+
+const hoverDocumentationFontSize = 15;
+const hoverDocumentationFontFamily = 'Fira Code';
+const hoverDocumentationLineHeight = '1.33333';
+const hoverBorderLeft = 1;
+const hoverBorderRight = 1;
+const hoverPaddingLeft = 8;
+const hoverPaddingRight = 8;
+const hovverFullWidth = 400;
+const hoverDocumentationWidth = hovverFullWidth - hoverPaddingLeft - hoverPaddingRight - hoverBorderLeft - hoverBorderRight;
+const getHoverPositionXy = (editor, rowIndex, wordStart, documentationHeight) => {
+  const x$1 = x(editor, rowIndex, wordStart);
+  const y$1 = editor.height - y(editor, rowIndex) + editor.y + 40;
   return {
-    ...state,
-    items,
     x: x$1,
-    y: y$1,
-    minLineY: newMinLineY,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height,
-    finalDeltaY
+    y: y$1
   };
 };
-const handleEditorDeleteLeft = (editorUid, state) => {
-  const editor = getEditor(editorUid);
+const getEditorHoverInfo = async (editorUid, position) => {
+  number$1(editorUid);
+  const instance = get$6(editorUid);
+  const editor = instance.newState;
   const {
-    unfilteredItems,
-    itemHeight,
-    maxHeight
-  } = state;
-  const rowIndex = editor.selections[0];
-  const columnIndex = editor.selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  // @ts-ignore
-  const y$1 = y(editor, rowIndex);
-  const wordAtOffset = getWordAtOffset(editor);
-  if (!wordAtOffset) {
-    editor.completionState = None;
-    return {
-      ...state,
-      disposed: true
-    };
+    selections
+  } = editor;
+  const {
+    rowIndex,
+    columnIndex
+  } = getHoverPosition(position, selections);
+  const offset = offsetAt(editor, rowIndex, columnIndex);
+  const hover = await getHover(editor, offset);
+  if (!hover) {
+    return undefined;
   }
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const newMaxLineY = Math.min(items.length, 8);
-  const height = getListHeight(items.length, itemHeight, maxHeight);
+  const {
+    displayString,
+    documentation,
+    displayStringLanguageId
+  } = hover;
+  const tokenizerPath = '';
+  const lineInfos = await tokenizeCodeBlock(displayString, displayStringLanguageId || fallbackDisplayStringLanguageId, tokenizerPath);
+  const wordPart = await getWordBefore(editor, rowIndex, columnIndex);
+  const wordStart = columnIndex - wordPart.length;
+  await measureTextBlockHeight(documentation, hoverDocumentationFontFamily, hoverDocumentationFontSize, hoverDocumentationLineHeight, hoverDocumentationWidth);
+  const {
+    x,
+    y
+  } = getHoverPositionXy(editor, rowIndex, wordStart);
+  const diagnostics = editor.diagnostics || [];
+  const matchingDiagnostics = getMatchingDiagnostics(diagnostics, rowIndex);
   return {
-    ...state,
-    items,
-    x: x$1,
-    y: y$1,
-    maxLineY: newMaxLineY,
-    leadingWord: wordAtOffset,
-    height
+    lineInfos,
+    documentation,
+    x,
+    y,
+    matchingDiagnostics
   };
 };
-const dispose = state => {
+
+const loadContent$1 = async (editorUid, state, position) => {
+  const hoverInfo = await getEditorHoverInfo(editorUid, position);
+  if (!hoverInfo) {
+    return state;
+  }
+  const {
+    lineInfos,
+    documentation,
+    x,
+    y,
+    matchingDiagnostics
+  } = hoverInfo;
   return {
     ...state,
-    disposed: true
+    lineInfos,
+    documentation,
+    x,
+    y,
+    diagnostics: matchingDiagnostics
   };
 };
-const disposeWithEditor = (state, editor) => {
-  editor.completionState = None;
-  editor.completionUid = 0;
-  // Focus.removeAdditionalFocus(FocusKey.EditorCompletion)
-  return dispose(state);
+const handleSashPointerDown = (state, eventX, eventY) => {
+  return state;
 };
-const handleEditorClick = disposeWithEditor;
-const handleEditorBlur = disposeWithEditor;
-const loadContent$2 = async (editorUid, state) => {
-  const editor = getEditor(editorUid);
+const handleSashPointerMove = (state, eventX, eventY) => {
+  // @ts-ignore
   const {
-    itemHeight,
-    maxHeight
+    x,
+    y
   } = state;
-  const unfilteredItems = await getCompletions(editor);
-  const wordAtOffset = getWordAtOffset(editor);
-  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
-  const rowIndex = editor.selections[0];
-  const columnIndex = editor.selections[1];
-  const x$1 = x(editor, rowIndex, columnIndex);
-  // @ts-ignore
-  const y$1 = y(editor, rowIndex);
-  const newMaxLineY = Math.min(items.length, 8);
-  editor.widgets = editor.widgets || [];
-  // editor.widgets.push(ViewletModuleId.EditorCompletion)
-  const itemsLength = items.length;
-  const newFocusedIndex = itemsLength === 0 ? -1 : 0;
-  const total = items.length;
-  const height = getListHeight(items.length, itemHeight, maxHeight);
-  const finalDeltaY = getFinalDeltaY(height, itemHeight, total);
+  const minWidth = 100;
+  const newWidth = Math.max(eventX - x, minWidth);
   return {
     ...state,
-    unfilteredItems,
-    items,
-    x: x$1,
-    y: y$1,
-    maxLineY: newMaxLineY,
-    focusedIndex: newFocusedIndex,
-    finalDeltaY,
-    leadingWord: wordAtOffset,
-    height,
-    rowIndex,
-    columnIndex,
-    editorUid
+    resizedWidth: newWidth
   };
 };
-const advance = (state, word) => {
-  const filteredItems = filterCompletionItems(state.items, word);
+const handleSashPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
+const text = data => {
   return {
-    ...state,
-    filteredItems
+    type: Text,
+    text: data,
+    childCount: 0
   };
 };
 
-const getEdits = async (state, editor, completionItem) => {
-  // @ts-ignore
-  const {
-    leadingWord,
-    uid
-  } = state;
-  const word = completionItem.label;
-  const resolvedItem = await resolveCompletion(editor, word, completionItem);
-  const inserted = resolvedItem ? resolvedItem.snippet : word;
-  // TODO type and dispose commands should be sent to renderer process at the same time
-  const {
-    selections
-  } = editor;
-  const [startRowIndex, startColumnIndex] = selections;
-  const leadingWordLength = leadingWord.length;
-  const replaceRange$1 = new Uint32Array([startRowIndex, startColumnIndex - leadingWordLength, startRowIndex, startColumnIndex]);
-  const changes = replaceRange(editor, replaceRange$1, [inserted], '');
-  return changes;
+const getLineInfoVirtualDom = lineInfo => {
+  const dom = [{
+    type: Div,
+    className: HoverEditorRow,
+    childCount: lineInfo.length / 2
+  }];
+  for (let i = 0; i < lineInfo.length; i += 2) {
+    const tokenText = lineInfo[i];
+    const tokenClass = lineInfo[i + 1];
+    dom.push({
+      type: Span,
+      className: tokenClass,
+      childCount: 1
+    },
+    // @ts-ignore
+    text(tokenText));
+  }
+  return dom;
 };
-const select = async (state, editor, completionItem) => {
-  const changes = await getEdits(state, editor, completionItem);
-  const index = editor.widgets.indexOf
-  // ViewletModuleId.EditorCompletion
-  ();
-  if (index !== -1) {
-    editor.widgets.splice(index, 1);
-    editor.completionState = None;
-    editor.completionUid = 0;
+const getLineInfosVirtualDom = lineInfos => {
+  const dom = lineInfos.flatMap(getLineInfoVirtualDom);
+  return dom;
+};
+
+const hoverProblemMessage = {
+  type: Span,
+  className: HoverProblemMessage,
+  childCount: 1
+};
+const hoverProblemDetail = {
+  type: Span,
+  className: HoverProblemDetail,
+  childCount: 1
+};
+const getChildCount = (lineInfos, documentation, diagnostics) => {
+  return lineInfos.length + documentation ? 1 : 0 + (diagnostics && diagnostics.length > 0) ? 1 : 0;
+};
+const getHoverVirtualDom = (lineInfos, documentation, diagnostics) => {
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: 'Viewlet EditorHover',
+    childCount: getChildCount(lineInfos, documentation, diagnostics) + 1
+  });
+  if (diagnostics && diagnostics.length > 0) {
+    dom.push({
+      type: Div,
+      className: `${HoverDisplayString} ${HoverProblem}`,
+      childCount: diagnostics.length * 2
+    });
+    for (const diagnostic of diagnostics) {
+      dom.push(hoverProblemMessage, text(diagnostic.message), hoverProblemDetail, text(`${diagnostic.source} (${diagnostic.code})`));
+    }
+  }
+  if (lineInfos.length > 0) {
+    const lineInfosDom = getLineInfosVirtualDom(lineInfos);
+    dom.push({
+      type: Div,
+      className: HoverDisplayString,
+      childCount: lineInfos.length
+    }, ...lineInfosDom);
+  }
+  if (documentation) {
+    dom.push({
+      type: Div,
+      className: HoverDocumentation,
+      childCount: 1
+    }, text(documentation));
   }
-  await invoke$3('Editor.applyEdit', changes);
-  await invoke$3('Viewlet.dispose', state.uid);
-  return state;
+  dom.push({
+    type: Div,
+    className: 'Sash SashVertical SashResize',
+    childCount: 0,
+    onPointerDown: HandleSashPointerDown
+  });
+  return dom;
 };
-const selectIndex = (editorUid, state, index) => {
-  const editor = getEditor(editorUid);
-  const {
-    items
-  } = state;
-  if (index === -1) {
-    return state;
+
+const renderHoverDom = {
+  isEqual(oldState, newState) {
+    return oldState.lineInfos === newState.lineInfos && oldState.documentation === newState.documentation && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.diagnostics === newState.diagnostics;
+  },
+  apply(oldState, newState) {
+    const dom = getHoverVirtualDom(newState.lineInfos, newState.documentation, newState.diagnostics);
+    return [/* method */'Viewlet.setDom2', dom];
   }
-  if (index > items.length) {
-    throw new Error('index too large');
+};
+const renderBounds$1 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.resizedWidth === newState.resizedWidth;
+  },
+  apply(oldState, newState) {
+    // @ts-ignore
+    const {
+      x,
+      y,
+      width,
+      height,
+      resizedWidth,
+      uid
+    } = newState;
+    console.log('apply');
+    return [SetBounds, x, y, resizedWidth, height];
   }
-  const actualIndex = index;
-  const completionItem = items[actualIndex];
-  return select(state, editor, completionItem);
 };
-
-const selectCurrent = (editorUid, state) => {
-  const {
-    focusedIndex
-  } = state;
-  return selectIndex(editorUid, state, focusedIndex);
+const render$3 = [renderHoverDom, renderBounds$1];
+const renderHover = async (oldState, newState) => {
+  const commands = [];
+  for (const item of render$3) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
 };
 
 // copied from https://github.com/microsoft/vscode/tree/main/src/vs/base/common/strings.ts by Microsoft (License MIT)
@@ -6707,7 +7166,7 @@ const getMatchCount = matches => {
   return matches.length / 2;
 };
 
-const loadContent$1 = editorId => {
+const loadContent = editorId => {
   const editor = getEditor(editorId);
   const {
     selections,
@@ -6858,220 +7317,26 @@ const ensure = async (fontName, fontUrl) => {
     return getPending(fontName);
   }
   const promise = load(fontName, fontUrl);
-  setPending(fontName, promise);
-  await promise;
-  removePending(fontName);
-  setLoaded(fontName);
-};
-
-const executeHoverProvider = (editor, offset) => {
-  object(editor);
-  number$1(offset);
-  return execute({
-    event: OnHover,
-    editor,
-    method: HoverExecute,
-    args: [offset],
-    noProviderFoundMessage: 'No hover provider found'
-  });
-};
-
-const getHover = async (editor, offset) => {
-  object(editor);
-  number$1(offset);
-  // TODO invoke extension host worker directly
-  const hover = await executeHoverProvider(editor, offset);
-  return hover;
-};
-
-let _ipc;
-const listen$5 = async () => {
-  const ipc = await create$1({
-    method: RendererProcess
-  });
-  handleIpc(ipc);
-  _ipc = ipc;
-};
-const invoke = async (method, ...args) => {
-  return invoke$5(_ipc, method, ...args);
-};
-
-const measureTextBlockHeight = (text, fontFamily, fontSize, lineHeight, width) => {
-  return invoke('MeasureTextBlockHeight.measureTextBlockHeight', text, fontSize, fontFamily, lineHeight, width);
-};
-
-const deepCopy = value => {
-  return structuredClone(value);
-};
-
-const getInitialLineState = initialLineState => {
-  return deepCopy(initialLineState);
-};
-
-const getLineInfo$1 = (line, tokens, TokenMap) => {
-  const tokensLength = tokens.length;
-  let end = 0;
-  let start = 0;
-  const lineInfo = [];
-  for (let i = 0; i < tokensLength; i += 2) {
-    const tokenType = tokens[i];
-    const tokenLength = tokens[i + 1];
-    end += tokenLength;
-    const text = line.slice(start, end);
-    const className = `Token ${TokenMap[tokenType] || 'Unknown'}`;
-    const normalizedText = text;
-    lineInfo.push(normalizedText, className);
-    start = end;
-  }
-  return lineInfo;
-};
-
-const state = {
-  warned: []
-};
-const flattenTokensArray = tokens => {
-  const flattened = [];
-  for (const token of tokens) {
-    object(token);
-    flattened.push(token.type, token.length);
-  }
-  return flattened;
-};
-const warnDeprecatedArrayReturn = (languageId, fn) => {
-  if (state.warned.includes(fn)) {
-    return;
-  }
-  state.warned.push(fn);
-  console.warn(`tokenizers without hasArrayReturn=false are deprecated (language ${languageId})`);
-};
-const safeTokenizeLine = (languageId, tokenizeLine, line, lineStateAtStart, hasArrayReturn) => {
-  try {
-    const lineState = tokenizeLine(line, lineStateAtStart);
-    if (!lineState || !lineState.tokens || !lineState.state) {
-      throw new Error('invalid tokenization result');
-    }
-    if (!hasArrayReturn) {
-      warnDeprecatedArrayReturn(languageId, tokenizeLine);
-      // workaround for old tokenizers
-      lineState.tokens = flattenTokensArray(lineState.tokens);
-    }
-    return lineState;
-  } catch (error) {
-    console.error(error);
-    return {
-      tokens: [/* type */0, /* length */line.length],
-      lineState: lineStateAtStart
-    };
-  }
-};
-
-const getLineInfos = (lines, tokenizer, languageId) => {
-  const lineInfos = [];
-  const {
-    tokenizeLine,
-    initialLineState,
-    hasArrayReturn,
-    TokenMap
-  } = tokenizer;
-  let currentLineState = getInitialLineState(initialLineState);
-  for (const line of lines) {
-    const result = safeTokenizeLine(languageId, tokenizeLine, line, currentLineState, hasArrayReturn);
-    const {
-      tokens
-    } = result;
-    const lineInfo = getLineInfo$1(line, tokens, TokenMap);
-    lineInfos.push(lineInfo);
-    currentLineState = result;
-  }
-  return lineInfos;
-};
-
-const tokenizeCodeBlock = async (codeBlock, languageId, tokenizerPath) => {
-  await loadTokenizer(languageId, tokenizerPath);
-  const tokenizer = getTokenizer(languageId);
-  const lines = splitLines$2(codeBlock);
-  const lineInfos = getLineInfos(lines, tokenizer, languageId);
-  return lineInfos;
-};
-
-const getHoverPosition = (position, selections) => {
-  if (position) {
-    return position;
-  }
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  return {
-    rowIndex,
-    columnIndex
-  };
-};
-const getMatchingDiagnostics = (diagnostics, rowIndex, columnIndex) => {
-  const matching = [];
-  for (const diagnostic of diagnostics) {
-    if (diagnostic.rowIndex === rowIndex) {
-      matching.push(diagnostic);
-    }
-  }
-  return matching;
-};
-const fallbackDisplayStringLanguageId = 'typescript'; // TODO remove this
-
-const hoverDocumentationFontSize = 15;
-const hoverDocumentationFontFamily = 'Fira Code';
-const hoverDocumentationLineHeight = '1.33333';
-const hoverBorderLeft = 1;
-const hoverBorderRight = 1;
-const hoverPaddingLeft = 8;
-const hoverPaddingRight = 8;
-const hovverFullWidth = 400;
-const hoverDocumentationWidth = hovverFullWidth - hoverPaddingLeft - hoverPaddingRight - hoverBorderLeft - hoverBorderRight;
-const getHoverPositionXy = (editor, rowIndex, wordStart, documentationHeight) => {
-  const x$1 = x(editor, rowIndex, wordStart);
-  const y$1 = editor.height - y(editor, rowIndex) + editor.y + 40;
-  return {
-    x: x$1,
-    y: y$1
-  };
-};
-const getEditorHoverInfo = async (editorUid, position) => {
-  number$1(editorUid);
-  const instance = get$6(editorUid);
-  const editor = instance.newState;
-  const {
-    selections
-  } = editor;
-  const {
-    rowIndex,
-    columnIndex
-  } = getHoverPosition(position, selections);
-  const offset = offsetAt(editor, rowIndex, columnIndex);
-  const hover = await getHover(editor, offset);
-  if (!hover) {
-    return undefined;
-  }
-  const {
-    displayString,
-    documentation,
-    displayStringLanguageId
-  } = hover;
-  const tokenizerPath = '';
-  const lineInfos = await tokenizeCodeBlock(displayString, displayStringLanguageId || fallbackDisplayStringLanguageId, tokenizerPath);
-  const wordPart = await getWordBefore(editor, rowIndex, columnIndex);
-  const wordStart = columnIndex - wordPart.length;
-  await measureTextBlockHeight(documentation, hoverDocumentationFontFamily, hoverDocumentationFontSize, hoverDocumentationLineHeight, hoverDocumentationWidth);
+  setPending(fontName, promise);
+  await promise;
+  removePending(fontName);
+  setLoaded(fontName);
+};
+
+const getSelections = editorUid => {
+  const editor = getEditor(editorUid);
   const {
-    x,
-    y
-  } = getHoverPositionXy(editor, rowIndex, wordStart);
-  const diagnostics = editor.diagnostics || [];
-  const matchingDiagnostics = getMatchingDiagnostics(diagnostics, rowIndex);
-  return {
-    lineInfos,
-    documentation,
-    x,
-    y,
-    matchingDiagnostics
-  };
+    selections
+  } = editor;
+  return selections;
+};
+
+const getText = editorUid => {
+  const editor = getEditor(editorUid);
+  const {
+    lines
+  } = editor;
+  return lines.join('\n');
 };
 
 const InsertText = 'insertText';
@@ -7155,7 +7420,7 @@ const moveLineUp = editor => {
 };
 
 const Link$1 = 'Link';
-const Function = 'Function';
+const Function$1 = 'Function';
 const Parameter = 'Parameter';
 const Type = 'Type';
 const VariableName = 'VariableName';
@@ -7214,7 +7479,7 @@ const getDecorationClassName = type => {
     case Ts3073:
     case Ts3077:
     case Ts3088:
-      return Function;
+      return Function$1;
     case Ts1792:
     case Ts1793:
       return Parameter;
@@ -7640,29 +7905,6 @@ const getVisible = async (editor, syncIncremental) => {
   };
 };
 
-const Div = 4;
-const Span = 8;
-const Text = 12;
-
-const ColorPicker = 'ColorPicker';
-const ColorPickerBackgroundColor = 'ColorPickerBackgroundColor';
-const ColorPickerDark = 'ColorPickerDark';
-const ColorPickerLight = 'ColorPickerLight';
-const ColorPickerRectangle = 'ColorPickerRectangle';
-const ColorPickerSlider = 'ColorPickerSlider';
-const ColorPickerSliderThumb = 'ColorPickerSliderThumb';
-const Diagnostic = 'Diagnostic';
-const EditorCursor = 'EditorCursor';
-const EditorRow = 'EditorRow';
-const EditorSelection = 'EditorSelection';
-const HoverDisplayString = 'HoverDisplayString';
-const HoverDocumentation = 'HoverDocumentation';
-const HoverEditorRow = 'HoverEditorRow';
-const HoverProblem = 'HoverProblem';
-const HoverProblemDetail = 'HoverProblemDetail';
-const HoverProblemMessage = 'HoverProblemMessage';
-const Viewlet = 'Viewlet';
-
 const getCursorsVirtualDom = cursors => {
   const dom = [];
   for (const translate of cursors) {
@@ -7714,14 +7956,6 @@ const getDiagnosticsVirtualDom = diagnostics => {
   return dom;
 };
 
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
-};
-
 const getGutterInfoVirtualDom = gutterInfo => {
   return [{
     type: Span,
@@ -7798,6 +8032,391 @@ 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 getIconDom = (fileIcon, symbolName) => {
+  if (fileIcon) {
+    return getFileIconVirtualDom(fileIcon);
+  }
+  return {
+    type: Div,
+    className: `${ColoredMaskIcon} ${symbolName}`,
+    childCount: 0
+  };
+};
+
+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 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;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    labelDom.childCount++;
+    dom.push(text(afterText));
+  }
+  return dom;
+};
+
+const getCompletionItemVirtualDom = visibleItem => {
+  const {
+    top,
+    label,
+    symbolName,
+    highlights,
+    focused,
+    deprecated,
+    fileIcon
+  } = visibleItem;
+  let className = EditorCompletionItem;
+  if (focused) {
+    className += ' ' + EditorCompletionItemFocused;
+  }
+  if (deprecated) {
+    className += ' ' + EditorCompletionItemDeprecated;
+  }
+  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 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));
+  }
+  return visibleItems;
+};
+
+const renderItems = {
+  isEqual(oldState, newState) {
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
+  },
+  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 renderBounds = {
+  isEqual(oldState, newState) {
+    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 {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+  }
+};
+const renderHeight = {
+  isEqual(oldState, newState) {
+    return oldState.items.length === newState.items.length;
+  },
+  apply(oldState, newState) {
+    const {
+      itemHeight
+    } = newState;
+    const contentHeight = newState.items.length * itemHeight;
+    return [/* method */SetContentHeight, /* contentHeight */contentHeight];
+  }
+};
+const renderNegativeMargin = {
+  isEqual(oldState, newState) {
+    return oldState.deltaY === newState.deltaY;
+  },
+  apply(oldState, newState) {
+    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
+  }
+};
+const renderScrollBar = {
+  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;
+  },
+  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 render$2 = [renderItems, renderBounds, renderHeight, renderNegativeMargin, renderScrollBar];
+const renderCompletion = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$2) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const render$1 = (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 add = widget => {
+  const commands = render$1(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 remove = widget => {
+  return [['Viewlet.send', widget.newState.uid, 'dispose']];
+};
+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 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,
+  handleEditorDeleteLeft,
+  handleEditorType,
+  remove,
+  render: render$1
+};
+
+const addWidget = widget => {
+  const {
+    id
+  } = widget;
+  switch (id) {
+    case Completion:
+      return add(widget);
+    default:
+      throw new Error('unsupported widget');
+  }
+};
+const renderWidget = widget => {
+  const {
+    id
+  } = widget;
+  switch (id) {
+    case Completion:
+      return render$1(widget.oldState, widget.newState);
+    default:
+      throw new Error(`unsupported widget`);
+  }
+};
+const removeWidget = widget => {
+  const {
+    id
+  } = widget;
+  switch (id) {
+    case Completion:
+      return remove(widget);
+    default:
+      throw new Error('unsupported widget');
+  }
+};
+
 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;
@@ -7890,11 +8509,67 @@ const renderGutterInfo = {
         gutterInfos.push(i + 1);
       }
     }
-    const dom = getEditorGutterVirtualDom(gutterInfos);
-    return ['renderGutter', dom];
-  }
+    const dom = getEditorGutterVirtualDom(gutterInfos);
+    return ['renderGutter', dom];
+  }
+};
+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 render$2 = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus, renderDecorations, renderGutterInfo];
+const render = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus, renderDecorations, renderGutterInfo, renderWidgets];
 const renderEditor = async id => {
   const instance = get$6(id);
   if (!instance) {
@@ -7906,15 +8581,30 @@ const renderEditor = async id => {
   } = instance;
   const commands = [];
   set$6(id, newState, newState);
-  for (const item of render$2) {
+  for (const item of render) {
     if (!item.isEqual(oldState, newState)) {
-      commands.push(await 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 keep = ['ColorPicker.handleSliderPointerDown', 'ColorPicker.handleSliderPointerMove', 'ColorPicker.loadContent', 'Editor.create', 'Editor.getWordAt', 'Editor.getWordBefore', 'Editor.offsetAt', 'Editor.render', 'FindWidget.focusFirst', 'FindWidget.focusIndex', 'FindWidget.focusLast', 'FindWidget.focusNext', 'FindWidget.focusPrevious', 'FindWidget.handleInput', 'FindWidget.loadContent', 'Font.ensure', 'Hover.getHoverInfo', 'Initialize.initialize', 'EditorCompletion.advance', 'EditorCompletion.handleEditorBlur', 'EditorCompletion.handleEditorClick', 'EditorCompletion.handleEditorDeleteLeft', 'EditorCompletion.handleEditorType', 'EditorCompletion.loadContent', 'EditorCompletion.selectCurrent', 'EditorCompletion.selectIndex', 'ColorPicker.render', 'Hover.render', 'Hover.loadContent', 'Hover.handleSashPointerDown', 'Hover.handleSashPointerMove', 'Hover.handleSashPointerUp'];
+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'];
 
 // TODO wrap commands globally, not per editor
 // TODO only store editor state in editor worker, not in renderer worker also
@@ -7936,246 +8626,6 @@ const wrapCommands = commands => {
   }
 };
 
-const HandlePointerDown = 'handlePointerDown';
-const HandleSashPointerDown = 'handleSashPointerDown';
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const getColorPickerVirtualDom = () => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, ColorPicker),
-    onPointerDown: HandlePointerDown,
-    childCount: 3
-  }, {
-    type: Div,
-    className: ColorPickerRectangle,
-    childCount: 3
-  }, {
-    type: Div,
-    className: ColorPickerBackgroundColor,
-    childCount: 0
-  }, {
-    type: Div,
-    className: ColorPickerLight,
-    childCount: 0
-  }, {
-    type: Div,
-    className: ColorPickerDark,
-    childCount: 0
-  }, {
-    type: Div,
-    className: ColorPickerSlider,
-    childCount: 0
-  }, {
-    type: Div,
-    className: ColorPickerSliderThumb,
-    childCount: 0
-  }];
-};
-
-const SetBounds = 'setBounds';
-const SetColor = 'setColor';
-const SetOffsetX = 'setOffsetX';
-
-const renderColor = {
-  isEqual(oldState, newState) {
-    return oldState.color === newState.color;
-  },
-  apply(oldState, newState) {
-    return [/* method */SetColor, /* color */newState.color];
-  }
-};
-const renderOffsetX = {
-  isEqual(oldState, newState) {
-    return oldState.offsetX === newState.offsetX;
-  },
-  apply(oldState, newState) {
-    return [/* method */SetOffsetX, /* offsetX */newState.offsetX];
-  }
-};
-const renderColorPickerDom = {
-  isEqual(oldState, newState) {
-    return oldState.min === newState.min && oldState.max === newState.max;
-  },
-  apply(oldState, newState) {
-    const dom = getColorPickerVirtualDom();
-    return ['Viewlet.setDom2', dom];
-  }
-};
-const render$1 = [renderColorPickerDom, renderColor, renderOffsetX];
-const renderColorPicker = async (oldState, newState) => {
-  const commands = [];
-  for (const item of render$1) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
-};
-
-const loadContent = async (editorUid, state, position) => {
-  const hoverInfo = await getEditorHoverInfo(editorUid, position);
-  if (!hoverInfo) {
-    return state;
-  }
-  const {
-    lineInfos,
-    documentation,
-    x,
-    y,
-    matchingDiagnostics
-  } = hoverInfo;
-  return {
-    ...state,
-    lineInfos,
-    documentation,
-    x,
-    y,
-    diagnostics: matchingDiagnostics
-  };
-};
-const handleSashPointerDown = (state, eventX, eventY) => {
-  return state;
-};
-const handleSashPointerMove = (state, eventX, eventY) => {
-  // @ts-ignore
-  const {
-    x,
-    y
-  } = state;
-  const minWidth = 100;
-  const newWidth = Math.max(eventX - x, minWidth);
-  return {
-    ...state,
-    resizedWidth: newWidth
-  };
-};
-const handleSashPointerUp = (state, eventX, eventY) => {
-  return state;
-};
-
-const getLineInfoVirtualDom = lineInfo => {
-  const dom = [{
-    type: Div,
-    className: HoverEditorRow,
-    childCount: lineInfo.length / 2
-  }];
-  for (let i = 0; i < lineInfo.length; i += 2) {
-    const tokenText = lineInfo[i];
-    const tokenClass = lineInfo[i + 1];
-    dom.push({
-      type: Span,
-      className: tokenClass,
-      childCount: 1
-    },
-    // @ts-ignore
-    text(tokenText));
-  }
-  return dom;
-};
-const getLineInfosVirtualDom = lineInfos => {
-  const dom = lineInfos.flatMap(getLineInfoVirtualDom);
-  return dom;
-};
-
-const hoverProblemMessage = {
-  type: Span,
-  className: HoverProblemMessage,
-  childCount: 1
-};
-const hoverProblemDetail = {
-  type: Span,
-  className: HoverProblemDetail,
-  childCount: 1
-};
-const getChildCount = (lineInfos, documentation, diagnostics) => {
-  return lineInfos.length + documentation ? 1 : 0 + (diagnostics && diagnostics.length > 0) ? 1 : 0;
-};
-const getHoverVirtualDom = (lineInfos, documentation, diagnostics) => {
-  const dom = [];
-  dom.push({
-    type: Div,
-    className: 'Viewlet EditorHover',
-    childCount: getChildCount(lineInfos, documentation, diagnostics) + 1
-  });
-  if (diagnostics && diagnostics.length > 0) {
-    dom.push({
-      type: Div,
-      className: `${HoverDisplayString} ${HoverProblem}`,
-      childCount: diagnostics.length * 2
-    });
-    for (const diagnostic of diagnostics) {
-      dom.push(hoverProblemMessage, text(diagnostic.message), hoverProblemDetail, text(`${diagnostic.source} (${diagnostic.code})`));
-    }
-  }
-  if (lineInfos.length > 0) {
-    const lineInfosDom = getLineInfosVirtualDom(lineInfos);
-    dom.push({
-      type: Div,
-      className: HoverDisplayString,
-      childCount: lineInfos.length
-    }, ...lineInfosDom);
-  }
-  if (documentation) {
-    dom.push({
-      type: Div,
-      className: HoverDocumentation,
-      childCount: 1
-    }, text(documentation));
-  }
-  dom.push({
-    type: Div,
-    className: 'Sash SashVertical SashResize',
-    childCount: 0,
-    onPointerDown: HandleSashPointerDown
-  });
-  console.log({
-    dom
-  });
-  return dom;
-};
-
-const renderHoverDom = {
-  isEqual(oldState, newState) {
-    return oldState.lineInfos === newState.lineInfos && oldState.documentation === newState.documentation && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.diagnostics === newState.diagnostics;
-  },
-  apply(oldState, newState) {
-    const dom = getHoverVirtualDom(newState.lineInfos, newState.documentation, newState.diagnostics);
-    return [/* method */'Viewlet.setDom2', dom];
-  }
-};
-const renderBounds = {
-  isEqual(oldState, newState) {
-    return oldState.x === newState.x && oldState.y === newState.y && oldState.resizedWidth === newState.resizedWidth;
-  },
-  apply(oldState, newState) {
-    // @ts-ignore
-    const {
-      x,
-      y,
-      width,
-      height,
-      resizedWidth,
-      uid
-    } = newState;
-    console.log('apply');
-    return [SetBounds, x, y, resizedWidth, height];
-  }
-};
-const render = [renderHoverDom, renderBounds];
-const renderHover = async (oldState, newState) => {
-  const commands = [];
-  for (const item of render) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
-};
-
 const commandMap = {
   'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
   'ColorPicker.handleSliderPointerMove': handleSliderPointerMove,
@@ -8222,6 +8672,8 @@ const commandMap = {
   'Editor.deleteWordRight': deleteWordRight,
   'Editor.findAllReferences': findAllReferences,
   'Editor.format': format,
+  'Editor.getSelections': getSelections,
+  'Editor.getText': getText,
   'Editor.getWordAt': getWordAt,
   'Editor.getWordBefore': getWordBefore,
   'Editor.goToDefinition': goToDefinition,
@@ -8260,6 +8712,7 @@ const commandMap = {
   'Editor.moveSelection': editorMoveSelection,
   'Editor.moveSelectionPx': moveSelectionPx,
   'Editor.offsetAt': offsetAt,
+  'Editor.openCompletion': openCompletion,
   'Editor.openFind': openFind,
   'Editor.organizeImports': organizeImports,
   'Editor.paste': paste,
@@ -8300,10 +8753,14 @@ const commandMap = {
   'Editor.undo': undo,
   'Editor.unIndent': editorUnindent,
   'EditorCompletion.advance': advance,
+  '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,
-  'EditorCompletion.handleEditorType': handleEditorType,
+  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$1,
+  'EditorCompletion.handleEditorType': handleEditorType$1,
   'EditorCompletion.loadContent': loadContent$2,
   'EditorCompletion.selectCurrent': selectCurrent,
   'EditorCompletion.selectIndex': selectIndex,
@@ -8313,14 +8770,14 @@ const commandMap = {
   'FindWidget.focusNext': focusNext,
   'FindWidget.focusPrevious': focusPrevious,
   'FindWidget.handleInput': handleInput,
-  'FindWidget.loadContent': loadContent$1,
+  '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,
-  'Hover.loadContent': loadContent,
   'Initialize.initialize': intialize
 };
 wrapCommands(commandMap);
@@ -8744,6 +9201,7 @@ const listen$1 = async ({
 
 const listen = async () => {
   registerCommands(commandMap);
+  register(Completion, EditorCompletionWidget);
   const ipc = await listen$1({
     method: Auto()
   });