@lvce-editor/server 0.37.2 → 0.37.3

package/static/{5372b49 → a443afb}/packages/editor-worker/dist/editorWorkerMain.js

@@ -2,7 +2,7 @@ const commands = Object.create(null);
 const registerCommand = (key, fn) => {
   commands[key] = fn;
 };
-const register$1 = commandMap => {
+const register = commandMap => {
   for (const [key, value] of Object.entries(commandMap)) {
     registerCommand(key, value);
   }
@@ -131,8 +131,8 @@ const handleSliderPointerMove = (state, x, y) => {
 // TODO use numeric enum
 const CompositionUpdate = 'compositionUpdate';
 const ContentEditableInput = 'contentEditableInput';
-const DeleteLeft = 'deleteLeft';
 const DeleteHorizontalRight = 'deleteHorizontalRight';
+const DeleteLeft = 'deleteLeft';
 const EditorCut = 'editorCut';
 const EditorPasteText = 'editorPasteText';
 const EditorSnippet = 'editorSnippet';
@@ -142,18 +142,19 @@ const Format = 'format';
 const IndentLess = 'indentLess';
 const IndentMore = 'indentMore';
 const InsertLineBreak = 'insertLineBreak';
+const ReplaceAll$2 = 'replaceAll';
 const ToggleBlockComment = 'toggleBlockComment';
 
-const modules = Object.create(null);
-const register = (id, value) => {
-  modules[id] = value;
+const map$1 = Object.create(null);
+const set$7 = (id, widget) => {
+  map$1[id] = widget;
 };
-const get$8 = id => {
-  return modules[id];
+const get$7 = id => {
+  return map$1[id];
 };
 
 const getModule$2 = id => {
-  return get$8(id);
+  return get$7(id);
 };
 
 const applyWidgetChange = (editor, widget, changes) => {
@@ -587,7 +588,7 @@ const alloc = length => {
 const clone = selections => {
   return alloc(selections.length);
 };
-const map$1 = (selections, fn) => {
+const map = (selections, fn) => {
   const newSelections = clone(selections);
   for (let i = 0; i < newSelections.length; i += 4) {
     const [selectionStartRow, selectionStartColumn, selectionEndRow, selectionEndColumn] = getSelectionPairs(selections, i);
@@ -866,7 +867,7 @@ const scheduleSelections = (editor, selectionEdits) => {
 };
 
 /**
- *
+ * TODO make this synchronous maybe?
  * @param {any} editor
  * @param {any[]} changes
  * @param {Uint32Array|undefined} selectionChanges
@@ -1021,11 +1022,11 @@ const setText = (editor, text) => {
 };
 
 const editors = Object.create(null);
-const get$7 = id => {
+const get$6 = id => {
   number$1(id);
   return editors[id];
 };
-const set$7 = (id, oldEditor, newEditor) => {
+const set$6 = (id, oldEditor, newEditor) => {
   number$1(id);
   object(oldEditor);
   object(newEditor);
@@ -1073,10 +1074,10 @@ const number = value => {
 const state$1$1 = {
   callbacks: Object.create(null)
 };
-const set$6 = (id, fn) => {
+const set$5 = (id, fn) => {
   state$1$1.callbacks[id] = fn;
 };
-const get$6 = id => {
+const get$5 = id => {
   return state$1$1.callbacks[id];
 };
 const remove$6 = id => {
@@ -1110,7 +1111,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = withResolvers$2();
-  set$6(id, resolve);
+  set$5(id, resolve);
   return {
     id,
     promise
@@ -1118,7 +1119,7 @@ const registerPromise = () => {
 };
 const resolve = (id, args) => {
   number(id);
-  const fn = get$6(id);
+  const fn = get$5(id);
   if (!fn) {
     console.log(args);
     warn$1(`callback ${id} may already be disposed`);
@@ -1468,23 +1469,23 @@ const state$8 = {
    */
   ipc: undefined
 };
-const get$5 = () => {
+const get$4 = () => {
   return state$8.ipc;
 };
-const set$5 = ipc => {
+const set$4 = ipc => {
   state$8.ipc = ipc;
 };
 
 const invoke$4 = (method, ...params) => {
-  const ipc = get$5();
+  const ipc = get$4();
   return invoke$5(ipc, method, ...params);
 };
 const invokeAndTransfer$1 = async (method, ...params) => {
-  const ipc = get$5();
+  const ipc = get$4();
   return invokeAndTransfer$2(ipc, method, ...params);
 };
 const listen$8 = ipc => {
-  set$5(ipc);
+  set$4(ipc);
 };
 
 const invoke$3 = async (method, ...params) => {
@@ -1860,7 +1861,7 @@ const createEditor = async ({
     ...newEditor3,
     focused: true
   };
-  set$7(id, emptyEditor, newEditor4);
+  set$6(id, emptyEditor, newEditor4);
   await invoke$2(TextDocumentSyncFull, uri, id, languageId, content);
 };
 
@@ -2883,7 +2884,7 @@ const moveSelectionDown = (selections, i, selectionStartRow, selectionStartColum
   moveRangeToPosition$1(selections, i, selectionEndRow + 1, selectionEndColumn);
 };
 const getNewSelections$9 = selections => {
-  return map$1(selections, moveSelectionDown);
+  return map(selections, moveSelectionDown);
 };
 const cursorDown = editor => {
   const {
@@ -2919,7 +2920,7 @@ const moveSelectionWithoutIntlSegmenter = (selections, i, selectionStartRow, sel
   }
 };
 const getNewSelections$8 = selections => {
-  return map$1(selections, moveSelectionWithoutIntlSegmenter);
+  return map(selections, moveSelectionWithoutIntlSegmenter);
 };
 const cursorVertical = (editor, getPosition, getEdgePosition, delta) => {
   const {
@@ -3698,10 +3699,10 @@ const state$4 = {
   y: 0,
   editor: undefined
 };
-const get$4 = () => {
+const get$3 = () => {
   return state$4;
 };
-const set$4 = (editor, timeout, x, y) => {
+const set$3 = (editor, timeout, x, y) => {
   state$4.editor = editor;
   state$4.timeout = timeout;
   state$4.x = x;
@@ -3727,7 +3728,7 @@ const onHoverIdle = async () => {
     x,
     y,
     editor
-  } = get$4();
+  } = get$3();
   at(editor, x, y);
   await showHover$1();
 };
@@ -3738,12 +3739,12 @@ const handleMouseMove = (editor, x, y) => {
   if (!editor.hoverEnabled) {
     return editor;
   }
-  const oldState = get$4();
+  const oldState = get$3();
   if (oldState.timeout !== -1) {
     clearTimeout(oldState.timeout);
   }
   const timeout = setTimeout(onHoverIdle, hoverDelay);
-  set$4(editor, timeout, x, y);
+  set$3(editor, timeout, x, y);
   return editor;
 };
 
@@ -4800,7 +4801,7 @@ const filterCompletionItems = (completionItems, word) => {
 };
 
 const getEditor = editorUid => {
-  const instance = get$7(editorUid);
+  const instance = get$6(editorUid);
   if (!instance) {
     throw new Error(`editor ${editorUid} not found`);
   }
@@ -4843,7 +4844,7 @@ const getWordAtOffset = editor => {
   }
   return '';
 };
-const handleEditorType$1 = (editorUid, state, text) => {
+const handleEditorType$2 = (editorUid, state, text) => {
   const editor = getEditor(editorUid);
   const {
     unfilteredItems,
@@ -4873,7 +4874,7 @@ const handleEditorType$1 = (editorUid, state, text) => {
     finalDeltaY
   };
 };
-const handleEditorDeleteLeft$1 = (editorUid, state) => {
+const handleEditorDeleteLeft$2 = (editorUid, state) => {
   const editor = getEditor(editorUid);
   const {
     unfilteredItems,
@@ -4981,7 +4982,7 @@ const openCompletion = async editor => {
     ...editor,
     widgets: newWidgets
   };
-  set$7(uid, editor, newEditor);
+  set$6(uid, editor, newEditor);
   const newCompletionWidget = await loadContent$2(uid, completionWidget.newState);
   const FocusEditorCompletions = EditorCompletion;
   await setAdditionalFocus(FocusEditorCompletions);
@@ -5253,6 +5254,35 @@ const handleBlur = async state => {
   return state;
 };
 
+const refresh$1 = (editor, state, value) => {
+  const {
+    lines
+  } = editor;
+  const matches = findMatchesCaseInsensitive(lines, value);
+  const matchCount = getMatchCount(matches);
+  return {
+    ...state,
+    matches,
+    matchIndex: 0,
+    matchCount,
+    value
+  };
+};
+
+const refresh = (state, value = state.value) => {
+  // TODO get focused editor
+  const {
+    editorUid
+  } = state;
+  // highlight locations that match value
+  const editor = getEditor(editorUid);
+  return refresh$1(editor, state, value);
+};
+
+const handleInput = (state, value) => {
+  return refresh(state, value);
+};
+
 const handleFindWidgetFocus = (state, focusKey) => {
   if (state.focus === focusKey) {
     return state;
@@ -5310,29 +5340,6 @@ const loadContent$1 = editorId => {
     editorUid: editor.uid
   };
 };
-const refresh = (state, value = state.value) => {
-  // TODO get focused editor
-  const {
-    editorUid
-  } = state;
-  // highlight locations that match value
-  const editor = getEditor(editorUid);
-  const {
-    lines
-  } = editor;
-  const matches = findMatchesCaseInsensitive(lines, value);
-  const matchCount = getMatchCount(matches);
-  return {
-    ...state,
-    matches,
-    matchIndex: 0,
-    matchCount,
-    value
-  };
-};
-const handleInput = (state, value) => {
-  return refresh(state, value);
-};
 const close$1 = async state => {
   // TODO
   // await Viewlet.closeWidget(uid)
@@ -5351,9 +5358,11 @@ const handleToggleReplaceFocus = async state => {
     focus: FocusFindWidgetToggleReplace
   };
 };
-const handleReplaceInput = state => {
-  // TODO
-  return state;
+const handleReplaceInput = (state, value) => {
+  return {
+    ...state,
+    replacement: value
+  };
 };
 
 const getFindWidgetPosition = editor => {
@@ -6145,10 +6154,10 @@ const state$1 = {
 const has = languageId => {
   return languageId in state$1.tokenizers;
 };
-const set$3 = (languageId, tokenizer) => {
+const set$2 = (languageId, tokenizer) => {
   state$1.tokenizers[languageId] = tokenizer;
 };
-const get$3 = languageId => {
+const get$2 = languageId => {
   return state$1.tokenizers[languageId];
 };
 const isPending = languageId => {
@@ -6169,10 +6178,10 @@ const {
 } = createRpc(SyntaxHighlightingWorker);
 
 const tokenMaps = Object.create(null);
-const set$2 = (languageId, tokenMap) => {
+const set$1 = (languageId, tokenMap) => {
   tokenMaps[languageId] = tokenMap;
 };
-const get$2 = languageId => {
+const get$1 = languageId => {
   return tokenMaps[languageId] || {};
 };
 
@@ -6183,7 +6192,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
   }
   if (getEnabled$1()) {
     const tokenMap = await invoke$1('Tokenizer.load', languageId, tokenizePath);
-    set$2(languageId, tokenMap);
+    set$1(languageId, tokenMap);
     return;
   }
   try {
@@ -6199,8 +6208,8 @@ const loadTokenizer = async (languageId, tokenizePath) => {
       console.warn(`tokenizer.TokenMap should be an object in "${tokenizePath}"`);
       return;
     }
-    set$2(languageId, tokenizer.TokenMap);
-    set$3(languageId, tokenizer);
+    set$1(languageId, tokenizer.TokenMap);
+    set$2(languageId, tokenizer);
   } catch (error) {
     // TODO better error handling
     console.error(error);
@@ -6209,7 +6218,7 @@ const loadTokenizer = async (languageId, tokenizePath) => {
 };
 const getTokenizer = languageId => {
   if (has(languageId)) {
-    return get$3(languageId);
+    return get$2(languageId);
   }
   if (isPending(languageId)) {
     return TokenizePlainText;
@@ -6218,10 +6227,10 @@ const getTokenizer = languageId => {
 };
 
 const tokenizers = Object.create(null);
-const set$1 = (id, value) => {
+const set = (id, value) => {
   tokenizers[id] = value;
 };
-const get$1 = id => {
+const get = id => {
   return tokenizers[id] || TokenizePlainText;
 };
 
@@ -6238,7 +6247,7 @@ const setLanguageId = async (editor, languageId, tokenizePath) => {
   await loadTokenizer(languageId, tokenizePath);
   const tokenizer = getTokenizer(languageId);
   const newTokenizerId = tokenizerId + 1;
-  set$1(newTokenizerId, tokenizer);
+  set(newTokenizerId, tokenizer);
   const latest = getEditor(editor.uid);
   if (!latest) {
     return editor;
@@ -6497,7 +6506,7 @@ const getHoverPositionXy = (editor, rowIndex, wordStart, documentationHeight) =>
 };
 const getEditorHoverInfo = async (editorUid, position) => {
   number$1(editorUid);
-  const instance = get$7(editorUid);
+  const instance = get$6(editorUid);
   const editor = instance.newState;
   const {
     selections
@@ -7511,7 +7520,8 @@ const create = () => {
       x: 0,
       y: 0,
       width: 0,
-      height: 0
+      height: 0,
+      borderSize: 1
     },
     newState: {
       content: '',
@@ -7519,7 +7529,8 @@ const create = () => {
       x: 0,
       y: 0,
       width: 0,
-      height: 0
+      height: 0,
+      borderSize: 1
     }
   };
   return completionWidget;
@@ -7869,6 +7880,56 @@ const renderHover = (oldState, newState) => {
   return commands;
 };
 
+const replaceTextOccurrences = (editor, matches, oldValue, newValue) => {
+  const ranges = [];
+  const oldValueLength = oldValue.length;
+  for (let i = 0; i < matches.length; i += 2) {
+    const startRowIndex = matches[i];
+    const startColumnIndex = matches[i + 1];
+    const endRowIndex = matches[i];
+    const endColumnIndex = matches[i] + oldValueLength;
+    ranges.push(startRowIndex, startColumnIndex, endRowIndex, endColumnIndex);
+  }
+  return replaceRange(editor, ranges, [newValue], ReplaceAll$2);
+};
+
+const updateWidget = (editor, widgetId, newState) => {
+  // TODO avoid closure
+  const isWidget = widget => {
+    return widget.id === widgetId;
+  };
+  const childIndex = editor.widgets.findIndex(isWidget);
+  // TODO scroll up/down if necessary
+  const childWidget = editor.widgets[childIndex];
+  const newWidget = {
+    ...childWidget,
+    oldState: childWidget.newState,
+    newState
+  };
+  const newWidgets = [...editor.widgets.slice(0, childIndex), newWidget, ...editor.widgets.slice(childIndex + 1)];
+  return {
+    ...editor,
+    widgets: newWidgets
+  };
+};
+
+const replaceAll$1 = async editor => {
+  const state = getFindState(editor);
+  if (!state) {
+    return editor;
+  }
+  const {
+    matches,
+    value,
+    replacement
+  } = state;
+  const edits = replaceTextOccurrences(editor, matches, value, replacement);
+  const newEditor = await applyEdit(editor, edits);
+  const newState = refresh$1(newEditor, state, value);
+  const newestEditor = updateWidget(newEditor, Find, newState);
+  return newestEditor;
+};
+
 const pending = Object.create(null);
 const loaded = Object.create(null);
 const setPending = (id, promise) => {
@@ -8188,7 +8249,7 @@ const getTokensViewport = (editor, startLineIndex, endLineIndex) => {
     lines,
     languageId
   } = editor;
-  const tokenizer = get$1(tokenizerId);
+  const tokenizer = get(tokenizerId);
   const {
     hasArrayReturn,
     tokenizeLine,
@@ -8452,7 +8513,7 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
     decorations,
     languageId
   } = editor;
-  const tokenMap = get$2(languageId);
+  const tokenMap = get$1(languageId);
   let offset = minLineOffset;
   const tabSize = 2;
   for (let i = minLineY; i < maxLineY; i++) {
@@ -8637,30 +8698,22 @@ const getSelectionsVirtualDom = selections => {
   return dom;
 };
 
-const map = Object.create(null);
-const set = (id, widget) => {
-  map[id] = widget;
-};
-const get = id => {
-  return map[id];
-};
-
 const addWidget$1 = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error('unsupported widget');
   }
   return module.add(widget);
 };
 const renderWidget = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error(`unsupported widget`);
   }
   return module.render(widget);
 };
 const removeWidget$1 = widget => {
-  const module = get(widget.id);
+  const module = get$7(widget.id);
   if (!module) {
     throw new Error(`unsupported widget`);
   }
@@ -8821,7 +8874,7 @@ const renderWidgets = {
 };
 const render$b = [renderLines, renderSelections, renderScrollBarX, renderScrollBarY, renderFocus$1, renderDecorations, renderGutterInfo, renderWidgets];
 const renderEditor = async id => {
-  const instance = get$7(id);
+  const instance = get$6(id);
   if (!instance) {
     return [];
   }
@@ -8830,7 +8883,7 @@ const renderEditor = async id => {
     newState
   } = instance;
   const commands = [];
-  set$7(id, newState, newState);
+  set$6(id, newState, newState);
   for (const item of render$b) {
     if (!item.isEqual(oldState, newState)) {
       const result = await item.apply(oldState, newState);
@@ -8862,16 +8915,8 @@ const wrapWidgetCommand = (widgetId, fn) => {
     // TODO scroll up/down if necessary
     const childWidget = editor.widgets[childIndex];
     const newState = await fn(childWidget.newState, ...args);
-    const newWidget = {
-      ...childWidget,
-      oldState: childWidget.newState,
-      newState
-    };
-    const newWidgets = [...editor.widgets.slice(0, childIndex), newWidget, ...editor.widgets.slice(childIndex + 1)];
-    return {
-      ...editor,
-      widgets: newWidgets
-    };
+    const newEditor = updateWidget(editor, widgetId, newState);
+    return newEditor;
   };
   return wrapped;
 };
@@ -8911,9 +8956,9 @@ const widgetCommands = {
 // TODO wrap commands globally, not per editor
 // TODO only store editor state in editor worker, not in renderer worker also
 const wrapCommand = fn => async (editorUid, ...args) => {
-  const oldInstance = get$7(editorUid);
+  const oldInstance = get$6(editorUid);
   const newEditor = await fn(oldInstance.newState, ...args);
-  set$7(editorUid, oldInstance.newState, newEditor);
+  set$6(editorUid, oldInstance.newState, newEditor);
   // TODO if possible, rendering should be sync
   const commands = await renderEditor(editorUid);
   newEditor.commands = commands;
@@ -9070,8 +9115,8 @@ const commandMap = {
   'EditorCompletion.focusPrevious': focusPrevious,
   'EditorCompletion.handleEditorBlur': handleEditorBlur,
   'EditorCompletion.handleEditorClick': handleEditorClick,
-  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$1,
-  'EditorCompletion.handleEditorType': handleEditorType$1,
+  'EditorCompletion.handleEditorDeleteLeft': handleEditorDeleteLeft$2,
+  'EditorCompletion.handleEditorType': handleEditorType$2,
   'EditorCompletion.handleWheel': handelWheel,
   'EditorCompletion.loadContent': loadContent$2,
   'EditorCompletion.openDetails': openDetails,
@@ -9101,6 +9146,7 @@ const commandMap = {
   'FindWidget.handleToggleReplaceFocus': handleToggleReplaceFocus,
   'FindWidget.loadContent': loadContent$1,
   'FindWidget.toggleReplace': toggleReplace,
+  'FindWidget.replaceAll': replaceAll$1,
   'Font.ensure': ensure,
   'Hover.getHoverInfo': getEditorHoverInfo,
   'Hover.handleSashPointerDown': handleSashPointerDown,
@@ -9112,425 +9158,69 @@ const commandMap = {
 };
 wrapCommands(commandMap);
 
-const CheckBox = 'checkbox';
-const Group = 'group';
-const None = 'none';
-const Option = 'option';
-
-const getFileIconVirtualDom = icon => {
-  return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None,
-    childCount: 0
-  };
-};
-
-const getIconDom = (fileIcon, symbolName) => {
-  if (fileIcon) {
-    return getFileIconVirtualDom(fileIcon);
+const MessagePort$1 = 1;
+const ModuleWorker = 2;
+const ReferencePort = 3;
+const ModuleWorkerAndMessagePort = 8;
+const Auto = () => {
+  // @ts-ignore
+  if (globalThis.acceptPort) {
+    return MessagePort$1;
   }
-  return {
-    type: Div,
-    className: `${ColoredMaskIcon} ${symbolName}`,
-    childCount: 0
-  };
+  // @ts-ignore
+  if (globalThis.acceptReferencePort) {
+    return ReferencePort;
+  }
+  return ModuleWorkerAndMessagePort;
 };
 
-const label1 = {
-  type: Div,
-  className: Label,
-  childCount: 1
-};
-const completionHighlight = {
-  type: Span,
-  className: EditorCompletionItemHighlight,
-  childCount: 1
+const getData$1 = event => {
+  return event.data;
 };
-const getHighlightedLabelDom = (label, highlights) => {
-  if (highlights.length === 0) {
-    return [label1, text(label)];
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
   }
-  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));
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
     }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    labelDom.childCount++;
-    dom.push(completionHighlight, text(highlightText));
-    position = highlightEnd;
+    return;
   }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    labelDom.childCount++;
-    dom.push(text(afterText));
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
   }
-  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 isMessagePort = value => {
+  return value && value instanceof MessagePort;
 };
-
-const getCompletionItemsVirtualDom = visibleItems => {
-  if (visibleItems.length === 0) {
-    return [{
-      type: Div,
-      childCount: 1
-    }, text(noResults$1())];
+const isMessagePortMain = value => {
+  return value && value.constructor && value.constructor.name === 'MessagePortMain';
+};
+const isOffscreenCanvas = value => {
+  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
+};
+const isInstanceOf = (value, constructorName) => {
+  return value?.constructor?.name === constructorName;
+};
+const isSocket = value => {
+  return isInstanceOf(value, 'Socket');
+};
+const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
+const isTransferrable = value => {
+  for (const fn of transferrables) {
+    if (fn(value)) {
+      return true;
+    }
   }
-  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$1;
-    case Folder:
-      return EmptyString$1;
-    default:
-      return EmptyString$1;
-  }
-};
-
-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$4 = {
-  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$a = [renderItems, renderBounds$4, renderHeight, renderNegativeMargin, renderScrollBar];
-const renderCompletion = (oldState, newState) => {
-  const commands = [];
-  for (const item of render$a) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
-};
-
-const removeWidget = widget => {
-  // @ts-ignore
-  return [['Viewlet.send', widget.newState.uid, 'dispose']];
-};
-
-const render$9 = widget => {
-  const commands = renderCompletion(widget.oldState, widget.newState);
-  const wrappedCommands = [];
-  const uid = widget.newState.uid;
-  for (const command of commands) {
-    wrappedCommands.push(['Viewlet.send', uid, ...command]);
-  }
-  return wrappedCommands;
-};
-const add$5 = widget => {
-  const commands = render$9(widget);
-  const id = 'EditorCompletion';
-  // TODO how to generate a unique integer id
-  // that doesn't collide with ids created in renderer worker?
-  const uid = widget.newState.uid;
-  const allCommands = [];
-  allCommands.push(['Viewlet.create', id, uid]);
-  allCommands.push(...commands);
-  return allCommands;
-};
-const remove$5 = removeWidget;
-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: add$5,
-  handleEditorDeleteLeft,
-  handleEditorType,
-  remove: remove$5,
-  render: render$9
-};
-
-const MessagePort$1 = 1;
-const ModuleWorker = 2;
-const ReferencePort = 3;
-const ModuleWorkerAndMessagePort = 8;
-const Auto = () => {
-  // @ts-ignore
-  if (globalThis.acceptPort) {
-    return MessagePort$1;
-  }
-  // @ts-ignore
-  if (globalThis.acceptReferencePort) {
-    return ReferencePort;
-  }
-  return ModuleWorkerAndMessagePort;
-};
-
-const getData$1 = event => {
-  return event.data;
-};
-const walkValue = (value, transferrables, isTransferrable) => {
-  if (!value) {
-    return;
-  }
-  if (isTransferrable(value)) {
-    transferrables.push(value);
-    return;
-  }
-  if (Array.isArray(value)) {
-    for (const item of value) {
-      walkValue(item, transferrables, isTransferrable);
-    }
-    return;
-  }
-  if (typeof value === 'object') {
-    for (const property of Object.values(value)) {
-      walkValue(property, transferrables, isTransferrable);
-    }
-    return;
-  }
-};
-const isMessagePort = value => {
-  return value && value instanceof MessagePort;
-};
-const isMessagePortMain = value => {
-  return value && value.constructor && value.constructor.name === 'MessagePortMain';
-};
-const isOffscreenCanvas = value => {
-  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
-};
-const isInstanceOf = (value, constructorName) => {
-  return value?.constructor?.name === constructorName;
-};
-const isSocket = value => {
-  return isInstanceOf(value, 'Socket');
-};
-const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
-const isTransferrable = value => {
-  for (const fn of transferrables) {
-    if (fn(value)) {
-      return true;
-    }
-  }
-  return false;
+  return false;
 };
 const getTransferrables = value => {
   const transferrables = [];
@@ -9927,121 +9617,513 @@ const getModule = method => {
       throw new Error('unexpected ipc type');
   }
 };
-
-// @ts-ignore
-const listen$1 = async ({
-  method
-}) => {
-  const module = await getModule(method);
-  const rawIpc = await module.listen();
-  // @ts-ignore
-  if (module.signal) {
-    // @ts-ignore
-    module.signal(rawIpc);
-  }
-  const ipc = module.wrap(rawIpc);
-  return ipc;
+
+// @ts-ignore
+const listen$1 = async ({
+  method
+}) => {
+  const module = await getModule(method);
+  const rawIpc = await module.listen();
+  // @ts-ignore
+  if (module.signal) {
+    // @ts-ignore
+    module.signal(rawIpc);
+  }
+  const ipc = module.wrap(rawIpc);
+  return ipc;
+};
+
+const listen = async () => {
+  register(commandMap);
+  const ipc = await listen$1({
+    method: Auto()
+  });
+  handleIpc(ipc);
+  listen$8(ipc);
+};
+
+const addWidget = (widget, id, render) => {
+  const commands = render(widget);
+  // TODO how to generate a unique integer id
+  // that doesn't collide with ids created in renderer worker?
+  // @ts-ignore
+  const uid = widget.newState.uid;
+  const allCommands = [];
+  allCommands.push(['Viewlet.createFunctionalRoot', id, uid]);
+  allCommands.push(...commands);
+  allCommands.push(['Viewlet.send', uid, 'appendWidget']);
+  const focusCommandIndex = allCommands.findIndex(command => command[2] === 'focus');
+  // TODO have separate rendering functions, e.g.
+  // 1. renderDom
+  // 2. renderAriaAnnouncement
+  // 3. renderFocus
+  // to ensure that focus is always after the element is added to the dom
+  if (focusCommandIndex !== -1) {
+    const command = allCommands[focusCommandIndex];
+    allCommands.splice(focusCommandIndex, 1);
+    allCommands.push(command);
+  }
+  return allCommands;
+};
+
+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 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 renderContent$1 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.min === newState.min && oldState.max === newState.max;
+  },
+  apply(oldState, newState) {
+    const dom = getColorPickerVirtualDom();
+    return ['Viewlet.setDom2', newState.uid, dom];
+  }
+};
+const renderBounds$4 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+  }
+};
+const render$a = [renderContent$1, renderBounds$4, renderColor, renderOffsetX];
+const renderFull$1 = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$a) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const removeWidget = widget => {
+  // @ts-ignore
+  return [['Viewlet.send', widget.newState.uid, 'dispose']];
+};
+
+const render$9 = widget => {
+  const commands = renderFull$1(widget.oldState, widget.newState);
+  const wrappedCommands = [];
+  const uid = widget.newState.uid;
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
+  }
+  return wrappedCommands;
+};
+const add$5 = widget => {
+  return addWidget(widget, 'ColorPicker', render$9);
+};
+const remove$5 = removeWidget;
+const Commands$1 = {
+  'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
+  'ColorPicker.handleSliderPointerMove': handleSliderPointerMove
+};
+
+const EditorColorPickerWidget = {
+  __proto__: null,
+  Commands: Commands$1,
+  add: add$5,
+  remove: remove$5,
+  render: render$9
+};
+
+const getCompletionDetailVirtualDom = content => {
+  const dom = [{
+    type: Div,
+    className: 'Viewlet EditorCompletionDetails',
+    childCount: 2
+  }, {
+    type: Div,
+    className: CompletionDetailContent,
+    childCount: 1
+  }, text(content), {
+    type: Div,
+    className: CompletionDetailCloseButton,
+    onClick: HandleClose,
+    childCount: 1
+  }, {
+    type: Div,
+    className: `${MaskIcon} ${IconClose}`,
+    childCount: 0
+  }];
+  return dom;
+};
+
+const renderParts = (render, oldState, newState) => {
+  const commands = [];
+  for (const item of render) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
+};
+
+const renderContent = {
+  isEqual(oldState, newState) {
+    return oldState.content === newState.content;
+  },
+  apply(oldState, newState) {
+    const dom = getCompletionDetailVirtualDom(newState.content);
+    return ['Viewlet.setDom2', newState.uid, dom];
+  }
+};
+const renderBounds$3 = {
+  isEqual(oldState, newState) {
+    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+  },
+  apply(oldState, newState) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = newState;
+    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+  }
+};
+const render$8 = [renderContent, renderBounds$3];
+const renderFull = (oldState, newState) => {
+  return renderParts(render$8, oldState, newState);
 };
 
-const listen = async () => {
-  register$1(commandMap);
-  register(Completion, EditorCompletionWidget);
-  const ipc = await listen$1({
-    method: Auto()
-  });
-  handleIpc(ipc);
-  listen$8(ipc);
+const getPositionAtCursor = editor => {
+  const {
+    selections
+  } = editor;
+  const rowIndex = selections[0];
+  const columnIndex = selections[1];
+  const x$1 = x(editor, rowIndex, columnIndex);
+  const y$1 = y(editor, rowIndex);
+  return {
+    x: x$1,
+    y: y$1,
+    rowIndex,
+    columnIndex
+  };
 };
 
-const addWidget = (widget, id, render) => {
-  const commands = render(widget);
-  // TODO how to generate a unique integer id
-  // that doesn't collide with ids created in renderer worker?
-  // @ts-ignore
+const render$7 = widget => {
+  const commands = renderFull(widget.oldState, widget.newState);
+  const wrappedCommands = [];
   const uid = widget.newState.uid;
-  const allCommands = [];
-  allCommands.push(['Viewlet.createFunctionalRoot', id, uid]);
-  allCommands.push(...commands);
-  allCommands.push(['Viewlet.send', uid, 'appendWidget']);
-  const focusCommandIndex = allCommands.findIndex(command => command[2] === 'focus');
-  // TODO have separate rendering functions, e.g.
-  // 1. renderDom
-  // 2. renderAriaAnnouncement
-  // 3. renderFocus
-  // to ensure that focus is always after the element is added to the dom
-  if (focusCommandIndex !== -1) {
-    const command = allCommands[focusCommandIndex];
-    allCommands.splice(focusCommandIndex, 1);
-    allCommands.push(command);
+  for (const command of commands) {
+    if (command[0] === 'Viewlet.setDom2') {
+      wrappedCommands.push(command);
+    } else {
+      wrappedCommands.push(['Viewlet.send', uid, ...command]);
+    }
   }
-  return allCommands;
+  return wrappedCommands;
+};
+const add$4 = widget => {
+  return addWidget(widget, 'EditorCompletionDetails', render$7);
+};
+const remove$4 = removeWidget;
+const handleEditorType$1 = (editor, state) => {
+  const completionState = getCompletionState(editor);
+  if (!completionState) {
+    return editor;
+  }
+  const {
+    x
+  } = getPositionAtCursor(editor);
+  const detailX = x + completionState.width - state.borderSize;
+  return {
+    ...state,
+    x: detailX
+  };
+};
+const handleEditorDeleteLeft$1 = (editor, state) => {
+  const completionState = getCompletionState(editor);
+  if (!completionState) {
+    return editor;
+  }
+  const {
+    x
+  } = getPositionAtCursor(editor);
+  const detailX = x + completionState.width - state.borderSize;
+  return {
+    ...state,
+    x: detailX
+  };
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const EditorCompletionDetailWidget = {
+  __proto__: null,
+  add: add$4,
+  handleEditorDeleteLeft: handleEditorDeleteLeft$1,
+  handleEditorType: handleEditorType$1,
+  remove: remove$4,
+  render: render$7
 };
 
-const getColorPickerVirtualDom = () => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, ColorPicker),
-    onPointerDown: HandlePointerDown,
-    childCount: 3
-  }, {
-    type: Div,
-    className: ColorPickerRectangle,
-    childCount: 3
-  }, {
-    type: Div,
-    className: ColorPickerBackgroundColor,
+const CheckBox = 'checkbox';
+const Group = 'group';
+const None = 'none';
+const Option = 'option';
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
     childCount: 0
-  }, {
+  };
+};
+
+const getIconDom = (fileIcon, symbolName) => {
+  if (fileIcon) {
+    return getFileIconVirtualDom(fileIcon);
+  }
+  return {
     type: Div,
-    className: ColorPickerLight,
+    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: ColorPickerDark,
+    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,
-    className: ColorPickerSlider,
-    childCount: 0
-  }, {
+    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$1())];
+  }
+  const root = {
     type: Div,
-    className: ColorPickerSliderThumb,
-    childCount: 0
-  }];
+    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;
+  }
 };
 
-const renderColor = {
-  isEqual(oldState, newState) {
-    return oldState.color === newState.color;
-  },
-  apply(oldState, newState) {
-    return [/* method */SetColor, /* color */newState.color];
+// TODO
+const getCompletionFileIcon = kind => {
+  switch (kind) {
+    case File:
+      return EmptyString$1;
+    case Folder:
+      return EmptyString$1;
+    default:
+      return EmptyString$1;
   }
 };
-const renderOffsetX = {
-  isEqual(oldState, newState) {
-    return oldState.offsetX === newState.offsetX;
-  },
-  apply(oldState, newState) {
-    return [/* method */SetOffsetX, /* offsetX */newState.offsetX];
+
+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 renderContent$1 = {
+
+const renderItems = {
   isEqual(oldState, newState) {
-    return oldState.x === newState.x && oldState.y === newState.y && oldState.min === newState.min && oldState.max === newState.max;
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex;
   },
   apply(oldState, newState) {
-    const dom = getColorPickerVirtualDom();
-    return ['Viewlet.setDom2', newState.uid, dom];
+    const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
+    const dom = getCompletionItemsVirtualDom(visibleItems);
+    return ['setDom', dom];
   }
 };
-const renderBounds$3 = {
+const renderBounds$2 = {
   isEqual(oldState, newState) {
-    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+    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 {
@@ -10053,128 +10135,135 @@ const renderBounds$3 = {
     return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
   }
 };
-const render$8 = [renderContent$1, renderBounds$3, renderColor, renderOffsetX];
-const renderFull$1 = (oldState, newState) => {
-  const commands = [];
-  for (const item of render$8) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
-  return commands;
-};
-
-const render$7 = widget => {
-  const commands = renderFull$1(widget.oldState, widget.newState);
-  const wrappedCommands = [];
-  const uid = widget.newState.uid;
-  for (const command of commands) {
-    if (command[0] === 'Viewlet.setDom2') {
-      wrappedCommands.push(command);
-    } else {
-      wrappedCommands.push(['Viewlet.send', uid, ...command]);
-    }
-  }
-  return wrappedCommands;
-};
-const add$4 = widget => {
-  return addWidget(widget, 'ColorPicker', render$7);
-};
-const remove$4 = removeWidget;
-const Commands$1 = {
-  'ColorPicker.handleSliderPointerDown': handleSliderPointerDown,
-  'ColorPicker.handleSliderPointerMove': handleSliderPointerMove
-};
-
-const EditorColorPickerWidget = {
-  __proto__: null,
-  Commands: Commands$1,
-  add: add$4,
-  remove: remove$4,
-  render: render$7
-};
-
-const getCompletionDetailVirtualDom = content => {
-  const dom = [{
-    type: Div,
-    className: 'Viewlet EditorCompletionDetails',
-    childCount: 2
-  }, {
-    type: Div,
-    className: CompletionDetailContent,
-    childCount: 1
-  }, text(content), {
-    type: Div,
-    className: CompletionDetailCloseButton,
-    onClick: HandleClose,
-    childCount: 1
-  }, {
-    type: Div,
-    className: `${MaskIcon} ${IconClose}`,
-    childCount: 0
-  }];
-  return dom;
-};
-
-const renderParts = (render, oldState, newState) => {
-  const commands = [];
-  for (const item of render) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
+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];
   }
-  return commands;
 };
-
-const renderContent = {
+const renderNegativeMargin = {
   isEqual(oldState, newState) {
-    return oldState.content === newState.content;
+    return oldState.deltaY === newState.deltaY;
   },
   apply(oldState, newState) {
-    const dom = getCompletionDetailVirtualDom(newState.content);
-    return ['Viewlet.setDom2', newState.uid, dom];
+    return [/* method */SetNegativeMargin, /* negativeMargin */-newState.deltaY];
   }
 };
-const renderBounds$2 = {
+const renderScrollBar = {
   isEqual(oldState, newState) {
-    return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+    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 {
-      x,
-      y,
-      width,
-      height
-    } = newState;
-    return [/* method */SetBounds, /* x */x, /* y */y, /* width */width, /* height */height];
+    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$6 = [renderContent, renderBounds$2];
-const renderFull = (oldState, newState) => {
-  return renderParts(render$6, oldState, newState);
+const render$6 = [renderItems, renderBounds$2, renderHeight, renderNegativeMargin, renderScrollBar];
+const renderCompletion = (oldState, newState) => {
+  const commands = [];
+  for (const item of render$6) {
+    if (!item.isEqual(oldState, newState)) {
+      commands.push(item.apply(oldState, newState));
+    }
+  }
+  return commands;
 };
 
 const render$5 = widget => {
-  const commands = renderFull(widget.oldState, widget.newState);
+  const commands = renderCompletion(widget.oldState, widget.newState);
   const wrappedCommands = [];
   const uid = widget.newState.uid;
   for (const command of commands) {
-    if (command[0] === 'Viewlet.setDom2') {
-      wrappedCommands.push(command);
-    } else {
-      wrappedCommands.push(['Viewlet.send', uid, ...command]);
-    }
+    wrappedCommands.push(['Viewlet.send', uid, ...command]);
   }
   return wrappedCommands;
 };
 const add$3 = widget => {
-  return addWidget(widget, 'EditorCompletionDetails', render$5);
+  const commands = render$5(widget);
+  const id = 'EditorCompletion';
+  // TODO how to generate a unique integer id
+  // that doesn't collide with ids created in renderer worker?
+  const uid = widget.newState.uid;
+  const allCommands = [];
+  allCommands.push(['Viewlet.create', id, uid]);
+  allCommands.push(...commands);
+  return allCommands;
 };
 const remove$3 = removeWidget;
+const handleEditorType = (editor, state) => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    x,
+    y,
+    rowIndex,
+    columnIndex
+  } = getPositionAtCursor(editor);
+  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,
+    y,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height,
+    finalDeltaY
+  };
+};
+const handleEditorDeleteLeft = (editor, state) => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight
+  } = state;
+  const {
+    x,
+    y,
+    rowIndex,
+    columnIndex
+  } = getPositionAtCursor(editor);
+  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,
+    y,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height
+  };
+};
 
-const EditorCompletionDetailWidget = {
+const EditorCompletionWidget = {
   __proto__: null,
   add: add$3,
+  handleEditorDeleteLeft,
+  handleEditorType,
   remove: remove$3,
   render: render$5
 };
@@ -10702,12 +10791,12 @@ const EditorSourceActionWidget = {
 };
 
 const registerWidgets = () => {
-  set(ColorPicker$2, EditorColorPickerWidget);
-  set(Completion, EditorCompletionWidget);
-  set(CompletionDetail$1, EditorCompletionDetailWidget);
-  set(Find, EditorFindWidget);
-  set(Hover, EditorHoverWidget);
-  set(SourceAction, EditorSourceActionWidget);
+  set$7(ColorPicker$2, EditorColorPickerWidget);
+  set$7(Completion, EditorCompletionWidget);
+  set$7(CompletionDetail$1, EditorCompletionDetailWidget);
+  set$7(Find, EditorFindWidget);
+  set$7(Hover, EditorHoverWidget);
+  set$7(SourceAction, EditorSourceActionWidget);
 };
 
 const main = async () => {